@semcore/select 17.3.0 → 17.4.0-prerelease.1

package/lib/es6/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { BoxProps, Flex } from '@semcore/base-components';\nimport type { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps, LinkTriggerProps } from '@semcore/base-trigger';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type Divider from '@semcore/divider';\nimport type Dropdown from '@semcore/dropdown';\nimport type { StatusItemComponent } from '@semcore/dropdown';\nimport type {\n  DropdownMenuContext,\n  DropdownMenuItemProps,\n  DropdownMenuProps,\n  DropdownMenuHandlers,\n  DropdownMenuTriggerProps,\n} from '@semcore/dropdown-menu';\nimport type DropdownMenu from '@semcore/dropdown-menu';\nimport type { InputValueProps } from '@semcore/input';\nimport type Input from '@semcore/input';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\nexport type SelectInputSearch = InputValueProps & {};\n\nexport type OptionValue = string | number;\nexport type SelectValue = string | number | Array<string | number> | null;\n\nexport type SelectOption = {\n  value: OptionValue;\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n};\n\nexport type SelectProps<T extends SelectValue = SelectValue> = Intergalactic.InternalTypings.EfficientOmit<DropdownMenuProps, 'size'> &\n  Intergalactic.InternalTypings.EfficientOmit<BaseTriggerProps, 'size'> & {\n    /**\n     * Options array\n     */\n    options?: SelectOption[];\n    /**\n     * The value or values array selected by default when using multiselect\n     * @type SelectValue\n     */\n    defaultValue?: T;\n    /**\n     * The selected value or values array when using multiselect\n     * @type SelectValue\n     */\n    value?: T;\n    /**\n     * Callback on value change\n     * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void\n     */\n    onChange?:\n      | ((value: T, e: React.SyntheticEvent) => boolean | void)\n      | React.Dispatch<React.SetStateAction<T>>;\n    /**\n     * Trigger placeholder at not selected value\n     */\n    placeholder?: React.ReactNode;\n    /**\n     * Trigger state\n     */\n    state?: 'normal' | 'valid' | 'invalid';\n    /**\n     * Disables select\n     */\n    disabled?: boolean;\n    /**\n     * If provided, adds a hidden <input /> tag with the given name for enhancing accessibility.\n     */\n    name?: string;\n    /** Specifies the locale for i18n support */\n    locale?: string;\n    /**\n     * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.\n     * @default true\n     */\n    scrollToSelected?: boolean;\n  } & ({\n    tag?: never;\n    /**\n     * Default type for size from BaseTriggerProps if there is no customization via `tag`.\n     */\n    size?: BaseTriggerProps['size'];\n  } | {});\n\nexport type SelectOptionProps = DropdownMenuItemProps & {\n  /**\n   * Enables selected state\n   */\n  selected?: boolean;\n  /** Value of the option */\n  value: string | number;\n};\n\nexport type SelectOptionCheckboxProps = BoxProps & {\n  /** Checkbox theme */\n  theme?: string;\n  /** Visual indeterminate state */\n  indeterminate?: boolean;\n  /** Controls the selected state */\n  selected?: boolean;\n};\n\ndeclare const InputSearch: Intergalactic.Component<'div', SelectInputSearch> & {\n  SearchIcon: typeof Input.Addon;\n  Value: typeof Input.Value;\n  Clear: typeof Input.Addon;\n};\n\nexport type SelectContext = DropdownMenuContext & {\n  getOptionProps: PropGetterFn;\n  getOptionCheckboxProps: PropGetterFn;\n  getDividerProps: PropGetterFn;\n};\n\nexport type SelectHandlers = DropdownMenuHandlers & {\n  value: (index: SelectValue) => void;\n};\n\ntype IntergalacticSelectComponent<PropsExtending = {}> = (<\n  Value extends SelectValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    SelectProps<Value>,\n    SelectContext,\n    [handlers: SelectHandlers]\n  > &\n  PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', SelectProps>;\n\ndeclare const Select: IntergalacticSelectComponent & {\n  Trigger: Intergalactic.Component<\n    typeof Dropdown.Trigger,\n    DropdownMenuTriggerProps & (ButtonTriggerProps | LinkTriggerProps),\n    {},\n    [handlers: SelectHandlers]\n  > & {\n    Addon: typeof ButtonTrigger.Addon;\n    Text: typeof ButtonTrigger.Text;\n  };\n  Popper: typeof DropdownMenu.Popper;\n  List: typeof DropdownMenu.List;\n  Menu: typeof DropdownMenu.Menu;\n  Group: typeof Dropdown.Group;\n  StatusItem: StatusItemComponent;\n  Option: Intergalactic.Component<\n    'option',\n    SelectOptionProps,\n    SelectContext,\n    [handlers: SelectHandlers]\n  > & {\n    Addon: typeof DropdownMenu.Item.Addon;\n    Checkbox: Intergalactic.Component<'div', SelectOptionCheckboxProps>;\n    Content: typeof Flex;\n    Text: typeof Text;\n    Hint: typeof Flex;\n  };\n  Divider: typeof Divider;\n  InputSearch: typeof InputSearch;\n  Input: typeof InputSearch;\n};\n\ndeclare const wrapSelect: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticSelectComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticSelectComponent<PropsExtending>;\n\nexport { InputSearch, wrapSelect };\nexport default Select;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { BoxProps, Flex } from '@semcore/base-components';\nimport type { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps, LinkTriggerProps } from '@semcore/base-trigger';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type Divider from '@semcore/divider';\nimport type Dropdown from '@semcore/dropdown';\nimport type { StatusItemComponent } from '@semcore/dropdown';\nimport type {\n  DropdownMenuContext,\n  DropdownMenuItemProps,\n  DropdownMenuProps,\n  DropdownMenuHandlers,\n  DropdownMenuTriggerProps,\n} from '@semcore/dropdown-menu';\nimport type DropdownMenu from '@semcore/dropdown-menu';\nimport type { NSInput } from '@semcore/input';\nimport type Input from '@semcore/input';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\nexport type SelectInputSearch = NSInput.Value.Props & {};\nimport type { NSAutoSuggest } from './components/AutoSuggest/AutoSuggest.type';\n\nexport type OptionValue = string | number;\nexport type SelectValue = string | number | Array<string | number> | null;\n\nexport type SelectOption = {\n  value: OptionValue;\n  children?: React.ReactNode;\n  label?: React.ReactNode;\n};\n\nexport type SelectProps<T extends SelectValue = SelectValue> = Intergalactic.InternalTypings.EfficientOmit<DropdownMenuProps, 'size'> &\n  Intergalactic.InternalTypings.EfficientOmit<BaseTriggerProps, 'size'> & {\n    /**\n     * Options array\n     */\n    options?: SelectOption[];\n    /**\n     * The value or values array selected by default when using multiselect\n     * @type SelectValue\n     */\n    defaultValue?: T;\n    /**\n     * The selected value or values array when using multiselect\n     * @type SelectValue\n     */\n    value?: T;\n    /**\n     * Callback on value change\n     * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void\n     */\n    onChange?:\n      | ((value: T, e: React.SyntheticEvent) => boolean | void)\n      | React.Dispatch<React.SetStateAction<T>>;\n    /**\n     * Trigger placeholder at not selected value\n     */\n    placeholder?: React.ReactNode;\n    /**\n     * Trigger state\n     */\n    state?: 'normal' | 'valid' | 'invalid';\n    /**\n     * Disables select\n     */\n    disabled?: boolean;\n    /**\n     * If provided, adds a hidden <input /> tag with the given name for enhancing accessibility.\n     */\n    name?: string;\n    /** Specifies the locale for i18n support */\n    locale?: string;\n    /**\n     * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.\n     * @default true\n     */\n    scrollToSelected?: boolean;\n  } & ({\n    tag?: never;\n    /**\n     * Default type for size from BaseTriggerProps if there is no customization via `tag`.\n     */\n    size?: BaseTriggerProps['size'];\n  } | {});\n\nexport type SelectOptionProps = DropdownMenuItemProps & {\n  /**\n   * Enables selected state\n   */\n  selected?: boolean;\n  /** Value of the option */\n  value: string | number;\n};\n\nexport type SelectOptionCheckboxProps = BoxProps & {\n  /** Checkbox theme */\n  theme?: string;\n  /** Visual indeterminate state */\n  indeterminate?: boolean;\n  /** Controls the selected state */\n  selected?: boolean;\n};\n\ndeclare const InputSearch: Intergalactic.Component<'div', SelectInputSearch> & {\n  SearchIcon: typeof Input.Addon;\n  Value: typeof Input.Value;\n  Clear: typeof Input.Addon;\n};\n\nexport type SelectContext = DropdownMenuContext & {\n  getOptionProps: PropGetterFn;\n  getOptionCheckboxProps: PropGetterFn;\n  getDividerProps: PropGetterFn;\n};\n\nexport type SelectHandlers = DropdownMenuHandlers & {\n  value: (index: SelectValue) => void;\n};\n\ntype IntergalacticSelectComponent<PropsExtending = {}> = (<\n  Value extends SelectValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    SelectProps<Value>,\n    SelectContext,\n    [handlers: SelectHandlers]\n  > &\n  PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', SelectProps>;\n\ndeclare const Select: IntergalacticSelectComponent & {\n  Trigger: Intergalactic.Component<\n    typeof Dropdown.Trigger,\n    DropdownMenuTriggerProps & (ButtonTriggerProps | LinkTriggerProps),\n    {},\n    [handlers: SelectHandlers]\n  > & {\n    Addon: typeof ButtonTrigger.Addon;\n    Text: typeof ButtonTrigger.Text;\n  };\n  Popper: typeof DropdownMenu.Popper;\n  List: typeof DropdownMenu.List;\n  Menu: typeof DropdownMenu.Menu;\n  Group: typeof Dropdown.Group;\n  StatusItem: StatusItemComponent;\n  Option: Intergalactic.Component<\n    'option',\n    SelectOptionProps,\n    SelectContext,\n    [handlers: SelectHandlers]\n  > & {\n    Addon: typeof DropdownMenu.Item.Addon;\n    Checkbox: Intergalactic.Component<'div', SelectOptionCheckboxProps>;\n    Content: typeof Flex;\n    Text: typeof Text;\n    Hint: typeof Flex;\n  };\n  Divider: typeof Divider;\n  InputSearch: typeof InputSearch;\n  Input: typeof InputSearch;\n};\n\ndeclare const wrapSelect: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticSelectComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticSelectComponent<PropsExtending>;\n\ndeclare const AutoSuggest: NSAutoSuggest.Component;\n\nexport { InputSearch, wrapSelect, AutoSuggest, NSAutoSuggest };\nexport default Select;\n"],"mappings":"","ignoreList":[]}

package/lib/es6/index.js

@@ -1,4 +1,5 @@
 export { default as InputSearch } from './InputSearch';
 export { default } from './Select';
 export * from './Select';
+export { AutoSuggest } from './components/AutoSuggest/AutoSuggest';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","InputSearch"],"sources":["../../src/index.js"],"sourcesContent":["export { default as InputSearch } from './InputSearch';\nexport { default } from './Select';\nexport * from './Select';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAAW,QAAQ,eAAe;AACtD,SAASD,OAAO,QAAQ,UAAU;AAClC,cAAc,UAAU","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","InputSearch","AutoSuggest"],"sources":["../../src/index.js"],"sourcesContent":["export { default as InputSearch } from './InputSearch';\nexport { default } from './Select';\nexport * from './Select';\nexport { AutoSuggest } from './components/AutoSuggest/AutoSuggest';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAAW,QAAQ,eAAe;AACtD,SAASD,OAAO,QAAQ,UAAU;AAClC,cAAc,UAAU;AACxB,SAASE,WAAW,QAAQ,sCAAsC","ignoreList":[]}

package/lib/es6/translations/en.json

@@ -2,5 +2,6 @@
   "clearSearch": "Clear search field",
   "selectPlaceholder": "Select option",
   "Select.InputSearch.Value:placeholder": "Search",
-  "Select.InputSearch.Value:aria-label": "Search"
+  "Select.InputSearch.Value:aria-label": "Search",
+  "AutoSuggest.Popper.placeholderText": "Start typing to see options"
 }

