@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/dist/Typeahead/BaseTypeahead.js

@@ -113,6 +113,19 @@ const itemSizeStyles = {
   }
 };
 
+// =============================================================================
+// Helpers
+// =============================================================================
+
+/**
+ * A query that has been typed but is still shorter than the caller's
+ * threshold. An empty query is not "below the minimum" — it is the
+ * untouched state, and `hasEntriesOnFocus` owns what happens there.
+ */
+function isBelowMinQueryLength(query, minQueryLength) {
+  return query.length > 0 && query.length < minQueryLength;
+}
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -145,12 +158,14 @@ export const BaseTypeahead = function BaseTypeahead({
   hasEntriesOnFocus = false,
   maxMenuItems = 10,
   menuWidth,
+  minQueryLength = 1,
   emptySearchResultsText: emptySearchResultsTextFromProps,
   isDisabled = false,
   isFocusableDisabled = false,
   hasAutoFocus = false,
   onChangeQuery,
   onOpenChange,
+  __queryEntries,
   inputId: externalInputId,
   ariaDescribedBy,
   ariaLabelledBy,
@@ -259,7 +274,8 @@ export const BaseTypeahead = function BaseTypeahead({
         return;
       }
       resultsGenRef.current = gen;
-      const shown = searchResults.slice(0, maxMenuItems);
+      const fetched = searchResults.slice(0, maxMenuItems);
+      const shown = [...fetched, ...(__queryEntries?.(searchQuery, fetched) ?? [])];
       setResults(shown);
       setHighlightedIndex(shown.length > 0 ? 0 : -1);
       if (searchResults.length > 0 || searchQuery.length > 0) {
@@ -283,7 +299,7 @@ export const BaseTypeahead = function BaseTypeahead({
         setIsLoading(false);
       }
     }
-  }, [searchSource, maxMenuItems, showLayer, announce, emptySearchResultsText, t]);
+  }, [searchSource, maxMenuItems, showLayer, announce, emptySearchResultsText, __queryEntries, t]);
 
   // Perform bootstrap
   const performBootstrap = useCallback(async () => {
@@ -320,14 +336,33 @@ export const BaseTypeahead = function BaseTypeahead({
     if (searchTimeoutRef.current) {
       clearTimeout(searchTimeoutRef.current);
     }
-    if (newQuery.length === 0 && !hasEntriesOnFocus) {
+
+    // Nothing to search: either the field was emptied, or the query is
+    // still shorter than `minQueryLength`. Both drop stale results and
+    // close the menu — showing the empty state for a query that was never
+    // searched would report "no results" that nobody looked for.
+    if (newQuery.length === 0 && !hasEntriesOnFocus || isBelowMinQueryLength(newQuery, minQueryLength)) {
       searchGenRef.current++;
       searchSource.cancel?.();
-      setResults([]);
+      // A query too short to search can still carry entries derived from
+      // the text itself. `hasSearched` stays false either way, so the menu
+      // never reports "no results" for a query nobody looked for.
+      const derived = __queryEntries?.(newQuery, []) ?? [];
+      setResults(derived);
+      setHighlightedIndex(derived.length > 0 ? 0 : -1);
       setHasSearched(false);
+      // Bumping the generation abandons any in-flight search, which means
+      // its own `finally` will decline to clear this — so clear it here or
+      // the field spins forever. Backspacing below the threshold on a remote
+      // source is the everyday way to hit that.
+      setIsLoading(false);
       // Clear any lingering result-count / no-results announcement.
       announce('');
-      popover.hide();
+      if (derived.length > 0) {
+        showLayer();
+      } else {
+        popover.hide();
+      }
       return;
     }
     const triggerSearch = () => {
@@ -342,7 +377,7 @@ export const BaseTypeahead = function BaseTypeahead({
     } else {
       searchTimeoutRef.current = setTimeout(triggerSearch, debounceMs);
     }
-  }, [onChangeQuery, hasEntriesOnFocus, performSearch, performBootstrap, popover, debounceMs, searchSource, announce]);
+  }, [onChangeQuery, hasEntriesOnFocus, minQueryLength, __queryEntries, showLayer, performSearch, performBootstrap, popover, debounceMs, searchSource, announce]);
 
   // Handle input change
   const handleInputChange = useCallback(e => {
@@ -362,6 +397,10 @@ export const BaseTypeahead = function BaseTypeahead({
     setQuery('');
     setResults([]);
     setHasSearched(false);
+    // Same reason as in handleQueryChange: the invalidated search will not
+    // clear this itself. Selecting a stale result while the next search is
+    // still in flight would otherwise leave the field spinning.
+    setIsLoading(false);
     popover.hide();
     inputRef.current?.focus();
   }, [onChange, popover, searchSource]);
@@ -428,7 +467,11 @@ export const BaseTypeahead = function BaseTypeahead({
         if (results.length > 0) {
           popover.show();
           setHighlightedIndex(0);
-        } else if (hasEntriesOnFocus) {
+        } else if (hasEntriesOnFocus &&
+        // A below-threshold query was never searched; falling back to the
+        // bootstrap entries here would open a menu of suggestions that
+        // ignore what the user has already typed.
+        !isBelowMinQueryLength(query, minQueryLength)) {
           void performBootstrap();
         }
       }
@@ -482,7 +525,7 @@ export const BaseTypeahead = function BaseTypeahead({
         }
         break;
     }
-  }, [popover, results, highlightedIndex, handleSelect, hasEntriesOnFocus, query.length, performBootstrap, externalOnKeyDown]);
+  }, [popover, results, highlightedIndex, handleSelect, hasEntriesOnFocus, query, minQueryLength, performBootstrap, externalOnKeyDown]);
 
   // Generate item ID for accessibility
   const getItemId = useCallback(index => `${listboxId}-option-${index}`, [listboxId]);

package/dist/Typeahead/Typeahead.d.ts

@@ -69,6 +69,13 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<BaseProps
     hasEntriesOnFocus?: boolean;
     /** Max dropdown items. @default 10 */
     maxMenuItems?: number;
+    /**
+     * Minimum query length before the search source is queried. Below it no
+     * search runs and the menu stays closed — useful for remote sources where
+     * one or two characters match too much to be worth fetching.
+     * @default 1
+     */
+    minQueryLength?: number;
     /** Text shown when no results found. @default 'No results found' */
     emptySearchResultsText?: string;
     /** Whether the input is disabled. @default false */
@@ -134,7 +141,7 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<BaseProps
  * />
  * ```
  */
-export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, emptySearchResultsText, isDisabled, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, width, xstyle, className, style, 'data-testid': testId, }: TypeaheadProps<T>): React.JSX.Element;
+export declare function Typeahead<T extends SearchableItem>({ ref, label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, placeholder, hasEntriesOnFocus, maxMenuItems, minQueryLength, emptySearchResultsText, isDisabled, disabledMessage, hasClear, hasAutoFocus, size: sizeProp, debounceMs, onChangeQuery, onOpenChange, width, xstyle, className, style, 'data-testid': testId, }: TypeaheadProps<T>): React.JSX.Element;
 export declare namespace Typeahead {
     var displayName: string;
 }

package/dist/Typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"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"}

package/dist/Typeahead/Typeahead.js

@@ -132,6 +132,7 @@ export function Typeahead({
   placeholder,
   hasEntriesOnFocus,
   maxMenuItems,
+  minQueryLength,
   emptySearchResultsText,
   isDisabled = false,
   disabledMessage,
@@ -312,6 +313,7 @@ export function Typeahead({
         placeholder: showToken ? undefined : placeholder,
         hasEntriesOnFocus: hasEntriesOnFocus,
         maxMenuItems: maxMenuItems,
+        minQueryLength: minQueryLength,
         emptySearchResultsText: emptySearchResultsText,
         isDisabled: isDisabled,
         hasAutoFocus: hasAutoFocus,

package/dist/Typeahead/TypeaheadItem.d.ts

@@ -59,7 +59,7 @@ export interface TypeaheadItemProps<T extends SearchableItem = SearchableItem> e
  * />
  * ```
  */
-export declare function TypeaheadItem<T extends SearchableItem>({ ref, item, icon, description, isDisabled, xstyle, }: TypeaheadItemProps<T>): React.JSX.Element;
+export declare function TypeaheadItem<T extends SearchableItem>({ ref, item, icon, description, isDisabled, group: _group, xstyle, className, style, ...rest }: TypeaheadItemProps<T>): React.JSX.Element;
 export declare namespace TypeaheadItem {
     var displayName: string;
 }

package/dist/Typeahead/TypeaheadItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadItem.d.ts","sourceRoot":"","sources":["../../src/Typeahead/TypeaheadItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EACtD,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,UAAkB,EAClB,MAAM,GACP,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAsBvB;yBA7Be,aAAa"}
+{"version":3,"file":"TypeaheadItem.d.ts","sourceRoot":"","sources":["../../src/Typeahead/TypeaheadItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EACtD,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,UAAkB,EAClB,KAAK,EAAE,MAAM,EACb,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAyBvB;yBApCe,aAAa"}

package/dist/Typeahead/TypeaheadItem.js

@@ -74,7 +74,11 @@ export function TypeaheadItem({
   icon,
   description,
   isDisabled = false,
-  xstyle
+  group: _group,
+  xstyle,
+  className,
+  style,
+  ...rest
 }) {
   // If item has a pre-rendered element, use it
   if (item.element) {
@@ -84,7 +88,8 @@ export function TypeaheadItem({
   }
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
-    ...mergeProps(themeProps('typeahead-item'), stylex.props(styles.container, isDisabled && styles.disabled, xstyle)),
+    ...mergeProps(themeProps('typeahead-item'), stylex.props(styles.container, isDisabled && styles.disabled, xstyle), className, style),
+    ...rest,
     children: [icon, /*#__PURE__*/_jsxs("div", {
       ...{
         className: "x78zum5 xdt5ytf x98rzlu xeuugli"