@multiplatform.one/forms 7.6.3 → 7.7.0

package/dist/cjs/fields/DatePicker/DatetimePicker.cjs

@@ -22,381 +22,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var DatetimePicker_exports = {};
 __export(DatetimePicker_exports, {
-  DatetimePicker: () => DatetimePicker
+  DatetimePicker: () => import_DatetimePicker.DatetimePicker
 });
 module.exports = __toCommonJS(DatetimePicker_exports);
-var import_theme = require("@multiplatform.one/theme");
-var import_react = require("react");
-var import_utils = require("./utils.cjs");
-var import_fieldValueSync = require("./fieldValueSync.cjs");
-var import_tamagui = require("tamagui");
-var import_fieldLayout = require("../../fieldLayout.cjs");
-var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
-var import_t = require("../../shared/t.cjs");
-var import_TimeColumn = require("../../shared/TimeColumn.cjs");
-var import_utils2 = require("../../shared/utils.cjs");
-var import_InputParts = require("../../InputParts/index.cjs");
-var import_Skeleton = require("../../Skeleton/index.cjs");
-var import_parts = require("./parts.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-function parseTimeFromDate(date) {
-  return {
-    h: date.getHours(),
-    m: date.getMinutes(),
-    s: date.getSeconds()
-  };
-}
-function formatDatetimeDisplay(date, timeFormat, showSeconds) {
-  if (!date) return "";
-  return (0, import_theme.formatAbsoluteDateTime)(date, {
-    year: "always",
-    hour12: timeFormat === "12h",
-    seconds: showSeconds
-  });
-}
-function DayGrid({
-  calendarData,
-  selectedDate,
-  onSelectDate,
-  minDate,
-  maxDate
-}) {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarDays, {
-    calendarData,
-    minDate,
-    maxDate,
-    isSelected: day => (0, import_parts.isSameDay)(selectedDate, day),
-    onSelect: onSelectDate,
-    onToday: () => onSelectDate(/* @__PURE__ */new Date())
-  });
-}
-function TimeSection({
-  selectedDate,
-  onTimeChange,
-  timeFormat,
-  minuteStep,
-  showSeconds
-}) {
-  const {
-    h,
-    m,
-    s
-  } = parseTimeFromDate(selectedDate);
-  const handleChange = (0, import_react.useCallback)((hour24, minute, second) => {
-    const next = new Date(selectedDate);
-    next.setHours(hour24, minute, second);
-    onTimeChange(next);
-  }, [onTimeChange, selectedDate]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TimeColumn.TimeWheels, {
-    hour24: h,
-    minute: m,
-    second: s,
-    timeFormat,
-    minuteStep,
-    showSeconds,
-    onChange: handleChange
-  });
-}
-function DatetimePickerBody({
-  displayDate,
-  selectedDatetime,
-  onSelectDatetime,
-  onNavigateMonth,
-  onSetDisplayDate,
-  minDate,
-  maxDate,
-  timeFormat,
-  minuteStep,
-  showSeconds
-}) {
-  const {
-    knobProps
-  } = (0, import_parts.useCalendarKnobs)();
-  const {
-    px
-  } = knobProps.nestedControl;
-  const [viewMode, setViewMode] = (0, import_react.useState)("day");
-  const [activeTab, setActiveTab] = (0, import_react.useState)("date");
-  const calendarData = (0, import_parts.useCalendarData)(displayDate);
-  const [yearPageStart, setYearPageStart] = (0, import_react.useState)(() => calendarData.year - calendarData.year % import_parts.yearPageSize);
-  const handleDateSelect = (0, import_react.useCallback)(date => {
-    if (selectedDatetime) {
-      date.setHours(selectedDatetime.getHours(), selectedDatetime.getMinutes(), selectedDatetime.getSeconds());
-    }
-    onSelectDatetime(date);
-    setActiveTab("time");
-  }, [selectedDatetime, onSelectDatetime]);
-  const handleTimeChange = (0, import_react.useCallback)(date => {
-    onSelectDatetime(date);
-  }, [onSelectDatetime]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    flexDirection: "column",
-    alignItems: "center",
-    ...knobProps.gap,
-    width: activeTab === "date" ? px * 7 : "100%",
-    minWidth: px * 7,
-    alignSelf: activeTab === "date" ? "center" : "stretch",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      flexDirection: "row",
-      width: "100%",
-      children: ["date", "time"].map(tab => {
-        const active = activeTab === tab;
-        const tabDisabled = tab === "time" && !selectedDatetime;
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          flex: 1,
-          height: px,
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: tabDisabled ? "default" : "pointer",
-          opacity: tabDisabled ? 0.5 : 1,
-          theme: active ? "accent" : void 0,
-          backgroundColor: active ? "$background" : "transparent",
-          onPress: () => {
-            if (!tabDisabled) setActiveTab(tab);
-          },
-          "data-nested-px": px,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            ...knobProps.label,
-            ...knobProps.textWeight,
-            fontWeight: active ? "600" : "400",
-            children: tab === "date" ? (0, import_t.t)("Date") : (0, import_t.t)("Time")
-          })
-        }, tab);
-      })
-    }), activeTab === "date" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarViewSwitcher, {
-      calendarData,
-      displayDate,
-      onSetDisplayDate,
-      viewMode,
-      setViewMode,
-      yearPageStart,
-      setYearPageStart,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_parts.CalendarPanelFrame, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarHeader, {
-          year: calendarData.year,
-          monthName: calendarData.monthName,
-          onPrevMonth: () => onNavigateMonth("prev"),
-          onNextMonth: () => onNavigateMonth("next"),
-          onYearPress: () => {
-            setYearPageStart(calendarData.year - calendarData.year % import_parts.yearPageSize);
-            setViewMode("year");
-          },
-          onMonthPress: () => setViewMode("month")
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DayGrid, {
-          calendarData,
-          selectedDate: selectedDatetime,
-          onSelectDate: handleDateSelect,
-          minDate,
-          maxDate
-        })]
-      })
-    }) : selectedDatetime && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      width: "100%",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeSection, {
-        selectedDate: selectedDatetime,
-        onTimeChange: handleTimeChange,
-        timeFormat,
-        minuteStep,
-        showSeconds
-      })
-    })]
-  });
-}
-function DatetimePicker(props) {
-  const {
-    defaultValue,
-    value: controlledValue,
-    onChange,
-    onValueChange,
-    form,
-    inputProps: _inputProps,
-    placeholder = (0, import_t.t)("Select date and time"),
-    minDate,
-    maxDate,
-    disabled,
-    mode,
-    name,
-    preserveValue,
-    validators,
-    label,
-    labelProps,
-    error: errorProp,
-    helperText,
-    required,
-    size,
-    readOnly,
-    onBlur: _onBlur,
-    timeFormat = "12h",
-    minuteStep = 5,
-    showSeconds = false,
-    skeleton,
-    compact,
-    id: idProp,
-    ..._restProps
-  } = (0, import_tamagui.useProps)(props);
-  const {
-    resolvedForm,
-    knobProps,
-    id
-  } = (0, import_utils2.useFormField)({
-    form,
-    id: idProp,
-    compact
-  });
-  const resolvedValidators = (0, import_utils2.useResolvedValidators)(required, validators, label, name);
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const [selectedDatetime, setSelectedDatetime] = (0, import_react.useState)(() => (0, import_utils.coerceToDate)(controlledValue ?? defaultValue));
-  (0, import_react.useEffect)(() => {
-    if (controlledValue === void 0) return;
-    setSelectedDatetime((0, import_utils.coerceToDate)(controlledValue));
-  }, [controlledValue]);
-  const {
-    displayDate,
-    setDisplayDate,
-    navigateMonth
-  } = (0, import_parts.useDateNavigation)(selectedDatetime ?? void 0);
-  const selectedDatetimeRef = (0, import_react.useRef)(selectedDatetime);
-  selectedDatetimeRef.current = selectedDatetime;
-  const openPicker = (0, import_react.useCallback)(() => {
-    const seed = selectedDatetimeRef.current;
-    if (seed) setDisplayDate(seed);
-    setOpen(true);
-  }, [setDisplayDate]);
-  const handleDatetimeSelect = (0, import_react.useCallback)((date, fieldChange) => {
-    if (minDate && date < minDate) return;
-    if (maxDate && date > maxDate) return;
-    setSelectedDatetime(date);
-    setDisplayDate(date);
-    fieldChange?.(date);
-    onChange?.(date);
-    onValueChange?.(date);
-  }, [minDate, maxDate, setDisplayDate, onChange, onValueChange]);
-  const handleClearDatetime = (0, import_react.useCallback)(fieldChange => {
-    setSelectedDatetime(null);
-    setDisplayDate(/* @__PURE__ */new Date());
-    fieldChange?.(null);
-    onChange?.(null);
-    onValueChange?.(null);
-  }, [setDisplayDate, onChange, onValueChange]);
-  const displayValue = (0, import_react.useMemo)(() => formatDatetimeDisplay(selectedDatetime, timeFormat, showSeconds), [selectedDatetime, timeFormat, showSeconds]);
-  const pickerContent = fieldChange => /* @__PURE__ */(0, import_jsx_runtime.jsx)(DatetimePickerBody, {
-    displayDate,
-    selectedDatetime,
-    onSelectDatetime: date => handleDatetimeSelect(date, fieldChange),
-    onNavigateMonth: navigateMonth,
-    onSetDisplayDate: setDisplayDate,
-    minDate,
-    maxDate,
-    timeFormat,
-    minuteStep,
-    showSeconds
-  });
-  const renderTrigger = (value, hasError, fieldChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerInputTrigger, {
-    value,
-    placeholder,
-    disabled,
-    open,
-    onReset: () => handleClearDatetime(fieldChange),
-    onButtonPress: openPicker,
-    error: !!hasError,
-    id,
-    "aria-label": label ? void 0 : (0, import_t.t)("Date and time"),
-    "aria-required": required || void 0,
-    "aria-invalid": hasError || void 0
-  });
-  const renderPopover = (hasError, blurHandler, fieldChange) => {
-    if (readOnly) {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-          value: displayValue,
-          readOnly: true,
-          id,
-          "aria-label": label ? void 0 : (0, import_t.t)("Date and time"),
-          "aria-readonly": "true",
-          "aria-required": required || void 0,
-          "aria-invalid": hasError || void 0,
-          placeholder
-        })
-      });
-    }
-    const handleOpenChange = isOpen => {
-      if (isOpen && selectedDatetimeRef.current) setDisplayDate(selectedDatetimeRef.current);
-      setOpen(isOpen);
-      if (!isOpen) blurHandler?.();
-    };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
-      open,
-      onOpenChange: handleOpenChange,
-      trigger: renderTrigger(displayValue, hasError, fieldChange),
-      triggerEnd: !import_tamagui.isWeb && displayValue ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerClearButton, {
-        onReset: () => handleClearDatetime(fieldChange),
-        disabled
-      }) : void 0,
-      disabled,
-      sizing: "grow",
-      widthMode: "at-least-trigger",
-      children: pickerContent(fieldChange)
-    });
-  };
-  if (skeleton) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-      id,
-      label,
-      size,
-      knobProps,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: knobProps.sizeToken
-      })
-    });
-  }
-  if (!resolvedForm || !name) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-      id,
-      label,
-      labelProps,
-      error: errorProp,
-      helperText,
-      required,
-      size,
-      knobProps,
-      disabled,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-        size: size || knobProps.sizeToken,
-        children: renderPopover(!!errorProp)
-      })
-    });
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
-    defaultValue,
-    form: resolvedForm,
-    mode,
-    name,
-    preserveValue,
-    validators: resolvedValidators,
-    children: field => {
-      const resolvedError = (0, import_utils2.getFieldError)(field, errorProp);
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldValueSync.DatePickerFieldValueSync, {
-          value: field.state.value,
-          onSync: setSelectedDatetime
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-          id,
-          label,
-          labelProps,
-          error: resolvedError,
-          helperText,
-          required,
-          size,
-          knobProps,
-          disabled,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-            size: size || knobProps.sizeToken,
-            children: renderPopover(!!resolvedError, (0, import_utils2.mergeFieldHandler)(field, "handleBlur", _onBlur), (0, import_utils2.mergeFieldHandler)(field, "handleChange"))
-          })
-        })]
-      });
-    }
-  });
-}
+var import_DatetimePicker = require("./DatetimePicker.catalog");