@wordpress/components 30.9.1-next.8b30e05b0.0 → 31.0.1-next.738bb1424.0

package/build/date-time/date/use-lilius/index.cjs

@@ -0,0 +1,153 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/date-time/date/use-lilius/index.ts
+var use_lilius_exports = {};
+__export(use_lilius_exports, {
+  Day: () => Day,
+  Month: () => Month,
+  useLilius: () => useLilius
+});
+module.exports = __toCommonJS(use_lilius_exports);
+var import_date_fns = require("date-fns");
+var import_element = require("@wordpress/element");
+var Month = /* @__PURE__ */ (function(Month2) {
+  Month2[Month2["JANUARY"] = 0] = "JANUARY";
+  Month2[Month2["FEBRUARY"] = 1] = "FEBRUARY";
+  Month2[Month2["MARCH"] = 2] = "MARCH";
+  Month2[Month2["APRIL"] = 3] = "APRIL";
+  Month2[Month2["MAY"] = 4] = "MAY";
+  Month2[Month2["JUNE"] = 5] = "JUNE";
+  Month2[Month2["JULY"] = 6] = "JULY";
+  Month2[Month2["AUGUST"] = 7] = "AUGUST";
+  Month2[Month2["SEPTEMBER"] = 8] = "SEPTEMBER";
+  Month2[Month2["OCTOBER"] = 9] = "OCTOBER";
+  Month2[Month2["NOVEMBER"] = 10] = "NOVEMBER";
+  Month2[Month2["DECEMBER"] = 11] = "DECEMBER";
+  return Month2;
+})({});
+var Day = /* @__PURE__ */ (function(Day2) {
+  Day2[Day2["SUNDAY"] = 0] = "SUNDAY";
+  Day2[Day2["MONDAY"] = 1] = "MONDAY";
+  Day2[Day2["TUESDAY"] = 2] = "TUESDAY";
+  Day2[Day2["WEDNESDAY"] = 3] = "WEDNESDAY";
+  Day2[Day2["THURSDAY"] = 4] = "THURSDAY";
+  Day2[Day2["FRIDAY"] = 5] = "FRIDAY";
+  Day2[Day2["SATURDAY"] = 6] = "SATURDAY";
+  return Day2;
+})({});
+var inRange = (date, min, max) => ((0, import_date_fns.isEqual)(date, min) || (0, import_date_fns.isAfter)(date, min)) && ((0, import_date_fns.isEqual)(date, max) || (0, import_date_fns.isBefore)(date, max));
+var clearTime = (date) => (0, import_date_fns.set)(date, {
+  hours: 0,
+  minutes: 0,
+  seconds: 0,
+  milliseconds: 0
+});
+var useLilius = ({
+  weekStartsOn = Day.SUNDAY,
+  viewing: initialViewing = /* @__PURE__ */ new Date(),
+  selected: initialSelected = [],
+  numberOfMonths = 1
+} = {}) => {
+  const [viewing, setViewing] = (0, import_element.useState)(initialViewing);
+  const viewToday = (0, import_element.useCallback)(() => setViewing((0, import_date_fns.startOfToday)()), [setViewing]);
+  const viewMonth = (0, import_element.useCallback)((month) => setViewing((v) => (0, import_date_fns.setMonth)(v, month)), []);
+  const viewPreviousMonth = (0, import_element.useCallback)(() => setViewing((v) => (0, import_date_fns.subMonths)(v, 1)), []);
+  const viewNextMonth = (0, import_element.useCallback)(() => setViewing((v) => (0, import_date_fns.addMonths)(v, 1)), []);
+  const viewYear = (0, import_element.useCallback)((year) => setViewing((v) => (0, import_date_fns.setYear)(v, year)), []);
+  const viewPreviousYear = (0, import_element.useCallback)(() => setViewing((v) => (0, import_date_fns.subYears)(v, 1)), []);
+  const viewNextYear = (0, import_element.useCallback)(() => setViewing((v) => (0, import_date_fns.addYears)(v, 1)), []);
+  const [selected, setSelected] = (0, import_element.useState)(initialSelected.map(clearTime));
+  const clearSelected = () => setSelected([]);
+  const isSelected = (0, import_element.useCallback)((date) => selected.findIndex((s) => (0, import_date_fns.isEqual)(s, date)) > -1, [selected]);
+  const select = (0, import_element.useCallback)((date, replaceExisting) => {
+    if (replaceExisting) {
+      setSelected(Array.isArray(date) ? date : [date]);
+    } else {
+      setSelected((selectedItems) => selectedItems.concat(Array.isArray(date) ? date : [date]));
+    }
+  }, []);
+  const deselect = (0, import_element.useCallback)((date) => setSelected((selectedItems) => Array.isArray(date) ? selectedItems.filter((s) => !date.map((d) => d.getTime()).includes(s.getTime())) : selectedItems.filter((s) => !(0, import_date_fns.isEqual)(s, date))), []);
+  const toggle = (0, import_element.useCallback)((date, replaceExisting) => isSelected(date) ? deselect(date) : select(date, replaceExisting), [deselect, isSelected, select]);
+  const selectRange = (0, import_element.useCallback)((start, end, replaceExisting) => {
+    if (replaceExisting) {
+      setSelected((0, import_date_fns.eachDayOfInterval)({
+        start,
+        end
+      }));
+    } else {
+      setSelected((selectedItems) => selectedItems.concat((0, import_date_fns.eachDayOfInterval)({
+        start,
+        end
+      })));
+    }
+  }, []);
+  const deselectRange = (0, import_element.useCallback)((start, end) => {
+    setSelected((selectedItems) => selectedItems.filter((s) => !(0, import_date_fns.eachDayOfInterval)({
+      start,
+      end
+    }).map((d) => d.getTime()).includes(s.getTime())));
+  }, []);
+  const calendar = (0, import_element.useMemo)(() => (0, import_date_fns.eachMonthOfInterval)({
+    start: (0, import_date_fns.startOfMonth)(viewing),
+    end: (0, import_date_fns.endOfMonth)((0, import_date_fns.addMonths)(viewing, numberOfMonths - 1))
+  }).map((month) => (0, import_date_fns.eachWeekOfInterval)({
+    start: (0, import_date_fns.startOfMonth)(month),
+    end: (0, import_date_fns.endOfMonth)(month)
+  }, {
+    weekStartsOn
+  }).map((week) => (0, import_date_fns.eachDayOfInterval)({
+    start: (0, import_date_fns.startOfWeek)(week, {
+      weekStartsOn
+    }),
+    end: (0, import_date_fns.endOfWeek)(week, {
+      weekStartsOn
+    })
+  }))), [viewing, weekStartsOn, numberOfMonths]);
+  return {
+    clearTime,
+    inRange,
+    viewing,
+    setViewing,
+    viewToday,
+    viewMonth,
+    viewPreviousMonth,
+    viewNextMonth,
+    viewYear,
+    viewPreviousYear,
+    viewNextYear,
+    selected,
+    setSelected,
+    clearSelected,
+    isSelected,
+    select,
+    deselect,
+    toggle,
+    selectRange,
+    deselectRange,
+    calendar
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Day,
+  Month,
+  useLilius
+});
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1,85 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/date-time/date-time/index.tsx
+var date_time_exports = {};
+__export(date_time_exports, {
+  DatePicker: () => import_date.default,
+  DateTimePicker: () => DateTimePicker,
+  TimePicker: () => import_time.default,
+  default: () => date_time_default
+});
+module.exports = __toCommonJS(date_time_exports);
+var import_element = require("@wordpress/element");
+var import_date = __toESM(require("../date/index.cjs"), 1);
+var import_time = __toESM(require("../time/index.cjs"), 1);
+var import_styles = require("./styles.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var noop = () => {
+};
+function UnforwardedDateTimePicker({
+  currentDate,
+  is12Hour,
+  dateOrder,
+  isInvalidDate,
+  onMonthPreviewed = noop,
+  onChange,
+  events,
+  startOfWeek
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Wrapper, {
+    ref,
+    className: "components-datetime",
+    spacing: 4,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_time.default, {
+        currentTime: currentDate,
+        onChange,
+        is12Hour,
+        dateOrder
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date.default, {
+        currentDate,
+        onChange,
+        isInvalidDate,
+        events,
+        onMonthPreviewed,
+        startOfWeek
+      })]
+    })
+  });
+}
+var DateTimePicker = (0, import_element.forwardRef)(UnforwardedDateTimePicker);
+var date_time_default = DateTimePicker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DatePicker,
+  DateTimePicker,
+  TimePicker
+});
+//# sourceMappingURL=index.cjs.map

