intergalactic 15.109.0-prerelease.1 → 15.110.0-prerelease.0

package/select/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport DropdownMenu, {\n  DropdownMenuContext,\n  DropdownMenuItemProps,\n  DropdownMenuProps,\n  DropdownMenuHandlers,\n  DropdownMenuTriggerProps,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport Input, { InputValueProps } from '@semcore/input';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}\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\n/** @deprecated */\nexport interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}\nexport type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &\n  BaseTriggerProps & {\n    /**\n     * Multiple select\n     */\n    multiselect?: boolean;\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    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\n/** @deprecated */\nexport interface ISelectOption extends SelectOption, UnknownProperties {}\n\n/** @deprecated */\nexport interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}\nexport type SelectOptionProps = DropdownMenuItemProps & {\n  /** Value of the option */\n  value: string | number;\n};\n\n/** @deprecated */\nexport interface ISelectOptionCheckboxProps extends SelectOptionCheckboxProps, UnknownProperties {}\nexport type SelectOptionCheckboxProps = BoxProps & {\n  /** Checkbox theme */\n  theme?: string;\n  /** Visual indeterminate state */\n  indeterminate?: boolean;\n\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\n/** @deprecated */\nexport interface ISelectContext extends SelectContext, UnknownProperties {}\nexport type SelectContext = DropdownMenuContext & {\n  getOptionProps: PropGetterFn;\n  getOptionCheckboxProps: PropGetterFn;\n  getDividerProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ISelectHandlers extends SelectHandlers, UnknownProperties {}\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) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', SelectProps>;\n\ndeclare const Select: IntergalacticSelectComponent & {\n  Trigger: Intergalactic.Component<\n    'div',\n    DropdownMenuTriggerProps & ButtonTriggerProps,\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  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  };\n  OptionTitle: typeof DropdownMenu.ItemTitle;\n  OptionHint: typeof DropdownMenu.ItemHint;\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":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport DropdownMenu, {\n  DropdownMenuContext,\n  DropdownMenuItemProps,\n  DropdownMenuProps,\n  DropdownMenuHandlers,\n  DropdownMenuTriggerProps,\n} from '@semcore/dropdown-menu';\nimport Dropdown from '@semcore/dropdown';\nimport { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport Input, { InputValueProps } from '@semcore/input';\nimport { BoxProps, Flex } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}\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\n/** @deprecated */\nexport interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}\nexport type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &\n  BaseTriggerProps & {\n    /**\n     * Multiple select\n     */\n    multiselect?: boolean;\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    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\n/** @deprecated */\nexport interface ISelectOption extends SelectOption, UnknownProperties {}\n\n/** @deprecated */\nexport interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}\nexport type SelectOptionProps = DropdownMenuItemProps & {\n  /**\n   * Enables selected state\n   */\n  selected?: boolean;\n  /** Value of the option */\n  value: string | number;\n};\n\n/** @deprecated */\nexport interface ISelectOptionCheckboxProps extends SelectOptionCheckboxProps, UnknownProperties {}\nexport type SelectOptionCheckboxProps = BoxProps & {\n  /** Checkbox theme */\n  theme?: string;\n  /** Visual indeterminate state */\n  indeterminate?: boolean;\n\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\n/** @deprecated */\nexport interface ISelectContext extends SelectContext, UnknownProperties {}\nexport type SelectContext = DropdownMenuContext & {\n  getOptionProps: PropGetterFn;\n  getOptionCheckboxProps: PropGetterFn;\n  getDividerProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ISelectHandlers extends SelectHandlers, UnknownProperties {}\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) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', SelectProps>;\n\ndeclare const Select: IntergalacticSelectComponent & {\n  Trigger: Intergalactic.Component<\n    typeof Dropdown.Trigger,\n    DropdownMenuTriggerProps & ButtonTriggerProps,\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  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    Hint: typeof Flex;\n  };\n  /**\n   * @deprecated Use Select.Group\n   */\n  OptionTitle: typeof DropdownMenu.ItemTitle;\n  /**\n   * @deprecated Use Select.Option.Hint or Select.Group with subTitle property\n   */\n  OptionHint: typeof DropdownMenu.ItemHint;\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":""}

package/select/lib/cjs/style/input-search.shadow.css

@@ -2,6 +2,10 @@ SInputSearch[size='m'] {
   height: 32px;
 }
 
+SSearchClear {
+  padding: 0 var(--intergalactic-spacing-2x, 8px);
+}
+
 SSearchClear[hide] {
   visibility: hidden;
 }
@@ -13,4 +17,4 @@ SOutline {
   width: 100%;
   border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px) 0 0;
   box-sizing: content-box;
-}
+}

package/select/lib/cjs/style/select.shadow.css

@@ -91,4 +91,4 @@ SOptionCheckbox[indeterminate][size='l']:after {
 SOptionCheckbox[indeterminate][size='m']:after {
   width: 8px;
   height: 2px;
-}
+}

