@dloizides/ui-forms 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.22.0
+
+KEFI-EDITOR-UI-2 "Extract stepper and upload-with-link field to @dloizides/ui-forms", extracted from kefi-web.
+
+- New `StepperTabs`, `StepperNav` and pure `resolveStepNeighbours`: step tabs sharing the row width, back and next under the step. Generic over the step key; every string is a prop.
+- New `UploadWithLinkField`: preview, an upload control slot and a link input revealed on request. The slot keeps ui-forms free of ui-media; pass `ImagePickerButton`.
+
 ## 1.20.0
 
 **Horizontal form fields line up (D-ALL-22 "Horizontal form fields are aligned").**

package/dist/index.d.mts

@@ -1062,4 +1062,70 @@ declare function groupAriaChecked(state: GroupSelection): boolean | 'mixed';
  */
 declare function toggleGroupSelection<T>(selected: readonly T[], groupKeys: readonly T[], order?: readonly T[]): T[];
 
-export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
+/** One step; `label` is pre-localized and shown on its tab. */
+interface StepperStep<TKey extends string | number = string> {
+    key: TKey;
+    label: string;
+}
+interface StepNeighbours<TKey extends string | number = string> {
+    previous: StepperStep<TKey> | null;
+    next: StepperStep<TKey> | null;
+}
+/** The steps either side of `current`; both null when `current` is not a step. */
+declare function resolveStepNeighbours<TKey extends string | number>(steps: readonly StepperStep<TKey>[], current: TKey): StepNeighbours<TKey>;
+
+interface StepperTabsProps<TKey extends string | number = string> {
+    steps: readonly StepperStep<TKey>[];
+    current: TKey;
+    onStep: (key: TKey) => void;
+    /** Pre-localized accessibility hint for every tab. */
+    stepHint: string;
+    /** Row testID; each tab is `${testID}-${step.key}`. */
+    testID: string;
+}
+/** A row of step tabs sharing the width; each label wraps inside its own tab. */
+declare const StepperTabs: <TKey extends string | number = string>({ steps, current, onStep, stepHint, testID, }: StepperTabsProps<TKey>) => React.ReactElement;
+
+interface StepperNavLabels<TKey extends string | number = string> {
+    back: string;
+    backHint: string;
+    /** The next button's label, built from the step it leads to. */
+    next: (step: StepperStep<TKey>) => string;
+    nextHint: string;
+}
+interface StepperNavProps<TKey extends string | number = string> {
+    steps: readonly StepperStep<TKey>[];
+    current: TKey;
+    onStep: (key: TKey) => void;
+    labels: StepperNavLabels<TKey>;
+    /** Row testID; the buttons are `${testID}-back` and `${testID}-next`. */
+    testID: string;
+}
+/** Back and next under a step: back is disabled on the first step, next is absent on the last. */
+declare const StepperNav: <TKey extends string | number = string>({ steps, current, onStep, labels, testID, }: StepperNavProps<TKey>) => React.ReactElement;
+
+/** Every string the field shows; all pre-localized. */
+interface UploadWithLinkLabels {
+    title: string;
+    help?: string;
+    pasteToggle: string;
+    pasteToggleHint: string;
+    link: string;
+    linkHint: string;
+    linkPlaceholder: string;
+}
+interface UploadWithLinkFieldProps {
+    value: string | null | undefined;
+    onChange: (url: string) => void;
+    labels: UploadWithLinkLabels;
+    /** The upload control, e.g. ui-media `ImagePickerButton`; its transport stays with the app. */
+    uploadControl: React.ReactNode;
+    /** The link input; the others are `${testID}-preview` and `${testID}-paste`. */
+    testID: string;
+    disabled?: boolean;
+    previewSize?: number;
+}
+/** An image field: preview, an upload control, and a link input revealed on request. */
+declare const UploadWithLinkField: ({ value, onChange, labels, uploadControl, testID, disabled, previewSize, }: UploadWithLinkFieldProps) => React.ReactElement;
+
+export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, type StepNeighbours, StepperNav, type StepperNavLabels, type StepperNavProps, type StepperStep, StepperTabs, type StepperTabsProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };

