@dloizides/ui-forms 1.20.0 → 1.22.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import React2, { useState, useCallback, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
-import { Platform, StyleSheet, TextInput, View, Text, useWindowDimensions, ScrollView, Pressable, Switch, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, TextInput, View, Text, useWindowDimensions, ScrollView, Pressable, Switch, Image, TouchableOpacity } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
 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 { themeFocusRingColor, Button, useFocusRing } from '@dloizides/ui-buttons';
 import { createPortal } from 'react-dom';
 import { MIN_TOUCH_TARGET_PX } from '@dloizides/a11y';
 
@@ -1431,12 +1431,18 @@ 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 FOCUS_RING_WIDTH = 2;
+var WEB_NO_DEFAULT_OUTLINE = { outlineStyle: "none" };
+var FOCUS_RING_INSET = -6;
 var styles9 = StyleSheet.create({
   container: {
     flexDirection: "row",
@@ -1461,6 +1467,15 @@ var styles9 = 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",
@@ -1496,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);
@@ -1526,18 +1543,24 @@ var FormCheckbox = ({
       "aria-checked": value,
       "aria-describedby": hasHint ? hintId : void 0,
       disabled,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
       onPress: toggle,
       role: "checkbox",
       style: [
         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: [styles9.box, value ? themeStyles.boxOn : themeStyles.boxOff], children: value ? /* @__PURE__ */ jsx(Text, { style: [styles9.check, { color: colors.surface }], accessibilityElementsHidden: true, children: "\u2713" }) : 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
@@ -1831,7 +1854,193 @@ function toggleGroupSelection(selected, groupKeys, order) {
   });
   return order === void 0 ? merged : order.filter((key) => merged.includes(key));
 }
+var ROW_GAP = 4;
+var TAB_PADDING = 4;
+var INDICATOR_WIDTH = 2;
+var TAB_FONT_SIZE = 12;
+var styles10 = StyleSheet.create({
+  row: { flexDirection: "row", flexWrap: "nowrap", gap: ROW_GAP },
+  tab: {
+    borderBottomWidth: INDICATOR_WIDTH,
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: "center",
+    minHeight: MIN_TOUCH_TARGET_PX,
+    minWidth: 0,
+    paddingHorizontal: TAB_PADDING
+  },
+  text: { fontSize: TAB_FONT_SIZE, textAlign: "center" },
+  textSelected: { fontWeight: "700" }
+});
+var StepperTab = ({
+  step,
+  selected,
+  hint,
+  onStep,
+  testID
+}) => {
+  const { theme } = useUi();
+  const ring = useFocusRing();
+  const indicator = selected ? theme.palette.primary["500"] : theme.colors.border;
+  const webKeyProps = {
+    onKeyDown: (event) => {
+      if (event.key !== " ") return;
+      event.preventDefault?.();
+      onStep(step.key);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: step.label,
+      accessibilityRole: "tab",
+      accessibilityState: { selected },
+      "aria-selected": selected,
+      style: [styles10.tab, { borderBottomColor: indicator }, ring.ringStyle],
+      testID,
+      onBlur: ring.onBlur,
+      onFocus: ring.onFocus,
+      onPress: () => onStep(step.key),
+      ...webKeyProps,
+      children: /* @__PURE__ */ jsx(Text, { style: [styles10.text, { color: theme.colors.text }, selected ? styles10.textSelected : void 0], children: step.label })
+    }
+  );
+};
+var StepperTabs = ({
+  steps,
+  current,
+  onStep,
+  stepHint,
+  testID
+}) => /* @__PURE__ */ jsx(View, { accessibilityRole: "tablist", style: styles10.row, testID, children: steps.map((step) => /* @__PURE__ */ jsx(
+  StepperTab,
+  {
+    hint: stepHint,
+    selected: step.key === current,
+    step,
+    testID: `${testID}-${step.key}`,
+    onStep
+  },
+  step.key
+)) });
+
+// src/Stepper/stepperModel.ts
+function resolveStepNeighbours(steps, current) {
+  const index = steps.findIndex((step) => step.key === current);
+  if (index < 0) return { previous: null, next: null };
+  return { previous: steps[index - 1] ?? null, next: steps[index + 1] ?? null };
+}
+var ROW_GAP2 = 8;
+var styles11 = StyleSheet.create({
+  cell: { flex: 1, minWidth: 0 },
+  row: { flexDirection: "row", gap: ROW_GAP2 }
+});
+var StepperNav = ({
+  steps,
+  current,
+  onStep,
+  labels,
+  testID
+}) => {
+  const { previous, next } = resolveStepNeighbours(steps, current);
+  return /* @__PURE__ */ jsxs(View, { style: styles11.row, testID, children: [
+    /* @__PURE__ */ jsx(View, { style: styles11.cell, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        fullWidth: true,
+        accessibilityHint: labels.backHint,
+        accessibilityLabel: labels.back,
+        autoLoading: false,
+        disabled: previous === null,
+        label: labels.back,
+        testID: `${testID}-back`,
+        variant: "outline",
+        onPress: () => {
+          if (previous !== null) onStep(previous.key);
+        }
+      }
+    ) }),
+    next === null ? null : /* @__PURE__ */ jsx(View, { style: styles11.cell, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        fullWidth: true,
+        accessibilityHint: labels.nextHint,
+        accessibilityLabel: labels.next(next),
+        autoLoading: false,
+        label: labels.next(next),
+        testID: `${testID}-next`,
+        onPress: () => onStep(next.key)
+      }
+    ) })
+  ] });
+};
+var DEFAULT_PREVIEW_PX = 48;
+var PREVIEW_RADIUS = 8;
+var GAP = 8;
+var TITLE_FONT_SIZE = 14;
+var HELP_FONT_SIZE = 13;
+var styles12 = StyleSheet.create({
+  help: { flex: 1, fontSize: HELP_FONT_SIZE },
+  root: { gap: GAP },
+  tile: { alignItems: "center", flexDirection: "row", gap: GAP },
+  title: { fontSize: TITLE_FONT_SIZE, fontWeight: "700" },
+  toggle: { alignSelf: "flex-start", justifyContent: "center", minHeight: MIN_TOUCH_TARGET_PX },
+  toggleText: { fontSize: TITLE_FONT_SIZE, fontWeight: "700", textDecorationLine: "underline" }
+});
+var UploadWithLinkField = ({
+  value,
+  onChange,
+  labels,
+  uploadControl,
+  testID,
+  disabled = false,
+  previewSize = DEFAULT_PREVIEW_PX
+}) => {
+  const { theme } = useUi();
+  const ring = useFocusRing();
+  const url = value ?? "";
+  const [pasting, setPasting] = useState(url !== "");
+  const previewBox = { borderRadius: PREVIEW_RADIUS, height: previewSize, width: previewSize };
+  return /* @__PURE__ */ jsxs(View, { style: styles12.root, children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles12.title, { color: theme.colors.text }], children: labels.title }),
+    /* @__PURE__ */ jsxs(View, { style: styles12.tile, children: [
+      url === "" ? /* @__PURE__ */ jsx(View, { style: [previewBox, { backgroundColor: theme.colors.border }] }) : /* @__PURE__ */ jsx(Image, { accessible: false, source: { uri: url }, style: previewBox, testID: `${testID}-preview` }),
+      labels.help === void 0 ? null : /* @__PURE__ */ jsx(Text, { style: [styles12.help, { color: theme.colors.text }], children: labels.help })
+    ] }),
+    uploadControl,
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityHint: labels.pasteToggleHint,
+        accessibilityLabel: labels.pasteToggle,
+        accessibilityRole: "button",
+        accessibilityState: { expanded: pasting },
+        "aria-expanded": pasting,
+        style: [styles12.toggle, ring.ringStyle],
+        testID: `${testID}-paste`,
+        onBlur: ring.onBlur,
+        onFocus: ring.onFocus,
+        onPress: () => setPasting(!pasting),
+        children: /* @__PURE__ */ jsx(Text, { style: [styles12.toggleText, { color: theme.colors.text }], children: labels.pasteToggle })
+      }
+    ),
+    pasting ? /* @__PURE__ */ jsx(
+      FormField,
+      {
+        accessibilityHint: labels.linkHint,
+        editable: !disabled,
+        label: labels.link,
+        placeholder: labels.linkPlaceholder,
+        testID,
+        value: url,
+        onChangeText: onChange
+      }
+    ) : null
+  ] });
+};
 
-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 };
+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, StepperNav, StepperTabs, ThemedTextInput, TypeaheadControl, UploadWithLinkField, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map