@dloizides/ui-forms 1.23.1 → 1.25.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.25.0
+
+INVOICE-3 "Invoice interface over a user-chosen folder": extracted from invoice-web.
+
+- New `SelectField`: `Field` + `SelectControl`, its accessible name carries the selection.
+
+## 1.24.0
+
+BEAD-3 "Report form: searchable pattern field": review fix.
+
+- New `useKeepInView(trigger)`, moved from Jinx: scrolls the returned view into sight each time `trigger` takes a new value, as far as needed and no further. Web only; a no-op on native.
+
 ## 1.23.0
 
 BEAD-3 "Report form: searchable pattern field and shared form feedback".

package/dist/index.d.mts

@@ -762,6 +762,16 @@ interface SelectControlProps {
 }
 declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, labelledById, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
 
+interface SelectFieldProps {
+    label: string;
+    accessibilityHint: string;
+    value: string;
+    options: readonly ControlOption[];
+    onChange: (value: string) => void;
+    testID: string;
+}
+declare const SelectField: ({ label, accessibilityHint, value, options, onChange, testID, }: SelectFieldProps) => React.ReactElement;
+
 interface FieldControlWiring {
     id?: string;
     describedById?: string;
@@ -1146,6 +1156,9 @@ type FocusableRefs<Field extends string> = Readonly<Record<Field, RefObject<Focu
 /** Returns a stable function that focuses the first listed field that is on screen. */
 declare function useFocusFirstInvalid<Field extends string>(refs: FocusableRefs<Field>): (invalid: readonly Field[]) => void;
 
+/** Scrolls the returned view fully into sight each time `trigger` takes a new value. */
+declare function useKeepInView(trigger: unknown): RefObject<View | null>;
+
 /** Every string the field shows; all pre-localized. */
 interface UploadWithLinkLabels {
     title: string;
@@ -1170,4 +1183,4 @@ interface UploadWithLinkFieldProps {
 /** 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 AnchoredMenuListbox, 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, type Focusable, type FocusableRefs, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormStatusLine, type FormStatusLineProps, 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, type TypeaheadSearch, type TypeaheadSearchProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useFocusFirstInvalid, useRecentValues, useThemedInput };
+export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuListbox, 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, type Focusable, type FocusableRefs, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormStatusLine, type FormStatusLineProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, SelectField, type SelectFieldProps, type StepNeighbours, StepperNav, type StepperNavLabels, type StepperNavProps, type StepperStep, StepperTabs, type StepperTabsProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type TypeaheadSearch, type TypeaheadSearchProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useFocusFirstInvalid, useKeepInView, useRecentValues, useThemedInput };

package/dist/index.d.ts

@@ -762,6 +762,16 @@ interface SelectControlProps {
 }
 declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, labelledById, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
 
+interface SelectFieldProps {
+    label: string;
+    accessibilityHint: string;
+    value: string;
+    options: readonly ControlOption[];
+    onChange: (value: string) => void;
+    testID: string;
+}
+declare const SelectField: ({ label, accessibilityHint, value, options, onChange, testID, }: SelectFieldProps) => React.ReactElement;
+
 interface FieldControlWiring {
     id?: string;
     describedById?: string;
@@ -1146,6 +1156,9 @@ type FocusableRefs<Field extends string> = Readonly<Record<Field, RefObject<Focu
 /** Returns a stable function that focuses the first listed field that is on screen. */
 declare function useFocusFirstInvalid<Field extends string>(refs: FocusableRefs<Field>): (invalid: readonly Field[]) => void;
 
+/** Scrolls the returned view fully into sight each time `trigger` takes a new value. */
+declare function useKeepInView(trigger: unknown): RefObject<View | null>;
+
 /** Every string the field shows; all pre-localized. */
 interface UploadWithLinkLabels {
     title: string;
@@ -1170,4 +1183,4 @@ interface UploadWithLinkFieldProps {
 /** 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 AnchoredMenuListbox, 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, type Focusable, type FocusableRefs, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormStatusLine, type FormStatusLineProps, 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, type TypeaheadSearch, type TypeaheadSearchProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useFocusFirstInvalid, useRecentValues, useThemedInput };
+export { AlignToControl, type AlignToControlProps, AnchoredMenu, type AnchoredMenuColors, type AnchoredMenuListbox, 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, type Focusable, type FocusableRefs, FormActions, type FormActionsProps, FormCell, type FormCellProps, FormCheckbox, type FormCheckboxProps, FormField, type FormFieldProps, FormGrid, type FormGridProps, FormSection, type FormSectionProps, FormStatusLine, type FormStatusLineProps, FormSwitch, type FormSwitchProps, type GroupSelection, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, type InlineFieldRowLayout, type InlineFieldRowProps, type RecentValues, SelectControl, type SelectControlProps, SelectField, type SelectFieldProps, type StepNeighbours, StepperNav, type StepperNavLabels, type StepperNavProps, type StepperStep, StepperTabs, type StepperTabsProps, type ThemedInput, ThemedTextInput, type ThemedTextInputProps, TypeaheadControl, type TypeaheadControlProps, type TypeaheadSearch, type TypeaheadSearchProps, UploadWithLinkField, type UploadWithLinkFieldProps, type UploadWithLinkLabels, type UseThemedInputOptions, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useFocusFirstInvalid, useKeepInView, useRecentValues, useThemedInput };

package/dist/index.js

@@ -1765,6 +1765,28 @@ function SelectControl({
     ) : null
   ] });
 }
+var SelectField = ({
+  label,
+  accessibilityHint,
+  value,
+  options,
+  onChange,
+  testID
+}) => {
+  const selected = options.find((option) => option.value === value)?.label ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, children: ({ labelId }) => /* @__PURE__ */ jsxRuntime.jsx(
+    SelectControl,
+    {
+      accessibilityHint,
+      accessibilityLabel: `${label}: ${selected}`,
+      labelledById: labelId,
+      options,
+      testID,
+      value,
+      onChange
+    }
+  ) });
+};
 var CLOSE_DELAY_MS2 = 140;
 function useDelayedBlurClose(open, close) {
   const timerRef = React2.useRef(null);
@@ -2256,6 +2278,18 @@ function useFocusFirstInvalid(refs) {
     first?.focus();
   }, []);
 }
+function isScrollable(node) {
+  return "scrollIntoView" in Object(node);
+}
+function useKeepInView(trigger) {
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
+    const node = ref.current;
+    const hasTrigger = trigger !== void 0 && trigger !== null;
+    if (hasTrigger && isScrollable(node)) node.scrollIntoView({ block: "nearest" });
+  }, [trigger]);
+  return ref;
+}
 var DEFAULT_PREVIEW_PX = 48;
 var PREVIEW_RADIUS = 8;
 var GAP = 8;
@@ -2341,6 +2375,7 @@ exports.FormSwitch = FormSwitch;
 exports.INLINE_FIELD_ROW_MIN_WIDTH = INLINE_FIELD_ROW_MIN_WIDTH;
 exports.InlineFieldRow = InlineFieldRow;
 exports.SelectControl = SelectControl;
+exports.SelectField = SelectField;
 exports.StepperNav = StepperNav;
 exports.StepperTabs = StepperTabs;
 exports.ThemedTextInput = ThemedTextInput;
@@ -2355,6 +2390,7 @@ exports.resolveStepNeighbours = resolveStepNeighbours;
 exports.suggestOptions = suggestOptions;
 exports.toggleGroupSelection = toggleGroupSelection;
 exports.useFocusFirstInvalid = useFocusFirstInvalid;
+exports.useKeepInView = useKeepInView;
 exports.useRecentValues = useRecentValues;
 exports.useThemedInput = useThemedInput;
 //# sourceMappingURL=index.js.map