@semcore/select 3.1.2 → 3.1.4

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.1.4] - 2022-10-03
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/base-trigger` [3.0.21 ~> 3.0.22], `@semcore/icon` [2.32.0 ~> 2.32.1]).
+
+## [3.1.3] - 2022-09-29
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/base-trigger` [3.0.20 ~> 3.0.21], `@semcore/icon` [2.30.4 ~> 2.31.0]).
+
 ## [3.1.2] - 2022-09-21
 
 ### Changed

package/lib/cjs/InputSearch.js

@@ -52,16 +52,16 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SInputSearch_1jop7_gg_._size_m_1jop7_gg_{height:32px}.___SClose_1jop7_gg_.__hide_1jop7_gg_{visibility:hidden}.___SOutline_1jop7_gg_{top:-1px;left:-1px;width:100%;border-radius:6px 6px 0 0}"
+".___SInputSearch_1fqxs_gg_._size_m_1fqxs_gg_{height:32px}.___SClose_1fqxs_gg_.__hide_1fqxs_gg_{visibility:hidden}.___SOutline_1fqxs_gg_{top:-1px;left:-1px;width:100%;border-radius:6px 6px 0 0}"
 /*__inner_css_end__*/
-, "1jop7_gg_")
+, "1fqxs_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SInputSearch": "___SInputSearch_1jop7_gg_",
-  "_size_m": "_size_m_1jop7_gg_",
-  "__SClose": "___SClose_1jop7_gg_",
-  "_hide": "__hide_1jop7_gg_",
-  "__SOutline": "___SOutline_1jop7_gg_"
+  "__SInputSearch": "___SInputSearch_1fqxs_gg_",
+  "_size_m": "_size_m_1fqxs_gg_",
+  "__SClose": "___SClose_1fqxs_gg_",
+  "_hide": "__hide_1fqxs_gg_",
+  "__SOutline": "___SOutline_1fqxs_gg_"
 });
 var MAP_SIZE_TO_ICON = {
   m: [_m["default"], _m2["default"]],
@@ -123,6 +123,7 @@ var InputSearch = /*#__PURE__*/function (_Component) {
         "hide": hideClose,
         "aria-hidden": hideClose,
         "interactive": true,
+        "aria-label": "Clear search field",
         "onClick": this.handleClear
       }), /*#__PURE__*/_react["default"].createElement(IconClose, _ref2.cn("IconClose", {}))));
     }

