@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.09f015db1

package/lib-esm/Autocomplete/AutocompleteInput.js

@@ -1,145 +0,0 @@
-import React, { useContext, useState, useCallback, useEffect } from 'react';
-import { AutocompleteContext } from './AutocompleteContext.js';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
-import useSafeTimeout from '../hooks/useSafeTimeout.js';
-import { jsx } from 'react/jsx-runtime';
-import TextInput from '../TextInput/TextInput.js';
-
-const ARROW_KEYS_NAV = new Set(['ArrowUp', 'ArrowDown']);
-const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
-  as: Component = TextInput,
-  onFocus,
-  onBlur,
-  onChange,
-  onKeyDown,
-  onKeyUp,
-  onKeyPress,
-  value,
-  openOnFocus = false,
-  ...props
-}, forwardedRef) => {
-  const autocompleteContext = useContext(AutocompleteContext);
-  if (autocompleteContext === null) {
-    throw new Error('AutocompleteContext returned null values');
-  }
-  const {
-    activeDescendantRef,
-    autocompleteSuggestion = '',
-    id,
-    inputRef,
-    inputValue = '',
-    isMenuDirectlyActivated,
-    setInputValue,
-    setShowMenu,
-    showMenu
-  } = autocompleteContext;
-  useRefObjectAsForwardedRef(forwardedRef, inputRef);
-  const [highlightRemainingText, setHighlightRemainingText] = useState(true);
-  const {
-    safeSetTimeout
-  } = useSafeTimeout();
-  const handleInputFocus = event => {
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    if (openOnFocus) {
-      setShowMenu(true);
-    }
-  };
-  const handleInputBlur = 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
-    safeSetTimeout(() => {
-      if (document.activeElement !== inputRef.current) {
-        setShowMenu(false);
-      }
-    }, 0);
-  }, [onBlur, setShowMenu, inputRef, safeSetTimeout]);
-  const handleInputChange = event => {
-    onChange && onChange(event);
-    setInputValue(event.currentTarget.value);
-    if (!showMenu) {
-      setShowMenu(true);
-    }
-  };
-  const handleInputKeyDown = useCallback(event => {
-    var _inputRef$current;
-    onKeyDown && onKeyDown(event);
-    if (event.key === 'Backspace') {
-      setHighlightRemainingText(false);
-    }
-    if (event.key === 'Escape' && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) {
-      setInputValue('');
-      inputRef.current.value = '';
-    }
-    if (!showMenu && ARROW_KEYS_NAV.has(event.key) && !event.altKey) {
-      setShowMenu(true);
-    }
-  }, [inputRef, setInputValue, setHighlightRemainingText, onKeyDown, showMenu, setShowMenu]);
-  const handleInputKeyUp = useCallback(event => {
-    onKeyUp && onKeyUp(event);
-    if (event.key === 'Backspace') {
-      setHighlightRemainingText(true);
-    }
-  }, [setHighlightRemainingText, onKeyUp]);
-  const onInputKeyPress = 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]);
-  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' highlights '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 useEffect when `highlightRemainingText` changes breaks backspace functionality
-    // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated]);
-  useEffect(() => {
-    setInputValue(typeof value !== 'undefined' ? value.toString() : '');
-  }, [value, setInputValue]);
-  return /*#__PURE__*/jsx(Component, {
-    onFocus: handleInputFocus,
-    onBlur: handleInputBlur,
-    onChange: handleInputChange,
-    onKeyDown: handleInputKeyDown,
-    onKeyPress: onInputKeyPress,
-    onKeyUp: handleInputKeyUp,
-    ref: inputRef,
-    "aria-controls": `${id}-listbox`,
-    "aria-autocomplete": "both",
-    role: "combobox",
-    "aria-expanded": showMenu,
-    "aria-haspopup": "listbox",
-    "aria-owns": `${id}-listbox`,
-    autoComplete: "off",
-    id: id,
-    ...props
-  });
-});
-AutocompleteInput.displayName = 'AutocompleteInput';
-
-export { AutocompleteInput as default };

