@semcore/select 3.0.13 → 3.0.14

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.0.14] - 2022-07-21
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/base-trigger` [3.0.8 ~> 3.0.9], `@semcore/icon` [2.28.0 ~> 2.29.0]).
+
 ## [3.0.13] - 2022-07-18
 
 ### Changed

package/lib/cjs/InputSearch.js

@@ -52,16 +52,16 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SInputSearch_11t3y_gg_._size_m_11t3y_gg_{height:32px}.___SClose_11t3y_gg_.__hide_11t3y_gg_{visibility:hidden}.___SOutline_11t3y_gg_{top:-1px;left:-1px;width:100%;border-radius:6px 6px 0 0}"
+".___SInputSearch_kmm9u_gg_._size_m_kmm9u_gg_{height:32px}.___SClose_kmm9u_gg_.__hide_kmm9u_gg_{visibility:hidden}.___SOutline_kmm9u_gg_{top:-1px;left:-1px;width:100%;border-radius:6px 6px 0 0}"
 /*__inner_css_end__*/
-, "11t3y_gg_")
+, "kmm9u_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SInputSearch": "___SInputSearch_11t3y_gg_",
-  "_size_m": "_size_m_11t3y_gg_",
-  "__SClose": "___SClose_11t3y_gg_",
-  "_hide": "__hide_11t3y_gg_",
-  "__SOutline": "___SOutline_11t3y_gg_"
+  "__SInputSearch": "___SInputSearch_kmm9u_gg_",
+  "_size_m": "_size_m_kmm9u_gg_",
+  "__SClose": "___SClose_kmm9u_gg_",
+  "_hide": "__hide_kmm9u_gg_",
+  "__SOutline": "___SOutline_kmm9u_gg_"
 });
 var MAP_SIZE_TO_ICON = {
   m: [_m["default"], _m2["default"]],

package/lib/cjs/Select.js

@@ -74,17 +74,17 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SOptionCheckbox_atmko_gg_{margin-top:2px;margin-right:8px;margin-bottom:auto;position:relative;flex-shrink:0}.___SOptionCheckbox_atmko_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_atmko_gg_{width:16px;height:16px}.___SOptionCheckbox_atmko_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_atmko_gg_._size_l_atmko_gg_{width:20px;height:20px}.___SOptionCheckbox_atmko_gg_._size_l_atmko_gg_:after{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMS41TDQuNzUgNy43NSAxIDQiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_atmko_gg_.__checked_atmko_gg_:before{background-color:#008ff8;border-color:#008ff8}.___SOptionCheckbox_atmko_gg_.__theme_atmko_gg_:before{border-color:var(--theme_atmko)}.___SOptionCheckbox_atmko_gg_.__theme_atmko_gg_.__checked_atmko_gg_:before{background-color:var(--theme_atmko);border-color:var(--theme_atmko)}.___SOptionCheckbox_atmko_gg_.__selected_atmko_gg_{background-color:rgba(196,229,254,.7)}.___SOptionCheckbox_atmko_gg_.__selected_atmko_gg_:hover{background-color:rgba(196,229,254,.7)}"
+".___SOptionCheckbox_kwu0e_gg_{margin-top:2px;margin-right:8px;margin-bottom:auto;position:relative;flex-shrink:0}.___SOptionCheckbox_kwu0e_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_kwu0e_gg_{width:16px;height:16px}.___SOptionCheckbox_kwu0e_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_kwu0e_gg_._size_l_kwu0e_gg_{width:20px;height:20px}.___SOptionCheckbox_kwu0e_gg_._size_l_kwu0e_gg_:after{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMS41TDQuNzUgNy43NSAxIDQiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_kwu0e_gg_.__checked_kwu0e_gg_:before{background-color:#008ff8;border-color:#008ff8}.___SOptionCheckbox_kwu0e_gg_.__theme_kwu0e_gg_:before{border-color:var(--theme_kwu0e)}.___SOptionCheckbox_kwu0e_gg_.__theme_kwu0e_gg_.__checked_kwu0e_gg_:before{background-color:var(--theme_kwu0e);border-color:var(--theme_kwu0e)}.___SOptionCheckbox_kwu0e_gg_.__selected_kwu0e_gg_{background-color:rgba(196,229,254,.7)}.___SOptionCheckbox_kwu0e_gg_.__selected_kwu0e_gg_:hover{background-color:rgba(196,229,254,.7)}"
 /*__inner_css_end__*/
-, "atmko_gg_")
+, "kwu0e_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SOptionCheckbox": "___SOptionCheckbox_atmko_gg_",
-  "_size_l": "_size_l_atmko_gg_",
-  "_checked": "__checked_atmko_gg_",
-  "_theme": "__theme_atmko_gg_",
-  "--theme": "--theme_atmko",
-  "_selected": "__selected_atmko_gg_"
+  "__SOptionCheckbox": "___SOptionCheckbox_kwu0e_gg_",
+  "_size_l": "_size_l_kwu0e_gg_",
+  "_checked": "__checked_kwu0e_gg_",
+  "_theme": "__theme_kwu0e_gg_",
+  "--theme": "--theme_kwu0e",
+  "_selected": "__selected_kwu0e_gg_"
 });
 
 function isSelectedOption(value, valueOption) {

package/lib/es6/InputSearch.js

@@ -28,16 +28,16 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SInputSearch_11t3y_gg_._size_m_11t3y_gg_{height:32px}.___SClose_11t3y_gg_.__hide_11t3y_gg_{visibility:hidden}.___SOutline_11t3y_gg_{top:-1px;left:-1px;width:100%;border-radius:6px 6px 0 0}"
+".___SInputSearch_kmm9u_gg_._size_m_kmm9u_gg_{height:32px}.___SClose_kmm9u_gg_.__hide_kmm9u_gg_{visibility:hidden}.___SOutline_kmm9u_gg_{top:-1px;left:-1px;width:100%;border-radius:6px 6px 0 0}"
 /*__inner_css_end__*/
-, "11t3y_gg_")
+, "kmm9u_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SInputSearch": "___SInputSearch_11t3y_gg_",
-  "_size_m": "_size_m_11t3y_gg_",
-  "__SClose": "___SClose_11t3y_gg_",
-  "_hide": "__hide_11t3y_gg_",
-  "__SOutline": "___SOutline_11t3y_gg_"
+  "__SInputSearch": "___SInputSearch_kmm9u_gg_",
+  "_size_m": "_size_m_kmm9u_gg_",
+  "__SClose": "___SClose_kmm9u_gg_",
+  "_hide": "__hide_kmm9u_gg_",
+  "__SOutline": "___SOutline_kmm9u_gg_"
 });
 var MAP_SIZE_TO_ICON = {
   m: [SearchM, CloseM],

package/lib/es6/Select.js

@@ -42,17 +42,17 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SOptionCheckbox_atmko_gg_{margin-top:2px;margin-right:8px;margin-bottom:auto;position:relative;flex-shrink:0}.___SOptionCheckbox_atmko_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_atmko_gg_{width:16px;height:16px}.___SOptionCheckbox_atmko_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_atmko_gg_._size_l_atmko_gg_{width:20px;height:20px}.___SOptionCheckbox_atmko_gg_._size_l_atmko_gg_:after{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMS41TDQuNzUgNy43NSAxIDQiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_atmko_gg_.__checked_atmko_gg_:before{background-color:#008ff8;border-color:#008ff8}.___SOptionCheckbox_atmko_gg_.__theme_atmko_gg_:before{border-color:var(--theme_atmko)}.___SOptionCheckbox_atmko_gg_.__theme_atmko_gg_.__checked_atmko_gg_:before{background-color:var(--theme_atmko);border-color:var(--theme_atmko)}.___SOptionCheckbox_atmko_gg_.__selected_atmko_gg_{background-color:rgba(196,229,254,.7)}.___SOptionCheckbox_atmko_gg_.__selected_atmko_gg_:hover{background-color:rgba(196,229,254,.7)}"
+".___SOptionCheckbox_kwu0e_gg_{margin-top:2px;margin-right:8px;margin-bottom:auto;position:relative;flex-shrink:0}.___SOptionCheckbox_kwu0e_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_kwu0e_gg_{width:16px;height:16px}.___SOptionCheckbox_kwu0e_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_kwu0e_gg_._size_l_kwu0e_gg_{width:20px;height:20px}.___SOptionCheckbox_kwu0e_gg_._size_l_kwu0e_gg_:after{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMS41TDQuNzUgNy43NSAxIDQiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=\")}.___SOptionCheckbox_kwu0e_gg_.__checked_kwu0e_gg_:before{background-color:#008ff8;border-color:#008ff8}.___SOptionCheckbox_kwu0e_gg_.__theme_kwu0e_gg_:before{border-color:var(--theme_kwu0e)}.___SOptionCheckbox_kwu0e_gg_.__theme_kwu0e_gg_.__checked_kwu0e_gg_:before{background-color:var(--theme_kwu0e);border-color:var(--theme_kwu0e)}.___SOptionCheckbox_kwu0e_gg_.__selected_kwu0e_gg_{background-color:rgba(196,229,254,.7)}.___SOptionCheckbox_kwu0e_gg_.__selected_kwu0e_gg_:hover{background-color:rgba(196,229,254,.7)}"
 /*__inner_css_end__*/
-, "atmko_gg_")
+, "kwu0e_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SOptionCheckbox": "___SOptionCheckbox_atmko_gg_",
-  "_size_l": "_size_l_atmko_gg_",
-  "_checked": "__checked_atmko_gg_",
-  "_theme": "__theme_atmko_gg_",
-  "--theme": "--theme_atmko",
-  "_selected": "__selected_atmko_gg_"
+  "__SOptionCheckbox": "___SOptionCheckbox_kwu0e_gg_",
+  "_size_l": "_size_l_kwu0e_gg_",
+  "_checked": "__checked_kwu0e_gg_",
+  "_theme": "__theme_kwu0e_gg_",
+  "--theme": "--theme_kwu0e",
+  "_selected": "__selected_kwu0e_gg_"
 });
 
 function isSelectedOption(value, valueOption) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/select",
   "description": "SEMRush Select Component",
-  "version": "3.0.13",
+  "version": "3.0.14",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",

package/src/InputSearch.jsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
-import SearchM from '@semcore/icon/Search/m';
-import CloseM from '@semcore/icon/Close/m';
-import Input from '@semcore/input';
-import { selectContext } from './context';
-
-import style from './style/input-search.shadow.css';
-
-const MAP_SIZE_TO_ICON = {
-  m: [SearchM, CloseM],
-  l: [SearchM, CloseM],
-};
-
-class InputSearch extends Component {
-  static displayName = 'InputSearch';
-
-  static style = style;
-
-  static defaultProps = {
-    defaultValue: '',
-  };
-
-  static contextType = selectContext;
-
-  uncontrolledProps() {
-    return {
-      value: null,
-    };
-  }
-
-  handleClear = (e) => {
-    this.handlers.value('', e);
-  };
-
-  render() {
-    const Value = Root;
-    const SInputSearch = Input;
-    const SClose = Input.Addon;
-    const { size, value, styles } = this.asProps;
-    const finalSize = size || this.context.size;
-    const hideClose = !value;
-    const IconClose = MAP_SIZE_TO_ICON[finalSize][1];
-    const IconSearch = MAP_SIZE_TO_ICON[finalSize][0];
-
-    return sstyled(styles)(
-      <SInputSearch size={finalSize} styles={styles}>
-        <Input.Addon>
-          <IconSearch />
-        </Input.Addon>
-        <Value render={Input.Value} autoFocus />
-        <SClose
-          role="button"
-          /* hide through css because the width of the input changes */
-          hide={hideClose}
-          aria-hidden={hideClose}
-          interactive
-          onClick={this.handleClear}
-        >
-          <IconClose />
-        </SClose>
-      </SInputSearch>,
-    );
-  }
-}
-
-export default createComponent(InputSearch);

package/src/Select.jsx

@@ -1,291 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import DropdownMenu from '@semcore/dropdown-menu';
-import { ButtonTrigger } from '@semcore/base-trigger';
-import Divider from '@semcore/divider';
-import findComponent from '@semcore/utils/lib/findComponent';
-import logger from '@semcore/utils/lib/logger';
-import resolveColor from '@semcore/utils/lib/color';
-import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
-import InputSearch from './InputSearch';
-import { useBox } from '@semcore/flex-box';
-import { selectContext } from './context';
-
-import style from './style/select.shadow.css';
-
-function isSelectedOption(value, valueOption) {
-  return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
-}
-
-function isEmptyValue(value) {
-  return Array.isArray(value) ? value.length === 0 : value === null;
-}
-
-function getEmptyValue(multiselect) {
-  return multiselect ? [] : null;
-}
-
-class RootSelect extends Component {
-  static displayName = 'Select';
-
-  static style = style;
-
-  static defaultProps = (props) => ({
-    placeholder: props.multiselect ? 'Select options' : 'Select option',
-    size: 'm',
-    defaultValue: getEmptyValue(props.multiselect),
-    defaultVisible: false,
-  });
-
-  firstSelectedOptionRef = React.createRef();
-
-  isScrolledToFirstOption = false;
-
-  uncontrolledProps() {
-    return {
-      visible: null,
-      value: null,
-    };
-  }
-
-  getTriggerProps() {
-    const {
-      size,
-      disabled,
-      visible,
-      state,
-      placeholder,
-      value,
-      options,
-      forwardRef,
-      name,
-      multiselect,
-    } = this.asProps;
-
-    return {
-      empty: isEmptyValue(value),
-      size,
-      value,
-      name,
-      $hiddenRef: forwardRef,
-      multiselect,
-      state,
-      placeholder,
-      disabled,
-      active: visible,
-      onClear: this.handlerClear,
-      children: this.renderChildrenTrigger(value, options),
-    };
-  }
-
-  getOptionProps(props) {
-    const { value } = this.asProps;
-    const selected = isSelectedOption(value, props.value);
-    const other = {};
-    this._optionSelected = selected;
-
-    if (selected && !this.isScrolledToFirstOption) {
-      other.ref = this.firstSelectedOptionRef;
-      this.isScrolledToFirstOption = true;
-    }
-
-    return {
-      selected,
-      onClick: this.bindHandlerOptionClick(props.value),
-      ...other,
-    };
-  }
-
-  getOptionCheckboxProps(props) {
-    const { size } = this.asProps;
-    const hasOption = props.value === undefined;
-    const optionProps = hasOption ? {} : this.getOptionProps(props);
-    const selected = this._optionSelected;
-    this._optionSelected = null;
-    return {
-      ...optionProps,
-      size,
-      selected,
-    };
-  }
-
-  getDividerProps() {
-    return { my: 1 };
-  }
-
-  renderChildrenTrigger(value, options) {
-    if (options) {
-      return [].concat(value).reduce((acc, value) => {
-        const selectedOption = options.find((o) => isSelectedOption(value, o.value));
-        if (!selectedOption) return acc;
-        if (acc.length) acc.push(', ');
-        acc.push(selectedOption.label || selectedOption.value);
-        return acc;
-      }, []);
-    }
-    return Array.isArray(value)
-      ? value.reduce((acc, value) => {
-          if (acc.length) acc.push(', ');
-          acc.push(value);
-          return acc;
-        }, [])
-      : value;
-  }
-
-  bindHandlerOptionClick = (optionValue) => (e) => {
-    let newValue = optionValue;
-    const { value, multiselect } = this.asProps;
-    if (Array.isArray(value)) {
-      if (value.includes(optionValue)) {
-        newValue = value.filter((v) => v !== optionValue);
-      } else {
-        newValue = value.concat(optionValue);
-      }
-    }
-    this.handlers.value(newValue, e);
-    if (!multiselect) this.handlers.visible(false);
-  };
-
-  handlerClear = (e) => {
-    const { value } = this.asProps;
-    const emptyValue = getEmptyValue(Array.isArray(value));
-    this.handlers.value(emptyValue, e);
-    this.handlers.visible(false);
-  };
-
-  scrollToSelectedOption() {
-    setTimeout(() => {
-      this.firstSelectedOptionRef.current?.scrollIntoView({
-        block: 'nearest',
-        inline: 'nearest',
-      });
-    }, 0);
-  }
-
-  componentDidMount() {
-    const { visible } = this.asProps;
-    if (visible) {
-      this.scrollToSelectedOption();
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { visible } = this.asProps;
-    if (visible) {
-      this.isScrolledToFirstOption = false;
-
-      if (prevProps.visible === undefined) {
-        if (prevState.visible !== visible) this.scrollToSelectedOption();
-      } else {
-        if (prevProps.visible !== visible) this.scrollToSelectedOption();
-      }
-    }
-  }
-
-  render() {
-    const { Children, options, multiselect, ...other } = this.asProps;
-    const advanceMode = findComponent(Children, [
-      Select.Trigger.displayName,
-      Select.Popper.displayName,
-    ]);
-
-    logger.warn(
-      options && advanceMode,
-      "Don't use at the same time 'options' property and '<Select.Trigger/>/<Select.Popper/>'",
-      other['data-ui-name'] || Select.displayName,
-    );
-
-    if (options) {
-      return (
-        <Root render={DropdownMenu}>
-          <Select.Trigger {...other} />
-          <Select.Menu>
-            {options.map((option, i) => {
-              return (
-                <Select.Option key={i} {...option}>
-                  {multiselect && <Select.Option.Checkbox />}
-                  {option.children}
-                </Select.Option>
-              );
-            })}
-          </Select.Menu>
-        </Root>
-      );
-    }
-
-    return (
-      <Root render={DropdownMenu}>
-        <Children />
-      </Root>
-    );
-  }
-}
-
-function Trigger({ Children, name, value, $hiddenRef, tag: Tag = ButtonTrigger }) {
-  return (
-    <Root render={DropdownMenu.Trigger} tag={Tag} placeholder="Select option">
-      {addonTextChildren(
-        Children,
-        Tag.Text || ButtonTrigger.Text,
-        Tag.Addon || ButtonTrigger.Addon,
-      )}
-      {name && <input type="hidden" defaultValue={value} name={name} ref={$hiddenRef} />}
-    </Root>
-  );
-}
-
-function Checkbox(props) {
-  const [SOptionCheckbox, componentProps] = useBox(props, props.forwardRef);
-  const { size, theme, selected } = props;
-  const styles = sstyled(props.styles);
-
-  const { className, style } = styles.cn('SOptionCheckbox', {
-    size,
-    'use:theme': resolveColor(theme),
-    checked: selected,
-  });
-
-  return (
-    <SOptionCheckbox
-      {...componentProps}
-      className={cn(className, componentProps.className) || undefined}
-      style={{ ...style, ...componentProps.style }}
-    />
-  );
-}
-
-const InputSearchWrapper = function () {
-  return <Root render={InputSearch} />;
-};
-
-const Select = createComponent(
-  RootSelect,
-  {
-    Trigger: [
-      Trigger,
-      {
-        Addon: ButtonTrigger.Addon,
-        Text: ButtonTrigger.Text,
-      },
-    ],
-    Popper: DropdownMenu.Popper,
-    List: DropdownMenu.List,
-    Menu: DropdownMenu.Menu,
-    Option: [
-      DropdownMenu.Item,
-      {
-        Addon: DropdownMenu.Item.Addon,
-        Checkbox,
-      },
-    ],
-    OptionTitle: DropdownMenu.ItemTitle,
-    OptionHint: DropdownMenu.ItemHint,
-    Divider,
-    InputSearch: InputSearchWrapper,
-    Input: InputSearchWrapper,
-  },
-  { parent: DropdownMenu, context: selectContext },
-);
-
-export default Select;

package/src/context.js

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export const selectContext = React.createContext({});

package/src/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/src/index.js

@@ -1,2 +0,0 @@
-export { default as InputSearch } from './InputSearch';
-export { default } from './Select';

package/src/style/input-search.shadow.css

@@ -1,17 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SInputSearch[size='m'] {
-  height: 32px;
-}
-
-SClose[hide] {
-  visibility: hidden;
-}
-
-/* Style for Input */
-SOutline {
-  top: -1px;
-  left: -1px;
-  width: 100%;
-  border-radius: var(--rounded-m) var(--rounded-m) 0 0;
-}

package/src/style/select.shadow.css

@@ -1,68 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SOptionCheckbox {
-  margin-top: 2px;
-  margin-right: 8px;
-  margin-bottom: auto;
-  position: relative;
-  flex-shrink: 0;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: #fff;
-    border: 1px solid;
-    border-radius: var(--rounded-s);
-    border-color: var(--gray-200);
-  }
-
-  width: 16px;
-  height: 16px;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0 2px;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
-  }
-}
-
-SOptionCheckbox[size='l'] {
-  width: 20px;
-  height: 20px;
-  &::after {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
-  }
-}
-
-SOptionCheckbox[checked]:before {
-  background-color: var(--blue-400);
-  border-color: var(--blue-400);
-}
-
-SOptionCheckbox[theme]:before {
-  border-color: var(--theme);
-}
-
-SOptionCheckbox[theme][checked]:before {
-  background-color: var(--theme);
-  border-color: var(--theme);
-}
-
-SOptionCheckbox[selected] {
-  background-color: color-mod(var(--blue-100) a(70%));
-
-  &:hover {
-    background-color: color-mod(var(--blue-100) a(70%));
-  }
-}