package/lib/cjs/InputSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSearch.js","names":["MAP_SIZE_TO_ICON","m","SearchM","CloseM","l","InputSearch","e","handlers","value","Value","Input","SInputSearch","SClose","Addon","asProps","size","styles","finalSize","context","hideClose","IconClose","IconSearch","sstyled","handleClear","Component","style","defaultValue","selectContext","createComponent"],"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';\n\nimport style from './style/input-search.shadow.css';\n\nconst MAP_SIZE_TO_ICON = {\n  m: [SearchM, CloseM],\n  l: [SearchM, CloseM],\n};\n\nclass InputSearch extends Component {\n  static displayName = 'InputSearch';\n\n  static style = style;\n\n  static defaultProps = {\n    defaultValue: '',\n  };\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  };\n\n  render() {\n    const Value = Root;\n    const SInputSearch = Input;\n    const SClose = Input.Addon;\n    const { size, value, styles } = this.asProps;\n    const finalSize = size || this.context.size;\n    const hideClose = !value;\n    const IconClose = MAP_SIZE_TO_ICON[finalSize][1];\n    const IconSearch = MAP_SIZE_TO_ICON[finalSize][0];\n\n    return sstyled(styles)(\n      <SInputSearch size={finalSize} styles={styles}>\n        <Input.Addon>\n          <IconSearch />\n        </Input.Addon>\n        <Value render={Input.Value} autoFocus />\n        <SClose\n          role=\"button\"\n          /* hide through css because the width of the input changes */\n          hide={hideClose}\n          aria-hidden={hideClose}\n          interactive\n          onClick={this.handleClear}\n        >\n          <IconClose />\n        </SClose>\n      </SInputSearch>,\n    );\n  }\n}\n\nexport default createComponent(InputSearch);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,gBAAgB,GAAG;EACvBC,CAAC,EAAE,CAACC,aAAD,EAAUC,cAAV,CADoB;EAEvBC,CAAC,EAAE,CAACF,aAAD,EAAUC,cAAV;AAFoB,CAAzB;;IAKME,W;;;;;;;;;;;;;;;oGAiBU,UAACC,CAAD,EAAO;MACnB,MAAKC,QAAL,CAAcC,KAAd,CAAoB,EAApB,EAAwBF,CAAxB;IACD,C;;;;;;WARD,6BAAoB;MAClB,OAAO;QACLE,KAAK,EAAE;MADF,CAAP;IAGD;;;WAMD,kBAAS;MAAA;MAAA;;MACP,IAAMC,KAAK,GAcQC,iBAAA,CAAMD,KAdzB;MACA,IAAME,YAAY,GAAGD,iBAArB;MACA,IAAME,MAAM,GAAGF,iBAAA,CAAMG,KAArB;MACA,oBAAgC,KAAKC,OAArC;MAAA,IAAQC,IAAR,iBAAQA,IAAR;MAAA,IAAcP,KAAd,iBAAcA,KAAd;MAAA,IAAqBQ,MAArB,iBAAqBA,MAArB;MACA,IAAMC,SAAS,GAAGF,IAAI,IAAI,KAAKG,OAAL,CAAaH,IAAvC;MACA,IAAMI,SAAS,GAAG,CAACX,KAAnB;MACA,IAAMY,SAAS,GAAGpB,gBAAgB,CAACiB,SAAD,CAAhB,CAA4B,CAA5B,CAAlB;MACA,IAAMI,UAAU,GAAGrB,gBAAgB,CAACiB,SAAD,CAAhB,CAA4B,CAA5B,CAAnB;MAEA,eAAO,IAAAK,aAAA,EAAQN,MAAR,CAAP,eACE,gCAAC,YAAD;QAAA,QAAoBC,SAApB;QAAA,UAAuCD;MAAvC,iBACE,gCAAC,iBAAD,CAAO,KAAP,qBACE,gCAAC,UAAD,6BADF,CADF,eAIE,gCAAC,KAAD;QAAA;MAAA,WAJF,eAKE,gCAAC,MAAD;QAAA,QACO,QADP;QAAA,QAGQG,SAHR;QAAA,eAIeA,SAJf;QAAA;QAAA,WAMW,KAAKI;MANhB,iBAQE,gCAAC,SAAD,4BARF,CALF,CADF;IAkBD;;;EAjDuBC,e;;iCAApBnB,W,iBACiB,a;iCADjBA,W,WAGWoB,K;iCAHXpB,W,kBAKkB;EACpBqB,YAAY,EAAE;AADM,C;iCALlBrB,W,iBASiBsB,sB;;eA2CR,IAAAC,gBAAA,EAAgBvB,WAAhB,C"}
+{"version":3,"file":"InputSearch.js","names":["MAP_SIZE_TO_ICON","m","SearchM","CloseM","l","InputSearch","e","handlers","value","Value","Input","SInputSearch","SClose","Addon","asProps","size","styles","finalSize","context","hideClose","IconClose","IconSearch","sstyled","handleClear","Component","style","defaultValue","selectContext","createComponent"],"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';\n\nimport style from './style/input-search.shadow.css';\n\nconst MAP_SIZE_TO_ICON = {\n  m: [SearchM, CloseM],\n  l: [SearchM, CloseM],\n};\n\nclass InputSearch extends Component {\n  static displayName = 'InputSearch';\n\n  static style = style;\n\n  static defaultProps = {\n    defaultValue: '',\n  };\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  };\n\n  render() {\n    const Value = Root;\n    const SInputSearch = Input;\n    const SClose = Input.Addon;\n    const { size, value, styles } = this.asProps;\n    const finalSize = size || this.context.size;\n    const hideClose = !value;\n    const IconClose = MAP_SIZE_TO_ICON[finalSize][1];\n    const IconSearch = MAP_SIZE_TO_ICON[finalSize][0];\n\n    return sstyled(styles)(\n      <SInputSearch size={finalSize} styles={styles}>\n        <Input.Addon>\n          <IconSearch />\n        </Input.Addon>\n        <Value render={Input.Value} autoFocus />\n        <SClose\n          role=\"button\"\n          /* hide through css because the width of the input changes */\n          hide={hideClose}\n          aria-hidden={hideClose}\n          interactive\n          aria-label=\"Clear search field\"\n          onClick={this.handleClear}\n        >\n          <IconClose />\n        </SClose>\n      </SInputSearch>,\n    );\n  }\n}\n\nexport default createComponent(InputSearch);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,gBAAgB,GAAG;EACvBC,CAAC,EAAE,CAACC,aAAD,EAAUC,cAAV,CADoB;EAEvBC,CAAC,EAAE,CAACF,aAAD,EAAUC,cAAV;AAFoB,CAAzB;;IAKME,W;;;;;;;;;;;;;;;oGAiBU,UAACC,CAAD,EAAO;MACnB,MAAKC,QAAL,CAAcC,KAAd,CAAoB,EAApB,EAAwBF,CAAxB;IACD,C;;;;;;WARD,6BAAoB;MAClB,OAAO;QACLE,KAAK,EAAE;MADF,CAAP;IAGD;;;WAMD,kBAAS;MAAA;MAAA;;MACP,IAAMC,KAAK,GAcQC,iBAAA,CAAMD,KAdzB;MACA,IAAME,YAAY,GAAGD,iBAArB;MACA,IAAME,MAAM,GAAGF,iBAAA,CAAMG,KAArB;MACA,oBAAgC,KAAKC,OAArC;MAAA,IAAQC,IAAR,iBAAQA,IAAR;MAAA,IAAcP,KAAd,iBAAcA,KAAd;MAAA,IAAqBQ,MAArB,iBAAqBA,MAArB;MACA,IAAMC,SAAS,GAAGF,IAAI,IAAI,KAAKG,OAAL,CAAaH,IAAvC;MACA,IAAMI,SAAS,GAAG,CAACX,KAAnB;MACA,IAAMY,SAAS,GAAGpB,gBAAgB,CAACiB,SAAD,CAAhB,CAA4B,CAA5B,CAAlB;MACA,IAAMI,UAAU,GAAGrB,gBAAgB,CAACiB,SAAD,CAAhB,CAA4B,CAA5B,CAAnB;MAEA,eAAO,IAAAK,aAAA,EAAQN,MAAR,CAAP,eACE,gCAAC,YAAD;QAAA,QAAoBC,SAApB;QAAA,UAAuCD;MAAvC,iBACE,gCAAC,iBAAD,CAAO,KAAP,qBACE,gCAAC,UAAD,6BADF,CADF,eAIE,gCAAC,KAAD;QAAA;MAAA,WAJF,eAKE,gCAAC,MAAD;QAAA,QACO,QADP;QAAA,QAGQG,SAHR;QAAA,eAIeA,SAJf;QAAA;QAAA,cAMa,oBANb;QAAA,WAOW,KAAKI;MAPhB,iBASE,gCAAC,SAAD,4BATF,CALF,CADF;IAmBD;;;EAlDuBC,e;;iCAApBnB,W,iBACiB,a;iCADjBA,W,WAGWoB,K;iCAHXpB,W,kBAKkB;EACpBqB,YAAY,EAAE;AADM,C;iCALlBrB,W,iBASiBsB,sB;;eA4CR,IAAAC,gBAAA,EAAgBvB,WAAhB,C"}

