@wordpress/components 19.10.0 → 19.11.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/date.js"],"names":["TIMEZONELESS_FORMAT","ARIAL_LABEL_TIME_FORMAT","DatePickerDay","day","events","ref","current","parentNode","dayAriaLabel","format","length","setAttribute","dayWithEventsDescription","DatePicker","currentDate","onChange","isInvalidDate","onMonthPreviewed","nodeRef","onMonthPreviewedHandler","newMonthDate","toISOString","keepFocusInside","ownerDocument","activeElement","contains","focusRegion","querySelector","focus","onChangeMoment","newDate","momentDate","momentTime","hours","minutes","seconds","set","getEventsPerDay","filter","eventDay","isSame","date","toDate"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\nimport classnames from 'classnames';\n\n// react-dates doesn't tree-shake correctly, so we import from the individual\n// component here, to avoid including too much of the library\nimport DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isRTL, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getMomentDate } from './utils';\n\n/**\n * Module Constants\n */\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\nconst ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';\n\nfunction DatePickerDay( { day, events = [] } ) {\n\tconst ref = useRef();\n\n\t/*\n\t * a11y hack to make the `There is/are n events` string\n\t * available speaking for readers,\n\t * re-defining the aria-label attribute.\n\t * This attribute is handled by the react-dates component.\n\t */\n\tuseEffect( () => {\n\t\t// Bail when no parent node.\n\t\tif ( ! ref?.current?.parentNode ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { parentNode } = ref.current;\n\t\tconst dayAriaLabel = moment( day ).format( ARIAL_LABEL_TIME_FORMAT );\n\n\t\tif ( ! events.length ) {\n\t\t\t// Set aria-label without event description.\n\t\t\tparentNode.setAttribute( 'aria-label', dayAriaLabel );\n\t\t\treturn;\n\t\t}\n\n\t\tconst dayWithEventsDescription = sprintf(\n\t\t\t// translators: 1: Calendar day format, 2: Calendar event number.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event.',\n\t\t\t\t'%1$s. There are %2$d events.',\n\t\t\t\tevents.length\n\t\t\t),\n\t\t\tdayAriaLabel,\n\t\t\tevents.length\n\t\t);\n\n\t\tparentNode.setAttribute( 'aria-label', dayWithEventsDescription );\n\t}, [ events.length ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classnames( 'components-datetime__date__day', {\n\t\t\t\t'has-events': events?.length,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ day.format( 'D' ) }\n\t\t</div>\n\t);\n}\n\nfunction DatePicker( {\n\tcurrentDate,\n\tonChange,\n\tevents,\n\tisInvalidDate,\n\tonMonthPreviewed,\n} ) {\n\tconst nodeRef = useRef();\n\tconst onMonthPreviewedHandler = ( newMonthDate ) => {\n\t\tonMonthPreviewed?.( newMonthDate.toISOString() );\n\t\tkeepFocusInside();\n\t};\n\n\t/*\n\t * Todo: We should remove this function ASAP.\n\t * It is kept because focus is lost when we click on the previous and next month buttons.\n\t * This focus loss closes the date picker popover.\n\t * Ideally we should add an upstream commit on react-dates to fix this issue.\n\t */\n\tconst keepFocusInside = () => {\n\t\tif ( ! nodeRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { ownerDocument } = nodeRef.current;\n\t\tconst { activeElement } = ownerDocument;\n\n\t\t// If focus was lost.\n\t\tif (\n\t\t\t! activeElement ||\n\t\t\t! nodeRef.current.contains( ownerDocument.activeElement )\n\t\t) {\n\t\t\t// Retrieve the focus region div.\n\t\t\tconst focusRegion = nodeRef.current.querySelector(\n\t\t\t\t'.DayPicker_focusRegion'\n\t\t\t);\n\t\t\tif ( ! focusRegion ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Keep the focus on focus region.\n\t\t\tfocusRegion.focus();\n\t\t}\n\t};\n\n\tconst onChangeMoment = ( newDate ) => {\n\t\t// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.\n\t\tconst momentDate = currentDate ? moment( currentDate ) : moment();\n\t\tconst momentTime = {\n\t\t\thours: momentDate.hours(),\n\t\t\tminutes: momentDate.minutes(),\n\t\t\tseconds: 0,\n\t\t};\n\n\t\tonChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );\n\n\t\t// Keep focus on the date picker.\n\t\tkeepFocusInside();\n\t};\n\n\tconst getEventsPerDay = ( day ) => {\n\t\tif ( ! events?.length ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn events.filter( ( eventDay ) =>\n\t\t\tday.isSame( eventDay.date, 'day' )\n\t\t);\n\t};\n\n\tconst momentDate = getMomentDate( currentDate );\n\n\treturn (\n\t\t<div className=\"components-datetime__date\" ref={ nodeRef }>\n\t\t\t<DayPickerSingleDateController\n\t\t\t\tdate={ momentDate }\n\t\t\t\tdaySize={ 30 }\n\t\t\t\tfocused\n\t\t\t\thideKeyboardShortcutsPanel\n\t\t\t\t// This is a hack to force the calendar to update on month or year change\n\t\t\t\t// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665\n\t\t\t\tkey={ `datepicker-controller-${\n\t\t\t\t\tmomentDate ? momentDate.format( 'MM-YYYY' ) : 'null'\n\t\t\t\t}` }\n\t\t\t\tnoBorder\n\t\t\t\tnumberOfMonths={ 1 }\n\t\t\t\tonDateChange={ onChangeMoment }\n\t\t\t\ttransitionDuration={ 0 }\n\t\t\t\tweekDayFormat=\"ddd\"\n\t\t\t\tdayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }\n\t\t\t\tisRTL={ isRTL() }\n\t\t\t\tisOutsideRange={ ( date ) => {\n\t\t\t\t\treturn isInvalidDate && isInvalidDate( date.toDate() );\n\t\t\t\t} }\n\t\t\t\tonPrevMonthClick={ onMonthPreviewedHandler }\n\t\t\t\tonNextMonthClick={ onMonthPreviewedHandler }\n\t\t\t\trenderDayContents={ ( day ) => (\n\t\t\t\t\t<DatePickerDay\n\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\tevents={ getEventsPerDay( day ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default DatePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/date.tsx"],"names":["TypedDayPickerSingleDateController","UntypedDayPickerSingleDateController","TIMEZONELESS_FORMAT","ARIAL_LABEL_TIME_FORMAT","DatePickerDay","day","events","ref","current","parentNode","Element","dayAriaLabel","format","length","setAttribute","dayWithEventsDescription","DatePicker","currentDate","onChange","isInvalidDate","onMonthPreviewed","nodeRef","onMonthPreviewedHandler","newMonthDate","toISOString","keepFocusInside","ownerDocument","activeElement","contains","focusRegion","querySelector","HTMLElement","focus","onChangeMoment","newDate","momentDate","momentTime","hours","minutes","seconds","set","getEventsPerDay","filter","eventDay","isSame","date","toDate","noop"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\nimport classnames from 'classnames';\nimport type { Moment } from 'moment';\nimport { noop } from 'lodash';\n\n// `react-dates` doesn't tree-shake correctly, so we import from the individual\n// component here.\n// @ts-expect-error TypeScript won't find any type declarations at\n// `react-dates/lib/components/DayPickerSingleDateController` as they're located\n// at `react-dates`.\nimport UntypedDayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';\nimport type { DayPickerSingleDateController } from 'react-dates';\nconst TypedDayPickerSingleDateController = UntypedDayPickerSingleDateController as DayPickerSingleDateController;\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isRTL, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getMomentDate } from './utils';\nimport type { DatePickerDayProps, DatePickerProps } from './types';\n\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\nconst ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';\n\nfunction DatePickerDay( { day, events = [] }: DatePickerDayProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\n\t/*\n\t * a11y hack to make the `There is/are n events` string\n\t * available speaking for readers,\n\t * re-defining the aria-label attribute.\n\t * This attribute is handled by the react-dates component.\n\t */\n\tuseEffect( () => {\n\t\t// Bail when no parent node.\n\t\tif ( ! ( ref?.current?.parentNode instanceof Element ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { parentNode } = ref.current;\n\t\tconst dayAriaLabel = moment( day ).format( ARIAL_LABEL_TIME_FORMAT );\n\n\t\tif ( ! events.length ) {\n\t\t\t// Set aria-label without event description.\n\t\t\tparentNode.setAttribute( 'aria-label', dayAriaLabel );\n\t\t\treturn;\n\t\t}\n\n\t\tconst dayWithEventsDescription = sprintf(\n\t\t\t// translators: 1: Calendar day format, 2: Calendar event number.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event.',\n\t\t\t\t'%1$s. There are %2$d events.',\n\t\t\t\tevents.length\n\t\t\t),\n\t\t\tdayAriaLabel,\n\t\t\tevents.length\n\t\t);\n\n\t\tparentNode.setAttribute( 'aria-label', dayWithEventsDescription );\n\t}, [ events.length ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classnames( 'components-datetime__date__day', {\n\t\t\t\t'has-events': events?.length,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ day.format( 'D' ) }\n\t\t</div>\n\t);\n}\n\n/**\n * DatePicker is a React component that renders a calendar for date selection.\n *\n * ```jsx\n * import { DatePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDatePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DatePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function DatePicker( {\n\tcurrentDate,\n\tonChange,\n\tevents,\n\tisInvalidDate,\n\tonMonthPreviewed,\n}: DatePickerProps ) {\n\tconst nodeRef = useRef< HTMLDivElement >( null );\n\tconst onMonthPreviewedHandler = ( newMonthDate: Moment ) => {\n\t\tonMonthPreviewed?.( newMonthDate.toISOString() );\n\t\tkeepFocusInside();\n\t};\n\n\t/*\n\t * Todo: We should remove this function ASAP.\n\t * It is kept because focus is lost when we click on the previous and next month buttons.\n\t * This focus loss closes the date picker popover.\n\t * Ideally we should add an upstream commit on react-dates to fix this issue.\n\t */\n\tconst keepFocusInside = () => {\n\t\tif ( ! nodeRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { ownerDocument } = nodeRef.current;\n\t\tconst { activeElement } = ownerDocument;\n\n\t\t// If focus was lost.\n\t\tif (\n\t\t\t! activeElement ||\n\t\t\t! nodeRef.current.contains( ownerDocument.activeElement )\n\t\t) {\n\t\t\t// Retrieve the focus region div.\n\t\t\tconst focusRegion = nodeRef.current.querySelector(\n\t\t\t\t'.DayPicker_focusRegion'\n\t\t\t);\n\t\t\tif ( ! ( focusRegion instanceof HTMLElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Keep the focus on focus region.\n\t\t\tfocusRegion.focus();\n\t\t}\n\t};\n\n\tconst onChangeMoment = ( newDate: Moment | null ) => {\n\t\tif ( ! newDate ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.\n\t\tconst momentDate = currentDate ? moment( currentDate ) : moment();\n\t\tconst momentTime = {\n\t\t\thours: momentDate.hours(),\n\t\t\tminutes: momentDate.minutes(),\n\t\t\tseconds: 0,\n\t\t};\n\n\t\tonChange?.( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );\n\n\t\t// Keep focus on the date picker.\n\t\tkeepFocusInside();\n\t};\n\n\tconst getEventsPerDay = ( day: Moment ) => {\n\t\tif ( ! events?.length ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn events.filter( ( eventDay ) =>\n\t\t\tday.isSame( eventDay.date, 'day' )\n\t\t);\n\t};\n\n\tconst momentDate = getMomentDate( currentDate );\n\n\treturn (\n\t\t<div className=\"components-datetime__date\" ref={ nodeRef }>\n\t\t\t<TypedDayPickerSingleDateController\n\t\t\t\tdate={ momentDate }\n\t\t\t\tdaySize={ 30 }\n\t\t\t\tfocused\n\t\t\t\thideKeyboardShortcutsPanel\n\t\t\t\t// This is a hack to force the calendar to update on month or year change\n\t\t\t\t// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665\n\t\t\t\tkey={ `datepicker-controller-${\n\t\t\t\t\tmomentDate ? momentDate.format( 'MM-YYYY' ) : 'null'\n\t\t\t\t}` }\n\t\t\t\tnoBorder\n\t\t\t\tnumberOfMonths={ 1 }\n\t\t\t\tonDateChange={ onChangeMoment }\n\t\t\t\ttransitionDuration={ 0 }\n\t\t\t\tweekDayFormat=\"ddd\"\n\t\t\t\tdayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }\n\t\t\t\tisRTL={ isRTL() }\n\t\t\t\tisOutsideRange={ ( date ) => {\n\t\t\t\t\treturn !! isInvalidDate && isInvalidDate( date.toDate() );\n\t\t\t\t} }\n\t\t\t\tonPrevMonthClick={ onMonthPreviewedHandler }\n\t\t\t\tonNextMonthClick={ onMonthPreviewedHandler }\n\t\t\t\trenderDayContents={ ( day ) => (\n\t\t\t\t\t<DatePickerDay\n\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\tevents={ getEventsPerDay( day ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\tonFocusChange={ noop }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default DatePicker;\n"]}

package/build/date-time/index.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "DatePicker", {
     return _date.default;
   }
 });
