@semcore/select 4.53.0-prerelease.4 → 4.53.0-prerelease.5

package/lib/es6/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 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     * 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":""}
+{"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 {\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  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":[]}

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"}
+{"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":[]}

package/lib/es6/translations/__intergalactic-dynamic-locales.js

@@ -6,12 +6,12 @@ import it from './it.json';
 import ja from './ja.json';
 import ko from './ko.json';
 import nl from './nl.json';
+import pl from './pl.json';
 import pt from './pt.json';
+import sv from './sv.json';
 import tr from './tr.json';
 import vi from './vi.json';
 import zh from './zh.json';
-import pl from './pl.json';
-import sv from './sv.json';
 export var localizedMessages = {
   de: de,
   en: en,

package/lib/es6/translations/__intergalactic-dynamic-locales.js.map

@@ -1 +1 @@
-{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","nl","pt","tr","vi","zh","pl","sv","localizedMessages"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pt from './pt.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\nimport pl from './pl.json';\nimport sv from './sv.json';\n\nexport const localizedMessages = {\n  de,\n  en,\n  es,\n  fr,\n  it,\n  ja,\n  ko,\n  nl,\n  pt,\n  tr,\n  vi,\n  zh,\n  pl,\n  sv,\n};\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAE1B,OAAO,IAAMC,iBAAiB,GAAG;EAC/Bd,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA;AACF,CAAC"}
+{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","nl","pl","pt","sv","tr","vi","zh","localizedMessages"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pl from './pl.json';\nimport pt from './pt.json';\nimport sv from './sv.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\n\nexport const localizedMessages = {\n  de,\n  en,\n  es,\n  fr,\n  it,\n  ja,\n  ko,\n  nl,\n  pt,\n  tr,\n  vi,\n  zh,\n  pl,\n  sv,\n};\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAE1B,OAAO,IAAMC,iBAAiB,GAAG;EAC/Bd,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFE,EAAE,EAAFA,EAAE;EACFE,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFL,EAAE,EAAFA,EAAE;EACFE,EAAE,EAAFA;AACF,CAAC","ignoreList":[]}

package/lib/esm/InputSearch.mjs

@@ -1,61 +1,58 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
-import React from "react";
-import SearchM from "@semcore/icon/Search/m";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { ButtonLink } from "@semcore/button";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import CloseM from "@semcore/icon/Close/m";
+import SearchM from "@semcore/icon/Search/m";
 import Input from "@semcore/input";
-import { ButtonLink } from "@semcore/button";
+import React from "react";
 import { selectContext } from "./context.mjs";
-import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
 /*!__reshadow-styles__:"./style/input-search.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SInputSearch_q1zk7_gg_._size_m_q1zk7_gg_{height:32px}.___SSearchClear_q1zk7_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SSearchClear_q1zk7_gg_.__hide_q1zk7_gg_{visibility:hidden}.___SOutline_q1zk7_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}",
+    ".___SInputSearch_1glfy_gg_._size_m_1glfy_gg_{height:32px}.___SSearchClear_1glfy_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SSearchClear_1glfy_gg_.__hide_1glfy_gg_{visibility:hidden}.___SOutline_1glfy_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__*/
-    "q1zk7_gg_"
+    "1glfy_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SInputSearch": "___SInputSearch_q1zk7_gg_",
-    "_size_m": "_size_m_q1zk7_gg_",
-    "__SSearchClear": "___SSearchClear_q1zk7_gg_",
-    "_hide": "__hide_q1zk7_gg_",
-    "__SOutline": "___SOutline_q1zk7_gg_"
+    "__SInputSearch": "___SInputSearch_1glfy_gg_",
+    "_size_m": "_size_m_1glfy_gg_",
+    "__SSearchClear": "___SSearchClear_1glfy_gg_",
+    "_hide": "__hide_1glfy_gg_",
+    "__SOutline": "___SOutline_1glfy_gg_"
   })
 );
