@primer/components 0.0.0-202110303104 → 0.0.0-2021103082237

package/lib/ActionMenu.jsx

@@ -1,73 +0,0 @@
-"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

@@ -1,100 +0,0 @@
-"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/Autocomplete/Autocomplete.jsx

@@ -1,100 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-"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.jsx

@@ -1,113 +0,0 @@
-"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 AutocompleteContext_1 = require("./AutocompleteContext");
-const TextInput_1 = __importDefault(require("../TextInput"));
-const useCombinedRefs_1 = require("../hooks/useCombinedRefs");
-const AutocompleteInput = react_1.default.forwardRef(({ as: Component = TextInput_1.default, onFocus, onBlur, onChange, onKeyDown, onKeyUp, onKeyPress, value, ...props }, forwardedRef) => {
-    const autocompleteContext = react_1.useContext(AutocompleteContext_1.AutocompleteContext);
-    if (autocompleteContext === null) {
-        throw new Error('AutocompleteContext returned null values');
-    }
-    const { activeDescendantRef, autocompleteSuggestion = '', id, inputRef, inputValue = '', isMenuDirectlyActivated, setInputValue, setShowMenu, showMenu } = autocompleteContext;
-    const combinedInputRef = useCombinedRefs_1.useCombinedRefs(inputRef, forwardedRef);
-    const [highlightRemainingText, setHighlightRemainingText] = react_1.useState(true);
-    const handleInputFocus = react_1.useCallback(event => {
-        onFocus && onFocus(event);
-        setShowMenu(true);
-    }, [onFocus, setShowMenu]);
-    const handleInputBlur = react_1.useCallback(event => {
-        onBlur && onBlur(event);
-        // HACK: wait a tick and check the focused element before hiding the autocomplete menu
-        // this prevents the menu from hiding when the user is clicking an option in the Autoselect.Menu,
-        // but still hides the menu when the user blurs the input by tabbing out or clicking somewhere else on the page
-        setTimeout(() => {
-            if (document.activeElement !== combinedInputRef.current) {
-                setShowMenu(false);
-            }
-        }, 0);
-    }, [onBlur, setShowMenu, combinedInputRef]);
-    const handleInputChange = react_1.useCallback(event => {
-        onChange && onChange(event);
-        setInputValue(event.currentTarget.value);
-        if (!showMenu) {
-            setShowMenu(true);
-        }
-    }, [onChange, setInputValue, setShowMenu, showMenu]);
-    const handleInputKeyDown = react_1.useCallback(event => {
-        onKeyDown && onKeyDown(event);
-        if (event.key === 'Backspace') {
-            setHighlightRemainingText(false);
-        }
-        if (event.key === 'Escape' && inputRef.current?.value) {
-            setInputValue('');
-            inputRef.current.value = '';
-        }
-    }, [inputRef, setInputValue, setHighlightRemainingText, onKeyDown]);
-    const handleInputKeyUp = react_1.useCallback(event => {
-        onKeyUp && onKeyUp(event);
-        if (event.key === 'Backspace') {
-            setHighlightRemainingText(true);
-        }
-    }, [setHighlightRemainingText, onKeyUp]);
-    const onInputKeyPress = react_1.useCallback(event => {
-        onKeyPress && onKeyPress(event);
-        if (showMenu && event.key === 'Enter' && activeDescendantRef.current) {
-            event.preventDefault();
-            event.nativeEvent.stopImmediatePropagation();
-            // Forward Enter key press to active descendant so that item gets activated
-            const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
-            activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
-        }
-    }, [activeDescendantRef, showMenu, onKeyPress]);
-    react_1.useEffect(() => {
-        if (!inputRef.current) {
-            return;
-        }
-        // resets input value to being empty after a selection has been made
-        if (!autocompleteSuggestion) {
-            inputRef.current.value = inputValue;
-        }
-        // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text
-        //       is the same as what I'm typing
-        //       e.g.: typing 'tw' highights 'two', but when I 'two', the text input change does not get triggered
-        if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
-            inputRef.current.value = autocompleteSuggestion;
-            if (autocompleteSuggestion.toLowerCase().indexOf(inputValue.toLowerCase()) === 0) {
-                inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length);
-            }
-        }
-        // calling this useEffeect when `highlightRemainingText` changes breaks backspace functionality
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated]);
-    react_1.useEffect(() => {
-        if (value) {
-            setInputValue(value.toString());
-        }
-    }, [value, setInputValue]);
-    return (<Component onFocus={handleInputFocus} onBlur={handleInputBlur} onChange={handleInputChange} onKeyDown={handleInputKeyDown} onKeyPress={onInputKeyPress} onKeyUp={handleInputKeyUp} ref={combinedInputRef} aria-controls={`${id}-listbox`} aria-autocomplete="both" role="combobox" aria-expanded={showMenu} aria-haspopup="listbox" aria-owns={`${id}-listbox`} autocomplete="off" {...props}/>);
-});
-AutocompleteInput.displayName = 'AutocompleteInput';
-exports.default = AutocompleteInput;