package/lib/esm/InputSearch.mjs

@@ -13,16 +13,16 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SInputSearch_n08x0_gg_._size_m_n08x0_gg_{height:32px}.___SSearchClear_n08x0_gg_{padding:0 var(--intergalactic-spacing-2x,8px)}.___SSearchClear_n08x0_gg_.__hide_n08x0_gg_{visibility:hidden}.___SOutline_n08x0_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded,6px) var(--intergalactic-control-rounded,6px) 0 0;box-sizing:initial}",
+    ".___SInputSearch_1m3u8_gg_._size_m_1m3u8_gg_{height:32px}.___SSearchClear_1m3u8_gg_{padding:0 var(--intergalactic-spacing-2x,8px)}.___SSearchClear_1m3u8_gg_.__hide_1m3u8_gg_{visibility:hidden}.___SOutline_1m3u8_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded,6px) var(--intergalactic-control-rounded,6px) 0 0;box-sizing:initial}",
     /*__inner_css_end__*/
-    "n08x0_gg_"
+    "1m3u8_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SInputSearch": "___SInputSearch_n08x0_gg_",
-    "_size_m": "_size_m_n08x0_gg_",
-    "__SSearchClear": "___SSearchClear_n08x0_gg_",
-    "_hide": "__hide_n08x0_gg_",
-    "__SOutline": "___SOutline_n08x0_gg_"
+    "__SInputSearch": "___SInputSearch_1m3u8_gg_",
+    "_size_m": "_size_m_1m3u8_gg_",
+    "__SSearchClear": "___SSearchClear_1m3u8_gg_",
+    "_hide": "__hide_1m3u8_gg_",
+    "__SOutline": "___SOutline_1m3u8_gg_"
   })
 );
 class InputSearchRoot extends Component {

package/lib/esm/Select.mjs

@@ -22,18 +22,18 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SOptionCheckbox_12jrr_gg_{margin-top:var(--intergalactic-spacing-05x,2px);margin-right:var(--intergalactic-spacing-2x,8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_12jrr_gg_:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));border:1px solid;border-radius:var(--intergalactic-addon-rounded,4px);border-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SOptionCheckbox_12jrr_gg_:before{border-color:var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SOptionCheckbox_12jrr_gg_:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x,2px);background-repeat:no-repeat;background-position:50%}.___SOptionCheckbox_12jrr_gg_.__selected_12jrr_gg_:after{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI3IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgNyI+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTguMjUgMSA0IDUuMjUgMS43NSAzIi8+PC9zdmc+")}.___SOptionCheckbox_12jrr_gg_._size_l_12jrr_gg_{width:20px;height:20px}.___SOptionCheckbox_12jrr_gg_._size_l_12jrr_gg_.__selected_12jrr_gg_:after{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTExIDEuNSA0Ljc1IDcuNzUgMSA0Ii8+PC9zdmc+")}.___SOptionCheckbox_12jrr_gg_.__indeterminate_12jrr_gg_:before,.___SOptionCheckbox_12jrr_gg_.__selected_12jrr_gg_:before{background-color:var(--intergalactic-control-primary-info,oklch(.23 .01 140));border-color:var(--intergalactic-control-primary-info,oklch(.23 .01 140))}.___SOptionCheckbox_12jrr_gg_.__theme_12jrr_gg_:before{border-color:var(--theme_12jrr)}.___SOptionCheckbox_12jrr_gg_.__theme_12jrr_gg_.__indeterminate_12jrr_gg_:before,.___SOptionCheckbox_12jrr_gg_.__theme_12jrr_gg_.__selected_12jrr_gg_:before{background-color:var(--theme_12jrr);border-color:var(--theme_12jrr)}.___SOptionCheckbox_12jrr_gg_.__selected_12jrr_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected,#0050ff14)}@media (color-gamut:p3){.___SOptionCheckbox_12jrr_gg_.__selected_12jrr_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected,oklch(.525 .265 263/.077))}}@media (hover:hover){.___SOptionCheckbox_12jrr_gg_.__selected_12jrr_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover,#004dff31)}@media (color-gamut:p3){.___SOptionCheckbox_12jrr_gg_.__selected_12jrr_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover,oklch(.52 .268 263.2/.191))}}}.___SOptionCheckbox_12jrr_gg_.__indeterminate_12jrr_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_12jrr_gg_.__indeterminate_12jrr_gg_._size_l_12jrr_gg_:after{width:12px;height:2px}.___SOptionCheckbox_12jrr_gg_.__indeterminate_12jrr_gg_._size_m_12jrr_gg_:after{width:8px;height:2px}',
+    '.___SOptionCheckbox_nu0ok_gg_{margin-top:var(--intergalactic-spacing-05x,2px);margin-right:var(--intergalactic-spacing-2x,8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_nu0ok_gg_:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));border:1px solid;border-radius:var(--intergalactic-addon-rounded,4px);border-color:var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SOptionCheckbox_nu0ok_gg_:before{border-color:var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SOptionCheckbox_nu0ok_gg_:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x,2px);background-repeat:no-repeat;background-position:50%}.___SOptionCheckbox_nu0ok_gg_.__selected_nu0ok_gg_:after{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI3IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgNyI+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTguMjUgMSA0IDUuMjUgMS43NSAzIi8+PC9zdmc+")}.___SOptionCheckbox_nu0ok_gg_._size_l_nu0ok_gg_{width:20px;height:20px}.___SOptionCheckbox_nu0ok_gg_._size_l_nu0ok_gg_.__selected_nu0ok_gg_:after{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTExIDEuNSA0Ljc1IDcuNzUgMSA0Ii8+PC9zdmc+")}.___SOptionCheckbox_nu0ok_gg_.__indeterminate_nu0ok_gg_:before,.___SOptionCheckbox_nu0ok_gg_.__selected_nu0ok_gg_:before{background-color:var(--intergalactic-control-primary-info,oklch(.23 .01 140));border-color:var(--intergalactic-control-primary-info,oklch(.23 .01 140))}.___SOptionCheckbox_nu0ok_gg_.__theme_nu0ok_gg_:before{border-color:var(--theme_nu0ok)}.___SOptionCheckbox_nu0ok_gg_.__theme_nu0ok_gg_.__indeterminate_nu0ok_gg_:before,.___SOptionCheckbox_nu0ok_gg_.__theme_nu0ok_gg_.__selected_nu0ok_gg_:before{background-color:var(--theme_nu0ok);border-color:var(--theme_nu0ok)}.___SOptionCheckbox_nu0ok_gg_.__selected_nu0ok_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected,#0050ff14)}@media (color-gamut:p3){.___SOptionCheckbox_nu0ok_gg_.__selected_nu0ok_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected,oklch(.525 .265 263/.077))}}@media (hover:hover){.___SOptionCheckbox_nu0ok_gg_.__selected_nu0ok_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover,#004dff31)}@media (color-gamut:p3){.___SOptionCheckbox_nu0ok_gg_.__selected_nu0ok_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover,oklch(.52 .268 263.2/.191))}}}.___SOptionCheckbox_nu0ok_gg_.__indeterminate_nu0ok_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_nu0ok_gg_.__indeterminate_nu0ok_gg_._size_l_nu0ok_gg_:after{width:12px;height:2px}.___SOptionCheckbox_nu0ok_gg_.__indeterminate_nu0ok_gg_._size_m_nu0ok_gg_:after{width:8px;height:2px}',
     /*__inner_css_end__*/
