@wordpress/components 19.11.0 → 19.14.0

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

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _date.default;
+  }
+});
+exports.DateTimePicker = void 0;
+Object.defineProperty(exports, "TimePicker", {
+  enumerable: true,
+  get: function () {
+    return _time.default;
+  }
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
+
+var _button = _interopRequireDefault(require("../../button"));
+
+var _date = _interopRequireDefault(require("../date"));
+
+var _time = _interopRequireDefault(require("../time"));
+
+var _styles = require("./styles");
+
+var _hStack = require("../../h-stack");
+
+var _heading = require("../../heading");
+
+var _spacer = require("../../spacer");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const noop = () => {};
+
+function UnforwardedDateTimePicker(_ref, ref) {
+  let {
+    currentDate,
+    is12Hour,
+    isInvalidDate,
+    onMonthPreviewed = noop,
+    onChange,
+    events,
+    startOfWeek,
+    __nextRemoveHelpButton = false,
+    __nextRemoveResetButton = false
+  } = _ref;
+
+  if (!__nextRemoveHelpButton) {
+    (0, _deprecated.default)('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) {
+    (0, _deprecated.default)('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] = (0, _element.useState)(false);
+
+  function onClickDescriptionToggle() {
+    setCalendarHelpIsVisible(!calendarHelpIsVisible);
+  }
+
+  return (0, _element.createElement)("div", {
+    ref: ref,
+    className: "components-datetime"
+  }, !calendarHelpIsVisible && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_time.default, {
+    currentTime: currentDate,
+    onChange: onChange,
+    is12Hour: is12Hour
+  }), (0, _element.createElement)(_date.default, {
+    currentDate: currentDate,
+    onChange: onChange,
+    isInvalidDate: isInvalidDate,
+    events: events,
+    onMonthPreviewed: onMonthPreviewed,
+    startOfWeek: startOfWeek
+  })), calendarHelpIsVisible && (0, _element.createElement)(_styles.CalendarHelp, {
+    className: "components-datetime__calendar-help" // Unused, for backwards compatibility.
+
+  }, (0, _element.createElement)(_heading.Heading, {
+    level: 4
+  }, (0, _i18n.__)('Click to Select')), (0, _element.createElement)("ul", null, (0, _element.createElement)("li", null, (0, _i18n.__)('Click the right or left arrows to select other months in the past or the future.')), (0, _element.createElement)("li", null, (0, _i18n.__)('Click the desired day to select it.'))), (0, _element.createElement)(_heading.Heading, {
+    level: 4
+  }, (0, _i18n.__)('Navigating with a keyboard')), (0, _element.createElement)("ul", null, (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
+    "aria-label": (0, _i18n._x)('Enter', 'keyboard button')
+  }, "\u21B5"), ' '
+  /* JSX removes whitespace, but a space is required for screen readers. */
+  , (0, _element.createElement)("span", null, (0, _i18n.__)('Select the date in focus.'))), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
+    "aria-label": (0, _i18n.__)('Left and Right Arrows')
+  }, "\u2190/\u2192"), ' '
+  /* JSX removes whitespace, but a space is required for screen readers. */
+  , (0, _i18n.__)('Move backward (left) or forward (right) by one day.')), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
+    "aria-label": (0, _i18n.__)('Up and Down Arrows')
+  }, "\u2191/\u2193"), ' '
+  /* JSX removes whitespace, but a space is required for screen readers. */
+  , (0, _i18n.__)('Move backward (up) or forward (down) by one week.')), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
+    "aria-label": (0, _i18n.__)('Page Up and Page Down')
+  }, (0, _i18n.__)('PgUp/PgDn')), ' '
+  /* JSX removes whitespace, but a space is required for screen readers. */
+  , (0, _i18n.__)('Move backward (PgUp) or forward (PgDn) by one month.')), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
+    "aria-label": (0, _i18n.__)('Home and End')
+  }, (0, _i18n.__)('Home/End')), ' '
+  /* JSX removes whitespace, but a space is required for screen readers. */
+  , (0, _i18n.__)('Go to the first (Home) or last (End) day of a week.')))), (!__nextRemoveResetButton || !__nextRemoveHelpButton) && (0, _element.createElement)(_hStack.HStack, {
+    className: "components-datetime__buttons" // Unused, for backwards compatibility.
+
+  }, !__nextRemoveResetButton && !calendarHelpIsVisible && currentDate && (0, _element.createElement)(_button.default, {
+    className: "components-datetime__date-reset-button" // Unused, for backwards compatibility.
+    ,
+    variant: "link",
+    onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(null)
+  }, (0, _i18n.__)('Reset')), (0, _element.createElement)(_spacer.Spacer, null), !__nextRemoveHelpButton && (0, _element.createElement)(_button.default, {
+    className: "components-datetime__date-help-toggle" // Unused, for backwards compatibility.
+    ,
+    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
+ *     />
+ *   );
+ * };
+ * ```
+ */
+
+
+const DateTimePicker = (0, _element.forwardRef)(UnforwardedDateTimePicker);
+exports.DateTimePicker = DateTimePicker;
+var _default = DateTimePicker;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/date-time/date-time/index.tsx"],"names":["noop","UnforwardedDateTimePicker","ref","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","__nextRemoveHelpButton","__nextRemoveResetButton","since","version","hint","calendarHelpIsVisible","setCalendarHelpIsVisible","onClickDescriptionToggle","DateTimePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\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\nconst noop = () => {};\n\nfunction UnforwardedDateTimePicker(\n\t{\n\t\tcurrentDate,\n\t\tis12Hour,\n\t\tisInvalidDate,\n\t\tonMonthPreviewed = noop,\n\t\tonChange,\n\t\tevents,\n\t\tstartOfWeek,\n\t\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: '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: '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 ] =\n\t\tuseState( false );\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\tstartOfWeek={ startOfWeek }\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/date-time/date-time/styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarHelp = void 0;
+
+var _base = _interopRequireDefault(require("@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
+ */
+const CalendarHelp = (0, _base.default)("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__
+});
+exports.CalendarHelp = CalendarHelp;
+//# sourceMappingURL=styles.js.map

package/build/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;AAGO,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/date-time/index.js

@@ -11,7 +11,6 @@ Object.defineProperty(exports, "DatePicker", {
     return _date.default;
   }
 });
-exports.DateTimePicker = void 0;
 Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
   get: function () {
@@ -20,121 +19,15 @@ Object.defineProperty(exports, "TimePicker", {
 });
 exports.default = void 0;
 
-var _element = require("@wordpress/element");
-
-require("react-dates/initialize");
-
-var _lodash = require("lodash");
-
-var _i18n = require("@wordpress/i18n");
-
-var _button = _interopRequireDefault(require("../button"));
-
 var _date = _interopRequireDefault(require("./date"));
 
 var _time = _interopRequireDefault(require("./time"));
 
-/**
- * External dependencies
- */
-// Needed to initialise the default datepicker styles.
-// See: https://github.com/airbnb/react-dates#initialize
-
-/**
- * WordPress dependencies
- */
+var _dateTime = _interopRequireDefault(require("./date-time"));
 
 /**
  * Internal dependencies
  */
-function UnforwardedDateTimePicker(_ref, ref) {
-  let {
-    currentDate,
-    is12Hour,
-    isInvalidDate,
-    onMonthPreviewed = _lodash.noop,
-    onChange,
-    events
-  } = _ref;
-  const [calendarHelpIsVisible, setCalendarHelpIsVisible] = (0, _element.useState)(false);
-
-  function onClickDescriptionToggle() {
-    setCalendarHelpIsVisible(!calendarHelpIsVisible);
-  }
-
-  return (0, _element.createElement)("div", {
-    ref: ref,
-    className: "components-datetime"
-  }, !calendarHelpIsVisible && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_time.default, {
-    currentTime: currentDate,
-    onChange: onChange,
-    is12Hour: is12Hour
-  }), (0, _element.createElement)(_date.default, {
-    currentDate: currentDate,
-    onChange: onChange,
-    isInvalidDate: isInvalidDate,
-    events: events,
-    onMonthPreviewed: onMonthPreviewed
-  })), calendarHelpIsVisible && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
-    className: "components-datetime__calendar-help"
-  }, (0, _element.createElement)("h4", null, (0, _i18n.__)('Click to Select')), (0, _element.createElement)("ul", null, (0, _element.createElement)("li", null, (0, _i18n.__)('Click the right or left arrows to select other months in the past or the future.')), (0, _element.createElement)("li", null, (0, _i18n.__)('Click the desired day to select it.'))), (0, _element.createElement)("h4", null, (0, _i18n.__)('Navigating with a keyboard')), (0, _element.createElement)("ul", null, (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
-    "aria-label": (0, _i18n._x)('Enter', 'keyboard button')
-  }, "\u21B5"), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , (0, _element.createElement)("span", null, (0, _i18n.__)('Select the date in focus.'))), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
-    "aria-label": (0, _i18n.__)('Left and Right Arrows')
-  }, "\u2190/\u2192"), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , (0, _i18n.__)('Move backward (left) or forward (right) by one day.')), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
-    "aria-label": (0, _i18n.__)('Up and Down Arrows')
-  }, "\u2191/\u2193"), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , (0, _i18n.__)('Move backward (up) or forward (down) by one week.')), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
-    "aria-label": (0, _i18n.__)('Page Up and Page Down')
-  }, (0, _i18n.__)('PgUp/PgDn')), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , (0, _i18n.__)('Move backward (PgUp) or forward (PgDn) by one month.')), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
-    "aria-label": (0, _i18n.__)('Home and End')
-  }, (0, _i18n.__)('Home/End')), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , (0, _i18n.__)('Go to the first (Home) or last (End) day of a week.'))))), (0, _element.createElement)("div", {
-    className: "components-datetime__buttons"
-  }, !calendarHelpIsVisible && currentDate && (0, _element.createElement)(_button.default, {
-    className: "components-datetime__date-reset-button",
-    variant: "link",
-    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
- *     />
- *   );
- * };
- * ```
- */
-
-
-const DateTimePicker = (0, _element.forwardRef)(UnforwardedDateTimePicker);
-exports.DateTimePicker = DateTimePicker;
-var _default = DateTimePicker;
+var _default = _dateTime.default;
 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.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"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/index.ts"],"names":["DateTimePicker"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;eAMeA,iB","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"]}