package/lib-esm/Autocomplete/AutocompleteMenu.d.ts

@@ -1,75 +0,0 @@
-import React from 'react';
-import type { ActionListItemProps } from '../ActionList';
-import type { ComponentProps, MandateProps } from '../utils/types';
-import type { IconProps } from '@primer/octicons-react';
-type OnSelectedChange<T> = (item: T | T[]) => void;
-export type AutocompleteMenuItem = MandateProps<ActionListItemProps, 'id'> & {
-    leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement;
-    text?: string;
-    trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement;
-};
-type AutocompleteItemProps<T = Record<string, any>> = AutocompleteMenuItem & {
-    metadata?: T;
-};
-export type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
-    /**
-     * A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop.
-     * This menu item gets appended to the end of the list of options.
-     */
-    addNewItem?: T & {
-        handleAddItem: (item: Omit<T, 'onAction' | 'leadingVisual'>) => void;
-    };
-    /**
-     * The text that appears in the menu when there are no options in the array passed to the `items` prop.
-     */
-    emptyStateText?: React.ReactNode | false | null;
-    /**
-     * A custom function used to filter the options in the array passed to the `items` prop.
-     * By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive.
-     */
-    filterFn?: (item: T, i: number) => boolean;
-    /**
-     * The options for field values that are displayed in the dropdown menu.
-     * One or more may be selected depending on the value of the `selectionVariant` prop.
-     */
-    items: T[];
-    /**
-     * Whether the data is loaded for the menu items
-     */
-    loading?: boolean;
-    /**
-     * The IDs of the selected items
-     */
-    selectedItemIds: string[];
-    /**
-     * The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu.
-     * By default, selected items are sorted to the top after the user closes the menu.
-     */
-    sortOnCloseFn?: (itemIdA: string, itemIdB: string) => number;
-    /**
-     * Whether there can be one item selected from the menu or multiple items selected from the menu
-     */
-    selectionVariant?: 'single' | 'multiple';
-    /**
-     * Function that gets called when the menu is opened or closed
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * The function that is called when an item in the list is selected or deselected
-     */
-    onSelectedChange?: OnSelectedChange<T>;
-    /**
-     * If the menu is rendered in a scrolling element other than the `Autocomplete.Overlay` component,
-     * pass the ref of that element to `customScrollContainerRef` to ensure the container automatically
-     * scrolls when the user highlights an item in the menu that is outside the scroll container
-     */
-    customScrollContainerRef?: React.MutableRefObject<HTMLElement | null>;
-    ['aria-labelledby']: string;
-};
-declare function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T>): React.JSX.Element;
-declare namespace AutocompleteMenu {
-    var displayName: string;
-}
-export type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>;
-export default AutocompleteMenu;
-//# sourceMappingURL=AutocompleteMenu.d.ts.map

package/lib-esm/Autocomplete/AutocompleteMenu.js

