@primer/components 31.2.0-rc.fbb10090 → 31.2.0

package/lib/ActionList2/index.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { Divider } from './Divider';
+export type { ListProps as ActionListProps } from './List';
+export type { GroupProps } from './Group';
+export type { ItemProps } from './Item';
+export type { DescriptionProps } from './Description';
+export type { LeadingVisualProps, TrailingVisualProps } from './Visuals';
+/**
+ * Collection of list-related components.
+ */
+export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRefComponent<"ul", import("./List").ListProps> & {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: import("react").FC<import("./Group").GroupProps>;
+    /** An actionable or selectable `Item` */
+    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"li", import("./Item").ItemProps>;
+    /** A `Item` that renders a full-size anchor inside ListItem */
+    LinkItem: import("@radix-ui/react-polymorphic").ForwardRefComponent<"a", Pick<import("./Item").ItemProps, "children" | "sx"> & {
+        download?: string | undefined;
+        href?: string | undefined;
+        hrefLang?: string | undefined;
+        media?: string | undefined;
+        ping?: string | undefined;
+        rel?: string | undefined;
+        target?: string | undefined;
+        type?: string | undefined;
+        referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
+    }>;
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: typeof Divider;
+    /** Secondary text which provides additional information about an `Item`. */
+    Description: import("react").FC<import("./Description").DescriptionProps>;
+    /** Icon (or similar) positioned before `Item` text. */
+    LeadingVisual: import("react").FC<import("../sx").SxProp & import("react").HTMLAttributes<HTMLSpanElement>>;
+    /** Icon (or similar) positioned after `Item` text. */
+    TrailingVisual: import("react").FC<import("../sx").SxProp & import("react").HTMLAttributes<HTMLSpanElement>>;
+};

package/lib/ActionList2/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionList = void 0;
+const List_1 = require("./List");
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const LinkItem_1 = require("./LinkItem");
+const Divider_1 = require("./Divider");
+const Description_1 = require("./Description");
+const Visuals_1 = require("./Visuals");
+/**
+ * Collection of list-related components.
+ */
+exports.ActionList = Object.assign(List_1.List, {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: Group_1.Group,
+    /** An actionable or selectable `Item` */
+    Item: Item_1.Item,
+    /** A `Item` that renders a full-size anchor inside ListItem */
+    LinkItem: LinkItem_1.LinkItem,
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: Divider_1.Divider,
+    /** Secondary text which provides additional information about an `Item`. */
+    Description: Description_1.Description,
+    /** Icon (or similar) positioned before `Item` text. */
+    LeadingVisual: Visuals_1.LeadingVisual,
+    /** Icon (or similar) positioned after `Item` text. */
+    TrailingVisual: Visuals_1.TrailingVisual
+});

package/lib/ActionMenu.jsx

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionMenu = void 0;
+const List_1 = require("./ActionList/List");
+const Item_1 = require("./ActionList/Item");
+const Divider_1 = require("./ActionList/Divider");
+const Button_1 = __importDefault(require("./Button"));
+const react_1 = __importStar(require("react"));
+const AnchoredOverlay_1 = require("./AnchoredOverlay");
+const useProvidedStateOrCreate_1 = require("./hooks/useProvidedStateOrCreate");
+const hooks_1 = require("./hooks");
+const ActionMenuItem = (props) => <Item_1.Item role="menuitem" {...props}/>;
+ActionMenuItem.displayName = 'ActionMenu.Item';
+const ActionMenuBase = ({ anchorContent, renderAnchor = (props) => <Button_1.default {...props}/>, anchorRef: externalAnchorRef, onAction, open, setOpen, overlayProps, items, ...listProps }) => {
+    const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(open, setOpen, false);
+    const anchorRef = hooks_1.useProvidedRefOrCreate(externalAnchorRef);
+    const onOpen = react_1.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
+    const onClose = react_1.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
+    const renderMenuAnchor = react_1.useMemo(() => {
+        if (renderAnchor === null) {
+            return null;
+        }
+        return (props) => {
+            return renderAnchor({
+                'aria-label': 'menu',
+                children: anchorContent,
+                ...props
+            });
+        };
+    }, [anchorContent, renderAnchor]);
+    const itemsToRender = react_1.useMemo(() => {
+        return items.map(item => {
+            return {
+                ...item,
+                role: 'menuitem',
+                onAction: (props, event) => {
+                    const actionCallback = item.onAction ?? onAction;
+                    actionCallback?.(props, event);
+                    if (!event.defaultPrevented) {
+                        onClose();
+                    }
+                }
+            };
+        });
+    }, [items, onAction, onClose]);
+    return (<AnchoredOverlay_1.AnchoredOverlay renderAnchor={renderMenuAnchor} anchorRef={anchorRef} open={combinedOpenState} onOpen={onOpen} onClose={onClose} overlayProps={overlayProps}>
+      <List_1.List {...listProps} role="menu" items={itemsToRender}/>
+    </AnchoredOverlay_1.AnchoredOverlay>);
+};
+ActionMenuBase.displayName = 'ActionMenu';
+exports.ActionMenu = Object.assign(ActionMenuBase, { Divider: Divider_1.Divider, Item: ActionMenuItem });