package/dist/index.d.ts

@@ -1062,4 +1062,70 @@ declare function groupAriaChecked(state: GroupSelection): boolean | 'mixed';
  */
 declare function toggleGroupSelection<T>(selected: readonly T[], groupKeys: readonly T[], order?: readonly T[]): T[];
 
-export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };
+/** One step; `label` is pre-localized and shown on its tab. */
+interface StepperStep<TKey extends string | number = string> {
+    key: TKey;
+    label: string;
+}
+interface StepNeighbours<TKey extends string | number = string> {
+    previous: StepperStep<TKey> | null;
+    next: StepperStep<TKey> | null;
+}
+/** The steps either side of `current`; both null when `current` is not a step. */
+declare function resolveStepNeighbours<TKey extends string | number>(steps: readonly StepperStep<TKey>[], current: TKey): StepNeighbours<TKey>;
+
+interface StepperTabsProps<TKey extends string | number = string> {
+    steps: readonly StepperStep<TKey>[];
+    current: TKey;
+    onStep: (key: TKey) => void;
+    /** Pre-localized accessibility hint for every tab. */
+    stepHint: string;
+    /** Row testID; each tab is `${testID}-${step.key}`. */
+    testID: string;
+}
+/** A row of step tabs sharing the width; each label wraps inside its own tab. */
+declare const StepperTabs: <TKey extends string | number = string>({ steps, current, onStep, stepHint, testID, }: StepperTabsProps<TKey>) => React.ReactElement;
+
+interface StepperNavLabels<TKey extends string | number = string> {
+    back: string;
+    backHint: string;
+    /** The next button's label, built from the step it leads to. */
+    next: (step: StepperStep<TKey>) => string;
+    nextHint: string;
+}
+interface StepperNavProps<TKey extends string | number = string> {
+    steps: readonly StepperStep<TKey>[];
+    current: TKey;
+    onStep: (key: TKey) => void;
+    labels: StepperNavLabels<TKey>;
+    /** Row testID; the buttons are `${testID}-back` and `${testID}-next`. */
+    testID: string;
+}
+/** Back and next under a step: back is disabled on the first step, next is absent on the last. */
+declare const StepperNav: <TKey extends string | number = string>({ steps, current, onStep, labels, testID, }: StepperNavProps<TKey>) => React.ReactElement;
+
+/** Every string the field shows; all pre-localized. */
+interface UploadWithLinkLabels {
+    title: string;
+    help?: string;
+    pasteToggle: string;
+    pasteToggleHint: string;
+    link: string;
+    linkHint: string;
+    linkPlaceholder: string;
+}
+interface UploadWithLinkFieldProps {
+    value: string | null | undefined;
+    onChange: (url: string) => void;
+    labels: UploadWithLinkLabels;
+    /** The upload control, e.g. ui-media `ImagePickerButton`; its transport stays with the app. */
+    uploadControl: React.ReactNode;
+    /** The link input; the others are `${testID}-preview` and `${testID}-paste`. */
+    testID: string;
+    disabled?: boolean;
+    previewSize?: number;
+}
+/** An image field: preview, an upload control, and a link input revealed on request. */
+declare const UploadWithLinkField: ({ value, onChange, labels, uploadControl, testID, disabled, previewSize, }: UploadWithLinkFieldProps) => React.ReactElement;
+
+export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuProps, type ChipOption, ChipSelector, type ChipSelectorProps, type ChipSingleSelectRole, type ChipVariant, type ControlOption, DEFAULT_MAX_RECENTS, DEFAULT_OPTIONAL_LABEL, DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS, DEFAULT_TYPEAHEAD_MIN_CHARS, DateRangeControl, type DateRangeControlProps, type DateRangeValue, Field, type FieldChildContext, type FieldChildren, type FieldLabelVariant, type FieldMarker, type FieldProps, type FieldSpacing, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, type StepNeighbours, StepperNav, type StepperNavLabels, type StepperNavProps, type StepperStep, StepperTabs, type StepperTabsProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useRecentValues, useThemedInput };