@@ -1,245 +0,0 @@
-import React, { useContext, useRef, useState, useMemo, useEffect } from 'react';
-import { debounce } from '../node_modules/@github/mini-throttle/dist/index.js';
-import { announce } from '@primer/live-region-element';
-import { scrollIntoView } from '@primer/behaviors';
-import { ActionList } from '../ActionList/index.js';
-import { useFocusZone } from '../hooks/useFocusZone.js';
-import { useId } from '../hooks/useId.js';
-import { AutocompleteContext } from './AutocompleteContext.js';
-import { PlusIcon } from '@primer/octicons-react';
-import VisuallyHidden from '../_VisuallyHidden.js';
-import { isElement } from 'react-is';
-import classes from './AutocompleteMenu.module.css.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import StyledSpinner from '../Spinner/Spinner.js';
-
-const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
-const menuScrollMargins = {
-  startMargin: 0,
-  endMargin: 8
-};
-function getDefaultItemFilter(filterValue) {
-  return function (item, _i) {
-    var _item$text;
-    return Boolean((_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.toLowerCase().startsWith(filterValue.toLowerCase()));
-  };
-}
-function getdefaultCheckedSelectionChange(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);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-/**
- * Announces a message to screen readers at a slowed-down rate. This is useful when you want to announce don't want to
- * overwhelm the user with too many announcements in rapid succession.
- */
-const debounceAnnouncement = debounce(announcement => {
-  announce(announcement);
-}, 250);
-function AutocompleteMenu(props) {
-  const autocompleteContext = useContext(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 = 'No selectable options',
-    addNewItem,
-    loading,
-    selectionVariant = 'single',
-    filterFn,
-    'aria-labelledby': ariaLabelledBy,
-    onOpenChange,
-    onSelectedChange,
-    customScrollContainerRef
-  } = props;
-  const listContainerRef = useRef(null);
-  const allItemsToRenderRef = useRef([]);
-  const [highlightedItem, setHighlightedItem] = useState();
-  const [sortedItemIds, setSortedItemIds] = useState(items.map(({
-    id: itemId
-  }) => itemId));
-  const generatedUniqueId = useId(id);
-  const selectableItems = useMemo(() => items.map(selectableItem => {
-    return {
-      ...selectableItem,
-      role: 'option',
-      id: selectableItem.id,
-      active: (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.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 : getdefaultCheckedSelectionChange(setInputValue);
-        onSelectedChangeFn(newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId, items)));
-        if (selectionVariant === 'multiple') {
-          setInputValue('');
-          setAutocompleteSuggestion('');
-        } else {
-          var _inputRef$current;
-          setShowMenu(false);
-          (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
-        }
-      }
-    };
-  }), [highlightedItem, items, selectedItemIds, inputRef, onSelectedChange, selectionVariant, setAutocompleteSuggestion, setInputValue, setShowMenu]);
-  const itemSortOrderData = useMemo(() => sortedItemIds.reduce((acc, curr, i) => {
-    acc[curr] = i;
-    return acc;
-  }, {}), [sortedItemIds]);
-  const sortedAndFilteredItemsToRender = useMemo(() => selectableItems.filter(filterFn ? filterFn : getDefaultItemFilter(inputValue)).sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]), [selectableItems, itemSortOrderData, filterFn, inputValue]);
-  const allItemsToRender = useMemo(() => [
-  // sorted and filtered selectable items
-  ...sortedAndFilteredItemsToRender,
-  // menu item used for creating a token from whatever is in the text input
-  ...(addNewItem ? [{
-    ...addNewItem,
-    role: 'option',
-    key: addNewItem.id,
-    active: (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) === addNewItem.id,
-    selected: selectionVariant === 'multiple' ? selectedItemIds.includes(addNewItem.id) : undefined,
-    leadingVisual: () => /*#__PURE__*/jsx(PlusIcon, {}),
-    onAction: item_0 => {
-      // TODO: make it possible to pass a leadingVisual when using `addNewItem`
-      addNewItem.handleAddItem({
-        ...item_0,
-        id: item_0.id || generatedUniqueId,
-        leadingVisual: undefined
-      });
-      if (selectionVariant === 'multiple') {
-        setInputValue('');
-        setAutocompleteSuggestion('');
-      }
-    }
-  }] : [])], [sortedAndFilteredItemsToRender, addNewItem, setAutocompleteSuggestion, selectionVariant, setInputValue, generatedUniqueId, highlightedItem, selectedItemIds]);
-  React.useEffect(() => {
-    allItemsToRenderRef.current = allItemsToRender;
-  });
-  React.useEffect(() => {
-    if (allItemsToRender.length === 0) {
-      debounceAnnouncement(emptyStateText);
-    }
-  }, [allItemsToRender, emptyStateText]);
-  useFocusZone({
-    containerRef: listContainerRef,
-    focusOutBehavior: 'wrap',
-    focusableElementFilter: element => {
-      return !(element instanceof HTMLInputElement);
-    },
-    activeDescendantFocus: inputRef,
-    onActiveDescendantChanged: (current, _previous, directlyActivated) => {
-      // eslint-disable-next-line react-compiler/react-compiler
-      activeDescendantRef.current = current || null;
-      if (current) {
-        const selectedItem = allItemsToRenderRef.current.find(item_1 => {
-          var _current$closest;
-          return item_1.id === ((_current$closest = current.closest('li')) === null || _current$closest === void 0 ? void 0 : _current$closest.getAttribute('data-id'));
-        });
-        setHighlightedItem(selectedItem);
-        setIsMenuDirectlyActivated(directlyActivated);
-      }
-      if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
-        scrollIntoView(current, customScrollContainerRef.current, menuScrollMargins);
-      } else if (current && scrollContainerRef.current && directlyActivated) {
-        scrollIntoView(current, scrollContainerRef.current, menuScrollMargins);
-      }
-    }
-  }, [loading]);
-  useEffect(() => {
-    var _highlightedItem$text;
-    if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
-      setAutocompleteSuggestion(highlightedItem.text);
-    } else {
-      setAutocompleteSuggestion('');
-    }
-  }, [highlightedItem, inputValue, selectedItemIds, setAutocompleteSuggestion]);
-  useEffect(() => {
-    const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn(itemId_0 => isItemSelected(itemId_0, selectedItemIds)));
-    const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length && itemIdSortResult.every((element_0, index) => element_0 === sortedItemIds[index]);
-    if (showMenu === false && !sortResultMatchesState) {
-      setSortedItemIds(itemIdSortResult);
-    }
-    onOpenChange && onOpenChange(Boolean(showMenu));
-  }, [showMenu, onOpenChange, selectedItemIds, sortOnCloseFn, sortedItemIds]);
-  useEffect(() => {
-    if (selectedItemIds.length) {
-      setSelectedItemLength(selectedItemIds.length);
-    }
-  }, [selectedItemIds, setSelectedItemLength]);
-  if (selectionVariant === 'single' && selectedItemIds.length > 1) {
-    throw new Error('Autocomplete: selectionVariant "single" cannot be used with multiple selected items');
-  }
-  return /*#__PURE__*/jsx(VisuallyHidden, {
-    isVisible: showMenu,
-    children: loading ? /*#__PURE__*/jsx("div", {
-      className: classes.SpinnerWrapper,
-      children: /*#__PURE__*/jsx(StyledSpinner, {})
-    }) : /*#__PURE__*/jsx("div", {
-      ref: listContainerRef,
-      children: allItemsToRender.length ? /*#__PURE__*/jsx(ActionList, {
-        selectionVariant: selectionVariant // TODO: make this configurable
-        ,
-        role: "listbox",
-        id: `${id}-listbox`,
-        "aria-labelledby": ariaLabelledBy,
-        children: allItemsToRender.map(item_2 => {
-          const {
-            id: id_0,
-            onAction,
-            children,
-            text,
-            leadingVisual: LeadingVisual,
-            trailingVisual: TrailingVisual,
-            // @ts-expect-error this is defined in the items above but is
-            // missing in TS
-            key,
-            ...itemProps
-          } = item_2;
-          return /*#__PURE__*/jsxs(ActionList.Item, {
-            onSelect: () => onAction(item_2),
-            ...itemProps,
-            id: id_0,
-            "data-id": id_0,
-            children: [LeadingVisual && /*#__PURE__*/jsx(ActionList.LeadingVisual, {
-              children: isElement(LeadingVisual) ? LeadingVisual : /*#__PURE__*/jsx(LeadingVisual, {})
-            }), children !== null && children !== void 0 ? children : text, TrailingVisual && /*#__PURE__*/jsx(ActionList.TrailingVisual, {
-              children: isElement(TrailingVisual) ? TrailingVisual : /*#__PURE__*/jsx(TrailingVisual, {})
-            })]
-          }, key !== null && key !== void 0 ? key : id_0);
-        })
-      }) : emptyStateText !== false && emptyStateText !== null ? /*#__PURE__*/jsx("div", {
-        className: classes.EmptyStateWrapper,
-        children: emptyStateText
-      }) : null
-    })
-  });
-}
-AutocompleteMenu.displayName = "AutocompleteMenu";
-AutocompleteMenu.displayName = 'AutocompleteMenu';
-
-export { AutocompleteMenu as default };