package/lib/cjs/Select.js

@@ -78,17 +78,17 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SOptionCheckbox_1nai2_gg_{margin-top:2px;margin-right:8px;margin-bottom:auto;position:relative;flex-shrink:0}.___SOptionCheckbox_1nai2_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:4px;border-color:#c4c7cf}.___SOptionCheckbox_1nai2_gg_{width:16px;height:16px}.___SOptionCheckbox_1nai2_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 2px;background-repeat:no-repeat;background-position:50%;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC4yNSAxTDQgNS4yNSAxLjc1IDMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_1nai2_gg_._size_l_1nai2_gg_{width:20px;height:20px}.___SOptionCheckbox_1nai2_gg_._size_l_1nai2_gg_:after{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMS41TDQuNzUgNy43NSAxIDQiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_1nai2_gg_.__checked_1nai2_gg_:before{background-color:#008ff8;border-color:#008ff8}.___SOptionCheckbox_1nai2_gg_.__theme_1nai2_gg_:before{border-color:var(--theme_1nai2)}.___SOptionCheckbox_1nai2_gg_.__theme_1nai2_gg_.__checked_1nai2_gg_:before{background-color:var(--theme_1nai2);border-color:var(--theme_1nai2)}.___SOptionCheckbox_1nai2_gg_.__selected_1nai2_gg_{background-color:rgba(196,229,254,.7)}.___SOptionCheckbox_1nai2_gg_.__selected_1nai2_gg_:hover{background-color:rgba(196,229,254,.7)}"
+".___SOptionCheckbox_say6j_gg_{margin-top:2px;margin-right:8px;margin-bottom:auto;position:relative;flex-shrink:0}.___SOptionCheckbox_say6j_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:4px;border-color:#c4c7cf}.___SOptionCheckbox_say6j_gg_{width:16px;height:16px}.___SOptionCheckbox_say6j_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 2px;background-repeat:no-repeat;background-position:50%;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC4yNSAxTDQgNS4yNSAxLjc1IDMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_say6j_gg_._size_l_say6j_gg_{width:20px;height:20px}.___SOptionCheckbox_say6j_gg_._size_l_say6j_gg_:after{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMS41TDQuNzUgNy43NSAxIDQiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_say6j_gg_.__checked_say6j_gg_:before{background-color:#008ff8;border-color:#008ff8}.___SOptionCheckbox_say6j_gg_.__theme_say6j_gg_:before{border-color:var(--theme_say6j)}.___SOptionCheckbox_say6j_gg_.__theme_say6j_gg_.__checked_say6j_gg_:before{background-color:var(--theme_say6j);border-color:var(--theme_say6j)}.___SOptionCheckbox_say6j_gg_.__selected_say6j_gg_{background-color:rgba(196,229,254,.7)}.___SOptionCheckbox_say6j_gg_.__selected_say6j_gg_:hover{background-color:rgba(196,229,254,.7)}"
 /*__inner_css_end__*/
