@scripso-homepad/ui 0.4.33 → 0.4.35

package/dist/index.cjs

@@ -3282,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;
@@ -3292,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;
@@ -3304,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);
@@ -3341,8 +3350,14 @@ function DatePicker(props) {
   const panelWidth = CALENDAR_PANEL_WIDTH;
   const panelLeft = anchor ? isDesktopCalendar ? resolveCalendarDropdownLeft(anchor, panelWidth) : resolveCalendarDropdownLeftCentered(panelWidth) : 0;
   const dropdownTop = anchor ? resolveCalendarDropdownTop(anchor) : 0;
+  function setOpenState(next) {
+    if (!isControlled) {
+      setUncontrolledOpen(next);
+    }
+    onOpenChange?.(next);
+  }
   function closePicker() {
-    setOpen(false);
+    setOpenState(false);
     setAnchor(null);
   }
   function openPicker() {
@@ -3351,7 +3366,7 @@ 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;
@@ -3424,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
+            ] })
+          }
+        )
       ]
     }
   );
@@ -3521,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",