@dloizides/ui-forms 1.18.0 → 1.18.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.18.2
+
+**FormSwitch: the switch now sits in a 44x44 (MIN_TOUCH_TARGET_PX) pressable slot on web.**
+
+Visual QA on kefi-web Site settings (360 and 1280) measured the switch at 40x20: react-native-web sizes the
+native input to the Switch root, and `hitSlop` is inert on web. The switch is now centred in a slot with
+`minWidth`/`minHeight` MIN_TOUCH_TARGET_PX inside the pressable row, so the row stays at least 44 tall even when a
+`containerStyle` overrides `minHeight`. The track and thumb are unchanged; the switch gains a few px of horizontal gutter.
+New testID: `<testID>-hitbox`.
+
 ## 1.17.0
 
 **Chips now have a 44px minimum touch target on web. `hitSlop` never did that — it is native-only.**

package/dist/index.d.mts

@@ -934,7 +934,7 @@ declare const controlStyles: {
         borderWidth: number;
         borderRadius: number;
         paddingVertical: number;
-        zIndex: number;
+        zIndex: 1000;
         boxShadow: string;
         elevation: number;
         overflow: "hidden";

package/dist/index.d.ts

@@ -934,7 +934,7 @@ declare const controlStyles: {
         borderWidth: number;
         borderRadius: number;
         paddingVertical: number;
-        zIndex: number;
+        zIndex: 1000;
         boxShadow: string;
         elevation: number;
         overflow: "hidden";

package/dist/index.js

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var uiButtons = require('@dloizides/ui-buttons');
 var reactDom = require('react-dom');
 var a11y = require('@dloizides/a11y');
+var designTokens = require('@dloizides/design-tokens');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -398,7 +399,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;
@@ -455,7 +455,7 @@ var controlStyles = reactNative.StyleSheet.create({
     borderWidth: INPUT_BORDER,
     borderRadius: MENU_RADIUS,
     paddingVertical: MENU_PAD_V,
-    zIndex: MENU_Z,
+    zIndex: designTokens.Z_INDEX.dropdown,
     boxShadow: MENU_BOX_SHADOW,
     elevation: MENU_ELEVATION,
     overflow: "hidden"
@@ -471,7 +471,7 @@ var controlStyles = reactNative.StyleSheet.create({
   error: { fontSize: ERROR_FONT, marginTop: ERROR_GAP }
 });
 var IS_WEB3 = reactNative.Platform.OS === "web";
-var MENU_PORTAL_Z_INDEX = 1e3;
+var MENU_PORTAL_Z_INDEX = designTokens.Z_INDEX.popover;
 var MENU_TOP_GAP2 = 4;
 function toDomNode(ref) {
   const node = ref.current;
@@ -1273,6 +1273,12 @@ var styles6 = reactNative.StyleSheet.create({
     // `hitSlop`, so a pointer target smaller than the floor cannot be widened any other way.
     minHeight: a11y.MIN_TOUCH_TARGET_PX
   },
+  switchSlot: {
+    minWidth: a11y.MIN_TOUCH_TARGET_PX,
+    minHeight: a11y.MIN_TOUCH_TARGET_PX,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   textColumn: {
     flex: 1
   },
@@ -1326,7 +1332,7 @@ var FormSwitch = ({
             /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, themeStyles.label], children: label }),
             hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.description, themeStyles.description], children: description }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles6.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Switch,
             {
               accessibilityHint: accessibilityHint ?? label,