@equinor/eds-core-react 2.1.0 → 2.2.0-beta.0

package/dist/esm/components/Datepicker/fields/FieldWrapper.js

@@ -123,12 +123,22 @@ const FieldWrapper = /*#__PURE__*/forwardRef(({
         if (!isIconTarget && (event.code === 'Space' || event.code === 'Enter')) {
           setIsOpen(true);
         }
+        if (event.key === 'Escape' && isOpen) {
+          event.stopPropagation();
+          event.preventDefault();
+          setIsOpen(false);
+        }
       },
       ...props,
       children: children
     }), /*#__PURE__*/jsx(Popover, {
       open: isOpen ?? false,
       onClose: () => setIsOpen(false),
+      onKeyDown: e => {
+        if (e.key !== 'Escape') return;
+        e.stopPropagation();
+        e.preventDefault();
+      },
       anchorEl: anchorEl,
       placement: 'bottom-start',
       children: calendar

package/dist/esm/components/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 import { forwardRef, useRef, useMemo, useEffect } from 'react';
 import styled, { ThemeProvider, css } from 'styled-components';
-import { useToken, mergeRefs, useHideBodyScroll, useGlobalKeyPress, bordersTemplate, typographyTemplate } from '@equinor/eds-utils';
+import { useToken, mergeRefs, useHideBodyScroll, bordersTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { dialog } from './Dialog.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
@@ -60,17 +60,19 @@ const Dialog = /*#__PURE__*/forwardRef(function Dialog({
       onClose && onClose();
     }
   };
-  useGlobalKeyPress('Escape', e => {
+  const handleKeyDown = e => {
+    if (e.key !== 'Escape') return;
     e.preventDefault();
     if (isDismissable && onClose && open) {
-      onClose && onClose();
+      onClose();
     }
-  });
+  };
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsx(StyledNativeDialog, {
       ref: combinedDialogRef,
       onMouseDown: handleDismiss,
+      onKeyDown: handleKeyDown,
       children: open && /*#__PURE__*/jsx(StyledDialog, {
         ...props,
         ref: ref,

package/dist/esm/components/next/Icon/Icon.js

@@ -0,0 +1,57 @@
+import { forwardRef, useId } from 'react';
+import './icon.css.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Icon = /*#__PURE__*/forwardRef(function Icon({
+  data,
+  title,
+  color = 'currentColor',
+  size,
+  className,
+  ...rest
+}, ref) {
+  const titleId = useId();
+  if (!data) {
+    console.error('Icon: data prop is required');
+    return null;
+  }
+  const {
+    svgPathData,
+    height = '24',
+    width = '24'
+  } = data;
+  const classes = ['icon', className].filter(Boolean).join(' ');
+
+  // Accessibility: decorative icons are hidden, semantic icons have role="img"
+  const accessibilityProps = title ? {
+    role: 'img',
+    'aria-labelledby': titleId
+  } : {
+    'aria-hidden': true
+  };
+  return /*#__PURE__*/jsxs("svg", {
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: `0 0 ${width} ${height}`,
+    fill: color,
+    className: classes,
+    "data-testid": "eds-icon",
+    "data-icon-size": size,
+    ...accessibilityProps,
+    ...rest,
+    children: [title && /*#__PURE__*/jsx("title", {
+      id: titleId,
+      children: title
+    }), Array.isArray(svgPathData) ? svgPathData.map(pathData => /*#__PURE__*/jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: pathData
+    }, pathData)) : /*#__PURE__*/jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: svgPathData
+    })]
+  });
+});
+
+export { Icon };

package/dist/esm/components/next/Icon/icon.css.js

@@ -0,0 +1,6 @@
+import styleInject from '../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Inline with text: uses token from parent's data-font-size, or 1.5em fallback */\n.icon {\n  /*\n   * Set font-size first to establish the icon's size context.\n   * Then use 1em for width/height (relative to computed font-size).\n   * This avoids compound scaling (1.5em × 1.5em = 2.25em would be wrong).\n   */\n  font-size: var(--eds-typography-icon-size, 1.5em);\n  width: 1em;\n  height: 1em;\n\n  /* Negative margins for optical alignment with text baseline */\n  margin-block: -0.25em;\n  margin-inline: -0.1em;\n\n  flex-shrink: 0;\n}\n\n/* Explicit size: fixed size from design tokens, no margins */\n.icon[data-icon-size] {\n  --_explicit-size: var(--eds-sizing-icon-md); /* fallback */\n\n  width: var(--_explicit-size);\n  height: var(--_explicit-size);\n  margin: 0;\n  font-size: inherit;\n}\n\n.icon[data-icon-size='xs'] {\n  --_explicit-size: var(--eds-sizing-icon-xs);\n}\n.icon[data-icon-size='sm'] {\n  --_explicit-size: var(--eds-sizing-icon-sm);\n}\n.icon[data-icon-size='md'] {\n  --_explicit-size: var(--eds-sizing-icon-md);\n}\n.icon[data-icon-size='lg'] {\n  --_explicit-size: var(--eds-sizing-icon-lg);\n}\n.icon[data-icon-size='xl'] {\n  --_explicit-size: var(--eds-sizing-icon-xl);\n}\n.icon[data-icon-size='2xl'] {\n  --_explicit-size: var(--eds-sizing-icon-2xl);\n}\n.icon[data-icon-size='3xl'] {\n  --_explicit-size: var(--eds-sizing-icon-3xl);\n}\n.icon[data-icon-size='4xl'] {\n  --_explicit-size: var(--eds-sizing-icon-4xl);\n}\n.icon[data-icon-size='5xl'] {\n  --_explicit-size: var(--eds-sizing-icon-5xl);\n}\n.icon[data-icon-size='6xl'] {\n  --_explicit-size: var(--eds-sizing-icon-6xl);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/esm/components/next/Placeholder/Placeholder.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Placeholder component for testing the /next entry point.
+ * This component should be removed once real EDS 2.0 components are added.
+ */
+
+const Placeholder = ({
+  text = 'EDS 2.0 Placeholder'
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    "data-testid": "eds-placeholder",
+    children: text
+  });
+};
+
+export { Placeholder };

package/dist/esm/index.js

@@ -85,7 +85,7 @@ export { Radio } from './components/Radio/Radio.js';
 export { Switch } from './components/Switch/Switch.js';
 export { EdsProvider, useEds } from './components/EdsProvider/eds.context.js';
 export { Paper } from './components/Paper/Paper.js';
-export { Autocomplete } from './components/Autocomplete/Autocomplete.js';
+export { AddSymbol, AllSymbol, Autocomplete, StyledButton, defaultOptionDisabled } from './components/Autocomplete/Autocomplete.js';
 export { InputWrapper } from './components/InputWrapper/InputWrapper.js';
 export { useInputField } from './components/InputWrapper/useInputField.js';
 export { useSideBar } from './components/SideBar/SideBar.context.js';

package/dist/esm/index.next.js

@@ -0,0 +1,2 @@
+export { Placeholder } from './components/next/Placeholder/Placeholder.js';
+export { Icon } from './components/next/Icon/Icon.js';

package/dist/esm/node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js

@@ -0,0 +1,26 @@
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default };

