@primer/react 38.0.0-rc.0 → 38.0.0-rc.09f015db1

package/dist/ActionMenu/ActionMenu.js

@@ -0,0 +1,305 @@
+import React, { useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { ChevronRightIcon, TriangleDownIcon } from '@primer/octicons-react';
+import { Divider } from '../ActionList/Divider.js';
+import { ActionListContainerContext } from '../ActionList/ActionListContainerContext.js';
+import { useId } from '../hooks/useId.js';
+import { Tooltip } from '../TooltipV2/Tooltip.js';
+import styles from './ActionMenu.module.css.js';
+import { useResponsiveValue } from '../hooks/useResponsiveValue.js';
+import { isSlot } from '../utils/is-slot.js';
+import { jsx } from 'react/jsx-runtime';
+import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate.js';
+import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
+import { useMenuKeyboardNavigation } from '../hooks/useMenuKeyboardNavigation.js';
+import { AnchoredOverlay } from '../AnchoredOverlay/AnchoredOverlay.js';
+import { ButtonComponent } from '../Button/Button.js';
+
+const MenuContext = /*#__PURE__*/React.createContext({
+  renderAnchor: null,
+  open: false
+});
+// anchorProps adds onClick and onKeyDown, so we need to merge them with buttonProps
+const mergeAnchorHandlers = (anchorProps, buttonProps) => {
+  const mergedAnchorProps = {
+    ...anchorProps
+  };
+  if (typeof buttonProps.onClick === 'function') {
+    const anchorOnClick = anchorProps.onClick;
+    const mergedOnClick = event => {
+      var _buttonProps$onClick;
+      (_buttonProps$onClick = buttonProps.onClick) === null || _buttonProps$onClick === void 0 ? void 0 : _buttonProps$onClick.call(buttonProps, event);
+      anchorOnClick === null || anchorOnClick === void 0 ? void 0 : anchorOnClick(event);
+    };
+    mergedAnchorProps.onClick = mergedOnClick;
+  }
+  if (typeof buttonProps.onKeyDown === 'function') {
+    const anchorOnKeyDown = anchorProps.onKeyDown;
+    const mergedOnAnchorKeyDown = event => {
+      var _buttonProps$onKeyDow;
+      (_buttonProps$onKeyDow = buttonProps.onKeyDown) === null || _buttonProps$onKeyDow === void 0 ? void 0 : _buttonProps$onKeyDow.call(buttonProps, event);
+      anchorOnKeyDown === null || anchorOnKeyDown === void 0 ? void 0 : anchorOnKeyDown(event);
+    };
+    mergedAnchorProps.onKeyDown = mergedOnAnchorKeyDown;
+  }
+  return mergedAnchorProps;
+};
+const Menu = ({
+  anchorRef: externalAnchorRef,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const parentMenuContext = useContext(MenuContext);
+  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false);
+  const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
+  const isNarrow = useResponsiveValue({
+    narrow: true
+  }, false);
+  const onClose = React.useCallback(gesture => {
+    var _parentMenuContext$on;
+    if (isNarrow && open && gesture === 'tab') {
+      return;
+    }
+    setCombinedOpenState(false);
+    // Close the parent stack when an item is selected or the user tabs out of the menu entirely
+    switch (gesture) {
+      case 'tab':
+      case 'item-select':
+        (_parentMenuContext$on = parentMenuContext.onClose) === null || _parentMenuContext$on === void 0 ? void 0 : _parentMenuContext$on.call(parentMenuContext, gesture);
+    }
+  }, [setCombinedOpenState, parentMenuContext, open, isNarrow]);
+  const menuButtonChild = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && (child.type === MenuButton || child.type === Anchor || isSlot(child, Anchor) || isSlot(child, MenuButton)));
+  const menuButtonChildId = /*#__PURE__*/React.isValidElement(menuButtonChild) ? menuButtonChild.props.id : undefined;
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
+  const anchorId = useId(menuButtonChildId);
+  let renderAnchor = null;
+  // 🚨 Hack for good API!
+  // we strip out Anchor from children and pass it to AnchoredOverlay to render
+  // with additional props for accessibility
+  // 🚨 Accounting for Tooltip wrapping ActionMenu.Button or being a direct child of ActionMenu.Anchor.
+  const contents = React.Children.map(children, child => {
+    // Is ActionMenu.Button wrapped with Tooltip? If this is the case, our anchor is the tooltip's trigger (ActionMenu.Button's grandchild)
+    if (child.type === Tooltip || isSlot(child, Tooltip)) {
+      // tooltip trigger
+      const anchorChildren = child.props.children;
+      if (anchorChildren.type === MenuButton || isSlot(anchorChildren, MenuButton)) {
+        // eslint-disable-next-line react-compiler/react-compiler
+        renderAnchor = anchorProps => {
+          // We need to attach the anchor props to the tooltip trigger (ActionMenu.Button's grandchild) not the tooltip itself.
+          const triggerButton = /*#__PURE__*/React.cloneElement(anchorChildren, mergeAnchorHandlers({
+            ...anchorProps
+          }, anchorChildren.props));
+          return /*#__PURE__*/React.cloneElement(child, {
+            children: triggerButton,
+            ref: anchorRef
+          });
+        };
+      }
+      return null;
+    } else if (child.type === Anchor || isSlot(child, Anchor)) {
+      const anchorChildren = child.props.children;
+      const isWrappedWithTooltip = anchorChildren !== undefined ? anchorChildren.type === Tooltip || isSlot(anchorChildren, Tooltip) : false;
+      if (isWrappedWithTooltip) {
+        if (anchorChildren.props.children !== null) {
+          renderAnchor = anchorProps => {
+            // ActionMenu.Anchor's children can be wrapped with Tooltip. If this is the case, our anchor is the tooltip's trigger
+            const tooltipTrigger = anchorChildren.props.children;
+            // We need to attach the anchor props to the tooltip trigger not the tooltip itself.
+            const tooltipTriggerEl = /*#__PURE__*/React.cloneElement(tooltipTrigger, mergeAnchorHandlers({
+              ...anchorProps
+            }, tooltipTrigger.props));
+            const tooltip = /*#__PURE__*/React.cloneElement(anchorChildren, {
+              children: tooltipTriggerEl
+            });
+            return /*#__PURE__*/React.cloneElement(child, {
+              children: tooltip,
+              ref: anchorRef
+            });
+          };
+        }
+      } else {
+        renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, anchorProps);
+      }
+      return null;
+    } else if (child.type === MenuButton || isSlot(child, MenuButton)) {
+      renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, mergeAnchorHandlers(anchorProps, child.props));
+      return null;
+    } else {
+      return child;
+    }
+  });
+  return /*#__PURE__*/jsx(MenuContext.Provider, {
+    value: {
+      anchorRef,
+      renderAnchor,
+      anchorId,
+      open: combinedOpenState,
+      onOpen,
+      onClose,
+      // will be undefined for the outermost level, then false for the top menu, then true inside that
+      isSubmenu: parentMenuContext.isSubmenu !== undefined
+    },
+    children: contents
+  });
+};
+Menu.displayName = "Menu";
+const Anchor = /*#__PURE__*/React.forwardRef(({
+  children: child,
+  ...anchorProps
+}, anchorRef) => {
+  const {
+    onOpen,
+    isSubmenu
+  } = React.useContext(MenuContext);
+  const openSubmenuOnRightArrow = useCallback(event => {
+    if (isSubmenu && event.key === 'ArrowRight' && !event.defaultPrevented) onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-key-press');
+  }, [isSubmenu, onOpen]);
+  const onButtonClick = event => {
+    var _child$props$onClick, _child$props, _anchorProps$onClick;
+    (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props, event);
+    (_anchorProps$onClick = anchorProps.onClick) === null || _anchorProps$onClick === void 0 ? void 0 : _anchorProps$onClick.call(anchorProps, event); // onClick is passed from AnchoredOverlay
+  };
+  const onButtonKeyDown = event => {
+    var _child$props$onKeyDow, _child$props2, _anchorProps$onKeyDow;
+    (_child$props$onKeyDow = (_child$props2 = child.props).onKeyDown) === null || _child$props$onKeyDow === void 0 ? void 0 : _child$props$onKeyDow.call(_child$props2, event);
+    openSubmenuOnRightArrow(event);
+    (_anchorProps$onKeyDow = anchorProps.onKeyDown) === null || _anchorProps$onKeyDow === void 0 ? void 0 : _anchorProps$onKeyDow.call(anchorProps, event); // onKeyDown is passed from AnchoredOverlay
+  };
+
+  // Add right chevron icon to submenu anchors rendered using `ActionList.Item`
+  const parentActionListContext = useContext(ActionListContainerContext);
+  const thisActionListContext = useMemo(() => isSubmenu ? {
+    ...parentActionListContext,
+    defaultTrailingVisual: /*#__PURE__*/jsx(ChevronRightIcon, {}),
+    // Default behavior is to close after selecting; we want to open the submenu instead
+    afterSelect: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-click')
+  } : parentActionListContext, [isSubmenu, onOpen, parentActionListContext]);
+  return /*#__PURE__*/jsx(ActionListContainerContext.Provider, {
+    value: thisActionListContext,
+    children: /*#__PURE__*/React.cloneElement(child, {
+      ...anchorProps,
+      ref: anchorRef,
+      onClick: onButtonClick,
+      onKeyDown: onButtonKeyDown
+    })
+  });
+});
+
+/** this component is syntactical sugar 🍭 */
+
+const MenuButton = /*#__PURE__*/React.forwardRef(({
+  ...props
+}, anchorRef) => {
+  return /*#__PURE__*/jsx(Anchor, {
+    ref: anchorRef,
+    children: /*#__PURE__*/jsx(ButtonComponent, {
+      type: "button",
+      trailingAction: TriangleDownIcon,
+      ...props
+    })
+  });
+});
+const defaultVariant = {
+  regular: 'anchored',
+  narrow: 'anchored'
+};
+const Overlay = ({
+  children,
+  align = 'start',
+  side,
+  onPositionChange,
+  'aria-labelledby': ariaLabelledby,
+  variant = defaultVariant,
+  ...overlayProps
+}) => {
+  // we typecast anchorRef as required instead of optional
+  // because we know that we're setting it in context in Menu
+  const {
+    anchorRef,
+    renderAnchor,
+    anchorId,
+    open,
+    onOpen,
+    onClose,
+    isSubmenu = false
+  } = React.useContext(MenuContext);
+  const containerRef = React.useRef(null);
+  useMenuKeyboardNavigation(open, onClose, containerRef, anchorRef, isSubmenu);
+  const isNarrow = useResponsiveValue({
+    narrow: true
+  }, false);
+  const responsiveVariant = useResponsiveValue(variant, {
+    regular: 'anchored',
+    narrow: 'anchored'
+  });
+  const isNarrowFullscreen = !!isNarrow && variant.narrow === 'fullscreen';
+
+  // If the menu anchor is an icon button, we need to label the menu by tooltip that also labelled the anchor.
+  const [anchorAriaLabelledby, setAnchorAriaLabelledby] = useState(null);
+  useEffect(() => {
+    // Necessary for HMR reloads
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
+      const ariaLabelledby = anchorRef.current.getAttribute('aria-labelledby');
+      if (ariaLabelledby) {
+        setAnchorAriaLabelledby(ariaLabelledby);
+      }
+    }
+  }, [anchorRef]);
+  return /*#__PURE__*/jsx(AnchoredOverlay, {
+    anchorRef: anchorRef,
+    renderAnchor: renderAnchor,
+    anchorId: anchorId,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    align: align,
+    side: side !== null && side !== void 0 ? side : isSubmenu ? 'outside-right' : 'outside-bottom',
+    overlayProps: overlayProps,
+    focusZoneSettings: isNarrowFullscreen ? {
+      disabled: true
+    } : {
+      focusOutBehavior: 'wrap'
+    },
+    onPositionChange: onPositionChange,
+    variant: variant,
+    children: /*#__PURE__*/jsx("div", {
+      ref: containerRef,
+      className: styles.ActionMenuContainer,
+      "data-variant": responsiveVariant,
+      ...(overlayProps.overflow ? {
+        [`data-overflow-${overlayProps.overflow}`]: ''
+      } : {}),
+      ...(overlayProps.maxHeight ? {
+        [`data-max-height-${overlayProps.maxHeight}`]: ''
+      } : {}),
+      children: /*#__PURE__*/jsx(ActionListContainerContext.Provider, {
+        value: {
+          container: 'ActionMenu',
+          listRole: 'menu',
+          // If there is a custom aria-labelledby, use that. Otherwise, if exists, use the id that labels the anchor such as tooltip. If none of them exist, use anchor id.
+          listLabelledBy: ariaLabelledby || anchorAriaLabelledby || anchorId,
+          selectionAttribute: 'aria-checked',
+          // Should this be here?
+          afterSelect: () => onClose === null || onClose === void 0 ? void 0 : onClose('item-select'),
+          enableFocusZone: isNarrowFullscreen // AnchoredOverlay takes care of focus zone. We only want to enable this if menu is narrow fullscreen.
+        },
+        children: children
+      })
+    })
+  });
+};
+Overlay.displayName = "Overlay";
+Menu.displayName = 'ActionMenu';
+Menu.__SLOT__ = Symbol('ActionMenu');
+MenuButton.__SLOT__ = Symbol('ActionMenu.Button');
+Anchor.__SLOT__ = Symbol('ActionMenu.Anchor');
+Overlay.__SLOT__ = Symbol('ActionMenu.Overlay');
+const ActionMenu = Object.assign(Menu, {
+  Button: MenuButton,
+  Anchor,
+  Overlay,
+  Divider
+});
+
+export { ActionMenu };

