@semcore/select 4.9.1-prerelease.0 → 4.10.0-prerelease.0

package/CHANGELOG.md

@@ -2,7 +2,13 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [4.9.1-prerelease.0] - 2023-09-05
+## [4.10.0-prerelease.0] - 2023-09-05
+
+### Added
+
+- `InputSearch` advanced usage with `InputSearch.SearchIcon`, `InputSearch.Value` and `InputSearch.Clear` components.
+
+## [4.9.1] - 2023-09-05
 
 ### Changed
 

package/lib/cjs/InputSearch.js

@@ -22,23 +22,19 @@ var _context = require("./context");
 var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
 var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
 /*__reshadow-styles__:"./style/input-search.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SInputSearch_1u5uf_gg_._size_m_1u5uf_gg_{height:32px}.___SClose_1u5uf_gg_.__hide_1u5uf_gg_{visibility:hidden}.___SOutline_1u5uf_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "1u5uf_gg_") /*__reshadow_css_end__*/, {
-  "__SInputSearch": "___SInputSearch_1u5uf_gg_",
-  "_size_m": "_size_m_1u5uf_gg_",
-  "__SClose": "___SClose_1u5uf_gg_",
-  "_hide": "__hide_1u5uf_gg_",
-  "__SOutline": "___SOutline_1u5uf_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SInputSearch_1s16h_gg_._size_m_1s16h_gg_{height:32px}.___SSearchClear_1s16h_gg_.__hide_1s16h_gg_{visibility:hidden}.___SOutline_1s16h_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "1s16h_gg_") /*__reshadow_css_end__*/, {
+  "__SInputSearch": "___SInputSearch_1s16h_gg_",
+  "_size_m": "_size_m_1s16h_gg_",
+  "__SSearchClear": "___SSearchClear_1s16h_gg_",
+  "_hide": "__hide_1s16h_gg_",
+  "__SOutline": "___SOutline_1s16h_gg_"
 });
-var sizeToIcon = {
-  m: [_m["default"], _m2["default"]],
-  l: [_m["default"], _m2["default"]]
-};
-var InputSearch = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(InputSearch, _Component);
-  var _super = (0, _createSuper2["default"])(InputSearch);
-  function InputSearch() {
+var InputSearchRoot = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(InputSearchRoot, _Component);
+  var _super = (0, _createSuper2["default"])(InputSearchRoot);
+  function InputSearchRoot() {
     var _this;
-    (0, _classCallCheck2["default"])(this, InputSearch);
+    (0, _classCallCheck2["default"])(this, InputSearchRoot);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -56,59 +52,99 @@ var InputSearch = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  (0, _createClass2["default"])(InputSearch, [{
+  (0, _createClass2["default"])(InputSearchRoot, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
         value: null
       };
     }
+  }, {
+    key: "getValueProps",
+    value: function getValueProps() {
+      var value = this.asProps.value;
+      return {
+        value: value,
+        onChange: this.handlers.value,
+        autoFocus: true,
+        ref: this.inputRef
+      };
+    }
+  }, {
+    key: "getClearProps",
+    value: function getClearProps() {
+      var _this$asProps = this.asProps,
+        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
+      };
+    }
   }, {
     key: "render",
     value: function render() {
       var _ref = this.asProps,
-        _ref2;
-      var Value = _input["default"].Value;
+        _ref5;
+      var Value = InputSearch.Value;
       var SInputSearch = _input["default"];
-      var SClose = _input["default"].Addon;
-      var _this$asProps = this.asProps,
-        size = _this$asProps.size,
-        value = _this$asProps.value,
-        styles = _this$asProps.styles,
-        getI18nText = _this$asProps.getI18nText;
-      var finalSize = size || this.context.size || 'm';
-      var hideClose = !value;
-      var IconClose = sizeToIcon[finalSize][1];
-      var IconSearch = sizeToIcon[finalSize][0];
-      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SInputSearch, _ref2.cn("SInputSearch", {
-        "size": finalSize,
+      var _this$asProps2 = this.asProps,
+        size = _this$asProps2.size,
+        styles = _this$asProps2.styles,
+        hasChildren = _this$asProps2.children,
+        Children = _this$asProps2.Children;
+      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SInputSearch, _ref5.cn("SInputSearch", {
+        "size": size || this.context.size || 'm',
         "styles": styles
-      }), /*#__PURE__*/_react["default"].createElement(_input["default"].Addon, null, /*#__PURE__*/_react["default"].createElement(IconSearch, _ref2.cn("IconSearch", {}))), /*#__PURE__*/_react["default"].createElement(Value, _ref2.cn("Value", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-        "autoFocus": true,
-        "ref": this.inputRef
-      }, _ref)))), /*#__PURE__*/_react["default"].createElement(SClose, _ref2.cn("SClose", {
-        "role": 'button',
-        "tag": IconClose,
-        "ref": this.closeIconRef,
-        "hide": hideClose,
-        "aria-hidden": hideClose,
-        "interactive": true,
-        "aria-label": getI18nText('clearSearch'),
-        "onClick": this.handleClear
-      })));
+      }), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(InputSearch.SearchIcon, null), /*#__PURE__*/_react["default"].createElement(Value, _ref5.cn("Value", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref)))), /*#__PURE__*/_react["default"].createElement(InputSearch.Clear, null)));
     }
   }]);