-, "1nai2_gg_")
+, "say6j_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SOptionCheckbox": "___SOptionCheckbox_1nai2_gg_",
-  "_size_l": "_size_l_1nai2_gg_",
-  "_checked": "__checked_1nai2_gg_",
-  "_theme": "__theme_1nai2_gg_",
-  "--theme": "--theme_1nai2",
-  "_selected": "__selected_1nai2_gg_"
+  "__SOptionCheckbox": "___SOptionCheckbox_say6j_gg_",
+  "_size_l": "_size_l_say6j_gg_",
+  "_checked": "__checked_say6j_gg_",
+  "_theme": "__theme_say6j_gg_",
+  "--theme": "--theme_say6j",
+  "_selected": "__selected_say6j_gg_"
 });
 
 function isSelectedOption(value, valueOption) {

package/lib/cjs/index.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.d.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';\nimport DropdownMenu, {\n  IDropdownMenuContext,\n  IDropdownMenuItemProps,\n  IDropdownMenuProps,\n  IDropdownMenuHandlers,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, IBaseTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport { IInputValueProps } from '@semcore/input';\nimport { IBoxProps } from '@semcore/flex-box';\n\nexport interface ISelectInputSearch extends IInputValueProps {}\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 interface ISelectProps<T extends SelectValue = SelectValue>\n  extends IDropdownMenuProps,\n    IBaseTriggerProps {\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?: (value: T, e: React.SyntheticEvent) => boolean | void;\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   * Input name\n   */\n  name?: string;\n}\n\nexport interface ISelectOption {\n  value?: string | number;\n  [key: string]: any;\n}\n\nexport interface ISelectOptionProps extends IDropdownMenuItemProps {\n  /** Value of the option */\n  value: string | number;\n}\n\nexport interface ISelectOptionCheckboxProps extends ISelectOptionProps {\n  /** Checkbox theme */\n  theme?: string;\n}\n\ndeclare const InputSearch: <T>(props: ISelectInputSearch & T) => ReturnEl;\n\nexport interface ISelectContext extends IDropdownMenuContext {\n  getOptionProps: PropGetterFn;\n  getOptionCheckboxProps: PropGetterFn;\n  getDividerProps: PropGetterFn;\n}\n\nexport interface ISelectHandlers extends IDropdownMenuHandlers {\n  value: (index: SelectValue) => void;\n}\n\ndeclare const Select: (<T, V extends SelectValue = SelectValue>(\n  props: CProps<ISelectProps<V> & T, ISelectContext, ISelectHandlers>,\n) => ReturnEl) & {\n  Trigger: (<T>(\n    props: Merge<\n      ComponentProps<typeof DropdownMenu.Trigger>,\n      ComponentProps<typeof ButtonTrigger>\n    > &\n      T,\n  ) => ReturnEl) & {\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: (<T>(\n    props: CProps<ISelectOptionProps & T, ISelectContext, ISelectHandlers>,\n  ) => ReturnEl) & {\n    Addon: typeof DropdownMenu.Item.Addon;\n    Checkbox: <T>(\n      props: CProps<IBoxProps & { theme?: string; selected?: boolean } & T>,\n    ) => ReturnEl;\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\nexport { InputSearch };\nexport default Select;\n"],"mappings":""}

package/lib/es6/InputSearch.js

@@ -28,16 +28,16 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SInputSearch_1jop7_gg_._size_m_1jop7_gg_{height:32px}.___SClose_1jop7_gg_.__hide_1jop7_gg_{visibility:hidden}.___SOutline_1jop7_gg_{top:-1px;left:-1px;width:100%;border-radius:6px 6px 0 0}"
+".___SInputSearch_1fqxs_gg_._size_m_1fqxs_gg_{height:32px}.___SClose_1fqxs_gg_.__hide_1fqxs_gg_{visibility:hidden}.___SOutline_1fqxs_gg_{top:-1px;left:-1px;width:100%;border-radius:6px 6px 0 0}"
 /*__inner_css_end__*/
-, "1jop7_gg_")
+, "1fqxs_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SInputSearch": "___SInputSearch_1jop7_gg_",
-  "_size_m": "_size_m_1jop7_gg_",
-  "__SClose": "___SClose_1jop7_gg_",
-  "_hide": "__hide_1jop7_gg_",
-  "__SOutline": "___SOutline_1jop7_gg_"
+  "__SInputSearch": "___SInputSearch_1fqxs_gg_",
+  "_size_m": "_size_m_1fqxs_gg_",
+  "__SClose": "___SClose_1fqxs_gg_",
+  "_hide": "__hide_1fqxs_gg_",
+  "__SOutline": "___SOutline_1fqxs_gg_"
 });
 var MAP_SIZE_TO_ICON = {
   m: [SearchM, CloseM],
@@ -101,6 +101,7 @@ var InputSearch = /*#__PURE__*/function (_Component) {
         "hide": hideClose,
         "aria-hidden": hideClose,
         "interactive": true,
+        "aria-label": "Clear search field",
         "onClick": this.handleClear
       }), /*#__PURE__*/React.createElement(IconClose, _ref2.cn("IconClose", {}))));
     }

