@dloizides/ui-forms 1.16.0 → 1.18.0

package/dist/index.mjs

@@ -454,7 +454,13 @@ var controlStyles = StyleSheet.create({
     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 }
 });
@@ -958,10 +964,13 @@ var OUTLINE_PAD_H = 12;
 var OUTLINE_PAD_V = 5;
 var OUTLINE_FONT_SIZE = 13;
 var CHIP_ICON_GAP = 6;
+var MIN_TARGET_PX = 44;
 var chipStyles = StyleSheet.create({
   chip: {
     paddingHorizontal: 12,
     paddingVertical: 6,
+    minHeight: MIN_TARGET_PX,
+    justifyContent: "center",
     borderRadius: SOLID_RADIUS,
     backgroundColor: TRANSPARENT_COLOR,
     borderWidth: 1
@@ -969,6 +978,8 @@ var chipStyles = StyleSheet.create({
   chipOutline: {
     paddingHorizontal: OUTLINE_PAD_H,
     paddingVertical: OUTLINE_PAD_V,
+    minHeight: MIN_TARGET_PX,
+    justifyContent: "center",
     borderRadius: OUTLINE_RADIUS,
     borderWidth: 1
   },
@@ -1251,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
@@ -1275,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(() => {
@@ -1282,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"];
@@ -1321,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,
@@ -1398,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: [