@primer/components 0.0.0-2021102918546 → 0.0.0-202110303104

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" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
+    }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
         className?: string | undefined;
         icon?: React.ComponentType<{
             className?: string | undefined;
@@ -38,9 +38,9 @@ declare const _default: React.FC<{
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
         block?: boolean | undefined;
+        sx?: import("../sx").BetterSystemStyleObject | undefined;
         variant?: "small" | "large" | undefined;
         role?: React.AriaRole | undefined;
-        sx?: import("../sx").BetterSystemStyleObject | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -290,13 +290,12 @@ declare const _default: React.FC<{
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
-        css?: import("@emotion/core").InterpolationWithTheme<any>;
         disabled?: boolean | undefined;
         hasIcon?: boolean | undefined;
         contrast?: boolean | undefined;
     } & {
         theme?: any;
-    }, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "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" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
@@ -30,9 +30,9 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
     block?: boolean | undefined;
+    sx?: import("../sx").BetterSystemStyleObject | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;
-    sx?: import("../sx").BetterSystemStyleObject | undefined;
     key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -282,12 +282,11 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLSpanElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
-    css?: import("@emotion/core").InterpolationWithTheme<any>;
     disabled?: boolean | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "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;

package/lib/Autocomplete/AutocompleteInput.jsx

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

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

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

package/lib/Autocomplete/index.js

@@ -1,15 +1,8 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Autocomplete.default;
-  }
-});
-
-var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Autocomplete_1 = require("./Autocomplete");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Autocomplete_1).default; } });

package/lib/Avatar.jsx

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+function getBorderRadius({ size, square }) {
+    if (square) {
+        return size && size <= 24 ? '4px' : '6px';
+    }
+    else {
+        return '50%';
+    }
+}
+const Avatar = styled_components_1.default.img.attrs(props => ({
+    height: props.size,
+    width: props.size
+})) `
+  display: inline-block;
+  overflow: hidden; // Ensure page layout in Firefox should images fail to load
+  line-height: ${constants_1.get('lineHeights.condensedUltra')};
+  vertical-align: middle;
+  border-radius: ${props => getBorderRadius(props)};
+  ${constants_1.COMMON};
+  ${sx_1.default}
+`;
+Avatar.defaultProps = {
+    size: 20,
+    alt: '',
+    square: false
+};
+exports.default = Avatar;

package/lib/AvatarPair.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Avatar_1 = __importDefault(require("./Avatar"));
+const constants_1 = require("./constants");
+const _1 = require(".");
+const ChildAvatar = styled_components_1.default(Avatar_1.default) `
+  position: absolute;
+  right: -15%;
+  bottom: -9%;
+  box-shadow: ${constants_1.get('shadows.avatar.childShadow')};
+`;
+const AvatarPair = ({ children, ...rest }) => {
+    const avatars = react_1.default.Children.map(children, (child, i) => {
+        if (!react_1.default.isValidElement(child))
+            return child;
+        return i === 0 ? (react_1.default.cloneElement(child, { size: 40 })) : (<ChildAvatar bg="canvas.default" {...child.props} size={20}/>);
+    });
+    return (<_1.Box position="relative" display="inline-flex" {...rest}>
+      {avatars}
+    </_1.Box>);
+};
+// styled() changes this
+AvatarPair.displayName = 'AvatarPair';
+exports.default = AvatarPair;