package/dist/ActionMenu/ActionMenu.module.css.js

@@ -0,0 +1,5 @@
+import './ActionMenu-bb42318d.css';
+
+var styles = {"ActionMenuContainer":"prc-ActionMenu-ActionMenuContainer-XdFHv"};
+
+export { styles as default };

package/dist/AnchoredOverlay/AnchoredOverlay.d.ts

@@ -0,0 +1,104 @@
+import type React from 'react';
+import type { OverlayProps } from '../Overlay';
+import type { FocusTrapHookSettings } from '../hooks/useFocusTrap';
+import type { FocusZoneHookSettings } from '../hooks/useFocusZone';
+import type { AnchorPosition, PositionSettings } from '@primer/behaviors';
+import { type ResponsiveValue } from '../hooks/useResponsiveValue';
+import { type IconButtonProps } from '../Button';
+interface AnchoredOverlayPropsWithAnchor {
+    /**
+     * A custom function component used to render the anchor element.
+     * Will receive the selected text as `children` prop when an item is activated.
+     */
+    renderAnchor: <T extends Omit<React.HTMLAttributes<HTMLElement>, 'aria-label' | 'aria-labelledby'>>(props: T) => JSX.Element;
+    /**
+     * An override to the internal ref that will be spread on to the renderAnchor
+     */
+    anchorRef?: React.RefObject<HTMLElement>;
+    /**
+     * An override to the internal id that will be spread on to the renderAnchor
+     */
+    anchorId?: string;
+}
+interface AnchoredOverlayPropsWithoutAnchor {
+    /**
+     * A custom function component used to render the anchor element.
+     * When renderAnchor is null, an anchorRef is required.
+     */
+    renderAnchor: null;
+    /**
+     * An override to the internal renderAnchor ref that will be used to position the overlay.
+     * When renderAnchor is null this can be used to make an anchor that is detached from ActionMenu.
+     */
+    anchorRef: React.RefObject<HTMLElement>;
+    /**
+     * An override to the internal id that will be spread on to the renderAnchor
+     */
+    anchorId?: string;
+}
+export type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
+interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
+    /**
+     * Determines whether the overlay portion of the component should be shown or not
+     */
+    open: boolean;
+    /**
+     * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
+     */
+    onOpen?: (gesture: 'anchor-click' | 'anchor-key-press', event?: React.KeyboardEvent<HTMLElement>) => unknown;
+    /**
+     * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
+     */
+    onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape' | 'close') => unknown;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusTrapSettings?: Partial<FocusTrapHookSettings>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusZoneSettings?: Partial<FocusZoneHookSettings>;
+    /**
+     * Optional className to be added to the overlay component.
+     */
+    className?: string;
+    /**
+     * preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay.
+     * If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
+     */
+    preventOverflow?: boolean;
+    /**
+     * If true, the overlay will attempt to prevent position shifting when sitting at the top of the anchor.
+     */
+    pinPosition?: boolean;
+    /**
+     * Optional prop to set variant for narrow screen sizes
+     */
+    variant?: ResponsiveValue<'anchored', 'anchored' | 'fullscreen'>;
+    /**
+     * An override to the internal position that will be used to position the overlay.
+     */
+    onPositionChange?: ({ position }: {
+        position: AnchorPosition;
+    }) => void;
+    /**
+     * Optional prop to display a close button in the overlay.
+     */
+    displayCloseButton?: boolean;
+    /**
+     * Props to be spread on the close button in the overlay.
+     */
+    closeButtonProps?: Partial<IconButtonProps>;
+}
+export type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor) & Partial<Pick<PositionSettings, 'align' | 'side' | 'anchorOffset' | 'alignmentOffset'>>;
+/**
+ * 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.
+ */
+export declare const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayProps>>;
+export {};
+//# sourceMappingURL=AnchoredOverlay.d.ts.map