package/lib/AnchoredOverlay/AnchoredOverlay.jsx

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnchoredOverlay = void 0;
+const react_1 = __importStar(require("react"));
+const Overlay_1 = __importDefault(require("../Overlay"));
+const useFocusTrap_1 = require("../hooks/useFocusTrap");
+const useFocusZone_1 = require("../hooks/useFocusZone");
+const hooks_1 = require("../hooks");
+const ssr_1 = require("@react-aria/ssr");
+/**
+ * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
+ * The overlay can be opened and navigated using keyboard or mouse.
+ */
+const AnchoredOverlay = ({ renderAnchor, anchorRef: externalAnchorRef, children, open, onOpen, onClose, height, width, overlayProps, focusTrapSettings, focusZoneSettings, side, align }) => {
+    const anchorRef = hooks_1.useProvidedRefOrCreate(externalAnchorRef);
+    const [overlayRef, updateOverlayRef] = hooks_1.useRenderForcingRef();
+    const anchorId = ssr_1.useSSRSafeId();
+    const onClickOutside = react_1.useCallback(() => onClose?.('click-outside'), [onClose]);
+    const onEscape = react_1.useCallback(() => onClose?.('escape'), [onClose]);
+    const onAnchorKeyDown = react_1.useCallback((event) => {
+        if (!event.defaultPrevented) {
+            if (!open && ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) {
+                onOpen?.('anchor-key-press');
+                event.preventDefault();
+            }
+        }
+    }, [open, onOpen]);
+    const onAnchorClick = react_1.useCallback((event) => {
+        if (event.defaultPrevented || event.button !== 0) {
+            return;
+        }
+        if (!open) {
+            onOpen?.('anchor-click');
+        }
+        else {
+            onClose?.('anchor-click');
+        }
+    }, [open, onOpen, onClose]);
+    const { position } = hooks_1.useAnchoredPosition({
+        anchorElementRef: anchorRef,
+        floatingElementRef: overlayRef,
+        side,
+        align
+    }, [overlayRef.current]);
+    react_1.useEffect(() => {
+        // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
+        if (!open && overlayRef.current) {
+            updateOverlayRef(null);
+        }
+    }, [open, overlayRef, updateOverlayRef]);
+    useFocusZone_1.useFocusZone({
+        containerRef: overlayRef,
+        disabled: !open || !position,
+        ...focusZoneSettings
+    });
+    useFocusTrap_1.useFocusTrap({ containerRef: overlayRef, disabled: !open || !position, ...focusTrapSettings });
+    return (<>
+      {renderAnchor &&
+            renderAnchor({
+                ref: anchorRef,
+                id: anchorId,
+                'aria-labelledby': anchorId,
+                'aria-haspopup': 'true',
+                tabIndex: 0,
+                onClick: onAnchorClick,
+                onKeyDown: onAnchorKeyDown
+            })}
+      {open ? (<Overlay_1.default returnFocusRef={anchorRef} onClickOutside={onClickOutside} ignoreClickRefs={[anchorRef]} onEscape={onEscape} ref={updateOverlayRef} role="none" visibility={position ? 'visible' : 'hidden'} height={height} width={width} top={position?.top || 0} left={position?.left || 0} anchorSide={position?.anchorSide} {...overlayProps}>
+          {children}
+        </Overlay_1.default>) : null}
+    </>);
+};
+exports.AnchoredOverlay = AnchoredOverlay;
+exports.AnchoredOverlay.displayName = 'AnchoredOverlay';
+exports.AnchoredOverlay.defaultProps = {
+    side: 'outside-bottom',
+    align: 'start'
+};

package/lib/AnchoredOverlay/index.js

@@ -1,13 +1,5 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "AnchoredOverlay", {
-  enumerable: true,
-  get: function () {
-    return _AnchoredOverlay.AnchoredOverlay;
-  }
-});
-
-var _AnchoredOverlay = require("./AnchoredOverlay");
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnchoredOverlay = void 0;
+var AnchoredOverlay_1 = require("./AnchoredOverlay");
+Object.defineProperty(exports, "AnchoredOverlay", { enumerable: true, get: function () { return AnchoredOverlay_1.AnchoredOverlay; } });