+exports.DateTimePicker = void 0;
 Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
   get: function () {
@@ -46,7 +47,7 @@ var _time = _interopRequireDefault(require("./time"));
 /**
  * Internal dependencies
  */
-function DateTimePicker(_ref, ref) {
+function UnforwardedDateTimePicker(_ref, ref) {
   let {
     currentDate,
     is12Hour,
@@ -101,15 +102,39 @@ function DateTimePicker(_ref, ref) {
   }, !calendarHelpIsVisible && currentDate && (0, _element.createElement)(_button.default, {
     className: "components-datetime__date-reset-button",
     variant: "link",
-    onClick: () => onChange(null)
+    onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(null)
   }, (0, _i18n.__)('Reset')), (0, _element.createElement)(_button.default, {
     className: "components-datetime__date-help-toggle",
     variant: "link",
     onClick: onClickDescriptionToggle
   }, calendarHelpIsVisible ? (0, _i18n.__)('Close') : (0, _i18n.__)('Calendar Help'))));
 }
+/**
+ * DateTimePicker is a React component that renders a calendar and clock for
+ * date and time selection. The calendar and clock components can be accessed
+ * individually using the `DatePicker` and `TimePicker` components respectively.
+ *
+ * ```jsx
+ * import { DateTimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyDateTimePicker = () => {
+ *   const [ date, setDate ] = useState( new Date() );
+ *
+ *   return (
+ *     <DateTimePicker
+ *       currentDate={ date }
+ *       onChange={ ( newDate ) => setDate( newDate ) }
+ *       is12Hour
+ *     />
+ *   );
+ * };
+ * ```
+ */
 
-var _default = (0, _element.forwardRef)(DateTimePicker);
 
+const DateTimePicker = (0, _element.forwardRef)(UnforwardedDateTimePicker);
+exports.DateTimePicker = DateTimePicker;
+var _default = DateTimePicker;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/index.js"],"names":["DateTimePicker","ref","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","noop","onChange","events","calendarHelpIsVisible","setCalendarHelpIsVisible","onClickDescriptionToggle"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAWA;;AANA;;AACA;;AAMA;;AAKA;;AACA;;AACA;;AAnBA;AACA;AACA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAOA,SAASA,cAAT,OASCC,GATD,EAUE;AAAA,MATD;AACCC,IAAAA,WADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,aAHD;AAICC,IAAAA,gBAAgB,GAAGC,YAJpB;AAKCC,IAAAA,QALD;AAMCC,IAAAA;AAND,GASC;AACD,QAAM,CAAEC,qBAAF,EAAyBC,wBAAzB,IAAsD,uBAC3D,KAD2D,CAA5D;;AAIA,WAASC,wBAAT,GAAoC;AACnCD,IAAAA,wBAAwB,CAAE,CAAED,qBAAJ,CAAxB;AACA;;AAED,SACC;AAAK,IAAA,GAAG,EAAGR,GAAX;AAAiB,IAAA,SAAS,EAAC;AAA3B,KACG,CAAEQ,qBAAF,IACD,qDACC,4BAAC,aAAD;AACC,IAAA,WAAW,EAAGP,WADf;AAEC,IAAA,QAAQ,EAAGK,QAFZ;AAGC,IAAA,QAAQ,EAAGJ;AAHZ,IADD,EAMC,4BAAC,aAAD;AACC,IAAA,WAAW,EAAGD,WADf;AAEC,IAAA,QAAQ,EAAGK,QAFZ;AAGC,IAAA,aAAa,EAAGH,aAHjB;AAIC,IAAA,MAAM,EAAGI,MAJV;AAKC,IAAA,gBAAgB,EAAGH;AALpB,IAND,CAFF,EAiBGI,qBAAqB,IACtB,qDACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,wCAAM,cAAI,iBAAJ,CAAN,CADD,EAEC,wCACC,wCACG,cACD,kFADC,CADH,CADD,EAMC,wCACG,cAAI,qCAAJ,CADH,CAND,CAFD,EAYC,wCAAM,cAAI,4BAAJ,CAAN,CAZD,EAaC,wCACC,wCACC;AACC,kBAAa,cACZ,OADY,EAEZ,iBAFY;AADd,cADD,EAUE;AAAI;AAVN,IAYC,0CACG,cAAI,2BAAJ,CADH,CAZD,CADD,EAiBC,wCACC;AACC,kBAAa,cAAI,uBAAJ;AADd,qBADD,EAOE;AAAI;AAPN,IASG,cACD,qDADC,CATH,CAjBD,EA8BC,wCACC;AAAM,kBAAa,cAAI,oBAAJ;AAAnB,qBADD,EAKE;AAAI;AALN,IAOG,cACD,mDADC,CAPH,CA9BD,EAyCC,wCACC;AACC,kBAAa,cAAI,uBAAJ;AADd,KAGG,cAAI,WAAJ,CAHH,CADD,EAOE;AAAI;AAPN,IASG,cACD,sDADC,CATH,CAzCD,EAsDC,wCACC;AAAM,kBAAa,cAAI,cAAJ;AAAnB,KAEG,cAAI,UAAJ,CAFH,CADD,EAME;AAAI;AANN,IAQG,cACD,qDADC,CARH,CAtDD,CAbD,CADD,CAlBF,EAsGC;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,CAAEA,qBAAF,IAA2BP,WAA3B,IACD,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,OAAO,EAAC,MAFT;AAGC,IAAA,OAAO,EAAG,MAAMK,QAAQ,CAAE,IAAF;AAHzB,KAKG,cAAI,OAAJ,CALH,CAFF,EAUC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,OAAO,EAAC,MAFT;AAGC,IAAA,OAAO,EAAGI;AAHX,KAKGF,qBAAqB,GACpB,cAAI,OAAJ,CADoB,GAEpB,cAAI,eAAJ,CAPJ,CAVD,CAtGD,CADD;AA6HA;;eAEc,yBAAYT,cAAZ,C","sourcesContent":["/**\n * External dependencies\n */\n// Needed to initialise the default datepicker styles.\n// See: https://github.com/airbnb/react-dates#initialize\nimport 'react-dates/initialize';\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, forwardRef } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { default as DatePicker } from './date';\nimport { default as TimePicker } from './time';\n\nexport { DatePicker, TimePicker };\n\nfunction DateTimePicker(\n\t{\n\t\tcurrentDate,\n\t\tis12Hour,\n\t\tisInvalidDate,\n\t\tonMonthPreviewed = noop,\n\t\tonChange,\n\t\tevents,\n\t},\n\tref\n) {\n\tconst [ calendarHelpIsVisible, setCalendarHelpIsVisible ] = useState(\n\t\tfalse\n\t);\n\n\tfunction onClickDescriptionToggle() {\n\t\tsetCalendarHelpIsVisible( ! calendarHelpIsVisible );\n\t}\n\n\treturn (\n\t\t<div ref={ ref } className=\"components-datetime\">\n\t\t\t{ ! calendarHelpIsVisible && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tcurrentTime={ currentDate }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t\t/>\n\t\t\t\t\t<DatePicker\n\t\t\t\t\t\tcurrentDate={ currentDate }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tisInvalidDate={ isInvalidDate }\n\t\t\t\t\t\tevents={ events }\n\t\t\t\t\t\tonMonthPreviewed={ onMonthPreviewed }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ calendarHelpIsVisible && (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"components-datetime__calendar-help\">\n\t\t\t\t\t\t<h4>{ __( 'Click to Select' ) }</h4>\n\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Click the right or left arrows to select other months in the past or the future.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t{ __( 'Click the desired day to select it.' ) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t<h4>{ __( 'Navigating with a keyboard' ) }</h4>\n\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<abbr\n\t\t\t\t\t\t\t\t\taria-label={ _x(\n\t\t\t\t\t\t\t\t\t\t'Enter',\n\t\t\t\t\t\t\t\t\t\t'keyboard button'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t↵\n\t\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t{ __( 'Select the date in focus.' ) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<abbr\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Left and Right Arrows' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t←/→\n\t\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Move backward (left) or forward (right) by one day.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<abbr aria-label={ __( 'Up and Down Arrows' ) }>\n\t\t\t\t\t\t\t\t\t↑/↓\n\t\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Move backward (up) or forward (down) by one week.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<abbr\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Page Up and Page Down' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'PgUp/PgDn' ) }\n\t\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Move backward (PgUp) or forward (PgDn) by one month.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<abbr aria-label={ __( 'Home and End' ) }>\n\t\t\t\t\t\t\t\t\t{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }\n\t\t\t\t\t\t\t\t\t{ __( 'Home/End' ) }\n\t\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Go to the first (Home) or last (End) day of a week.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<div className=\"components-datetime__buttons\">\n\t\t\t\t{ ! calendarHelpIsVisible && currentDate && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"components-datetime__date-reset-button\"\n\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\tonClick={ () => onChange( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-datetime__date-help-toggle\"\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\tonClick={ onClickDescriptionToggle }\n\t\t\t\t>\n\t\t\t\t\t{ calendarHelpIsVisible\n\t\t\t\t\t\t? __( 'Close' )\n\t\t\t\t\t\t: __( 'Calendar Help' ) }\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( DateTimePicker );\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/index.tsx"],"names":["UnforwardedDateTimePicker","ref","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","noop","onChange","events","calendarHelpIsVisible","setCalendarHelpIsVisible","onClickDescriptionToggle","DateTimePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// Needed to initialise the default datepicker styles.\n// See: https://github.com/airbnb/react-dates#initialize\nimport 'react-dates/initialize';\nimport { noop } from 'lodash';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState, forwardRef } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { default as DatePicker } from './date';\nimport { default as TimePicker } from './time';\nimport type { DateTimePickerProps } from './types';\n\nexport { DatePicker, TimePicker };\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}: DateTimePickerProps,\n\tref: ForwardedRef< any >\n) {\n\tconst [ calendarHelpIsVisible, setCalendarHelpIsVisible ] = useState(\n\t\tfalse\n\t);\n\n\tfunction onClickDescriptionToggle() {\n\t\tsetCalendarHelpIsVisible( ! calendarHelpIsVisible );\n\t}\n\n\treturn (\n\t\t<div ref={ ref } className=\"components-datetime\">\n\t\t\t{ ! calendarHelpIsVisible && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tcurrentTime={ currentDate }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t\t/>\n\t\t\t\t\t<DatePicker\n\t\t\t\t\t\tcurrentDate={ currentDate }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tisInvalidDate={ isInvalidDate }\n\t\t\t\t\t\tevents={ events }\n\t\t\t\t\t\tonMonthPreviewed={ onMonthPreviewed }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ calendarHelpIsVisible && (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"components-datetime__calendar-help\">\n\t\t\t\t\t\t<h4>{ __( 'Click to Select' ) }</h4>\n\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Click the right or left arrows to select other months in the past or the future.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t{ __( 'Click the desired day to select it.' ) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t<h4>{ __( 'Navigating with a keyboard' ) }</h4>\n\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<abbr\n\t\t\t\t\t\t\t\t\taria-label={ _x(\n\t\t\t\t\t\t\t\t\t\t'Enter',\n\t\t\t\t\t\t\t\t\t\t'keyboard button'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t↵\n\t\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t{ __( 'Select the date in focus.' ) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<abbr\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Left and Right Arrows' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t←/→\n\t\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Move backward (left) or forward (right) by one day.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<abbr aria-label={ __( 'Up and Down Arrows' ) }>\n\t\t\t\t\t\t\t\t\t↑/↓\n\t\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Move backward (up) or forward (down) by one week.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<abbr\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Page Up and Page Down' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'PgUp/PgDn' ) }\n\t\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Move backward (PgUp) or forward (PgDn) by one month.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<abbr aria-label={ __( 'Home and End' ) }>\n\t\t\t\t\t\t\t\t\t{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }\n\t\t\t\t\t\t\t\t\t{ __( 'Home/End' ) }\n\t\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Go to the first (Home) or last (End) day of a week.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<div className=\"components-datetime__buttons\">\n\t\t\t\t{ ! calendarHelpIsVisible && currentDate && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"components-datetime__date-reset-button\"\n\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\tonClick={ () => onChange?.( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-datetime__date-help-toggle\"\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\tonClick={ onClickDescriptionToggle }\n\t\t\t\t>\n\t\t\t\t\t{ calendarHelpIsVisible\n\t\t\t\t\t\t? __( 'Close' )\n\t\t\t\t\t\t: __( 'Calendar Help' ) }\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\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"]}