package/lib/es6/InputSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSearch.js","names":["React","createComponent","Component","sstyled","Root","SearchM","CloseM","Input","selectContext","MAP_SIZE_TO_ICON","m","l","InputSearch","e","handlers","value","Value","SInputSearch","SClose","Addon","asProps","size","styles","finalSize","context","hideClose","IconClose","IconSearch","handleClear","style","defaultValue"],"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';\n\nimport style from './style/input-search.shadow.css';\n\nconst MAP_SIZE_TO_ICON = {\n  m: [SearchM, CloseM],\n  l: [SearchM, CloseM],\n};\n\nclass InputSearch extends Component {\n  static displayName = 'InputSearch';\n\n  static style = style;\n\n  static defaultProps = {\n    defaultValue: '',\n  };\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  };\n\n  render() {\n    const Value = Root;\n    const SInputSearch = Input;\n    const SClose = Input.Addon;\n    const { size, value, styles } = this.asProps;\n    const finalSize = size || this.context.size;\n    const hideClose = !value;\n    const IconClose = MAP_SIZE_TO_ICON[finalSize][1];\n    const IconSearch = MAP_SIZE_TO_ICON[finalSize][0];\n\n    return sstyled(styles)(\n      <SInputSearch size={finalSize} styles={styles}>\n        <Input.Addon>\n          <IconSearch />\n        </Input.Addon>\n        <Value render={Input.Value} autoFocus />\n        <SClose\n          role=\"button\"\n          /* hide through css because the width of the input changes */\n          hide={hideClose}\n          aria-hidden={hideClose}\n          interactive\n          onClick={this.handleClear}\n        >\n          <IconClose />\n        </SClose>\n      </SInputSearch>,\n    );\n  }\n}\n\nexport default createComponent(InputSearch);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,OAAOC,OAAP,MAAoB,wBAApB;AACA,OAAOC,MAAP,MAAmB,uBAAnB;AACA,OAAOC,KAAP,MAAkB,gBAAlB;AACA,SAASC,aAAT,QAA8B,WAA9B;;;;;;;;;;;;;;;;;;AAIA,IAAMC,gBAAgB,GAAG;EACvBC,CAAC,EAAE,CAACL,OAAD,EAAUC,MAAV,CADoB;EAEvBK,CAAC,EAAE,CAACN,OAAD,EAAUC,MAAV;AAFoB,CAAzB;;IAKMM,W;;;;;;;;;;;;;;;;kEAiBU,UAACC,CAAD,EAAO;MACnB,MAAKC,QAAL,CAAcC,KAAd,CAAoB,EAApB,EAAwBF,CAAxB;IACD,C;;;;;;;WARD,6BAAoB;MAClB,OAAO;QACLE,KAAK,EAAE;MADF,CAAP;IAGD;;;WAMD,kBAAS;MAAA;MAAA;;MACP,IAAMC,KAAK,GAcQT,KAAK,CAACS,KAdzB;MACA,IAAMC,YAAY,GAAGV,KAArB;MACA,IAAMW,MAAM,GAAGX,KAAK,CAACY,KAArB;MACA,oBAAgC,KAAKC,OAArC;MAAA,IAAQC,IAAR,iBAAQA,IAAR;MAAA,IAAcN,KAAd,iBAAcA,KAAd;MAAA,IAAqBO,MAArB,iBAAqBA,MAArB;MACA,IAAMC,SAAS,GAAGF,IAAI,IAAI,KAAKG,OAAL,CAAaH,IAAvC;MACA,IAAMI,SAAS,GAAG,CAACV,KAAnB;MACA,IAAMW,SAAS,GAAGjB,gBAAgB,CAACc,SAAD,CAAhB,CAA4B,CAA5B,CAAlB;MACA,IAAMI,UAAU,GAAGlB,gBAAgB,CAACc,SAAD,CAAhB,CAA4B,CAA5B,CAAnB;MAEA,eAAOpB,OAAO,CAACmB,MAAD,CAAd,eACE,oBAAC,YAAD;QAAA,QAAoBC,SAApB;QAAA,UAAuCD;MAAvC,iBACE,oBAAC,KAAD,CAAO,KAAP,qBACE,oBAAC,UAAD,6BADF,CADF,eAIE,oBAAC,KAAD;QAAA;MAAA,WAJF,eAKE,oBAAC,MAAD;QAAA,QACO,QADP;QAAA,QAGQG,SAHR;QAAA,eAIeA,SAJf;QAAA;QAAA,WAMW,KAAKG;MANhB,iBAQE,oBAAC,SAAD,4BARF,CALF,CADF;IAkBD;;;;EAjDuB1B,S;;gBAApBU,W,iBACiB,a;;gBADjBA,W,WAGWiB,K;;gBAHXjB,W,kBAKkB;EACpBkB,YAAY,EAAE;AADM,C;;gBALlBlB,W,iBASiBJ,a;;AA2CvB,eAAeP,eAAe,CAACW,WAAD,CAA9B"}
+{"version":3,"file":"InputSearch.js","names":["React","createComponent","Component","sstyled","Root","SearchM","CloseM","Input","selectContext","MAP_SIZE_TO_ICON","m","l","InputSearch","e","handlers","value","Value","SInputSearch","SClose","Addon","asProps","size","styles","finalSize","context","hideClose","IconClose","IconSearch","handleClear","style","defaultValue"],"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';\n\nimport style from './style/input-search.shadow.css';\n\nconst MAP_SIZE_TO_ICON = {\n  m: [SearchM, CloseM],\n  l: [SearchM, CloseM],\n};\n\nclass InputSearch extends Component {\n  static displayName = 'InputSearch';\n\n  static style = style;\n\n  static defaultProps = {\n    defaultValue: '',\n  };\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  };\n\n  render() {\n    const Value = Root;\n    const SInputSearch = Input;\n    const SClose = Input.Addon;\n    const { size, value, styles } = this.asProps;\n    const finalSize = size || this.context.size;\n    const hideClose = !value;\n    const IconClose = MAP_SIZE_TO_ICON[finalSize][1];\n    const IconSearch = MAP_SIZE_TO_ICON[finalSize][0];\n\n    return sstyled(styles)(\n      <SInputSearch size={finalSize} styles={styles}>\n        <Input.Addon>\n          <IconSearch />\n        </Input.Addon>\n        <Value render={Input.Value} autoFocus />\n        <SClose\n          role=\"button\"\n          /* hide through css because the width of the input changes */\n          hide={hideClose}\n          aria-hidden={hideClose}\n          interactive\n          aria-label=\"Clear search field\"\n          onClick={this.handleClear}\n        >\n          <IconClose />\n        </SClose>\n      </SInputSearch>,\n    );\n  }\n}\n\nexport default createComponent(InputSearch);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,OAAOC,OAAP,MAAoB,wBAApB;AACA,OAAOC,MAAP,MAAmB,uBAAnB;AACA,OAAOC,KAAP,MAAkB,gBAAlB;AACA,SAASC,aAAT,QAA8B,WAA9B;;;;;;;;;;;;;;;;;;AAIA,IAAMC,gBAAgB,GAAG;EACvBC,CAAC,EAAE,CAACL,OAAD,EAAUC,MAAV,CADoB;EAEvBK,CAAC,EAAE,CAACN,OAAD,EAAUC,MAAV;AAFoB,CAAzB;;IAKMM,W;;;;;;;;;;;;;;;;kEAiBU,UAACC,CAAD,EAAO;MACnB,MAAKC,QAAL,CAAcC,KAAd,CAAoB,EAApB,EAAwBF,CAAxB;IACD,C;;;;;;;WARD,6BAAoB;MAClB,OAAO;QACLE,KAAK,EAAE;MADF,CAAP;IAGD;;;WAMD,kBAAS;MAAA;MAAA;;MACP,IAAMC,KAAK,GAcQT,KAAK,CAACS,KAdzB;MACA,IAAMC,YAAY,GAAGV,KAArB;MACA,IAAMW,MAAM,GAAGX,KAAK,CAACY,KAArB;MACA,oBAAgC,KAAKC,OAArC;MAAA,IAAQC,IAAR,iBAAQA,IAAR;MAAA,IAAcN,KAAd,iBAAcA,KAAd;MAAA,IAAqBO,MAArB,iBAAqBA,MAArB;MACA,IAAMC,SAAS,GAAGF,IAAI,IAAI,KAAKG,OAAL,CAAaH,IAAvC;MACA,IAAMI,SAAS,GAAG,CAACV,KAAnB;MACA,IAAMW,SAAS,GAAGjB,gBAAgB,CAACc,SAAD,CAAhB,CAA4B,CAA5B,CAAlB;MACA,IAAMI,UAAU,GAAGlB,gBAAgB,CAACc,SAAD,CAAhB,CAA4B,CAA5B,CAAnB;MAEA,eAAOpB,OAAO,CAACmB,MAAD,CAAd,eACE,oBAAC,YAAD;QAAA,QAAoBC,SAApB;QAAA,UAAuCD;MAAvC,iBACE,oBAAC,KAAD,CAAO,KAAP,qBACE,oBAAC,UAAD,6BADF,CADF,eAIE,oBAAC,KAAD;QAAA;MAAA,WAJF,eAKE,oBAAC,MAAD;QAAA,QACO,QADP;QAAA,QAGQG,SAHR;QAAA,eAIeA,SAJf;QAAA;QAAA,cAMa,oBANb;QAAA,WAOW,KAAKG;MAPhB,iBASE,oBAAC,SAAD,4BATF,CALF,CADF;IAmBD;;;;EAlDuB1B,S;;gBAApBU,W,iBACiB,a;;gBADjBA,W,WAGWiB,K;;gBAHXjB,W,kBAKkB;EACpBkB,YAAY,EAAE;AADM,C;;gBALlBlB,W,iBASiBJ,a;;AA4CvB,eAAeP,eAAe,CAACW,WAAD,CAA9B"}

