@dloizides/ui-forms 1.14.0 → 1.16.0

package/dist/index.mjs

@@ -946,56 +946,19 @@ var FormField = ({
     }
   }
 );
+
+// src/ChipSelector/constants.ts
 var TRANSPARENT_COLOR = "transparent";
-var WHITE_COLOR = "#fff";
+var CHIP_HIT_SLOP = { top: 10, bottom: 10, left: 4, right: 4 };
+var CHIP_GUTTER = 8;
+var DEFAULT_CHIP_TESTID_PREFIX = "chip-selector-chip";
 var SOLID_RADIUS = 20;
 var OUTLINE_RADIUS = 999;
 var OUTLINE_PAD_H = 12;
 var OUTLINE_PAD_V = 5;
 var OUTLINE_FONT_SIZE = 13;
-var OUTLINE_TINT_ALPHA = 0.1;
-var HEX_SHORT_LENGTH2 = 3;
-var HEX_RADIX2 = 16;
-var RGB_R_START = 0;
-var RGB_R_END = 2;
-var RGB_G_END = 4;
-var RGB_B_END = 6;
-var CHIP_HIT_SLOP = { top: 10, bottom: 10, left: 4, right: 4 };
-var CHIP_GUTTER = 8;
-var DEFAULT_CHIP_TESTID_PREFIX = "chip-selector-chip";
-var ON_BRAND_SCALE = "onBrand";
-var MAIN_STEP = "500";
-function onBrandInk(palette) {
-  const scales = palette;
-  return scales[ON_BRAND_SCALE]?.[MAIN_STEP] ?? WHITE_COLOR;
-}
-function withAlpha2(hex, alpha) {
-  const normalized = hex.replace("#", "");
-  const isShort = normalized.length === HEX_SHORT_LENGTH2;
-  const full = isShort ? normalized.split("").map((c) => c + c).join("") : normalized;
-  const r = parseInt(full.slice(RGB_R_START, RGB_R_END), HEX_RADIX2);
-  const g = parseInt(full.slice(RGB_R_END, RGB_G_END), HEX_RADIX2);
-  const b = parseInt(full.slice(RGB_G_END, RGB_B_END), HEX_RADIX2);
-  const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
-  return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
-}
-var styles5 = StyleSheet.create({
-  chipContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    // `gap`, NOT per-chip margins plus a compensating negative container margin.
-    //
-    // The old form was `chipWrapper { marginRight: 8, marginBottom: 8 }` with
-    // `chipContainer { marginBottom: -8 }`. Its comment blamed `Field`'s 16px container margin —
-    // that was WRONG, and worth recording: F3 was briefed on the belief that the -8 compensated for
-    // `Field` and had to move in lockstep with it. It did not. -8 cancelled the CHIP's own gutter
-    // hanging off the last row, identically whether `Field` contributed 16, 0, or anything else.
-    //
-    // The pair is still the wrong tool: it holds only while the two constants agree, and it leaves
-    // a real negative margin any measuring parent inherits. `gap` produces the byte-identical box
-    // and is correct under BOTH of `Field`'s spacing models, not just the one it was tuned against.
-    gap: CHIP_GUTTER
-  },
+var CHIP_ICON_GAP = 6;
+var chipStyles = StyleSheet.create({
   chip: {
     paddingHorizontal: 12,
     paddingVertical: 6,
@@ -1009,28 +972,21 @@ var styles5 = StyleSheet.create({
     borderRadius: OUTLINE_RADIUS,
     borderWidth: 1
   },
+  chipContent: { flexDirection: "row", alignItems: "center", gap: CHIP_ICON_GAP },
   chipText: {},
   chipTextOutline: { fontSize: OUTLINE_FONT_SIZE }
 });
-function chipIdentity(option, selected, config) {
-  return {
-    testID: `${config.prefix}-${String(option.value)}`,
-    // The English default is retained verbatim: erevna/katalogos assert the exact string
-    // `Selects Red`. Consumers that localize pass `optionAccessibilityHint`.
-    accessibilityHint: config.hint ?? `Selects ${option.label}`,
-    ariaPressed: config.multiple ? selected : void 0
-  };
+function ChipContent({ icon, label, textStyle }) {
+  const text = /* @__PURE__ */ jsx(Text, { style: textStyle, children: label });
+  if (icon === void 0 || icon === null)
+    return text;
+  return /* @__PURE__ */ jsxs(View, { style: chipStyles.chipContent, children: [
+    /* @__PURE__ */ jsx(View, { "aria-hidden": true, children: icon }),
+    text
+  ] });
 }
-function OutlineChip({
-  option,
-  selected,
-  disabled,
-  colors,
-  testID,
-  accessibilityHint,
-  ariaPressed,
-  onPress
-}) {
+function OutlineChip(props) {
+  const { option, selected, disabled, colors, testID, accessibilityHint, onPress } = props;
   const [hovered, setHovered] = React2.useState(false);
   const active = selected || hovered;
   const borderColor = active ? colors.primary : colors.border;
@@ -1039,49 +995,179 @@ function OutlineChip({
   return /* @__PURE__ */ jsx(
     Pressable,
     {
+      ref: props.hostRef,
       accessibilityHint,
       accessibilityLabel: option.label,
-      accessibilityRole: "button",
+      accessibilityRole: props.accessibilityRole,
       accessibilityState: { selected, disabled },
-      "aria-pressed": ariaPressed,
+      "aria-checked": props.ariaChecked,
+      "aria-pressed": props.ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
+      tabIndex: props.tabIndex,
       testID,
       onHoverIn: () => setHovered(true),
       onHoverOut: () => setHovered(false),
       onPress,
-      children: /* @__PURE__ */ jsx(View, { style: [styles5.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles5.chipText, styles5.chipTextOutline, { color: textColor }], children: option.label }) })
+      children: /* @__PURE__ */ jsx(View, { style: [chipStyles.chipOutline, { borderColor, backgroundColor }], children: /* @__PURE__ */ jsx(
+        ChipContent,
+        {
+          icon: option.icon,
+          label: option.label,
+          textStyle: [chipStyles.chipText, chipStyles.chipTextOutline, { color: textColor }]
+        }
+      ) })
     }
   );
 }
-function SolidChip({
-  option,
-  selected,
-  disabled,
-  colors,
-  testID,
-  accessibilityHint,
-  ariaPressed,
-  onPress
-}) {
+function SolidChip(props) {
+  const { option, selected, disabled, colors, testID, accessibilityHint, onPress } = props;
   const backgroundColor = selected ? colors.primary : TRANSPARENT_COLOR;
   const textColor = selected ? colors.onPrimary : colors.textStrong;
+  const rovingTabStop = { tabIndex: props.tabIndex };
   return /* @__PURE__ */ jsx(
     TouchableOpacity,
     {
+      ref: props.hostRef,
       accessibilityHint,
       accessibilityLabel: option.label,
-      accessibilityRole: "button",
+      accessibilityRole: props.accessibilityRole,
       accessibilityState: { selected, disabled },
-      "aria-pressed": ariaPressed,
+      "aria-checked": props.ariaChecked,
+      "aria-pressed": props.ariaPressed,
       disabled,
       hitSlop: CHIP_HIT_SLOP,
       testID,
       onPress,
-      children: /* @__PURE__ */ jsx(View, { style: [styles5.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsx(Text, { style: [styles5.chipText, { color: textColor }], children: option.label }) })
+      ...rovingTabStop,
+      children: /* @__PURE__ */ jsx(View, { style: [chipStyles.chip, { borderColor: colors.border, backgroundColor }], children: /* @__PURE__ */ jsx(ChipContent, { icon: option.icon, label: option.label, textStyle: [chipStyles.chipText, { color: textColor }] }) })
     }
   );
 }
+
+// src/ChipSelector/utils/radioKeyboard.ts
+var SPACE_KEYS = [" ", "Spacebar"];
+var NEXT_KEYS = ["ArrowRight", "ArrowDown"];
+var PREVIOUS_KEYS = ["ArrowLeft", "ArrowUp"];
+var ROVING_TAB_STOP = 0;
+var ROVING_SKIPPED = -1;
+function radioKeyTarget(key, index, count) {
+  const isOutOfRange = index < 0 || index >= count;
+  if (isOutOfRange)
+    return null;
+  if (SPACE_KEYS.includes(key))
+    return index;
+  const isArrow = NEXT_KEYS.includes(key) || PREVIOUS_KEYS.includes(key);
+  if (!isArrow || count === 1)
+    return null;
+  const step = NEXT_KEYS.includes(key) ? 1 : -1;
+  return (index + step + count) % count;
+}
+function radioTabIndex(index, selectedIndex, disabled) {
+  if (disabled)
+    return ROVING_SKIPPED;
+  const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+  return index === tabStop ? ROVING_TAB_STOP : ROVING_SKIPPED;
+}
+
+// src/ChipSelector/hooks/useRadioKeyboard.ts
+var NO_GROUP_PROPS = {};
+function useRadioKeyboard(config) {
+  const { enabled, disabled, values, selectedIndex, onChange } = config;
+  const nodes = React2.useRef([]);
+  const chipRef = React2.useCallback((index) => (node) => {
+    nodes.current[index] = node;
+  }, []);
+  const onKeyDown = (event) => {
+    if (disabled)
+      return;
+    const index = nodes.current.indexOf(event.target);
+    const target = radioKeyTarget(event.key, index, values.length);
+    const nextValue = target === null ? void 0 : values[target];
+    if (target === null || nextValue === void 0)
+      return;
+    event.preventDefault();
+    if (target !== index)
+      nodes.current[target]?.focus?.();
+    onChange(nextValue);
+  };
+  return {
+    chipRef,
+    tabIndexFor: (index) => enabled ? radioTabIndex(index, selectedIndex, disabled) : void 0,
+    // `onKeyDown` is a web-only View prop RN's types do not declare; RNW forwards it to the DOM.
+    groupProps: enabled ? { onKeyDown } : NO_GROUP_PROPS
+  };
+}
+
+// src/ChipSelector/utils/chipColors.ts
+var WHITE_COLOR = "#fff";
+var OUTLINE_TINT_ALPHA = 0.1;
+var HEX_SHORT_LENGTH2 = 3;
+var HEX_RADIX2 = 16;
+var RGB_R_START = 0;
+var RGB_R_END = 2;
+var RGB_G_END = 4;
+var RGB_B_END = 6;
+var ON_BRAND_SCALE = "onBrand";
+var MAIN_STEP = "500";
+function onBrandInk(palette) {
+  const scales = palette;
+  return scales[ON_BRAND_SCALE]?.[MAIN_STEP] ?? WHITE_COLOR;
+}
+function withAlpha2(hex, alpha) {
+  const normalized = hex.replace("#", "");
+  const isShort = normalized.length === HEX_SHORT_LENGTH2;
+  const full = isShort ? normalized.split("").map((c) => c + c).join("") : normalized;
+  const r = parseInt(full.slice(RGB_R_START, RGB_R_END), HEX_RADIX2);
+  const g = parseInt(full.slice(RGB_R_END, RGB_G_END), HEX_RADIX2);
+  const b = parseInt(full.slice(RGB_G_END, RGB_B_END), HEX_RADIX2);
+  const isValid = !Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b);
+  return isValid ? `rgba(${r}, ${g}, ${b}, ${alpha})` : hex;
+}
+function buildChipColors(colors, palette) {
+  const primary = palette.primary[500];
+  return {
+    border: colors.border,
+    textStrong: colors.text,
+    textMuted: colors.textSecondary,
+    primary,
+    onPrimary: onBrandInk(palette),
+    muted: colors.background,
+    tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
+  };
+}
+
+// src/ChipSelector/utils/chipIdentity.ts
+function chipIdentity(option, selected, config) {
+  const isRadio = config.radio === true && !config.multiple;
+  return {
+    testID: `${config.prefix}-${String(option.value)}`,
+    // The English default is retained verbatim: erevna/katalogos assert the exact string
+    // `Selects Red`. Consumers that localize pass `optionAccessibilityHint`.
+    accessibilityHint: config.hint ?? `Selects ${option.label}`,
+    ariaPressed: config.multiple ? selected : void 0,
+    accessibilityRole: isRadio ? "radio" : "button",
+    ariaChecked: isRadio ? selected : void 0
+  };
+}
+var styles5 = StyleSheet.create({
+  chipContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    // `gap`, NOT per-chip margins plus a compensating negative container margin.
+    //
+    // The old form was `chipWrapper { marginRight: 8, marginBottom: 8 }` with
+    // `chipContainer { marginBottom: -8 }`. Its comment blamed `Field`'s 16px container margin —
+    // that was WRONG, and worth recording: F3 was briefed on the belief that the -8 compensated for
+    // `Field` and had to move in lockstep with it. It did not. -8 cancelled the CHIP's own gutter
+    // hanging off the last row, identically whether `Field` contributed 16, 0, or anything else.
+    //
+    // The pair is still the wrong tool: it holds only while the two constants agree, and it leaves
+    // a real negative margin any measuring parent inherits. `gap` produces the byte-identical box
+    // and is correct under BOTH of `Field`'s spacing models, not just the one it was tuned against.
+    gap: CHIP_GUTTER
+  }
+});
 var ChipSelector = ({
   label,
   options,
@@ -1096,28 +1182,26 @@ var ChipSelector = ({
   error,
   testID,
   chipTestIDPrefix = DEFAULT_CHIP_TESTID_PREFIX,
-  optionAccessibilityHint
+  optionAccessibilityHint,
+  singleSelectRole = "button"
 }) => {
+  const isRadioGroup = !multiple && singleSelectRole === "radio";
   const { theme } = useUi();
   const { colors, palette } = theme;
-  const chipColors = React2.useMemo(() => {
-    const primary = palette.primary["500"];
-    return {
-      border: colors.border,
-      textStrong: colors.text,
-      textMuted: colors.textSecondary,
-      primary,
-      onPrimary: onBrandInk(palette),
-      muted: colors.background,
-      tint: withAlpha2(primary, OUTLINE_TINT_ALPHA)
-    };
-  }, [colors.border, colors.text, colors.textSecondary, colors.background, palette]);
+  const chipColors = React2.useMemo(() => buildChipColors(colors, palette), [colors, palette]);
   function isSelected(optionValue) {
     if (multiple && Array.isArray(value))
       return value.includes(optionValue);
     return value === optionValue;
   }
-  function renderChip(option) {
+  const radio = useRadioKeyboard({
+    enabled: isRadioGroup,
+    disabled,
+    values: options.map((option) => option.value),
+    selectedIndex: options.findIndex((option) => isSelected(option.value)),
+    onChange
+  });
+  function renderChip(option, index) {
     const selected = isSelected(option.value);
     const chipProps = {
       colors: chipColors,
@@ -1127,8 +1211,13 @@ var ChipSelector = ({
       ...chipIdentity(option, selected, {
         prefix: chipTestIDPrefix,
         hint: optionAccessibilityHint,
-        multiple
+        multiple,
+        radio: isRadioGroup
       }),
+      // Radio mode only: roving tab stop + host node for arrow-key focus moves. Both stay
+      // `undefined` otherwise, so button / multi chips keep their existing tab order.
+      tabIndex: radio.tabIndexFor(index),
+      hostRef: isRadioGroup ? radio.chipRef(index) : void 0,
       onPress: () => onChange(option.value)
     };
     const key = String(option.value);
@@ -1143,7 +1232,16 @@ var ChipSelector = ({
       required,
       spacing,
       testID,
-      children: ({ describedById, hasError }) => /* @__PURE__ */ jsx(View, { style: styles5.chipContainer, ...webFieldA11y({ describedById, hasError }), children: options.map(renderChip) })
+      children: ({ describedById, hasError }) => /* @__PURE__ */ jsx(
+        View,
+        {
+          accessibilityRole: isRadioGroup ? "radiogroup" : void 0,
+          style: styles5.chipContainer,
+          ...webFieldA11y({ describedById, hasError }),
+          ...radio.groupProps,
+          children: options.map(renderChip)
+        }
+      )
     }
   );
 };
@@ -1201,8 +1299,7 @@ var FormSwitch = ({
           {
             accessibilityHint: accessibilityHint ?? label,
             accessibilityLabel: label,
-            accessibilityRole: "switch",
-            accessibilityState: { checked: value },
+            accessibilityState: { checked: value, disabled },
             disabled,
             testID,
             value,
@@ -1576,6 +1673,30 @@ function DateRangeControl({
   ] });
 }
 
-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, isUnmatched, suggestOptions, useRecentValues, useThemedInput };
+// src/groupSelection/groupSelection.ts
+var NONE = 0;
+function countSelected(selected, groupKeys) {
+  return groupKeys.filter((key) => selected.includes(key)).length;
+}
+function resolveGroupSelection(selected, groupKeys) {
+  const count = countSelected(selected, groupKeys);
+  if (count === NONE) return { all: false, some: false };
+  return count === groupKeys.length ? { all: true, some: false } : { all: false, some: true };
+}
+function groupAriaChecked(state) {
+  if (state.all) return true;
+  return state.some ? "mixed" : false;
+}
+function toggleGroupSelection(selected, groupKeys, order) {
+  const { all } = resolveGroupSelection(selected, groupKeys);
+  if (all) return selected.filter((key) => !groupKeys.includes(key));
+  const merged = [...selected];
+  groupKeys.forEach((key) => {
+    if (!merged.includes(key)) merged.push(key);
+  });
+  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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map