package/lib/Autocomplete/AutocompleteMenu.jsx

@@ -1,190 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const ActionList_1 = require("../ActionList");
-const useFocusZone_1 = require("../hooks/useFocusZone");
-const __1 = require("../");
-const AutocompleteContext_1 = require("./AutocompleteContext");
-const octicons_react_1 = require("@primer/octicons-react");
-const uniqueId_1 = require("../utils/uniqueId");
-const scrollIntoViewingArea_1 = require("../behaviors/scrollIntoViewingArea");
-const getDefaultSortFn = (isItemSelectedFn) => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
-function getDefaultItemFilter(filterValue) {
-    return function (item, _i) {
-        return Boolean(item.text?.toLowerCase().startsWith(filterValue.toLowerCase()));
-    };
-}
-function getDefaultOnSelectionChange(setInputValueFn) {
-    return function (itemOrItems) {
-        const { text = '' } = Array.isArray(itemOrItems) ? itemOrItems.slice(-1)[0] : itemOrItems;
-        setInputValueFn(text);
-    };
-}
-const isItemSelected = (itemId, selectedItemIds) => selectedItemIds.includes(itemId);
-function getItemById(itemId, items) {
-    return items.find(item => item.id === itemId);
-}
-function AutocompleteMenu(props) {
-    const autocompleteContext = react_1.useContext(AutocompleteContext_1.AutocompleteContext);
-    if (autocompleteContext === null) {
-        throw new Error('AutocompleteContext returned null values');
-    }
-    const { activeDescendantRef, id, inputRef, inputValue = '', scrollContainerRef, setAutocompleteSuggestion, setShowMenu, setInputValue, setIsMenuDirectlyActivated, setSelectedItemLength, showMenu } = autocompleteContext;
-    const { items, selectedItemIds, sortOnCloseFn, emptyStateText, addNewItem, loading, selectionVariant, filterFn, 'aria-labelledby': ariaLabelledBy, onOpenChange, onSelectedChange, customScrollContainerRef } = props;
-    const listContainerRef = react_1.useRef(null);
-    const [highlightedItem, setHighlightedItem] = react_1.useState();
-    const [sortedItemIds, setSortedItemIds] = react_1.useState(items.map(({ id: itemId }) => itemId));
-    const selectableItems = react_1.useMemo(() => items.map(selectableItem => {
-        return {
-            ...selectableItem,
-            role: 'option',
-            id: selectableItem.id,
-            selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined,
-            onAction: (item) => {
-                const otherSelectedItemIds = selectedItemIds.filter(selectedItemId => selectedItemId !== item.id);
-                const newSelectedItemIds = selectedItemIds.includes(item.id)
-                    ? otherSelectedItemIds
-                    : [...otherSelectedItemIds, item.id];
-                const onSelectedChangeFn = onSelectedChange ? onSelectedChange : getDefaultOnSelectionChange(setInputValue);
-                onSelectedChangeFn(newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId, items)));
-                if (selectionVariant === 'multiple') {
-                    setInputValue('');
-                    setAutocompleteSuggestion('');
-                }
-                else {
-                    setShowMenu(false);
-                    inputRef.current?.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
-                }
-            }
-        };
-    }), [
-        items,
-        selectedItemIds,
-        inputRef,
-        onSelectedChange,
-        selectionVariant,
-        setAutocompleteSuggestion,
-        setInputValue,
-        setShowMenu
-    ]);
-    const itemSortOrderData = react_1.useMemo(() => sortedItemIds.reduce((acc, curr, i) => {
-        acc[curr] = i;
-        return acc;
-    }, {}), [sortedItemIds]);
-    const sortedAndFilteredItemsToRender = react_1.useMemo(() => selectableItems
-        .filter(filterFn ? filterFn : getDefaultItemFilter(inputValue))
-        .sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]), [selectableItems, itemSortOrderData, filterFn, inputValue]);
-    const allItemsToRender = react_1.useMemo(() => [
-        // sorted and filtered selectable items
-        ...sortedAndFilteredItemsToRender,
-        // menu item used for creating a token from whatever is in the text input
-        ...(addNewItem
-            ? [
-                {
-                    ...addNewItem,
-                    leadingVisual: () => <octicons_react_1.PlusIcon />,
-                    onAction: (item) => {
-                        // TODO: make it possible to pass a leadingVisual when using `addNewItem`
-                        addNewItem.handleAddItem({ ...item, id: item.id || uniqueId_1.uniqueId(), leadingVisual: undefined });
-                        if (selectionVariant === 'multiple') {
-                            setInputValue('');
-                            setAutocompleteSuggestion('');
-                        }
-                    }
-                }
-            ]
-            : [])
-    ], [sortedAndFilteredItemsToRender, addNewItem, setAutocompleteSuggestion, selectionVariant, setInputValue]);
-    useFocusZone_1.useFocusZone({
-        containerRef: listContainerRef,
-        focusOutBehavior: 'wrap',
-        focusableElementFilter: element => {
-            return !(element instanceof HTMLInputElement);
-        },
-        activeDescendantFocus: inputRef,
-        onActiveDescendantChanged: (current, _previous, directlyActivated) => {
-            activeDescendantRef.current = current || null;
-            if (current) {
-                const selectedItem = selectableItems.find(item => item.id.toString() === current.getAttribute('data-id'));
-                setHighlightedItem(selectedItem);
-                setIsMenuDirectlyActivated(directlyActivated);
-            }
-            if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
-                scrollIntoViewingArea_1.scrollIntoViewingArea(current, customScrollContainerRef.current);
-            }
-            else if (current && scrollContainerRef.current && directlyActivated) {
-                scrollIntoViewingArea_1.scrollIntoViewingArea(current, scrollContainerRef.current);
-            }
-        }
-    }, [loading]);
-    react_1.useEffect(() => {
-        if (highlightedItem?.text?.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
-            setAutocompleteSuggestion(highlightedItem.text);
-        }
-        else {
-            setAutocompleteSuggestion('');
-        }
-    }, [highlightedItem, inputValue, selectedItemIds, setAutocompleteSuggestion]);
-    react_1.useEffect(() => {
-        const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn(itemId => isItemSelected(itemId, selectedItemIds)));
-        const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length &&
-            itemIdSortResult.every((element, index) => element === sortedItemIds[index]);
-        if (showMenu === false && !sortResultMatchesState) {
-            setSortedItemIds(itemIdSortResult);
-        }
-        onOpenChange && onOpenChange(Boolean(showMenu));
-    }, [showMenu, onOpenChange, selectedItemIds, sortOnCloseFn, sortedItemIds]);
-    react_1.useEffect(() => {
-        if (selectedItemIds.length) {
-            setSelectedItemLength(selectedItemIds.length);
-        }
-    }, [selectedItemIds, setSelectedItemLength]);
-    return (<__1.Box sx={!showMenu
-            ? {
-                // visually hides this label for sighted users
-                position: 'absolute',
-                width: '1px',
-                height: '1px',
-                padding: '0',
-                margin: '-1px',
-                overflow: 'hidden',
-                clip: 'rect(0, 0, 0, 0)',
-                whiteSpace: 'nowrap',
-                borderWidth: '0'
-            }
-            : {}}>
-      {loading ? (<__1.Box p={3} display="flex" justifyContent="center">
-          <__1.Spinner />
-        </__1.Box>) : (<div ref={listContainerRef}>
-          {allItemsToRender.length ? (<ActionList_1.ActionList selectionVariant="multiple" 
-            // have to typecast to `ItemProps` because we have an extra property
-            // on `items` for Autocomplete: `metadata`
-            items={allItemsToRender} role="listbox" id={`${id}-listbox`} aria-labelledby={ariaLabelledBy}/>) : (<__1.Box p={3}>{emptyStateText}</__1.Box>)}
-        </div>)}
-    </__1.Box>);
-}
-AutocompleteMenu.defaultProps = {
-    emptyStateText: 'No selectable options',
-    selectionVariant: 'single'
-};
-AutocompleteMenu.displayName = 'AutocompleteMenu';
-exports.default = AutocompleteMenu;

