@scripso-homepad/ui 0.4.31 → 0.4.34

package/dist/index.d.cts

@@ -231,6 +231,10 @@ type DatePickerFieldProps = {
     hintClassName?: string;
     /** Opens the calendar popup on mount (useful for Storybook previews). */
     defaultOpen?: boolean;
+    /** Controlled open state for the calendar popup. */
+    open?: boolean;
+    /** Called when the calendar popup opens or closes. */
+    onOpenChange?: (open: boolean) => void;
     /** Closes the popup after a complete range is selected. Defaults to true in range mode. */
     closeOnRangeComplete?: boolean;
 };

package/dist/index.d.ts

@@ -231,6 +231,10 @@ type DatePickerFieldProps = {
     hintClassName?: string;
     /** Opens the calendar popup on mount (useful for Storybook previews). */
     defaultOpen?: boolean;
+    /** Controlled open state for the calendar popup. */
+    open?: boolean;
+    /** Called when the calendar popup opens or closes. */
+    onOpenChange?: (open: boolean) => void;
     /** Closes the popup after a complete range is selected. Defaults to true in range mode. */
     closeOnRangeComplete?: boolean;
 };

package/dist/index.js

@@ -1476,7 +1476,7 @@ var calendarDropdownMetrics = StyleSheet.create({
       boxSizing: "border-box"
     } : null
   },
-  dayCellPast: {
+  dayCellDisabled: {
     backgroundColor: colors.stormGray50
   },
   dayCellSelected: {
@@ -1599,6 +1599,10 @@ function resolveCalendarDropdownLeft(anchor, panelWidth = CALENDAR_PANEL_WIDTH)
   const maxLeft = Math.max(0, windowWidth - panelWidth);
   return Math.max(0, Math.min(anchor.x, maxLeft));
 }
+function resolveCalendarDropdownLeftCentered(panelWidth = CALENDAR_PANEL_WIDTH) {
+  const windowWidth = Dimensions.get("window").width;
+  return Math.max(0, (windowWidth - panelWidth) / 2);
+}
 var calendarFieldMetrics = StyleSheet.create({
   container: {
     flexDirection: "row",
@@ -2015,10 +2019,9 @@ function resolveDayCellStyle(day) {
   if (day.isSelected) {
     return [calendarDropdownMetrics.dayCell, calendarDropdownMetrics.dayCellSelected];
   }
-  const useMutedBackground = day.inCurrentMonth && !day.isToday && (day.isPast || day.isDisabled);
   return [
     calendarDropdownMetrics.dayCell,
-    useMutedBackground ? calendarDropdownMetrics.dayCellPast : null
+    day.isDisabled ? calendarDropdownMetrics.dayCellDisabled : null
   ];
 }
 function resolveDayLabelStyle(day) {
@@ -2031,7 +2034,7 @@ function resolveDayLabelStyle(day) {
   if (day.isToday) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelToday];
   }
-  if (day.isPast || day.isDisabled) {
+  if (day.isDisabled) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelMuted];
   }
   return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelFuture];
@@ -2309,6 +2312,7 @@ function CalendarIcon({
     }
   ) });
 }