package/build/date-time/time.js

@@ -35,24 +35,14 @@ var _timezone = _interopRequireDefault(require("./timezone"));
 /**
  * Internal dependencies
  */
-
-/**
- * Module Constants
- */
 const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 
 function from12hTo24h(hours, isPm) {
   return isPm ? (hours % 12 + 12) % 24 : hours % 12;
 }
 /**
- * <UpdateOnBlurAsIntegerField>
- * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.
- *
- * @param {Object}        props             Component props.
- * @param {string}        props.as          Render the component as specific element tag, defaults to "input".
- * @param {number|string} props.value       The default value of the component which will be parsed to integer.
- * @param {Function}      props.onUpdate    Call back when blurred and validated.
- * @param {string}        [props.className]
+ * A shared component to parse, validate, and handle remounting of the
+ * underlying form field element like <input> and <select>.
  */
 
 
@@ -70,7 +60,7 @@ function UpdateOnBlurAsIntegerField(_ref) {
       target
     } = event;
 
-    if (value === target.value) {
+    if (String(value) === target.value) {
       return;
     }
 
@@ -78,10 +68,10 @@ function UpdateOnBlurAsIntegerField(_ref) {
 
     if (!(0, _lodash.isInteger)(parsedValue) || typeof props.max !== 'undefined' && parsedValue > props.max || typeof props.min !== 'undefined' && parsedValue < props.min) {
       // If validation failed, reset the value to the previous valid value.
-      target.value = value;
+      target.value = String(value);
     } else {
       // Otherwise, it's valid, call onUpdate.
-      onUpdate(target.name, parsedValue);
+      onUpdate(parsedValue);
     }
   }
 
@@ -95,14 +85,24 @@ function UpdateOnBlurAsIntegerField(_ref) {
   });
 }
 /**
- * <TimePicker>
+ * TimePicker is a React component that renders a clock for time selection.
  *
- * @typedef {Date|string|number} WPValidDateTimeFormat
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
  *
- * @param {Object}                props             Component props.
- * @param {boolean}               props.is12Hour    Should the time picker showed in 12 hour format or 24 hour format.
- * @param {WPValidDateTimeFormat} props.currentTime The initial current time the time picker should render.
- * @param {Function}              props.onChange    Callback function when the date changed.
+ * const MyTimePicker = () => {
+ *   const [ time, setTime ] = useState( new Date() );
+ *
+ *   return (
+ *     <TimePicker
+ *       currentTime={ date }
+ *       onChange={ ( newTime ) => setTime( newTime ) }
+ *       is12Hour
+ *     />
+ *   );
+ * };
+ * ```
  */
 
 
