woocommerce/calendar-stories-date-picke...

601 lines
35 KiB
JavaScript

(self["webpackChunk_woocommerce_storybook"] = self["webpackChunk_woocommerce_storybook"] || []).push([[3381],{
/***/ "../../packages/js/components/src/calendar/date-picker.js":
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.to-string.js");
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var core_js_modules_es_reflect_construct_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.reflect.construct.js");
/* harmony import */ var core_js_modules_es_reflect_construct_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_reflect_construct_js__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/classCallCheck.js");
/* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/createClass.js");
/* harmony import */ var _babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js");
/* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/inherits.js");
/* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js");
/* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js");
/* harmony import */ var core_js_modules_es_function_bind_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.function.bind.js");
/* harmony import */ var core_js_modules_es_function_bind_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_function_bind_js__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var core_js_features_object_assign__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/features/object/assign.js");
/* harmony import */ var core_js_features_object_assign__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_features_object_assign__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var core_js_features_array_from__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/features/array/from.js");
/* harmony import */ var core_js_features_array_from__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_features_array_from__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("../../node_modules/.pnpm/@wordpress+i18n@4.6.1/node_modules/@wordpress/i18n/build-module/index.js");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/dropdown/index.js");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/date-time/date.js");
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__("../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/lodash.js");
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__("../../node_modules/.pnpm/moment@2.29.4/node_modules/moment/moment.js");
/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_9__);
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__("../../node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_21___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_21__);
/* harmony import */ var _woocommerce_date__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__("../../packages/js/date/src/index.ts");
/* harmony import */ var _input__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__("../../packages/js/components/src/calendar/input.js");
/* harmony import */ var _section__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__("../../packages/js/components/src/section/section.tsx");
/* harmony import */ var _section__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__("../../packages/js/components/src/section/header.tsx");
function _createSuper(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct();
return function _createSuperInternal() {
var Super = (0,_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A)(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = (0,_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A)(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0,_babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(this, result);
};
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
/**
* External dependencies
*/
/**
* Internal dependencies
*/
var DatePicker = /*#__PURE__*/function (_Component) {
(0,_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_11__/* ["default"] */ .A)(DatePicker, _Component);
var _super = _createSuper(DatePicker);
function DatePicker(props) {
var _this;
(0,_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .A)(this, DatePicker);
_this = _super.call(this, props);
_this.onDateChange = _this.onDateChange.bind((0,_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_13__/* ["default"] */ .A)(_this));
_this.onInputChange = _this.onInputChange.bind((0,_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_13__/* ["default"] */ .A)(_this));
return _this;
}
(0,_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .A)(DatePicker, [{
key: "handleFocus",
value: function handleFocus(isOpen, onToggle) {
if (!isOpen) {
onToggle();
}
}
}, {
key: "handleBlur",
value: function handleBlur(isOpen, onToggle, event) {
var _event$relatedTarget, _event$currentTarget;
if (!isOpen) {
return;
}
var relatedTargetParent = (_event$relatedTarget = event.relatedTarget) === null || _event$relatedTarget === void 0 ? void 0 : _event$relatedTarget.closest('.components-dropdown');
var currentTargetParent = (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.closest('.components-dropdown');
if (!relatedTargetParent || relatedTargetParent !== currentTargetParent) {
onToggle();
}
}
}, {
key: "onDateChange",
value: function onDateChange(onToggle, dateString) {
var _this$props = this.props,
onUpdate = _this$props.onUpdate,
dateFormat = _this$props.dateFormat;
var date = moment__WEBPACK_IMPORTED_MODULE_9___default()(dateString);
onUpdate({
date: date,
text: dateString ? date.format(dateFormat) : '',
error: null
});
onToggle();
}
}, {
key: "onInputChange",
value: function onInputChange(event) {
var value = event.target.value;
var dateFormat = this.props.dateFormat;
var date = (0,_woocommerce_date__WEBPACK_IMPORTED_MODULE_10__/* .toMoment */ .sf)(dateFormat, value);
var error = date ? null : _woocommerce_date__WEBPACK_IMPORTED_MODULE_10__/* .dateValidationMessages */ .Y6.invalid;
this.props.onUpdate({
date: date,
text: value,
error: value.length > 0 ? error : null
});
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
date = _this$props2.date,
disabled = _this$props2.disabled,
text = _this$props2.text,
dateFormat = _this$props2.dateFormat,
error = _this$props2.error,
isInvalidDate = _this$props2.isInvalidDate,
_this$props2$popoverP = _this$props2.popoverProps,
popoverProps = _this$props2$popoverP === void 0 ? {
inline: true
} : _this$props2$popoverP;
if (!popoverProps.placement) {
popoverProps.placement = 'bottom';
}
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_15__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_16__/* ["default"] */ .A, {
focusOnMount: false,
popoverProps: popoverProps,
renderToggle: function renderToggle(_ref) {
var isOpen = _ref.isOpen,
onToggle = _ref.onToggle;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_15__.createElement)(_input__WEBPACK_IMPORTED_MODULE_17__/* ["default"] */ .A, {
disabled: disabled,
value: text,
onChange: _this2.onInputChange,
onBlur: (0,lodash__WEBPACK_IMPORTED_MODULE_8__.partial)(_this2.handleBlur, isOpen, onToggle),
dateFormat: dateFormat,
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_7__.__)('Choose a date', 'woocommerce'),
error: error,
describedBy: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_7__/* .sprintf */ .nv)( /* translators: %s: date format specification */
(0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_7__.__)('Date input describing a selected date in format %s', 'woocommerce'), dateFormat),
onFocus: (0,lodash__WEBPACK_IMPORTED_MODULE_8__.partial)(_this2.handleFocus, isOpen, onToggle),
"aria-expanded": isOpen,
focusOnMount: false,
errorPosition: "top center"
});
},
renderContent: function renderContent(_ref2) {
var onToggle = _ref2.onToggle;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_15__.createElement)(_section__WEBPACK_IMPORTED_MODULE_18__/* .Section */ .w, {
component: false
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_15__.createElement)(_section__WEBPACK_IMPORTED_MODULE_19__.H, {
className: "woocommerce-calendar__date-picker-title"
}, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_7__.__)('select a date', 'woocommerce')), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_15__.createElement)("div", {
className: "woocommerce-calendar__react-dates is-core-datepicker"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_15__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_20__/* ["default"] */ .A, {
currentDate: date instanceof (moment__WEBPACK_IMPORTED_MODULE_9___default()) ? date.toDate() : date,
onChange: (0,lodash__WEBPACK_IMPORTED_MODULE_8__.partial)(_this2.onDateChange, onToggle)
// onMonthPreviewed is required to prevent a React error from happening.
,
onMonthPreviewed: lodash__WEBPACK_IMPORTED_MODULE_8__.noop,
isInvalidDate: isInvalidDate
})));
}
});
}
}]);
return DatePicker;
}(_wordpress_element__WEBPACK_IMPORTED_MODULE_15__.Component);
DatePicker.propTypes = {
/**
* A moment date object representing the selected date. `null` for no selection.
*/
date: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().object),
/**
* Whether the input is disabled.
*/
disabled: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().bool),
/**
* The date in human-readable format. Displayed in the text input.
*/
text: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().string),
/**
* A string error message, shown to the user.
*/
error: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().string),
/**
* A function called upon selection of a date or input change.
*/
onUpdate: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().func).isRequired,
/**
* The date format in moment.js-style tokens.
*/
dateFormat: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().string).isRequired,
/**
* A function to determine if a day on the calendar is not valid
*/
isInvalidDate: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().func)
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DatePicker);
/***/ }),
/***/ "../../packages/js/components/src/calendar/input.js":
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/popover/index.js");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/icon/index.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/calendar.js");
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js");
/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/lodash.js");
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("../../node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_6__);
/**
* External dependencies
*/
var DateInput = function DateInput(_ref) {
var _ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
value = _ref.value,
onChange = _ref.onChange,
dateFormat = _ref.dateFormat,
label = _ref.label,
describedBy = _ref.describedBy,
error = _ref.error,
_ref$onFocus = _ref.onFocus,
onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
_ref$onBlur = _ref.onBlur,
onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
_ref$onKeyDown = _ref.onKeyDown,
onKeyDown = _ref$onKeyDown === void 0 ? lodash__WEBPACK_IMPORTED_MODULE_1__.noop : _ref$onKeyDown,
_ref$errorPosition = _ref.errorPosition,
errorPosition = _ref$errorPosition === void 0 ? 'bottom center' : _ref$errorPosition;
var classes = classnames__WEBPACK_IMPORTED_MODULE_0___default()('woocommerce-calendar__input', {
'is-empty': value.length === 0,
'is-error': error
});
var id = (0,lodash__WEBPACK_IMPORTED_MODULE_1__.uniqueId)('_woo-dates-input');
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)("div", {
className: classes
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)("input", {
type: "text",
className: "woocommerce-calendar__input-text",
value: value,
onChange: onChange,
"aria-label": label,
id: id,
"aria-describedby": "".concat(id, "-message"),
placeholder: dateFormat.toLowerCase(),
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
disabled: disabled
}), error && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A, {
className: "woocommerce-calendar__input-error",
focusOnMount: false,
position: errorPosition
}, error), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)(_wordpress_icons__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, {
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A,
className: "calendar-icon"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)("p", {
className: "screen-reader-text",
id: "".concat(id, "-message")
}, error || describedBy));
};
DateInput.propTypes = {
disabled: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().bool),
value: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().string),
onChange: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().func).isRequired,
dateFormat: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().string).isRequired,
label: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().string).isRequired,
describedBy: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().string).isRequired,
error: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().string),
errorPosition: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().string),
onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().func),
onBlur: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().func),
onKeyDown: (prop_types__WEBPACK_IMPORTED_MODULE_6___default().func)
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DateInput);
/***/ }),
/***/ "../../packages/js/components/src/section/context.tsx":
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ $: () => (/* binding */ Level)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
/**
* External dependencies
*/
/**
* Context container for heading level. We start at 2 because the `h1` is defined in <Header />
*
* See https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3
*/
var Level = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createContext)(2);
/***/ }),
/***/ "../../packages/js/components/src/section/header.tsx":
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ H: () => (/* binding */ H)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../packages/js/components/src/section/context.tsx");
/**
* External dependencies
*/
/**
* Internal dependencies
*/
/**
* These components are used to frame out the page content for accessible heading hierarchy. Instead of defining fixed heading levels
* (`h2`, `h3`, …) you can use `<H />` to create "section headings", which look to the parent `<Section />`s for the appropriate
* heading level.
*
* @type {HTMLElement}
*/
function H(props) {
var level = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context__WEBPACK_IMPORTED_MODULE_1__/* .Level */ .$);
var Heading = 'h' + Math.min(level, 6);
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(Heading, props);
}
try {
// @ts-ignore
H.displayName = "H";
// @ts-ignore
H.__docgenInfo = { "description": "These components are used to frame out the page content for accessible heading hierarchy. Instead of defining fixed heading levels\n(`h2`, `h3`, \u2026) you can use `<H />` to create \"section headings\", which look to the parent `<Section />`s for the appropriate\nheading level.", "displayName": "H", "props": {} };
// @ts-ignore
if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
// @ts-ignore
STORYBOOK_REACT_CLASSES["../../packages/js/components/src/section/header.tsx#H"] = { docgenInfo: H.__docgenInfo, name: "H", path: "../../packages/js/components/src/section/header.tsx#H" };
}
catch (__react_docgen_typescript_loader_error) { }
/***/ }),
/***/ "../../packages/js/components/src/section/section.tsx":
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ w: () => (/* binding */ Section)
/* harmony export */ });
/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../../packages/js/components/src/section/context.tsx");
var _excluded = ["component", "children"];
/**
* External dependencies
*/
/**
* Internal dependencies
*/
/**
* The section wrapper, used to indicate a sub-section (and change the header level context).
*/
var Section = function Section(_ref) {
var component = _ref.component,
children = _ref.children,
props = (0,_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A)(_ref, _excluded);
var Component = component || 'div';
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.createElement)(_context__WEBPACK_IMPORTED_MODULE_2__/* .Level */ .$.Consumer, null, function (level) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.createElement)(_context__WEBPACK_IMPORTED_MODULE_2__/* .Level */ .$.Provider, {
value: level + 1
}, component === false ? children : (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.createElement)(Component, props, children));
});
};
try {
// @ts-ignore
Section.displayName = "Section";
// @ts-ignore
Section.__docgenInfo = { "description": "The section wrapper, used to indicate a sub-section (and change the header level context).", "displayName": "Section", "props": { "component": { "defaultValue": null, "description": "The wrapper component for this section. Optional, defaults to `div`. If passed false, no wrapper is used. Additional props passed to Section are passed on to the component.", "name": "component", "required": false, "type": { "name": "string | false | ComponentType<{}>" } }, "className": { "defaultValue": null, "description": "Optional classname", "name": "className", "required": false, "type": { "name": "string" } }, "children": { "defaultValue": null, "description": "The children inside this section, rendered in the `component`. This increases the context level for the next heading used.", "name": "children", "required": true, "type": { "name": "ReactNode" } } } };
// @ts-ignore
if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
// @ts-ignore
STORYBOOK_REACT_CLASSES["../../packages/js/components/src/section/section.tsx#Section"] = { docgenInfo: Section.__docgenInfo, name: "Section", path: "../../packages/js/components/src/section/section.tsx#Section" };
}
catch (__react_docgen_typescript_loader_error) { }
/***/ }),
/***/ "../../packages/js/components/src/calendar/stories/date-picker.story.js":
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ Basic: () => (/* binding */ Basic),
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.keys.js");
/* harmony import */ var core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.symbol.js");
/* harmony import */ var core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_js__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.filter.js");
/* harmony import */ var core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter_js__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.to-string.js");
/* harmony import */ var core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string_js__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.get-own-property-descriptor.js");
/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptor_js__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var core_js_modules_es_array_for_each_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.for-each.js");
/* harmony import */ var core_js_modules_es_array_for_each_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_for_each_js__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/web.dom-collections.for-each.js");
/* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.get-own-property-descriptors.js");
/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptors_js__WEBPACK_IMPORTED_MODULE_7__);
/* harmony import */ var core_js_modules_es_object_define_properties_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.define-properties.js");
/* harmony import */ var core_js_modules_es_object_define_properties_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_define_properties_js__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var core_js_modules_es_object_define_property_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.define-property.js");
/* harmony import */ var core_js_modules_es_object_define_property_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_define_property_js__WEBPACK_IMPORTED_MODULE_9__);
/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/defineProperty.js");
/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/slicedToArray.js");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__("../../node_modules/.pnpm/moment@2.29.4/node_modules/moment/moment.js");
/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_11__);
/* harmony import */ var _woocommerce_components__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__("../../packages/js/components/src/section/header.tsx");
/* harmony import */ var _woocommerce_components__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__("../../packages/js/components/src/section/section.tsx");
/* harmony import */ var _woocommerce_components__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__("../../packages/js/components/src/calendar/date-picker.js");
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
(0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_10__/* ["default"] */ .A)(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
/**
* External dependencies
*/
var dateFormat = 'MM/DD/YYYY';
var DatePickerExample = function DatePickerExample() {
var _useState = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_12__.useState)({
after: null,
afterText: '',
before: null,
beforeText: '',
afterError: null,
beforeError: null,
focusedInput: 'startDate'
}),
_useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_13__/* ["default"] */ .A)(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
var after = state.after,
afterText = state.afterText,
afterError = state.afterError;
function onDatePickerUpdate(_ref) {
var date = _ref.date,
text = _ref.text,
error = _ref.error;
setState(_objectSpread(_objectSpread({}, state), {}, {
after: date,
afterText: text,
afterError: error
}));
}
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_12__.createElement)("div", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_12__.createElement)(_woocommerce_components__WEBPACK_IMPORTED_MODULE_14__.H, null, "Date Picker"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_12__.createElement)(_woocommerce_components__WEBPACK_IMPORTED_MODULE_15__/* .Section */ .w, {
component: false
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_12__.createElement)(_woocommerce_components__WEBPACK_IMPORTED_MODULE_16__/* ["default"] */ .A, {
date: after,
text: afterText,
error: afterError,
onUpdate: onDatePickerUpdate,
dateFormat: dateFormat,
isInvalidDate: function isInvalidDate(date) {
return moment__WEBPACK_IMPORTED_MODULE_11___default()(date).day() === 1;
}
})));
};
var Basic = function Basic() {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_12__.createElement)(DatePickerExample, null);
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
title: 'WooCommerce Admin/components/calendar/DatePicker',
component: _woocommerce_components__WEBPACK_IMPORTED_MODULE_16__/* ["default"] */ .A
});
Basic.parameters = {
...Basic.parameters,
docs: {
...Basic.parameters?.docs,
source: {
originalSource: "() => <DatePickerExample />",
...Basic.parameters?.docs?.source
}
}
};
/***/ }),
/***/ "?bbf9":
/***/ (() => {
/* (ignored) */
/***/ })
}]);