@dloizides/ui-forms 1.19.0 → 1.21.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import React2, { useState, useCallback, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
-import { Platform, StyleSheet, TextInput, View, Text, ScrollView, Pressable, Switch, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, TextInput, View, Text, useWindowDimensions, ScrollView, Pressable, Switch, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Z_INDEX, focusRingOutline, readableScaleInk } from '@dloizides/design-tokens';
 import { themeFocusRingColor, Button } from '@dloizides/ui-buttons';
 import { createPortal } from 'react-dom';
@@ -247,6 +247,7 @@ var FORM_GRID_DEFAULT_MIN_WIDTH = 220;
 var FORM_GRID_DEFAULT_BASIS = 260;
 var styles2 = StyleSheet.create({
   grid: {
+    alignItems: "flex-start",
     flexDirection: "row",
     flexWrap: "wrap"
   }
@@ -262,6 +263,36 @@ var FormGrid = ({
   const metrics = React2.useMemo(() => ({ minWidth, basis }), [minWidth, basis]);
   return /* @__PURE__ */ jsx(FormGridProvider, { value: metrics, children: /* @__PURE__ */ jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsx(View, { style: [styles2.grid, { gap }, style], testID, children }) }) });
 };
+var LABEL_LINE_PLACEHOLDER = "\xA0";
+var styles3 = StyleSheet.create({
+  labelLine: {
+    userSelect: "none"
+  }
+});
+var AlignToControl = ({
+  children,
+  labelVariant,
+  spacing,
+  style,
+  testID
+}) => {
+  const spacingStyles = fieldSpacingStyleSet(resolveFieldSpacing(spacing, useIsGapOwned()));
+  const labelLineTestID = testID !== void 0 ? `${testID}-label-line` : void 0;
+  return /* @__PURE__ */ jsxs(View, { style: [spacingStyles.container, style], testID, children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        accessibilityElementsHidden: true,
+        "aria-hidden": true,
+        importantForAccessibility: "no",
+        style: [spacingStyles.label, resolveLabelVariantStyle(labelVariant), styles3.labelLine],
+        testID: labelLineTestID,
+        children: LABEL_LINE_PLACEHOLDER
+      }
+    ),
+    children
+  ] });
+};
 var GROW = 1;
 var NO_GROW = 0;
 var FormCell = ({
@@ -269,6 +300,7 @@ var FormCell = ({
   minWidth,
   basis,
   grow = true,
+  alignToControl = false,
   style,
   testID
 }) => {
@@ -280,11 +312,54 @@ var FormCell = ({
     flexBasis: resolvedBasis,
     flexGrow: grow ? GROW : NO_GROW
   };
-  return /* @__PURE__ */ jsx(View, { style: [cellStyle, style], testID, children });
+  return /* @__PURE__ */ jsx(View, { style: [cellStyle, style], testID, children: alignToControl ? /* @__PURE__ */ jsx(AlignToControl, { children }) : children });
+};
+
+// src/InlineFieldRow/inlineFieldRowLayout.ts
+var INLINE_FIELD_ROW_MIN_WIDTH = 1024;
+function inlineFieldRowLayout(windowWidth, fieldMaxWidth, inlineMinWidth = INLINE_FIELD_ROW_MIN_WIDTH) {
+  const inline = windowWidth >= inlineMinWidth;
+  return { inline, fieldMaxWidth: inline ? fieldMaxWidth : void 0 };
+}
+var styles4 = StyleSheet.create({
+  action: {
+    flexShrink: 0
+  },
+  field: {
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  row: {
+    alignItems: "flex-start",
+    flexDirection: "row"
+  }
+});
+var InlineFieldRow = ({
+  field,
+  action,
+  fieldMaxWidth,
+  inlineMinWidth,
+  gap = FORM_GRID_DEFAULT_GAP,
+  testID
+}) => {
+  const { width } = useWindowDimensions();
+  const layout = inlineFieldRowLayout(width, fieldMaxWidth, inlineMinWidth);
+  const rowStyle = useMemo(() => [styles4.row, { gap }], [gap]);
+  const fieldStyle = useMemo(() => [styles4.field, { maxWidth: layout.fieldMaxWidth }], [layout.fieldMaxWidth]);
+  if (!layout.inline)
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      field,
+      action
+    ] });
+  return /* @__PURE__ */ jsxs(View, { style: rowStyle, testID, children: [
+    /* @__PURE__ */ jsx(View, { style: fieldStyle, children: field }),
+    /* @__PURE__ */ jsx(AlignToControl, { style: styles4.action, children: action })
+  ] });
 };
 var SECTION_GAP = 10;
 var DESCRIPTION_FONT_SIZE = 12;
-var styles3 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   section: {
     gap: SECTION_GAP
   },
@@ -319,7 +394,7 @@ var FormSection = ({
     // The section spaces its children with `gap`, so it owns their vertical rhythm exactly as a
     // `FormGrid` owns a row's — without this a `Field` placed directly in a section would stack its
     // 16px margin on the section's gap and recreate the F3 bug one level up.
-    /* @__PURE__ */ jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxs(View, { role: "group", style: [styles3.section, style], testID, ...a11y, children: [
+    /* @__PURE__ */ jsx(GapOwnedProvider, { value: true, children: /* @__PURE__ */ jsxs(View, { role: "group", style: [styles5.section, style], testID, ...a11y, children: [
       hasTitle ? /* @__PURE__ */ jsx(
         Text,
         {
@@ -328,13 +403,13 @@ var FormSection = ({
           children: title
         }
       ) : null,
-      hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles3.description, { color: colors.textSecondary }], children: description }) : null,
+      hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles5.description, { color: colors.textSecondary }], children: description }) : null,
       children
     ] }) })
   );
 };
 var ACTIONS_GAP = 12;
