@magicx-eng/ai-autocomplete-react 0.3.0 → 0.4.0

package/dist/index.d.mts

@@ -103,6 +103,13 @@ interface UseAIAutocompleteReturn {
     isLoading: boolean;
     isFocused: boolean;
     isDropdownOpen: boolean;
+    /**
+     * Whether the active (leading) pill should render selected (full opacity)
+     * rather than the de-emphasized `first` tier. In `auto` trigger this is true
+     * only while a dropdown option is highlighted; in `manual` it's true once the
+     * pill has been tapped (the dropdown is open).
+     */
+    isActivePillSelected: boolean;
     placeholderText: string;
     listboxId: string;
     error: Error | null;
@@ -157,15 +164,27 @@ interface AIAutocompleteDropdownProps {
     onPillClick?: (index: number) => void;
     /** Whether to render pills inside the dropdown. Default: true. Tier 2 consumers who render their own pills should set this to false. */
     showPills?: boolean;
+    /** Whether the active pill renders selected (full opacity) vs. the `first` tier. Provided by `dropdownProps` from the hook. Default: false. */
+    activeSelected?: boolean;
     /** True while a fetch for the latest query is in flight. Replaces options/pills with a skeleton. */
     isLoading?: boolean;
     /** Once the user has tabbed to highlight an option, the footer hint switches from "tab to select" to "→ to skip". Provided by `dropdownProps` from the hook. */
     hasTabbedToHighlight?: boolean;
+    /** When the input has no typed text, the footer hint reads "tab to skip" (Tab skips the active pill). Provided by `dropdownProps` from the hook. */
+    isInputEmpty?: boolean;
+    /**
+     * Where the dropdown opens relative to the input. When `"above"`, the dropdown
+     * positions itself above (and reverses its internal layout so options sit
+     * nearest the input). Provided by `dropdownProps` from the hook, so headless
+     * consumers get the same above/below behavior as Tier 1 with no extra CSS.
+     * Default: `"below"`.
+     */
+    optionsPosition?: "above" | "below";
 }
 
 declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
 
-declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, isLoading, hasTabbedToHighlight, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
+declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, activeSelected, isLoading, hasTabbedToHighlight, isInputEmpty, optionsPosition, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
 
 declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
 

package/dist/index.d.ts

@@ -103,6 +103,13 @@ interface UseAIAutocompleteReturn {
     isLoading: boolean;
     isFocused: boolean;
     isDropdownOpen: boolean;
+    /**
+     * Whether the active (leading) pill should render selected (full opacity)
+     * rather than the de-emphasized `first` tier. In `auto` trigger this is true
+     * only while a dropdown option is highlighted; in `manual` it's true once the
+     * pill has been tapped (the dropdown is open).
+     */
+    isActivePillSelected: boolean;
     placeholderText: string;
     listboxId: string;
     error: Error | null;
@@ -157,15 +164,27 @@ interface AIAutocompleteDropdownProps {
     onPillClick?: (index: number) => void;
     /** Whether to render pills inside the dropdown. Default: true. Tier 2 consumers who render their own pills should set this to false. */
     showPills?: boolean;
+    /** Whether the active pill renders selected (full opacity) vs. the `first` tier. Provided by `dropdownProps` from the hook. Default: false. */
+    activeSelected?: boolean;
     /** True while a fetch for the latest query is in flight. Replaces options/pills with a skeleton. */
     isLoading?: boolean;
     /** Once the user has tabbed to highlight an option, the footer hint switches from "tab to select" to "→ to skip". Provided by `dropdownProps` from the hook. */
     hasTabbedToHighlight?: boolean;
+    /** When the input has no typed text, the footer hint reads "tab to skip" (Tab skips the active pill). Provided by `dropdownProps` from the hook. */
+    isInputEmpty?: boolean;
+    /**
+     * Where the dropdown opens relative to the input. When `"above"`, the dropdown
+     * positions itself above (and reverses its internal layout so options sit
+     * nearest the input). Provided by `dropdownProps` from the hook, so headless
+     * consumers get the same above/below behavior as Tier 1 with no extra CSS.
+     * Default: `"below"`.
+     */
+    optionsPosition?: "above" | "below";
 }
 
 declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
 
-declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, isLoading, hasTabbedToHighlight, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
+declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, activeSelected, isLoading, hasTabbedToHighlight, isInputEmpty, optionsPosition, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
 
 declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;