@wordpress/components 28.1.0 → 28.3.0

package/build/date-time/date-time/index.js

@@ -39,6 +39,7 @@ const noop = () => {};
 function UnforwardedDateTimePicker({
   currentDate,
   is12Hour,
+  dateOrder,
   isInvalidDate,
   onMonthPreviewed = noop,
   onChange,
@@ -53,7 +54,8 @@ function UnforwardedDateTimePicker({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_time.default, {
         currentTime: currentDate,
         onChange: onChange,
-        is12Hour: is12Hour
+        is12Hour: is12Hour,
+        dateOrder: dateOrder
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_date.default, {
         currentDate: currentDate,
         onChange: onChange,

package/build/date-time/date-time/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_date","_interopRequireDefault","_time","_styles","_jsxRuntime","noop","UnforwardedDateTimePicker","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","ref","jsx","Wrapper","className","spacing","children","jsxs","Fragment","default","currentTime","DateTimePicker","exports","forwardRef","_default"],"sources":["@wordpress/components/src/date-time/date-time/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as DatePicker } from '../date';\nimport { default as TimePicker } from '../time';\nimport type { DateTimePickerProps } from '../types';\nimport { Wrapper } from './styles';\n\nexport { DatePicker, TimePicker };\n\nconst noop = () => {};\n\nfunction UnforwardedDateTimePicker(\n\t{\n\t\tcurrentDate,\n\t\tis12Hour,\n\t\tisInvalidDate,\n\t\tonMonthPreviewed = noop,\n\t\tonChange,\n\t\tevents,\n\t\tstartOfWeek,\n\t}: DateTimePickerProps,\n\tref: ForwardedRef< any >\n) {\n\treturn (\n\t\t<Wrapper ref={ ref } className=\"components-datetime\" spacing={ 4 }>\n\t\t\t<>\n\t\t\t\t<TimePicker\n\t\t\t\t\tcurrentTime={ currentDate }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t/>\n\t\t\t\t<DatePicker\n\t\t\t\t\tcurrentDate={ currentDate }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tisInvalidDate={ isInvalidDate }\n\t\t\t\t\tevents={ events }\n\t\t\t\t\tonMonthPreviewed={ onMonthPreviewed }\n\t\t\t\t\tstartOfWeek={ startOfWeek }\n\t\t\t\t/>\n\t\t\t</>\n\t\t</Wrapper>\n\t);\n}\n\n/**\n * DateTimePicker is a React component that renders a calendar and clock for\n * date and time selection. The calendar and clock components can be accessed\n * individually using the `DatePicker` and `TimePicker` components respectively.\n *\n * ```jsx\n * import { DateTimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDateTimePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DateTimePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport const DateTimePicker = forwardRef( UnforwardedDateTimePicker );\n\nexport default DateTimePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,OAAA,GAAAJ,OAAA;AAAmC,IAAAK,WAAA,GAAAL,OAAA;AAjBnC;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,yBAAyBA,CACjC;EACCC,WAAW;EACXC,QAAQ;EACRC,aAAa;EACbC,gBAAgB,GAAGL,IAAI;EACvBM,QAAQ;EACRC,MAAM;EACNC;AACoB,CAAC,EACtBC,GAAwB,EACvB;EACD,oBACC,IAAAV,WAAA,CAAAW,GAAA,EAACZ,OAAA,CAAAa,OAAO;IAACF,GAAG,EAAGA,GAAK;IAACG,SAAS,EAAC,qBAAqB;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,eACjE,IAAAf,WAAA,CAAAgB,IAAA,EAAAhB,WAAA,CAAAiB,QAAA;MAAAF,QAAA,gBACC,IAAAf,WAAA,CAAAW,GAAA,EAACb,KAAA,CAAAoB,OAAU;QACVC,WAAW,EAAGhB,WAAa;QAC3BI,QAAQ,EAAGA,QAAU;QACrBH,QAAQ,EAAGA;MAAU,CACrB,CAAC,eACF,IAAAJ,WAAA,CAAAW,GAAA,EAACf,KAAA,CAAAsB,OAAU;QACVf,WAAW,EAAGA,WAAa;QAC3BI,QAAQ,EAAGA,QAAU;QACrBF,aAAa,EAAGA,aAAe;QAC/BG,MAAM,EAAGA,MAAQ;QACjBF,gBAAgB,EAAGA,gBAAkB;QACrCG,WAAW,EAAGA;MAAa,CAC3B,CAAC;IAAA,CACD;EAAC,CACK,CAAC;AAEZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMW,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAAE,mBAAU,EAAEpB,yBAA0B,CAAC;AAAC,IAAAqB,QAAA,GAAAF,OAAA,CAAAH,OAAA,GAEvDE,cAAc","ignoreList":[]}
+{"version":3,"names":["_element","require","_date","_interopRequireDefault","_time","_styles","_jsxRuntime","noop","UnforwardedDateTimePicker","currentDate","is12Hour","dateOrder","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","ref","jsx","Wrapper","className","spacing","children","jsxs","Fragment","default","currentTime","DateTimePicker","exports","forwardRef","_default"],"sources":["@wordpress/components/src/date-time/date-time/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { default as DatePicker } from '../date';\nimport { default as TimePicker } from '../time';\nimport type { DateTimePickerProps } from '../types';\nimport { Wrapper } from './styles';\n\nexport { DatePicker, TimePicker };\n\nconst noop = () => {};\n\nfunction UnforwardedDateTimePicker(\n\t{\n\t\tcurrentDate,\n\t\tis12Hour,\n\t\tdateOrder,\n\t\tisInvalidDate,\n\t\tonMonthPreviewed = noop,\n\t\tonChange,\n\t\tevents,\n\t\tstartOfWeek,\n\t}: DateTimePickerProps,\n\tref: ForwardedRef< any >\n) {\n\treturn (\n\t\t<Wrapper ref={ ref } className=\"components-datetime\" spacing={ 4 }>\n\t\t\t<>\n\t\t\t\t<TimePicker\n\t\t\t\t\tcurrentTime={ currentDate }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t\tdateOrder={ dateOrder }\n\t\t\t\t/>\n\t\t\t\t<DatePicker\n\t\t\t\t\tcurrentDate={ currentDate }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tisInvalidDate={ isInvalidDate }\n\t\t\t\t\tevents={ events }\n\t\t\t\t\tonMonthPreviewed={ onMonthPreviewed }\n\t\t\t\t\tstartOfWeek={ startOfWeek }\n\t\t\t\t/>\n\t\t\t</>\n\t\t</Wrapper>\n\t);\n}\n\n/**\n * DateTimePicker is a React component that renders a calendar and clock for\n * date and time selection. The calendar and clock components can be accessed\n * individually using the `DatePicker` and `TimePicker` components respectively.\n *\n * ```jsx\n * import { DateTimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDateTimePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DateTimePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport const DateTimePicker = forwardRef( UnforwardedDateTimePicker );\n\nexport default DateTimePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,OAAA,GAAAJ,OAAA;AAAmC,IAAAK,WAAA,GAAAL,OAAA;AAhBnC;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMM,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,yBAAyBA,CACjC;EACCC,WAAW;EACXC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,gBAAgB,GAAGN,IAAI;EACvBO,QAAQ;EACRC,MAAM;EACNC;AACoB,CAAC,EACtBC,GAAwB,EACvB;EACD,oBACC,IAAAX,WAAA,CAAAY,GAAA,EAACb,OAAA,CAAAc,OAAO;IAACF,GAAG,EAAGA,GAAK;IAACG,SAAS,EAAC,qBAAqB;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,eACjE,IAAAhB,WAAA,CAAAiB,IAAA,EAAAjB,WAAA,CAAAkB,QAAA;MAAAF,QAAA,gBACC,IAAAhB,WAAA,CAAAY,GAAA,EAACd,KAAA,CAAAqB,OAAU;QACVC,WAAW,EAAGjB,WAAa;QAC3BK,QAAQ,EAAGA,QAAU;QACrBJ,QAAQ,EAAGA,QAAU;QACrBC,SAAS,EAAGA;MAAW,CACvB,CAAC,eACF,IAAAL,WAAA,CAAAY,GAAA,EAAChB,KAAA,CAAAuB,OAAU;QACVhB,WAAW,EAAGA,WAAa;QAC3BK,QAAQ,EAAGA,QAAU;QACrBF,aAAa,EAAGA,aAAe;QAC/BG,MAAM,EAAGA,MAAQ;QACjBF,gBAAgB,EAAGA,gBAAkB;QACrCG,WAAW,EAAGA;MAAa,CAC3B,CAAC;IAAA,CACD;EAAC,CACK,CAAC;AAEZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMW,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAAE,mBAAU,EAAErB,yBAA0B,CAAC;AAAC,IAAAsB,QAAA,GAAAF,OAAA,CAAAH,OAAA,GAEvDE,cAAc","ignoreList":[]}

package/build/date-time/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "DatePicker", {
     return _date.default;
   }
 });
+Object.defineProperty(exports, "TimeInput", {
+  enumerable: true,
+  get: function () {
+    return _timeInput.default;
+  }
+});
 Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
   get: function () {
@@ -19,6 +25,7 @@ Object.defineProperty(exports, "TimePicker", {
 exports.default = void 0;
 var _date = _interopRequireDefault(require("./date"));
 var _time = _interopRequireDefault(require("./time"));
+var _timeInput = _interopRequireDefault(require("./time-input"));
 var _dateTime = _interopRequireDefault(require("./date-time"));
 /**
  * Internal dependencies

package/build/date-time/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_date","_interopRequireDefault","require","_time","_dateTime","_default","exports","default","DateTimePicker"],"sources":["@wordpress/components/src/date-time/index.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { default as DatePicker } from './date';\nimport { default as TimePicker } from './time';\nimport { default as DateTimePicker } from './date-time';\n\nexport { DatePicker, TimePicker };\nexport default DateTimePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AALA;AACA;AACA;AAFA,IAAAG,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAQeC,iBAAc","ignoreList":[]}
+{"version":3,"names":["_date","_interopRequireDefault","require","_time","_timeInput","_dateTime","_default","exports","default","DateTimePicker"],"sources":["@wordpress/components/src/date-time/index.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { default as DatePicker } from './date';\nimport { default as TimePicker } from './time';\nimport { default as TimeInput } from './time-input';\nimport { default as DateTimePicker } from './date-time';\n\nexport { DatePicker, TimePicker, TimeInput };\nexport default DateTimePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,SAAA,GAAAJ,sBAAA,CAAAC,OAAA;AANA;AACA;AACA;AAFA,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GASeC,iBAAc","ignoreList":[]}

package/build/date-time/time/index.js

@@ -10,16 +10,14 @@ var _dateFns = require("date-fns");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _baseControl = _interopRequireDefault(require("../../base-control"));
-var _button = _interopRequireDefault(require("../../button"));
-var _buttonGroup = _interopRequireDefault(require("../../button-group"));
 var _selectControl = _interopRequireDefault(require("../../select-control"));
 var _timezone = _interopRequireDefault(require("./timezone"));
 var _styles = require("./styles");
 var _hStack = require("../../h-stack");
 var _spacer = require("../../spacer");
-var _actions = require("../../input-control/reducer/actions");
 var _utils = require("../utils");
 var _constants = require("../constants");
+var _timeInput = require("../time-input");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -33,30 +31,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-function from12hTo24h(hours, isPm) {
-  return isPm ? (hours % 12 + 12) % 24 : hours % 12;
-}
-
-/**
- * Creates an InputControl reducer used to pad an input so that it is always a
- * given width. For example, the hours and minutes inputs are padded to 2 so
- * that '4' appears as '04'.
- *
- * @param pad How many digits the value should be.
- */
-function buildPadInputStateReducer(pad) {
-  return (state, action) => {
-    const nextState = {
-      ...state
-    };
-    if (action.type === _actions.COMMIT || action.type === _actions.PRESS_UP || action.type === _actions.PRESS_DOWN) {
-      if (nextState.value !== undefined) {
-        nextState.value = nextState.value.toString().padStart(pad, '0');
-      }
-    }
-    return nextState;
-  };
-}
+const VALID_DATE_ORDERS = ['dmy', 'mdy', 'ymd'];
 
 /**
  * TimePicker is a React component that renders a clock for time selection.
@@ -81,7 +56,8 @@ function buildPadInputStateReducer(pad) {
 function TimePicker({
   is12Hour,
   currentTime,
-  onChange
+  onChange,
+  dateOrder: dateOrderProp
 }) {
   const [date, setDate] = (0, _element.useState)(() =>
   // Truncate the date at the minutes, see: #15495.
@@ -97,41 +73,25 @@ function TimePicker({
     month,
     year,
     minutes,
-    hours,
-    am
+    hours
   } = (0, _element.useMemo)(() => ({
     day: (0, _dateFns.format)(date, 'dd'),
     month: (0, _dateFns.format)(date, 'MM'),
     year: (0, _dateFns.format)(date, 'yyyy'),
     minutes: (0, _dateFns.format)(date, 'mm'),
-    hours: (0, _dateFns.format)(date, is12Hour ? 'hh' : 'HH'),
+    hours: (0, _dateFns.format)(date, 'HH'),
     am: (0, _dateFns.format)(date, 'a')
-  }), [date, is12Hour]);
+  }), [date]);
   const buildNumberControlChangeCallback = method => {
     const callback = (value, {
       event
     }) => {
-      var _ownerDocument$defaul;
-      // `instanceof` checks need to get the instance definition from the
-      // corresponding window object — therefore, the following logic makes
-      // the component work correctly even when rendered inside an iframe.
-      const HTMLInputElementInstance = (_ownerDocument$defaul = event.target?.ownerDocument.defaultView?.HTMLInputElement) !== null && _ownerDocument$defaul !== void 0 ? _ownerDocument$defaul : HTMLInputElement;
-      if (!(event.target instanceof HTMLInputElementInstance)) {
-        return;
-      }
-      if (!event.target.validity.valid) {
+      if (!(0, _utils.validateInputElementTarget)(event)) {
         return;
       }
 
       // We can safely assume value is a number if target is valid.
-      let numberValue = Number(value);
-
-      // If the 12-hour format is being used and the 'PM' period is
-      // selected, then the incoming value (which ranges 1-12) should be
-      // increased by 12 to match the expected 24-hour format.
-      if (method === 'hours' && is12Hour) {
-        numberValue = from12hTo24h(numberValue, am === 'PM');
-      }
+      const numberValue = Number(value);
       const newDate = (0, _dateFns.set)(date, {
         [method]: numberValue
       });
@@ -140,17 +100,17 @@ function TimePicker({
     };
     return callback;
   };
-  function buildAmPmChangeCallback(value) {
-    return () => {
-      if (am === value) {
-        return;
-      }
-      const parsedHours = parseInt(hours, 10);
-      const newDate = (0, _dateFns.setHours)(date, from12hTo24h(parsedHours, value === 'PM'));
-      setDate(newDate);
-      onChange?.((0, _dateFns.format)(newDate, _constants.TIMEZONELESS_FORMAT));
-    };
-  }
+  const onTimeInputChangeCallback = ({
+    hours: newHours,
+    minutes: newMinutes
+  }) => {
+    const newDate = (0, _dateFns.set)(date, {
+      hours: newHours,
+      minutes: newMinutes
+    });
+    setDate(newDate);
+    onChange?.((0, _dateFns.format)(newDate, _constants.TIMEZONELESS_FORMAT));
+  };
   const dayField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DayInput, {
     className: "components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
     ,
@@ -167,7 +127,7 @@ function TimePicker({
     isDragEnabled: false,
     isShiftStepEnabled: false,
     onChange: buildNumberControlChangeCallback('date')
-  });
+  }, "day");
   const monthField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MonthSelectWrapper, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectControl.default, {
       className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
@@ -220,6 +180,38 @@ function TimePicker({
         onChange?.((0, _dateFns.format)(newDate, _constants.TIMEZONELESS_FORMAT));
       }
     })
+  }, "month");
+  const yearField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.YearInput, {
+    className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
+    ,
+    label: (0, _i18n.__)('Year'),
+    hideLabelFromVision: true,
+    __next40pxDefaultSize: true,
+    value: year,
+    step: 1,
+    min: 1,
+    max: 9999,
+    required: true,
+    spinControls: "none",
+    isPressEnterToChange: true,
+    isDragEnabled: false,
+    isShiftStepEnabled: false,
+    onChange: buildNumberControlChangeCallback('year'),
+    __unstableStateReducer: (0, _utils.buildPadInputStateReducer)(4)
+  }, "year");
+  const defaultDateOrder = is12Hour ? 'mdy' : 'dmy';
+  const dateOrder = dateOrderProp && VALID_DATE_ORDERS.includes(dateOrderProp) ? dateOrderProp : defaultDateOrder;
+  const fields = dateOrder.split('').map(field => {
+    switch (field) {
+      case 'd':
+        return dayField;
+      case 'm':
+        return monthField;
+      case 'y':
+        return yearField;
+      default:
+        return null;
+    }
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Wrapper, {
     className: "components-datetime__time" // Unused, for backwards compatibility.
@@ -233,67 +225,13 @@ function TimePicker({
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
         className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
         ,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TimeWrapper, {
-          className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
-          ,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HoursInput, {
-            className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
-            ,
-            label: (0, _i18n.__)('Hours'),
-            hideLabelFromVision: true,
-            __next40pxDefaultSize: true,
-            value: hours,
-            step: 1,
-            min: is12Hour ? 1 : 0,
-            max: is12Hour ? 12 : 23,
-            required: true,
-            spinControls: "none",
-            isPressEnterToChange: true,
-            isDragEnabled: false,
-            isShiftStepEnabled: false,
-            onChange: buildNumberControlChangeCallback('hours'),
-            __unstableStateReducer: buildPadInputStateReducer(2)
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TimeSeparator, {
-            className: "components-datetime__time-separator" // Unused, for backwards compatibility.
-            ,
-            "aria-hidden": "true",
-            children: ":"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MinutesInput, {
-            className: "components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
-            ,
-            label: (0, _i18n.__)('Minutes'),
-            hideLabelFromVision: true,
-            __next40pxDefaultSize: true,
-            value: minutes,
-            step: 1,
-            min: 0,
-            max: 59,
-            required: true,
-            spinControls: "none",
-            isPressEnterToChange: true,
-            isDragEnabled: false,
-            isShiftStepEnabled: false,
-            onChange: buildNumberControlChangeCallback('minutes'),
-            __unstableStateReducer: buildPadInputStateReducer(2)
-          })]
-        }), is12Hour && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_buttonGroup.default, {
-          className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
-          ,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-            className: "components-datetime__time-am-button" // Unused, for backwards compatibility.
-            ,
-            variant: am === 'AM' ? 'primary' : 'secondary',
-            __next40pxDefaultSize: true,
-            onClick: buildAmPmChangeCallback('AM'),
-            children: (0, _i18n.__)('AM')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-            className: "components-datetime__time-pm-button" // Unused, for backwards compatibility.
-            ,
-            variant: am === 'PM' ? 'primary' : 'secondary',
-            __next40pxDefaultSize: true,
-            onClick: buildAmPmChangeCallback('PM'),
-            children: (0, _i18n.__)('PM')
-          })]
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_timeInput.TimeInput, {
+          value: {
+            hours: Number(hours),
+            minutes: Number(minutes)
+          },
+          is12Hour: is12Hour,
+          onChange: onTimeInputChangeCallback
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_timezone.default, {})]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Fieldset, {
@@ -302,31 +240,10 @@ function TimePicker({
         className: "components-datetime__time-legend" // Unused, for backwards compatibility.
         ,
         children: (0, _i18n.__)('Date')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_hStack.HStack, {
         className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
         ,
-        children: [is12Hour ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [monthField, dayField]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [dayField, monthField]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.YearInput, {
-          className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
-          ,
-          label: (0, _i18n.__)('Year'),
-          hideLabelFromVision: true,
-          __next40pxDefaultSize: true,
-          value: year,
-          step: 1,
-          min: 1,
-          max: 9999,
-          required: true,
-          spinControls: "none",
-          isPressEnterToChange: true,
-          isDragEnabled: false,
-          isShiftStepEnabled: false,
-          onChange: buildNumberControlChangeCallback('year'),
-          __unstableStateReducer: buildPadInputStateReducer(4)
-        })]
+        children: fields
       })]
     })]
   });

package/build/date-time/time/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_dateFns","require","_element","_i18n","_baseControl","_interopRequireDefault","_button","_buttonGroup","_selectControl","_timezone","_styles","_hStack","_spacer","_actions","_utils","_constants","_jsxRuntime","from12hTo24h","hours","isPm","buildPadInputStateReducer","pad","state","action","nextState","type","COMMIT","PRESS_UP","PRESS_DOWN","value","undefined","toString","padStart","TimePicker","is12Hour","currentTime","onChange","date","setDate","useState","startOfMinute","inputToDate","Date","useEffect","day","month","year","minutes","am","useMemo","format","buildNumberControlChangeCallback","method","callback","event","_ownerDocument$defaul","HTMLInputElementInstance","target","ownerDocument","defaultView","HTMLInputElement","validity","valid","numberValue","Number","newDate","set","TIMEZONELESS_FORMAT","buildAmPmChangeCallback","parsedHours","parseInt","setHours","dayField","jsx","DayInput","className","label","__","hideLabelFromVision","__next40pxDefaultSize","step","min","max","required","spinControls","isPressEnterToChange","isDragEnabled","isShiftStepEnabled","monthField","MonthSelectWrapper","children","default","__nextHasNoMarginBottom","options","setMonth","jsxs","Wrapper","Fieldset","VisualLabel","as","HStack","TimeWrapper","HoursInput","__unstableStateReducer","TimeSeparator","MinutesInput","variant","onClick","Spacer","Fragment","YearInput","_default","exports"],"sources":["@wordpress/components/src/date-time/time/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { startOfMinute, format, set, setHours, setMonth } from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../../base-control';\nimport Button from '../../button';\nimport ButtonGroup from '../../button-group';\nimport SelectControl from '../../select-control';\nimport TimeZone from './timezone';\nimport type { TimePickerProps } from '../types';\nimport {\n\tWrapper,\n\tFieldset,\n\tHoursInput,\n\tTimeSeparator,\n\tMinutesInput,\n\tMonthSelectWrapper,\n\tDayInput,\n\tYearInput,\n\tTimeWrapper,\n} from './styles';\nimport { HStack } from '../../h-stack';\nimport { Spacer } from '../../spacer';\nimport type { InputChangeCallback } from '../../input-control/types';\nimport type { InputState } from '../../input-control/reducer/state';\nimport type { InputAction } from '../../input-control/reducer/actions';\nimport {\n\tCOMMIT,\n\tPRESS_DOWN,\n\tPRESS_UP,\n} from '../../input-control/reducer/actions';\nimport { inputToDate } from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\nfunction from12hTo24h( hours: number, isPm: boolean ) {\n\treturn isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;\n}\n\n/**\n * Creates an InputControl reducer used to pad an input so that it is always a\n * given width. For example, the hours and minutes inputs are padded to 2 so\n * that '4' appears as '04'.\n *\n * @param pad How many digits the value should be.\n */\nfunction buildPadInputStateReducer( pad: number ) {\n\treturn ( state: InputState, action: InputAction ) => {\n\t\tconst nextState = { ...state };\n\t\tif (\n\t\t\taction.type === COMMIT ||\n\t\t\taction.type === PRESS_UP ||\n\t\t\taction.type === PRESS_DOWN\n\t\t) {\n\t\t\tif ( nextState.value !== undefined ) {\n\t\t\t\tnextState.value = nextState.value\n\t\t\t\t\t.toString()\n\t\t\t\t\t.padStart( pad, '0' );\n\t\t\t}\n\t\t}\n\t\treturn nextState;\n\t};\n}\n\n/**\n * TimePicker is a React component that renders a clock for time selection.\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimePicker = () => {\n *   const [ time, setTime ] = useState( new Date() );\n *\n *   return (\n *     <TimePicker\n *       currentTime={ date }\n *       onChange={ ( newTime ) => setTime( newTime ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport function TimePicker( {\n\tis12Hour,\n\tcurrentTime,\n\tonChange,\n}: TimePickerProps ) {\n\tconst [ date, setDate ] = useState( () =>\n\t\t// Truncate the date at the minutes, see: #15495.\n\t\tcurrentTime ? startOfMinute( inputToDate( currentTime ) ) : new Date()\n\t);\n\n\t// Reset the state when currentTime changed.\n\t// TODO: useEffect() shouldn't be used like this, causes an unnecessary render\n\tuseEffect( () => {\n\t\tsetDate(\n\t\t\tcurrentTime\n\t\t\t\t? startOfMinute( inputToDate( currentTime ) )\n\t\t\t\t: new Date()\n\t\t);\n\t}, [ currentTime ] );\n\n\tconst { day, month, year, minutes, hours, am } = useMemo(\n\t\t() => ( {\n\t\t\tday: format( date, 'dd' ),\n\t\t\tmonth: format( date, 'MM' ),\n\t\t\tyear: format( date, 'yyyy' ),\n\t\t\tminutes: format( date, 'mm' ),\n\t\t\thours: format( date, is12Hour ? 'hh' : 'HH' ),\n\t\t\tam: format( date, 'a' ),\n\t\t} ),\n\t\t[ date, is12Hour ]\n\t);\n\n\tconst buildNumberControlChangeCallback = (\n\t\tmethod: 'hours' | 'minutes' | 'date' | 'year'\n\t) => {\n\t\tconst callback: InputChangeCallback = ( value, { event } ) => {\n\t\t\t// `instanceof` checks need to get the instance definition from the\n\t\t\t// corresponding window object — therefore, the following logic makes\n\t\t\t// the component work correctly even when rendered inside an iframe.\n\t\t\tconst HTMLInputElementInstance =\n\t\t\t\t( event.target as HTMLInputElement )?.ownerDocument.defaultView\n\t\t\t\t\t?.HTMLInputElement ?? HTMLInputElement;\n\n\t\t\tif ( ! ( event.target instanceof HTMLInputElementInstance ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! event.target.validity.valid ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// We can safely assume value is a number if target is valid.\n\t\t\tlet numberValue = Number( value );\n\n\t\t\t// If the 12-hour format is being used and the 'PM' period is\n\t\t\t// selected, then the incoming value (which ranges 1-12) should be\n\t\t\t// increased by 12 to match the expected 24-hour format.\n\t\t\tif ( method === 'hours' && is12Hour ) {\n\t\t\t\tnumberValue = from12hTo24h( numberValue, am === 'PM' );\n\t\t\t}\n\n\t\t\tconst newDate = set( date, { [ method ]: numberValue } );\n\t\t\tsetDate( newDate );\n\t\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t\t};\n\t\treturn callback;\n\t};\n\n\tfunction buildAmPmChangeCallback( value: 'AM' | 'PM' ) {\n\t\treturn () => {\n\t\t\tif ( am === value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst parsedHours = parseInt( hours, 10 );\n\n\t\t\tconst newDate = setHours(\n\t\t\t\tdate,\n\t\t\t\tfrom12hTo24h( parsedHours, value === 'PM' )\n\t\t\t);\n\t\t\tsetDate( newDate );\n\t\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t\t};\n\t}\n\n\tconst dayField = (\n\t\t<DayInput\n\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-day\" // Unused, for backwards compatibility.\n\t\t\tlabel={ __( 'Day' ) }\n\t\t\thideLabelFromVision\n\t\t\t__next40pxDefaultSize\n\t\t\tvalue={ day }\n\t\t\tstep={ 1 }\n\t\t\tmin={ 1 }\n\t\t\tmax={ 31 }\n\t\t\trequired\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange\n\t\t\tisDragEnabled={ false }\n\t\t\tisShiftStepEnabled={ false }\n\t\t\tonChange={ buildNumberControlChangeCallback( 'date' ) }\n\t\t/>\n\t);\n\n\tconst monthField = (\n\t\t<MonthSelectWrapper>\n\t\t\t<SelectControl\n\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-month\" // Unused, for backwards compatibility.\n\t\t\t\tlabel={ __( 'Month' ) }\n\t\t\t\thideLabelFromVision\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ month }\n\t\t\t\toptions={ [\n\t\t\t\t\t{ value: '01', label: __( 'January' ) },\n\t\t\t\t\t{ value: '02', label: __( 'February' ) },\n\t\t\t\t\t{ value: '03', label: __( 'March' ) },\n\t\t\t\t\t{ value: '04', label: __( 'April' ) },\n\t\t\t\t\t{ value: '05', label: __( 'May' ) },\n\t\t\t\t\t{ value: '06', label: __( 'June' ) },\n\t\t\t\t\t{ value: '07', label: __( 'July' ) },\n\t\t\t\t\t{ value: '08', label: __( 'August' ) },\n\t\t\t\t\t{ value: '09', label: __( 'September' ) },\n\t\t\t\t\t{ value: '10', label: __( 'October' ) },\n\t\t\t\t\t{ value: '11', label: __( 'November' ) },\n\t\t\t\t\t{ value: '12', label: __( 'December' ) },\n\t\t\t\t] }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newDate = setMonth( date, Number( value ) - 1 );\n\t\t\t\t\tsetDate( newDate );\n\t\t\t\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MonthSelectWrapper>\n\t);\n\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName=\"components-datetime__time\" // Unused, for backwards compatibility.\n\t\t>\n\t\t\t<Fieldset>\n\t\t\t\t<BaseControl.VisualLabel\n\t\t\t\t\tas=\"legend\"\n\t\t\t\t\tclassName=\"components-datetime__time-legend\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Time' ) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t<TimeWrapper\n\t\t\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-time\" // Unused, for backwards compatibility.\n\t\t\t\t\t>\n\t\t\t\t\t\t<HoursInput\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-hours-input\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tlabel={ __( 'Hours' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvalue={ hours }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ is12Hour ? 1 : 0 }\n\t\t\t\t\t\t\tmax={ is12Hour ? 12 : 23 }\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\t\tisShiftStepEnabled={ false }\n\t\t\t\t\t\t\tonChange={ buildNumberControlChangeCallback(\n\t\t\t\t\t\t\t\t'hours'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t__unstableStateReducer={ buildPadInputStateReducer(\n\t\t\t\t\t\t\t\t2\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<TimeSeparator\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-separator\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t</TimeSeparator>\n\t\t\t\t\t\t<MinutesInput\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-minutes-input\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tlabel={ __( 'Minutes' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvalue={ minutes }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 59 }\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\t\tisShiftStepEnabled={ false }\n\t\t\t\t\t\t\tonChange={ buildNumberControlChangeCallback(\n\t\t\t\t\t\t\t\t'minutes'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t__unstableStateReducer={ buildPadInputStateReducer(\n\t\t\t\t\t\t\t\t2\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TimeWrapper>\n\t\t\t\t\t{ is12Hour && (\n\t\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-am-pm\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-am-button\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'AM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tonClick={ buildAmPmChangeCallback( 'AM' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'AM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-pm-button\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'PM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tonClick={ buildAmPmChangeCallback( 'PM' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'PM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<Spacer />\n\t\t\t\t\t<TimeZone />\n\t\t\t\t</HStack>\n\t\t\t</Fieldset>\n\t\t\t<Fieldset>\n\t\t\t\t<BaseControl.VisualLabel\n\t\t\t\t\tas=\"legend\"\n\t\t\t\t\tclassName=\"components-datetime__time-legend\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Date' ) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ is12Hour ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ monthField }\n\t\t\t\t\t\t\t{ dayField }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ dayField }\n\t\t\t\t\t\t\t{ monthField }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t<YearInput\n\t\t\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-year\" // Unused, for backwards compatibility.\n\t\t\t\t\t\tlabel={ __( 'Year' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvalue={ year }\n\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ 9999 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\tisShiftStepEnabled={ false }\n\t\t\t\t\t\tonChange={ buildNumberControlChangeCallback( 'year' ) }\n\t\t\t\t\t\t__unstableStateReducer={ buildPadInputStateReducer(\n\t\t\t\t\t\t\t4\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</Fieldset>\n\t\t</Wrapper>\n\t);\n}\n\nexport default TimePicker;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,YAAA,GAAAF,sBAAA,CAAAJ,OAAA;AACA,IAAAO,cAAA,GAAAH,sBAAA,CAAAJ,OAAA;AACA,IAAAQ,SAAA,GAAAJ,sBAAA,CAAAJ,OAAA;AAEA,IAAAS,OAAA,GAAAT,OAAA;AAWA,IAAAU,OAAA,GAAAV,OAAA;AACA,IAAAW,OAAA,GAAAX,OAAA;AAIA,IAAAY,QAAA,GAAAZ,OAAA;AAKA,IAAAa,MAAA,GAAAb,OAAA;AACA,IAAAc,UAAA,GAAAd,OAAA;AAAmD,IAAAe,WAAA,GAAAf,OAAA;AA1CnD;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AA+BA,SAASgB,YAAYA,CAAEC,KAAa,EAAEC,IAAa,EAAG;EACrD,OAAOA,IAAI,GAAG,CAAID,KAAK,GAAG,EAAE,GAAK,EAAE,IAAK,EAAE,GAAGA,KAAK,GAAG,EAAE;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASE,yBAAyBA,CAAEC,GAAW,EAAG;EACjD,OAAO,CAAEC,KAAiB,EAAEC,MAAmB,KAAM;IACpD,MAAMC,SAAS,GAAG;MAAE,GAAGF;IAAM,CAAC;IAC9B,IACCC,MAAM,CAACE,IAAI,KAAKC,eAAM,IACtBH,MAAM,CAACE,IAAI,KAAKE,iBAAQ,IACxBJ,MAAM,CAACE,IAAI,KAAKG,mBAAU,EACzB;MACD,IAAKJ,SAAS,CAACK,KAAK,KAAKC,SAAS,EAAG;QACpCN,SAAS,CAACK,KAAK,GAAGL,SAAS,CAACK,KAAK,CAC/BE,QAAQ,CAAC,CAAC,CACVC,QAAQ,CAAEX,GAAG,EAAE,GAAI,CAAC;MACvB;IACD;IACA,OAAOG,SAAS;EACjB,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASS,UAAUA,CAAE;EAC3BC,QAAQ;EACRC,WAAW;EACXC;AACgB,CAAC,EAAG;EACpB,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAC,iBAAQ,EAAE;EACnC;EACAJ,WAAW,GAAG,IAAAK,sBAAa,EAAE,IAAAC,kBAAW,EAAEN,WAAY,CAAE,CAAC,GAAG,IAAIO,IAAI,CAAC,CACtE,CAAC;;EAED;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChBL,OAAO,CACNH,WAAW,GACR,IAAAK,sBAAa,EAAE,IAAAC,kBAAW,EAAEN,WAAY,CAAE,CAAC,GAC3C,IAAIO,IAAI,CAAC,CACb,CAAC;EACF,CAAC,EAAE,CAAEP,WAAW,CAAG,CAAC;EAEpB,MAAM;IAAES,GAAG;IAAEC,KAAK;IAAEC,IAAI;IAAEC,OAAO;IAAE7B,KAAK;IAAE8B;EAAG,CAAC,GAAG,IAAAC,gBAAO,EACvD,OAAQ;IACPL,GAAG,EAAE,IAAAM,eAAM,EAAEb,IAAI,EAAE,IAAK,CAAC;IACzBQ,KAAK,EAAE,IAAAK,eAAM,EAAEb,IAAI,EAAE,IAAK,CAAC;IAC3BS,IAAI,EAAE,IAAAI,eAAM,EAAEb,IAAI,EAAE,MAAO,CAAC;IAC5BU,OAAO,EAAE,IAAAG,eAAM,EAAEb,IAAI,EAAE,IAAK,CAAC;IAC7BnB,KAAK,EAAE,IAAAgC,eAAM,EAAEb,IAAI,EAAEH,QAAQ,GAAG,IAAI,GAAG,IAAK,CAAC;IAC7Cc,EAAE,EAAE,IAAAE,eAAM,EAAEb,IAAI,EAAE,GAAI;EACvB,CAAC,CAAE,EACH,CAAEA,IAAI,EAAEH,QAAQ,CACjB,CAAC;EAED,MAAMiB,gCAAgC,GACrCC,MAA6C,IACzC;IACJ,MAAMC,QAA6B,GAAGA,CAAExB,KAAK,EAAE;MAAEyB;IAAM,CAAC,KAAM;MAAA,IAAAC,qBAAA;MAC7D;MACA;MACA;MACA,MAAMC,wBAAwB,IAAAD,qBAAA,GAC3BD,KAAK,CAACG,MAAM,EAAwBC,aAAa,CAACC,WAAW,EAC5DC,gBAAgB,cAAAL,qBAAA,cAAAA,qBAAA,GAAIK,gBAAgB;MAExC,IAAK,EAAIN,KAAK,CAACG,MAAM,YAAYD,wBAAwB,CAAE,EAAG;QAC7D;MACD;MAEA,IAAK,CAAEF,KAAK,CAACG,MAAM,CAACI,QAAQ,CAACC,KAAK,EAAG;QACpC;MACD;;MAEA;MACA,IAAIC,WAAW,GAAGC,MAAM,CAAEnC,KAAM,CAAC;;MAEjC;MACA;MACA;MACA,IAAKuB,MAAM,KAAK,OAAO,IAAIlB,QAAQ,EAAG;QACrC6B,WAAW,GAAG9C,YAAY,CAAE8C,WAAW,EAAEf,EAAE,KAAK,IAAK,CAAC;MACvD;MAEA,MAAMiB,OAAO,GAAG,IAAAC,YAAG,EAAE7B,IAAI,EAAE;QAAE,CAAEe,MAAM,GAAIW;MAAY,CAAE,CAAC;MACxDzB,OAAO,CAAE2B,OAAQ,CAAC;MAClB7B,QAAQ,GAAI,IAAAc,eAAM,EAAEe,OAAO,EAAEE,8BAAoB,CAAE,CAAC;IACrD,CAAC;IACD,OAAOd,QAAQ;EAChB,CAAC;EAED,SAASe,uBAAuBA,CAAEvC,KAAkB,EAAG;IACtD,OAAO,MAAM;MACZ,IAAKmB,EAAE,KAAKnB,KAAK,EAAG;QACnB;MACD;MAEA,MAAMwC,WAAW,GAAGC,QAAQ,CAAEpD,KAAK,EAAE,EAAG,CAAC;MAEzC,MAAM+C,OAAO,GAAG,IAAAM,iBAAQ,EACvBlC,IAAI,EACJpB,YAAY,CAAEoD,WAAW,EAAExC,KAAK,KAAK,IAAK,CAC3C,CAAC;MACDS,OAAO,CAAE2B,OAAQ,CAAC;MAClB7B,QAAQ,GAAI,IAAAc,eAAM,EAAEe,OAAO,EAAEE,8BAAoB,CAAE,CAAC;IACrD,CAAC;EACF;EAEA,MAAMK,QAAQ,gBACb,IAAAxD,WAAA,CAAAyD,GAAA,EAAC/D,OAAA,CAAAgE,QAAQ;IACRC,SAAS,EAAC,qEAAqE,CAAC;IAAA;IAChFC,KAAK,EAAG,IAAAC,QAAE,EAAE,KAAM,CAAG;IACrBC,mBAAmB;IACnBC,qBAAqB;IACrBlD,KAAK,EAAGe,GAAK;IACboC,IAAI,EAAG,CAAG;IACVC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,EAAI;IACVC,QAAQ;IACRC,YAAY,EAAC,MAAM;IACnBC,oBAAoB;IACpBC,aAAa,EAAG,KAAO;IACvBC,kBAAkB,EAAG,KAAO;IAC5BnD,QAAQ,EAAGe,gCAAgC,CAAE,MAAO;EAAG,CACvD,CACD;EAED,MAAMqC,UAAU,gBACf,IAAAxE,WAAA,CAAAyD,GAAA,EAAC/D,OAAA,CAAA+E,kBAAkB;IAAAC,QAAA,eAClB,IAAA1E,WAAA,CAAAyD,GAAA,EAACjE,cAAA,CAAAmF,OAAa;MACbhB,SAAS,EAAC,uEAAuE,CAAC;MAAA;MAClFC,KAAK,EAAG,IAAAC,QAAE,EAAE,OAAQ,CAAG;MACvBC,mBAAmB;MACnBC,qBAAqB;MACrBa,uBAAuB;MACvB/D,KAAK,EAAGgB,KAAO;MACfgD,OAAO,EAAG,CACT;QAAEhE,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU;MAAE,CAAC,EACvC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,UAAW;MAAE,CAAC,EACxC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ;MAAE,CAAC,EACrC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ;MAAE,CAAC,EACrC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,KAAM;MAAE,CAAC,EACnC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,MAAO;MAAE,CAAC,EACpC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,MAAO;MAAE,CAAC,EACpC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS;MAAE,CAAC,EACtC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,WAAY;MAAE,CAAC,EACzC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU;MAAE,CAAC,EACvC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,UAAW;MAAE,CAAC,EACxC;QAAEhD,KAAK,EAAE,IAAI;QAAE+C,KAAK,EAAE,IAAAC,QAAE,EAAE,UAAW;MAAE,CAAC,CACtC;MACHzC,QAAQ,EAAKP,KAAK,IAAM;QACvB,MAAMoC,OAAO,GAAG,IAAA6B,iBAAQ,EAAEzD,IAAI,EAAE2B,MAAM,CAAEnC,KAAM,CAAC,GAAG,CAAE,CAAC;QACrDS,OAAO,CAAE2B,OAAQ,CAAC;QAClB7B,QAAQ,GAAI,IAAAc,eAAM,EAAEe,OAAO,EAAEE,8BAAoB,CAAE,CAAC;MACrD;IAAG,CACH;EAAC,CACiB,CACpB;EAED,oBACC,IAAAnD,WAAA,CAAA+E,IAAA,EAACrF,OAAA,CAAAsF,OAAO;IACPrB,SAAS,EAAC,2BAA2B,CAAC;IAAA;IAAAe,QAAA,gBAEtC,IAAA1E,WAAA,CAAA+E,IAAA,EAACrF,OAAA,CAAAuF,QAAQ;MAAAP,QAAA,gBACR,IAAA1E,WAAA,CAAAyD,GAAA,EAACrE,YAAA,CAAAuF,OAAW,CAACO,WAAW;QACvBC,EAAE,EAAC,QAAQ;QACXxB,SAAS,EAAC,kCAAkC,CAAC;QAAA;QAAAe,QAAA,EAE3C,IAAAb,QAAE,EAAE,MAAO;MAAC,CACU,CAAC,eAC1B,IAAA7D,WAAA,CAAA+E,IAAA,EAACpF,OAAA,CAAAyF,MAAM;QACNzB,SAAS,EAAC,mCAAmC,CAAC;QAAA;QAAAe,QAAA,gBAE9C,IAAA1E,WAAA,CAAA+E,IAAA,EAACrF,OAAA,CAAA2F,WAAW;UACX1B,SAAS,EAAC,sEAAsE,CAAC;UAAA;UAAAe,QAAA,gBAEjF,IAAA1E,WAAA,CAAAyD,GAAA,EAAC/D,OAAA,CAAA4F,UAAU;YACV3B,SAAS,EAAC,6CAA6C,CAAC;YAAA;YACxDC,KAAK,EAAG,IAAAC,QAAE,EAAE,OAAQ,CAAG;YACvBC,mBAAmB;YACnBC,qBAAqB;YACrBlD,KAAK,EAAGX,KAAO;YACf8D,IAAI,EAAG,CAAG;YACVC,GAAG,EAAG/C,QAAQ,GAAG,CAAC,GAAG,CAAG;YACxBgD,GAAG,EAAGhD,QAAQ,GAAG,EAAE,GAAG,EAAI;YAC1BiD,QAAQ;YACRC,YAAY,EAAC,MAAM;YACnBC,oBAAoB;YACpBC,aAAa,EAAG,KAAO;YACvBC,kBAAkB,EAAG,KAAO;YAC5BnD,QAAQ,EAAGe,gCAAgC,CAC1C,OACD,CAAG;YACHoD,sBAAsB,EAAGnF,yBAAyB,CACjD,CACD;UAAG,CACH,CAAC,eACF,IAAAJ,WAAA,CAAAyD,GAAA,EAAC/D,OAAA,CAAA8F,aAAa;YACb7B,SAAS,EAAC,qCAAqC,CAAC;YAAA;YAChD,eAAY,MAAM;YAAAe,QAAA,EAClB;UAED,CAAe,CAAC,eAChB,IAAA1E,WAAA,CAAAyD,GAAA,EAAC/D,OAAA,CAAA+F,YAAY;YACZ9B,SAAS,EAAC,+CAA+C,CAAC;YAAA;YAC1DC,KAAK,EAAG,IAAAC,QAAE,EAAE,SAAU,CAAG;YACzBC,mBAAmB;YACnBC,qBAAqB;YACrBlD,KAAK,EAAGkB,OAAS;YACjBiC,IAAI,EAAG,CAAG;YACVC,GAAG,EAAG,CAAG;YACTC,GAAG,EAAG,EAAI;YACVC,QAAQ;YACRC,YAAY,EAAC,MAAM;YACnBC,oBAAoB;YACpBC,aAAa,EAAG,KAAO;YACvBC,kBAAkB,EAAG,KAAO;YAC5BnD,QAAQ,EAAGe,gCAAgC,CAC1C,SACD,CAAG;YACHoD,sBAAsB,EAAGnF,yBAAyB,CACjD,CACD;UAAG,CACH,CAAC;QAAA,CACU,CAAC,EACZc,QAAQ,iBACT,IAAAlB,WAAA,CAAA+E,IAAA,EAACxF,YAAA,CAAAoF,OAAW;UACXhB,SAAS,EAAC,uEAAuE,CAAC;UAAA;UAAAe,QAAA,gBAElF,IAAA1E,WAAA,CAAAyD,GAAA,EAACnE,OAAA,CAAAqF,OAAM;YACNhB,SAAS,EAAC,qCAAqC,CAAC;YAAA;YAChD+B,OAAO,EACN1D,EAAE,KAAK,IAAI,GAAG,SAAS,GAAG,WAC1B;YACD+B,qBAAqB;YACrB4B,OAAO,EAAGvC,uBAAuB,CAAE,IAAK,CAAG;YAAAsB,QAAA,EAEzC,IAAAb,QAAE,EAAE,IAAK;UAAC,CACL,CAAC,eACT,IAAA7D,WAAA,CAAAyD,GAAA,EAACnE,OAAA,CAAAqF,OAAM;YACNhB,SAAS,EAAC,qCAAqC,CAAC;YAAA;YAChD+B,OAAO,EACN1D,EAAE,KAAK,IAAI,GAAG,SAAS,GAAG,WAC1B;YACD+B,qBAAqB;YACrB4B,OAAO,EAAGvC,uBAAuB,CAAE,IAAK,CAAG;YAAAsB,QAAA,EAEzC,IAAAb,QAAE,EAAE,IAAK;UAAC,CACL,CAAC;QAAA,CACG,CACb,eACD,IAAA7D,WAAA,CAAAyD,GAAA,EAAC7D,OAAA,CAAAgG,MAAM,IAAE,CAAC,eACV,IAAA5F,WAAA,CAAAyD,GAAA,EAAChE,SAAA,CAAAkF,OAAQ,IAAE,CAAC;MAAA,CACL,CAAC;IAAA,CACA,CAAC,eACX,IAAA3E,WAAA,CAAA+E,IAAA,EAACrF,OAAA,CAAAuF,QAAQ;MAAAP,QAAA,gBACR,IAAA1E,WAAA,CAAAyD,GAAA,EAACrE,YAAA,CAAAuF,OAAW,CAACO,WAAW;QACvBC,EAAE,EAAC,QAAQ;QACXxB,SAAS,EAAC,kCAAkC,CAAC;QAAA;QAAAe,QAAA,EAE3C,IAAAb,QAAE,EAAE,MAAO;MAAC,CACU,CAAC,eAC1B,IAAA7D,WAAA,CAAA+E,IAAA,EAACpF,OAAA,CAAAyF,MAAM;QACNzB,SAAS,EAAC,mCAAmC,CAAC;QAAA;QAAAe,QAAA,GAE5CxD,QAAQ,gBACT,IAAAlB,WAAA,CAAA+E,IAAA,EAAA/E,WAAA,CAAA6F,QAAA;UAAAnB,QAAA,GACGF,UAAU,EACVhB,QAAQ;QAAA,CACT,CAAC,gBAEH,IAAAxD,WAAA,CAAA+E,IAAA,EAAA/E,WAAA,CAAA6F,QAAA;UAAAnB,QAAA,GACGlB,QAAQ,EACRgB,UAAU;QAAA,CACX,CACF,eACD,IAAAxE,WAAA,CAAAyD,GAAA,EAAC/D,OAAA,CAAAoG,SAAS;UACTnC,SAAS,EAAC,sEAAsE,CAAC;UAAA;UACjFC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;UACtBC,mBAAmB;UACnBC,qBAAqB;UACrBlD,KAAK,EAAGiB,IAAM;UACdkC,IAAI,EAAG,CAAG;UACVC,GAAG,EAAG,CAAG;UACTC,GAAG,EAAG,IAAM;UACZC,QAAQ;UACRC,YAAY,EAAC,MAAM;UACnBC,oBAAoB;UACpBC,aAAa,EAAG,KAAO;UACvBC,kBAAkB,EAAG,KAAO;UAC5BnD,QAAQ,EAAGe,gCAAgC,CAAE,MAAO,CAAG;UACvDoD,sBAAsB,EAAGnF,yBAAyB,CACjD,CACD;QAAG,CACH,CAAC;MAAA,CACK,CAAC;IAAA,CACA,CAAC;EAAA,CACH,CAAC;AAEZ;AAAC,IAAA2F,QAAA,GAAAC,OAAA,CAAArB,OAAA,GAEc1D,UAAU","ignoreList":[]}
+{"version":3,"names":["_dateFns","require","_element","_i18n","_baseControl","_interopRequireDefault","_selectControl","_timezone","_styles","_hStack","_spacer","_utils","_constants","_timeInput","_jsxRuntime","VALID_DATE_ORDERS","TimePicker","is12Hour","currentTime","onChange","dateOrder","dateOrderProp","date","setDate","useState","startOfMinute","inputToDate","Date","useEffect","day","month","year","minutes","hours","useMemo","format","am","buildNumberControlChangeCallback","method","callback","value","event","validateInputElementTarget","numberValue","Number","newDate","set","TIMEZONELESS_FORMAT","onTimeInputChangeCallback","newHours","newMinutes","dayField","jsx","DayInput","className","label","__","hideLabelFromVision","__next40pxDefaultSize","step","min","max","required","spinControls","isPressEnterToChange","isDragEnabled","isShiftStepEnabled","monthField","MonthSelectWrapper","children","default","__nextHasNoMarginBottom","options","setMonth","yearField","YearInput","__unstableStateReducer","buildPadInputStateReducer","defaultDateOrder","includes","fields","split","map","field","jsxs","Wrapper","Fieldset","VisualLabel","as","HStack","TimeInput","Spacer","_default","exports"],"sources":["@wordpress/components/src/date-time/time/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { startOfMinute, format, set, setMonth } from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../../base-control';\nimport SelectControl from '../../select-control';\nimport TimeZone from './timezone';\nimport type { TimeInputValue, TimePickerProps } from '../types';\nimport {\n\tWrapper,\n\tFieldset,\n\tMonthSelectWrapper,\n\tDayInput,\n\tYearInput,\n} from './styles';\nimport { HStack } from '../../h-stack';\nimport { Spacer } from '../../spacer';\nimport type { InputChangeCallback } from '../../input-control/types';\nimport {\n\tinputToDate,\n\tbuildPadInputStateReducer,\n\tvalidateInputElementTarget,\n} from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\nimport { TimeInput } from '../time-input';\n\nconst VALID_DATE_ORDERS = [ 'dmy', 'mdy', 'ymd' ];\n\n/**\n * TimePicker is a React component that renders a clock for time selection.\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimePicker = () => {\n *   const [ time, setTime ] = useState( new Date() );\n *\n *   return (\n *     <TimePicker\n *       currentTime={ date }\n *       onChange={ ( newTime ) => setTime( newTime ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport function TimePicker( {\n\tis12Hour,\n\tcurrentTime,\n\tonChange,\n\tdateOrder: dateOrderProp,\n}: TimePickerProps ) {\n\tconst [ date, setDate ] = useState( () =>\n\t\t// Truncate the date at the minutes, see: #15495.\n\t\tcurrentTime ? startOfMinute( inputToDate( currentTime ) ) : new Date()\n\t);\n\n\t// Reset the state when currentTime changed.\n\t// TODO: useEffect() shouldn't be used like this, causes an unnecessary render\n\tuseEffect( () => {\n\t\tsetDate(\n\t\t\tcurrentTime\n\t\t\t\t? startOfMinute( inputToDate( currentTime ) )\n\t\t\t\t: new Date()\n\t\t);\n\t}, [ currentTime ] );\n\n\tconst { day, month, year, minutes, hours } = useMemo(\n\t\t() => ( {\n\t\t\tday: format( date, 'dd' ),\n\t\t\tmonth: format( date, 'MM' ),\n\t\t\tyear: format( date, 'yyyy' ),\n\t\t\tminutes: format( date, 'mm' ),\n\t\t\thours: format( date, 'HH' ),\n\t\t\tam: format( date, 'a' ),\n\t\t} ),\n\t\t[ date ]\n\t);\n\n\tconst buildNumberControlChangeCallback = ( method: 'date' | 'year' ) => {\n\t\tconst callback: InputChangeCallback = ( value, { event } ) => {\n\t\t\tif ( ! validateInputElementTarget( event ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// We can safely assume value is a number if target is valid.\n\t\t\tconst numberValue = Number( value );\n\n\t\t\tconst newDate = set( date, { [ method ]: numberValue } );\n\t\t\tsetDate( newDate );\n\t\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t\t};\n\t\treturn callback;\n\t};\n\n\tconst onTimeInputChangeCallback = ( {\n\t\thours: newHours,\n\t\tminutes: newMinutes,\n\t}: TimeInputValue ) => {\n\t\tconst newDate = set( date, {\n\t\t\thours: newHours,\n\t\t\tminutes: newMinutes,\n\t\t} );\n\t\tsetDate( newDate );\n\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t};\n\n\tconst dayField = (\n\t\t<DayInput\n\t\t\tkey=\"day\"\n\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-day\" // Unused, for backwards compatibility.\n\t\t\tlabel={ __( 'Day' ) }\n\t\t\thideLabelFromVision\n\t\t\t__next40pxDefaultSize\n\t\t\tvalue={ day }\n\t\t\tstep={ 1 }\n\t\t\tmin={ 1 }\n\t\t\tmax={ 31 }\n\t\t\trequired\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange\n\t\t\tisDragEnabled={ false }\n\t\t\tisShiftStepEnabled={ false }\n\t\t\tonChange={ buildNumberControlChangeCallback( 'date' ) }\n\t\t/>\n\t);\n\n\tconst monthField = (\n\t\t<MonthSelectWrapper key=\"month\">\n\t\t\t<SelectControl\n\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-month\" // Unused, for backwards compatibility.\n\t\t\t\tlabel={ __( 'Month' ) }\n\t\t\t\thideLabelFromVision\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ month }\n\t\t\t\toptions={ [\n\t\t\t\t\t{ value: '01', label: __( 'January' ) },\n\t\t\t\t\t{ value: '02', label: __( 'February' ) },\n\t\t\t\t\t{ value: '03', label: __( 'March' ) },\n\t\t\t\t\t{ value: '04', label: __( 'April' ) },\n\t\t\t\t\t{ value: '05', label: __( 'May' ) },\n\t\t\t\t\t{ value: '06', label: __( 'June' ) },\n\t\t\t\t\t{ value: '07', label: __( 'July' ) },\n\t\t\t\t\t{ value: '08', label: __( 'August' ) },\n\t\t\t\t\t{ value: '09', label: __( 'September' ) },\n\t\t\t\t\t{ value: '10', label: __( 'October' ) },\n\t\t\t\t\t{ value: '11', label: __( 'November' ) },\n\t\t\t\t\t{ value: '12', label: __( 'December' ) },\n\t\t\t\t] }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newDate = setMonth( date, Number( value ) - 1 );\n\t\t\t\t\tsetDate( newDate );\n\t\t\t\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MonthSelectWrapper>\n\t);\n\n\tconst yearField = (\n\t\t<YearInput\n\t\t\tkey=\"year\"\n\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-year\" // Unused, for backwards compatibility.\n\t\t\tlabel={ __( 'Year' ) }\n\t\t\thideLabelFromVision\n\t\t\t__next40pxDefaultSize\n\t\t\tvalue={ year }\n\t\t\tstep={ 1 }\n\t\t\tmin={ 1 }\n\t\t\tmax={ 9999 }\n\t\t\trequired\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange\n\t\t\tisDragEnabled={ false }\n\t\t\tisShiftStepEnabled={ false }\n\t\t\tonChange={ buildNumberControlChangeCallback( 'year' ) }\n\t\t\t__unstableStateReducer={ buildPadInputStateReducer( 4 ) }\n\t\t/>\n\t);\n\n\tconst defaultDateOrder = is12Hour ? 'mdy' : 'dmy';\n\tconst dateOrder =\n\t\tdateOrderProp && VALID_DATE_ORDERS.includes( dateOrderProp )\n\t\t\t? dateOrderProp\n\t\t\t: defaultDateOrder;\n\n\tconst fields = dateOrder.split( '' ).map( ( field ) => {\n\t\tswitch ( field ) {\n\t\t\tcase 'd':\n\t\t\t\treturn dayField;\n\t\t\tcase 'm':\n\t\t\t\treturn monthField;\n\t\t\tcase 'y':\n\t\t\t\treturn yearField;\n\t\t\tdefault:\n\t\t\t\treturn null;\n\t\t}\n\t} );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName=\"components-datetime__time\" // Unused, for backwards compatibility.\n\t\t>\n\t\t\t<Fieldset>\n\t\t\t\t<BaseControl.VisualLabel\n\t\t\t\t\tas=\"legend\"\n\t\t\t\t\tclassName=\"components-datetime__time-legend\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Time' ) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t<TimeInput\n\t\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t\thours: Number( hours ),\n\t\t\t\t\t\t\tminutes: Number( minutes ),\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t\t\tonChange={ onTimeInputChangeCallback }\n\t\t\t\t\t/>\n\t\t\t\t\t<Spacer />\n\t\t\t\t\t<TimeZone />\n\t\t\t\t</HStack>\n\t\t\t</Fieldset>\n\t\t\t<Fieldset>\n\t\t\t\t<BaseControl.VisualLabel\n\t\t\t\t\tas=\"legend\"\n\t\t\t\t\tclassName=\"components-datetime__time-legend\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Date' ) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ fields }\n\t\t\t\t</HStack>\n\t\t\t</Fieldset>\n\t\t</Wrapper>\n\t);\n}\n\nexport default TimePicker;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,SAAA,GAAAF,sBAAA,CAAAJ,OAAA;AAEA,IAAAO,OAAA,GAAAP,OAAA;AAOA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,OAAA,GAAAT,OAAA;AAEA,IAAAU,MAAA,GAAAV,OAAA;AAKA,IAAAW,UAAA,GAAAX,OAAA;AACA,IAAAY,UAAA,GAAAZ,OAAA;AAA0C,IAAAa,WAAA,GAAAb,OAAA;AAlC1C;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAuBA,MAAMc,iBAAiB,GAAG,CAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAE;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,UAAUA,CAAE;EAC3BC,QAAQ;EACRC,WAAW;EACXC,QAAQ;EACRC,SAAS,EAAEC;AACK,CAAC,EAAG;EACpB,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAC,iBAAQ,EAAE;EACnC;EACAN,WAAW,GAAG,IAAAO,sBAAa,EAAE,IAAAC,kBAAW,EAAER,WAAY,CAAE,CAAC,GAAG,IAAIS,IAAI,CAAC,CACtE,CAAC;;EAED;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChBL,OAAO,CACNL,WAAW,GACR,IAAAO,sBAAa,EAAE,IAAAC,kBAAW,EAAER,WAAY,CAAE,CAAC,GAC3C,IAAIS,IAAI,CAAC,CACb,CAAC;EACF,CAAC,EAAE,CAAET,WAAW,CAAG,CAAC;EAEpB,MAAM;IAAEW,GAAG;IAAEC,KAAK;IAAEC,IAAI;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAG,IAAAC,gBAAO,EACnD,OAAQ;IACPL,GAAG,EAAE,IAAAM,eAAM,EAAEb,IAAI,EAAE,IAAK,CAAC;IACzBQ,KAAK,EAAE,IAAAK,eAAM,EAAEb,IAAI,EAAE,IAAK,CAAC;IAC3BS,IAAI,EAAE,IAAAI,eAAM,EAAEb,IAAI,EAAE,MAAO,CAAC;IAC5BU,OAAO,EAAE,IAAAG,eAAM,EAAEb,IAAI,EAAE,IAAK,CAAC;IAC7BW,KAAK,EAAE,IAAAE,eAAM,EAAEb,IAAI,EAAE,IAAK,CAAC;IAC3Bc,EAAE,EAAE,IAAAD,eAAM,EAAEb,IAAI,EAAE,GAAI;EACvB,CAAC,CAAE,EACH,CAAEA,IAAI,CACP,CAAC;EAED,MAAMe,gCAAgC,GAAKC,MAAuB,IAAM;IACvE,MAAMC,QAA6B,GAAGA,CAAEC,KAAK,EAAE;MAAEC;IAAM,CAAC,KAAM;MAC7D,IAAK,CAAE,IAAAC,iCAA0B,EAAED,KAAM,CAAC,EAAG;QAC5C;MACD;;MAEA;MACA,MAAME,WAAW,GAAGC,MAAM,CAAEJ,KAAM,CAAC;MAEnC,MAAMK,OAAO,GAAG,IAAAC,YAAG,EAAExB,IAAI,EAAE;QAAE,CAAEgB,MAAM,GAAIK;MAAY,CAAE,CAAC;MACxDpB,OAAO,CAAEsB,OAAQ,CAAC;MAClB1B,QAAQ,GAAI,IAAAgB,eAAM,EAAEU,OAAO,EAAEE,8BAAoB,CAAE,CAAC;IACrD,CAAC;IACD,OAAOR,QAAQ;EAChB,CAAC;EAED,MAAMS,yBAAyB,GAAGA,CAAE;IACnCf,KAAK,EAAEgB,QAAQ;IACfjB,OAAO,EAAEkB;EACM,CAAC,KAAM;IACtB,MAAML,OAAO,GAAG,IAAAC,YAAG,EAAExB,IAAI,EAAE;MAC1BW,KAAK,EAAEgB,QAAQ;MACfjB,OAAO,EAAEkB;IACV,CAAE,CAAC;IACH3B,OAAO,CAAEsB,OAAQ,CAAC;IAClB1B,QAAQ,GAAI,IAAAgB,eAAM,EAAEU,OAAO,EAAEE,8BAAoB,CAAE,CAAC;EACrD,CAAC;EAED,MAAMI,QAAQ,gBACb,IAAArC,WAAA,CAAAsC,GAAA,EAAC5C,OAAA,CAAA6C,QAAQ;IAERC,SAAS,EAAC,qEAAqE,CAAC;IAAA;IAChFC,KAAK,EAAG,IAAAC,QAAE,EAAE,KAAM,CAAG;IACrBC,mBAAmB;IACnBC,qBAAqB;IACrBlB,KAAK,EAAGX,GAAK;IACb8B,IAAI,EAAG,CAAG;IACVC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,EAAI;IACVC,QAAQ;IACRC,YAAY,EAAC,MAAM;IACnBC,oBAAoB;IACpBC,aAAa,EAAG,KAAO;IACvBC,kBAAkB,EAAG,KAAO;IAC5B/C,QAAQ,EAAGkB,gCAAgC,CAAE,MAAO;EAAG,GAdnD,KAeJ,CACD;EAED,MAAM8B,UAAU,gBACf,IAAArD,WAAA,CAAAsC,GAAA,EAAC5C,OAAA,CAAA4D,kBAAkB;IAAAC,QAAA,eAClB,IAAAvD,WAAA,CAAAsC,GAAA,EAAC9C,cAAA,CAAAgE,OAAa;MACbhB,SAAS,EAAC,uEAAuE,CAAC;MAAA;MAClFC,KAAK,EAAG,IAAAC,QAAE,EAAE,OAAQ,CAAG;MACvBC,mBAAmB;MACnBC,qBAAqB;MACrBa,uBAAuB;MACvB/B,KAAK,EAAGV,KAAO;MACf0C,OAAO,EAAG,CACT;QAAEhC,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU;MAAE,CAAC,EACvC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,UAAW;MAAE,CAAC,EACxC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ;MAAE,CAAC,EACrC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ;MAAE,CAAC,EACrC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,KAAM;MAAE,CAAC,EACnC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,MAAO;MAAE,CAAC,EACpC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,MAAO;MAAE,CAAC,EACpC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS;MAAE,CAAC,EACtC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,WAAY;MAAE,CAAC,EACzC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU;MAAE,CAAC,EACvC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,UAAW;MAAE,CAAC,EACxC;QAAEhB,KAAK,EAAE,IAAI;QAAEe,KAAK,EAAE,IAAAC,QAAE,EAAE,UAAW;MAAE,CAAC,CACtC;MACHrC,QAAQ,EAAKqB,KAAK,IAAM;QACvB,MAAMK,OAAO,GAAG,IAAA4B,iBAAQ,EAAEnD,IAAI,EAAEsB,MAAM,CAAEJ,KAAM,CAAC,GAAG,CAAE,CAAC;QACrDjB,OAAO,CAAEsB,OAAQ,CAAC;QAClB1B,QAAQ,GAAI,IAAAgB,eAAM,EAAEU,OAAO,EAAEE,8BAAoB,CAAE,CAAC;MACrD;IAAG,CACH;EAAC,GA3BqB,OA4BJ,CACpB;EAED,MAAM2B,SAAS,gBACd,IAAA5D,WAAA,CAAAsC,GAAA,EAAC5C,OAAA,CAAAmE,SAAS;IAETrB,SAAS,EAAC,sEAAsE,CAAC;IAAA;IACjFC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtBC,mBAAmB;IACnBC,qBAAqB;IACrBlB,KAAK,EAAGT,IAAM;IACd4B,IAAI,EAAG,CAAG;IACVC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,IAAM;IACZC,QAAQ;IACRC,YAAY,EAAC,MAAM;IACnBC,oBAAoB;IACpBC,aAAa,EAAG,KAAO;IACvBC,kBAAkB,EAAG,KAAO;IAC5B/C,QAAQ,EAAGkB,gCAAgC,CAAE,MAAO,CAAG;IACvDuC,sBAAsB,EAAG,IAAAC,gCAAyB,EAAE,CAAE;EAAG,GAfrD,MAgBJ,CACD;EAED,MAAMC,gBAAgB,GAAG7D,QAAQ,GAAG,KAAK,GAAG,KAAK;EACjD,MAAMG,SAAS,GACdC,aAAa,IAAIN,iBAAiB,CAACgE,QAAQ,CAAE1D,aAAc,CAAC,GACzDA,aAAa,GACbyD,gBAAgB;EAEpB,MAAME,MAAM,GAAG5D,SAAS,CAAC6D,KAAK,CAAE,EAAG,CAAC,CAACC,GAAG,CAAIC,KAAK,IAAM;IACtD,QAASA,KAAK;MACb,KAAK,GAAG;QACP,OAAOhC,QAAQ;MAChB,KAAK,GAAG;QACP,OAAOgB,UAAU;MAClB,KAAK,GAAG;QACP,OAAOO,SAAS;MACjB;QACC,OAAO,IAAI;IACb;EACD,CAAE,CAAC;EAEH,oBACC,IAAA5D,WAAA,CAAAsE,IAAA,EAAC5E,OAAA,CAAA6E,OAAO;IACP/B,SAAS,EAAC,2BAA2B,CAAC;IAAA;IAAAe,QAAA,gBAEtC,IAAAvD,WAAA,CAAAsE,IAAA,EAAC5E,OAAA,CAAA8E,QAAQ;MAAAjB,QAAA,gBACR,IAAAvD,WAAA,CAAAsC,GAAA,EAAChD,YAAA,CAAAkE,OAAW,CAACiB,WAAW;QACvBC,EAAE,EAAC,QAAQ;QACXlC,SAAS,EAAC,kCAAkC,CAAC;QAAA;QAAAe,QAAA,EAE3C,IAAAb,QAAE,EAAE,MAAO;MAAC,CACU,CAAC,eAC1B,IAAA1C,WAAA,CAAAsE,IAAA,EAAC3E,OAAA,CAAAgF,MAAM;QACNnC,SAAS,EAAC,mCAAmC,CAAC;QAAA;QAAAe,QAAA,gBAE9C,IAAAvD,WAAA,CAAAsC,GAAA,EAACvC,UAAA,CAAA6E,SAAS;UACTlD,KAAK,EAAG;YACPP,KAAK,EAAEW,MAAM,CAAEX,KAAM,CAAC;YACtBD,OAAO,EAAEY,MAAM,CAAEZ,OAAQ;UAC1B,CAAG;UACHf,QAAQ,EAAGA,QAAU;UACrBE,QAAQ,EAAG6B;QAA2B,CACtC,CAAC,eACF,IAAAlC,WAAA,CAAAsC,GAAA,EAAC1C,OAAA,CAAAiF,MAAM,IAAE,CAAC,eACV,IAAA7E,WAAA,CAAAsC,GAAA,EAAC7C,SAAA,CAAA+D,OAAQ,IAAE,CAAC;MAAA,CACL,CAAC;IAAA,CACA,CAAC,eACX,IAAAxD,WAAA,CAAAsE,IAAA,EAAC5E,OAAA,CAAA8E,QAAQ;MAAAjB,QAAA,gBACR,IAAAvD,WAAA,CAAAsC,GAAA,EAAChD,YAAA,CAAAkE,OAAW,CAACiB,WAAW;QACvBC,EAAE,EAAC,QAAQ;QACXlC,SAAS,EAAC,kCAAkC,CAAC;QAAA;QAAAe,QAAA,EAE3C,IAAAb,QAAE,EAAE,MAAO;MAAC,CACU,CAAC,eAC1B,IAAA1C,WAAA,CAAAsC,GAAA,EAAC3C,OAAA,CAAAgF,MAAM;QACNnC,SAAS,EAAC,mCAAmC,CAAC;QAAA;QAAAe,QAAA,EAE5CW;MAAM,CACD,CAAC;IAAA,CACA,CAAC;EAAA,CACH,CAAC;AAEZ;AAAC,IAAAY,QAAA,GAAAC,OAAA,CAAAvB,OAAA,GAEctD,UAAU","ignoreList":[]}

package/build/date-time/time-input/index.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimeInput = TimeInput;
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
+var _styles = require("../time/styles");
+var _hStack = require("../../h-stack");
+var _button = _interopRequireDefault(require("../../button"));
+var _buttonGroup = _interopRequireDefault(require("../../button-group"));
+var _utils = require("../utils");
+var _utils2 = require("../../utils");
+var _baseControl = _interopRequireDefault(require("../../base-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function TimeInput({
+  value: valueProp,
+  defaultValue,
+  is12Hour,
+  label,
+  minutesProps,
+  onChange
+}) {
+  const [value = {
+    hours: new Date().getHours(),
+    minutes: new Date().getMinutes()
+  }, setValue] = (0, _utils2.useControlledValue)({
+    value: valueProp,
+    onChange,
+    defaultValue
+  });
+  const dayPeriod = parseDayPeriod(value.hours);
+  const hours12Format = (0, _utils.from24hTo12h)(value.hours);
+  const buildNumberControlChangeCallback = method => {
+    return (_value, {
+      event
+    }) => {
+      if (!(0, _utils.validateInputElementTarget)(event)) {
+        return;
+      }
+
+      // We can safely assume value is a number if target is valid.
+      const numberValue = Number(_value);
+      setValue({
+        ...value,
+        [method]: method === 'hours' && is12Hour ? (0, _utils.from12hTo24h)(numberValue, dayPeriod === 'PM') : numberValue
+      });
+    };
+  };
+  const buildAmPmChangeCallback = _value => {
+    return () => {
+      if (dayPeriod === _value) {
+        return;
+      }
+      setValue({
+        ...value,
+        hours: (0, _utils.from12hTo24h)(hours12Format, _value === 'PM')
+      });
+    };
+  };
+  function parseDayPeriod(_hours) {
+    return _hours < 12 ? 'AM' : 'PM';
+  }
+  const Wrapper = label ? _styles.Fieldset : _element.Fragment;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default.VisualLabel, {
+      as: "legend",
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
+      alignment: "left",
+      expanded: false,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TimeWrapper, {
+        className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
+        ,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HoursInput, {
+          className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
+          ,
+          label: (0, _i18n.__)('Hours'),
+          hideLabelFromVision: true,
+          __next40pxDefaultSize: true,
+          value: String(is12Hour ? hours12Format : value.hours).padStart(2, '0'),
+          step: 1,
+          min: is12Hour ? 1 : 0,
+          max: is12Hour ? 12 : 23,
+          required: true,
+          spinControls: "none",
+          isPressEnterToChange: true,
+          isDragEnabled: false,
+          isShiftStepEnabled: false,
+          onChange: buildNumberControlChangeCallback('hours'),
+          __unstableStateReducer: (0, _utils.buildPadInputStateReducer)(2)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TimeSeparator, {
+          className: "components-datetime__time-separator" // Unused, for backwards compatibility.
+          ,
+          "aria-hidden": "true",
+          children: ":"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MinutesInput, {
+          className: (0, _clsx.default)('components-datetime__time-field-minutes-input',
+          // Unused, for backwards compatibility.
+          minutesProps?.className),
+          label: (0, _i18n.__)('Minutes'),
+          hideLabelFromVision: true,
+          __next40pxDefaultSize: true,
+          value: String(value.minutes).padStart(2, '0'),
+          step: 1,
+          min: 0,
+          max: 59,
+          required: true,
+          spinControls: "none",
+          isPressEnterToChange: true,
+          isDragEnabled: false,
+          isShiftStepEnabled: false,
+          onChange: (...args) => {
+            buildNumberControlChangeCallback('minutes')(...args);
+            minutesProps?.onChange?.(...args);
+          },
+          __unstableStateReducer: (0, _utils.buildPadInputStateReducer)(2),
+          ...minutesProps
+        })]
+      }), is12Hour && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_buttonGroup.default, {
+        className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
+        ,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          className: "components-datetime__time-am-button" // Unused, for backwards compatibility.
+          ,
+          variant: dayPeriod === 'AM' ? 'primary' : 'secondary',
+          __next40pxDefaultSize: true,
+          onClick: buildAmPmChangeCallback('AM'),
+          children: (0, _i18n.__)('AM')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          className: "components-datetime__time-pm-button" // Unused, for backwards compatibility.
+          ,
+          variant: dayPeriod === 'PM' ? 'primary' : 'secondary',
+          __next40pxDefaultSize: true,
+          onClick: buildAmPmChangeCallback('PM'),
+          children: (0, _i18n.__)('PM')
+        })]
+      })]
+    })]
+  });
+}
+var _default = exports.default = TimeInput;
+//# sourceMappingURL=index.js.map

package/build/date-time/time-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_styles","_hStack","_button","_buttonGroup","_utils","_utils2","_baseControl","_jsxRuntime","TimeInput","value","valueProp","defaultValue","is12Hour","label","minutesProps","onChange","hours","Date","getHours","minutes","getMinutes","setValue","useControlledValue","dayPeriod","parseDayPeriod","hours12Format","from24hTo12h","buildNumberControlChangeCallback","method","_value","event","validateInputElementTarget","numberValue","Number","from12hTo24h","buildAmPmChangeCallback","_hours","Wrapper","Fieldset","Fragment","jsxs","children","jsx","default","VisualLabel","as","HStack","alignment","expanded","TimeWrapper","className","HoursInput","__","hideLabelFromVision","__next40pxDefaultSize","String","padStart","step","min","max","required","spinControls","isPressEnterToChange","isDragEnabled","isShiftStepEnabled","__unstableStateReducer","buildPadInputStateReducer","TimeSeparator","MinutesInput","clsx","args","variant","onClick","_default","exports"],"sources":["@wordpress/components/src/date-time/time-input/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Fragment } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tTimeWrapper,\n\tTimeSeparator,\n\tHoursInput,\n\tMinutesInput,\n\tFieldset,\n} from '../time/styles';\nimport { HStack } from '../../h-stack';\nimport Button from '../../button';\nimport ButtonGroup from '../../button-group';\nimport {\n\tfrom12hTo24h,\n\tfrom24hTo12h,\n\tbuildPadInputStateReducer,\n\tvalidateInputElementTarget,\n} from '../utils';\nimport type { TimeInputProps } from '../types';\nimport type { InputChangeCallback } from '../../input-control/types';\nimport { useControlledValue } from '../../utils';\nimport BaseControl from '../../base-control';\n\nexport function TimeInput( {\n\tvalue: valueProp,\n\tdefaultValue,\n\tis12Hour,\n\tlabel,\n\tminutesProps,\n\tonChange,\n}: TimeInputProps ) {\n\tconst [\n\t\tvalue = {\n\t\t\thours: new Date().getHours(),\n\t\t\tminutes: new Date().getMinutes(),\n\t\t},\n\t\tsetValue,\n\t] = useControlledValue( {\n\t\tvalue: valueProp,\n\t\tonChange,\n\t\tdefaultValue,\n\t} );\n\tconst dayPeriod = parseDayPeriod( value.hours );\n\tconst hours12Format = from24hTo12h( value.hours );\n\n\tconst buildNumberControlChangeCallback = (\n\t\tmethod: 'hours' | 'minutes'\n\t): InputChangeCallback => {\n\t\treturn ( _value, { event } ) => {\n\t\t\tif ( ! validateInputElementTarget( event ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// We can safely assume value is a number if target is valid.\n\t\t\tconst numberValue = Number( _value );\n\n\t\t\tsetValue( {\n\t\t\t\t...value,\n\t\t\t\t[ method ]:\n\t\t\t\t\tmethod === 'hours' && is12Hour\n\t\t\t\t\t\t? from12hTo24h( numberValue, dayPeriod === 'PM' )\n\t\t\t\t\t\t: numberValue,\n\t\t\t} );\n\t\t};\n\t};\n\n\tconst buildAmPmChangeCallback = ( _value: 'AM' | 'PM' ) => {\n\t\treturn () => {\n\t\t\tif ( dayPeriod === _value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetValue( {\n\t\t\t\t...value,\n\t\t\t\thours: from12hTo24h( hours12Format, _value === 'PM' ),\n\t\t\t} );\n\t\t};\n\t};\n\n\tfunction parseDayPeriod( _hours: number ) {\n\t\treturn _hours < 12 ? 'AM' : 'PM';\n\t}\n\n\tconst Wrapper = label ? Fieldset : Fragment;\n\n\treturn (\n\t\t<Wrapper>\n\t\t\t{ label && (\n\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t{ label }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t) }\n\n\t\t\t<HStack alignment=\"left\" expanded={ false }>\n\t\t\t\t<TimeWrapper\n\t\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-time\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t<HoursInput\n\t\t\t\t\t\tclassName=\"components-datetime__time-field-hours-input\" // Unused, for backwards compatibility.\n\t\t\t\t\t\tlabel={ __( 'Hours' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvalue={ String(\n\t\t\t\t\t\t\tis12Hour ? hours12Format : value.hours\n\t\t\t\t\t\t).padStart( 2, '0' ) }\n\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\tmin={ is12Hour ? 1 : 0 }\n\t\t\t\t\t\tmax={ is12Hour ? 12 : 23 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\tisShiftStepEnabled={ false }\n\t\t\t\t\t\tonChange={ buildNumberControlChangeCallback( 'hours' ) }\n\t\t\t\t\t\t__unstableStateReducer={ buildPadInputStateReducer(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t\t<TimeSeparator\n\t\t\t\t\t\tclassName=\"components-datetime__time-separator\" // Unused, for backwards compatibility.\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t>\n\t\t\t\t\t\t:\n\t\t\t\t\t</TimeSeparator>\n\t\t\t\t\t<MinutesInput\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'components-datetime__time-field-minutes-input', // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tminutesProps?.className\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlabel={ __( 'Minutes' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvalue={ String( value.minutes ).padStart( 2, '0' ) }\n\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tmax={ 59 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\tisShiftStepEnabled={ false }\n\t\t\t\t\t\tonChange={ ( ...args ) => {\n\t\t\t\t\t\t\tbuildNumberControlChangeCallback( 'minutes' )(\n\t\t\t\t\t\t\t\t...args\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tminutesProps?.onChange?.( ...args );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t__unstableStateReducer={ buildPadInputStateReducer(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ...minutesProps }\n\t\t\t\t\t/>\n\t\t\t\t</TimeWrapper>\n\t\t\t\t{ is12Hour && (\n\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-am-pm\" // Unused, for backwards compatibility.\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-am-button\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\tdayPeriod === 'AM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tonClick={ buildAmPmChangeCallback( 'AM' ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'AM' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-pm-button\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\tdayPeriod === 'PM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tonClick={ buildAmPmChangeCallback( 'PM' ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'PM' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</ButtonGroup>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</Wrapper>\n\t);\n}\nexport default TimeInput;\n"],"mappings":"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","ignoreList":[]}