package/dist/index.js

@@ -1860,6 +1860,192 @@ 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 = reactNative.StyleSheet.create({
+  row: { flexDirection: "row", flexWrap: "nowrap", gap: ROW_GAP },
+  tab: {
+    borderBottomWidth: INDICATOR_WIDTH,
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: "center",
+    minHeight: a11y.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 } = uiFeedback.useUi();
+  const ring = uiButtons.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__ */ jsxRuntime.jsx(
+    reactNative.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__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.text, { color: theme.colors.text }, selected ? styles10.textSelected : void 0], children: step.label })
+    }
+  );
+};
+var StepperTabs = ({
+  steps,
+  current,
+  onStep,
+  stepHint,
+  testID
+}) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityRole: "tablist", style: styles10.row, testID, children: steps.map((step) => /* @__PURE__ */ jsxRuntime.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 = reactNative.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__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.row, testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.cell, children: /* @__PURE__ */ jsxRuntime.jsx(
+      uiButtons.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__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.cell, children: /* @__PURE__ */ jsxRuntime.jsx(
+      uiButtons.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 = reactNative.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: a11y.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 } = uiFeedback.useUi();
+  const ring = uiButtons.useFocusRing();
+  const url = value ?? "";
+  const [pasting, setPasting] = React2.useState(url !== "");
+  const previewBox = { borderRadius: PREVIEW_RADIUS, height: previewSize, width: previewSize };
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.title, { color: theme.colors.text }], children: labels.title }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.tile, children: [
+      url === "" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [previewBox, { backgroundColor: theme.colors.border }] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Image, { accessible: false, source: { uri: url }, style: previewBox, testID: `${testID}-preview` }),
+      labels.help === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.help, { color: theme.colors.text }], children: labels.help })
+    ] }),
+    uploadControl,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.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__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.toggleText, { color: theme.colors.text }], children: labels.pasteToggle })
+      }
+    ),
+    pasting ? /* @__PURE__ */ jsxRuntime.jsx(
+      FormField,
+      {
+        accessibilityHint: labels.linkHint,
+        editable: !disabled,
+        label: labels.link,
+        placeholder: labels.linkPlaceholder,
+        testID,
+        value: url,
+        onChangeText: onChange
+      }
+    ) : null
+  ] });
+};
 
 exports.AlignToControl = AlignToControl;
 exports.AnchoredMenu = AnchoredMenu;
@@ -1880,13 +2066,17 @@ exports.FormSwitch = FormSwitch;
 exports.INLINE_FIELD_ROW_MIN_WIDTH = INLINE_FIELD_ROW_MIN_WIDTH;
 exports.InlineFieldRow = InlineFieldRow;
 exports.SelectControl = SelectControl;
+exports.StepperNav = StepperNav;
+exports.StepperTabs = StepperTabs;
 exports.ThemedTextInput = ThemedTextInput;
 exports.TypeaheadControl = TypeaheadControl;
+exports.UploadWithLinkField = UploadWithLinkField;
 exports.controlStyles = controlStyles;
 exports.groupAriaChecked = groupAriaChecked;
 exports.inlineFieldRowLayout = inlineFieldRowLayout;
 exports.isUnmatched = isUnmatched;
 exports.resolveGroupSelection = resolveGroupSelection;
+exports.resolveStepNeighbours = resolveStepNeighbours;
 exports.suggestOptions = suggestOptions;
 exports.toggleGroupSelection = toggleGroupSelection;
 exports.useRecentValues = useRecentValues;