@wordpress/components 28.1.0 → 28.3.0

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","default","DatePicker","TimePicker","Wrapper","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","noop","UnforwardedDateTimePicker","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","ref","className","spacing","children","currentTime","DateTimePicker"],"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":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;AAG/C;AACA;AACA;AACA,SAASC,OAAO,IAAIC,UAAU,QAAQ,SAAS;AAC/C,SAASD,OAAO,IAAIE,UAAU,QAAQ,SAAS;AAE/C,SAASC,OAAO,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEnC,SAASR,UAAU,EAAEC,UAAU;AAE/B,MAAMQ,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,oBACCd,IAAA,CAACF,OAAO;IAACgB,GAAG,EAAGA,GAAK;IAACC,SAAS,EAAC,qBAAqB;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,eACjEb,KAAA,CAAAF,SAAA;MAAAe,QAAA,gBACCjB,IAAA,CAACH,UAAU;QACVqB,WAAW,EAAGX,WAAa;QAC3BI,QAAQ,EAAGA,QAAU;QACrBH,QAAQ,EAAGA;MAAU,CACrB,CAAC,eACFR,IAAA,CAACJ,UAAU;QACVW,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;AACA,OAAO,MAAMM,cAAc,GAAGzB,UAAU,CAAEY,yBAA0B,CAAC;AAErE,eAAea,cAAc","ignoreList":[]}
+{"version":3,"names":["forwardRef","default","DatePicker","TimePicker","Wrapper","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","noop","UnforwardedDateTimePicker","currentDate","is12Hour","dateOrder","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","ref","className","spacing","children","currentTime","DateTimePicker"],"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":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,SAASC,OAAO,IAAIC,UAAU,QAAQ,SAAS;AAC/C,SAASD,OAAO,IAAIE,UAAU,QAAQ,SAAS;AAE/C,SAASC,OAAO,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEnC,SAASR,UAAU,EAAEC,UAAU;AAE/B,MAAMQ,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,oBACCf,IAAA,CAACF,OAAO;IAACiB,GAAG,EAAGA,GAAK;IAACC,SAAS,EAAC,qBAAqB;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,eACjEd,KAAA,CAAAF,SAAA;MAAAgB,QAAA,gBACClB,IAAA,CAACH,UAAU;QACVsB,WAAW,EAAGZ,WAAa;QAC3BK,QAAQ,EAAGA,QAAU;QACrBJ,QAAQ,EAAGA,QAAU;QACrBC,SAAS,EAAGA;MAAW,CACvB,CAAC,eACFT,IAAA,CAACJ,UAAU;QACVW,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;AACA,OAAO,MAAMM,cAAc,GAAG1B,UAAU,CAAEY,yBAA0B,CAAC;AAErE,eAAec,cAAc","ignoreList":[]}

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

@@ -3,7 +3,8 @@
  */
 import { default as DatePicker } from './date';
 import { default as TimePicker } from './time';
+import { default as TimeInput } from './time-input';
 import { default as DateTimePicker } from './date-time';
-export { DatePicker, TimePicker };
+export { DatePicker, TimePicker, TimeInput };
 export default DateTimePicker;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default","DatePicker","TimePicker","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":"AAAA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,UAAU,QAAQ,QAAQ;AAC9C,SAASD,OAAO,IAAIE,UAAU,QAAQ,QAAQ;AAC9C,SAASF,OAAO,IAAIG,cAAc,QAAQ,aAAa;AAEvD,SAASF,UAAU,EAAEC,UAAU;AAC/B,eAAeC,cAAc","ignoreList":[]}
+{"version":3,"names":["default","DatePicker","TimePicker","TimeInput","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":"AAAA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,UAAU,QAAQ,QAAQ;AAC9C,SAASD,OAAO,IAAIE,UAAU,QAAQ,QAAQ;AAC9C,SAASF,OAAO,IAAIG,SAAS,QAAQ,cAAc;AACnD,SAASH,OAAO,IAAII,cAAc,QAAQ,aAAa;AAEvD,SAASH,UAAU,EAAEC,UAAU,EAAEC,SAAS;AAC1C,eAAeC,cAAc","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { startOfMinute, format, set, setHours, setMonth } from 'date-fns';
+import { startOfMinute, format, set, setMonth } from 'date-fns';
 
 /**
  * WordPress dependencies
@@ -13,43 +13,17 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BaseControl from '../../base-control';
-import Button from '../../button';
-import ButtonGroup from '../../button-group';
 import SelectControl from '../../select-control';
 import TimeZone from './timezone';
-import { Wrapper, Fieldset, HoursInput, TimeSeparator, MinutesInput, MonthSelectWrapper, DayInput, YearInput, TimeWrapper } from './styles';
+import { Wrapper, Fieldset, MonthSelectWrapper, DayInput, YearInput } from './styles';
 import { HStack } from '../../h-stack';
 import { Spacer } from '../../spacer';
-import { COMMIT, PRESS_DOWN, PRESS_UP } from '../../input-control/reducer/actions';
-import { inputToDate } from '../utils';
+import { inputToDate, buildPadInputStateReducer, validateInputElementTarget } from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
+import { TimeInput } from '../time-input';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-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 === COMMIT || action.type === PRESS_UP || action.type === 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.
@@ -74,7 +48,8 @@ function buildPadInputStateReducer(pad) {
 export function TimePicker({
   is12Hour,
   currentTime,
-  onChange
+  onChange,
+  dateOrder: dateOrderProp
 }) {
   const [date, setDate] = useState(() =>
   // Truncate the date at the minutes, see: #15495.
@@ -90,41 +65,25 @@ export function TimePicker({
     month,
     year,
     minutes,
-    hours,
-    am
+    hours
   } = useMemo(() => ({
     day: format(date, 'dd'),
     month: format(date, 'MM'),
     year: format(date, 'yyyy'),
     minutes: format(date, 'mm'),
-    hours: format(date, is12Hour ? 'hh' : 'HH'),
+    hours: format(date, 'HH'),
     am: 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 (!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 = set(date, {
         [method]: numberValue
       });
@@ -133,17 +92,17 @@ export function TimePicker({
     };
     return callback;
   };
-  function buildAmPmChangeCallback(value) {
-    return () => {
-      if (am === value) {
-        return;
-      }
-      const parsedHours = parseInt(hours, 10);
-      const newDate = setHours(date, from12hTo24h(parsedHours, value === 'PM'));
-      setDate(newDate);
-      onChange?.(format(newDate, TIMEZONELESS_FORMAT));
-    };
-  }
+  const onTimeInputChangeCallback = ({
+    hours: newHours,
+    minutes: newMinutes
+  }) => {
+    const newDate = set(date, {
+      hours: newHours,
+      minutes: newMinutes
+    });
+    setDate(newDate);
+    onChange?.(format(newDate, TIMEZONELESS_FORMAT));
+  };
   const dayField = /*#__PURE__*/_jsx(DayInput, {
     className: "components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
     ,
@@ -160,7 +119,7 @@ export function TimePicker({
     isDragEnabled: false,
     isShiftStepEnabled: false,
     onChange: buildNumberControlChangeCallback('date')
-  });
+  }, "day");
   const monthField = /*#__PURE__*/_jsx(MonthSelectWrapper, {
     children: /*#__PURE__*/_jsx(SelectControl, {
       className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
@@ -213,6 +172,38 @@ export function TimePicker({
         onChange?.(format(newDate, TIMEZONELESS_FORMAT));
       }
     })
+  }, "month");
+  const yearField = /*#__PURE__*/_jsx(YearInput, {
+    className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
+    ,
+    label: __('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)
+  }, "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__*/_jsxs(Wrapper, {
     className: "components-datetime__time" // Unused, for backwards compatibility.
@@ -226,67 +217,13 @@ export function TimePicker({
       }), /*#__PURE__*/_jsxs(HStack, {
         className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
         ,
-        children: [/*#__PURE__*/_jsxs(TimeWrapper, {
-          className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
-          ,
-          children: [/*#__PURE__*/_jsx(HoursInput, {
-            className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
-            ,
-            label: __('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__*/_jsx(TimeSeparator, {
-            className: "components-datetime__time-separator" // Unused, for backwards compatibility.
-            ,
-            "aria-hidden": "true",
-            children: ":"
-          }), /*#__PURE__*/_jsx(MinutesInput, {
-            className: "components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
-            ,
-            label: __('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__*/_jsxs(ButtonGroup, {
-          className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
-          ,
-          children: [/*#__PURE__*/_jsx(Button, {
-            className: "components-datetime__time-am-button" // Unused, for backwards compatibility.
-            ,
-            variant: am === 'AM' ? 'primary' : 'secondary',
-            __next40pxDefaultSize: true,
-            onClick: buildAmPmChangeCallback('AM'),
-            children: __('AM')
-          }), /*#__PURE__*/_jsx(Button, {
-            className: "components-datetime__time-pm-button" // Unused, for backwards compatibility.
-            ,
-            variant: am === 'PM' ? 'primary' : 'secondary',
-            __next40pxDefaultSize: true,
-            onClick: buildAmPmChangeCallback('PM'),
-            children: __('PM')
-          })]
+        children: [/*#__PURE__*/_jsx(TimeInput, {
+          value: {
+            hours: Number(hours),
+            minutes: Number(minutes)
+          },
+          is12Hour: is12Hour,
+          onChange: onTimeInputChangeCallback
         }), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(TimeZone, {})]
       })]
     }), /*#__PURE__*/_jsxs(Fieldset, {
@@ -295,31 +232,10 @@ export function TimePicker({
         className: "components-datetime__time-legend" // Unused, for backwards compatibility.
         ,
         children: __('Date')
-      }), /*#__PURE__*/_jsxs(HStack, {
+      }), /*#__PURE__*/_jsx(HStack, {
         className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
         ,
-        children: [is12Hour ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [monthField, dayField]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [dayField, monthField]
-        }), /*#__PURE__*/_jsx(YearInput, {
-          className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
-          ,
-          label: __('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-module/date-time/time/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["startOfMinute","format","set","setHours","setMonth","useState","useMemo","useEffect","__","BaseControl","Button","ButtonGroup","SelectControl","TimeZone","Wrapper","Fieldset","HoursInput","TimeSeparator","MinutesInput","MonthSelectWrapper","DayInput","YearInput","TimeWrapper","HStack","Spacer","COMMIT","PRESS_DOWN","PRESS_UP","inputToDate","TIMEZONELESS_FORMAT","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","from12hTo24h","hours","isPm","buildPadInputStateReducer","pad","state","action","nextState","type","value","undefined","toString","padStart","TimePicker","is12Hour","currentTime","onChange","date","setDate","Date","day","month","year","minutes","am","buildNumberControlChangeCallback","method","callback","event","_ownerDocument$defaul","HTMLInputElementInstance","target","ownerDocument","defaultView","HTMLInputElement","validity","valid","numberValue","Number","newDate","buildAmPmChangeCallback","parsedHours","parseInt","dayField","className","label","hideLabelFromVision","__next40pxDefaultSize","step","min","max","required","spinControls","isPressEnterToChange","isDragEnabled","isShiftStepEnabled","monthField","children","__nextHasNoMarginBottom","options","VisualLabel","as","__unstableStateReducer","variant","onClick"],"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":"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","ignoreList":[]}
+{"version":3,"names":["startOfMinute","format","set","setMonth","useState","useMemo","useEffect","__","BaseControl","SelectControl","TimeZone","Wrapper","Fieldset","MonthSelectWrapper","DayInput","YearInput","HStack","Spacer","inputToDate","buildPadInputStateReducer","validateInputElementTarget","TIMEZONELESS_FORMAT","TimeInput","jsx","_jsx","jsxs","_jsxs","VALID_DATE_ORDERS","TimePicker","is12Hour","currentTime","onChange","dateOrder","dateOrderProp","date","setDate","Date","day","month","year","minutes","hours","am","buildNumberControlChangeCallback","method","callback","value","event","numberValue","Number","newDate","onTimeInputChangeCallback","newHours","newMinutes","dayField","className","label","hideLabelFromVision","__next40pxDefaultSize","step","min","max","required","spinControls","isPressEnterToChange","isDragEnabled","isShiftStepEnabled","monthField","children","__nextHasNoMarginBottom","options","yearField","__unstableStateReducer","defaultDateOrder","includes","fields","split","map","field","VisualLabel","as"],"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":"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","ignoreList":[]}

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

@@ -0,0 +1,151 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { TimeWrapper, TimeSeparator, HoursInput, MinutesInput, Fieldset } from '../time/styles';
+import { HStack } from '../../h-stack';
+import Button from '../../button';
+import ButtonGroup from '../../button-group';
+import { from12hTo24h, from24hTo12h, buildPadInputStateReducer, validateInputElementTarget } from '../utils';
+import { useControlledValue } from '../../utils';
+import BaseControl from '../../base-control';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function TimeInput({
+  value: valueProp,
+  defaultValue,
+  is12Hour,
+  label,
+  minutesProps,
+  onChange
+}) {
+  const [value = {
+    hours: new Date().getHours(),
+    minutes: new Date().getMinutes()
+  }, setValue] = useControlledValue({
+    value: valueProp,
+    onChange,
+    defaultValue
+  });
+  const dayPeriod = parseDayPeriod(value.hours);
+  const hours12Format = from24hTo12h(value.hours);
+  const buildNumberControlChangeCallback = method => {
+    return (_value, {
+      event
+    }) => {
+      if (!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 ? from12hTo24h(numberValue, dayPeriod === 'PM') : numberValue
+      });
+    };
+  };
+  const buildAmPmChangeCallback = _value => {
+    return () => {
+      if (dayPeriod === _value) {
+        return;
+      }
+      setValue({
+        ...value,
+        hours: from12hTo24h(hours12Format, _value === 'PM')
+      });
+    };
+  };
+  function parseDayPeriod(_hours) {
+    return _hours < 12 ? 'AM' : 'PM';
+  }
+  const Wrapper = label ? Fieldset : Fragment;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [label && /*#__PURE__*/_jsx(BaseControl.VisualLabel, {
+      as: "legend",
+      children: label
+    }), /*#__PURE__*/_jsxs(HStack, {
+      alignment: "left",
+      expanded: false,
+      children: [/*#__PURE__*/_jsxs(TimeWrapper, {
+        className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
+        ,
+        children: [/*#__PURE__*/_jsx(HoursInput, {
+          className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
+          ,
+          label: __('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: buildPadInputStateReducer(2)
+        }), /*#__PURE__*/_jsx(TimeSeparator, {
+          className: "components-datetime__time-separator" // Unused, for backwards compatibility.
+          ,
+          "aria-hidden": "true",
+          children: ":"
+        }), /*#__PURE__*/_jsx(MinutesInput, {
+          className: clsx('components-datetime__time-field-minutes-input',
+          // Unused, for backwards compatibility.
+          minutesProps?.className),
+          label: __('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: buildPadInputStateReducer(2),
+          ...minutesProps
+        })]
+      }), is12Hour && /*#__PURE__*/_jsxs(ButtonGroup, {
+        className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
+        ,
+        children: [/*#__PURE__*/_jsx(Button, {
+          className: "components-datetime__time-am-button" // Unused, for backwards compatibility.
+          ,
+          variant: dayPeriod === 'AM' ? 'primary' : 'secondary',
+          __next40pxDefaultSize: true,
+          onClick: buildAmPmChangeCallback('AM'),
+          children: __('AM')
+        }), /*#__PURE__*/_jsx(Button, {
+          className: "components-datetime__time-pm-button" // Unused, for backwards compatibility.
+          ,
+          variant: dayPeriod === 'PM' ? 'primary' : 'secondary',
+          __next40pxDefaultSize: true,
+          onClick: buildAmPmChangeCallback('PM'),
+          children: __('PM')
+        })]
+      })]
+    })]
+  });
+}
+export default TimeInput;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["clsx","__","Fragment","TimeWrapper","TimeSeparator","HoursInput","MinutesInput","Fieldset","HStack","Button","ButtonGroup","from12hTo24h","from24hTo12h","buildPadInputStateReducer","validateInputElementTarget","useControlledValue","BaseControl","jsx","_jsx","jsxs","_jsxs","TimeInput","value","valueProp","defaultValue","is12Hour","label","minutesProps","onChange","hours","Date","getHours","minutes","getMinutes","setValue","dayPeriod","parseDayPeriod","hours12Format","buildNumberControlChangeCallback","method","_value","event","numberValue","Number","buildAmPmChangeCallback","_hours","Wrapper","children","VisualLabel","as","alignment","expanded","className","hideLabelFromVision","__next40pxDefaultSize","String","padStart","step","min","max","required","spinControls","isPressEnterToChange","isDragEnabled","isShiftStepEnabled","__unstableStateReducer","args","variant","onClick"],"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":[]}

package/build-module/date-time/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/date-time/types.ts"],"sourcesContent":["export type TimePickerProps = {\n\t/**\n\t * The initial current time the time picker should render.\n\t */\n\tcurrentTime?: Date | string | number | null;\n\n\t/**\n\t * Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is\n\t * displayed and the time format is assumed to be `MM-DD-YYYY` (as opposed\n\t * to the default format `DD-MM-YYYY`).\n\t */\n\tis12Hour?: boolean;\n\n\t/**\n\t * The function called when a new time has been selected. It is passed the\n\t * time as an argument.\n\t */\n\tonChange?: ( time: string ) => void;\n};\n\nexport type DatePickerEvent = {\n\t/**\n\t * The date of the event.\n\t */\n\tdate: Date;\n};\n\nexport type DatePickerProps = {\n\t/**\n\t * The current date and time at initialization. Optionally pass in a `null`\n\t * value to specify no date is currently selected.\n\t */\n\tcurrentDate?: Date | string | number | null;\n\n\t/**\n\t * The function called when a new date has been selected. It is passed the\n\t * date as an argument.\n\t */\n\tonChange?: ( date: string ) => void;\n\n\t/**\n\t * A callback function which receives a Date object representing a day as an\n\t * argument, and should return a Boolean to signify if the day is valid or\n\t * not.\n\t */\n\tisInvalidDate?: ( date: Date ) => boolean;\n\n\t/**\n\t * A callback invoked when selecting the previous/next month in the date\n\t * picker. The callback receives the new month date in the ISO format as an\n\t * argument.\n\t */\n\tonMonthPreviewed?: ( date: string ) => void;\n\n\t/**\n\t * List of events to show in the date picker. Each event will appear as a\n\t * dot on the day of the event.\n\t */\n\tevents?: DatePickerEvent[];\n\n\t/**\n\t * The day that the week should start on. 0 for Sunday, 1 for Monday, etc.\n\t *\n\t * @default 0\n\t */\n\tstartOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n};\n\nexport type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &\n\tOmit< TimePickerProps, 'currentTime' | 'onChange' > & {\n\t\t/**\n\t\t * The function called when a new date or time has been selected. It is\n\t\t * passed the date and time as an argument.\n\t\t */\n\t\tonChange?: ( date: string | null ) => void;\n\t};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/date-time/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { MinutesInput } from './time/styles';\n\nexport type TimePickerProps = {\n\t/**\n\t * The initial current time the time picker should render.\n\t */\n\tcurrentTime?: Date | string | number | null;\n\n\t/**\n\t * Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is\n\t * displayed and the time format is assumed to be `MM-DD-YYYY` (as opposed\n\t * to the default format `DD-MM-YYYY`).\n\t */\n\tis12Hour?: boolean;\n\n\t/**\n\t * The order of day, month, and year. This prop overrides the time format\n\t * determined by `is12Hour` prop.\n\t *\n\t * @default 'dmy'\n\t */\n\tdateOrder?: 'dmy' | 'mdy' | 'ymd';\n\n\t/**\n\t * The function called when a new time has been selected. It is passed the\n\t * time as an argument.\n\t */\n\tonChange?: ( time: string ) => void;\n};\n\nexport type TimeInputValue = {\n\t/**\n\t * The hours value in 24-hour format.\n\t */\n\thours: number;\n\n\t/**\n\t * The minutes value.\n\t */\n\tminutes: number;\n};\n\nexport type TimeInputProps = {\n\t/**\n\t * Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is\n\t * displayed\n\t */\n\tis12Hour?: boolean;\n\n\t/**\n\t * The time input object with hours and minutes values.\n\t *\n\t * - hours: number (24-hour format)\n\t * - minutes: number\n\t */\n\tvalue?: TimeInputValue;\n\n\t/**\n\t * An optional default value for the control when used in uncontrolled mode.\n\t * If left `undefined`, the current time will be used.\n\t */\n\tdefaultValue?: TimeInputValue;\n\n\t/**\n\t * The props to pass down to the minutes input.\n\t */\n\tminutesProps?: React.ComponentProps< typeof MinutesInput >;\n\n\t/**\n\t * The label for the time input.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * The function is called when a new time has been selected.\n\t * Passing hours and minutes as an object properties.\n\t */\n\tonChange?: ( time: TimeInputValue ) => void;\n};\n\nexport type DatePickerEvent = {\n\t/**\n\t * The date of the event.\n\t */\n\tdate: Date;\n};\n\nexport type DatePickerProps = {\n\t/**\n\t * The current date and time at initialization. Optionally pass in a `null`\n\t * value to specify no date is currently selected.\n\t */\n\tcurrentDate?: Date | string | number | null;\n\n\t/**\n\t * The function called when a new date has been selected. It is passed the\n\t * date as an argument.\n\t */\n\tonChange?: ( date: string ) => void;\n\n\t/**\n\t * A callback function which receives a Date object representing a day as an\n\t * argument, and should return a Boolean to signify if the day is valid or\n\t * not.\n\t */\n\tisInvalidDate?: ( date: Date ) => boolean;\n\n\t/**\n\t * A callback invoked when selecting the previous/next month in the date\n\t * picker. The callback receives the new month date in the ISO format as an\n\t * argument.\n\t */\n\tonMonthPreviewed?: ( date: string ) => void;\n\n\t/**\n\t * List of events to show in the date picker. Each event will appear as a\n\t * dot on the day of the event.\n\t */\n\tevents?: DatePickerEvent[];\n\n\t/**\n\t * The day that the week should start on. 0 for Sunday, 1 for Monday, etc.\n\t *\n\t * @default 0\n\t */\n\tstartOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n};\n\nexport type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &\n\tOmit< TimePickerProps, 'currentTime' | 'onChange' > & {\n\t\t/**\n\t\t * The function called when a new date or time has been selected. It is\n\t\t * passed the date and time as an argument.\n\t\t */\n\t\tonChange?: ( date: string | null ) => void;\n\t};\n"],"mappings":"","ignoreList":[]}