package/select/lib/cjs/translations/en.json

@@ -1,6 +1,4 @@
 {
   "clearSearch": "Clear search field",
-  "selectPlaceholder": "Select option",
-  "triggerHint": "Press Tab to go to popover",
-  "optionsList": "List of options"
+  "selectPlaceholder": "Select option"
 }

package/select/lib/es6/InputSearch.js

@@ -15,16 +15,17 @@ import createComponent, { Component, sstyled, Root } from 'intergalactic/core';
 import SearchM from 'intergalactic/icon/Search/m';
 import CloseM from 'intergalactic/icon/Close/m';
 import Input from 'intergalactic/input';
+import { ButtonLink } from 'intergalactic/button';
 import { selectContext } from './context';
 import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 /*__reshadow-styles__:"./style/input-search.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SInputSearch_1qgf4_gg_._size_m_1qgf4_gg_{height:32px}.___SSearchClear_1qgf4_gg_.__hide_1qgf4_gg_{visibility:hidden}.___SOutline_1qgf4_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;box-sizing:content-box}" /*__inner_css_end__*/, "1qgf4_gg_") /*__reshadow_css_end__*/, {
-  "__SInputSearch": "___SInputSearch_1qgf4_gg_",
-  "_size_m": "_size_m_1qgf4_gg_",
-  "__SSearchClear": "___SSearchClear_1qgf4_gg_",
-  "_hide": "__hide_1qgf4_gg_",
-  "__SOutline": "___SOutline_1qgf4_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SInputSearch_1jwu3_gg_._size_m_1jwu3_gg_{height:32px}.___SSearchClear_1jwu3_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SSearchClear_1jwu3_gg_.__hide_1jwu3_gg_{visibility:hidden}.___SOutline_1jwu3_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;box-sizing:content-box}" /*__inner_css_end__*/, "1jwu3_gg_") /*__reshadow_css_end__*/, {
+  "__SInputSearch": "___SInputSearch_1jwu3_gg_",
+  "_size_m": "_size_m_1jwu3_gg_",
+  "__SSearchClear": "___SSearchClear_1jwu3_gg_",
+  "_hide": "__hide_1jwu3_gg_",
+  "__SOutline": "___SOutline_1jwu3_gg_"
 });
 var InputSearchRoot = /*#__PURE__*/function (_Component) {
   _inherits(InputSearchRoot, _Component);
@@ -74,12 +75,10 @@ var InputSearchRoot = /*#__PURE__*/function (_Component) {
         value = _this$asProps.value,
         getI18nText = _this$asProps.getI18nText;
       return {
-        role: 'button',
         ref: this.closeIconRef,
         /* hide through css because the width of the input changes */
         hide: !value,
         'aria-hidden': !value,
-        interactive: true,
         'aria-label': getI18nText('clearSearch'),
         onClick: this.handleClear
       };
@@ -130,12 +129,12 @@ var SearchValue = function SearchValue(props) {
 var SearchClear = function SearchClear(props) {
   var _ref4 = arguments[0],
     _ref8;
-  var SSearchClear = Input.Addon;
-  var styles = props.styles,
-    Children = props.Children;
+  var SSearchClear = ButtonLink;
+  var styles = props.styles;
   return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SSearchClear, _ref8.cn("SSearchClear", _objectSpread({}, _assignProps4({
-    "tag": CloseM
-  }, _ref4))), /*#__PURE__*/React.createElement(Children, _ref8.cn("Children", {})));
+    "addonLeft": CloseM,
+    "use": 'secondary'
+  }, _ref4))));
 };
 var InputSearch = createComponent(InputSearchRoot, {
   SearchIcon: SearchIcon,

package/select/lib/es6/InputSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSearch.js","names":["React","createComponent","Component","sstyled","Root","SearchM","CloseM","Input","selectContext","i18nEnhance","localizedMessages","style","_sstyled","insert","InputSearchRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","createRef","e","handlers","value","setTimeout","document","activeElement","body","closeIconRef","current","_this$inputRef$curren","inputRef","focus","_createClass","key","uncontrolledProps","getValueProps","asProps","onChange","autoFocus","ref","getClearProps","_this$asProps","getI18nText","role","hide","interactive","onClick","handleClear","render","_ref","_ref5","Value","InputSearch","SInputSearch","_this$asProps2","size","styles","hasChildren","children","Children","createElement","cn","context","Fragment","SearchIcon","_objectSpread","_assignProps","Clear","defaultValue","i18n","locale","props","_ref2","arguments[0]","_ref6","SSearchIcon","Addon","_assignProps2","SearchValue","_ref3","_ref7","SSearchValue","_assignProps3","SearchClear","_ref4","_ref8","SSearchClear","_assignProps4"],"sources":["../../src/InputSearch.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport SearchM from '@semcore/icon/Search/m';\nimport CloseM from '@semcore/icon/Close/m';\nimport Input from '@semcore/input';\nimport { selectContext } from './context';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nimport style from './style/input-search.shadow.css';\n\nclass InputSearchRoot extends Component {\n  static displayName = 'InputSearch';\n\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)];\n  static defaultProps = {\n    defaultValue: '',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n  inputRef = React.createRef();\n  closeIconRef = React.createRef();\n\n  static contextType = selectContext;\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClear = (e) => {\n    this.handlers.value('', e);\n    setTimeout(() => {\n      if (\n        document.activeElement === document.body ||\n        document.activeElement === this.closeIconRef.current\n      ) {\n        this.inputRef.current?.focus();\n      }\n    }, 0);\n  };\n\n  getValueProps() {\n    const { value } = this.asProps;\n    return {\n      value,\n      onChange: this.handlers.value,\n      autoFocus: true,\n      ref: this.inputRef,\n    };\n  }\n  getClearProps() {\n    const { value, getI18nText } = this.asProps;\n    return {\n      role: 'button',\n      ref: this.closeIconRef,\n      /* hide through css because the width of the input changes */\n      hide: !value,\n      'aria-hidden': !value,\n      interactive: true,\n      'aria-label': getI18nText('clearSearch'),\n      onClick: this.handleClear,\n    };\n  }\n\n  render() {\n    const Value = Root;\n    const SInputSearch = Input;\n    const { size, styles, children: hasChildren, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <SInputSearch size={size || this.context.size || 'm'} styles={styles}>\n        {hasChildren ? (\n          <Children />\n        ) : (\n          <>\n            <InputSearch.SearchIcon />\n            <Value render={InputSearch.Value} />\n            <InputSearch.Clear />\n          </>\n        )}\n      </SInputSearch>,\n    );\n  }\n}\n\nconst SearchIcon = (props) => {\n  const SSearchIcon = Root;\n  const { styles } = props;\n  return sstyled(styles)(\n    <SSearchIcon render={Input.Addon}>\n      <SearchM />\n    </SSearchIcon>,\n  );\n};\nconst SearchValue = (props) => {\n  const SSearchValue = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SSearchValue render={Input.Value} />);\n};\nconst SearchClear = (props) => {\n  const SSearchClear = Root;\n  const { styles, Children } = props;\n  return sstyled(styles)(\n    <SSearchClear render={Input.Addon} tag={CloseM}>\n      <Children />\n    </SSearchClear>,\n  );\n};\n\nconst InputSearch = createComponent(InputSearchRoot, {\n  SearchIcon: SearchIcon,\n  Value: SearchValue,\n  Clear: SearchClear,\n});\n\nexport default InputSearch;\n"],"mappings":"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"}
+{"version":3,"file":"InputSearch.js","names":["React","createComponent","Component","sstyled","Root","SearchM","CloseM","Input","ButtonLink","selectContext","i18nEnhance","localizedMessages","style","_sstyled","insert","InputSearchRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","createRef","e","handlers","value","setTimeout","document","activeElement","body","closeIconRef","current","_this$inputRef$curren","inputRef","focus","_createClass","key","uncontrolledProps","getValueProps","asProps","onChange","autoFocus","ref","getClearProps","_this$asProps","getI18nText","hide","onClick","handleClear","render","_ref","_ref5","Value","InputSearch","SInputSearch","_this$asProps2","size","styles","hasChildren","children","Children","createElement","cn","context","Fragment","SearchIcon","_objectSpread","_assignProps","Clear","defaultValue","i18n","locale","props","_ref2","arguments[0]","_ref6","SSearchIcon","Addon","_assignProps2","SearchValue","_ref3","_ref7","SSearchValue","_assignProps3","SearchClear","_ref4","_ref8","SSearchClear","_assignProps4"],"sources":["../../src/InputSearch.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport SearchM from '@semcore/icon/Search/m';\nimport CloseM from '@semcore/icon/Close/m';\nimport Input from '@semcore/input';\nimport { ButtonLink } from '@semcore/button';\nimport { selectContext } from './context';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nimport style from './style/input-search.shadow.css';\n\nclass InputSearchRoot extends Component {\n  static displayName = 'InputSearch';\n\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)];\n  static defaultProps = {\n    defaultValue: '',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n  inputRef = React.createRef();\n  closeIconRef = React.createRef();\n\n  static contextType = selectContext;\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClear = (e) => {\n    this.handlers.value('', e);\n    setTimeout(() => {\n      if (\n        document.activeElement === document.body ||\n        document.activeElement === this.closeIconRef.current\n      ) {\n        this.inputRef.current?.focus();\n      }\n    }, 0);\n  };\n\n  getValueProps() {\n    const { value } = this.asProps;\n    return {\n      value,\n      onChange: this.handlers.value,\n      autoFocus: true,\n      ref: this.inputRef,\n    };\n  }\n  getClearProps() {\n    const { value, getI18nText } = this.asProps;\n    return {\n      ref: this.closeIconRef,\n      /* hide through css because the width of the input changes */\n      hide: !value,\n      'aria-hidden': !value,\n      'aria-label': getI18nText('clearSearch'),\n      onClick: this.handleClear,\n    };\n  }\n\n  render() {\n    const Value = Root;\n    const SInputSearch = Input;\n    const { size, styles, children: hasChildren, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <SInputSearch size={size || this.context.size || 'm'} styles={styles}>\n        {hasChildren ? (\n          <Children />\n        ) : (\n          <>\n            <InputSearch.SearchIcon />\n            <Value render={InputSearch.Value} />\n            <InputSearch.Clear />\n          </>\n        )}\n      </SInputSearch>,\n    );\n  }\n}\n\nconst SearchIcon = (props) => {\n  const SSearchIcon = Root;\n  const { styles } = props;\n  return sstyled(styles)(\n    <SSearchIcon render={Input.Addon}>\n      <SearchM />\n    </SSearchIcon>,\n  );\n};\nconst SearchValue = (props) => {\n  const SSearchValue = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SSearchValue render={Input.Value} />);\n};\nconst SearchClear = (props) => {\n  const SSearchClear = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SSearchClear render={ButtonLink} addonLeft={CloseM} use={'secondary'} />);\n};\n\nconst InputSearch = createComponent(InputSearchRoot, {\n  SearchIcon: SearchIcon,\n  Value: SearchValue,\n  Clear: SearchClear,\n});\n\nexport default InputSearch;\n"],"mappings":"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"}