package/dist/index.next.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * Placeholder component for testing the /next entry point.
+ * This component should be removed once real EDS 2.0 components are added.
+ */
+
+const Placeholder = ({
+  text = 'EDS 2.0 Placeholder'
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    "data-testid": "eds-placeholder",
+    children: text
+  });
+};
+
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "/* Inline with text: uses token from parent's data-font-size, or 1.5em fallback */\n.icon {\n  /*\n   * Set font-size first to establish the icon's size context.\n   * Then use 1em for width/height (relative to computed font-size).\n   * This avoids compound scaling (1.5em × 1.5em = 2.25em would be wrong).\n   */\n  font-size: var(--eds-typography-icon-size, 1.5em);\n  width: 1em;\n  height: 1em;\n\n  /* Negative margins for optical alignment with text baseline */\n  margin-block: -0.25em;\n  margin-inline: -0.1em;\n\n  flex-shrink: 0;\n}\n\n/* Explicit size: fixed size from design tokens, no margins */\n.icon[data-icon-size] {\n  --_explicit-size: var(--eds-sizing-icon-md); /* fallback */\n\n  width: var(--_explicit-size);\n  height: var(--_explicit-size);\n  margin: 0;\n  font-size: inherit;\n}\n\n.icon[data-icon-size='xs'] {\n  --_explicit-size: var(--eds-sizing-icon-xs);\n}\n.icon[data-icon-size='sm'] {\n  --_explicit-size: var(--eds-sizing-icon-sm);\n}\n.icon[data-icon-size='md'] {\n  --_explicit-size: var(--eds-sizing-icon-md);\n}\n.icon[data-icon-size='lg'] {\n  --_explicit-size: var(--eds-sizing-icon-lg);\n}\n.icon[data-icon-size='xl'] {\n  --_explicit-size: var(--eds-sizing-icon-xl);\n}\n.icon[data-icon-size='2xl'] {\n  --_explicit-size: var(--eds-sizing-icon-2xl);\n}\n.icon[data-icon-size='3xl'] {\n  --_explicit-size: var(--eds-sizing-icon-3xl);\n}\n.icon[data-icon-size='4xl'] {\n  --_explicit-size: var(--eds-sizing-icon-4xl);\n}\n.icon[data-icon-size='5xl'] {\n  --_explicit-size: var(--eds-sizing-icon-5xl);\n}\n.icon[data-icon-size='6xl'] {\n  --_explicit-size: var(--eds-sizing-icon-6xl);\n}\n";
+styleInject(css_248z);
+
+const Icon = /*#__PURE__*/react.forwardRef(function Icon({
+  data,
+  title,
+  color = 'currentColor',
+  size,
+  className,
+  ...rest
+}, ref) {
+  const titleId = react.useId();
+  if (!data) {
+    console.error('Icon: data prop is required');
+    return null;
+  }
+  const {
+    svgPathData,
+    height = '24',
+    width = '24'
+  } = data;
+  const classes = ['icon', className].filter(Boolean).join(' ');
+
+  // Accessibility: decorative icons are hidden, semantic icons have role="img"
+  const accessibilityProps = title ? {
+    role: 'img',
+    'aria-labelledby': titleId
+  } : {
+    'aria-hidden': true
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: `0 0 ${width} ${height}`,
+    fill: color,
+    className: classes,
+    "data-testid": "eds-icon",
+    "data-icon-size": size,
+    ...accessibilityProps,
+    ...rest,
+    children: [title && /*#__PURE__*/jsxRuntime.jsx("title", {
+      id: titleId,
+      children: title
+    }), Array.isArray(svgPathData) ? svgPathData.map(pathData => /*#__PURE__*/jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: pathData
+    }, pathData)) : /*#__PURE__*/jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: svgPathData
+    })]
+  });
+});
+
+exports.Icon = Icon;
+exports.Placeholder = Placeholder;