@@ -113,7 +113,7 @@ function TimePicker(_ref2) {
     onChange
   } = _ref2;
   const [date, setDate] = (0, _element.useState)(() => // Truncate the date at the minutes, see: #15495.
-  (0, _moment.default)(currentTime).startOf('minutes')); // Reset the state when currentTime changed.
+  currentTime ? (0, _moment.default)(currentTime).startOf('minutes') : (0, _moment.default)()); // Reset the state when currentTime changed.
 
   (0, _element.useEffect)(() => {
     setDate(currentTime ? (0, _moment.default)(currentTime).startOf('minutes') : (0, _moment.default)());
@@ -131,33 +131,35 @@ function TimePicker(_ref2) {
     year: date.format('YYYY'),
     minutes: date.format('mm'),
     hours: date.format(is12Hour ? 'hh' : 'HH'),
-    am: date.format('H') <= 11 ? 'AM' : 'PM'
+    am: Number(date.format('H')) <= 11 ? 'AM' : 'PM'
   }), [date, is12Hour]);
   /**
    * Function that sets the date state and calls the onChange with a new date.
    * The date is truncated at the minutes.
    *
-   * @param {Object} newDate The date object.
+   * @param {Moment} newDate The date object.
    */
 
   function changeDate(newDate) {
     setDate(newDate);
-    onChange(newDate.format(TIMEZONELESS_FORMAT));
+    onChange === null || onChange === void 0 ? void 0 : onChange(newDate.format(TIMEZONELESS_FORMAT));
   }
 