package/select/lib/es6/Select.js

@@ -5,6 +5,8 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _get from "@babel/runtime/helpers/get";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
@@ -17,8 +19,9 @@ import { assignProps as _assignProps } from 'intergalactic/core';
 var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
 import React from 'react';
 import cn from 'classnames';
-import createComponent, { Component, Root, sstyled } from 'intergalactic/core';
-import { DropdownMenuOld as DropdownMenu } from 'intergalactic/dropdown-menu';
+import createComponent, { Root, sstyled } from 'intergalactic/core';
+import DropdownMenu from 'intergalactic/dropdown-menu';
+import Dropdown, { AbstractDropdown, enhance, selectedIndexContext } from 'intergalactic/dropdown';
 import { ButtonTrigger } from 'intergalactic/base-trigger';
 import Divider from 'intergalactic/divider';
 import findComponent from 'intergalactic/utils/lib/findComponent';
@@ -28,21 +31,20 @@ import addonTextChildren from 'intergalactic/utils/lib/addonTextChildren';
 import InputSearch from './InputSearch';
 import { useBox } from 'intergalactic/flex-box';
 import { selectContext } from './context';
-import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
-import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 import { isInputTriggerTag } from 'intergalactic/popper';
-import { Flex } from 'intergalactic/flex-box';
 /*__reshadow-styles__:"./style/select.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_lr4th_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_lr4th_gg_::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_lr4th_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:center center}.___SOptionCheckbox_lr4th_gg_.__selected_lr4th_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_lr4th_gg_._size_l_lr4th_gg_{width:20px;height:20px}.___SOptionCheckbox_lr4th_gg_._size_l_lr4th_gg_.__selected_lr4th_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_lr4th_gg_.__indeterminate_lr4th_gg_:before,.___SOptionCheckbox_lr4th_gg_.__selected_lr4th_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_lr4th_gg_.__theme_lr4th_gg_:before{border-color:var(--theme_lr4th)}.___SOptionCheckbox_lr4th_gg_.__theme_lr4th_gg_.__indeterminate_lr4th_gg_:before,.___SOptionCheckbox_lr4th_gg_.__theme_lr4th_gg_.__selected_lr4th_gg_:before{background-color:var(--theme_lr4th);border-color:var(--theme_lr4th)}.___SOptionCheckbox_lr4th_gg_.__selected_lr4th_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_lr4th_gg_.__selected_lr4th_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SOptionCheckbox_lr4th_gg_.__indeterminate_lr4th_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_lr4th_gg_.__indeterminate_lr4th_gg_._size_l_lr4th_gg_:after{width:12px;height:2px}.___SOptionCheckbox_lr4th_gg_.__indeterminate_lr4th_gg_._size_m_lr4th_gg_:after{width:8px;height:2px}" /*__inner_css_end__*/, "lr4th_gg_") /*__reshadow_css_end__*/, {
-  "__SOptionCheckbox": "___SOptionCheckbox_lr4th_gg_",
-  "_selected": "__selected_lr4th_gg_",
-  "_size_l": "_size_l_lr4th_gg_",
-  "_indeterminate": "__indeterminate_lr4th_gg_",
-  "_theme": "__theme_lr4th_gg_",
-  "--theme": "--theme_lr4th",
-  "_size_m": "_size_m_lr4th_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_jpeh3_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_jpeh3_gg_::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_jpeh3_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:center center}.___SOptionCheckbox_jpeh3_gg_.__selected_jpeh3_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_jpeh3_gg_._size_l_jpeh3_gg_{width:20px;height:20px}.___SOptionCheckbox_jpeh3_gg_._size_l_jpeh3_gg_.__selected_jpeh3_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_jpeh3_gg_.__indeterminate_jpeh3_gg_:before,.___SOptionCheckbox_jpeh3_gg_.__selected_jpeh3_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_jpeh3_gg_.__theme_jpeh3_gg_:before{border-color:var(--theme_jpeh3)}.___SOptionCheckbox_jpeh3_gg_.__theme_jpeh3_gg_.__indeterminate_jpeh3_gg_:before,.___SOptionCheckbox_jpeh3_gg_.__theme_jpeh3_gg_.__selected_jpeh3_gg_:before{background-color:var(--theme_jpeh3);border-color:var(--theme_jpeh3)}.___SOptionCheckbox_jpeh3_gg_.__selected_jpeh3_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_jpeh3_gg_.__selected_jpeh3_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SOptionCheckbox_jpeh3_gg_.__indeterminate_jpeh3_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_jpeh3_gg_.__indeterminate_jpeh3_gg_._size_l_jpeh3_gg_:after{width:12px;height:2px}.___SOptionCheckbox_jpeh3_gg_.__indeterminate_jpeh3_gg_._size_m_jpeh3_gg_:after{width:8px;height:2px}" /*__inner_css_end__*/, "jpeh3_gg_") /*__reshadow_css_end__*/, {
+  "__SOptionCheckbox": "___SOptionCheckbox_jpeh3_gg_",
+  "_selected": "__selected_jpeh3_gg_",
+  "_size_l": "_size_l_jpeh3_gg_",
+  "_indeterminate": "__indeterminate_jpeh3_gg_",
+  "_theme": "__theme_jpeh3_gg_",
+  "--theme": "--theme_jpeh3",
+  "_size_m": "_size_m_jpeh3_gg_"
 });