-    "12jrr_gg_"
+    "nu0ok_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SOptionCheckbox": "___SOptionCheckbox_12jrr_gg_",
-    "_selected": "__selected_12jrr_gg_",
-    "_size_l": "_size_l_12jrr_gg_",
-    "_indeterminate": "__indeterminate_12jrr_gg_",
-    "_theme": "__theme_12jrr_gg_",
-    "--theme": "--theme_12jrr",
-    "_size_m": "_size_m_12jrr_gg_"
+    "__SOptionCheckbox": "___SOptionCheckbox_nu0ok_gg_",
+    "_selected": "__selected_nu0ok_gg_",
+    "_size_l": "_size_l_nu0ok_gg_",
+    "_indeterminate": "__indeterminate_nu0ok_gg_",
+    "_theme": "__theme_nu0ok_gg_",
+    "--theme": "--theme_nu0ok",
+    "_size_m": "_size_m_nu0ok_gg_"
   })
 );
 function isSelectedOption(value, valueOption) {

package/lib/esm/components/AutoSuggest/AutoSuggest.mjs

@@ -0,0 +1,500 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { Component, assignProps, createComponent } from "@semcore/core";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { getAccessibleName } from "@semcore/core/lib/utils/getAccessibleName";
+import { forkRef } from "@semcore/core/lib/utils/ref";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import { isFocusInside } from "@semcore/core/lib/utils/use/useFocusLock";
+import { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
+import Input from "@semcore/input";
+import Spin from "@semcore/spin";
+import React from "react";
+import { Highlight } from "./Highlight.mjs";
+import "../../index.mjs";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import Select from "../../Select.mjs";
+class AutoSuggestRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "abortController", void 0);
+    _defineProperty(this, "changeDebounce", null);
+    _defineProperty(this, "triggerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "popperRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "state", {
+      isVisible: false,
+      highlightedIndex: -1,
+      suggestions: Array.isArray(this.props.suggestions) ? this.props.suggestions : [],
+      openOnChanges: true,
+      isLoading: false
+    });
+    _defineProperty(this, "handleChange", (value, event) => {
+      this.handlers.value(value, event);
+      if (this.changeDebounce) {
+        clearTimeout(this.changeDebounce);
+      }
+      if (this.abortController) {
+        this.abortController.abort();
+      }
+      if (value !== this.asProps.value) {
+        const {
+          suggestions,
+          duration
+        } = this.asProps;
+        if (value === "") {
+          this.setState({
+            isLoading: false
+          });
+          setTimeout(() => {
+            if (document.activeElement === this.triggerRef.current) {
+              this.setState({
+                suggestions: [],
+                isVisible: true
+              });
+            }
+          }, Number(duration));
+          return;
+        }
+        if (!Array.isArray(suggestions) && this.state.openOnChanges) {
+          this.setState({
+            isLoading: true,
+            isVisible: true
+          });
+        }
+        this.changeDebounce = setTimeout(async () => {
+          const {
+            openOnChanges
+          } = this.state;
+          if (Array.isArray(suggestions)) {
+            const filteredSuggestions = value === "" ? [] : suggestions.filter((s) => s.toLowerCase().includes(value.toLowerCase()));
+            this.setState({
+              suggestions: filteredSuggestions,
+              isVisible: filteredSuggestions.length > 0 && openOnChanges
+            });
+          } else {
+            this.abortController = new AbortController();
+            const abortSignal = this.abortController.signal;
+            const filteredSuggestions = await suggestions(value, abortSignal);
+            if (!this.abortController.signal.aborted) {
+              this.setState({
+                suggestions: filteredSuggestions,
+                isLoading: false,
+                isVisible: filteredSuggestions.length > 0 && openOnChanges
+              });
+            }
+          }
+        }, 300);
+      }
+    });
+    _defineProperty(this, "handleChangeVisible", (isVisible) => {
+      this.setState({
+        isVisible
+      });
+    });
+    _defineProperty(this, "handleChangeHighlightedIndex", (index) => {
+      this.setState({
+        highlightedIndex: index ?? -1
+      });
+    });
+    _defineProperty(this, "handleKeyDown", (e) => {
+      if (!e.key.startsWith("Arrow")) {
+        this.setState({
+          highlightedIndex: -1
+        });
+      }
+      if (e.key === "Escape") {
+        this.setState({
+          openOnChanges: false,
+          isLoading: false
+        });
+        this.abortController?.abort();
+      }
+      const {
+        value
+      } = this.asProps;
+      const {
+        isVisible,
+        suggestions
+      } = this.state;
+      if (!isVisible) {
+        const filteredSuggestions = suggestions.filter((s) => {
+          return value !== "" && s.toLowerCase().includes(value.toLowerCase());
+        });
+        if (e.key === "ArrowDown") {
+          this.setState({
+            suggestions: filteredSuggestions,
+            highlightedIndex: 0
+          });
+        }
+        if (e.key === "ArrowUp") {
+          this.setState({
+            suggestions: filteredSuggestions,
+            highlightedIndex: filteredSuggestions.length - 1
+          });
+        }
+        if (e.key === "Enter") {
+          this.setState({
+            suggestions: filteredSuggestions,
+            highlightedIndex: -1,
+            isVisible: true,
+            openOnChanges: true
+          });
+        }
+      }
+    });
+    _defineProperty(this, "handleChangeSelect", (value, e) => {
+      this.handlers.value(value, e);
+    });
+    _defineProperty(this, "handleFocus", () => {
+      const {
+        value,
+        statusItemPlaceholder
+      } = this.asProps;
+      const {
+        suggestions
+      } = this.state;
+      this.setState({
+        openOnChanges: true,
+        isVisible: statusItemPlaceholder === "" ? value !== "" : true,
+        suggestions: suggestions.filter((s) => {
+          return value !== "" && s.toLowerCase().includes(value.toLowerCase());
+        }),
+        highlightedIndex: -1
+      });
+    });
+    _defineProperty(this, "handleBlur", () => {
+      setTimeout(() => {
+        const popperElement = this.popperRef.current;
+        if (!popperElement || !isFocusInside(popperElement)) {
+          this.handleChangeVisible(false);
+        }
+      });
+    });
+  }
+  uncontrolledProps() {
+    return {
+      value: null
+    };
+  }
+  componentDidMount() {
+    const {
+      value,
+      suggestions
+    } = this.asProps;
+    if (value && !Array.isArray(suggestions)) {
+      this.changeDebounce = setTimeout(async () => {
+        this.abortController = new AbortController();
+        const abortSignal = this.abortController.signal;
+        const filteredSuggestions = await suggestions(value, abortSignal);
+        if (!this.abortController.signal.aborted) {
+          this.setState({
+            suggestions: filteredSuggestions,
+            isLoading: false
+          });
+          this.changeDebounce = null;
+        }
+      });
+    }
+  }
+  get id() {
+    const {
+      uid,
+      id
+    } = this.asProps;
+    return id ?? `${uid}_autosuggest-trigger`;
+  }
+  get isStartTypingState() {
+    const {
+      suggestions
+    } = this.state;
+    const {
+      statusItemPlaceholder,
+      value
+    } = this.asProps;
+    return value === "" && statusItemPlaceholder !== "" && suggestions.length === 0;
+  }
+  get isAriaExpanded() {
+    const {
+      isVisible,
+      isLoading,
+      suggestions
+    } = this.state;
+    return isVisible && suggestions.length > 0 && !isLoading && !this.isStartTypingState;
+  }
+  get isVisiblePopper() {
+    const {
+      isVisible,
+      isLoading,
+      suggestions
+    } = this.state;
+    return isVisible && (suggestions.length > 0 || isLoading || this.isStartTypingState);
+  }
+  get neighborLocation() {
+    const {
+      addonLeft: AddonLeft,
+      addonRight: AddonRight
+    } = this.asProps;
+    let neighborLocation = void 0;
+    if (AddonLeft && AddonRight) {
+      neighborLocation = "both";
+    } else if (AddonLeft) {
+      neighborLocation = "left";
+    } else if (AddonRight) {
+      neighborLocation = "right";
+    }
+    return neighborLocation;
+  }
+  getTriggerProps() {
+    const {
+      size,
+      getI18nText,
+      neighborLocation,
+      addonLeft,
+      addonRight,
+      uid
+    } = this.asProps;
+    const {
+      isLoading
+    } = this.state;
+    return {
+      "tag": Input,
+      "onFocus": this.handleFocus,
+      "onBlur": this.handleBlur,
+      "aria-haspopup": "listbox",
+      "aria-expanded": this.isAriaExpanded ? "true" : "false",
+      "aria-controls": `igc-${uid}-list`,
+      isLoading,
+      size,
+      getI18nText,
+      neighborLocation,
+      addonLeft,
+      addonRight
+    };
+  }
+  getTriggerValueProps() {
+    const {
+      value,
+      forwardRef,
+      autoComplete,
+      role,
+      onChange,
+      ref,
+      id,
+      ...props
+    } = this.asProps;
+    return {
+      autoComplete: "off",
+      onChange: this.handleChange,
+      onKeyDown: this.handleKeyDown,
+      role: "combobox",
+      value,
+      ref: forwardRef ? forkRef(forwardRef, this.triggerRef) : this.triggerRef,
+      id: this.id,
+      ...props,
+      neighborLocation: this.neighborLocation
+    };
+  }
+  getPopperProps() {
+    return {
+      "aria-labelledby": this.id,
+      "ref": this.popperRef
+    };
+  }
+  getPopperLoadingStateProps() {
+    const {
+      isLoading
+    } = this.state;
+    return {
+      isLoading
+    };
+  }
+  getPopperStartTypingStateProps() {
+    const {
+      getI18nText,
+      statusItemPlaceholder
+    } = this.asProps;
+    const {
+      isLoading
+    } = this.state;
+    return {
+      isLoading,
+      isStartTypingState: this.isStartTypingState,
+      children: statusItemPlaceholder ?? getI18nText("AutoSuggest.Popper.placeholderText")
+    };
+  }
+  getPopperListProps() {
+    const {
+      value
+    } = this.asProps;
+    const {
+      isLoading,
+      suggestions
+    } = this.state;
+    const triggerElement = this.triggerRef.current;
+    return {
+      value,
+      isLoading,
+      suggestions,
+      "isStartTypingState": this.isStartTypingState,
+      "aria-label": getAccessibleName(triggerElement)
+    };
+  }
+  getPopperSuggestionItemProps(_, index) {
+    const {
+      suggestions
+    } = this.state;
+    const {
+      value
+    } = this.asProps;
+    const option = suggestions[index];
+    return {
+      value: option,
+      selected: false,
+      onClick: (e) => this.handleChangeSelect(option, e),
+      children: /* @__PURE__ */ React.createElement(Highlight, {
+        highlight: value
+      }, option)
+    };
+  }
+  render() {
+    var _ref = this.asProps;
+    const {
+      highlightedIndex
+    } = this.state;
+    return /* @__PURE__ */ React.createElement(Select, assignProps({
+      "interaction": "none",
+      "visible": this.isVisiblePopper,
+      "onVisibleChange": this.handleChangeVisible,
+      "highlightedIndex": highlightedIndex,
+      "onHighlightedIndexChange": this.handleChangeHighlightedIndex
+    }, _ref));
+  }
+}
+_defineProperty(AutoSuggestRoot, "displayName", "AutoSuggest");
+_defineProperty(AutoSuggestRoot, "defaultProps", () => {
+  return {
+    defaultValue: "",
+    placeholder: "",
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AutoSuggest.Trigger, null), /* @__PURE__ */ React.createElement(AutoSuggest.Popper, null))
+  };
+});
+_defineProperty(AutoSuggestRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages), cssVariableEnhance({
+  variable: "--intergalactic-duration-popper",
+  fallback: "200",
+  map: (v) => Number.parseInt(v, 10).toString(),
+  prop: "duration"
+})]);
+class TriggerRoot extends Component {
+  render() {
+    var _ref2 = this.asProps;
+    const {
+      isLoading,
+      size,
+      addonLeft: AddonLeft,
+      addonRight: AddonRight,
+      Children
+    } = this.asProps;
+    return /* @__PURE__ */ React.createElement(Select.Trigger, assignProps({}, _ref2), AddonLeft ? /* @__PURE__ */ React.createElement(Input.Addon, {
+      pl: size === "l" ? 3 : 2
+    }, /* @__PURE__ */ React.createElement(AddonLeft, null)) : null, /* @__PURE__ */ React.createElement(Children, null), AddonRight ? /* @__PURE__ */ React.createElement(Input.Addon, {
+      pr: isLoading ? void 0 : size === "l" ? 3 : 2
+    }, /* @__PURE__ */ React.createElement(AddonRight, null)) : null, isLoading && /* @__PURE__ */ React.createElement(Input.Addon, {
+      pr: size === "l" ? 3 : 2
+    }, /* @__PURE__ */ React.createElement(Spin, {
+      size: size === "l" ? "s" : "xs"
+    })));
+  }
+}
+_defineProperty(TriggerRoot, "displayName", "Trigger");
+_defineProperty(TriggerRoot, "defaultProps", () => {
+  return {
+    children: /* @__PURE__ */ React.createElement(AutoSuggest.Trigger.Value, null)
+  };
+});
+class ValueRoot extends Component {
+  render() {
+    var _ref3 = this.asProps;
+    return /* @__PURE__ */ React.createElement(Input.Value, assignProps({}, _ref3));
+  }
+}
+_defineProperty(ValueRoot, "displayName", "Value");
+class PopperRoot extends Component {
+  render() {
+    var _ref4 = this.asProps;
+    return /* @__PURE__ */ React.createElement(Select.Popper, assignProps({}, _ref4));
+  }
+}
+_defineProperty(PopperRoot, "defaultProps", () => {
+  return {
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AutoSuggest.Popper.LoadingState, {
+      itemsCount: 0
+    }), /* @__PURE__ */ React.createElement(AutoSuggest.Popper.StartTypingState, {
+      itemsCount: 0
+    }), /* @__PURE__ */ React.createElement(AutoSuggest.Popper.List, null))
+  };
+});
+function LoadingStateRoot(props) {
+  const {
+    Children,
+    isLoading,
+    children
+  } = props;
+  if (!isLoading) return null;
+  return children === void 0 ? /* @__PURE__ */ React.createElement(Select.StatusItem, {
+    state: "loading",
+    itemsCount: 0
+  }) : /* @__PURE__ */ React.createElement(Select.StatusItem, {
+    state: "loading",
+    itemsCount: 0
+  }, /* @__PURE__ */ React.createElement(Children, null));
+}
+function StartTypingStateRoot(props) {
+  const {
+    Children,
+    isLoading,
+    isStartTypingState
+  } = props;
+  if (isLoading || !isStartTypingState) return null;
+  return /* @__PURE__ */ React.createElement(Select.StatusItem, {
+    itemsCount: 0
+  }, /* @__PURE__ */ React.createElement(Children, null));
+}
+class ListRoot extends Component {
+  render() {
+    var _ref5 = this.asProps;
+    const {
+      suggestions,
+      isLoading,
+      isStartTypingState,
+      Children
+    } = this.asProps;
+    if (isLoading || isStartTypingState) return null;
+    return /* @__PURE__ */ React.createElement(Select.List, assignProps({}, _ref5), suggestions.map((option) => /* @__PURE__ */ React.createElement(Children, {
+      key: option
+    })));
+  }
+}
+_defineProperty(ListRoot, "defaultProps", () => {
+  return {
+    children: /* @__PURE__ */ React.createElement(AutoSuggest.Popper.SuggestionItem, {
+      itemsCount: 0
+    })
+  };
+});
+function SuggestionItemRoot() {
+  var _ref6 = arguments[0];
+  return /* @__PURE__ */ React.createElement(Select.Option, assignProps({}, _ref6));
+}
+const AutoSuggest = createComponent(AutoSuggestRoot, {
+  Trigger: [TriggerRoot, {
+    Value: ValueRoot
+  }],
+  Popper: [PopperRoot, {
+    LoadingState: LoadingStateRoot,
+    StartTypingState: StartTypingStateRoot,
+    List: ListRoot,
+    SuggestionItem: SuggestionItemRoot
+  }]
+});
+export {
+  AutoSuggest
+};

