@dloizides/ui-forms 1.17.0 → 1.18.1

package/dist/index.mjs

@@ -5,6 +5,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '@dloizides/ui-buttons';
 import { createPortal } from 'react-dom';
 import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
+import { Z_INDEX } from '@dloizides/design-tokens';
 
 // src/Field/Field.tsx
 function attachControlId(child, candidateId, describedById) {
@@ -392,7 +393,6 @@ var MENU_OPT_PAD_H = 12;
 var MENU_OPT_PAD_V = 8;
 var MENU_MIN_WIDTH = 160;
 var MENU_MAX_HEIGHT = 260;
-var MENU_Z = 1e3;
 var MENU_ELEVATION = 8;
 var MENU_BOX_SHADOW = "0px 2px 8px rgba(0, 0, 0, 0.15)";
 var OPTION_FONT = 14;
@@ -449,17 +449,23 @@ var controlStyles = StyleSheet.create({
     borderWidth: INPUT_BORDER,
     borderRadius: MENU_RADIUS,
     paddingVertical: MENU_PAD_V,
-    zIndex: MENU_Z,
+    zIndex: Z_INDEX.dropdown,
     boxShadow: MENU_BOX_SHADOW,
     elevation: MENU_ELEVATION,
     overflow: "hidden"
   },
-  option: { paddingHorizontal: MENU_OPT_PAD_H, paddingVertical: MENU_OPT_PAD_V },
+  /** A menu option is a tap target, so it carries the kit floor (SHOWCASE-1). */
+  option: {
+    minHeight: MIN_TOUCH_TARGET_PX,
+    justifyContent: "center",
+    paddingHorizontal: MENU_OPT_PAD_H,
+    paddingVertical: MENU_OPT_PAD_V
+  },
   optionText: { fontSize: OPTION_FONT },
   error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
 });
 var IS_WEB3 = Platform.OS === "web";
-var MENU_PORTAL_Z_INDEX = 1e3;
+var MENU_PORTAL_Z_INDEX = Z_INDEX.popover;
 var MENU_TOP_GAP2 = 4;
 function toDomNode(ref) {
   const node = ref.current;
@@ -1256,7 +1262,10 @@ var styles6 = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 12
+    marginBottom: 12,
+    // The ROW is the hit box (SHOWCASE-1): RN-web renders Switch as a 40x20 box and ignores
+    // `hitSlop`, so a pointer target smaller than the floor cannot be widened any other way.
+    minHeight: MIN_TOUCH_TARGET_PX
   },
   textColumn: {
     flex: 1
@@ -1280,6 +1289,9 @@ var FormSwitch = ({
   accessibilityHint
 }) => {
   const { theme } = useUi();
+  const toggle = React2.useCallback(() => {
+    if (!disabled) onValueChange(!value);
+  }, [disabled, onValueChange, value]);
   const { colors } = theme;
   const hasDescription = typeof description === "string" && description !== "";
   const themeStyles = React2.useMemo(() => {
@@ -1287,32 +1299,42 @@ var FormSwitch = ({
     const descriptionStyle = { color: colors.textSecondary };
     return { label: labelStyle, description: descriptionStyle };
   }, [colors.text, colors.textSecondary]);
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      style: [
-        styles6.container,
-        containerStyle
-      ],
-      children: [
-        /* @__PURE__ */ jsxs(View, { style: styles6.textColumn, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles6.label, themeStyles.label], children: label }),
-          hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles6.description, themeStyles.description], children: description }) : null
-        ] }),
-        /* @__PURE__ */ jsx(
-          Switch,
-          {
-            accessibilityHint: accessibilityHint ?? label,
-            accessibilityLabel: label,
-            accessibilityState: { checked: value, disabled },
-            disabled,
-            testID,
-            value,
-            onValueChange
-          }
-        )
-      ]
-    }
+  return (
+    /*
+      Pointer target only: the whole row toggles on press. It is NOT an a11y element and NOT a tab
+      stop (`accessible` / `focusable` false) so the native input below stays the ONE switch. The
+      Switch sits under `pointerEvents="none"`, so a tap on it reaches this row exactly once
+      instead of toggling twice; keyboard focus + Space still reach the input directly.
+    */
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessible: false,
+        disabled,
+        onPress: toggle,
+        style: [styles6.container, containerStyle],
+        tabIndex: -1,
+        testID: `${testID}-row`,
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: styles6.textColumn, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles6.label, themeStyles.label], children: label }),
+            hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles6.description, themeStyles.description], children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(View, { pointerEvents: "none", children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              accessibilityHint: accessibilityHint ?? label,
+              accessibilityLabel: label,
+              accessibilityState: { checked: value, disabled },
+              disabled,
+              testID,
+              value,
+              onValueChange
+            }
+          ) })
+        ]
+      }
+    )
   );
 };
 var ACTIVATION_KEYS = ["Enter", " ", "Spacebar"];
@@ -1326,7 +1348,14 @@ var styles7 = StyleSheet.create({
     flexDirection: "row",
     alignItems: "flex-start",
     gap: 10,
-    marginBottom: 12
+    marginBottom: 12,
+    // The whole row is the Pressable, so the row IS the hit box: on RN-web `hitSlop` is inert and a
+    // one-line label measured 36px tall (SHOWCASE-1). The 20px visual box keeps its size inside.
+    minHeight: MIN_TOUCH_TARGET_PX
+  },
+  /** With no hint the row is a single line, so centre it vertically inside the floor. */
+  centered: {
+    alignItems: "center"
   },
   box: {
     width: BOX_SIZE,
@@ -1403,7 +1432,12 @@ var FormCheckbox = ({
       disabled,
       onPress: toggle,
       role: "checkbox",
-      style: [styles7.container, containerStyle, disabled ? { opacity: DISABLED_OPACITY } : null],
+      style: [
+        styles7.container,
+        hasHint ? null : styles7.centered,
+        containerStyle,
+        disabled ? { opacity: DISABLED_OPACITY } : null
+      ],
       testID,
       ...keyboardProps,
       children: [