package/lib/Autocomplete/Autocomplete.d.ts

@@ -20,7 +20,7 @@ declare const _default: React.FC<{
     } & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
-    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
+    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
         className?: string | undefined;
         icon?: React.ComponentType<{
             className?: string | undefined;
@@ -37,6 +37,10 @@ declare const _default: React.FC<{
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
+        block?: boolean | undefined;
+        sx?: import("../sx").BetterSystemStyleObject | undefined;
+        variant?: "small" | "large" | undefined;
+        role?: React.AriaRole | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -44,17 +48,16 @@ declare const _default: React.FC<{
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         className?: string | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         placeholder?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
         tabIndex?: number | undefined;
         radioGroup?: string | undefined;
-        role?: React.AriaRole | undefined;
         about?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
@@ -77,47 +80,47 @@ declare const _default: React.FC<{
         inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
-        'aria-atomic'?: boolean | "true" | "false" | undefined;
-        'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
-        'aria-busy'?: boolean | "true" | "false" | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-atomic'?: boolean | "false" | "true" | undefined;
+        'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+        'aria-busy'?: boolean | "false" | "true" | undefined;
+        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-colcount'?: number | undefined;
         'aria-colindex'?: number | undefined;
         'aria-colspan'?: number | undefined;
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
-        'aria-disabled'?: boolean | "true" | "false" | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-disabled'?: boolean | "false" | "true" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
-        'aria-expanded'?: boolean | "true" | "false" | undefined;
+        'aria-expanded'?: boolean | "false" | "true" | undefined;
         'aria-flowto'?: string | undefined;
-        'aria-grabbed'?: boolean | "true" | "false" | undefined;
-        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
-        'aria-hidden'?: boolean | "true" | "false" | undefined;
-        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-grabbed'?: boolean | "false" | "true" | undefined;
+        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+        'aria-hidden'?: boolean | "false" | "true" | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
         'aria-label'?: string | undefined;
         'aria-labelledby'?: string | undefined;
         'aria-level'?: number | undefined;
         'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        'aria-modal'?: boolean | "true" | "false" | undefined;
-        'aria-multiline'?: boolean | "true" | "false" | undefined;
-        'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+        'aria-modal'?: boolean | "false" | "true" | undefined;
+        'aria-multiline'?: boolean | "false" | "true" | undefined;
+        'aria-multiselectable'?: boolean | "false" | "true" | undefined;
         'aria-orientation'?: "horizontal" | "vertical" | undefined;
         'aria-owns'?: string | undefined;
         'aria-placeholder'?: string | undefined;
         'aria-posinset'?: number | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-        'aria-readonly'?: boolean | "true" | "false" | undefined;
+        'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-readonly'?: boolean | "false" | "true" | undefined;
         'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-        'aria-required'?: boolean | "true" | "false" | undefined;
+        'aria-required'?: boolean | "false" | "true" | undefined;
         'aria-roledescription'?: string | undefined;
         'aria-rowcount'?: number | undefined;
         'aria-rowindex'?: number | undefined;
         'aria-rowspan'?: number | undefined;
-        'aria-selected'?: boolean | "true" | "false" | undefined;
+        'aria-selected'?: boolean | "false" | "true" | undefined;
         'aria-setsize'?: number | undefined;
         'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
         'aria-valuemax'?: number | undefined;
@@ -287,15 +290,12 @@ declare const _default: React.FC<{
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
-        block?: boolean | undefined;
-        sx?: import("../sx").BetterSystemStyleObject | undefined;
         disabled?: boolean | undefined;
-        variant?: "small" | "large" | undefined;
         hasIcon?: boolean | undefined;
         contrast?: boolean | undefined;
     } & {
         theme?: any;
-    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
+    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, {
         as?: React.ComponentType<any> | undefined;
     }>;
     Menu: typeof AutocompleteMenu;

package/lib/Autocomplete/Autocomplete.jsx

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const ssr_1 = require("@react-aria/ssr");
+const AutocompleteContext_1 = require("./AutocompleteContext");
+const AutocompleteInput_1 = __importDefault(require("./AutocompleteInput"));
+const AutocompleteMenu_1 = __importDefault(require("./AutocompleteMenu"));
+const AutocompleteOverlay_1 = __importDefault(require("./AutocompleteOverlay"));
+const initialState = {
+    inputValue: '',
+    showMenu: false,
+    isMenuDirectlyActivated: false,
+    autocompleteSuggestion: '',
+    selectedItemLength: 0
+};
+const reducer = (state, action) => {
+    const { type, payload } = action;
+    switch (type) {
+        case 'inputValue':
+            return { ...state, inputValue: payload };
+        case 'showMenu':
+            return { ...state, showMenu: payload };
+        case 'isMenuDirectlyActivated':
+            return { ...state, isMenuDirectlyActivated: payload };
+        case 'autocompleteSuggestion':
+            return { ...state, autocompleteSuggestion: payload };
+        case 'selectedItemLength':
+            return { ...state, selectedItemLength: payload };
+        default:
+            return state;
+    }
+};
+const Autocomplete = ({ children, id: idProp }) => {
+    const activeDescendantRef = react_1.useRef(null);
+    const scrollContainerRef = react_1.useRef(null);
+    const inputRef = react_1.useRef(null);
+    const [state, dispatch] = react_1.useReducer(reducer, initialState);
+    const { inputValue, showMenu, autocompleteSuggestion, isMenuDirectlyActivated, selectedItemLength } = state;
+    const setInputValue = react_1.useCallback((value) => {
+        dispatch({ type: 'inputValue', payload: value });
+    }, []);
+    const setShowMenu = react_1.useCallback((value) => {
+        dispatch({ type: 'showMenu', payload: value });
+    }, []);
+    const setAutocompleteSuggestion = react_1.useCallback((value) => {
+        dispatch({ type: 'autocompleteSuggestion', payload: value });
+    }, []);
+    const setIsMenuDirectlyActivated = react_1.useCallback((value) => {
+        dispatch({ type: 'isMenuDirectlyActivated', payload: value });
+    }, []);
+    const setSelectedItemLength = react_1.useCallback((value) => {
+        dispatch({ type: 'selectedItemLength', payload: value });
+    }, []);
+    const id = ssr_1.useSSRSafeId(idProp);
+    return (<AutocompleteContext_1.AutocompleteContext.Provider value={{
+            activeDescendantRef,
+            autocompleteSuggestion,
+            id,
+            inputRef,
+            inputValue,
+            isMenuDirectlyActivated,
+            scrollContainerRef,
+            selectedItemLength,
+            setAutocompleteSuggestion,
+            setInputValue,
+            setIsMenuDirectlyActivated,
+            setShowMenu,
+            setSelectedItemLength,
+            showMenu
+        }}>
+      {children}
+    </AutocompleteContext_1.AutocompleteContext.Provider>);
+};
+exports.default = Object.assign(Autocomplete, {
+    Input: AutocompleteInput_1.default,
+    Menu: AutocompleteMenu_1.default,
+    Overlay: AutocompleteOverlay_1.default
+});

package/lib/Autocomplete/AutocompleteContext.jsx

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteContext = void 0;
+const react_1 = require("react");
+exports.AutocompleteContext = react_1.createContext(null);

package/lib/Autocomplete/AutocompleteInput.d.ts

@@ -12,7 +12,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
@@ -29,6 +29,10 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
+    block?: boolean | undefined;
+    sx?: import("../sx").BetterSystemStyleObject | undefined;
+    variant?: "small" | "large" | undefined;
+    role?: React.AriaRole | undefined;
     key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -36,17 +40,16 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
     radioGroup?: string | undefined;
-    role?: React.AriaRole | undefined;
     about?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
@@ -69,47 +72,47 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
-    'aria-busy'?: boolean | "true" | "false" | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-atomic'?: boolean | "false" | "true" | undefined;
+    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-busy'?: boolean | "false" | "true" | undefined;
+    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-disabled'?: boolean | "false" | "true" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "true" | "false" | undefined;
+    'aria-expanded'?: boolean | "false" | "true" | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
-    'aria-hidden'?: boolean | "true" | "false" | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: boolean | "false" | "true" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-hidden'?: boolean | "false" | "true" | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "true" | "false" | undefined;
-    'aria-multiline'?: boolean | "true" | "false" | undefined;
-    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+    'aria-modal'?: boolean | "false" | "true" | undefined;
+    'aria-multiline'?: boolean | "false" | "true" | undefined;
+    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-readonly'?: boolean | "false" | "true" | undefined;
     'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "true" | "false" | undefined;
+    'aria-required'?: boolean | "false" | "true" | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "true" | "false" | undefined;
+    'aria-selected'?: boolean | "false" | "true" | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;
@@ -279,14 +282,11 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
-    block?: boolean | undefined;
-    sx?: import("../sx").BetterSystemStyleObject | undefined;
     disabled?: boolean | undefined;
-    variant?: "small" | "large" | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>>, InternalAutocompleteInputProps>;
 export declare type AutocompleteInputProps = ComponentProps<typeof AutocompleteInput>;
 export default AutocompleteInput;