@godxjp/ui 20.0.0 → 20.1.0

package/dist/components/data-entry/date-picker.js

@@ -1,36 +1,92 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { CalendarIcon, X } from "lucide-react";
+import { CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
-import { parseDateInput, toIsoDate } from "../../lib/datetime/parse.js";
+import { toIsoDate } from "../../lib/datetime/parse.js";
+import {
+  formatPickerDate,
+  parsePickerDate,
+  pickerDateAllowed,
+  pickerPeriodStart
+} from "../../lib/datetime/picker-format.js";
+import { Button } from "../general/button.js";
+import { Flex } from "../layout/flex.js";
+import { TimePicker } from "./time-picker.js";
 import { useControlledLatch } from "../../lib/hooks.js";
 import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
+import { resolveAllowClear } from "./control-surface.js";
 import { Input } from "./input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Calendar } from "./calendar.js";
 const ISO_HINT = "yyyy-mm-dd";
-function DatePicker({
-  value: valueProp,
-  defaultValue,
-  onValueChange,
-  placeholder,
-  disabled,
-  className,
-  id,
-  name,
-  locale: localeProp,
-  showToday,
-  showClose,
-  fromDate,
-  toDate,
-  allowClear = true,
-  ...ariaProps
-}) {
+function DatePicker(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    placeholder,
+    disabled,
+    className,
+    id,
+    name,
+    locale: localeProp,
+    showToday,
+    showClose,
+    fromDate,
+    toDate,
+    disabledDate,
+    cellRender,
+    allowClear,
+    format: formatProp,
+    parseFormat,
+    minDate,
+    maxDate,
+    showWeek,
+    showTime,
+    presets,
+    multiple = false,
+    picker = "date",
+    order = true,
+    needConfirm = Boolean(showTime),
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    inputReadOnly,
+    preserveInvalidOnBlur,
+    placement = "bottom-start",
+    renderExtraFooter,
+    size,
+    status,
+    variant,
+    ref,
+    ...ariaProps
+  } = props;
+  const format = formatProp ?? (typeof showTime === "object" && showTime.showSeconds ? "yyyy-MM-dd HH:mm:ss" : void 0);
   const { t } = useTranslation();
-  const { dayPickerLocale } = usePickerLocales(localeProp);
-  const [open, setOpen] = React.useState(false);
+  const { dayPickerLocale, locale } = usePickerLocales(localeProp);
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const open = !disabled && (openProp ?? internalOpen);
+  const [pending, setPending] = React.useState();
+  const [hasPending, setHasPending] = React.useState(false);
+  const setOpen = (next) => {
+    if (disabled && next) return;
+    if (openProp === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+    if (!next) {
+      setHasPending(false);
+      setPending(void 0);
+    }
+  };
+  const timeAllowed = (date) => {
+    const rules = typeof showTime === "object" ? showTime.disabledTime?.() : void 0;
+    return !(rules?.disabledHours?.().includes(date.getHours()) || rules?.disabledMinutes?.(date.getHours()).includes(date.getMinutes()) || rules?.disabledSeconds?.(date.getHours(), date.getMinutes()).includes(date.getSeconds()));
+  };
+  const minimum = minDate ?? fromDate;
+  const maximum = maxDate ?? toDate;
+  const allowed = (date) => pickerDateAllowed(date, minimum, maximum, disabledDate);
+  const display = (date) => Array.isArray(date) ? date.map((day) => formatPickerDate(day, format, locale)).join(", ") : formatPickerDate(date, format, locale, Boolean(showTime));
+  const parse = (text2) => parsePickerDate(text2, format, parseFormat, Boolean(showTime));
   const fieldA11y = pickFieldA11y(ariaProps);
   const identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
   const resolvedName = name ?? identity.name;
@@ -40,63 +96,106 @@ function DatePicker({
   const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
+  const working = hasPending ? pending : value;
+  const selectedDate = Array.isArray(working) ? working[0] : working;
+  const [viewYear, setViewYear] = React.useState((selectedDate ?? /* @__PURE__ */ new Date()).getFullYear());
+  const periodDate = (date) => pickerPeriodStart(date, picker, dayPickerLocale);
   const emit = (next) => {
     if (!isControlled) setInternalValue(next);
-    onValueChange?.(next);
+    if (props.multiple)
+      props.onValueChange?.(Array.isArray(next) ? next : next ? [next] : void 0);
+    else props.onValueChange?.(Array.isArray(next) ? next[0] : next);
   };
-  const [text, setText] = React.useState(() => toIsoDate(value));
+  const [text, setText] = React.useState(() => display(value));
   React.useEffect(() => {
-    setText(toIsoDate(value));
-  }, [value]);
+    setText(
+      Array.isArray(value) ? value.map((date) => formatPickerDate(date, format, locale)).join(", ") : formatPickerDate(value, format, locale, Boolean(showTime))
+    );
+  }, [value, format, locale, showTime]);
   const resolvedPlaceholder = placeholder ?? t("dataEntry.datePicker.placeholder") ?? ISO_HINT;
   const clear = () => {
     emit(void 0);
     setText("");
   };
-  const showClear = allowClear && text !== "" && !disabled;
+  const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
+  const showClear = clearControl.enabled && text !== "" && !disabled;
+  const choose = (input) => {
+    let date = input;
+    if (Array.isArray(date)) {
+      if (date.some((day) => !allowed(day))) return;
+      if (order) date = [...date].sort((a, b) => +a - +b);
+    } else if (date) {
+      date = periodDate(date);
+      if (!allowed(date) || !needConfirm && !timeAllowed(date)) return;
+      if (multiple) {
+        const current = Array.isArray(working) ? working : [];
+        date = current.some((day) => +day === +date) ? current.filter((day) => +day !== +date) : [...current, date];
+        if (order) date.sort((a, b) => +a - +b);
+      }
+    }
+    if (needConfirm) {
+      setPending(date);
+      setHasPending(true);
+    } else {
+      emit(date);
+      setText(display(date));
+    }
+  };
   const commit = (raw) => {
-    const trimmed = raw.trim();
-    if (trimmed === "") {
-      emit(void 0);
+    if (!raw.trim()) {
+      choose(void 0);
       return;
     }
-    if (!/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) return;
-    const parsed = parseDateInput(trimmed);
-    if (parsed) {
-      emit(parsed);
-    }
+    const parsed = parse(raw);
+    if (parsed && allowed(parsed)) choose(parsed);
   };
-  return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx(
-      Input,
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    (format || showTime || multiple || needConfirm || preserveInvalidOnBlur) && resolvedName ? /* @__PURE__ */ jsx(
+      "input",
       {
-        id,
-        name: resolvedName,
-        "data-field": resolvedField,
-        value: text,
+        type: "hidden",
         disabled,
-        placeholder: resolvedPlaceholder,
-        inputMode: "numeric",
-        autoComplete: "off",
-        role: "combobox",
-        "aria-expanded": open,
-        "aria-haspopup": "dialog",
-        "aria-controls": open ? dialogId : void 0,
-        ...fieldA11y,
-        className: showClear ? "ui-control-inline-affix-pair-affixed" : void 0,
-        trailingIcon: /* @__PURE__ */ jsxs("span", { className: "ui-time-picker-affix", children: [
-          showClear ? /* @__PURE__ */ jsx(
+        name: resolvedName,
+        value: showTime ? (Array.isArray(value) ? value[0] : value)?.toISOString() ?? "" : Array.isArray(value) ? value.map(toIsoDate).join(",") : toIsoDate(value)
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id,
+          name: format || showTime || multiple || needConfirm || preserveInvalidOnBlur ? "" : resolvedName,
+          ref,
+          size,
+          status,
+          variant,
+          readOnly: inputReadOnly || multiple,
+          "data-field": resolvedField,
+          value: text,
+          disabled,
+          placeholder: resolvedPlaceholder,
+          inputMode: "numeric",
+          autoComplete: "off",
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-haspopup": "dialog",
+          "aria-controls": open ? dialogId : void 0,
+          ...fieldA11y,
+          trailingIcon: /* @__PURE__ */ jsx("span", { className: "ui-time-picker-affix", children: showClear ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               tabIndex: -1,
-              "aria-label": t("common.clear") ?? "Clear",
-              onClick: clear,
+              "aria-label": clearControl.label,
+              onClick: (event) => {
+                event.stopPropagation();
+                event.currentTarget.closest("div")?.querySelector("input:not([type=hidden])")?.focus();
+                clear();
+              },
               className: "ui-control-inline-affix-action",
-              children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+              children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
             }
-          ) : null,
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -106,64 +205,196 @@ function DatePicker({
               className: "ui-control-inline-affix-action",
               children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
             }
-          ) })
-        ] }),
-        onClick: () => {
-          if (!disabled) setOpen(true);
-        },
-        onKeyDown: (event) => {
-          if (event.key === "ArrowDown") {
-            event.preventDefault();
-            setOpen(true);
-          } else if (event.key === "Escape" && open) {
-            setOpen(false);
-          }
-        },
-        onChange: (event) => {
-          setText(event.target.value);
-          commit(event.target.value);
-        },
-        onBlur: (event) => {
-          const parsed = parseDateInput(event.target.value.trim());
-          setText(parsed ? toIsoDate(parsed) : toIsoDate(value));
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      PopoverContent,
-      {
-        id: dialogId,
-        role: "dialog",
-        "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Calendar",
-        className: "ui-control-panel-flush",
-        align: "start",
-        onOpenAutoFocus: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ jsx(
-          Calendar,
-          {
-            mode: "single",
-            selected: value,
-            defaultMonth: value,
-            onSelect: (date) => {
-              emit(date);
-              setText(toIsoDate(date));
+          ) }) }),
+          onClick: () => {
+            if (!disabled) setOpen(true);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              setOpen(true);
+            } else if (event.key === "Enter") {
+              const parsed = parse(text);
+              if (parsed && allowed(parsed) && timeAllowed(parsed)) {
+                const next = periodDate(parsed);
+                emit(next);
+                setText(display(parsed));
+                setOpen(false);
+              }
+            } else if (event.key === "Escape" && open) {
               setOpen(false);
-            },
-            locale: dayPickerLocale,
-            disabled: [
-              ...fromDate ? [{ before: fromDate }] : [],
-              ...toDate ? [{ after: toDate }] : []
-            ],
-            startMonth: fromDate,
-            endMonth: toDate,
-            showToday,
-            showClose,
-            onClose: () => setOpen(false)
+            }
+          },
+          onChange: (event) => {
+            setText(event.target.value);
+            commit(event.target.value);
+          },
+          onBlur: (event) => {
+            const parsed = parse(event.target.value);
+            const accepted = parsed && allowed(parsed) && timeAllowed(parsed) ? parsed : void 0;
+            if (!preserveInvalidOnBlur) setText(accepted ? display(accepted) : display(value));
           }
-        )
-      }
-    )
-  ] }) }) });
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          id: dialogId,
+          role: "dialog",
+          "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Calendar",
+          className: "ui-control-panel-flush",
+          side: placement.startsWith("top") ? "top" : "bottom",
+          align: placement.endsWith("end") ? "end" : "start",
+          onOpenAutoFocus: (event) => event.preventDefault(),
+          children: [
+            presets?.length ? /* @__PURE__ */ jsx(Flex, { wrap: true, gap: "xs", pad: "sm", children: presets.map((preset, index) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                type: "button",
+                onClick: () => {
+                  const date = typeof preset.value === "function" ? preset.value() : preset.value;
+                  if (!allowed(date)) return;
+                  choose(date);
+                  if (!needConfirm && !multiple) setOpen(false);
+                },
+                children: preset.label
+              },
+              index
+            )) }) : null,
+            picker === "date" || picker === "week" ? multiple ? /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "multiple",
+                selected: Array.isArray(working) ? working : [],
+                defaultMonth: selectedDate,
+                locale: dayPickerLocale,
+                onSelect: choose,
+                disabled: (day) => !allowed(day),
+                cellRender,
+                showWeekNumber: showWeek,
+                startMonth: minimum,
+                endMonth: maximum,
+                showToday,
+                showClose,
+                onClose: () => setOpen(false)
+              }
+            ) : /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "single",
+                selected: selectedDate,
+                defaultMonth: selectedDate,
+                showWeekNumber: showWeek,
+                onSelect: (date) => {
+                  if (date && showTime && selectedDate)
+                    date.setHours(
+                      selectedDate.getHours(),
+                      selectedDate.getMinutes(),
+                      selectedDate.getSeconds()
+                    );
+                  choose(date);
+                  if (!needConfirm && !multiple) setOpen(false);
+                },
+                locale: dayPickerLocale,
+                disabled: [
+                  ...minimum ? [{ before: minimum }] : [],
+                  ...maximum ? [{ after: maximum }] : [],
+                  ...disabledDate ? [disabledDate] : []
+                ],
+                cellRender,
+                startMonth: minimum,
+                endMonth: maximum,
+                showToday,
+                showClose,
+                onClose: () => setOpen(false)
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-panel", children: [
+              /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    "aria-label": t("dataEntry.monthPicker.previousYear"),
+                    onClick: () => setViewYear(viewYear - (picker === "year" ? 12 : 1)),
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: new Intl.NumberFormat(locale, { useGrouping: false }).format(viewYear) }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    "aria-label": t("dataEntry.monthPicker.nextYear"),
+                    onClick: () => setViewYear(viewYear + (picker === "year" ? 12 : 1)),
+                    children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "ui-month-picker-grid", children: Array.from({ length: picker === "quarter" ? 4 : 12 }, (_, index) => {
+                const date = picker === "year" ? new Date(viewYear + index, 0, 1) : new Date(viewYear, index * (picker === "quarter" ? 3 : 1), 1);
+                const label = picker === "year" ? new Intl.DateTimeFormat(locale, { year: "numeric" }).format(date) : picker === "quarter" ? t("dataEntry.datePicker.quarter", { quarter: index + 1 }) : new Intl.DateTimeFormat(locale, { month: "short" }).format(date);
+                const selected = (Array.isArray(working) ? working : working ? [working] : []).some((day) => +periodDate(day) === +date);
+                return /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: selected ? "default" : "ghost",
+                    "aria-pressed": selected,
+                    disabled: !allowed(date),
+                    onClick: () => {
+                      choose(date);
+                      if (!needConfirm && !multiple) setOpen(false);
+                    },
+                    children: label
+                  },
+                  index
+                );
+              }) })
+            ] }),
+            showTime ? /* @__PURE__ */ jsx(Flex, { pad: "sm", children: /* @__PURE__ */ jsx(
+              TimePicker,
+              {
+                ...typeof showTime === "object" ? showTime : {},
+                "aria-label": t("dataEntry.timePicker.openPicker"),
+                value: selectedDate ? [
+                  selectedDate.getHours(),
+                  selectedDate.getMinutes(),
+                  ...typeof showTime === "object" && showTime.showSeconds ? [selectedDate.getSeconds()] : []
+                ].map((n) => String(n).padStart(2, "0")).join(":") : "",
+                onValueChange: (time) => {
+                  if (!time) return;
+                  const date = new Date(selectedDate ?? /* @__PURE__ */ new Date());
+                  const [h, m, sec = 0] = time.split(":").map(Number);
+                  date.setHours(h, m, sec, 0);
+                  choose(date);
+                }
+              }
+            ) }) : null,
+            needConfirm ? /* @__PURE__ */ jsx(Flex, { pad: "sm", justify: "end", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                disabled: !selectedDate || !allowed(selectedDate) || !timeAllowed(selectedDate),
+                onClick: () => {
+                  if (selectedDate && allowed(selectedDate) && timeAllowed(selectedDate)) {
+                    emit(working);
+                    setText(display(working));
+                    setOpen(false);
+                  }
+                },
+                children: t("dataEntry.timePicker.confirm")
+              }
+            ) }) : null,
+            renderExtraFooter?.()
+          ]
+        }
+      )
+    ] }) })
+  ] });
 }
 export {
   DatePicker

package/dist/components/data-entry/date-range-picker.d.ts

@@ -8,4 +8,4 @@ export type { DateRangePickerProp, DateRangePickerProp as DateRangePickerProps,
  * `${name}_to`, screen-reader friendly, e2e-testable by filling either input); the
  * range calendar is the visual affordance.
  */
-export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, allowClear, ...ariaProps }: DateRangePickerProp): React.JSX.Element;
+export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, disabledDate, cellRender, allowClear, format, parseFormat, minDate, maxDate, showWeek, presets, needConfirm, allowEmpty, order, open: openProp, defaultOpen, onOpenChange, inputReadOnly, preserveInvalidOnBlur, placement, renderExtraFooter, size, status, variant, ref, ...ariaProps }: DateRangePickerProp): React.JSX.Element;