package/build/date-time/date-time/styles.cjs

@@ -0,0 +1,59 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/date-time/date-time/styles.ts
+var styles_exports = {};
+__export(styles_exports, {
+  Wrapper: () => Wrapper
+});
+module.exports = __toCommonJS(styles_exports);
+var import_base = __toESM(require("@emotion/styled/base"), 1);
+var import_v_stack = require("../../v-stack/index.cjs");
+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).";
+}
+var Wrapper = /* @__PURE__ */ (0, import_base.default)(import_v_stack.VStack, process.env.NODE_ENV === "production" ? {
+  target: "e1p5onf00"
+} : {
+  target: "e1p5onf00",
+  label: "Wrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1khn195",
+  styles: "box-sizing:border-box"
+} : {
+  name: "1khn195",
+  styles: "box-sizing:border-box",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVdUMiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBWU3RhY2sgfSBmcm9tICcuLi8uLi92LXN0YWNrJztcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQoIFZTdGFjayApYFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Wrapper
+});
+//# sourceMappingURL=styles.cjs.map

package/build/date-time/index.cjs

@@ -0,0 +1,47 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/date-time/index.ts
+var date_time_exports = {};
+__export(date_time_exports, {
+  DatePicker: () => import_date.default,
+  TimePicker: () => import_time.default,
+  default: () => date_time_default
+});
+module.exports = __toCommonJS(date_time_exports);
+var import_date = __toESM(require("./date/index.cjs"), 1);
+var import_time = __toESM(require("./time/index.cjs"), 1);
+var import_date_time = __toESM(require("./date-time/index.cjs"), 1);
+var date_time_default = import_date_time.default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DatePicker,
+  TimePicker
+});
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1,253 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/components/src/date-time/time/index.tsx
+var time_exports = {};
+__export(time_exports, {
+  TimePicker: () => TimePicker,
+  default: () => time_default
+});
+module.exports = __toCommonJS(time_exports);
+var import_date_fns = require("date-fns");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_date = require("@wordpress/date");
+var import_base_control = __toESM(require("../../base-control/index.cjs"), 1);
+var import_visually_hidden = require("../../visually-hidden/index.cjs");
+var import_select_control = __toESM(require("../../select-control/index.cjs"), 1);
+var import_timezone = __toESM(require("./timezone.cjs"), 1);
+var import_styles = require("./styles.cjs");
+var import_h_stack = require("../../h-stack/index.cjs");
+var import_spacer = require("../../spacer/index.cjs");
+var import_utils = require("../utils.cjs");
+var import_constants = require("../constants.cjs");
+var import_time_input = require("./time-input/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var VALID_DATE_ORDERS = ["dmy", "mdy", "ymd"];
+function TimePicker({
+  is12Hour,
+  currentTime,
+  onChange,
+  dateOrder: dateOrderProp,
+  hideLabelFromVision = false
+}) {
+  const [date, setDate] = (0, import_element.useState)(() => (
+    // Truncate the date at the minutes, see: #15495.
+    (0, import_date_fns.startOfMinute)((0, import_utils.inputToDate)(currentTime !== null && currentTime !== void 0 ? currentTime : /* @__PURE__ */ new Date()))
+  ));
+  (0, import_element.useEffect)(() => {
+    setDate((0, import_date_fns.startOfMinute)((0, import_utils.inputToDate)(currentTime !== null && currentTime !== void 0 ? currentTime : /* @__PURE__ */ new Date())));
+  }, [currentTime]);
+  const monthOptions = [{
+    value: "01",
+    label: (0, import_i18n.__)("January")
+  }, {
+    value: "02",
+    label: (0, import_i18n.__)("February")
+  }, {
+    value: "03",
+    label: (0, import_i18n.__)("March")
+  }, {
+    value: "04",
+    label: (0, import_i18n.__)("April")
+  }, {
+    value: "05",
+    label: (0, import_i18n.__)("May")
+  }, {
+    value: "06",
+    label: (0, import_i18n.__)("June")
+  }, {
+    value: "07",
+    label: (0, import_i18n.__)("July")
+  }, {
+    value: "08",
+    label: (0, import_i18n.__)("August")
+  }, {
+    value: "09",
+    label: (0, import_i18n.__)("September")
+  }, {
+    value: "10",
+    label: (0, import_i18n.__)("October")
+  }, {
+    value: "11",
+    label: (0, import_i18n.__)("November")
+  }, {
+    value: "12",
+    label: (0, import_i18n.__)("December")
+  }];
+  const {
+    day,
+    month,
+    year,
+    minutes,
+    hours
+  } = (0, import_element.useMemo)(() => ({
+    day: (0, import_date.date)("d", date),
+    month: (0, import_date.date)("m", date),
+    year: (0, import_date.date)("Y", date),
+    minutes: (0, import_date.date)("i", date),
+    hours: (0, import_date.date)("H", date)
+  }), [date]);
+  const buildNumberControlChangeCallback = (method) => {
+    const callback = (value, {
+      event
+    }) => {
+      if (!(0, import_utils.validateInputElementTarget)(event)) {
+        return;
+      }
+      const numberValue = Number(value);
+      const newDate = (0, import_utils.setInConfiguredTimezone)(date, {
+        [method]: numberValue
+      });
+      setDate(newDate);
+      onChange?.((0, import_date.date)(import_constants.TIMEZONELESS_FORMAT, newDate));
+    };
+    return callback;
+  };
+  const onTimeInputChangeCallback = ({
+    hours: newHours,
+    minutes: newMinutes
+  }) => {
+    const newDate = (0, import_utils.setInConfiguredTimezone)(date, {
+      hours: newHours,
+      minutes: newMinutes
+    });
+    setDate(newDate);
+    onChange?.((0, import_date.date)(import_constants.TIMEZONELESS_FORMAT, newDate));
+  };
+  const dayField = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.DayInput, {
+    className: "components-datetime__time-field components-datetime__time-field-day",
+    label: (0, import_i18n.__)("Day"),
+    hideLabelFromVision: true,
+    __next40pxDefaultSize: true,
+    value: day,
+    step: 1,
+    min: 1,
+    max: 31,
+    required: true,
+    spinControls: "none",
+    isPressEnterToChange: true,
+    isDragEnabled: false,
+    isShiftStepEnabled: false,
+    onChange: buildNumberControlChangeCallback("date")
+  }, "day");
+  const monthField = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.MonthSelectWrapper, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select_control.default, {
+      className: "components-datetime__time-field components-datetime__time-field-month",
+      label: (0, import_i18n.__)("Month"),
+      hideLabelFromVision: true,
+      __next40pxDefaultSize: true,
+      value: month,
+      options: monthOptions,
+      onChange: (value) => {
+        const newDate = (0, import_utils.setInConfiguredTimezone)(date, {
+          month: Number(value) - 1
+        });
+        setDate(newDate);
+        onChange?.((0, import_date.date)(import_constants.TIMEZONELESS_FORMAT, newDate));
+      }
+    })
+  }, "month");
+  const yearField = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.YearInput, {
+    className: "components-datetime__time-field components-datetime__time-field-year",
+    label: (0, import_i18n.__)("Year"),
+    hideLabelFromVision: true,
+    __next40pxDefaultSize: true,
+    value: year,
+    step: 1,
+    min: 1,
+    max: 9999,
+    required: true,
+    spinControls: "none",
+    isPressEnterToChange: true,
+    isDragEnabled: false,
+    isShiftStepEnabled: false,
+    onChange: buildNumberControlChangeCallback("year"),
+    __unstableStateReducer: (0, import_utils.buildPadInputStateReducer)(4)
+  }, "year");
+  const defaultDateOrder = is12Hour ? "mdy" : "dmy";
+  const dateOrder = dateOrderProp && VALID_DATE_ORDERS.includes(dateOrderProp) ? dateOrderProp : defaultDateOrder;
+  const fields = dateOrder.split("").map((field) => {
+    switch (field) {
+      case "d":
+        return dayField;
+      case "m":
+        return monthField;
+      case "y":
+        return yearField;
+      default:
+        return null;
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Wrapper, {
+    className: "components-datetime__time",
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Fieldset, {
+      children: [hideLabelFromVision ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
+        as: "legend",
+        children: (0, import_i18n.__)("Time")
+      }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control.default.VisualLabel, {
+        as: "legend",
+        className: "components-datetime__time-legend",
+        children: (0, import_i18n.__)("Time")
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_h_stack.HStack, {
+        className: "components-datetime__time-wrapper",
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_time_input.TimeInput, {
+          value: {
+            hours: Number(hours),
+            minutes: Number(minutes)
+          },
+          is12Hour,
+          onChange: onTimeInputChangeCallback
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spacer.Spacer, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_timezone.default, {})]
+      })]
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Fieldset, {
+      children: [hideLabelFromVision ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
+        as: "legend",
+        children: (0, import_i18n.__)("Date")
+      }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control.default.VisualLabel, {
+        as: "legend",
+        className: "components-datetime__time-legend",
+        children: (0, import_i18n.__)("Date")
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_h_stack.HStack, {
+        className: "components-datetime__time-wrapper",
+        children: fields
+      })]
+    })]
+  });
+}
+TimePicker.TimeInput = import_time_input.TimeInput;
+Object.assign(TimePicker.TimeInput, {
+  displayName: "TimePicker.TimeInput"
+});
+var time_default = TimePicker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TimePicker
+});
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/date-time/time/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { startOfMinute } from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { date as formatDate } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../../base-control';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport SelectControl from '../../select-control';\nimport TimeZone from './timezone';\nimport { Wrapper, Fieldset, MonthSelectWrapper, DayInput, YearInput } from './styles';\nimport { HStack } from '../../h-stack';\nimport { Spacer } from '../../spacer';\nimport { inputToDate, buildPadInputStateReducer, validateInputElementTarget, setInConfiguredTimezone } from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\nimport { TimeInput } from './time-input';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst VALID_DATE_ORDERS = ['dmy', 'mdy', 'ymd'];\n\n/**\n * TimePicker is a React component that renders a clock for time selection.\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimePicker = () => {\n *   const [ time, setTime ] = useState( new Date() );\n *\n *   return (\n *     <TimePicker\n *       currentTime={ date }\n *       onChange={ ( newTime ) => setTime( newTime ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport function TimePicker({\n  is12Hour,\n  currentTime,\n  onChange,\n  dateOrder: dateOrderProp,\n  hideLabelFromVision = false\n}) {\n  const [date, setDate] = useState(() =>\n  // Truncate the date at the minutes, see: #15495.\n  startOfMinute(inputToDate(currentTime !== null && currentTime !== void 0 ? currentTime : new Date())));\n\n  // Reset the state when currentTime changed.\n  // TODO: useEffect() shouldn't be used like this, causes an unnecessary render\n  useEffect(() => {\n    setDate(startOfMinute(inputToDate(currentTime !== null && currentTime !== void 0 ? currentTime : new Date())));\n  }, [currentTime]);\n  const monthOptions = [{\n    value: '01',\n    label: __('January')\n  }, {\n    value: '02',\n    label: __('February')\n  }, {\n    value: '03',\n    label: __('March')\n  }, {\n    value: '04',\n    label: __('April')\n  }, {\n    value: '05',\n    label: __('May')\n  }, {\n    value: '06',\n    label: __('June')\n  }, {\n    value: '07',\n    label: __('July')\n  }, {\n    value: '08',\n    label: __('August')\n  }, {\n    value: '09',\n    label: __('September')\n  }, {\n    value: '10',\n    label: __('October')\n  }, {\n    value: '11',\n    label: __('November')\n  }, {\n    value: '12',\n    label: __('December')\n  }];\n  const {\n    day,\n    month,\n    year,\n    minutes,\n    hours\n  } = useMemo(() => ({\n    day: formatDate('d', date),\n    month: formatDate('m', date),\n    year: formatDate('Y', date),\n    minutes: formatDate('i', date),\n    hours: formatDate('H', date)\n  }), [date]);\n  const buildNumberControlChangeCallback = method => {\n    const callback = (value, {\n      event\n    }) => {\n      if (!validateInputElementTarget(event)) {\n        return;\n      }\n\n      // We can safely assume value is a number if target is valid.\n      const numberValue = Number(value);\n\n      // Internal date is UTC-normalized, but the field should be updated\n      // as if in the configured timezone.\n      const newDate = setInConfiguredTimezone(date, {\n        [method]: numberValue\n      });\n      setDate(newDate);\n      onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n    };\n    return callback;\n  };\n  const onTimeInputChangeCallback = ({\n    hours: newHours,\n    minutes: newMinutes\n  }) => {\n    // Internal date is UTC-normalized, but the field should be updated\n    // as if in the configured timezone.\n    const newDate = setInConfiguredTimezone(date, {\n      hours: newHours,\n      minutes: newMinutes\n    });\n    setDate(newDate);\n    onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n  };\n  const dayField = /*#__PURE__*/_jsx(DayInput, {\n    className: \"components-datetime__time-field components-datetime__time-field-day\" // Unused, for backwards compatibility.\n    ,\n    label: __('Day'),\n    hideLabelFromVision: true,\n    __next40pxDefaultSize: true,\n    value: day,\n    step: 1,\n    min: 1,\n    max: 31,\n    required: true,\n    spinControls: \"none\",\n    isPressEnterToChange: true,\n    isDragEnabled: false,\n    isShiftStepEnabled: false,\n    onChange: buildNumberControlChangeCallback('date')\n  }, \"day\");\n  const monthField = /*#__PURE__*/_jsx(MonthSelectWrapper, {\n    children: /*#__PURE__*/_jsx(SelectControl, {\n      className: \"components-datetime__time-field components-datetime__time-field-month\" // Unused, for backwards compatibility.\n      ,\n      label: __('Month'),\n      hideLabelFromVision: true,\n      __next40pxDefaultSize: true,\n      value: month,\n      options: monthOptions,\n      onChange: value => {\n        // Internal date is UTC-normalized, but the field should be updated\n        // as if in the configured timezone.\n        const newDate = setInConfiguredTimezone(date, {\n          month: Number(value) - 1\n        });\n        setDate(newDate);\n        onChange?.(formatDate(TIMEZONELESS_FORMAT, newDate));\n      }\n    })\n  }, \"month\");\n  const yearField = /*#__PURE__*/_jsx(YearInput, {\n    className: \"components-datetime__time-field components-datetime__time-field-year\" // Unused, for backwards compatibility.\n    ,\n    label: __('Year'),\n    hideLabelFromVision: true,\n    __next40pxDefaultSize: true,\n    value: year,\n    step: 1,\n    min: 1,\n    max: 9999,\n    required: true,\n    spinControls: \"none\",\n    isPressEnterToChange: true,\n    isDragEnabled: false,\n    isShiftStepEnabled: false,\n    onChange: buildNumberControlChangeCallback('year'),\n    __unstableStateReducer: buildPadInputStateReducer(4)\n  }, \"year\");\n  const defaultDateOrder = is12Hour ? 'mdy' : 'dmy';\n  const dateOrder = dateOrderProp && VALID_DATE_ORDERS.includes(dateOrderProp) ? dateOrderProp : defaultDateOrder;\n  const fields = dateOrder.split('').map(field => {\n    switch (field) {\n      case 'd':\n        return dayField;\n      case 'm':\n        return monthField;\n      case 'y':\n        return yearField;\n      default:\n        return null;\n    }\n  });\n  return /*#__PURE__*/_jsxs(Wrapper, {\n    className: \"components-datetime__time\" // Unused, for backwards compatibility.\n    ,\n    children: [/*#__PURE__*/_jsxs(Fieldset, {\n      children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"legend\",\n        children: __('Time')\n      }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n        as: \"legend\",\n        className: \"components-datetime__time-legend\" // Unused, for backwards compatibility.\n        ,\n        children: __('Time')\n      }), /*#__PURE__*/_jsxs(HStack, {\n        className: \"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n        ,\n        children: [/*#__PURE__*/_jsx(TimeInput, {\n          value: {\n            hours: Number(hours),\n            minutes: Number(minutes)\n          },\n          is12Hour: is12Hour,\n          onChange: onTimeInputChangeCallback\n        }), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(TimeZone, {})]\n      })]\n    }), /*#__PURE__*/_jsxs(Fieldset, {\n      children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"legend\",\n        children: __('Date')\n      }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n        as: \"legend\",\n        className: \"components-datetime__time-legend\" // Unused, for backwards compatibility.\n        ,\n        children: __('Date')\n      }), /*#__PURE__*/_jsx(HStack, {\n        className: \"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n        ,\n        children: fields\n      })]\n    })]\n  });\n}\n\n/**\n * A component to input a time.\n *\n * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimeInput = () => {\n * \tconst [ time, setTime ] = useState( { hours: 13, minutes: 30 } );\n *\n * \treturn (\n * \t\t<TimePicker.TimeInput\n * \t\t\tvalue={ time }\n * \t\t\tonChange={ setTime }\n * \t\t\tlabel=\"Time\"\n * \t\t/>\n * \t);\n * };\n * ```\n */\nTimePicker.TimeInput = TimeInput;\nObject.assign(TimePicker.TimeInput, {\n  displayName: 'TimePicker.TimeInput'\n});\nexport default TimePicker;"],
+  "mappings": "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",
+  "names": ["formatDate", "_jsx", "SelectControl", "_jsxs", "BaseControl", "TimeZone"]
+}