@dloizides/ui-forms 1.23.0 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 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

@@ -1146,6 +1146,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 +1173,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, 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

@@ -1146,6 +1146,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 +1173,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, 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

@@ -571,12 +571,16 @@ function listboxDomId(testID) {
 function isDetailBesideTitle(menuWidth) {
   return menuWidth >= DETAIL_BESIDE_MIN_MENU_WIDTH;
 }
+function rowInk(colors, isActive, isHighlighted) {
+  if (isHighlighted) return { title: colors.surface, detail: colors.surface };
+  return { title: isActive ? colors.brand : colors.text, detail: colors.textSecondary ?? colors.text };
+}
 function OptionRow({ option, isActive, isHighlighted, isListboxRow, menuWidth, hint, colors, testID, onSelect }) {
   const hasDetail = option.detail !== void 0 && option.detail !== "";
   const label = hasDetail ? `${option.label}, ${option.detail}` : option.label;
   const roleProps = isListboxRow ? { role: "option", tabIndex: -1, id: optionDomId(testID, option.value), "aria-selected": isHighlighted } : { accessibilityRole: "menuitem", "aria-selected": isActive };
   const isBold = isActive || isHighlighted;
-  const titleColor = isActive ? colors.brand : colors.text;
+  const ink = rowInk(colors, isActive, isHighlighted);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
@@ -585,11 +589,11 @@ function OptionRow({ option, isActive, isHighlighted, isListboxRow, menuWidth, h
       accessibilityHint: hint,
       accessibilityState: { selected: isActive },
       onPress: () => onSelect(option.value),
-      style: [controlStyles.option, isHighlighted ? { backgroundColor: colors.border } : null],
+      style: [controlStyles.option, isHighlighted ? { backgroundColor: colors.text } : null],
       testID: `${testID}-option-${option.value}`,
       children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: isDetailBesideTitle(menuWidth) ? styles7.beside : styles7.stacked, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [controlStyles.optionText, styles7.shrink, { color: titleColor, fontWeight: isBold ? ACTIVE_WEIGHT : IDLE_WEIGHT }], children: option.label }),
-        hasDetail ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.detail, { color: colors.textSecondary ?? colors.text }], children: option.detail }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [controlStyles.optionText, styles7.shrink, { color: ink.title, fontWeight: isBold ? ACTIVE_WEIGHT : IDLE_WEIGHT }], children: option.label }),
+        hasDetail ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.detail, { color: ink.detail }], children: option.detail }) : null
       ] })
     }
   );
@@ -1761,6 +1765,24 @@ function SelectControl({
     ) : null
   ] });
 }
+var CLOSE_DELAY_MS2 = 140;
+function useDelayedBlurClose(open, close) {
+  const timerRef = React2.useRef(null);
+  const cancelClose = React2.useCallback(() => {
+    if (timerRef.current !== null) clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }, []);
+  React2.useEffect(() => cancelClose, [cancelClose]);
+  const handleFocus = React2.useCallback(() => {
+    cancelClose();
+    open();
+  }, [cancelClose, open]);
+  const handleBlur = React2.useCallback(() => {
+    cancelClose();
+    timerRef.current = setTimeout(close, CLOSE_DELAY_MS2);
+  }, [cancelClose, close]);
+  return { handleFocus, handleBlur };
+}
 
 // src/controls/suggestOptions.ts
 var RANK_VALUE_EXACT = 0;
@@ -1926,7 +1948,6 @@ function useTypeaheadKeys(input) {
     [rowCount, isOpen, highlighted, setIsOpen, setHighlightIndex, close, pick]
   );
 }
-var CLOSE_DELAY_MS2 = 140;
 var DEFAULT_TYPEAHEAD_MIN_CHARS = 1;
 var DEFAULT_TYPEAHEAD_MAX_SUGGESTIONS = 8;
 function comboboxAria(testID, isExpanded, highlighted) {
@@ -1948,6 +1969,7 @@ function TypeaheadControlImpl(props, ref) {
   const { colors, palette } = theme;
   const anchorRef = React2.useRef(null);
   const state = useTypeaheadState({ options, search, value, minChars, maxSuggestions, onChange, onSubmit });
+  const { handleFocus, handleBlur } = useDelayedBlurClose(state.open, state.close);
   const showMenu = state.isOpen && (state.rows.length > 0 || state.statusText !== void 0);
   const isExpanded = state.isOpen && state.rows.length > 0;
   const hasError = error !== void 0 && error !== "";
@@ -1971,8 +1993,8 @@ function TypeaheadControlImpl(props, ref) {
         spellCheck: false,
         value,
         onChangeText: state.handleChange,
-        onFocus: state.open,
-        onBlur: () => setTimeout(state.close, CLOSE_DELAY_MS2),
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         onKeyPress: state.handleKeyPress,
         onSubmitEditing: state.handleSubmit,
         style: [controlStyles.input, { borderColor: hasError ? fieldErrorInk(theme) : colors.border, backgroundColor: colors.surface, color: colors.text }],
@@ -2234,6 +2256,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;
@@ -2333,6 +2367,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