package/lib/es6/Select.js

@@ -44,17 +44,17 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SOptionCheckbox_1nai2_gg_{margin-top:2px;margin-right:8px;margin-bottom:auto;position:relative;flex-shrink:0}.___SOptionCheckbox_1nai2_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:4px;border-color:#c4c7cf}.___SOptionCheckbox_1nai2_gg_{width:16px;height:16px}.___SOptionCheckbox_1nai2_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 2px;background-repeat:no-repeat;background-position:50%;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC4yNSAxTDQgNS4yNSAxLjc1IDMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_1nai2_gg_._size_l_1nai2_gg_{width:20px;height:20px}.___SOptionCheckbox_1nai2_gg_._size_l_1nai2_gg_:after{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMS41TDQuNzUgNy43NSAxIDQiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_1nai2_gg_.__checked_1nai2_gg_:before{background-color:#008ff8;border-color:#008ff8}.___SOptionCheckbox_1nai2_gg_.__theme_1nai2_gg_:before{border-color:var(--theme_1nai2)}.___SOptionCheckbox_1nai2_gg_.__theme_1nai2_gg_.__checked_1nai2_gg_:before{background-color:var(--theme_1nai2);border-color:var(--theme_1nai2)}.___SOptionCheckbox_1nai2_gg_.__selected_1nai2_gg_{background-color:rgba(196,229,254,.7)}.___SOptionCheckbox_1nai2_gg_.__selected_1nai2_gg_:hover{background-color:rgba(196,229,254,.7)}"
+".___SOptionCheckbox_say6j_gg_{margin-top:2px;margin-right:8px;margin-bottom:auto;position:relative;flex-shrink:0}.___SOptionCheckbox_say6j_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:4px;border-color:#c4c7cf}.___SOptionCheckbox_say6j_gg_{width:16px;height:16px}.___SOptionCheckbox_say6j_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 2px;background-repeat:no-repeat;background-position:50%;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC4yNSAxTDQgNS4yNSAxLjc1IDMiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_say6j_gg_._size_l_say6j_gg_{width:20px;height:20px}.___SOptionCheckbox_say6j_gg_._size_l_say6j_gg_:after{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMS41TDQuNzUgNy43NSAxIDQiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_say6j_gg_.__checked_say6j_gg_:before{background-color:#008ff8;border-color:#008ff8}.___SOptionCheckbox_say6j_gg_.__theme_say6j_gg_:before{border-color:var(--theme_say6j)}.___SOptionCheckbox_say6j_gg_.__theme_say6j_gg_.__checked_say6j_gg_:before{background-color:var(--theme_say6j);border-color:var(--theme_say6j)}.___SOptionCheckbox_say6j_gg_.__selected_say6j_gg_{background-color:rgba(196,229,254,.7)}.___SOptionCheckbox_say6j_gg_.__selected_say6j_gg_:hover{background-color:rgba(196,229,254,.7)}"
 /*__inner_css_end__*/