-var InputSearchRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(InputSearchRoot2, _Component);
-  var _super = _createSuper(InputSearchRoot2);
+var InputSearchRoot = /* @__PURE__ */ (function(_Component) {
   function InputSearchRoot2() {
     var _this;
     _classCallCheck(this, InputSearchRoot2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "inputRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "closeIconRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "handleClear", function(e) {
+    _this = _callSuper(this, InputSearchRoot2, [].concat(args));
+    _defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "closeIconRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "handleClear", function(e) {
       _this.handlers.value("", e);
       setTimeout(function() {
         if (document.activeElement === document.body || document.activeElement === _this.closeIconRef.current) {
           var _this$inputRef$curren;
-          (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
+          (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 || _this$inputRef$curren.focus();
         }
       }, 0);
     });
     return _this;
   }
-  _createClass(InputSearchRoot2, [{
+  _inherits(InputSearchRoot2, _Component);
+  return _createClass(InputSearchRoot2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -65,25 +62,27 @@ var InputSearchRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getValueProps",
     value: function getValueProps() {
-      var getI18nText = this.asProps.getI18nText;
+      var _this$asProps = this.asProps, value = _this$asProps.value, onChange = _this$asProps.onChange, getI18nText = _this$asProps.getI18nText, hasChildren = _this$asProps.children;
       return {
-        autoFocus: true,
-        ref: this.inputRef,
-        placeholder: getI18nText("Select.InputSearch.Value:placeholder"),
+        value,
+        "onChange": hasChildren ? onChange : void 0,
+        "autoFocus": true,
+        "ref": this.inputRef,
+        "placeholder": getI18nText("Select.InputSearch.Value:placeholder"),
         "aria-label": getI18nText("Select.InputSearch.Value:aria-label")
       };
     }
   }, {
     key: "getClearProps",
     value: function getClearProps() {
-      var _this$asProps = this.asProps, value = _this$asProps.value, getI18nText = _this$asProps.getI18nText;
+      var _this$asProps2 = this.asProps, value = _this$asProps2.value, getI18nText = _this$asProps2.getI18nText;
       return {
-        ref: this.closeIconRef,
+        "ref": this.closeIconRef,
         /* hide through css because the width of the input changes */
-        hide: !value,
+        "hide": !value,
         "aria-hidden": !value,
         "aria-label": getI18nText("clearSearch"),
-        onClick: this.handleClear
+        "onClick": this.handleClear
       };
     }
   }, {
@@ -92,15 +91,14 @@ var InputSearchRoot = /* @__PURE__ */ function(_Component) {
       var _ref = this.asProps, _ref5;
       var Value = InputSearch.Value;
       var SInputSearch = Input;
-      var _this$asProps2 = this.asProps, size = _this$asProps2.size, styles = _this$asProps2.styles, hasChildren = _this$asProps2.children, Children = _this$asProps2.Children;
-      return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SInputSearch, _ref5.cn("SInputSearch", {
+      var _this$asProps3 = this.asProps, size = _this$asProps3.size, styles = _this$asProps3.styles, hasChildren = _this$asProps3.children, Children = _this$asProps3.Children;
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SInputSearch, _ref5.cn("SInputSearch", {
         "size": size || this.context.size || "m",
         "styles": styles
       }), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InputSearch.SearchIcon, null), /* @__PURE__ */ React.createElement(Value, _ref5.cn("Value", _objectSpread({}, assignProps({}, _ref)))), /* @__PURE__ */ React.createElement(InputSearch.Clear, null)));
     }
   }]);
-  return InputSearchRoot2;
-}(Component);
+})(Component);
 _defineProperty(InputSearchRoot, "displayName", "InputSearch");
 _defineProperty(InputSearchRoot, "style", style);
 _defineProperty(InputSearchRoot, "enhance", [i18nEnhance(localizedMessages)]);
@@ -110,27 +108,27 @@ _defineProperty(InputSearchRoot, "defaultProps", {
   locale: "en"
 });
 _defineProperty(InputSearchRoot, "contextType", selectContext);
-var SearchIcon = function SearchIcon2(props) {
+function SearchIcon(props) {
   var _ref2 = arguments[0], _ref6;
   var SSearchIcon = Input.Addon;
   var styles = props.styles;
-  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SSearchIcon, _ref6.cn("SSearchIcon", _objectSpread({}, assignProps({}, _ref2))), /* @__PURE__ */ React.createElement(SearchM, _ref6.cn("SearchM", {})));
-};
-var SearchValue = function SearchValue2(props) {
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SSearchIcon, _ref6.cn("SSearchIcon", _objectSpread({}, assignProps({}, _ref2))), /* @__PURE__ */ React.createElement(SearchM, _ref6.cn("SearchM", {})));
+}
+function SearchValue(props) {
   var _ref3 = arguments[0], _ref7;
   var SSearchValue = Input.Value;
   var styles = props.styles;
-  return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SSearchValue, _ref7.cn("SSearchValue", _objectSpread({}, assignProps({}, _ref3))));
-};
-var SearchClear = function SearchClear2(props) {
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SSearchValue, _ref7.cn("SSearchValue", _objectSpread({}, assignProps({}, _ref3))));
+}
+function SearchClear(props) {
   var _ref4 = arguments[0], _ref8;
   var SSearchClear = ButtonLink;
   var styles = props.styles;
-  return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SSearchClear, _ref8.cn("SSearchClear", _objectSpread({}, assignProps({
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SSearchClear, _ref8.cn("SSearchClear", _objectSpread({}, assignProps({
     "addonLeft": CloseM,
     "use": "secondary"
   }, _ref4))));
-};
+}
 var InputSearch = createComponent(InputSearchRoot, {
   SearchIcon,
   Value: SearchValue,