-  return InputSearch;
+  return InputSearchRoot;
 }(_core.Component);
-(0, _defineProperty2["default"])(InputSearch, "displayName", 'InputSearch');
-(0, _defineProperty2["default"])(InputSearch, "style", style);
-(0, _defineProperty2["default"])(InputSearch, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
-(0, _defineProperty2["default"])(InputSearch, "defaultProps", {
+(0, _defineProperty2["default"])(InputSearchRoot, "displayName", 'InputSearch');
+(0, _defineProperty2["default"])(InputSearchRoot, "style", style);
+(0, _defineProperty2["default"])(InputSearchRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
+(0, _defineProperty2["default"])(InputSearchRoot, "defaultProps", {
   defaultValue: '',
   i18n: _intergalacticDynamicLocales.localizedMessages,
   locale: 'en'
 });
-(0, _defineProperty2["default"])(InputSearch, "contextType", _context.selectContext);
-var _default = (0, _core["default"])(InputSearch);
+(0, _defineProperty2["default"])(InputSearchRoot, "contextType", _context.selectContext);
+var SearchIcon = function SearchIcon(props) {
+  var _ref2 = arguments[0],
+    _ref6;
+  var SSearchIcon = _input["default"].Addon;
+  var styles = props.styles;
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSearchIcon, _ref6.cn("SSearchIcon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref2))), /*#__PURE__*/_react["default"].createElement(_m["default"], _ref6.cn("SearchM", {})));
+};
+var SearchValue = function SearchValue(props) {
+  var _ref3 = arguments[0],
+    _ref7;
+  var SSearchValue = _input["default"].Value;
+  var styles = props.styles;
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSearchValue, _ref7.cn("SSearchValue", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref3))));
+};
+var SearchClear = function SearchClear(props) {
+  var _ref4 = arguments[0],
+    _ref8;
+  var SSearchClear = _input["default"].Addon;
+  var styles = props.styles,
+    Children = props.Children;
+  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSearchClear, _ref8.cn("SSearchClear", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    "tag": _m2["default"]
+  }, _ref4))), /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {})));
+};
+var InputSearch = (0, _core["default"])(InputSearchRoot, {
+  SearchIcon: SearchIcon,
+  Value: SearchValue,
+  Clear: SearchClear
+});
+var _default = InputSearch;
 exports["default"] = _default;
 //# sourceMappingURL=InputSearch.js.map