+var isDesktopCalendar = Platform.OS === "web";
 function DatePicker(props) {
   const {
     label,
@@ -2334,7 +2338,9 @@ function DatePicker(props) {
     labelClassName,
     errorClassName,
     hintClassName,
-    defaultOpen = false
+    defaultOpen = false,
+    open: controlledOpen,
+    onOpenChange
   } = props;
   const mode = props.mode ?? "single";
   const closeOnRangeComplete = props.mode === "range" ? props.closeOnRangeComplete ?? true : false;
@@ -2344,11 +2350,18 @@ function DatePicker(props) {
   const wrapperRef = useRef(null);
   const triggerRef = useRef(null);
   const helperRef = useRef(null);
-  const [open, setOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
   const [anchor, setAnchor] = useState(null);
   useApplyWebClassName(wrapperRef, className);
   useApplyWebClassName(triggerRef, fieldClassName);
   useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  useEffect(() => {
+    if (!open) {
+      setAnchor(null);
+    }
+  }, [open]);
   useEffect(() => {
     if (!defaultOpen || disabled) {
       return;
@@ -2356,7 +2369,7 @@ function DatePicker(props) {
     const frame = requestAnimationFrame(() => {
       triggerRef.current?.measureInWindow((x, y, width, height) => {
         setAnchor({ x, y, width, height });
-        setOpen(true);
+        setOpenState(true);
       });
     });
     return () => cancelAnimationFrame(frame);
@@ -2391,11 +2404,16 @@ function DatePicker(props) {
   };
   const helperMessage = error ?? hint;
   const panelWidth = CALENDAR_PANEL_WIDTH;
-  const panelLeft = anchor ? resolveCalendarDropdownLeft(anchor, panelWidth) : 0;
+  const panelLeft = anchor ? isDesktopCalendar ? resolveCalendarDropdownLeft(anchor, panelWidth) : resolveCalendarDropdownLeftCentered(panelWidth) : 0;
   const dropdownTop = anchor ? resolveCalendarDropdownTop(anchor) : 0;
-  const resolvedDefaultViewDate = defaultViewDate ?? (props.mode === "range" ? props.value?.start : props.value) ?? today;
+  function setOpenState(next) {
+    if (!isControlled) {
+      setUncontrolledOpen(next);
+    }
+    onOpenChange?.(next);
+  }
   function closePicker() {
-    setOpen(false);
+    setOpenState(false);
     setAnchor(null);
   }
   function openPicker() {
@@ -2404,9 +2422,10 @@ function DatePicker(props) {
     }
     triggerRef.current?.measureInWindow((x, y, width, height) => {
       setAnchor({ x, y, width, height });
-      setOpen(true);
+      setOpenState(true);
     });
   }
+  const resolvedDefaultViewDate = defaultViewDate ?? (props.mode === "range" ? props.value?.start : props.value) ?? today;
   function handleSingleSelect(date) {
     if (props.mode === "range") {
       return;
@@ -2476,64 +2495,76 @@ function DatePicker(props) {
           }
         ),
         helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles5.error : styles5.hint, children: helperMessage }) : null,
-        /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxs(View, { style: styles5.modalRoot, children: [
-          /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              style: styles5.backdrop,
-              onPress: closePicker,
-              accessibilityRole: "button",
-              accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
-            }
-          ),
-          anchor ? /* @__PURE__ */ jsx(
-            View,
-            {
-              style: [
-                styles5.panelPosition,
-                {
-                  top: dropdownTop,
-                  left: panelLeft,
-                  width: panelWidth,
-                  height: CALENDAR_PANEL_HEIGHT
-                }
-              ],
-              children: props.mode === "range" ? /* @__PURE__ */ jsx(
-                Calendar,
+        /* @__PURE__ */ jsx(
+          Modal,
+          {
+            visible: open,
+            transparent: true,
+            animationType: "fade",
+            onRequestClose: closePicker,
+            statusBarTranslucent: true,
+            ...Platform.OS === "ios" ? { presentationStyle: "overFullScreen" } : null,
+            children: /* @__PURE__ */ jsxs(View, { style: styles5.modalRoot, children: [
+              /* @__PURE__ */ jsx(
+                Pressable,
                 {
-                  mode: "range",
-                  value: props.value,
-                  onChange: handleRangeSelect,
-                  viewDate,
-                  defaultViewDate: resolvedDefaultViewDate,
-                  onViewDateChange,
-                  locale: resolvedLocale,
-                  labels,
-                  minDate,
-                  maxDate,
-                  today,
-                  className: panelClassName
+                  style: styles5.backdrop,
+                  onPress: closePicker,
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
                 }
-              ) : /* @__PURE__ */ jsx(
-                Calendar,
+              ),
+              anchor ? /* @__PURE__ */ jsx(
+                View,
                 {
-                  mode: "single",
-                  value: props.value,
-                  onChange: handleSingleSelect,
-                  viewDate,
-                  defaultViewDate: resolvedDefaultViewDate,
-                  onViewDateChange,
-                  locale: resolvedLocale,
-                  labels,
-                  minDate,
-                  maxDate,
-                  today,
-                  className: panelClassName
+                  pointerEvents: "box-none",
+                  style: [
+                    styles5.panelPosition,
+                    {
+                      top: dropdownTop,
+                      left: panelLeft,
+                      width: panelWidth,
+                      height: CALENDAR_PANEL_HEIGHT
+                    }
+                  ],
+                  children: /* @__PURE__ */ jsx(View, { pointerEvents: "auto", children: props.mode === "range" ? /* @__PURE__ */ jsx(
+                    Calendar,
+                    {
+                      mode: "range",
+                      value: props.value,
+                      onChange: handleRangeSelect,
+                      viewDate,
+                      defaultViewDate: resolvedDefaultViewDate,
+                      onViewDateChange,
+                      locale: resolvedLocale,
+                      labels,
+                      minDate,
+                      maxDate,
+                      today,
+                      className: panelClassName
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Calendar,
+                    {
+                      mode: "single",
+                      value: props.value,
+                      onChange: handleSingleSelect,
+                      viewDate,
+                      defaultViewDate: resolvedDefaultViewDate,
+                      onViewDateChange,
+                      locale: resolvedLocale,
+                      labels,
+                      minDate,
+                      maxDate,
+                      today,
+                      className: panelClassName
+                    }
+                  ) })
                 }
-              )
-            }
-          ) : null
-        ] }) })
+              ) : null
+            ] })
+          }
+        )
       ]
     }
   );
@@ -2573,11 +2604,14 @@ var styles5 = StyleSheet.create({
     flexShrink: 0
   },
   modalRoot: {
-    flex: 1
+    flex: 1,
+    width: "100%",
+    height: "100%"
   },
   backdrop: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: colors.transparent
+    backgroundColor: "rgba(0, 0, 0, 0.35)",
+    zIndex: 0
   },
   panelPosition: {
     position: "absolute",