@dloizides/ui-forms 1.23.0 → 1.23.1

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 }],