-var styles4 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "flex-end",
@@ -354,7 +429,7 @@ var FormActions = ({
   saveTestID = "save-button",
   cancelTestID = "cancel-button",
   testID
-}) => /* @__PURE__ */ jsxs(View, { style: [styles4.container, containerStyle], testID, children: [
+}) => /* @__PURE__ */ jsxs(View, { style: [styles6.container, containerStyle], testID, children: [
   typeof onCancel === "function" ? /* @__PURE__ */ jsx(
     Button,
     {
@@ -1174,7 +1249,7 @@ function chipIdentity(option, selected, config) {
     ariaChecked: isRadio ? selected : void 0
   };
 }
-var styles5 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   chipContainer: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -1260,7 +1335,7 @@ var ChipSelector = ({
         View,
         {
           accessibilityRole: isRadioGroup ? "radiogroup" : void 0,
-          style: styles5.chipContainer,
+          style: styles7.chipContainer,
           ...webFieldA11y({ describedById, hasError }),
           ...radio.groupProps,
           children: options.map(renderChip)
@@ -1270,7 +1345,7 @@ var ChipSelector = ({
   );
 };
 var DESCRIPTION_FONT_SIZE2 = 12;
-var styles6 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -1331,15 +1406,15 @@ var FormSwitch = ({
         accessible: false,
         disabled,
         onPress: toggle,
-        style: [styles6.container, containerStyle],
+        style: [styles8.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__ */ jsxs(View, { style: styles8.textColumn, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles8.label, themeStyles.label], children: label }),
+            hasDescription ? /* @__PURE__ */ jsx(Text, { style: [styles8.description, themeStyles.description], children: description }) : null
           ] }),
-          /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles6.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles8.switchSlot, testID: `${testID}-hitbox`, children: /* @__PURE__ */ jsx(
             Switch,
             {
               accessibilityHint: accessibilityHint ?? label,
@@ -1356,13 +1431,19 @@ var FormSwitch = ({
     )
   );
 };
+
+// src/FormCheckbox/checkboxColors.ts
+var checkboxBoxColors = (colors, brand, checked) => checked ? { backgroundColor: brand, borderColor: brand } : { backgroundColor: "transparent", borderColor: colors.textSecondary };
 var ACTIVATION_KEYS = ["Enter", " ", "Spacebar"];
 var HINT_FONT_SIZE2 = 12;
 var BOX_SIZE = 20;
 var BOX_RADIUS = 5;
 var CHECK_FONT_SIZE = 14;
 var DISABLED_OPACITY = 0.5;
-var styles7 = StyleSheet.create({
+var FOCUS_RING_WIDTH = 2;
+var WEB_NO_DEFAULT_OUTLINE = { outlineStyle: "none" };
+var FOCUS_RING_INSET = -6;
+var styles9 = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "flex-start",
@@ -1386,6 +1467,15 @@ var styles7 = StyleSheet.create({
     // Nudge the box to sit on the label's first text line.
     marginTop: 1
   },
+  focusRing: {
+    position: "absolute",
+    top: FOCUS_RING_INSET,
+    left: FOCUS_RING_INSET,
+    right: FOCUS_RING_INSET,
+    bottom: FOCUS_RING_INSET,
+    borderWidth: FOCUS_RING_WIDTH,
+    borderRadius: BOX_RADIUS - FOCUS_RING_INSET
+  },
   check: {
     fontSize: CHECK_FONT_SIZE,
     fontWeight: "700",
@@ -1421,13 +1511,15 @@ var FormCheckbox = ({
   const hintText = typeof hint === "string" && hint !== "" ? hint : description;
   const hasHint = typeof hintText === "string" && hintText !== "";
   const { hintId } = useFieldIds();
+  const [focused, setFocused] = React2.useState(false);
   const themeStyles = React2.useMemo(() => {
-    const boxOn = { backgroundColor: brand, borderColor: brand };
-    const boxOff = { backgroundColor: "transparent", borderColor: colors.border };
+    const boxOn = checkboxBoxColors(colors, brand, true);
+    const boxOff = checkboxBoxColors(colors, brand, false);
+    const ring = { borderColor: brand };
     const labelStyle = { color: colors.text };
     const hintStyle = { color: colors.textSecondary };
-    return { boxOn, boxOff, label: labelStyle, hint: hintStyle };
-  }, [brand, colors.border, colors.text, colors.textSecondary]);
+    return { boxOn, boxOff, ring, label: labelStyle, hint: hintStyle };
+  }, [brand, colors]);
   const toggle = () => {
     const next = !value;
     if (onValueChange) onValueChange(next);
@@ -1451,21 +1543,27 @@ var FormCheckbox = ({
       "aria-checked": value,
       "aria-describedby": hasHint ? hintId : void 0,
       disabled,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
       onPress: toggle,
       role: "checkbox",
       style: [
-        styles7.container,
-        hasHint ? null : styles7.centered,
+        styles9.container,
+        hasHint ? null : styles9.centered,
         containerStyle,
-        disabled ? { opacity: DISABLED_OPACITY } : null
+        disabled ? { opacity: DISABLED_OPACITY } : null,
+        Platform.OS === "web" ? WEB_NO_DEFAULT_OUTLINE : null
       ],
       testID,
       ...keyboardProps,
       children: [
-        /* @__PURE__ */ jsx(View, { style: [styles7.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles7.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null }),
-        /* @__PURE__ */ jsxs(View, { style: styles7.textColumn, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles7.label, themeStyles.label], children: label }),
-          hasHint ? /* @__PURE__ */ jsx(Text, { nativeID: hintId, style: [styles7.hint, themeStyles.hint], children: hintText }) : null
+        /* @__PURE__ */ jsxs(View, { style: [styles9.box, value ? themeStyles.boxOn : themeStyles.boxOff], testID: `${testID}-box`, children: [
+          focused ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles9.focusRing, themeStyles.ring], testID: `${testID}-focus-ring` }) : null,
+          value ? /* @__PURE__ */ jsx(Text, { style: [styles9.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles9.textColumn, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles9.label, themeStyles.label], children: label }),
+          hasHint ? /* @__PURE__ */ jsx(Text, { nativeID: hintId, style: [styles9.hint, themeStyles.hint], children: hintText }) : null
         ] })
       ]
     }
@@ -1757,6 +1855,6 @@ function toggleGroupSelection(selected, groupKeys, order) {
   return order === void 0 ? merged : order.filter((key) => merged.includes(key));
 }
 
-export { AnchoredMenu, ChipSelector, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, Field, FormActions, FormCell, FormCheckbox, FormField, FormGrid, FormSection, FormSwitch, SelectControl, ThemedTextInput, TypeaheadControl, controlStyles, groupAriaChecked, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
+export { AlignToControl, AnchoredMenu, ChipSelector, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, Field, FormActions, FormCell, FormCheckbox, FormField, FormGrid, FormSection, FormSwitch, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, SelectControl, ThemedTextInput, TypeaheadControl, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map