package/lib/cjs/InputSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSearch.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_m","_m2","_input","_context","_i18nEnhance","_intergalacticDynamicLocales","style","sstyled","insert","sizeToIcon","m","SearchM","CloseM","l","InputSearch","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","React","createRef","e","handlers","value","setTimeout","document","activeElement","body","closeIconRef","current","_this$inputRef$curren","inputRef","focus","_createClass2","key","uncontrolledProps","render","_ref","asProps","_ref2","Value","Input","SInputSearch","SClose","Addon","_this$asProps","size","styles","getI18nText","finalSize","context","hideClose","IconClose","IconSearch","createElement","cn","_objectSpread2","assignProps","handleClear","Component","i18nEnhance","localizedMessages","defaultValue","i18n","locale","selectContext","_default","createComponent","exports"],"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\nconst sizeToIcon = {\n  m: [SearchM, CloseM],\n  l: [SearchM, CloseM],\n};\n\nclass InputSearch 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  render() {\n    const Value = Root;\n    const SInputSearch = Input;\n    const SClose = Input.Addon;\n    const { size, value, styles, getI18nText } = this.asProps;\n    const finalSize = size || this.context.size || 'm';\n    const hideClose = !value;\n    const IconClose = sizeToIcon[finalSize][1];\n    const IconSearch = sizeToIcon[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 ref={this.inputRef} />\n        <SClose\n          role='button'\n          tag={IconClose}\n          ref={this.closeIconRef}\n          /* hide through css because the width of the input changes */\n          hide={hideClose}\n          aria-hidden={hideClose}\n          interactive\n          aria-label={getI18nText('clearSearch')}\n          onClick={this.handleClear}\n        />\n      </SInputSearch>,\n    );\n  }\n}\n\nexport default createComponent(InputSearch);\n"],"mappings":"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"}
+{"version":3,"file":"InputSearch.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_m","_m2","_input","_context","_i18nEnhance","_intergalacticDynamicLocales","style","sstyled","insert","InputSearchRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","React","createRef","e","handlers","value","setTimeout","document","activeElement","body","closeIconRef","current","_this$inputRef$curren","inputRef","focus","_createClass2","key","uncontrolledProps","getValueProps","asProps","onChange","autoFocus","ref","getClearProps","_this$asProps","getI18nText","role","hide","interactive","onClick","handleClear","render","_ref","_ref5","Value","InputSearch","SInputSearch","Input","_this$asProps2","size","styles","hasChildren","children","Children","createElement","cn","context","Fragment","SearchIcon","_objectSpread2","assignProps","Clear","Component","i18nEnhance","localizedMessages","defaultValue","i18n","locale","selectContext","props","_ref2","arguments[0]","_ref6","SSearchIcon","Addon","SearchValue","_ref3","_ref7","SSearchValue","SearchClear","_ref4","_ref8","SSearchClear","CloseM","createComponent","_default","exports"],"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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"}

package/lib/cjs/Select.js