package/dist/types/components/Autocomplete/AddNewOption.d.ts

@@ -1,13 +1,5 @@
-import { LiHTMLAttributes } from 'react';
 export type AutocompleteOptionProps = {
-    value: string;
-    multiple: boolean;
-    highlighted: string;
-    multiline: boolean;
-} & LiHTMLAttributes<HTMLLIElement>;
-declare function AddNewOptionInner(props: AutocompleteOptionProps, ref: React.ForwardedRef<HTMLLIElement>): import("react/jsx-runtime").JSX.Element;
-export declare const AddNewOption: (props: AutocompleteOptionProps & {
-    ref?: React.ForwardedRef<HTMLLIElement>;
-    displayName?: string | undefined;
-}) => ReturnType<typeof AddNewOptionInner>;
-export {};
+    index: number;
+    item: unknown;
+};
+export declare function AddNewOption({ index, item }: AutocompleteOptionProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Autocomplete/Autocomplete.d.ts

@@ -1,9 +1,25 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { Variants } from '../types';
+export declare const AllSymbol: unique symbol;
+export declare const AddSymbol: unique symbol;
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
+    as?: import("react").ElementType;
+} & {
+    color?: "primary" | "secondary" | "danger";
+    variant?: "contained" | "contained_icon" | "outlined" | "ghost" | "ghost_icon";
+    href?: string;
+    disabled?: boolean;
+    type?: string;
+    fullWidth?: boolean;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Omit<any, "href" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "variant" | "fullWidth">, never>> & string & Omit<import("@equinor/eds-utils").OverridableComponent<import("../Button").ButtonProps, HTMLButtonElement> & {
+    Group: typeof import("../Button").ButtonGroup;
+    Toggle: typeof import("../Button").ToggleButton;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const defaultOptionDisabled: () => boolean;
 export type AutocompleteChanges<T> = {
     selectedItems: T[];
 };
-export type AutocompleteProps<T> = {
+export type AutocompleteProps<T = string> = {
     /** List of options in dropdown */
     options: readonly T[];
     /** Total number of options */
@@ -47,6 +63,10 @@ export type AutocompleteProps<T> = {
      * Note that this prop replaces the need for ```initialSelectedOptions```
      * The items that should be selected. */
     selectedOptions?: T[];
+    /** How selected items are displayed in the input field
+     * @default 'summary'
+     */
+    selectionDisplay?: 'chips' | 'summary';
     /** Callback for the selected item change
      * changes.selectedItems gives the selected items
      */
@@ -61,8 +81,6 @@ export type AutocompleteProps<T> = {
     multiple?: boolean;
     /** Add select-all option. Throws an error if true while multiple = false */
     allowSelectAll?: boolean;
-    /**  Custom option label. NOTE: This is required when option is an object */
-    optionLabel?: (option: T) => string;
     /**  Custom option template */
     optionComponent?: (option: T, isSelected: boolean) => ReactNode;
     /** Disable option
@@ -100,11 +118,15 @@ export type AutocompleteProps<T> = {
      * Callback for clear all button
      */
     onClear?: () => void;
-} & HTMLAttributes<HTMLDivElement>;
-declare function AutocompleteInner<T>(props: AutocompleteProps<T>, ref: React.ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
-export declare const Autocomplete: <T>(props: AutocompleteProps<T> & {
-    ref?: React.ForwardedRef<HTMLInputElement>;
-    /** @ignore */
-    displayName?: string | undefined;
-}) => ReturnType<typeof AutocompleteInner>;
-export {};
+    ref?: React.Ref<HTMLInputElement>;
+} & HTMLAttributes<HTMLDivElement> & (T extends string | number ? {
+    /**  Custom option label. NOTE: This is required when option is an object */
+    optionLabel?: (option: T) => string;
+} : T extends object ? {
+    /**  Custom option label. NOTE: This is required when option is an object */
+    optionLabel: (option: T) => string;
+} : {
+    /**  Custom option label. NOTE: This is required when option is an object */
+    optionLabel?: (option: T) => string;
+});
+export declare function Autocomplete<T>({ ...props }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Autocomplete/AutocompleteContext.d.ts

@@ -0,0 +1,228 @@
+export declare const AutocompleteContext: import("react").Context<{
+    getDropdownProps: <Options>(options?: import("downshift").UseMultipleSelectionGetDropdownPropsOptions & Options, extraOptions?: import("downshift").GetPropsCommonOptions) => Omit<import("downshift").Overwrite<import("downshift").UseMultipleSelectionGetDropdownReturnValue, Options>, "preventKeyAction">;
+    addSelectedItem: (item: unknown) => void;
+    removeSelectedItem: (item: unknown) => void;
+    selectedItems: unknown[];
+    setSelectedItems: (items: unknown[]) => void;
+    clear: () => void;
+    availableItems: readonly unknown[];
+    getLabel: (item: unknown) => string;
+    scrollContainer: import("react").RefObject<HTMLUListElement>;
+    rowVirtualizer: import("@tanstack/react-virtual").Virtualizer<HTMLUListElement, Element>;
+    allSelectedState: string;
+    toggleAllSelected: () => void;
+    typedInputValue: string;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    token: () => import("styled-components").DefaultTheme;
+    tokens: import("./Autocomplete.tokens").AutocompleteToken;
+    placeholderText: string;
+    readOnly: boolean;
+    inputProps: import("downshift").Overwrite<import("downshift").UseComboboxGetInputPropsReturnValue, Omit<import("downshift").Overwrite<import("downshift").UseMultipleSelectionGetDropdownReturnValue, {
+        preventKeyAction: boolean;
+        disabled: boolean;
+        ref: import("react").RefObject<HTMLInputElement>;
+    }>, "preventKeyAction">>;
+    consolidatedEvents: Partial<import("react").DOMAttributes<unknown>>;
+    multiple: boolean;
+    disabled: boolean;
+    optionDisabled: (option: unknown) => boolean;
+    onAddNewOption: (text: string) => void;
+    options: readonly unknown[];
+    totalOptions: number;
+    label: import("react").ReactNode;
+    meta: import("react").ReactNode;
+    className: string;
+    style: import("react").CSSProperties;
+    loading: boolean;
+    hideClearButton: boolean;
+    onOptionsChange: (changes: import("./Autocomplete").AutocompleteChanges<unknown>) => void;
+    onInputChange: (text: string) => void;
+    selectedOptions: unknown[];
+    selectionDisplay: "summary" | "chips";
+    itemToKey: (item: unknown) => unknown;
+    itemCompare: (value: unknown, compare: unknown) => boolean;
+    allowSelectAll: boolean;
+    initialSelectedOptions: unknown[];
+    optionsFilter: (option: unknown, inputValue: string) => boolean;
+    autoWidth: boolean;
+    placeholder: string;
+    optionLabel: ((option: string | number) => string) | ((option: object) => string) | ((option: unknown) => string);
+    clearSearchOnChange: boolean;
+    multiline: boolean;
+    dropdownHeight: number;
+    optionComponent: (option: unknown, isSelected: boolean) => import("react").ReactNode;
+    helperText: string;
+    helperIcon: import("react").ReactNode;
+    noOptionsText: string;
+    variant: import("../types").Variants;
+    onClear: () => void;
+    selectedItemsLabels: string[];
+    restHtmlProps: Omit<{
+        options: readonly unknown[];
+        totalOptions?: number;
+        label: import("react").ReactNode;
+        initialSelectedOptions?: unknown[];
+        helperText?: string;
+        helperIcon?: import("react").ReactNode;
+        noOptionsText?: string;
+        variant?: import("../types").Variants;
+        meta?: import("react").ReactNode;
+        disabled?: boolean;
+        loading?: boolean;
+        readOnly?: boolean;
+        hideClearButton?: boolean;
+        selectedOptions?: unknown[];
+        selectionDisplay?: "chips" | "summary";
+        onOptionsChange?: (changes: import("./Autocomplete").AutocompleteChanges<unknown>) => void;
+        onInputChange?: (text: string) => void;
+        onAddNewOption?: (text: string) => void;
+        multiple?: boolean;
+        allowSelectAll?: boolean;
+        optionComponent?: (option: unknown, isSelected: boolean) => import("react").ReactNode;
+        optionDisabled?: (option: unknown) => boolean;
+        optionsFilter?: (option: unknown, inputValue: string) => boolean;
+        autoWidth?: boolean;
+        placeholder?: string;
+        clearSearchOnChange?: boolean;
+        multiline?: boolean;
+        dropdownHeight?: number;
+        itemToKey?: (value: unknown) => unknown;
+        itemCompare?: (value: unknown, compare: unknown) => boolean;
+        onClear?: () => void;
+        ref?: React.Ref<HTMLInputElement>;
+    } & import("react").HTMLAttributes<HTMLDivElement> & {
+        optionLabel?: (option: unknown) => string;
+    } & {
+        ref?: React.Ref<HTMLInputElement>;
+    }, "ref" | "className" | "style" | "disabled" | "label" | "meta" | "multiple" | "variant" | "options" | "placeholder" | "readOnly" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    highlightedIndex: number;
+    selectedItem: unknown;
+    isOpen: boolean;
+    inputValue: string;
+    getToggleButtonProps: <Options>(options?: import("downshift").UseComboboxGetToggleButtonPropsOptions & Options) => import("downshift").Overwrite<import("downshift").UseComboboxGetToggleButtonPropsReturnValue, Options>;
+    getLabelProps: <Options>(options?: import("downshift").UseComboboxGetLabelPropsOptions & Options) => import("downshift").Overwrite<import("downshift").UseComboboxGetLabelPropsReturnValue, Options>;
+    getMenuProps: <Options>(options?: import("downshift").UseComboboxGetMenuPropsOptions & Options, otherOptions?: import("downshift").GetPropsCommonOptions) => import("downshift").Overwrite<import("downshift").UseComboboxGetMenuPropsReturnValue, Options>;
+    getItemProps: <Options>(options: import("downshift").UseComboboxGetItemPropsOptions<unknown> & Options) => Omit<import("downshift").Overwrite<import("downshift").UseComboboxGetItemPropsReturnValue, Options>, "index" | "item">;
+    getInputProps: <Options>(options?: import("downshift").UseComboboxGetInputPropsOptions & Options, otherOptions?: import("downshift").GetPropsCommonOptions) => import("downshift").Overwrite<import("downshift").UseComboboxGetInputPropsReturnValue, Options>;
+    reset: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    toggleMenu: () => void;
+    selectItem: (item: unknown) => void;
+    setHighlightedIndex: (index: number) => void;
+    setInputValue: (inputValue: string) => void;
+}>;
+export declare const useAutocompleteContext: () => {
+    getDropdownProps: <Options>(options?: import("downshift").UseMultipleSelectionGetDropdownPropsOptions & Options, extraOptions?: import("downshift").GetPropsCommonOptions) => Omit<import("downshift").Overwrite<import("downshift").UseMultipleSelectionGetDropdownReturnValue, Options>, "preventKeyAction">;
+    addSelectedItem: (item: unknown) => void;
+    removeSelectedItem: (item: unknown) => void;
+    selectedItems: unknown[];
+    setSelectedItems: (items: unknown[]) => void;
+    clear: () => void;
+    availableItems: readonly unknown[];
+    getLabel: (item: unknown) => string;
+    scrollContainer: import("react").RefObject<HTMLUListElement>;
+    rowVirtualizer: import("@tanstack/react-virtual").Virtualizer<HTMLUListElement, Element>;
+    allSelectedState: string;
+    toggleAllSelected: () => void;
+    typedInputValue: string;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    token: () => import("styled-components").DefaultTheme;
+    tokens: import("./Autocomplete.tokens").AutocompleteToken;
+    placeholderText: string;
+    readOnly: boolean;
+    inputProps: import("downshift").Overwrite<import("downshift").UseComboboxGetInputPropsReturnValue, Omit<import("downshift").Overwrite<import("downshift").UseMultipleSelectionGetDropdownReturnValue, {
+        preventKeyAction: boolean;
+        disabled: boolean;
+        ref: import("react").RefObject<HTMLInputElement>;
+    }>, "preventKeyAction">>;
+    consolidatedEvents: Partial<import("react").DOMAttributes<unknown>>;
+    multiple: boolean;
+    disabled: boolean;
+    optionDisabled: (option: unknown) => boolean;
+    onAddNewOption: (text: string) => void;
+    options: readonly unknown[];
+    totalOptions: number;
+    label: import("react").ReactNode;
+    meta: import("react").ReactNode;
+    className: string;
+    style: import("react").CSSProperties;
+    loading: boolean;
+    hideClearButton: boolean;
+    onOptionsChange: (changes: import("./Autocomplete").AutocompleteChanges<unknown>) => void;
+    onInputChange: (text: string) => void;
+    selectedOptions: unknown[];
+    selectionDisplay: "summary" | "chips";
+    itemToKey: (item: unknown) => unknown;
+    itemCompare: (value: unknown, compare: unknown) => boolean;
+    allowSelectAll: boolean;
+    initialSelectedOptions: unknown[];
+    optionsFilter: (option: unknown, inputValue: string) => boolean;
+    autoWidth: boolean;
+    placeholder: string;
+    optionLabel: ((option: string | number) => string) | ((option: object) => string) | ((option: unknown) => string);
+    clearSearchOnChange: boolean;
+    multiline: boolean;
+    dropdownHeight: number;
+    optionComponent: (option: unknown, isSelected: boolean) => import("react").ReactNode;
+    helperText: string;
+    helperIcon: import("react").ReactNode;
+    noOptionsText: string;
+    variant: import("../types").Variants;
+    onClear: () => void;
+    selectedItemsLabels: string[];
+    restHtmlProps: Omit<{
+        options: readonly unknown[];
+        totalOptions?: number;
+        label: import("react").ReactNode;
+        initialSelectedOptions?: unknown[];
+        helperText?: string;
+        helperIcon?: import("react").ReactNode;
+        noOptionsText?: string;
+        variant?: import("../types").Variants;
+        meta?: import("react").ReactNode;
+        disabled?: boolean;
+        loading?: boolean;
+        readOnly?: boolean;
+        hideClearButton?: boolean;
+        selectedOptions?: unknown[];
+        selectionDisplay?: "chips" | "summary";
+        onOptionsChange?: (changes: import("./Autocomplete").AutocompleteChanges<unknown>) => void;
+        onInputChange?: (text: string) => void;
+        onAddNewOption?: (text: string) => void;
+        multiple?: boolean;
+        allowSelectAll?: boolean;
+        optionComponent?: (option: unknown, isSelected: boolean) => import("react").ReactNode;
+        optionDisabled?: (option: unknown) => boolean;
+        optionsFilter?: (option: unknown, inputValue: string) => boolean;
+        autoWidth?: boolean;
+        placeholder?: string;
+        clearSearchOnChange?: boolean;
+        multiline?: boolean;
+        dropdownHeight?: number;
+        itemToKey?: (value: unknown) => unknown;
+        itemCompare?: (value: unknown, compare: unknown) => boolean;
+        onClear?: () => void;
+        ref?: React.Ref<HTMLInputElement>;
+    } & import("react").HTMLAttributes<HTMLDivElement> & {
+        optionLabel?: (option: unknown) => string;
+    } & {
+        ref?: React.Ref<HTMLInputElement>;
+    }, "ref" | "className" | "style" | "disabled" | "label" | "meta" | "multiple" | "variant" | "options" | "placeholder" | "readOnly" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    highlightedIndex: number;
+    selectedItem: unknown;
+    isOpen: boolean;
+    inputValue: string;
+    getToggleButtonProps: <Options>(options?: import("downshift").UseComboboxGetToggleButtonPropsOptions & Options) => import("downshift").Overwrite<import("downshift").UseComboboxGetToggleButtonPropsReturnValue, Options>;
+    getLabelProps: <Options>(options?: import("downshift").UseComboboxGetLabelPropsOptions & Options) => import("downshift").Overwrite<import("downshift").UseComboboxGetLabelPropsReturnValue, Options>;
+    getMenuProps: <Options>(options?: import("downshift").UseComboboxGetMenuPropsOptions & Options, otherOptions?: import("downshift").GetPropsCommonOptions) => import("downshift").Overwrite<import("downshift").UseComboboxGetMenuPropsReturnValue, Options>;
+    getItemProps: <Options>(options: import("downshift").UseComboboxGetItemPropsOptions<unknown> & Options) => Omit<import("downshift").Overwrite<import("downshift").UseComboboxGetItemPropsReturnValue, Options>, "index" | "item">;
+    getInputProps: <Options>(options?: import("downshift").UseComboboxGetInputPropsOptions & Options, otherOptions?: import("downshift").GetPropsCommonOptions) => import("downshift").Overwrite<import("downshift").UseComboboxGetInputPropsReturnValue, Options>;
+    reset: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    toggleMenu: () => void;
+    selectItem: (item: unknown) => void;
+    setHighlightedIndex: (index: number) => void;
+    setInputValue: (inputValue: string) => void;
+};

package/dist/types/components/Autocomplete/EmptyOption.d.ts

@@ -0,0 +1 @@
+export declare function EmptyOption(): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Autocomplete/MultipleInput.d.ts

@@ -0,0 +1 @@
+export declare const MultipleInput: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Autocomplete/Option.d.ts

@@ -1,26 +1,18 @@
-import { LiHTMLAttributes, ReactNode } from 'react';
+import { VirtualItem } from '@tanstack/react-virtual';
 type StyledListItemType = {
     $highlighted?: string;
     $active?: string;
     $isdisabled?: string;
 };
-export declare const StyledListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, StyledListItemType>> & string;
+export declare const StyledListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, StyledListItemType>> & string;
 export declare const AutocompleteOptionLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $multiline: boolean;
 }>> & string;
 export type AutocompleteOptionProps = {
-    value: string;
-    multiple: boolean;
-    highlighted: string;
-    isSelected: boolean;
-    isDisabled?: boolean;
-    multiline: boolean;
-    optionComponent?: ReactNode;
+    index: number;
+    virtualItem: VirtualItem;
+    item: unknown;
     indeterminate?: boolean;
-} & LiHTMLAttributes<HTMLLIElement>;
-declare function AutocompleteOptionInner(props: AutocompleteOptionProps, ref: React.ForwardedRef<HTMLLIElement>): import("react/jsx-runtime").JSX.Element;
-export declare const AutocompleteOption: (props: AutocompleteOptionProps & {
-    ref?: React.ForwardedRef<HTMLLIElement>;
-    displayName?: string | undefined;
-}) => ReturnType<typeof AutocompleteOptionInner>;
+};
+export declare function Option({ indeterminate, index, item, virtualItem, }: AutocompleteOptionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Autocomplete/OptionList.d.ts

@@ -0,0 +1,2 @@
+import { UseFloatingReturn } from '@floating-ui/react';
+export declare const OptionList: ({ refs, strategy, x, y, update, }: UseFloatingReturn) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Autocomplete/RightAdornments.d.ts

@@ -0,0 +1 @@
+export declare const RightAdornments: () => import("react/jsx-runtime").JSX.Element;