package/lib-esm/Autocomplete/AutocompleteOverlay.d.ts

@@ -1,21 +0,0 @@
-import type React from 'react';
-import type { OverlayProps } from '../Overlay';
-import type { ComponentProps } from '../utils/types';
-type AutocompleteOverlayInternalProps = {
-    /**
-     * The ref of the element that the position of the menu is based on. By default, the menu is positioned based on the text input
-     */
-    menuAnchorRef?: React.RefObject<HTMLElement>;
-    /**
-     * Props to be spread on the internal `Overlay` component.
-     */
-    overlayProps?: Partial<OverlayProps>;
-    children?: React.ReactNode;
-} & Partial<OverlayProps> & Pick<React.AriaAttributes, 'aria-labelledby'>;
-declare function AutocompleteOverlay({ menuAnchorRef, overlayProps: oldOverlayProps, children, ...newOverlayProps }: AutocompleteOverlayInternalProps): React.JSX.Element | null;
-declare namespace AutocompleteOverlay {
-    var displayName: string;
-}
-export type AutocompleteOverlayProps = ComponentProps<typeof AutocompleteOverlay>;
-export default AutocompleteOverlay;
-//# sourceMappingURL=AutocompleteOverlay.d.ts.map

package/lib-esm/Autocomplete/AutocompleteOverlay.js