@@ -36,13 +36,13 @@ var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynam
 var _useFocusLock = require("@semcore/utils/lib/use/useFocusLock");
 var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
 /*__reshadow-styles__:"./style/select.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_tfkfe_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_tfkfe_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_tfkfe_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;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_tfkfe_gg_._size_l_tfkfe_gg_{width:20px;height:20px}.___SOptionCheckbox_tfkfe_gg_._size_l_tfkfe_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_tfkfe_gg_.__checked_tfkfe_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_tfkfe_gg_.__theme_tfkfe_gg_:before{border-color:var(--theme_tfkfe)}.___SOptionCheckbox_tfkfe_gg_.__theme_tfkfe_gg_.__checked_tfkfe_gg_:before{background-color:var(--theme_tfkfe);border-color:var(--theme_tfkfe)}.___SOptionCheckbox_tfkfe_gg_.__selected_tfkfe_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_tfkfe_gg_.__selected_tfkfe_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "tfkfe_gg_") /*__reshadow_css_end__*/, {
-  "__SOptionCheckbox": "___SOptionCheckbox_tfkfe_gg_",
-  "_size_l": "_size_l_tfkfe_gg_",
-  "_checked": "__checked_tfkfe_gg_",
-  "_theme": "__theme_tfkfe_gg_",
-  "--theme": "--theme_tfkfe",
-  "_selected": "__selected_tfkfe_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_5aq5m_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_5aq5m_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_5aq5m_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;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_5aq5m_gg_._size_l_5aq5m_gg_{width:20px;height:20px}.___SOptionCheckbox_5aq5m_gg_._size_l_5aq5m_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_5aq5m_gg_.__checked_5aq5m_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_5aq5m_gg_.__theme_5aq5m_gg_:before{border-color:var(--theme_5aq5m)}.___SOptionCheckbox_5aq5m_gg_.__theme_5aq5m_gg_.__checked_5aq5m_gg_:before{background-color:var(--theme_5aq5m);border-color:var(--theme_5aq5m)}.___SOptionCheckbox_5aq5m_gg_.__selected_5aq5m_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_5aq5m_gg_.__selected_5aq5m_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "5aq5m_gg_") /*__reshadow_css_end__*/, {
+  "__SOptionCheckbox": "___SOptionCheckbox_5aq5m_gg_",
+  "_size_l": "_size_l_5aq5m_gg_",
+  "_checked": "__checked_5aq5m_gg_",
+  "_theme": "__theme_5aq5m_gg_",
+  "--theme": "--theme_5aq5m",
+  "_selected": "__selected_5aq5m_gg_"
 });
 function isSelectedOption(value, valueOption) {
   return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;

package/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 { 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     * Input name\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 = SelectOptionProps & {\n  /** Checkbox theme */\n  theme?: string;\n};\n\ndeclare const InputSearch: Intergalactic.Component<'div', SelectInputSearch>;\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 = (<\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) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div'>;\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', BoxProps & { theme?: string; selected?: boolean }>;\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":""}
+{"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     * Input name\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 = SelectOptionProps & {\n  /** Checkbox theme */\n  theme?: string;\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 = (<\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) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div'>;\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', BoxProps & { theme?: string; selected?: boolean }>;\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/cjs/style/input-search.shadow.css

@@ -2,7 +2,7 @@ SInputSearch[size='m'] {
   height: 32px;
 }
 
-SClose[hide] {
+SSearchClear[hide] {
   visibility: hidden;
 }
 
@@ -11,6 +11,5 @@ SOutline {
   top: -1px;
   left: -1px;
   width: 100%;
-  border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)
-    0 0;
-}
+  border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px) 0 0;
+}

package/lib/es6/InputSearch.js

@@ -6,6 +6,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps4 } from "@semcore/core";
+import { assignProps as _assignProps3 } from "@semcore/core";
+import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
 import React from 'react';
 import createComponent, { Component, sstyled, Root } from '@semcore/core';
@@ -16,23 +19,19 @@ import { selectContext } from './context';
 import i18nEnhance from '@semcore/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_1u5uf_gg_._size_m_1u5uf_gg_{height:32px}.___SClose_1u5uf_gg_.__hide_1u5uf_gg_{visibility:hidden}.___SOutline_1u5uf_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "1u5uf_gg_") /*__reshadow_css_end__*/, {
-  "__SInputSearch": "___SInputSearch_1u5uf_gg_",
-  "_size_m": "_size_m_1u5uf_gg_",
-  "__SClose": "___SClose_1u5uf_gg_",
-  "_hide": "__hide_1u5uf_gg_",
-  "__SOutline": "___SOutline_1u5uf_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SInputSearch_1s16h_gg_._size_m_1s16h_gg_{height:32px}.___SSearchClear_1s16h_gg_.__hide_1s16h_gg_{visibility:hidden}.___SOutline_1s16h_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "1s16h_gg_") /*__reshadow_css_end__*/, {
+  "__SInputSearch": "___SInputSearch_1s16h_gg_",
+  "_size_m": "_size_m_1s16h_gg_",
+  "__SSearchClear": "___SSearchClear_1s16h_gg_",
+  "_hide": "__hide_1s16h_gg_",
+  "__SOutline": "___SOutline_1s16h_gg_"
 });
