@semcore/select 2.7.12 → 3.0.0

package/src/InputSearch.jsx

@@ -2,11 +2,8 @@ import React from 'react';
 import createComponent, { Component, CONTEXT_COMPONENT, sstyled } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
 import Input from '@semcore/input';
-import Divider from '@semcore/divider';
 import SearchM from '@semcore/icon/Search/m';
 import CloseM from '@semcore/icon/Close/m';
-import SearchL from '@semcore/icon/Search/l';
-import CloseL from '@semcore/icon/Close/l';
 import Select from './Select';
 
 import style from './style/input-search.shadow.css';
@@ -14,7 +11,6 @@ import style from './style/input-search.shadow.css';
 const MAP_SIZE_TO_ICON = {
   m: [SearchM, CloseM],
   l: [SearchM, CloseM],
-  xl: [SearchL, CloseL],
 };
 
 class InputSearch extends Component {
@@ -44,22 +40,18 @@ class InputSearch extends Component {
     const finalSize = size || this.context.size;
 
     return sstyled(styles)(
-      <>
-        <SInputSearch size={finalSize}>
-          <Input size={finalSize}>
-            <Input.Addon tag={MAP_SIZE_TO_ICON[finalSize][0]} />
-            <Input.Value ref={forwardRef} autoFocus {...this.asProps} />
-            <Input.Addon
-              tag={MAP_SIZE_TO_ICON[finalSize][1]}
-              role="button"
-              interactive
-              style={{ visibility: value ? 'visible' : 'hidden' }}
-              onClick={this.handleClear}
-            />
-          </Input>
-        </SInputSearch>
-        <Divider />
-      </>,
+      <SInputSearch size={finalSize} use:filled={value}>
+        <Input size={finalSize}>
+          <Input.Addon tag={MAP_SIZE_TO_ICON[finalSize][0]} />
+          <Input.Value ref={forwardRef} autoFocus {...this.asProps} />
+          <Input.Addon
+            tag={MAP_SIZE_TO_ICON[finalSize][1]}
+            role="button"
+            interactive
+            onClick={this.handleClear}
+          />
+        </Input>
+      </SInputSearch>,
     );
   }
 }

package/src/Select.jsx

@@ -34,7 +34,6 @@ class RootSelect extends Component {
     placeholder: props.multiselect ? 'Select options' : 'Select option',
     size: 'm',
     defaultValue: getEmptyValue(props.multiselect),
-    defaultSelectedOptions: [],
     defaultVisible: false,
   });
 
@@ -46,23 +45,9 @@ class RootSelect extends Component {
     return {
       visible: null,
       value: null,
-      selectedOptions: null,
     };
   }
 
