@wordpress/components 19.11.0 → 19.12.0

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

@@ -0,0 +1,144 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, forwardRef } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
+/**
+ * Internal dependencies
+ */
+
+import Button from '../../button';
+import { default as DatePicker } from '../date';
+import { default as TimePicker } from '../time';
+import { CalendarHelp } from './styles';
+import { HStack } from '../../h-stack';
+import { Heading } from '../../heading';
+import { Spacer } from '../../spacer';
+export { DatePicker, TimePicker };
+
+function UnforwardedDateTimePicker(_ref, ref) {
+  let {
+    currentDate,
+    is12Hour,
+    isInvalidDate,
+    onMonthPreviewed = noop,
+    onChange,
+    events,
+    __nextRemoveHelpButton = false,
+    __nextRemoveResetButton = false
+  } = _ref;
+
+  if (!__nextRemoveHelpButton) {
+    deprecated('Help button in wp.components.DateTimePicker', {
+      since: '13.4',
+      version: '14.6',
+      // Six months of plugin releases.
+      hint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.'
+    });
+  }
+
+  if (!__nextRemoveResetButton) {
+    deprecated('Reset button in wp.components.DateTimePicker', {
+      since: '13.4',
+      version: '14.6',
+      // Six months of plugin releases.
+      hint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.'
+    });
+  }
+
+  const [calendarHelpIsVisible, setCalendarHelpIsVisible] = useState(false);
+
+  function onClickDescriptionToggle() {
+    setCalendarHelpIsVisible(!calendarHelpIsVisible);
+  }
+
+  return createElement("div", {
+    ref: ref,
+    className: "components-datetime"
+  }, !calendarHelpIsVisible && createElement(Fragment, null, createElement(TimePicker, {
+    currentTime: currentDate,
+    onChange: onChange,
+    is12Hour: is12Hour
+  }), createElement(DatePicker, {
+    currentDate: currentDate,
+    onChange: onChange,
+    isInvalidDate: isInvalidDate,
+    events: events,
+    onMonthPreviewed: onMonthPreviewed
+  })), calendarHelpIsVisible && createElement(CalendarHelp, {
+    className: "components-datetime__calendar-help" // Unused, for backwards compatibility.
+
+  }, createElement(Heading, {
+    level: 4
+  }, __('Click to Select')), createElement("ul", null, createElement("li", null, __('Click the right or left arrows to select other months in the past or the future.')), createElement("li", null, __('Click the desired day to select it.'))), createElement(Heading, {
+    level: 4
+  }, __('Navigating with a keyboard')), createElement("ul", null, createElement("li", null, createElement("abbr", {
+    "aria-label": _x('Enter', 'keyboard button')
+  }, "\u21B5"), ' '
+  /* JSX removes whitespace, but a space is required for screen readers. */
+  , createElement("span", null, __('Select the date in focus.'))), createElement("li", null, createElement("abbr", {
+    "aria-label": __('Left and Right Arrows')
+  }, "\u2190/\u2192"), ' '
+  /* JSX removes whitespace, but a space is required for screen readers. */
+  , __('Move backward (left) or forward (right) by one day.')), createElement("li", null, createElement("abbr", {
+    "aria-label": __('Up and Down Arrows')
+  }, "\u2191/\u2193"), ' '
+  /* JSX removes whitespace, but a space is required for screen readers. */
+  , __('Move backward (up) or forward (down) by one week.')), createElement("li", null, createElement("abbr", {
+    "aria-label": __('Page Up and Page Down')
+  }, __('PgUp/PgDn')), ' '
+  /* JSX removes whitespace, but a space is required for screen readers. */
+  , __('Move backward (PgUp) or forward (PgDn) by one month.')), createElement("li", null, createElement("abbr", {
+    "aria-label": __('Home and End')
+  }, __('Home/End')), ' '
+  /* JSX removes whitespace, but a space is required for screen readers. */
+  , __('Go to the first (Home) or last (End) day of a week.')))), (!__nextRemoveResetButton || !__nextRemoveHelpButton) && createElement(HStack, {
+    className: "components-datetime__buttons" // Unused, for backwards compatibility.
+
+  }, !__nextRemoveResetButton && !calendarHelpIsVisible && currentDate && createElement(Button, {
+    className: "components-datetime__date-reset-button" // Unused, for backwards compatibility.
+    ,
+    variant: "link",
+    onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(null)
+  }, __('Reset')), createElement(Spacer, null), !__nextRemoveHelpButton && createElement(Button, {
+    className: "components-datetime__date-help-toggle" // Unused, for backwards compatibility.
+    ,
+    variant: "link",
+    onClick: onClickDescriptionToggle
+  }, calendarHelpIsVisible ? __('Close') : __('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
+ *     />
+ *   );
+ * };
+ * ```
+ */
+
+
+export const DateTimePicker = forwardRef(UnforwardedDateTimePicker);
+export default DateTimePicker;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/date-time/date-time/index.tsx"],"names":["noop","useState","forwardRef","__","_x","deprecated","Button","default","DatePicker","TimePicker","CalendarHelp","HStack","Heading","Spacer","UnforwardedDateTimePicker","ref","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","onChange","events","__nextRemoveHelpButton","__nextRemoveResetButton","since","version","hint","calendarHelpIsVisible","setCalendarHelpIsVisible","onClickDescriptionToggle","DateTimePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\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';\nimport deprecated from '@wordpress/deprecated';\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';\nimport { CalendarHelp } from './styles';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { Spacer } from '../../spacer';\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\t__nextRemoveHelpButton = false,\n\t\t__nextRemoveResetButton = false,\n\t}: DateTimePickerProps,\n\tref: ForwardedRef< any >\n) {\n\tif ( ! __nextRemoveHelpButton ) {\n\t\tdeprecated( 'Help button in wp.components.DateTimePicker', {\n\t\t\tsince: '13.4',\n\t\t\tversion: '14.6', // Six months of plugin releases.\n\t\t\thint:\n\t\t\t\t'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',\n\t\t} );\n\t}\n\tif ( ! __nextRemoveResetButton ) {\n\t\tdeprecated( 'Reset button in wp.components.DateTimePicker', {\n\t\t\tsince: '13.4',\n\t\t\tversion: '14.6', // Six months of plugin releases.\n\t\t\thint:\n\t\t\t\t'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',\n\t\t} );\n\t}\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<CalendarHelp\n\t\t\t\t\tclassName=\"components-datetime__calendar-help\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t<Heading level={ 4 }>{ __( 'Click to Select' ) }</Heading>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t{ __(\n\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) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>{ __( 'Click the desired day to select it.' ) }</li>\n\t\t\t\t\t</ul>\n\t\t\t\t\t<Heading level={ 4 }>\n\t\t\t\t\t\t{ __( 'Navigating with a keyboard' ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr\n\t\t\t\t\t\t\t\taria-label={ _x( 'Enter', 'keyboard button' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t↵\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\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}\n\t\t\t\t\t\t\t<span>{ __( 'Select the date in focus.' ) }</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Left and Right Arrows' ) }>\n\t\t\t\t\t\t\t\t←/→\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\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}\n\t\t\t\t\t\t\t{ __(\n\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) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Up and Down Arrows' ) }>\n\t\t\t\t\t\t\t\t↑/↓\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\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}\n\t\t\t\t\t\t\t{ __(\n\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) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Page Up and Page Down' ) }>\n\t\t\t\t\t\t\t\t{ __( 'PgUp/PgDn' ) }\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\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}\n\t\t\t\t\t\t\t{ __(\n\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) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Home and End' ) }>\n\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{ __( 'Home/End' ) }\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\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}\n\t\t\t\t\t\t\t{ __(\n\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) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</CalendarHelp>\n\t\t\t) }\n\t\t\t{ ( ! __nextRemoveResetButton || ! __nextRemoveHelpButton ) && (\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__buttons\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ ! __nextRemoveResetButton &&\n\t\t\t\t\t\t! calendarHelpIsVisible &&\n\t\t\t\t\t\tcurrentDate && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__date-reset-button\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\tonClick={ () => onChange?.( null ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t<Spacer />\n\t\t\t\t\t{ ! __nextRemoveHelpButton && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-datetime__date-help-toggle\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\tonClick={ onClickDescriptionToggle }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ calendarHelpIsVisible\n\t\t\t\t\t\t\t\t? __( 'Close' )\n\t\t\t\t\t\t\t\t: __( 'Calendar Help' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t) }\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-module/date-time/date-time/styles.js

@@ -0,0 +1,22 @@
+import _styled from "@emotion/styled/base";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/**
+ * External dependencies
+ */
+export const CalendarHelp = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1p5onf00"
+} : {
+  target: "e1p5onf00",
+  label: "CalendarHelp"
+})(process.env.NODE_ENV === "production" ? {
+  name: "l0rwn2",
+  styles: "min-width:260px"
+} : {
+  name: "l0rwn2",
+  styles: "min-width:260px",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGF0ZS10aW1lL2RhdGUtdGltZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3NDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGF0ZS10aW1lL2RhdGUtdGltZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBDYWxlbmRhckhlbHAgPSBzdHlsZWQuZGl2YFxuXHRtaW4td2lkdGg6IDI2MHB4O1xuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/date-time/date-time/styles.ts"],"names":["CalendarHelp"],"mappings":";;;;AAAA;AACA;AACA;AAGA,OAAO,MAAMA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\nexport const CalendarHelp = styled.div`\n\tmin-width: 260px;\n`;\n"]}

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

@@ -1,113 +1,9 @@
-import { createElement, Fragment } from "@wordpress/element";
-
-/**
- * External dependencies
- */
-// Needed to initialise the default datepicker styles.
-// See: https://github.com/airbnb/react-dates#initialize
-import 'react-dates/initialize';
-import { noop } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useState, forwardRef } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-
-import Button from '../button';
 import { default as DatePicker } from './date';
 import { default as TimePicker } from './time';
+import { default as DateTimePicker } from './date-time';
 export { DatePicker, TimePicker };
-
-function UnforwardedDateTimePicker(_ref, ref) {
-  let {
-    currentDate,
-    is12Hour,
-    isInvalidDate,
-    onMonthPreviewed = noop,
-    onChange,
-    events
-  } = _ref;
-  const [calendarHelpIsVisible, setCalendarHelpIsVisible] = useState(false);
-
-  function onClickDescriptionToggle() {
-    setCalendarHelpIsVisible(!calendarHelpIsVisible);
-  }
-
-  return createElement("div", {
-    ref: ref,
-    className: "components-datetime"
-  }, !calendarHelpIsVisible && createElement(Fragment, null, createElement(TimePicker, {
-    currentTime: currentDate,
-    onChange: onChange,
-    is12Hour: is12Hour
-  }), createElement(DatePicker, {
-    currentDate: currentDate,
-    onChange: onChange,
-    isInvalidDate: isInvalidDate,
-    events: events,
-    onMonthPreviewed: onMonthPreviewed
-  })), calendarHelpIsVisible && createElement(Fragment, null, createElement("div", {
-    className: "components-datetime__calendar-help"
-  }, createElement("h4", null, __('Click to Select')), createElement("ul", null, createElement("li", null, __('Click the right or left arrows to select other months in the past or the future.')), createElement("li", null, __('Click the desired day to select it.'))), createElement("h4", null, __('Navigating with a keyboard')), createElement("ul", null, createElement("li", null, createElement("abbr", {
-    "aria-label": _x('Enter', 'keyboard button')
-  }, "\u21B5"), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , createElement("span", null, __('Select the date in focus.'))), createElement("li", null, createElement("abbr", {
-    "aria-label": __('Left and Right Arrows')
-  }, "\u2190/\u2192"), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , __('Move backward (left) or forward (right) by one day.')), createElement("li", null, createElement("abbr", {
-    "aria-label": __('Up and Down Arrows')
-  }, "\u2191/\u2193"), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , __('Move backward (up) or forward (down) by one week.')), createElement("li", null, createElement("abbr", {
-    "aria-label": __('Page Up and Page Down')
-  }, __('PgUp/PgDn')), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , __('Move backward (PgUp) or forward (PgDn) by one month.')), createElement("li", null, createElement("abbr", {
-    "aria-label": __('Home and End')
-  }, __('Home/End')), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , __('Go to the first (Home) or last (End) day of a week.'))))), createElement("div", {
-    className: "components-datetime__buttons"
-  }, !calendarHelpIsVisible && currentDate && createElement(Button, {
-    className: "components-datetime__date-reset-button",
-    variant: "link",
-    onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(null)
-  }, __('Reset')), createElement(Button, {
-    className: "components-datetime__date-help-toggle",
-    variant: "link",
-    onClick: onClickDescriptionToggle
-  }, calendarHelpIsVisible ? __('Close') : __('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
- *     />
- *   );
- * };
- * ```
- */
-
-
-export const DateTimePicker = forwardRef(UnforwardedDateTimePicker);
 export default DateTimePicker;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/index.tsx"],"names":["noop","useState","forwardRef","__","_x","Button","default","DatePicker","TimePicker","UnforwardedDateTimePicker","ref","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","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"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/index.ts"],"names":["default","DatePicker","TimePicker","DateTimePicker"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,UAApB,QAAsC,QAAtC;AACA,SAASD,OAAO,IAAIE,UAApB,QAAsC,QAAtC;AACA,SAASF,OAAO,IAAIG,cAApB,QAA0C,aAA1C;AAEA,SAASF,UAAT,EAAqBC,UAArB;AACA,eAAeC,cAAf","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"]}

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

@@ -0,0 +1,302 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import moment from 'moment';
+/**
+ * WordPress dependencies
+ */
+
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import Button from '../../button';
+import ButtonGroup from '../../button-group';
+import TimeZone from './timezone';
+import { Wrapper, Fieldset, Legend, HoursInput, TimeSeparator, MinutesInput, MonthSelectWrapper, MonthSelect, DayInput, YearInput, TimeWrapper } from './styles';
+import { HStack } from '../../h-stack';
+import { Spacer } from '../../spacer';
+import { COMMIT, PRESS_DOWN, PRESS_UP } from '../../input-control/reducer/actions';
+const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
+
+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;
+  };
+}
+/**
+ * TimePicker is a React component that renders a clock for time selection.
+ *
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTimePicker = () => {
+ *   const [ time, setTime ] = useState( new Date() );
+ *
+ *   return (
+ *     <TimePicker
+ *       currentTime={ date }
+ *       onChange={ ( newTime ) => setTime( newTime ) }
+ *       is12Hour
+ *     />
+ *   );
+ * };
+ * ```
+ */
+
+
+export function TimePicker(_ref) {
+  let {
+    is12Hour,
+    currentTime,
+    onChange
+  } = _ref;
+  const [date, setDate] = useState(() => // Truncate the date at the minutes, see: #15495.
+  currentTime ? moment(currentTime).startOf('minutes') : moment()); // Reset the state when currentTime changed.
+
+  useEffect(() => {
+    setDate(currentTime ? moment(currentTime).startOf('minutes') : moment());
+  }, [currentTime]);
+  const {
+    day,
+    month,
+    year,
+    minutes,
+    hours,
+    am
+  } = useMemo(() => ({
+    day: date.format('DD'),
+    month: date.format('MM'),
+    year: date.format('YYYY'),
+    minutes: date.format('mm'),
+    hours: date.format(is12Hour ? 'hh' : 'HH'),
+    am: Number(date.format('H')) <= 11 ? 'AM' : 'PM'
+  }), [date, is12Hour]);
+
+  const buildNumberControlChangeCallback = method => {
+    const callback = (value, _ref2) => {
+      let {
+        event
+      } = _ref2;
+
+      if (!(event.target instanceof HTMLInputElement)) {
+        return;
+      }
+
+      if (!event.target.validity.valid) {
+        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 newDate = date.clone()[method](numberValue);
+      setDate(newDate);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newDate.format(TIMEZONELESS_FORMAT));
+    };
+
+    return callback;
+  };
+
+  function buildAmPmChangeCallback(value) {
+    return () => {
+      if (am === value) {
+        return;
+      }
+
+      const parsedHours = parseInt(hours, 10);
+      const newDate = date.clone().hours(from12hTo24h(parsedHours, value === 'PM'));
+      setDate(newDate);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newDate.format(TIMEZONELESS_FORMAT));
+    };
+  }
+
+  const dayField = createElement(DayInput, {
+    className: "components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
+    ,
+    label: __('Day'),
+    hideLabelFromVision: true,
+    __next36pxDefaultSize: true,
+    value: day,
+    step: 1,
+    min: 1,
+    max: 31,
+    required: true,
+    hideHTMLArrows: true,
+    isPressEnterToChange: true,
+    isDragEnabled: false,
+    isShiftStepEnabled: false,
+    onChange: buildNumberControlChangeCallback('date')
+  });
+  const monthField = createElement(MonthSelectWrapper, null, createElement(MonthSelect, {
+    className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
+    ,
+    label: __('Month'),
+    hideLabelFromVision: true,
+    __nextHasNoMarginBottom: true,
+    value: month,
+    options: [{
+      value: '01',
+      label: __('January')
+    }, {
+      value: '02',
+      label: __('February')
+    }, {
+      value: '03',
+      label: __('March')
+    }, {
+      value: '04',
+      label: __('April')
+    }, {
+      value: '05',
+      label: __('May')
+    }, {
+      value: '06',
+      label: __('June')
+    }, {
+      value: '07',
+      label: __('July')
+    }, {
+      value: '08',
+      label: __('August')
+    }, {
+      value: '09',
+      label: __('September')
+    }, {
+      value: '10',
+      label: __('October')
+    }, {
+      value: '11',
+      label: __('November')
+    }, {
+      value: '12',
+      label: __('December')
+    }],
+    onChange: value => {
+      const newDate = date.clone().month(Number(value) - 1);
+      setDate(newDate);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newDate.format(TIMEZONELESS_FORMAT));
+    }
+  }));
+  return createElement(Wrapper, {
+    className: "components-datetime__time" // Unused, for backwards compatibility.
+
+  }, createElement(Fieldset, null, createElement(Legend, {
+    className: "components-datetime__time-legend" // Unused, for backwards compatibility.
+
+  }, __('Time')), createElement(HStack, {
+    className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
+
+  }, createElement(TimeWrapper, {
+    className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
+
+  }, createElement(HoursInput, {
+    className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
+    ,
+    label: __('Hours'),
+    hideLabelFromVision: true,
+    __next36pxDefaultSize: true,
+    value: hours,
+    step: 1,
+    min: is12Hour ? 1 : 0,
+    max: is12Hour ? 12 : 23,
+    required: true,
+    hideHTMLArrows: true,
+    isPressEnterToChange: true,
+    isDragEnabled: false,
+    isShiftStepEnabled: false,
+    onChange: buildNumberControlChangeCallback('hours'),
+    __unstableStateReducer: buildPadInputStateReducer(2)
+  }), createElement(TimeSeparator, {
+    className: "components-datetime__time-separator" // Unused, for backwards compatibility.
+    ,
+    "aria-hidden": "true"
+  }, ":"), createElement(MinutesInput, {
+    className: "components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
+    ,
+    label: __('Minutes'),
+    hideLabelFromVision: true,
+    __next36pxDefaultSize: true,
+    value: minutes,
+    step: 1,
+    min: 0,
+    max: 59,
+    required: true,
+    hideHTMLArrows: true,
+    isPressEnterToChange: true,
+    isDragEnabled: false,
+    isShiftStepEnabled: false,
+    onChange: buildNumberControlChangeCallback('minutes'),
+    __unstableStateReducer: buildPadInputStateReducer(2)
+  })), is12Hour && createElement(ButtonGroup, {
+    className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
+
+  }, createElement(Button, {
+    className: "components-datetime__time-am-button" // Unused, for backwards compatibility.
+    ,
+    variant: am === 'AM' ? 'primary' : 'secondary',
+    onClick: buildAmPmChangeCallback('AM')
+  }, __('AM')), createElement(Button, {
+    className: "components-datetime__time-pm-button" // Unused, for backwards compatibility.
+    ,
+    variant: am === 'PM' ? 'primary' : 'secondary',
+    onClick: buildAmPmChangeCallback('PM')
+  }, __('PM'))), createElement(Spacer, null), createElement(TimeZone, null))), createElement(Fieldset, null, createElement(Legend, {
+    className: "components-datetime__time-legend" // Unused, for backwards compatibility.
+
+  }, __('Date')), createElement(HStack, {
+    className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
+
+  }, is12Hour ? createElement(Fragment, null, monthField, dayField) : createElement(Fragment, null, dayField, monthField), createElement(YearInput, {
+    className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
+    ,
+    label: __('Year'),
+    hideLabelFromVision: true,
+    __next36pxDefaultSize: true,
+    value: year,
+    step: 1,
+    min: 1,
+    max: 9999,
+    required: true,
+    hideHTMLArrows: true,
+    isPressEnterToChange: true,
+    isDragEnabled: false,
+    isShiftStepEnabled: false,
+    onChange: buildNumberControlChangeCallback('year'),
+    __unstableStateReducer: buildPadInputStateReducer(4)
+  }))));
+}
+export default TimePicker;
+//# sourceMappingURL=index.js.map