-var sizeToIcon = {
-  m: [SearchM, CloseM],
-  l: [SearchM, CloseM]
-};
-var InputSearch = /*#__PURE__*/function (_Component) {
-  _inherits(InputSearch, _Component);
-  var _super = _createSuper(InputSearch);
-  function InputSearch() {
+var InputSearchRoot = /*#__PURE__*/function (_Component) {
+  _inherits(InputSearchRoot, _Component);
+  var _super = _createSuper(InputSearchRoot);
+  function InputSearchRoot() {
     var _this;
-    _classCallCheck(this, InputSearch);
+    _classCallCheck(this, InputSearchRoot);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -50,58 +49,98 @@ var InputSearch = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _createClass(InputSearch, [{
+  _createClass(InputSearchRoot, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
         value: null
       };
     }
+  }, {
+    key: "getValueProps",
+    value: function getValueProps() {
+      var value = this.asProps.value;
+      return {
+        value: value,
+        onChange: this.handlers.value,
+        autoFocus: true,
+        ref: this.inputRef
+      };
+    }
+  }, {
+    key: "getClearProps",
+    value: function getClearProps() {
+      var _this$asProps = this.asProps,
+        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
+      };
+    }
   }, {
     key: "render",
     value: function render() {
       var _ref = this.asProps,
-        _ref2;
-      var Value = Input.Value;
+        _ref5;
+      var Value = InputSearch.Value;
       var SInputSearch = Input;
-      var SClose = Input.Addon;
-      var _this$asProps = this.asProps,
-        size = _this$asProps.size,
-        value = _this$asProps.value,
-        styles = _this$asProps.styles,
-        getI18nText = _this$asProps.getI18nText;
-      var finalSize = size || this.context.size || 'm';
-      var hideClose = !value;
-      var IconClose = sizeToIcon[finalSize][1];
-      var IconSearch = sizeToIcon[finalSize][0];
-      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SInputSearch, _ref2.cn("SInputSearch", {
-        "size": finalSize,
+      var _this$asProps2 = this.asProps,
+        size = _this$asProps2.size,
+        styles = _this$asProps2.styles,
+        hasChildren = _this$asProps2.children,
+        Children = _this$asProps2.Children;
+      return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SInputSearch, _ref5.cn("SInputSearch", {
+        "size": size || this.context.size || 'm',
         "styles": styles
-      }), /*#__PURE__*/React.createElement(Input.Addon, null, /*#__PURE__*/React.createElement(IconSearch, _ref2.cn("IconSearch", {}))), /*#__PURE__*/React.createElement(Value, _ref2.cn("Value", _objectSpread({}, _assignProps({
-        "autoFocus": true,
-        "ref": this.inputRef
-      }, _ref)))), /*#__PURE__*/React.createElement(SClose, _ref2.cn("SClose", {
-        "role": 'button',
-        "tag": IconClose,
-        "ref": this.closeIconRef,
-        "hide": hideClose,
-        "aria-hidden": hideClose,
-        "interactive": true,
-        "aria-label": getI18nText('clearSearch'),
-        "onClick": this.handleClear
-      })));
+      }), 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 InputSearch;
+  return InputSearchRoot;
 }(Component);
-_defineProperty(InputSearch, "displayName", 'InputSearch');
-_defineProperty(InputSearch, "style", style);
-_defineProperty(InputSearch, "enhance", [i18nEnhance(localizedMessages)]);
-_defineProperty(InputSearch, "defaultProps", {
+_defineProperty(InputSearchRoot, "displayName", 'InputSearch');
+_defineProperty(InputSearchRoot, "style", style);
+_defineProperty(InputSearchRoot, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(InputSearchRoot, "defaultProps", {
   defaultValue: '',
   i18n: localizedMessages,
   locale: 'en'
 });
-_defineProperty(InputSearch, "contextType", selectContext);
-export default createComponent(InputSearch);
+_defineProperty(InputSearchRoot, "contextType", selectContext);
+var SearchIcon = function SearchIcon(props) {
+  var _ref2 = arguments[0],
+    _ref6;
+  var SSearchIcon = Input.Addon;
+  var styles = props.styles;
+  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SSearchIcon, _ref6.cn("SSearchIcon", _objectSpread({}, _assignProps2({}, _ref2))), /*#__PURE__*/React.createElement(SearchM, _ref6.cn("SearchM", {})));
+};
+var SearchValue = function SearchValue(props) {
+  var _ref3 = arguments[0],
+    _ref7;
+  var SSearchValue = Input.Value;
+  var styles = props.styles;
+  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SSearchValue, _ref7.cn("SSearchValue", _objectSpread({}, _assignProps3({}, _ref3))));
+};
+var SearchClear = function SearchClear(props) {
+  var _ref4 = arguments[0],
+    _ref8;
+  var SSearchClear = Input.Addon;
+  var styles = props.styles,
+    Children = props.Children;
+  return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SSearchClear, _ref8.cn("SSearchClear", _objectSpread({}, _assignProps4({
+    "tag": CloseM
+  }, _ref4))), /*#__PURE__*/React.createElement(Children, _ref8.cn("Children", {})));
+};
+var InputSearch = createComponent(InputSearchRoot, {
+  SearchIcon: SearchIcon,
+  Value: SearchValue,
+  Clear: SearchClear
+});
+export default InputSearch;
 //# sourceMappingURL=InputSearch.js.map

package/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","sizeToIcon","m","l","InputSearch","_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","render","_ref","asProps","_ref2","Value","SInputSearch","SClose","Addon","_this$asProps","size","styles","getI18nText","finalSize","context","hideClose","IconClose","IconSearch","createElement","cn","_objectSpread","_assignProps","handleClear","defaultValue","i18n","locale"],"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\nconst sizeToIcon = {\n  m: [SearchM, CloseM],\n  l: [SearchM, CloseM],\n};\n\nclass InputSearch 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  render() {\n    const Value = Root;\n    const SInputSearch = Input;\n    const SClose = Input.Addon;\n    const { size, value, styles, getI18nText } = this.asProps;\n    const finalSize = size || this.context.size || 'm';\n    const hideClose = !value;\n    const IconClose = sizeToIcon[finalSize][1];\n    const IconSearch = sizeToIcon[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 ref={this.inputRef} />\n        <SClose\n          role='button'\n          tag={IconClose}\n          ref={this.closeIconRef}\n          /* hide through css because the width of the input changes */\n          hide={hideClose}\n          aria-hidden={hideClose}\n          interactive\n          aria-label={getI18nText('clearSearch')}\n          onClick={this.handleClear}\n        />\n      </SInputSearch>,\n    );\n  }\n}\n\nexport default createComponent(InputSearch);\n"],"mappings":"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"}
+{"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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"}

package/lib/es6/Select.js

@@ -33,13 +33,13 @@ import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 import { setFocus } from '@semcore/utils/lib/use/useFocusLock';
 /*__reshadow-styles__:"./style/select.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_tfkfe_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_tfkfe_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_tfkfe_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;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_tfkfe_gg_._size_l_tfkfe_gg_{width:20px;height:20px}.___SOptionCheckbox_tfkfe_gg_._size_l_tfkfe_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_tfkfe_gg_.__checked_tfkfe_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_tfkfe_gg_.__theme_tfkfe_gg_:before{border-color:var(--theme_tfkfe)}.___SOptionCheckbox_tfkfe_gg_.__theme_tfkfe_gg_.__checked_tfkfe_gg_:before{background-color:var(--theme_tfkfe);border-color:var(--theme_tfkfe)}.___SOptionCheckbox_tfkfe_gg_.__selected_tfkfe_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_tfkfe_gg_.__selected_tfkfe_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "tfkfe_gg_") /*__reshadow_css_end__*/, {
-  "__SOptionCheckbox": "___SOptionCheckbox_tfkfe_gg_",
-  "_size_l": "_size_l_tfkfe_gg_",
-  "_checked": "__checked_tfkfe_gg_",
-  "_theme": "__theme_tfkfe_gg_",
-  "--theme": "--theme_tfkfe",
-  "_selected": "__selected_tfkfe_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_5aq5m_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_5aq5m_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_5aq5m_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;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_5aq5m_gg_._size_l_5aq5m_gg_{width:20px;height:20px}.___SOptionCheckbox_5aq5m_gg_._size_l_5aq5m_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_5aq5m_gg_.__checked_5aq5m_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_5aq5m_gg_.__theme_5aq5m_gg_:before{border-color:var(--theme_5aq5m)}.___SOptionCheckbox_5aq5m_gg_.__theme_5aq5m_gg_.__checked_5aq5m_gg_:before{background-color:var(--theme_5aq5m);border-color:var(--theme_5aq5m)}.___SOptionCheckbox_5aq5m_gg_.__selected_5aq5m_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_5aq5m_gg_.__selected_5aq5m_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "5aq5m_gg_") /*__reshadow_css_end__*/, {
+  "__SOptionCheckbox": "___SOptionCheckbox_5aq5m_gg_",
+  "_size_l": "_size_l_5aq5m_gg_",
+  "_checked": "__checked_5aq5m_gg_",
+  "_theme": "__theme_5aq5m_gg_",
+  "--theme": "--theme_5aq5m",
+  "_selected": "__selected_5aq5m_gg_"
 });
 function isSelectedOption(value, valueOption) {
   return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;

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 { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport { 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     * Input name\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 = SelectOptionProps & {\n  /** Checkbox theme */\n  theme?: string;\n};\n\ndeclare const InputSearch: Intergalactic.Component<'div', SelectInputSearch>;\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 = (<\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) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div'>;\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', BoxProps & { theme?: string; selected?: boolean }>;\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":""}
+{"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     * Input name\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 = SelectOptionProps & {\n  /** Checkbox theme */\n  theme?: string;\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 = (<\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) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div'>;\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', BoxProps & { theme?: string; selected?: boolean }>;\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/style/input-search.shadow.css

@@ -2,7 +2,7 @@ SInputSearch[size='m'] {
   height: 32px;
 }
 
-SClose[hide] {
+SSearchClear[hide] {
   visibility: hidden;
 }
 
@@ -11,6 +11,5 @@ SOutline {
   top: -1px;
   left: -1px;
   width: 100%;
-  border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)
-    0 0;
-}
+  border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px) 0 0;
+}

package/lib/types/index.d.ts

@@ -9,7 +9,7 @@ import DropdownMenu, {
 } from '@semcore/dropdown-menu';
 import { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';
 import Divider from '@semcore/divider';
-import { InputValueProps } from '@semcore/input';
+import Input, { InputValueProps } from '@semcore/input';
 import { BoxProps } from '@semcore/flex-box';
 
 /** @deprecated */
@@ -95,7 +95,11 @@ export type SelectOptionCheckboxProps = SelectOptionProps & {
   theme?: string;
 };
 
-declare const InputSearch: Intergalactic.Component<'div', SelectInputSearch>;
+declare const InputSearch: Intergalactic.Component<'div', SelectInputSearch> & {
+  SearchIcon: typeof Input.Addon;
+  Value: typeof Input.Value;
+  Clear: typeof Input.Addon;
+};
 
 /** @deprecated */
 export interface ISelectContext extends SelectContext, UnknownProperties {}

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@semcore/select",
   "description": "Semrush Select Component",
-  "version": "4.9.1-prerelease.0",
+  "version": "4.10.0-prerelease.0",
   "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",
   "dependencies": {
-    "@semcore/base-trigger": "4.7.1-prerelease.0",
-    "@semcore/checkbox": "7.6.1-prerelease.0",
-    "@semcore/divider": "4.6.1-prerelease.0",
-    "@semcore/dropdown-menu": "4.8.1-prerelease.0",
-    "@semcore/flex-box": "5.6.1-prerelease.0",
-    "@semcore/icon": "4.7.1-prerelease.0",
-    "@semcore/input": "4.8.1-prerelease.0",
-    "@semcore/utils": "4.6.1-prerelease.0",
+    "@semcore/base-trigger": "4.8.0-prerelease.0",
+    "@semcore/checkbox": "7.7.0-prerelease.0",
+    "@semcore/divider": "4.6.1",
+    "@semcore/dropdown-menu": "4.8.1",
+    "@semcore/flex-box": "5.6.1",
+    "@semcore/icon": "4.8.0-prerelease.0",
+    "@semcore/input": "4.8.1",
+    "@semcore/utils": "4.6.1",
     "classnames": "2.2.6"
   },
   "peerDependencies": {