isOutsideRange: function isOutsideRange(date) {
return isInvalidDate && isInvalidDate(date.toDate());
isDayHighlighted: this.isDayHighlighted,
onPrevMonthClick: this.keepFocusInside,
onNextMonthClick: this.keepFocusInside
}(external_wp_element_["Component"]);
/* harmony default export */ var date_time_date = (date_DatePicker);
// EXTERNAL MODULE: external ["wp","date"]
var external_wp_date_ = __webpack_require__("FqII");
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/timezone.js
* Displays timezone information when user timezone is different from site timezone.
var timezone_TimeZone = function TimeZone() {
var _getDateSettings = Object(external_wp_date_["__experimentalGetSettings"])(),
timezone = _getDateSettings.timezone; // Convert timezone offset to hours.
var userTimezoneOffset = -1 * (new Date().getTimezoneOffset() / 60); // System timezone and user timezone match, nothing needed.
// Compare as numbers because it comes over as string.
if (Number(timezone.offset) === userTimezoneOffset) {
var offsetSymbol = timezone.offset >= 0 ? '+' : '';
var zoneAbbr = '' !== timezone.abbr && isNaN(timezone.abbr) ? timezone.abbr : "UTC".concat(offsetSymbol).concat(timezone.offset);
var timezoneDetail = 'UTC' === timezone.string ? Object(external_wp_i18n_["__"])('Coordinated Universal Time') : "(".concat(zoneAbbr, ") ").concat(timezone.string.replace('_', ' '));
return Object(external_wp_element_["createElement"])(build_module_tooltip["a" /* default */], {
}, Object(external_wp_element_["createElement"])("div", {
className: "components-datetime__timezone"
/* harmony default export */ var date_time_timezone = (timezone_TimeZone);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time.js
function time_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function time_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { time_ownKeys(Object(source), true).forEach(function (key) { Object(esm_defineProperty["a" /* default */])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { time_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var time_TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
* <UpdateOnBlurAsIntegerField>
* A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.
* @param {Object} props Component props.
* @param {string} props.as Render the component as specific element tag, defaults to "input".
* @param {number|string} props.value The default value of the component which will be parsed to integer.
* @param {Function} props.onUpdate Call back when blurred and validated.
function UpdateOnBlurAsIntegerField(_ref) {
onUpdate = _ref.onUpdate,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["as", "value", "onUpdate"]);
function handleBlur(event) {
var target = event.target;
if (value === target.value) {
var parsedValue = parseInt(target.value, 10); // Run basic number validation on the input.
if (!Object(external_lodash_["isInteger"])(parsedValue) || typeof props.max !== 'undefined' && parsedValue > props.max || typeof props.min !== 'undefined' && parsedValue < props.min) {
// If validation failed, reset the value to the previous valid value.
// Otherwise, it's valid, call onUpdate.
onUpdate(target.name, parsedValue);
return Object(external_wp_element_["createElement"])(as || 'input', time_objectSpread({
// Re-mount the input value to accept the latest value as the defaultValue.
* @typedef {Date|string|number} WPValidDateTimeFormat
* @param {Object} props Component props.
* @param {boolean} props.is12Hour Should the time picker showed in 12 hour format or 24 hour format.
* @param {WPValidDateTimeFormat} props.currentTime The initial current time the time picker should render.
* @param {Function} props.onChange Callback function when the date changed.
function TimePicker(_ref2) {
var is12Hour = _ref2.is12Hour,
currentTime = _ref2.currentTime,
onChange = _ref2.onChange;
var _useState = Object(external_wp_element_["useState"])(function () {
return (// Truncate the date at the minutes, see: #15495.
external_moment_default()(currentTime).startOf('minutes')
_useState2 = Object(slicedToArray["a" /* default */])(_useState, 2),
setDate = _useState2[1]; // Reset the state when currentTime changed.
Object(external_wp_element_["useEffect"])(function () {
setDate(currentTime ? external_moment_default()(currentTime).startOf('minutes') : external_moment_default()());
var _useMemo = Object(external_wp_element_["useMemo"])(function () {
month: date.format('MM'),
year: date.format('YYYY'),
minutes: date.format('mm'),
hours: date.format(is12Hour ? 'hh' : 'HH'),
am: date.format('H') <= 11 ? 'AM' : 'PM'
minutes = _useMemo.minutes,
* Function that sets the date state and calls the onChange with a new date.
* The date is truncated at the minutes.
* @param {Object} newDate The date object.
function changeDate(newDate) {
onChange(newDate.format(time_TIMEZONELESS_FORMAT));
function update(name, value) {
// Clone the date and call the specific setter function according to `name`.
var newDate = date.clone()[name](value);
function updateAmPm(value) {
var parsedHours = parseInt(hours, 10);
var newDate = date.clone().hours(value === 'PM' ? (parsedHours % 12 + 12) % 24 : parsedHours % 12);
var dayFormat = Object(external_wp_element_["createElement"])("div", {
className: "components-datetime__time-field components-datetime__time-field-day"
}, Object(external_wp_element_["createElement"])(UpdateOnBlurAsIntegerField, {
"aria-label": Object(external_wp_i18n_["__"])('Day'),
className: "components-datetime__time-field-day-input",
type: "number" // The correct function to call in moment.js is "date" not "day".
var monthFormat = Object(external_wp_element_["createElement"])("div", {
className: "components-datetime__time-field components-datetime__time-field-month"
}, Object(external_wp_element_["createElement"])(UpdateOnBlurAsIntegerField, {
"aria-label": Object(external_wp_i18n_["__"])('Month'),
className: "components-datetime__time-field-month-select",
value: month // The value starts from 0, so we have to -1 when setting month.
onUpdate: function onUpdate(key, value) {
return update(key, value - 1);
}, Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('January')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('February')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('March')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('April')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('May')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('June')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('July')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('August')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('September')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('October')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('November')), Object(external_wp_element_["createElement"])("option", {
}, Object(external_wp_i18n_["__"])('December'))));
var dayMonthFormat = is12Hour ? Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, dayFormat, monthFormat) : Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, monthFormat, dayFormat);
return Object(external_wp_element_["createElement"])("div", {
className: classnames_default()('components-datetime__time')
}, Object(external_wp_element_["createElement"])("fieldset", null, Object(external_wp_element_["createElement"])("legend", {
className: "components-datetime__time-legend invisible"
}, Object(external_wp_i18n_["__"])('Date')), Object(external_wp_element_["createElement"])("div", {
className: "components-datetime__time-wrapper"
}, dayMonthFormat, Object(external_wp_element_["createElement"])("div", {
className: "components-datetime__time-field components-datetime__time-field-year"
}, Object(external_wp_element_["createElement"])(UpdateOnBlurAsIntegerField, {
"aria-label": Object(external_wp_i18n_["__"])('Year'),
className: "components-datetime__time-field-year-input",
})))), Object(external_wp_element_["createElement"])("fieldset", null, Object(external_wp_element_["createElement"])("legend", {
className: "components-datetime__time-legend invisible"
}, Object(external_wp_i18n_["__"])('Time')), Object(external_wp_element_["createElement"])("div", {
className: "components-datetime__time-wrapper"
}, Object(external_wp_element_["createElement"])("div", {
className: "components-datetime__time-field components-datetime__time-field-time"
}, Object(external_wp_element_["createElement"])(UpdateOnBlurAsIntegerField, {
"aria-label": Object(external_wp_i18n_["__"])('Hours'),
className: "components-datetime__time-field-hours-input",
}), Object(external_wp_element_["createElement"])("span", {
className: "components-datetime__time-separator",
}, ":"), Object(external_wp_element_["createElement"])(UpdateOnBlurAsIntegerField, {
"aria-label": Object(external_wp_i18n_["__"])('Minutes'),
className: "components-datetime__time-field-minutes-input",
})), is12Hour && Object(external_wp_element_["createElement"])(button_group, {
className: "components-datetime__time-field components-datetime__time-field-am-pm"
}, Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], {
isSecondary: am !== 'AM',
onClick: updateAmPm('AM'),
className: "components-datetime__time-am-button"
}, Object(external_wp_i18n_["__"])('AM')), Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], {
isSecondary: am !== 'PM',
onClick: updateAmPm('PM'),
className: "components-datetime__time-pm-button"
}, Object(external_wp_i18n_["__"])('PM'))), Object(external_wp_element_["createElement"])(date_time_timezone, null))));
/* harmony default export */ var time = (TimePicker);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/index.js
// Needed to initialise the default datepicker styles.
// See: https://github.com/airbnb/react-dates#initialize
function DateTimePicker(_ref, ref) {
var currentDate = _ref.currentDate,
is12Hour = _ref.is12Hour,
isInvalidDate = _ref.isInvalidDate,
onMonthPreviewed = _ref.onMonthPreviewed,
onChange = _ref.onChange,
var _useState = Object(external_wp_element_["useState"])(false),
_useState2 = Object(slicedToArray["a" /* default */])(_useState, 2),
calendarHelpIsVisible = _useState2[0],
setCalendarHelpIsVisible = _useState2[1];
function onClickDescriptionToggle() {
setCalendarHelpIsVisible(!calendarHelpIsVisible);
return Object(external_wp_element_["createElement"])("div", {
className: "components-datetime"
}, !calendarHelpIsVisible && Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(time, {
currentTime: currentDate,
}), Object(external_wp_element_["createElement"])(date_time_date, {
currentDate: currentDate,
isInvalidDate: isInvalidDate,
onMonthPreviewed: onMonthPreviewed,
})), calendarHelpIsVisible && Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])("div", {
className: "components-datetime__calendar-help"
}, Object(external_wp_element_["createElement"])("h4", null, Object(external_wp_i18n_["__"])('Click to Select')), Object(external_wp_element_["createElement"])("ul", null, Object(external_wp_element_["createElement"])("li", null, Object(external_wp_i18n_["__"])('Click the right or left arrows to select other months in the past or the future.')), Object(external_wp_element_["createElement"])("li", null, Object(external_wp_i18n_["__"])('Click the desired day to select it.'))), Object(external_wp_element_["createElement"])("h4", null, Object(external_wp_i18n_["__"])('Navigating with a keyboard')), Object(external_wp_element_["createElement"])("ul", null, Object(external_wp_element_["createElement"])("li", null, Object(external_wp_element_["createElement"])("abbr", {
"aria-label": Object(external_wp_i18n_["_x"])('Enter', 'keyboard button')
/* JSX removes whitespace, but a space is required for screen readers. */
, Object(external_wp_element_["createElement"])("span", null, Object(external_wp_i18n_["__"])('Select the date in focus.'))), Object(external_wp_element_["createElement"])("li", null, Object(external_wp_element_["createElement"])("abbr", {
"aria-label": Object(external_wp_i18n_["__"])('Left and Right Arrows')
/* JSX removes whitespace, but a space is required for screen readers. */
, Object(external_wp_i18n_["__"])('Move backward (left) or forward (right) by one day.')), Object(external_wp_element_["createElement"])("li", null, Object(external_wp_element_["createElement"])("abbr", {
"aria-label": Object(external_wp_i18n_["__"])('Up and Down Arrows')
/* JSX removes whitespace, but a space is required for screen readers. */
, Object(external_wp_i18n_["__"])('Move backward (up) or forward (down) by one week.')), Object(external_wp_element_["createElement"])("li", null, Object(external_wp_element_["createElement"])("abbr", {
"aria-label": Object(external_wp_i18n_["__"])('Page Up and Page Down')
}, Object(external_wp_i18n_["__"])('PgUp/PgDn')), ' '
/* JSX removes whitespace, but a space is required for screen readers. */
, Object(external_wp_i18n_["__"])('Move backward (PgUp) or forward (PgDn) by one month.')), Object(external_wp_element_["createElement"])("li", null, Object(external_wp_element_["createElement"])("abbr", {
"aria-label": Object(external_wp_i18n_["__"])('Home and End')
}, Object(external_wp_i18n_["__"])('Home/End')), ' '
/* JSX removes whitespace, but a space is required for screen readers. */
, Object(external_wp_i18n_["__"])('Go to the first (home) or last (end) day of a week.'))))), Object(external_wp_element_["createElement"])("div", {
className: "components-datetime__buttons"
}, !calendarHelpIsVisible && currentDate && Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], {
className: "components-datetime__date-reset-button",
onClick: function onClick() {
}, Object(external_wp_i18n_["__"])('Reset')), Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], {
className: "components-datetime__date-help-toggle",
onClick: onClickDescriptionToggle
}, calendarHelpIsVisible ? Object(external_wp_i18n_["__"])('Close') : Object(external_wp_i18n_["__"])('Calendar Help'))));
/* harmony default export */ var date_time = (Object(external_wp_element_["forwardRef"])(DateTimePicker));
// EXTERNAL MODULE: ./node_modules/@wordpress/components/build-module/icon/index.js
var components_build_module_icon = __webpack_require__("9VDH");
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/styles/select-control-styles.js
var select_control_styles_disabledStyles = function disabledStyles(_ref) {
var disabled = _ref.disabled;
if (!disabled) return '';
return /*#__PURE__*/Object(core_browser_esm["b" /* css */])({
color: colors_color('ui.textDisabled')
}, true ? "" : undefined);
var select_control_styles_fontSizeStyles = function fontSizeStyles(_ref2) {
var fontSize = sizes[size];
var fontSizeMobile = '16px';
if (!fontSize) return '';
return /*#__PURE__*/Object(core_browser_esm["b" /* css */])("font-size:", fontSizeMobile, ";@media ( min-width:600px ){font-size:", fontSize, ";}" + ( true ? "" : undefined));
var select_control_styles_sizeStyles = function sizeStyles(_ref3) {
var style = sizes[size] || sizes.default;
return /*#__PURE__*/Object(core_browser_esm["b" /* css */])(style, true ? "" : undefined);
}; // TODO: Resolve need to use &&& to increase specificity
// https://github.com/WordPress/gutenberg/issues/18483
var Select = styled_base_browser_esm("select", {
})("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none !important;color:", colors_color('black'), ";display:block;margin:0;width:100%;", select_control_styles_disabledStyles, ";", select_control_styles_fontSizeStyles, ";", select_control_styles_sizeStyles, ";", rtl_rtl({
})(), "}" + ( true ? "" : undefined));
var DownArrowWrapper = styled_base_browser_esm("div", {
label: "DownArrowWrapper"
})("align-items:center;bottom:0;box-sizing:border-box;display:flex;padding:0 4px;pointer-events:none;position:absolute;top:0;", rtl_rtl({
})(), " svg{display:block;}" + ( true ? "" : undefined));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/index.js