-, "1nai2_gg_")
+, "say6j_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SOptionCheckbox": "___SOptionCheckbox_1nai2_gg_",
-  "_size_l": "_size_l_1nai2_gg_",
-  "_checked": "__checked_1nai2_gg_",
-  "_theme": "__theme_1nai2_gg_",
-  "--theme": "--theme_1nai2",
-  "_selected": "__selected_1nai2_gg_"
+  "__SOptionCheckbox": "___SOptionCheckbox_say6j_gg_",
+  "_size_l": "_size_l_say6j_gg_",
+  "_checked": "__checked_say6j_gg_",
+  "_theme": "__theme_say6j_gg_",
+  "--theme": "--theme_say6j",
+  "_selected": "__selected_say6j_gg_"
 });
 
 function isSelectedOption(value, valueOption) {

package/lib/es6/index.d.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';\nimport DropdownMenu, {\n  IDropdownMenuContext,\n  IDropdownMenuItemProps,\n  IDropdownMenuProps,\n  IDropdownMenuHandlers,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, IBaseTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport { IInputValueProps } from '@semcore/input';\nimport { IBoxProps } from '@semcore/flex-box';\n\nexport interface ISelectInputSearch extends IInputValueProps {}\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 interface ISelectProps<T extends SelectValue = SelectValue>\n  extends IDropdownMenuProps,\n    IBaseTriggerProps {\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?: (value: T, e: React.SyntheticEvent) => boolean | void;\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   * Input name\n   */\n  name?: string;\n}\n\nexport interface ISelectOption {\n  value?: string | number;\n  [key: string]: any;\n}\n\nexport interface ISelectOptionProps extends IDropdownMenuItemProps {\n  /** Value of the option */\n  value: string | number;\n}\n\nexport interface ISelectOptionCheckboxProps extends ISelectOptionProps {\n  /** Checkbox theme */\n  theme?: string;\n}\n\ndeclare const InputSearch: <T>(props: ISelectInputSearch & T) => ReturnEl;\n\nexport interface ISelectContext extends IDropdownMenuContext {\n  getOptionProps: PropGetterFn;\n  getOptionCheckboxProps: PropGetterFn;\n  getDividerProps: PropGetterFn;\n}\n\nexport interface ISelectHandlers extends IDropdownMenuHandlers {\n  value: (index: SelectValue) => void;\n}\n\ndeclare const Select: (<T, V extends SelectValue = SelectValue>(\n  props: CProps<ISelectProps<V> & T, ISelectContext, ISelectHandlers>,\n) => ReturnEl) & {\n  Trigger: (<T>(\n    props: Merge<\n      ComponentProps<typeof DropdownMenu.Trigger>,\n      ComponentProps<typeof ButtonTrigger>\n    > &\n      T,\n  ) => ReturnEl) & {\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: (<T>(\n    props: CProps<ISelectOptionProps & T, ISelectContext, ISelectHandlers>,\n  ) => ReturnEl) & {\n    Addon: typeof DropdownMenu.Item.Addon;\n    Checkbox: <T>(\n      props: CProps<IBoxProps & { theme?: string; selected?: boolean } & T>,\n    ) => ReturnEl;\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\nexport { InputSearch };\nexport default Select;\n"],"mappings":""}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@semcore/select",
   "description": "Semrush Select Component",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "build --source=js",
+    "build": "pnpm semcore-builder --source=js",
     "test": "jest"
   },
   "dependencies": {
@@ -35,6 +35,7 @@
     "directory": "semcore/select"
   },
   "devDependencies": {
+    "@types/react": "16.8 - 17",
     "@guidepup/playwright": "0.6.1",
     "@playwright/test": "1.25.1",
     "@semcore/jest-preset-ui": "1.0.0"

package/lib/cjs/index.d.ts

@@ -1,128 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';
-import DropdownMenu, {
-  IDropdownMenuContext,
-  IDropdownMenuItemProps,
-  IDropdownMenuProps,
-  IDropdownMenuHandlers,
-} from '@semcore/dropdown-menu';
-import { ButtonTrigger, IBaseTriggerProps } from '@semcore/base-trigger';
-import Divider from '@semcore/divider';
-import { IInputValueProps } from '@semcore/input';
-import { IBoxProps } from '@semcore/flex-box';
-
-export interface ISelectInputSearch extends IInputValueProps {}
-
-export type OptionValue = string | number;
-export type SelectValue = string | number | Array<string | number> | null;
-
-export type SelectOption = {
-  value: OptionValue;
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-};
-
-export interface ISelectProps<T extends SelectValue = SelectValue>
-  extends IDropdownMenuProps,
-    IBaseTriggerProps {
-  /**
-   * Multiple select
-   */
-  multiselect?: boolean;
-  /**
-   * Options array
-   */
-  options?: SelectOption[];
-  /**
-   * The value or values array selected by default when using multiselect
-   * @type SelectValue
-   */
-  defaultValue?: T;
-  /**
-   * The selected value or values array when using multiselect
-   * @type SelectValue
-   */
-  value?: T;
-  /**
-   * Callback on value change
-   * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void
-   */
-  onChange?: (value: T, e: React.SyntheticEvent) => boolean | void;
-  /**
-   * Trigger placeholder at not selected value
-   */
-  placeholder?: React.ReactNode;
-  /**
-   * Trigger state
-   */
-  state?: 'normal' | 'valid' | 'invalid';
-  /**
-   * Disables select
-   */
-  disabled?: boolean;
-  /**
-   * Input name
-   */
-  name?: string;
-}
-
-export interface ISelectOption {
-  value?: string | number;
-  [key: string]: any;
-}
-
-export interface ISelectOptionProps extends IDropdownMenuItemProps {
-  /** Value of the option */
-  value: string | number;
-}
-
-export interface ISelectOptionCheckboxProps extends ISelectOptionProps {
-  /** Checkbox theme */
-  theme?: string;
-}
-
-declare const InputSearch: <T>(props: ISelectInputSearch & T) => ReturnEl;
-
-export interface ISelectContext extends IDropdownMenuContext {
-  getOptionProps: PropGetterFn;
-  getOptionCheckboxProps: PropGetterFn;
-  getDividerProps: PropGetterFn;
-}
-
-export interface ISelectHandlers extends IDropdownMenuHandlers {
-  value: (index: SelectValue) => void;
-}
-
-declare const Select: (<T, V extends SelectValue = SelectValue>(
-  props: CProps<ISelectProps<V> & T, ISelectContext, ISelectHandlers>,
-) => ReturnEl) & {
-  Trigger: (<T>(
-    props: Merge<
-      ComponentProps<typeof DropdownMenu.Trigger>,
-      ComponentProps<typeof ButtonTrigger>
-    > &
-      T,
-  ) => ReturnEl) & {
-    Addon: typeof ButtonTrigger.Addon;
-    Text: typeof ButtonTrigger.Text;
-  };
-  Popper: typeof DropdownMenu.Popper;
-  List: typeof DropdownMenu.List;
-  Menu: typeof DropdownMenu.Menu;
-  Option: (<T>(
-    props: CProps<ISelectOptionProps & T, ISelectContext, ISelectHandlers>,
-  ) => ReturnEl) & {
-    Addon: typeof DropdownMenu.Item.Addon;
-    Checkbox: <T>(
-      props: CProps<IBoxProps & { theme?: string; selected?: boolean } & T>,
-    ) => ReturnEl;
-  };
-  OptionTitle: typeof DropdownMenu.ItemTitle;
-  OptionHint: typeof DropdownMenu.ItemHint;
-  Divider: typeof Divider;
-  InputSearch: typeof InputSearch;
-  Input: typeof InputSearch;
-};
-
-export { InputSearch };
-export default Select;

package/lib/es6/index.d.ts

@@ -1,128 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';
-import DropdownMenu, {
-  IDropdownMenuContext,
-  IDropdownMenuItemProps,
-  IDropdownMenuProps,
-  IDropdownMenuHandlers,
-} from '@semcore/dropdown-menu';
-import { ButtonTrigger, IBaseTriggerProps } from '@semcore/base-trigger';
-import Divider from '@semcore/divider';
-import { IInputValueProps } from '@semcore/input';
-import { IBoxProps } from '@semcore/flex-box';
-
-export interface ISelectInputSearch extends IInputValueProps {}
-
-export type OptionValue = string | number;
-export type SelectValue = string | number | Array<string | number> | null;
-
-export type SelectOption = {
-  value: OptionValue;
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-};
-
-export interface ISelectProps<T extends SelectValue = SelectValue>
-  extends IDropdownMenuProps,
-    IBaseTriggerProps {
-  /**
-   * Multiple select
-   */
-  multiselect?: boolean;
-  /**
-   * Options array
-   */
-  options?: SelectOption[];
-  /**
-   * The value or values array selected by default when using multiselect
-   * @type SelectValue
-   */
-  defaultValue?: T;
-  /**
-   * The selected value or values array when using multiselect
-   * @type SelectValue
-   */
-  value?: T;
-  /**
-   * Callback on value change
-   * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void
-   */
-  onChange?: (value: T, e: React.SyntheticEvent) => boolean | void;
-  /**
-   * Trigger placeholder at not selected value
-   */
-  placeholder?: React.ReactNode;
-  /**
-   * Trigger state
-   */
-  state?: 'normal' | 'valid' | 'invalid';
-  /**
-   * Disables select
-   */
-  disabled?: boolean;
-  /**
-   * Input name
-   */
-  name?: string;
-}
-
-export interface ISelectOption {
-  value?: string | number;
-  [key: string]: any;
-}
-
-export interface ISelectOptionProps extends IDropdownMenuItemProps {
-  /** Value of the option */
-  value: string | number;
-}
-
-export interface ISelectOptionCheckboxProps extends ISelectOptionProps {
-  /** Checkbox theme */
-  theme?: string;
-}
-
-declare const InputSearch: <T>(props: ISelectInputSearch & T) => ReturnEl;
-
-export interface ISelectContext extends IDropdownMenuContext {
-  getOptionProps: PropGetterFn;
-  getOptionCheckboxProps: PropGetterFn;
-  getDividerProps: PropGetterFn;
-}
-
-export interface ISelectHandlers extends IDropdownMenuHandlers {
-  value: (index: SelectValue) => void;
-}
-
-declare const Select: (<T, V extends SelectValue = SelectValue>(
-  props: CProps<ISelectProps<V> & T, ISelectContext, ISelectHandlers>,
-) => ReturnEl) & {
-  Trigger: (<T>(
-    props: Merge<
-      ComponentProps<typeof DropdownMenu.Trigger>,
-      ComponentProps<typeof ButtonTrigger>
-    > &
-      T,
-  ) => ReturnEl) & {
-    Addon: typeof ButtonTrigger.Addon;
-    Text: typeof ButtonTrigger.Text;
-  };
-  Popper: typeof DropdownMenu.Popper;
-  List: typeof DropdownMenu.List;
-  Menu: typeof DropdownMenu.Menu;
-  Option: (<T>(
-    props: CProps<ISelectOptionProps & T, ISelectContext, ISelectHandlers>,
-  ) => ReturnEl) & {
-    Addon: typeof DropdownMenu.Item.Addon;
-    Checkbox: <T>(
-      props: CProps<IBoxProps & { theme?: string; selected?: boolean } & T>,
-    ) => ReturnEl;
-  };
-  OptionTitle: typeof DropdownMenu.ItemTitle;
-  OptionHint: typeof DropdownMenu.ItemHint;
-  Divider: typeof Divider;
-  InputSearch: typeof InputSearch;
-  Input: typeof InputSearch;
-};
-
-export { InputSearch };
-export default Select;