-  isFallback() {
-    const { selectedOptions, defaultSelectedOptions } = this.props;
-    return selectedOptions !== undefined || defaultSelectedOptions.length !== 0;
-  }
-
-  fallbackDeprecatedValue(value) {
-    return this.isFallback() ? this.asProps.selectedOptions.map((o) => o.value) : value;
-  }
-
-  fallbackDeprecatedLabel(value) {
-    return this.isFallback() ? this.asProps.selectedOptions.map((o) => o.label || o.value) : value;
-  }
-
   getTriggerProps() {
     const {
       size,
@@ -78,7 +63,7 @@ class RootSelect extends Component {
     } = this.asProps;
 
     return {
-      empty: isEmptyValue(this.fallbackDeprecatedValue(value)),
+      empty: isEmptyValue(value),
       size,
       value,
       name,
@@ -89,13 +74,13 @@ class RootSelect extends Component {
       disabled,
       active: visible,
       onClear: this.handlerClear,
-      children: this.renderChildrenTrigger(this.fallbackDeprecatedValue(value), options),
+      children: this.renderChildrenTrigger(value, options),
     };
   }
 
   getOptionProps(props) {
     const { value } = this.asProps;
-    const selected = isSelectedOption(this.fallbackDeprecatedValue(value), props.value);
+    const selected = isSelectedOption(value, props.value);
     const other = {};
     this._optionSelected = selected;
 
@@ -106,9 +91,7 @@ class RootSelect extends Component {
 
     return {
       selected,
-      onClick: this.isFallback()
-        ? this.bindHandlerOptionFallbackClick(props)
-        : this.bindHandlerOptionClick(props.value),
+      onClick: this.bindHandlerOptionClick(props.value),
       ...other,
     };
   }
@@ -132,7 +115,6 @@ class RootSelect extends Component {
 
   renderChildrenTrigger(value, options) {
     if (options) {
-      value = this.fallbackDeprecatedValue(value);
       return [].concat(value).reduce((acc, value) => {
         const selectedOption = options.find((o) => isSelectedOption(value, o.value));
         if (!selectedOption) return acc;
@@ -141,7 +123,6 @@ class RootSelect extends Component {
         return acc;
       }, []);
     }
-    value = this.fallbackDeprecatedLabel(value);
     return Array.isArray(value)
       ? value.reduce((acc, value) => {
           if (acc.length) acc.push(', ');
@@ -165,28 +146,10 @@ class RootSelect extends Component {
     if (!multiselect) this.handlers.visible(false);
   };
 
-  bindHandlerOptionFallbackClick = (props) => (e) => {
-    const { selectedOptions, multiselect } = this.asProps;
-    let optionProps = [props];
-    if (multiselect) {
-      if (isSelectedOption(this.fallbackDeprecatedValue(selectedOptions), props.value)) {
-        optionProps = selectedOptions.filter((o) => o.value !== props.value);
-      } else {
-        optionProps = selectedOptions.concat(props);
-      }
-    }
-    this.handlers.value(optionProps, e);
-    if (!multiselect) this.handlers.visible(false);
-  };
-
   handlerClear = (e) => {
     const { value } = this.asProps;
-    const emptyValue = getEmptyValue(Array.isArray(this.fallbackDeprecatedValue(value)));
-    if (this.isFallback()) {
-      this.handlers.value(Array.isArray(emptyValue) ? emptyValue : [], e);
-    } else {
-      this.handlers.value(emptyValue, e);
-    }
+    const emptyValue = getEmptyValue(Array.isArray(value));
+    this.handlers.value(emptyValue, e);
     this.handlers.visible(false);
   };
 
@@ -229,13 +192,6 @@ class RootSelect extends Component {
       Select.Popper.displayName,
     ]);
 
-    logger.warn(
-      // @ts-ignore
-      this.isFallback(),
-      "'selectedOptions'/'defaultSelectedOptions' changed to 'value/defaultValue' and take only values, not objects.",
-      other['data-ui-name'] || Select.displayName,
-    );
-
     logger.warn(
       options && advanceMode,
       "Don't use at the same time 'options' property and '<Select.Trigger/>/<Select.Popper/>'",
@@ -243,13 +199,17 @@ class RootSelect extends Component {
     );
 
     if (options) {
-      const Component = multiselect ? Select.OptionCheckbox : Select.Option;
       return (
         <Root render={DropdownMenu}>
           <Select.Trigger {...other} />
           <Select.Menu>
             {options.map((option, i) => {
-              return <Component key={i} {...option} />;
+              return (
+                <Select.Option key={i} {...option}>
+                  {multiselect && <Select.Option.Checkbox />}
+                  {option.children}
+                </Select.Option>
+              );
             })}
           </Select.Menu>
         </Root>
@@ -297,23 +257,7 @@ function Checkbox(props) {
   );
 }
 
-function OptionCheckbox(props) {
-  const { selected, size, theme, children } = props;
-
-  return (
-    <DropdownMenu.Item {...props}>
-      <Checkbox selected={selected} size={size} theme={theme} styles={props.styles} />
-      {children}
-    </DropdownMenu.Item>
-  );
-}
-
-const InputSearchWrapper = function (props) {
-  logger.warn(
-    true,
-    `\'<${props['data-ui-name']}/>\' is deprecated, use the named import \'import { InputSearch }\'`,
-    props['data-ui-name'] || Select.InputSearch.displayName,
-  );
+const InputSearchWrapper = function () {
   return <Root render={InputSearch} />;
 };
 
@@ -339,12 +283,6 @@ const Select = createComponent(
     ],
     OptionTitle: DropdownMenu.ItemTitle,
     OptionHint: DropdownMenu.ItemHint,
-    OptionCheckbox: [
-      OptionCheckbox,
-      {
-        Addon: DropdownMenu.Item.Addon,
-      },
-    ],
     Divider,
     InputSearch: InputSearchWrapper,
     Input: InputSearchWrapper,

package/src/index.d.ts

@@ -64,17 +64,6 @@ export interface ISelectProps<T extends SelectValue = SelectValue>
    * Input name
    */
   name?: string;
-
-  /**
-   * The list of options selected by default
-   * @deprecated v2.0.0 {@link ISelectProps.defaultValue}
-   */
-  defaultSelectedOptions?: ISelectOption[];
-  /**
-   * List of the selected options
-   * @deprecated v2.0.0 {@link ISelectProps.value}
-   */
-  selectedOptions?: ISelectOption[];
 }
 
 export interface ISelectOption {
@@ -130,11 +119,6 @@ declare const Select: (<T, V extends SelectValue = SelectValue>(
   };
   OptionTitle: typeof DropdownMenu.ItemTitle;
   OptionHint: typeof DropdownMenu.ItemHint;
-  OptionCheckbox: (<T>(
-    props: CProps<ISelectOptionCheckboxProps & T, ISelectContext, ISelectHandlers>,
-  ) => ReturnEl) & {
-    Addon: typeof DropdownMenu.Item.Addon;
-  };
   Divider: typeof Divider;
   InputSearch: typeof InputSearch;
   Input: typeof InputSearch;

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

@@ -1,11 +1,24 @@
-SInputSearch[size='m'] {
-  padding: 8px;
+@import '@semcore/utils/style/var.css';
+
+SInputSearch[size] {
+  padding: 0;
+}
+
+SInputSearch > [data-ui-name='Input']:first-child > [data-ui-name='InputSearch'] ~ div {
+  top: -1px;
+  left: -1px;
+  width: 100%;
+  border-radius: var(--rounded-m) var(--rounded-m) 0 0;
+}
+
+SInputSearch[size='m'] > [data-ui-name='Input']:first-child {
+  height: 32px;
 }
 
-SInputSearch[size='l'] {
-  padding: 10px 8px;
+SInputSearch [data-ui-name='Input.Addon']:last-of-type {
+  visibility: hidden;
 }
 
-SInputSearch[size='xl'] {
-  padding: 12px 12px;
+SInputSearch[filled] [data-ui-name='Input.Addon']:last-of-type {
+  visibility: visible;
 }

package/src/style/select.shadow.css

@@ -1,6 +1,7 @@
 @import '@semcore/utils/style/var.css';
 
 SOptionCheckbox {
+  margin-top: 2px;
   margin-right: 8px;
   margin-bottom: auto;
   position: relative;
@@ -15,10 +16,13 @@ SOptionCheckbox {
     bottom: 0;
     background: #fff;
     border: 1px solid;
-    border-radius: 2px;
-    border-color: var(--stone);
+    border-radius: var(--rounded-s);
+    border-color: var(--gray-200);
   }
 
+  width: 16px;
+  height: 16px;
+
   &::after {
     content: '';
     position: absolute;
@@ -27,33 +31,23 @@ SOptionCheckbox {
     right: 0;
     bottom: 0;
     margin: 0 2px;
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDYiIGZpbGw9IiNmZmYiPgogICAgPHBhdGggZD0iTTc3Ny44ODQsNTkzLjc4MmwtMC42NzktLjY3NWEwLjQsMC40LDAsMCwwLS41NTksMGwtMy41NzMsMy41NTYtMS43Mi0xLjcxM2EwLjQsMC40LDAsMCwwLS41NTgsMGwtMC42NzkuNjc1YTAuMzg0LDAuMzg0LDAsMCwwLS4xMTYuMjcyLDAuNCwwLjQsMCwwLDAsLjExNS4yODRsMi42NzksMi42NjVhMC40LDAuNCwwLDAsMCwuNTU5LDBsNC41MzEtNC41MDhhMC40LDAuNCwwLDAsMCwuMTE2LTAuMjg1QTAuMzgyLDAuMzgyLDAsMCwwLDc3Ny44ODQsNTkzLjc4MloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03NzAgLTU5MykiLz4KPC9zdmc+Cgo=');
     background-repeat: no-repeat;
     background-position: center center;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
   }
 }
 
-SOptionCheckbox[size='xl'] {
-  margin-top: 2px;
+SOptionCheckbox[size='l'] {
   width: 20px;
   height: 20px;
-}
-
-SOptionCheckbox[size='l'] {
-  margin-top: 1px;
-  width: 16px;
-  height: 16px;
-}
-
-SOptionCheckbox[size='m'] {
-  margin-top: 2px;
-  width: 12px;
-  height: 12px;
+  &::after {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
+  }
 }
 
 SOptionCheckbox[checked]:before {
-  background-color: var(--light-blue);
-  border-color: var(--light-blue);
+  background-color: var(--blue-400);
+  border-color: var(--blue-400);
 }
 
 SOptionCheckbox[theme]:before {
@@ -66,9 +60,9 @@ SOptionCheckbox[theme][checked]:before {
 }
 
 SOptionCheckbox[selected] {
-  background-color: color-mod(var(--light-blue) a(20%));
+  background-color: color-mod(var(--blue-100) a(70%));
 
-  & :hover {
-    background-color: color-mod(var(--light-blue) a(20%));
+  &:hover {
+    background-color: color-mod(var(--blue-100) a(70%));
   }
 }