@scripso-homepad/ui 0.4.33 → 0.4.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.33",
+  "version": "0.4.35",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/DatePicker.tsx

@@ -61,6 +61,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;
 };
@@ -108,6 +112,8 @@ export function DatePicker(props: DatePickerProps) {
     errorClassName,
     hintClassName,
     defaultOpen = false,
+    open: controlledOpen,
+    onOpenChange,
   } = props;
   const mode = props.mode ?? "single";
   const closeOnRangeComplete =
@@ -119,7 +125,9 @@ export function DatePicker(props: DatePickerProps) {
   const wrapperRef = useRef<ComponentRef<typeof View>>(null);
   const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);
   const helperRef = useRef<ComponentRef<typeof Text>>(null);
-  const [open, setOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
   const [anchor, setAnchor] = useState<{
     x: number;
     y: number;
@@ -131,6 +139,12 @@ export function DatePicker(props: DatePickerProps) {
   useApplyWebClassName(triggerRef, fieldClassName);
   useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
 
+  useEffect(() => {
+    if (!open) {
+      setAnchor(null);
+    }
+  }, [open]);
+
   useEffect(() => {
     if (!defaultOpen || disabled) {
       return;
@@ -139,7 +153,7 @@ export function DatePicker(props: DatePickerProps) {
     const frame = requestAnimationFrame(() => {
       triggerRef.current?.measureInWindow((x, y, width, height) => {
         setAnchor({ x, y, width, height });
-        setOpen(true);
+        setOpenState(true);
       });
     });
 
@@ -195,8 +209,16 @@ export function DatePicker(props: DatePickerProps) {
     : 0;
   const dropdownTop = anchor ? resolveCalendarDropdownTop(anchor) : 0;
 
+  function setOpenState(next: boolean) {
+    if (!isControlled) {
+      setUncontrolledOpen(next);
+    }
+
+    onOpenChange?.(next);
+  }
+
   function closePicker() {
-    setOpen(false);
+    setOpenState(false);
     setAnchor(null);
   }
 
@@ -207,7 +229,7 @@ export function DatePicker(props: DatePickerProps) {
 
     triggerRef.current?.measureInWindow((x, y, width, height) => {
       setAnchor({ x, y, width, height });
-      setOpen(true);
+      setOpenState(true);
     });
   }
 
@@ -292,7 +314,14 @@ export function DatePicker(props: DatePickerProps) {
         </Text>
       ) : null}
 
-      <Modal visible={open} transparent animationType="fade" onRequestClose={closePicker}>
+      <Modal
+        visible={open}
+        transparent
+        animationType="fade"
+        onRequestClose={closePicker}
+        statusBarTranslucent
+        {...(Platform.OS === "ios" ? { presentationStyle: "overFullScreen" as const } : null)}
+      >
         <View style={styles.modalRoot}>
           <Pressable
             style={styles.backdrop}
@@ -302,6 +331,7 @@ export function DatePicker(props: DatePickerProps) {
           />
           {anchor ? (
             <View
+              pointerEvents="box-none"
               style={[
                 styles.panelPosition,
                 {
@@ -312,6 +342,7 @@ export function DatePicker(props: DatePickerProps) {
                 },
               ]}
             >
+              <View pointerEvents="auto">
               {props.mode === "range" ? (
                 <Calendar
                   mode="range"
@@ -343,6 +374,7 @@ export function DatePicker(props: DatePickerProps) {
                   className={panelClassName}
                 />
               )}
+              </View>
             </View>
           ) : null}
         </View>
@@ -387,10 +419,13 @@ const styles = StyleSheet.create({
   },
   modalRoot: {
     flex: 1,
+    width: "100%",
+    height: "100%",
   },
   backdrop: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: colors.transparent,
+    backgroundColor: "rgba(0, 0, 0, 0.35)",
+    zIndex: 0,
   },
   panelPosition: {
     position: "absolute",

package/src/web/components/TableActionsMenu.tsx

@@ -31,6 +31,8 @@ export type TableActionsMenuProps = {
   triggerAriaLabel: string;
   className?: string;
   menuClassName?: string;
+  /** Optional custom trigger icon. Defaults to TableMoreIcon. */
+  triggerIcon?: ReactNode;
   /** Dropdown menu width in pixels. Defaults to 231. Ignored when menuFitContent is true. */
   menuWidth?: number;
   /** Size the menu to its content width instead of a fixed pixel width. Defaults to true so labels stay on one line. */
@@ -73,6 +75,7 @@ export function TableActionsMenu({
   triggerAriaLabel,
   className,
   menuClassName,
+  triggerIcon,
   menuWidth = MENU_WIDTH_PX,
   menuFitContent = true,
 }: TableActionsMenuProps) {
@@ -193,13 +196,27 @@ export function TableActionsMenu({
               item.onSelect();
             }}
             className={cn(
-              'flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0',
+              'flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium transition-colors hover:bg-storm-gray-0',
               index > 0 && 'border-t border-storm-gray-50',
               item.disabled && 'cursor-not-allowed opacity-50',
+              item.tone === 'danger'
+                ? 'text-[#AE0011]'
+                : item.tone === 'success'
+                  ? 'text-green-600'
+                  : 'text-storm-gray-900',
             )}
           >
             {icon ? (
-              <span className="inline-flex size-5 shrink-0 items-center justify-center text-storm-gray-200">
+              <span
+                className={cn(
+                  'inline-flex size-5 shrink-0 items-center justify-center',
+                  item.tone === 'danger'
+                    ? 'text-[#AE0011]'
+                    : item.tone === 'success'
+                      ? 'text-green-600'
+                      : 'text-storm-gray-200',
+                )}
+              >
                 {icon}
               </span>
             ) : null}
@@ -215,7 +232,7 @@ export function TableActionsMenu({
       <TableActionButton
         ref={triggerRef}
         variant="menu"
-        icon={<TableMoreIcon className="size-5" />}
+        icon={triggerIcon ?? <TableMoreIcon className="size-5" />}
         ariaLabel={triggerAriaLabel}
         onClick={() => setOpen((current) => !current)}
         aria-expanded={open}