package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"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"}

package/dist/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,49 @@
+import type React from 'react';
+import type { ComponentProps, FCWithSlotMarker } from '../utils/types';
+import AutocompleteMenu from './AutocompleteMenu';
+import AutocompleteOverlay from './AutocompleteOverlay';
+declare const Autocomplete: FCWithSlotMarker<React.PropsWithChildren<{
+    id?: string;
+}>>;
+export type AutocompleteProps = ComponentProps<typeof Autocomplete>;
+export type { AutocompleteInputProps } from './AutocompleteInput';
+export type { AutocompleteMenuProps } from './AutocompleteMenu';
+export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
+declare const _default: React.FC<React.PropsWithChildren<{
+    id?: string;
+}>> & import("..").SlotMarker & {
+    __SLOT__: symbol;
+    Context: React.Context<{
+        activeDescendantRef: React.MutableRefObject<HTMLElement | null>;
+        autocompleteSuggestion: string;
+        id: string;
+        inputRef: React.MutableRefObject<HTMLInputElement | null>;
+        inputValue: string;
+        isMenuDirectlyActivated: boolean;
+        scrollContainerRef: React.MutableRefObject<HTMLElement | null>;
+        selectedItemLength: number;
+        setAutocompleteSuggestion: (value: string) => void;
+        setInputValue: (value: string) => void;
+        setIsMenuDirectlyActivated: (value: boolean) => void;
+        setSelectedItemLength: (value: number) => void;
+        setShowMenu: (value: boolean) => void;
+        showMenu: boolean;
+    } | null>;
+    Input: import("../utils/polymorphic").ForwardRefComponent<import("../utils/polymorphic").ForwardRefComponent<"input", import("..").TextInputProps> & {
+        __SLOT__: symbol;
+        Action: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "aria-label" | "tooltipDirection"> & {
+            children?: React.ReactNode;
+            "aria-label"?: string;
+            tooltipDirection?: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
+            icon?: React.FunctionComponent<React.PropsWithChildren<import("@primer/octicons-react").IconProps>>;
+            variant?: import("..").ButtonProps["variant"];
+        } & React.RefAttributes<HTMLButtonElement>>;
+    }, {
+        as?: React.ComponentType<React.PropsWithChildren<any>>;
+        openOnFocus?: boolean;
+    }>;
+    Menu: typeof AutocompleteMenu;
+    Overlay: typeof AutocompleteOverlay;
+};
+export default _default;
+//# sourceMappingURL=Autocomplete.d.ts.map