@@ -1,136 +0,0 @@
-import { c } from 'react-compiler-runtime';
-import { useContext } from 'react';
-import { AutocompleteContext } from './AutocompleteContext.js';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
-import VisuallyHidden from '../_VisuallyHidden.js';
-import classes from './AutocompleteOverlay.module.css.js';
-import { jsx } from 'react/jsx-runtime';
-import { useAnchoredPosition } from '../hooks/useAnchoredPosition.js';
-import Overlay from '../Overlay/Overlay.js';
-
-// TODO: consider making 'aria-labelledby' required
-
-function AutocompleteOverlay(t0) {
-  const $ = c(24);
-  let children;
-  let menuAnchorRef;
-  let newOverlayProps;
-  let oldOverlayProps;
-  if ($[0] !== t0) {
-    ({
-      menuAnchorRef,
-      overlayProps: oldOverlayProps,
-      children,
-      ...newOverlayProps
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = menuAnchorRef;
-    $[3] = newOverlayProps;
-    $[4] = oldOverlayProps;
-  } else {
-    children = $[1];
-    menuAnchorRef = $[2];
-    newOverlayProps = $[3];
-    oldOverlayProps = $[4];
-  }
-  const autocompleteContext = useContext(AutocompleteContext);
-  if (autocompleteContext === null) {
-    throw new Error("AutocompleteContext returned null values");
-  }
-  let t1;
-  if ($[5] !== newOverlayProps || $[6] !== oldOverlayProps) {
-    t1 = {
-      ...oldOverlayProps,
-      ...newOverlayProps
-    };
-    $[5] = newOverlayProps;
-    $[6] = oldOverlayProps;
-    $[7] = t1;
-  } else {
-    t1 = $[7];
-  }
-  const overlayProps = t1;
-  const {
-    inputRef,
-    scrollContainerRef,
-    selectedItemLength,
-    setShowMenu,
-    showMenu: t2
-  } = autocompleteContext;
-  const showMenu = t2 === undefined ? false : t2;
-  const t3 = menuAnchorRef ? menuAnchorRef : inputRef;
-  let t4;
-  if ($[8] !== t3) {
-    t4 = {
-      side: "outside-bottom",
-      align: "start",
-      anchorElementRef: t3
-    };
-    $[8] = t3;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  let t5;
-  if ($[10] !== selectedItemLength || $[11] !== showMenu) {
-    t5 = [showMenu, selectedItemLength];
-    $[10] = selectedItemLength;
-    $[11] = showMenu;
-    $[12] = t5;
-  } else {
-    t5 = $[12];
-  }
-  const {
-    floatingElementRef,
-    position
-  } = useAnchoredPosition(t4, t5);
-  useRefObjectAsForwardedRef(scrollContainerRef, floatingElementRef);
-  let t6;
-  if ($[13] !== setShowMenu) {
-    t6 = () => {
-      setShowMenu(false);
-    };
-    $[13] = setShowMenu;
-    $[14] = t6;
-  } else {
-    t6 = $[14];
-  }
-  const closeOptionList = t6;
-  if (typeof window === "undefined") {
-    return null;
-  }
-  let t7;
-  if ($[15] !== children || $[16] !== closeOptionList || $[17] !== floatingElementRef || $[18] !== inputRef || $[19] !== overlayProps || $[20] !== (position === null || position === void 0 ? void 0 : position.left) || $[21] !== (position === null || position === void 0 ? void 0 : position.top) || $[22] !== showMenu) {
-    t7 = showMenu ? /*#__PURE__*/jsx(Overlay, {
-      returnFocusRef: inputRef,
-      preventFocusOnOpen: true,
-      onClickOutside: closeOptionList,
-      onEscape: closeOptionList,
-      ref: floatingElementRef,
-      top: position === null || position === void 0 ? void 0 : position.top,
-      left: position === null || position === void 0 ? void 0 : position.left,
-      className: classes.Overlay,
-      ...overlayProps,
-      children: children
-    }) : /*#__PURE__*/jsx(VisuallyHidden, {
-      "aria-hidden": "true",
-      children: children
-    });
-    $[15] = children;
-    $[16] = closeOptionList;
-    $[17] = floatingElementRef;
-    $[18] = inputRef;
-    $[19] = overlayProps;
-    $[20] = position === null || position === void 0 ? void 0 : position.left;
-    $[21] = position === null || position === void 0 ? void 0 : position.top;
-    $[22] = showMenu;
-    $[23] = t7;
-  } else {
-    t7 = $[23];
-  }
-  return t7;
-}
-AutocompleteOverlay.displayName = 'AutocompleteOverlay';
-
-export { AutocompleteOverlay as default };

package/lib-esm/Avatar/Avatar.d.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { SxProp } from '../sx';
-import type { ResponsiveValue } from '../hooks/useResponsiveValue';
-export declare const DEFAULT_AVATAR_SIZE = 20;
-export type AvatarProps = {
-    /** Sets the width and height of the avatar. */
-    size?: number | ResponsiveValue<number>;
-    /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
-    square?: boolean;
-    /** URL of the avatar image. */
-    src: string;
-    /** Provide alt text when the Avatar is used without the user's name next to it. */
-    alt?: string;
-    /** Additional class name. */
-    className?: string;
-} & SxProp & React.ComponentPropsWithoutRef<'img'>;
-declare const Avatar: React.ForwardRefExoticComponent<{
-    /** Sets the width and height of the avatar. */
-    size?: number | ResponsiveValue<number>;
-    /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
-    square?: boolean;
-    /** URL of the avatar image. */
-    src: string;
-    /** Provide alt text when the Avatar is used without the user's name next to it. */
-    alt?: string;
-    /** Additional class name. */
-    className?: string;
-} & SxProp & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
-export default Avatar;
-//# sourceMappingURL=Avatar.d.ts.map