package/lib/Autocomplete/AutocompleteOverlay.jsx

@@ -1,55 +0,0 @@
-"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 hooks_1 = require("../hooks");
-const Overlay_1 = __importDefault(require("../Overlay"));
-const AutocompleteContext_1 = require("./AutocompleteContext");
-const useCombinedRefs_1 = require("../hooks/useCombinedRefs");
-function AutocompleteOverlay({ menuAnchorRef, overlayProps, children }) {
-    const autocompleteContext = react_1.useContext(AutocompleteContext_1.AutocompleteContext);
-    if (autocompleteContext === null) {
-        throw new Error('AutocompleteContext returned null values');
-    }
-    const { inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu = false } = autocompleteContext;
-    const { floatingElementRef, position } = hooks_1.useAnchoredPosition({
-        side: 'outside-bottom',
-        align: 'start',
-        anchorElementRef: menuAnchorRef ? menuAnchorRef : inputRef
-    }, [showMenu, selectedItemLength]);
-    const combinedOverlayRef = useCombinedRefs_1.useCombinedRefs(scrollContainerRef, floatingElementRef);
-    const closeOptionList = react_1.useCallback(() => {
-        setShowMenu(false);
-    }, [setShowMenu]);
-    if (typeof window === 'undefined') {
-        return null;
-    }
-    return (<Overlay_1.default returnFocusRef={inputRef} preventFocusOnOpen={true} onClickOutside={closeOptionList} onEscape={closeOptionList} ref={combinedOverlayRef} top={position?.top} left={position?.left} visibility={showMenu ? 'visible' : 'hidden'} sx={{
-            overflow: 'auto'
-        }} {...overlayProps}>
-      {children}
-    </Overlay_1.default>);
-}
-AutocompleteOverlay.displayName = 'AutocompleteOverlay';
-exports.default = AutocompleteOverlay;