package/dist/Autocomplete/Autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAGpE,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AA0CvD,QAAA,MAAM,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CA6C1E,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAA;AACnE,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAA;AAC/D,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAA;AAC7D,YAAY,EAAC,wBAAwB,EAAC,MAAM,uBAAuB,CAAA;;SAlDA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDzE,wBAME"}

package/dist/Autocomplete/Autocomplete.js

@@ -0,0 +1,185 @@
+import { c } from 'react-compiler-runtime';
+import { useRef, useReducer } from 'react';
+import { AutocompleteContext } from './AutocompleteContext.js';
+import AutocompleteInput from './AutocompleteInput.js';
+import AutocompleteMenu from './AutocompleteMenu.js';
+import AutocompleteOverlay from './AutocompleteOverlay.js';
+import { useId } from '../hooks/useId.js';
+import { jsx } from 'react/jsx-runtime';
+
+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 = t0 => {
+  const $ = c(15);
+  const {
+    children,
+    id: idProp
+  } = t0;
+  const activeDescendantRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const inputRef = useRef(null);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const {
+    inputValue,
+    showMenu,
+    autocompleteSuggestion,
+    isMenuDirectlyActivated,
+    selectedItemLength
+  } = state;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = value => {
+      dispatch({
+        type: "inputValue",
+        payload: value
+      });
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const setInputValue = t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = value_0 => {
+      dispatch({
+        type: "showMenu",
+        payload: value_0
+      });
+    };
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const setShowMenu = t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = value_1 => {
+      dispatch({
+        type: "autocompleteSuggestion",
+        payload: value_1
+      });
+    };
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const setAutocompleteSuggestion = t3;
+  let t4;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = value_2 => {
+      dispatch({
+        type: "isMenuDirectlyActivated",
+        payload: value_2
+      });
+    };
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const setIsMenuDirectlyActivated = t4;
+  let t5;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = value_3 => {
+      dispatch({
+        type: "selectedItemLength",
+        payload: value_3
+      });
+    };
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  const setSelectedItemLength = t5;
+  const id = useId(idProp);
+  let t6;
+  if ($[5] !== autocompleteSuggestion || $[6] !== id || $[7] !== inputValue || $[8] !== isMenuDirectlyActivated || $[9] !== selectedItemLength || $[10] !== showMenu) {
+    t6 = {
+      activeDescendantRef,
+      autocompleteSuggestion,
+      id,
+      inputRef,
+      inputValue,
+      isMenuDirectlyActivated,
+      scrollContainerRef,
+      selectedItemLength,
+      setAutocompleteSuggestion,
+      setInputValue,
+      setIsMenuDirectlyActivated,
+      setShowMenu,
+      setSelectedItemLength,
+      showMenu
+    };
+    $[5] = autocompleteSuggestion;
+    $[6] = id;
+    $[7] = inputValue;
+    $[8] = isMenuDirectlyActivated;
+    $[9] = selectedItemLength;
+    $[10] = showMenu;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] !== children || $[13] !== t6) {
+    t7 = /*#__PURE__*/jsx(AutocompleteContext.Provider, {
+      value: t6,
+      children: children
+    });
+    $[12] = children;
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  return t7;
+};
+var Autocomplete$1 = Object.assign(Autocomplete, {
+  __SLOT__: Symbol('Autocomplete'),
+  Context: AutocompleteContext,
+  Input: AutocompleteInput,
+  Menu: AutocompleteMenu,
+  Overlay: AutocompleteOverlay
+});
+
+export { Autocomplete$1 as default };