-  function update(name, 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.
-    let adjustedValue = value;
+  function update(name) {
+    return 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.
+      let adjustedValue = value;
 
-    if (name === 'hours' && is12Hour) {
-      adjustedValue = from12hTo24h(value, am === 'PM');
-    } // Clone the date and call the specific setter function according to `name`.
+      if (name === 'hours' && is12Hour) {
+        adjustedValue = from12hTo24h(value, am === 'PM');
+      } // Clone the date and call the specific setter function according to `name`.
 
 
-    const newDate = date.clone()[name](adjustedValue);
-    changeDate(newDate);
+      const newDate = date.clone()[name](adjustedValue);
+      changeDate(newDate);
+    };
   }
 
   function updateAmPm(value) {
@@ -184,7 +186,7 @@ function TimePicker(_ref2) {
     step: 1,
     min: 1,
     max: 31,
-    onUpdate: update
+    onUpdate: update('date')
   }));
   const monthFormat = (0, _element.createElement)("div", {
     className: "components-datetime__time-field components-datetime__time-field-month"
@@ -195,7 +197,7 @@ function TimePicker(_ref2) {
     name: "month",
     value: month // The value starts from 0, so we have to -1 when setting month.
     ,
-    onUpdate: (key, value) => update(key, value - 1)
+    onUpdate: value => update('month')(value - 1)
   }, (0, _element.createElement)("option", {
     value: "01"
   }, (0, _i18n.__)('January')), (0, _element.createElement)("option", {
@@ -239,7 +241,7 @@ function TimePicker(_ref2) {
     min: 0,
     max: 9999,
     value: year,
-    onUpdate: update
+    onUpdate: update('year')
   })))), (0, _element.createElement)("fieldset", null, (0, _element.createElement)("legend", {
     className: "components-datetime__time-legend invisible"
   }, (0, _i18n.__)('Time')), (0, _element.createElement)("div", {
@@ -255,7 +257,7 @@ function TimePicker(_ref2) {
     min: is12Hour ? 1 : 0,
     max: is12Hour ? 12 : 23,
     value: hours,
-    onUpdate: update
+    onUpdate: update('hours')
   }), (0, _element.createElement)("span", {
     className: "components-datetime__time-separator",
     "aria-hidden": "true"
@@ -268,7 +270,7 @@ function TimePicker(_ref2) {
     min: 0,
     max: 59,
     value: minutes,
-    onUpdate: update
+    onUpdate: update('minutes')
   })), is12Hour && (0, _element.createElement)(_buttonGroup.default, {
     className: "components-datetime__time-field components-datetime__time-field-am-pm"
   }, (0, _element.createElement)(_button.default, {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/time.js"],"names":["TIMEZONELESS_FORMAT","from12hTo24h","hours","isPm","UpdateOnBlurAsIntegerField","as","value","onUpdate","className","props","handleBlur","event","target","parsedValue","parseInt","max","min","name","key","defaultValue","onBlur","TimePicker","is12Hour","currentTime","onChange","date","setDate","startOf","day","month","year","minutes","am","format","changeDate","newDate","update","adjustedValue","clone","updateAmPm","parsedHours","dayFormat","monthFormat","dayMonthFormat"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { isInteger } from 'lodash';\nimport moment from 'moment';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateElement,\n\tuseState,\n\tuseMemo,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ButtonGroup from '../button-group';\nimport TimeZone from './timezone';\n\n/**\n * Module Constants\n */\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\n\nfunction from12hTo24h( hours, isPm ) {\n\treturn isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;\n}\n\n/**\n * <UpdateOnBlurAsIntegerField>\n * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.\n *\n * @param {Object}        props             Component props.\n * @param {string}        props.as          Render the component as specific element tag, defaults to \"input\".\n * @param {number|string} props.value       The default value of the component which will be parsed to integer.\n * @param {Function}      props.onUpdate    Call back when blurred and validated.\n * @param {string}        [props.className]\n */\nfunction UpdateOnBlurAsIntegerField( {\n\tas,\n\tvalue,\n\tonUpdate,\n\tclassName,\n\t...props\n} ) {\n\tfunction handleBlur( event ) {\n\t\tconst { target } = event;\n\n\t\tif ( value === target.value ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst parsedValue = parseInt( target.value, 10 );\n\n\t\t// Run basic number validation on the input.\n\t\tif (\n\t\t\t! isInteger( parsedValue ) ||\n\t\t\t( typeof props.max !== 'undefined' && parsedValue > props.max ) ||\n\t\t\t( typeof props.min !== 'undefined' && parsedValue < props.min )\n\t\t) {\n\t\t\t// If validation failed, reset the value to the previous valid value.\n\t\t\ttarget.value = value;\n\t\t} else {\n\t\t\t// Otherwise, it's valid, call onUpdate.\n\t\t\tonUpdate( target.name, parsedValue );\n\t\t}\n\t}\n\n\treturn createElement( as || 'input', {\n\t\t// Re-mount the input value to accept the latest value as the defaultValue.\n\t\tkey: value,\n\t\tdefaultValue: value,\n\t\tonBlur: handleBlur,\n\t\tclassName: classnames(\n\t\t\t'components-datetime__time-field-integer-field',\n\t\t\tclassName\n\t\t),\n\t\t...props,\n\t} );\n}\n\n/**\n * <TimePicker>\n *\n * @typedef {Date|string|number} WPValidDateTimeFormat\n *\n * @param {Object}                props             Component props.\n * @param {boolean}               props.is12Hour    Should the time picker showed in 12 hour format or 24 hour format.\n * @param {WPValidDateTimeFormat} props.currentTime The initial current time the time picker should render.\n * @param {Function}              props.onChange    Callback function when the date changed.\n */\nexport function TimePicker( { is12Hour, currentTime, onChange } ) {\n\tconst [ date, setDate ] = useState( () =>\n\t\t// Truncate the date at the minutes, see: #15495.\n\t\tmoment( currentTime ).startOf( 'minutes' )\n\t);\n\n\t// Reset the state when currentTime changed.\n\tuseEffect( () => {\n\t\tsetDate(\n\t\t\tcurrentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()\n\t\t);\n\t}, [ currentTime ] );\n\n\tconst { day, month, year, minutes, hours, am } = useMemo(\n\t\t() => ( {\n\t\t\tday: date.format( 'DD' ),\n\t\t\tmonth: date.format( 'MM' ),\n\t\t\tyear: date.format( 'YYYY' ),\n\t\t\tminutes: date.format( 'mm' ),\n\t\t\thours: date.format( is12Hour ? 'hh' : 'HH' ),\n\t\t\tam: date.format( 'H' ) <= 11 ? 'AM' : 'PM',\n\t\t} ),\n\t\t[ date, is12Hour ]\n\t);\n\n\t/**\n\t * Function that sets the date state and calls the onChange with a new date.\n\t * The date is truncated at the minutes.\n\t *\n\t * @param {Object} newDate The date object.\n\t */\n\tfunction changeDate( newDate ) {\n\t\tsetDate( newDate );\n\t\tonChange( newDate.format( TIMEZONELESS_FORMAT ) );\n\t}\n\n\tfunction update( name, value ) {\n\t\t// If the 12-hour format is being used and the 'PM' period is selected, then\n\t\t// the incoming value (which ranges 1-12) should be increased by 12 to match\n\t\t// the expected 24-hour format.\n\t\tlet adjustedValue = value;\n\t\tif ( name === 'hours' && is12Hour ) {\n\t\t\tadjustedValue = from12hTo24h( value, am === 'PM' );\n\t\t}\n\n\t\t// Clone the date and call the specific setter function according to `name`.\n\t\tconst newDate = date.clone()[ name ]( adjustedValue );\n\t\tchangeDate( newDate );\n\t}\n\n\tfunction updateAmPm( value ) {\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 = date\n\t\t\t\t.clone()\n\t\t\t\t.hours( from12hTo24h( parsedHours, value === 'PM' ) );\n\n\t\t\tchangeDate( newDate );\n\t\t};\n\t}\n\n\tconst dayFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-day\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\taria-label={ __( 'Day' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-day-input\"\n\t\t\t\ttype=\"number\"\n\t\t\t\t// The correct function to call in moment.js is \"date\" not \"day\".\n\t\t\t\tname=\"date\"\n\t\t\t\tvalue={ day }\n\t\t\t\tstep={ 1 }\n\t\t\t\tmin={ 1 }\n\t\t\t\tmax={ 31 }\n\t\t\t\tonUpdate={ update }\n\t\t\t/>\n\t\t</div>\n\t);\n\n\tconst monthFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-month\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\tas=\"select\"\n\t\t\t\taria-label={ __( 'Month' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-month-select\"\n\t\t\t\tname=\"month\"\n\t\t\t\tvalue={ month }\n\t\t\t\t// The value starts from 0, so we have to -1 when setting month.\n\t\t\t\tonUpdate={ ( key, value ) => update( key, value - 1 ) }\n\t\t\t>\n\t\t\t\t<option value=\"01\">{ __( 'January' ) }</option>\n\t\t\t\t<option value=\"02\">{ __( 'February' ) }</option>\n\t\t\t\t<option value=\"03\">{ __( 'March' ) }</option>\n\t\t\t\t<option value=\"04\">{ __( 'April' ) }</option>\n\t\t\t\t<option value=\"05\">{ __( 'May' ) }</option>\n\t\t\t\t<option value=\"06\">{ __( 'June' ) }</option>\n\t\t\t\t<option value=\"07\">{ __( 'July' ) }</option>\n\t\t\t\t<option value=\"08\">{ __( 'August' ) }</option>\n\t\t\t\t<option value=\"09\">{ __( 'September' ) }</option>\n\t\t\t\t<option value=\"10\">{ __( 'October' ) }</option>\n\t\t\t\t<option value=\"11\">{ __( 'November' ) }</option>\n\t\t\t\t<option value=\"12\">{ __( 'December' ) }</option>\n\t\t\t</UpdateOnBlurAsIntegerField>\n\t\t</div>\n\t);\n\n\tconst dayMonthFormat = is12Hour ? (\n\t\t<>\n\t\t\t{ monthFormat }\n\t\t\t{ dayFormat }\n\t\t</>\n\t) : (\n\t\t<>\n\t\t\t{ dayFormat }\n\t\t\t{ monthFormat }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<div className={ classnames( 'components-datetime__time' ) }>\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Date' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t{ dayMonthFormat }\n\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-year\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Year' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-year-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"year\"\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={ 9999 }\n\t\t\t\t\t\t\tvalue={ year }\n\t\t\t\t\t\t\tonUpdate={ update }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Time' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-time\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Hours' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-hours-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"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\tvalue={ hours }\n\t\t\t\t\t\t\tonUpdate={ update }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-separator\"\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</span>\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Minutes' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-minutes-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"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\tvalue={ minutes }\n\t\t\t\t\t\t\tonUpdate={ update }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ is12Hour && (\n\t\t\t\t\t\t<ButtonGroup className=\"components-datetime__time-field components-datetime__time-field-am-pm\">\n\t\t\t\t\t\t\t<Button\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\tonClick={ updateAmPm( 'AM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-am-button\"\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\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\tonClick={ updateAmPm( 'PM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-pm-button\"\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\n\t\t\t\t\t<TimeZone />\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t);\n}\n\nexport default TimePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/time.tsx"],"names":["TIMEZONELESS_FORMAT","from12hTo24h","hours","isPm","UpdateOnBlurAsIntegerField","as","value","onUpdate","className","props","handleBlur","event","target","String","parsedValue","parseInt","max","min","key","defaultValue","onBlur","TimePicker","is12Hour","currentTime","onChange","date","setDate","startOf","day","month","year","minutes","am","format","Number","changeDate","newDate","update","name","adjustedValue","clone","updateAmPm","parsedHours","dayFormat","monthFormat","dayMonthFormat"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { isInteger } from 'lodash';\nimport moment from 'moment';\nimport type { FocusEvent } from 'react';\nimport type { Moment } from 'moment';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateElement,\n\tuseState,\n\tuseMemo,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ButtonGroup from '../button-group';\nimport TimeZone from './timezone';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { UpdateOnBlurAsIntegerFieldProps, TimePickerProps } from './types';\n\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\n\nfunction from12hTo24h( hours: number, isPm: boolean ) {\n\treturn isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;\n}\n\n/**\n * A shared component to parse, validate, and handle remounting of the\n * underlying form field element like <input> and <select>.\n */\nfunction UpdateOnBlurAsIntegerField( {\n\tas,\n\tvalue,\n\tonUpdate,\n\tclassName,\n\t...props\n}: WordPressComponentProps< UpdateOnBlurAsIntegerFieldProps, 'input', true > ) {\n\tfunction handleBlur( event: FocusEvent< HTMLInputElement > ) {\n\t\tconst { target } = event;\n\n\t\tif ( String( value ) === target.value ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst parsedValue = parseInt( target.value, 10 );\n\n\t\t// Run basic number validation on the input.\n\t\tif (\n\t\t\t! isInteger( parsedValue ) ||\n\t\t\t( typeof props.max !== 'undefined' && parsedValue > props.max ) ||\n\t\t\t( typeof props.min !== 'undefined' && parsedValue < props.min )\n\t\t) {\n\t\t\t// If validation failed, reset the value to the previous valid value.\n\t\t\ttarget.value = String( value );\n\t\t} else {\n\t\t\t// Otherwise, it's valid, call onUpdate.\n\t\t\tonUpdate( parsedValue );\n\t\t}\n\t}\n\n\treturn createElement( as || 'input', {\n\t\t// Re-mount the input value to accept the latest value as the defaultValue.\n\t\tkey: value,\n\t\tdefaultValue: value,\n\t\tonBlur: handleBlur,\n\t\tclassName: classnames(\n\t\t\t'components-datetime__time-field-integer-field',\n\t\t\tclassName\n\t\t),\n\t\t...props,\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 ? moment( currentTime ).startOf( 'minutes' ) : moment()\n\t);\n\n\t// Reset the state when currentTime changed.\n\tuseEffect( () => {\n\t\tsetDate(\n\t\t\tcurrentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()\n\t\t);\n\t}, [ currentTime ] );\n\n\tconst { day, month, year, minutes, hours, am } = useMemo(\n\t\t() => ( {\n\t\t\tday: date.format( 'DD' ),\n\t\t\tmonth: date.format( 'MM' ),\n\t\t\tyear: date.format( 'YYYY' ),\n\t\t\tminutes: date.format( 'mm' ),\n\t\t\thours: date.format( is12Hour ? 'hh' : 'HH' ),\n\t\t\tam: Number( date.format( 'H' ) ) <= 11 ? 'AM' : 'PM',\n\t\t} ),\n\t\t[ date, is12Hour ]\n\t);\n\n\t/**\n\t * Function that sets the date state and calls the onChange with a new date.\n\t * The date is truncated at the minutes.\n\t *\n\t * @param {Moment} newDate The date object.\n\t */\n\tfunction changeDate( newDate: Moment ) {\n\t\tsetDate( newDate );\n\t\tonChange?.( newDate.format( TIMEZONELESS_FORMAT ) );\n\t}\n\n\tfunction update( name: 'date' | 'month' | 'year' | 'hours' | 'minutes' ) {\n\t\treturn ( value: number ) => {\n\t\t\t// If the 12-hour format is being used and the 'PM' period is selected, then\n\t\t\t// the incoming value (which ranges 1-12) should be increased by 12 to match\n\t\t\t// the expected 24-hour format.\n\t\t\tlet adjustedValue = value;\n\t\t\tif ( name === 'hours' && is12Hour ) {\n\t\t\t\tadjustedValue = from12hTo24h( value, am === 'PM' );\n\t\t\t}\n\n\t\t\t// Clone the date and call the specific setter function according to `name`.\n\t\t\tconst newDate = date.clone()[ name ]( adjustedValue );\n\t\t\tchangeDate( newDate );\n\t\t};\n\t}\n\n\tfunction updateAmPm( 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 = date\n\t\t\t\t.clone()\n\t\t\t\t.hours( from12hTo24h( parsedHours, value === 'PM' ) );\n\n\t\t\tchangeDate( newDate );\n\t\t};\n\t}\n\n\tconst dayFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-day\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\taria-label={ __( 'Day' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-day-input\"\n\t\t\t\ttype=\"number\"\n\t\t\t\t// The correct function to call in moment.js is \"date\" not \"day\".\n\t\t\t\tname=\"date\"\n\t\t\t\tvalue={ day }\n\t\t\t\tstep={ 1 }\n\t\t\t\tmin={ 1 }\n\t\t\t\tmax={ 31 }\n\t\t\t\tonUpdate={ update( 'date' ) }\n\t\t\t/>\n\t\t</div>\n\t);\n\n\tconst monthFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-month\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\tas=\"select\"\n\t\t\t\taria-label={ __( 'Month' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-month-select\"\n\t\t\t\tname=\"month\"\n\t\t\t\tvalue={ month }\n\t\t\t\t// The value starts from 0, so we have to -1 when setting month.\n\t\t\t\tonUpdate={ ( value ) => update( 'month' )( value - 1 ) }\n\t\t\t>\n\t\t\t\t<option value=\"01\">{ __( 'January' ) }</option>\n\t\t\t\t<option value=\"02\">{ __( 'February' ) }</option>\n\t\t\t\t<option value=\"03\">{ __( 'March' ) }</option>\n\t\t\t\t<option value=\"04\">{ __( 'April' ) }</option>\n\t\t\t\t<option value=\"05\">{ __( 'May' ) }</option>\n\t\t\t\t<option value=\"06\">{ __( 'June' ) }</option>\n\t\t\t\t<option value=\"07\">{ __( 'July' ) }</option>\n\t\t\t\t<option value=\"08\">{ __( 'August' ) }</option>\n\t\t\t\t<option value=\"09\">{ __( 'September' ) }</option>\n\t\t\t\t<option value=\"10\">{ __( 'October' ) }</option>\n\t\t\t\t<option value=\"11\">{ __( 'November' ) }</option>\n\t\t\t\t<option value=\"12\">{ __( 'December' ) }</option>\n\t\t\t</UpdateOnBlurAsIntegerField>\n\t\t</div>\n\t);\n\n\tconst dayMonthFormat = is12Hour ? (\n\t\t<>\n\t\t\t{ monthFormat }\n\t\t\t{ dayFormat }\n\t\t</>\n\t) : (\n\t\t<>\n\t\t\t{ dayFormat }\n\t\t\t{ monthFormat }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<div className={ classnames( 'components-datetime__time' ) }>\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Date' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t{ dayMonthFormat }\n\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-year\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Year' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-year-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"year\"\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={ 9999 }\n\t\t\t\t\t\t\tvalue={ year }\n\t\t\t\t\t\t\tonUpdate={ update( 'year' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Time' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-time\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Hours' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-hours-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"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\tvalue={ hours }\n\t\t\t\t\t\t\tonUpdate={ update( 'hours' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-separator\"\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</span>\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Minutes' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-minutes-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"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\tvalue={ minutes }\n\t\t\t\t\t\t\tonUpdate={ update( 'minutes' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ is12Hour && (\n\t\t\t\t\t\t<ButtonGroup className=\"components-datetime__time-field components-datetime__time-field-am-pm\">\n\t\t\t\t\t\t\t<Button\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\tonClick={ updateAmPm( 'AM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-am-button\"\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\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\tonClick={ updateAmPm( 'PM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-pm-button\"\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\n\t\t\t\t\t<TimeZone />\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t);\n}\n\nexport default TimePicker;\n"]}

package/build/date-time/timezone.js

@@ -24,7 +24,8 @@ var _tooltip = _interopRequireDefault(require("../tooltip"));
  */
 
 /**
- * Displays timezone information when user timezone is different from site timezone.
+ * Displays timezone information when user timezone is different from site
+ * timezone.
  */
 const TimeZone = () => {
   const {
@@ -38,8 +39,8 @@ const TimeZone = () => {
     return null;
   }
 
-  const offsetSymbol = timezone.offset >= 0 ? '+' : '';
-  const zoneAbbr = '' !== timezone.abbr && isNaN(timezone.abbr) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`;
+  const offsetSymbol = Number(timezone.offset) >= 0 ? '+' : '';
+  const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`;
   const timezoneDetail = 'UTC' === timezone.string ? (0, _i18n.__)('Coordinated Universal Time') : `(${zoneAbbr}) ${timezone.string.replace('_', ' ')}`;
   return (0, _element.createElement)(_tooltip.default, {
     position: "top center",

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/timezone.js"],"names":["TimeZone","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","timezoneDetail","string","replace"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA,MAAMA,QAAQ,GAAG,MAAM;AACtB,QAAM;AAAEC,IAAAA;AAAF,MAAe,sCAArB,CADsB,CAGtB;;AACA,QAAMC,kBAAkB,GAAG,CAAC,CAAD,IAAO,IAAIC,IAAJ,GAAWC,iBAAX,KAAiC,EAAxC,CAA3B,CAJsB,CAMtB;AACA;;AACA,MAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,KAA8BJ,kBAAnC,EAAwD;AACvD,WAAO,IAAP;AACA;;AAED,QAAMK,YAAY,GAAGN,QAAQ,CAACK,MAAT,IAAmB,CAAnB,GAAuB,GAAvB,GAA6B,EAAlD;AACA,QAAME,QAAQ,GACb,OAAOP,QAAQ,CAACQ,IAAhB,IAAwBC,KAAK,CAAET,QAAQ,CAACQ,IAAX,CAA7B,GACGR,QAAQ,CAACQ,IADZ,GAEI,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAH7C;AAKA,QAAMK,cAAc,GACnB,UAAUV,QAAQ,CAACW,MAAnB,GACG,cAAI,4BAAJ,CADH,GAEI,IAAIJ,QAAU,KAAKP,QAAQ,CAACW,MAAT,CAAgBC,OAAhB,CAAyB,GAAzB,EAA8B,GAA9B,CAAqC,EAH7D;AAKA,SACC,4BAAC,gBAAD;AAAS,IAAA,QAAQ,EAAC,YAAlB;AAA+B,IAAA,IAAI,EAAGF;AAAtC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAiDH,QAAjD,CADD,CADD;AAKA,CA5BD;;eA8BeR,Q","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalGetSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\n\n/**\n * Displays timezone information when user timezone is different from site timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = timezone.offset >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( timezone.abbr )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;\n\n\treturn (\n\t\t<Tooltip position=\"top center\" text={ timezoneDetail }>\n\t\t\t<div className=\"components-datetime__timezone\">{ zoneAbbr }</div>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/timezone.tsx"],"names":["TimeZone","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","timezoneDetail","string","replace"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA,MAAMA,QAAQ,GAAG,MAAM;AACtB,QAAM;AAAEC,IAAAA;AAAF,MAAe,sCAArB,CADsB,CAGtB;;AACA,QAAMC,kBAAkB,GAAG,CAAC,CAAD,IAAO,IAAIC,IAAJ,GAAWC,iBAAX,KAAiC,EAAxC,CAA3B,CAJsB,CAMtB;AACA;;AACA,MAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,KAA8BJ,kBAAnC,EAAwD;AACvD,WAAO,IAAP;AACA;;AAED,QAAMK,YAAY,GAAGF,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,IAA6B,CAA7B,GAAiC,GAAjC,GAAuC,EAA5D;AACA,QAAME,QAAQ,GACb,OAAOP,QAAQ,CAACQ,IAAhB,IAAwBC,KAAK,CAAEL,MAAM,CAAEJ,QAAQ,CAACQ,IAAX,CAAR,CAA7B,GACGR,QAAQ,CAACQ,IADZ,GAEI,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAH7C;AAKA,QAAMK,cAAc,GACnB,UAAUV,QAAQ,CAACW,MAAnB,GACG,cAAI,4BAAJ,CADH,GAEI,IAAIJ,QAAU,KAAKP,QAAQ,CAACW,MAAT,CAAgBC,OAAhB,CAAyB,GAAzB,EAA8B,GAA9B,CAAqC,EAH7D;AAKA,SACC,4BAAC,gBAAD;AAAS,IAAA,QAAQ,EAAC,YAAlB;AAA+B,IAAA,IAAI,EAAGF;AAAtC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAiDH,QAAjD,CADD,CADD;AAKA,CA5BD;;eA8BeR,Q","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalGetSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;\n\n\treturn (\n\t\t<Tooltip position=\"top center\" text={ timezoneDetail }>\n\t\t\t<div className=\"components-datetime__timezone\">{ zoneAbbr }</div>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"]}

package/build/date-time/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/date-time/utils.js

@@ -14,11 +14,13 @@ var _moment = _interopRequireDefault(require("moment"));
  */
 
 /**
- * Create a Moment object from a date string. With no date supplied, default to a Moment
- * object representing now. If a null value is passed, return a null value.
+ * Create a Moment object from a date string. With no date supplied, default to
+ * a Moment object representing now. If a null value is passed, return a null
+ * value.
  *
- * @param {?string} date Date representing the currently selected date or null to signify no selection.
- * @return {?moment.Moment} Moment object for selected date or null.
+ * @param  [date] Date representing the currently selected
+ *                date or null to signify no selection.
+ * @return Moment object for selected date or null.
  */
 const getMomentDate = date => {
   if (null === date) {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/utils.js"],"names":["getMomentDate","date"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAKC,IAAF,IAAY;AACxC,MAAK,SAASA,IAAd,EAAqB;AACpB,WAAO,IAAP;AACA;;AACD,SAAOA,IAAI,GAAG,qBAAQA,IAAR,CAAH,GAAoB,sBAA/B;AACA,CALM","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\n\n/**\n * Create a Moment object from a date string. With no date supplied, default to a Moment\n * object representing now. If a null value is passed, return a null value.\n *\n * @param {?string} date Date representing the currently selected date or null to signify no selection.\n * @return {?moment.Moment} Moment object for selected date or null.\n */\nexport const getMomentDate = ( date ) => {\n\tif ( null === date ) {\n\t\treturn null;\n\t}\n\treturn date ? moment( date ) : moment();\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/utils.ts"],"names":["getMomentDate","date"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAKC,IAAF,IAA4C;AACxE,MAAK,SAASA,IAAd,EAAqB;AACpB,WAAO,IAAP;AACA;;AACD,SAAOA,IAAI,GAAG,qBAAQA,IAAR,CAAH,GAAoB,sBAA/B;AACA,CALM","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\n\n/**\n * Create a Moment object from a date string. With no date supplied, default to\n * a Moment object representing now. If a null value is passed, return a null\n * value.\n *\n * @param  [date] Date representing the currently selected\n *                date or null to signify no selection.\n * @return Moment object for selected date or null.\n */\nexport const getMomentDate = ( date?: Date | string | number | null ) => {\n\tif ( null === date ) {\n\t\treturn null;\n\t}\n\treturn date ? moment( date ) : moment();\n};\n"]}

package/build/disabled/index.js

@@ -54,7 +54,7 @@ function Disabled(_ref) {
   } = _ref;
 
   /** @type {import('react').RefCallback<HTMLDivElement>} */
-  const ref = (0, _compose.__experimentalUseDisabled)();
+  const ref = (0, _compose.useDisabled)();
 
   if (!isDisabled) {
     return (0, _element.createElement)(Provider, {

package/build/disabled/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/disabled/index.js"],"names":["Context","Consumer","Provider","Disabled","className","children","isDisabled","props","ref"],"mappings":";;;;;;;;;AASA;;;;AANA;;AAKA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAMA,OAAO,GAAG,4BAAe,KAAf,CAAhB;AACA,MAAM;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,IAAyBF,OAA/B;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AACA,SAASG,QAAT,OAA0E;AAAA,MAAvD;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuBC,IAAAA,UAAU,GAAG,IAApC;AAA0C,OAAGC;AAA7C,GAAuD;;AACzE;AACA,QAAMC,GAAG,GAAG,yCAAZ;;AAEA,MAAK,CAAEF,UAAP,EAAoB;AACnB,WAAO,4BAAC,QAAD;AAAU,MAAA,KAAK,EAAG;AAAlB,OAA4BD,QAA5B,CAAP;AACA;;AAED,SACC,4BAAC,QAAD;AAAU,IAAA,KAAK,EAAG;AAAlB,KACC,4BAAC,6BAAD;AACC,IAAA,GAAG,EAAGG,GADP;AAEC,IAAA,SAAS,EAAG,yBAAYJ,SAAZ,EAAuB,qBAAvB;AAFb,KAGMG,KAHN,GAKGF,QALH,CADD,CADD;AAWA;;AAEDF,QAAQ,CAACH,OAAT,GAAmBA,OAAnB;AACAG,QAAQ,CAACF,QAAT,GAAoBA,QAApB;eAEeE,Q","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { StyledWrapper } from './styles/disabled-styles';\n\nconst Context = createContext( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * @typedef OwnProps\n * @property {string}                    [className]       Classname for the disabled element.\n * @property {import('react').ReactNode} children          Children to disable.\n * @property {boolean}                   [isDisabled=true] Whether to disable the children.\n */\n\n/**\n * @param {OwnProps & import('react').HTMLAttributes<HTMLDivElement>} props\n * @return {JSX.Element} Element wrapping the children to disable them when isDisabled is true.\n */\nfunction Disabled( { className, children, isDisabled = true, ...props } ) {\n\t/** @type {import('react').RefCallback<HTMLDivElement>} */\n\tconst ref = useDisabled();\n\n\tif ( ! isDisabled ) {\n\t\treturn <Provider value={ false }>{ children }</Provider>;\n\t}\n\n\treturn (\n\t\t<Provider value={ true }>\n\t\t\t<StyledWrapper\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ classnames( className, 'components-disabled' ) }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</StyledWrapper>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"]}
+{"version":3,"sources":["@wordpress/components/src/disabled/index.js"],"names":["Context","Consumer","Provider","Disabled","className","children","isDisabled","props","ref"],"mappings":";;;;;;;;;AASA;;;;AANA;;AAKA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAMA,OAAO,GAAG,4BAAe,KAAf,CAAhB;AACA,MAAM;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,IAAyBF,OAA/B;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AACA,SAASG,QAAT,OAA0E;AAAA,MAAvD;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuBC,IAAAA,UAAU,GAAG,IAApC;AAA0C,OAAGC;AAA7C,GAAuD;;AACzE;AACA,QAAMC,GAAG,GAAG,2BAAZ;;AAEA,MAAK,CAAEF,UAAP,EAAoB;AACnB,WAAO,4BAAC,QAAD;AAAU,MAAA,KAAK,EAAG;AAAlB,OAA4BD,QAA5B,CAAP;AACA;;AAED,SACC,4BAAC,QAAD;AAAU,IAAA,KAAK,EAAG;AAAlB,KACC,4BAAC,6BAAD;AACC,IAAA,GAAG,EAAGG,GADP;AAEC,IAAA,SAAS,EAAG,yBAAYJ,SAAZ,EAAuB,qBAAvB;AAFb,KAGMG,KAHN,GAKGF,QALH,CADD,CADD;AAWA;;AAEDF,QAAQ,CAACH,OAAT,GAAmBA,OAAnB;AACAG,QAAQ,CAACF,QAAT,GAAoBA,QAApB;eAEeE,Q","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useDisabled } from '@wordpress/compose';\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { StyledWrapper } from './styles/disabled-styles';\n\nconst Context = createContext( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * @typedef OwnProps\n * @property {string}                    [className]       Classname for the disabled element.\n * @property {import('react').ReactNode} children          Children to disable.\n * @property {boolean}                   [isDisabled=true] Whether to disable the children.\n */\n\n/**\n * @param {OwnProps & import('react').HTMLAttributes<HTMLDivElement>} props\n * @return {JSX.Element} Element wrapping the children to disable them when isDisabled is true.\n */\nfunction Disabled( { className, children, isDisabled = true, ...props } ) {\n\t/** @type {import('react').RefCallback<HTMLDivElement>} */\n\tconst ref = useDisabled();\n\n\tif ( ! isDisabled ) {\n\t\treturn <Provider value={ false }>{ children }</Provider>;\n\t}\n\n\treturn (\n\t\t<Provider value={ true }>\n\t\t\t<StyledWrapper\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ classnames( className, 'components-disabled' ) }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</StyledWrapper>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"]}