+import { callAllEventHandlers } from 'intergalactic/utils/lib/assignProps';
+import { isAdvanceMode } from 'intergalactic/utils/lib/findComponent';
 function isSelectedOption(value, valueOption) {
   return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
 }
@@ -52,16 +54,8 @@ function isEmptyValue(value) {
 function getEmptyValue(multiselect) {
   return multiselect ? [] : null;
 }
-var scrollToNode = function scrollToNode(node) {
-  if (!node) return;
-  if (!node.scrollIntoView) return;
-  node.scrollIntoView({
-    block: 'nearest',
-    inline: 'nearest'
-  });
-};
-var RootSelect = /*#__PURE__*/function (_Component) {
-  _inherits(RootSelect, _Component);
+var RootSelect = /*#__PURE__*/function (_AbstractDropdown) {
+  _inherits(RootSelect, _AbstractDropdown);
   var _super = _createSuper(RootSelect);
   function RootSelect() {
     var _this;
@@ -70,30 +64,13 @@ var RootSelect = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "firstSelectedOptionRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "triggerRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "isScrolledToFirstOption", false);
-    _defineProperty(_assertThisInitialized(_this), "lastHandleOptionNodeCall", -1);
-    _defineProperty(_assertThisInitialized(_this), "handleOptionNode", function (node) {
-      if (!_this.asProps.scrollToSelected) return;
-      if (Date.now() - _this.lastHandleOptionNodeCall < 30) return;
-      _this.lastHandleOptionNodeCall = Date.now();
-      setTimeout(function () {
-        // in most cases 10ms timeout works perfectly and scrolls before user can see it
-        if (_this.asProps.visible) scrollToNode(node);
-      }, 10);
-      setTimeout(function () {
-        // in rare cases 10ms timeout it not enough so 30ms timeout saves the day
-        if (_this.asProps.visible) scrollToNode(node);
-      }, 30);
-    });
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerOptionClick", function (optionValue) {
+    _defineProperty(_assertThisInitialized(_this), "role", 'listbox');
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerOptionClick", function (optionValue, index) {
       return function (e) {
         var newValue = optionValue;
         var _this$asProps = _this.asProps,
           value = _this$asProps.value,
-          multiselect = _this$asProps.multiselect,
-          interaction = _this$asProps.interaction;
+          multiselect = _this$asProps.multiselect;
         if (Array.isArray(value)) {
           if (value.includes(optionValue)) {
             newValue = value.filter(function (v) {
@@ -106,6 +83,7 @@ var RootSelect = /*#__PURE__*/function (_Component) {
         _this.handlers.value(newValue, e);
         if (!multiselect) {
           _this.handlers.visible(false);
+          e.preventDefault();
         }
       };
     });
@@ -118,18 +96,47 @@ var RootSelect = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(RootSelect, [{
+    key: "itemRef",
+    value: function itemRef(props, index, node) {
+      _get(_getPrototypeOf(RootSelect.prototype), "itemRef", this).call(this, props, index, node);
+      var highlightedIndex = this.asProps.highlightedIndex;
+      var isHighlighted = index === highlightedIndex;
+      if (isHighlighted) {
+        this.scrollToNode(node);
+      }
+    }
+  }, {
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
-      return {
-        visible: null,
+      var _this2 = this;
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect.prototype), "uncontrolledProps", this).call(this)), {}, {
+        visible: [null, function (visible) {
+          if (visible === true) {
+            setTimeout(function () {
+              var _this2$menuRef$curren, _this2$menuRef$curren2;
+              var options = (_this2$menuRef$curren = _this2.menuRef.current) === null || _this2$menuRef$curren === void 0 ? void 0 : _this2$menuRef$curren.querySelectorAll('[role="option"]');
+              var selected = (_this2$menuRef$curren2 = _this2.menuRef.current) === null || _this2$menuRef$curren2 === void 0 ? void 0 : _this2$menuRef$curren2.querySelector('[aria-selected="true"]');
+              if (selected && options) {
+                _this2.scrollToNode(selected);
+                for (var i = 0; i < options.length; i++) {
+                  if (options[i] === selected) {
+                    _this2.handlers.highlightedIndex(i);
+                    break;
+                  }
+                }
+              }
+              // for some reason, Google Chrome optimizes this timeout with 0 value with previous render (when we set aria-selected)
+              // and that's why its skip scrollToNodes. We selected the appropriate timeout manually.
+            }, 30);
+          }
+        }],
         value: null
-      };
+      });
     }
   }, {
     key: "getTriggerProps",
     value: function getTriggerProps() {
       var _this$asProps2 = this.asProps,
-        size = _this$asProps2.size,
         disabled = _this$asProps2.disabled,
         visible = _this$asProps2.visible,
         state = _this$asProps2.state,
@@ -139,18 +146,20 @@ var RootSelect = /*#__PURE__*/function (_Component) {
         forwardRef = _this$asProps2.forwardRef,
         name = _this$asProps2.name,
         multiselect = _this$asProps2.multiselect,
+        getI18nText = _this$asProps2.getI18nText,
+        highlightedIndex = _this$asProps2.highlightedIndex,
         uid = _this$asProps2.uid,
-        disablePortal = _this$asProps2.disablePortal,
-        getI18nText = _this$asProps2.getI18nText;
-      return {
-        id: "igc-".concat(uid, "-trigger"),
-        'aria-controls': visible ? "igc-".concat(uid, "-list") : undefined,
-        focusHint: visible && !disablePortal ? getI18nText('triggerHint') : undefined,
-        'aria-haspopup': 'listbox',
-        'aria-expanded': visible ? 'true' : 'false',
+        Children = _this$asProps2.Children,
+        hasChildren = _this$asProps2.children;
+      var isMenu = isAdvanceMode(Children, [Select.Menu.displayName], true) || !hasChildren;
+      var ariaControls = isMenu ? "igc-".concat(uid, "-list") : "igc-".concat(uid, "-popper");
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect.prototype), "getTriggerProps", this).call(this)), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleOpenKeyDown.bind(this), this.handleArrowKeyDown.bind(this)),
+        'aria-controls': visible ? ariaControls : undefined,
+        'aria-haspopup': isMenu ? 'listbox' : 'dialog',
         'aria-disabled': disabled ? 'true' : 'false',
+        'aria-activedescendant': visible && highlightedIndex !== null ? "igc-".concat(uid, "-option-").concat(highlightedIndex) : undefined,
         empty: isEmptyValue(value),
-        size: size,
         value: value,
         name: name,
         $hiddenRef: forwardRef,
@@ -161,60 +170,56 @@ var RootSelect = /*#__PURE__*/function (_Component) {
         active: visible,
         onClear: this.handlerClear,
         children: this.renderChildrenTrigger(value, options),
-        getI18nText: getI18nText,
-        ref: this.triggerRef
-      };
+        getI18nText: getI18nText
+      });
     }
   }, {
     key: "getListProps",
     value: function getListProps() {
-      var _this$asProps3 = this.asProps,
-        multiselect = _this$asProps3.multiselect,
-        uid = _this$asProps3.uid;
-      return {
-        'aria-multiselectable': multiselect ? 'true' : undefined,
-        id: "igc-".concat(uid, "-list"),
-        role: 'listbox',
-        'aria-label': 'List of options'
-      };
+      var multiselect = this.asProps.multiselect;
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect.prototype), "getListProps", this).call(this)), {}, {
+        'aria-multiselectable': multiselect ? 'true' : undefined
+      });
     }
   }, {
-    key: "getMenuProps",
-    value: function getMenuProps() {
-      var _this$asProps4 = this.asProps,
-        uid = _this$asProps4.uid,
-        getI18nText = _this$asProps4.getI18nText,
-        multiselect = _this$asProps4.multiselect;
-      return {
-        'aria-multiselectable': multiselect ? 'true' : undefined,
-        id: "igc-".concat(uid, "-list"),
-        role: 'listbox',
-        'aria-label': getI18nText('optionsList')
-      };
+    key: "getPopperProps",
+    value: function getPopperProps() {
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect.prototype), "getPopperProps", this).call(this)), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handlePreventPopperKeyDown.bind(this), this.handleArrowKeyDown.bind(this))
+      });
     }
   }, {
     key: "getOptionProps",
-    value: function getOptionProps(props) {
-      var value = this.asProps.value;
-      var selected = isSelectedOption(value, props.value);
-      var other = {};
-      if (selected) {
-        other.ref = this.handleOptionNode;
-      }
-      return _objectSpread({
+    value: function getOptionProps(props, index) {
+      var _props$selected,
+        _this3 = this;
+      var _this$asProps3 = this.asProps,
+        value = _this$asProps3.value,
+        highlightedIndex = _this$asProps3.highlightedIndex,
+        focusSourceRef = _this$asProps3.focusSourceRef,
+        _this$asProps3$size = _this$asProps3.size,
+        size = _this$asProps3$size === void 0 ? 'm' : _this$asProps3$size;
+      var highlighted = index === highlightedIndex && focusSourceRef.current === 'keyboard';
+      var selected = (_props$selected = props.selected) !== null && _props$selected !== void 0 ? _props$selected : isSelectedOption(value, props.value);
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(RootSelect.prototype), "getItemProps", this).call(this, props, index)), {}, {
+        highlighted: highlighted,
         selected: selected,
         'aria-selected': selected ? 'true' : 'false',
         'aria-disabled': props.disabled ? 'true' : 'false',
         role: 'option',
-        onClick: this.bindHandlerOptionClick(props.value)
-      }, other);
+        onClick: this.bindHandlerOptionClick(props.value, index),
+        ref: function ref(node) {
+          return _this3.itemRef(props, index, node);
+        },
+        size: size
+      });
     }
   }, {
     key: "getOptionCheckboxProps",
     value: function getOptionCheckboxProps() {
-      var _this$asProps5 = this.asProps,
-        size = _this$asProps5.size,
-        resolveColor = _this$asProps5.resolveColor;
+      var _this$asProps4 = this.asProps,
+        size = _this$asProps4.size,
+        resolveColor = _this$asProps4.resolveColor;
       return {
         size: size,
         resolveColor: resolveColor
@@ -228,6 +233,17 @@ var RootSelect = /*#__PURE__*/function (_Component) {
         'aria-disabled': 'true'
       };
     }
+  }, {
+    key: "handleOpenKeyDown",
+    value: function handleOpenKeyDown(e) {
+      _get(_getPrototypeOf(RootSelect.prototype), "handleOpenKeyDown", this).call(this, e);
+      if (this.asProps.visible !== true && ['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
+        var hasInputSearch = isAdvanceMode(this.asProps.Children, [Select.InputSearch.displayName], true);
+        var defaultIndex = hasInputSearch ? null : 0;
+        this.handlers.highlightedIndex(defaultIndex);
+        return false;
+      }
+    }
   }, {
     key: "renderChildrenTrigger",
     value: function renderChildrenTrigger(value, options) {
@@ -252,16 +268,17 @@ var RootSelect = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref2 = this.asProps;
-      var _this$asProps6 = this.asProps,
-        Children = _this$asProps6.Children,
-        options = _this$asProps6.options,
-        multiselect = _this$asProps6.multiselect,
-        value = _this$asProps6.value,
-        uid = _this$asProps6.uid,
-        forcedAdvancedMode = _this$asProps6.forcedAdvancedMode,
-        other = _objectWithoutProperties(_this$asProps6, _excluded);
+      var _this$asProps5 = this.asProps,
+        Children = _this$asProps5.Children,
+        options = _this$asProps5.options,
+        multiselect = _this$asProps5.multiselect,
+        value = _this$asProps5.value,
+        uid = _this$asProps5.uid,
+        forcedAdvancedMode = _this$asProps5.forcedAdvancedMode,
+        other = _objectWithoutProperties(_this$asProps5, _excluded);
       var advancedMode = forcedAdvancedMode || findComponent(Children, [Select.Trigger.displayName, Select.Popper.displayName]);
       logger.warn(options && advancedMode, "Don't use at the same time 'options' property and '<Select.Trigger/>/<Select.Popper/>'", other['data-ui-name'] || Select.displayName);
+      this.itemProps = [];
       if (options) {
         var _ref = this.asProps;
         return /*#__PURE__*/React.createElement(DropdownMenu, _assignProps({}, _ref), /*#__PURE__*/React.createElement(Select.Trigger, other), /*#__PURE__*/React.createElement(Select.Menu, null, options.map(function (option, index) {
@@ -275,19 +292,27 @@ var RootSelect = /*#__PURE__*/function (_Component) {
     }
   }]);
   return RootSelect;
-}(Component);
+}(AbstractDropdown);
 _defineProperty(RootSelect, "displayName", 'Select');
 _defineProperty(RootSelect, "style", style);
-_defineProperty(RootSelect, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages), resolveColorEnhance()]);
+_defineProperty(RootSelect, "enhance", Object.values(enhance).concat([resolveColorEnhance()]));
 _defineProperty(RootSelect, "defaultProps", function (props) {
+  var _props$highlightedInd, _props$selectedIndex, _props$interaction, _props$timeout;
+  var hasInputSearch = props.children && isAdvanceMode(props.children, [Select.InputSearch.displayName], true);
+  var defaultIndex = hasInputSearch ? null : 0;
   return {
     placeholder: props.multiselect ? 'Select options' : 'Select option',
     size: 'm',
     defaultValue: getEmptyValue(props.multiselect),
     defaultVisible: false,
+    defaultHighlightedIndex: (_props$highlightedInd = props.highlightedIndex) !== null && _props$highlightedInd !== void 0 ? _props$highlightedInd : defaultIndex,
+    defaultSelectedIndex: (_props$selectedIndex = props.selectedIndex) !== null && _props$selectedIndex !== void 0 ? _props$selectedIndex : defaultIndex,
     scrollToSelected: true,
     i18n: localizedMessages,
-    locale: 'en'
+    locale: 'en',
+    interaction: (_props$interaction = props.interaction) !== null && _props$interaction !== void 0 ? _props$interaction : 'click',
+    inlineActions: false,
+    timeout: (_props$timeout = props.timeout) !== null && _props$timeout !== void 0 ? _props$timeout : 0
   };
 });
 function Trigger(_ref8) {
@@ -302,12 +327,13 @@ function Trigger(_ref8) {
     Tag = _ref8$tag === void 0 ? ButtonTrigger : _ref8$tag,
     getI18nText = _ref8.getI18nText;
   var hasInputTrigger = isInputTriggerTag(Tag);
-  var SSelectTrigger = DropdownMenu.Trigger;
+  var SSelectTrigger = Dropdown.Trigger;
   return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SSelectTrigger, _ref6.cn("SSelectTrigger", _objectSpread({}, _assignProps3({
     "tag": Tag,
     "placeholder": getI18nText('selectPlaceholder'),
+    "role": 'combobox',
     "aria-autocomplete": hasInputTrigger && 'list' || undefined
-  }, _ref3))), addonTextChildren(Children, Tag.Text || ButtonTrigger.Text, Tag.Addon || ButtonTrigger.Addon, true), name && /*#__PURE__*/React.createElement("input", _ref6.cn("input", {
+  }, _ref3))), addonTextChildren(Children, Tag.Text || ButtonTrigger.Text, Tag.Value || ButtonTrigger.Text, Tag.Addon || ButtonTrigger.Addon, true), name && /*#__PURE__*/React.createElement("input", _ref6.cn("input", {
     "type": 'hidden',
     "defaultValue": value,
     "name": name,
@@ -318,14 +344,14 @@ var optionPropsContext = /*#__PURE__*/React.createContext({});
 function Option(props) {
   var _ref4 = arguments[0],
     _ref7;
-  var SSelectOption = DropdownMenu.Item;
+  var SSelectOption = Dropdown.Item;
   var styles = props.styles,
     Children = props.Children;
-  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SSelectOption, _ref7.cn("SSelectOption", _objectSpread({}, _assignProps4({
-    "tag": Flex
-  }, _ref4))), /*#__PURE__*/React.createElement(optionPropsContext.Provider, {
+  var hasCheckbox = isAdvanceMode(Children, [Select.Option.Checkbox.displayName]);
+  var hasContent = isAdvanceMode(Children, [Select.Option.Content.displayName]);
+  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SSelectOption, _ref7.cn("SSelectOption", _objectSpread({}, _assignProps4({}, _ref4))), /*#__PURE__*/React.createElement(optionPropsContext.Provider, {
     value: props
-  }, /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {}))));
+  }, hasCheckbox && !hasContent ? /*#__PURE__*/React.createElement(Select.Option.Content, null, /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {}))) : /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {}))));
 }
 function Checkbox(providedProps) {
   var optionProps = React.useContext(optionPropsContext);
@@ -369,13 +395,16 @@ var Select = createComponent(RootSelect, {
     Addon: ButtonTrigger.Addon,
     Text: ButtonTrigger.Text
   }],
-  Popper: DropdownMenu.Popper,
+  Popper: Dropdown.Popper,
   List: DropdownMenu.List,
   Menu: DropdownMenu.Menu,
   Option: [Option, {
     Addon: DropdownMenu.Item.Addon,
+    Content: DropdownMenu.Item.Content,
+    Hint: DropdownMenu.Item.Hint,
     Checkbox: Checkbox
   }],
+  Group: Dropdown.Group,
   OptionTitle: DropdownMenu.ItemTitle,
   OptionHint: DropdownMenu.ItemHint,
   Divider: Divider,
@@ -388,5 +417,6 @@ var Select = createComponent(RootSelect, {
 export var wrapSelect = function wrapSelect(wrapper) {
   return wrapper;
 };
+Select.selectedIndexContext = selectedIndexContext;
 export default Select;
 //# sourceMappingURL=Select.js.map