@dloizides/ui-forms 1.23.0 → 1.24.0

package/dist/index.mjs

@@ -565,12 +565,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__ */ jsx(
     Pressable,
     {
@@ -579,11 +583,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__ */ jsxs(View, { style: isDetailBesideTitle(menuWidth) ? styles7.beside : styles7.stacked, children: [
-        /* @__PURE__ */ jsx(Text, { style: [controlStyles.optionText, styles7.shrink, { color: titleColor, fontWeight: isBold ? ACTIVE_WEIGHT : IDLE_WEIGHT }], children: option.label }),
-        hasDetail ? /* @__PURE__ */ jsx(Text, { style: [styles7.detail, { color: colors.textSecondary ?? colors.text }], children: option.detail }) : null
+        /* @__PURE__ */ jsx(Text, { style: [controlStyles.optionText, styles7.shrink, { color: ink.title, fontWeight: isBold ? ACTIVE_WEIGHT : IDLE_WEIGHT }], children: option.label }),
+        hasDetail ? /* @__PURE__ */ jsx(Text, { style: [styles7.detail, { color: ink.detail }], children: option.detail }) : null
       ] })
     }
   );
@@ -1755,6 +1759,24 @@ function SelectControl({
     ) : null
   ] });
 }
+var CLOSE_DELAY_MS2 = 140;
+function useDelayedBlurClose(open, close) {
+  const timerRef = useRef(null);
+  const cancelClose = useCallback(() => {
+    if (timerRef.current !== null) clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }, []);
+  useEffect(() => cancelClose, [cancelClose]);
+  const handleFocus = useCallback(() => {
+    cancelClose();
+    open();
+  }, [cancelClose, open]);
+  const handleBlur = useCallback(() => {
+    cancelClose();
+    timerRef.current = setTimeout(close, CLOSE_DELAY_MS2);
+  }, [cancelClose, close]);
+  return { handleFocus, handleBlur };
+}
 
 // src/controls/suggestOptions.ts
 var RANK_VALUE_EXACT = 0;
@@ -1920,7 +1942,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) {
@@ -1942,6 +1963,7 @@ function TypeaheadControlImpl(props, ref) {
   const { colors, palette } = theme;
   const anchorRef = 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 !== "";
@@ -1965,8 +1987,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 }],
@@ -2228,6 +2250,18 @@ function useFocusFirstInvalid(refs) {
     first?.focus();
   }, []);
 }
+function isScrollable(node) {
+  return "scrollIntoView" in Object(node);
+}
+function useKeepInView(trigger) {
+  const ref = useRef(null);
+  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;
@@ -2293,6 +2327,6 @@ var UploadWithLinkField = ({
   ] });
 };
 
-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, FormStatusLine, FormSwitch, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, SelectControl, StepperNav, StepperTabs, ThemedTextInput, TypeaheadControl, UploadWithLinkField, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useFocusFirstInvalid, 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, FormStatusLine, FormSwitch, INLINE_FIELD_ROW_MIN_WIDTH, InlineFieldRow, SelectControl, StepperNav, StepperTabs, ThemedTextInput, TypeaheadControl, UploadWithLinkField, controlStyles, groupAriaChecked, inlineFieldRowLayout, isUnmatched, resolveGroupSelection, resolveStepNeighbours, suggestOptions, toggleGroupSelection, useFocusFirstInvalid, useKeepInView, useRecentValues, useThemedInput };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map