package/lib/esm/components/AutoSuggest/Highlight.mjs

@@ -0,0 +1,44 @@
+import React from "react";
+function Highlight({
+  highlight,
+  children
+}) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const child = document.createElement("span");
+    if (highlight) {
+      const regexp = new RegExp(RegExp.escape(highlight.toLowerCase()), "ig");
+      const results = [...children.matchAll(regexp)];
+      let cursor = 0;
+      for (const result of results) {
+        const foundStr = result[0];
+        const index = result.index;
+        const before = children.slice(cursor, index);
+        const bold = children.slice(index, index + foundStr.length);
+        cursor = index + foundStr.length;
+        const beforeNode = document.createTextNode(before);
+        const boldNode = document.createElement("strong");
+        boldNode.textContent = bold;
+        child.appendChild(beforeNode);
+        child.appendChild(boldNode);
+      }
+      if (cursor < children.length) {
+        const after = children.slice(cursor);
+        const afterNode = document.createTextNode(after);
+        child.appendChild(afterNode);
+      }
+    } else {
+      child.textContent = children;
+    }
+    ref.current?.appendChild(child);
+    return () => {
+      child.remove();
+    };
+  }, [highlight, children]);
+  return /* @__PURE__ */ React.createElement("span", {
+    ref
+  });
+}
+export {
+  Highlight
+};

package/lib/esm/index.mjs

@@ -1,6 +1,8 @@
 import { default as default2 } from "./InputSearch.mjs";
 import { default as default3, wrapSelect } from "./Select.mjs";
+import { AutoSuggest } from "./components/AutoSuggest/AutoSuggest.mjs";
 export {
+  AutoSuggest,
   default2 as InputSearch,
   default3 as default,
   wrapSelect

package/lib/esm/translations/en.json.mjs

@@ -4,7 +4,8 @@ const en = {
   clearSearch,
   selectPlaceholder,
   "Select.InputSearch.Value:placeholder": "Search",
-  "Select.InputSearch.Value:aria-label": "Search"
+  "Select.InputSearch.Value:aria-label": "Search",
+  "AutoSuggest.Popper.placeholderText": "Start typing to see options"
 };
 export {
   clearSearch,