@scripso-homepad/ui 0.4.31 → 0.4.34

package/dist/index.cjs

@@ -2420,7 +2420,7 @@ var calendarDropdownMetrics = reactNative.StyleSheet.create({
       boxSizing: "border-box"
     } : null
   },
-  dayCellPast: {
+  dayCellDisabled: {
     backgroundColor: colors.stormGray50
   },
   dayCellSelected: {
@@ -2543,6 +2543,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 = reactNative.Dimensions.get("window").width;
+  return Math.max(0, (windowWidth - panelWidth) / 2);
+}
 var calendarFieldMetrics = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
@@ -2959,10 +2963,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) {
@@ -2975,7 +2978,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];
@@ -3253,6 +3256,7 @@ function CalendarIcon({
     }
   ) });
 }
+var isDesktopCalendar = reactNative.Platform.OS === "web";
 function DatePicker(props) {
   const {
     label,
@@ -3278,7 +3282,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;
@@ -3288,11 +3294,18 @@ function DatePicker(props) {
   const wrapperRef = react.useRef(null);
   const triggerRef = react.useRef(null);
   const helperRef = react.useRef(null);
-  const [open, setOpen] = react.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
   const [anchor, setAnchor] = react.useState(null);
   useApplyWebClassName(wrapperRef, className);
   useApplyWebClassName(triggerRef, fieldClassName);
   useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  react.useEffect(() => {
+    if (!open) {
+      setAnchor(null);
+    }
+  }, [open]);
   react.useEffect(() => {
     if (!defaultOpen || disabled) {
       return;
@@ -3300,7 +3313,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);
@@ -3335,11 +3348,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() {
@@ -3348,9 +3366,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;
@@ -3420,64 +3439,76 @@ function DatePicker(props) {
           }
         ),
         helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles8.error : styles8.hint, children: helperMessage }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.modalRoot, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.Pressable,
-            {
-              style: styles8.backdrop,
-              onPress: closePicker,
-              accessibilityRole: "button",
-              accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
-            }
-          ),
-          anchor ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.View,
-            {
-              style: [
-                styles8.panelPosition,
-                {
-                  top: dropdownTop,
-                  left: panelLeft,
-                  width: panelWidth,
-                  height: CALENDAR_PANEL_HEIGHT
-                }
-              ],
-              children: props.mode === "range" ? /* @__PURE__ */ jsxRuntime.jsx(
-                Calendar,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Modal,
+          {
+            visible: open,
+            transparent: true,
+            animationType: "fade",
+            onRequestClose: closePicker,
+            statusBarTranslucent: true,
+            ...reactNative.Platform.OS === "ios" ? { presentationStyle: "overFullScreen" } : null,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.modalRoot, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Pressable,
                 {
-                  mode: "range",
-                  value: props.value,
-                  onChange: handleRangeSelect,
-                  viewDate,
-                  defaultViewDate: resolvedDefaultViewDate,
-                  onViewDateChange,
-                  locale: resolvedLocale,
-                  labels,
-                  minDate,
-                  maxDate,
-                  today,
-                  className: panelClassName
+                  style: styles8.backdrop,
+                  onPress: closePicker,
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                Calendar,
+              ),
+              anchor ? /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.View,
                 {
-                  mode: "single",
-                  value: props.value,
-                  onChange: handleSingleSelect,
-                  viewDate,
-                  defaultViewDate: resolvedDefaultViewDate,
-                  onViewDateChange,
-                  locale: resolvedLocale,
-                  labels,
-                  minDate,
-                  maxDate,
-                  today,
-                  className: panelClassName
+                  pointerEvents: "box-none",
+                  style: [
+                    styles8.panelPosition,
+                    {
+                      top: dropdownTop,
+                      left: panelLeft,
+                      width: panelWidth,
+                      height: CALENDAR_PANEL_HEIGHT
+                    }
+                  ],
+                  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "auto", children: props.mode === "range" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    Calendar,
+                    {
+                      mode: "range",
+                      value: props.value,
+                      onChange: handleRangeSelect,
+                      viewDate,
+                      defaultViewDate: resolvedDefaultViewDate,
+                      onViewDateChange,
+                      locale: resolvedLocale,
+                      labels,
+                      minDate,
+                      maxDate,
+                      today,
+                      className: panelClassName
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    Calendar,
+                    {
+                      mode: "single",
+                      value: props.value,
+                      onChange: handleSingleSelect,
+                      viewDate,
+                      defaultViewDate: resolvedDefaultViewDate,
+                      onViewDateChange,
+                      locale: resolvedLocale,
+                      labels,
+                      minDate,
+                      maxDate,
+                      today,
+                      className: panelClassName
+                    }
+                  ) })
                 }
-              )
-            }
-          ) : null
-        ] }) })
+              ) : null
+            ] })
+          }
+        )
       ]
     }
   );
@@ -3517,11 +3548,14 @@ var styles8 = reactNative.StyleSheet.create({
     flexShrink: 0
   },
   modalRoot: {
-    flex: 1
+    flex: 1,
+    width: "100%",
+    height: "100%"
   },
   backdrop: {
     ...reactNative.StyleSheet.absoluteFillObject,
-    backgroundColor: colors.transparent
+    backgroundColor: "rgba(0, 0, 0, 0.35)",
+    zIndex: 0
   },
   panelPosition: {
     position: "absolute",