@homecode/ui 4.18.16 → 4.18.18

package/dist/esm/src/components/Select/Select.js

@@ -1,2 +1,585 @@
-import{jsx,jsxs,Fragment}from"react/jsx-runtime";import{Component,createRef}from"react";import cn from"classnames";import compare from"compareq";import pick from"lodash.pick";import omit from"lodash.omit";import{createStore}from"justorm/react";import Time from"timen";import{Icon}from"../Icon/Icon.js";import{Button}from"../Button/Button.js";import{Input}from"../Input/Input.js";import{Label}from"../Label/Label.js";import{Popup}from"../Popup/Popup.js";import{Scroll}from"../Scroll/Scroll.js";import{RequiredStar}from"../RequiredStar/RequiredStar.js";import{AssistiveText}from"../AssistiveText/AssistiveText.js";import{INTERACTION_MODE,getInteractionMode}from"../../tools/dom.js";import throttle from"../../tools/throttle.js";import*as Select_helpers from"./Select.helpers.js";import{mapById,buildOptionsTree,isMultiple,renderLabel}from"./Select.helpers.js";import S from"./Select.styl.js";const SelectHelpers=Select_helpers;class Select extends Component{store;inputRef=createRef();triggerInputRef=createRef();contentRef=createRef();scrollInnerElem;onScrollInnerRef=e=>this.scrollInnerElem=e;focusedElem;timers=Time.create();items=[];maxIndex=-1;isFirstSelectedMeet=!1;isTree=!1;focusedItemId="";preventClose=!1;searchValLower="";optionsTree=[];ids={items:{},childIds:{}};static defaultProps={size:"m",additionalOptions:[]};constructor(e){super(e),this.onOptionsChange(),this.store=createStore(this,{searchVal:"",isOpen:!1,isFocused:!1,focusedItemIndex:0,selected:this.getDefaultSelected(),expanded:this.getDefaultExpanded(e.value),labelClipPath:""})}componentDidUpdate(e){var{options:t,value:s}=this.props;compare(s,e.value)||(this.store.selected=this.getDefaultSelected()),compare(t,e.options)||this.onOptionsChange()}componentWillUnmount(){this.timers.clear(),this.unDocumetnKeyDown(),this.unDocumentClick()}onOptionsChange(){var e=this.props["options"];this.ids=mapById(e),this.optionsTree=buildOptionsTree(e,this.ids),this.items=this.getItems(),this.maxIndex=Math.max(0,this.items.length-1),this.store?.focusedItemIndex>this.maxIndex&&(this.store.focusedItemIndex=this.maxIndex,this.focusedItemId=this.items[this.maxIndex].id)}coerceType(e){return"number"==typeof this.ids.items[e].id?parseFloat(e):e}getDefaultExpanded(e){var t=this.props["expandSelected"],s=this.ids["items"];if(!t)return{};if(!e)return{};for(var r={},i=[...this.isMultiple()?e:[e]];i.length;){var o=s[i.shift()];o.parentId&&(r[o.parentId]=!0,i.push(o.parentId))}return r}getDefaultSelected(){var e=this.props["value"];return e?this.isMultiple()?e.reduce((e,t)=>{var s=this.getParentId(t);return s?e[s]?e[s].push(t):e[s]=[t]:e[t]=!this.ids.childIds[t]||[],e},{}):{[e]:!0}:{}}isDisabled(){return this.props.disabled||0===this.items.length}isClickedInside=e=>e.closest("."+S.root)||e.closest("."+S.options);onFocusedElemRef=e=>{var t,s,r;(this.focusedElem=e)&&this.contentRef.current&&({top:e,bottom:t}=e.getBoundingClientRect(),s=this.contentRef.current.getBoundingClientRect(),r=this.scrollInnerElem,e<s.top?r.scrollTop-=s.top-e:t>s.bottom&&(r.scrollTop+=t-s.bottom))};onDocumentClick=e=>{this.isClickedInside(e.target)||(this.store.isOpen=!1)};onDocumentKeyDown=e=>{var t=this.store.focusedItemIndex;switch(e.key){case"ArrowDown":t<this.maxIndex&&this.setItemFocus(t+1);break;case"ArrowUp":0<t&&this.setItemFocus(t-1)}};onDocumentKeyUp=e=>{var t=this.store.focusedItemIndex;if(-1!==t)switch(e.key){case"Enter":case"Space":this.store.isOpen&&(e.preventDefault(),e.stopPropagation(),this.onItemToggle(this.items[t].id))}};unDocumetnKeyDown=()=>document.removeEventListener("keyup",this.onDocumentKeyUp,!0);unDocumentClick=()=>document.removeEventListener("click",this.onDocumentClick);onFocus=e=>{var t=this.props["onFocus"];this.setSearchVal(""),this.store.isFocused=!0,t?.(e)};onBlur=e=>{var t=this.props["onBlur"];this.store.isFocused=!1,t?.(e)};onSearchChange=(e,t)=>{this.setSearchVal(t)};onExpandClick(e,t){var s=this.store["expanded"];e.preventDefault(),e.stopPropagation(),this.store.expanded[t]=!s[t]}onItemToggle(e){this.onChange(this.getNewSelected(e)),this.isMultiple()||(this.store.isOpen=!1)}onChange(e){var t=this.props["onChange"];this.store.selected=e,t(this.getValue())}onLabelClipPathChange=e=>this.store.labelClipPath=e;onPopupOpen=()=>{this.store.isOpen=!0,this.isMultiple()&&document.addEventListener("click",this.onDocumentClick),document.addEventListener("keydown",this.onDocumentKeyDown),document.addEventListener("keyup",this.onDocumentKeyUp,!0)};onPopupClose=()=>{this.setItemFocus(-1),this.store.isOpen=!1,this.unDocumentClick(),this.unDocumetnKeyDown()};onOptionHover=throttle(t=>{var e;getInteractionMode()===INTERACTION_MODE.POINTER&&(e=this.items.findIndex(e=>e.id===t),this.setItemFocus(e))},100,{trailing:!0});setItemFocus=e=>{this.focusedItemId=this.items[e]?.id,this.store.focusedItemIndex=e};toggle=()=>{this.store.isOpen=!this.store.isOpen};setSearchVal(e){this.searchValLower=e.toLowerCase(),this.store.searchVal=e}getItems=()=>[...this.props.additionalOptions,...this.optionsTree];getParentId=e=>this.ids.items[e]?.parentId;getChildIds=e=>this.ids.childIds[e];isMultiple=()=>isMultiple(this.props.value);isErrorVisible=()=>!this.store.isOpen&&Boolean(this.props.error);isSelected(e){var t=this.store["selected"],s=this.getParentId(e);return void 0!==s?-1<t[s]?.indexOf(e):(s=t[e],Array.isArray(s)?(t=this.getChildIds(e).length,s.length!==t?"indeterminate":0<s.length):s)}addSelected(e,t){var s,r,i;return this.isMultiple()?(s=this.getParentId(e),i=0<(r=this.getChildIds(e))?.length,void 0!==s||i?(this.addSelectedToParent(e,t),r?.forEach(e=>this.addSelected(e,t)),t):{...t,[e]:!0}):{[e]:!0}}addSelectedToParent(e,t){var s,r=this.getParentId(e);void 0===r||(t[r]||(t[r]=[]),-1<(s=t[r]).indexOf(e))||(s.push(e),this.addSelectedToParent(r,t))}removeSelected(e,t){return this.isMultiple()?(this.removeSelectedChilds(e,t),this.removeSelectedFromParent(e,t),t):{}}removeSelectedChilds(e,t){Array.isArray(t[e])&&t[e].forEach(e=>this.removeSelectedChilds(e,t)),delete t[e]}removeSelectedFromParent(e,t){var s=this.getParentId(e),r=t[s];void 0!==s&&r&&(-1<(e=r.indexOf(e))&&r.splice(e,1),0===r.length)&&(delete t[s],this.removeSelectedFromParent(s,t))}selectAll=()=>{let t={};this.optionsTree.forEach(({id:e})=>t=this.addSelected(e,t)),this.onChange(t)};setSelected(e){let t={};e.forEach(e=>t=this.addSelected(e,t)),this.onChange(t)}dropSelected=()=>{this.setSelected([])};getNewSelected(e){var t=this.props["required"],s=JSON.parse(JSON.stringify(this.store.selected));return this.isSelected(e)?!t||this.isMultiple()&&1!==Object.keys(s).length?this.removeSelected(e,s):s:this.addSelected(e,s)}getValue(){var e=this.store["selected"],e=Object.entries(e);return this.isMultiple()?e.reduce((e,[t,s])=>Array.isArray(s)?[...e,...s]:[...e,this.coerceType(t)],[]):(e=e[0])?this.coerceType(e[0]):null}getInputVal(){var{isFocused:e,searchVal:t,selected:s}=this.store;return e&&t?t:Object.entries(s).reduce((t,e)=>{var s=this.coerceType(e[0]),e=e[1];return-1===t.indexOf(s)&&t.push(s),Array.isArray(e)&&e.forEach(e=>{-1===t.indexOf(e)&&t.push(e)}),t},[]).map(e=>this.ids.items[e].label).join(", ")}getLabel(e){var{label:e,render:t}=Object(this.ids.items[e]);return t?t(e):e}getFieldLabel(e){var t=this.props.value?.length;return this.isMultiple()&&t?e+` (${t})`:e}getSelectedLabel(){var e=this.props["value"];return this.isMultiple()?e?e.reduce((e,t)=>{t=this.getLabel(t);return t?[...e,t]:e},[]).join(", "):"":this.getLabel(e)}filterOption({label:e}){return e.toLowerCase().includes(this.searchValLower)}getTriggerProps(){var e=this.props["triggerProps"];return{...pick(this.props,["name","label","size","variant","autocomplete"]),...e}}renderAdditionalLabel(){var e=this.props["additionalLabel"];return e?jsx("div",{className:S.additionalLabel,children:e}):null}renderTriggerInput(){var{inputProps:e,label:t}=this.props,s=this.getInputVal(),e={...this.getTriggerProps(),...e,error:this.isErrorVisible(),addonRight:this.renderTriggerArrow(),value:s,onChange:this.onSearchChange,ref:this.triggerInputRef,label:this.getFieldLabel(t)};return jsx(Input,{...e})}renderTriggerButton(){var e=this.props["size"],t=this.store["labelClipPath"];const{label:s,className:r,...i}=this.getTriggerProps();var o=omit(i,["name","inputProps"]),n=[this.getSelectedLabel(),this.renderAdditionalLabel()].filter(Boolean),l=0<n.length,a=l?n:s,n=l?n:null,h=this.renderTriggerArrow(),d=this.isErrorVisible(),c=cn(S.triggerButton,d&&S.isError,h&&S.hasTriggerArrow,r);return jsxs("div",{children:[jsxs(Button,{className:c,variant:"default",...o,style:{clipPath:t},title:n?.join?.(", "),children:[jsx("div",{className:cn(S.triggerButtonLabel,l&&S.hasSelected),children:a}),h]}),jsx(Label,{size:e,isOnTop:l,isError:d,onClipPathChange:this.onLabelClipPathChange,children:this.getFieldLabel(s)})]})}renderTriggerArrow(){var{size:e,inputProps:t}=this.props,{isOpen:s,searchVal:r}=this.store;return t?.hasClear&&r?null:jsx(Icon,{type:"chevronDown",className:cn(S.triggerArrow,s&&S.isOpen),size:e})}renderTrigger(){var{trigger:e,isSearchable:t,required:s,hideRequiredStar:r,size:i}=this.props;return e||(e=t?this.renderTriggerInput():this.renderTriggerButton(),jsxs("div",{className:S.trigger,children:[e,s&&!r&&jsx(RequiredStar,{size:i})]}))}renderFoldButton(t){var e=this.props["size"];return jsx(Button,{variant:"clear",size:e,className:S.expandButton,onPointerUpCapture:e=>this.onExpandClick(e,t),children:jsx(Icon,{type:"chevronRight",size:e,className:S.expandIcon})})}renderOption=(e,t=0)=>{var s=this.props["optionClassName"],r=this.store["expanded"];const{id:i,children:o,isGroup:n}=e;var l=this.isSelected(i),a=i===this.focusedItemId,r=r[i],h=!0===l,l="indeterminate"===l;const d=[];s={className:cn(S.option,n&&S.isGroup,a&&S.isFocused,h&&S.isSelected,l&&S.isIndeterminate,r&&S.isExpanded,S["level-"+t],s),key:i,onPointerUp:()=>this.onItemToggle(i),onPointerEnter:()=>this.onOptionHover(i)};return a&&(s.ref=this.onFocusedElemRef),(l||h&&!this.isFirstSelectedMeet)&&(this.isFirstSelectedMeet=!0),o&&(this.isTree=!0,r)&&o.forEach(e=>d.push(...this.renderOption(e,t+1))),(this.filterOption(e)||0<d.length)&&d.unshift(jsxs("div",{...s,children:[o?.length&&this.renderFoldButton(e.id),renderLabel(e)]})),d};renderOptions(){var{additionalOptions:e=[]}=this.props,e=e.concat(this.optionsTree);const t=[];return this.isFirstSelectedMeet=!1,e.forEach(e=>{t.push(...this.renderOption(e))}),t}renderPresets(){var{presets:e=[],clearButton:t,selectAllButton:s}=this.props,e=e.map(({label:e,ids:t})=>({children:e,onClick:()=>this.setSelected(t),key:e}));return s&&e.push({children:"Select all",onClick:this.selectAll,key:"select-all-button"}),t&&e.push({children:"Clear",onClick:this.dropSelected,key:"clear-button"}),0===e.length?null:jsx("div",{className:S.presetPanel,children:e.map(e=>jsx(Button,{className:S.presetButton,variant:"clear",...e}))},"preset-panel")}renderOptionsList(){var e=this.props["size"],t=(this.isTree=!1,this.renderOptions()),e=cn(S.options,S["size-"+e],this.isTree&&S.isTree);return jsxs("div",{ref:this.contentRef,children:[this.renderPresets(),jsx(Scroll,{y:!0,offset:{y:{before:10,after:10}},className:e,onInnerRef:this.onScrollInnerRef,children:t},"items-scroll")]})}render(){var{className:e,popupProps:t,size:s,error:r,blur:i}=this.props,{isOpen:o,isFocused:n}=this.store,e=cn(S.root,e,S["size-"+s]);return jsxs(Fragment,{children:[jsx(Popup,{className:e,direction:"bottom",size:s,focusControl:!0,hoverControl:n,blur:i,isOpen:o,...t,onOpen:this.onPopupOpen,onClose:this.onPopupClose,disabled:this.isDisabled(),trigger:this.renderTrigger(),triggerProps:{onFocus:this.onFocus,onBlur:this.onBlur},content:this.renderOptionsList()}),this.isErrorVisible()&&jsx(AssistiveText,{variant:"danger",size:s,children:r})]})}}export{Select,SelectHelpers};
-//# sourceMappingURL=Select.js.map
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Component, createRef } from 'react';
+import cn from 'classnames';
+import compare from 'compareq';
+import pick from 'lodash.pick';
+import omit from 'lodash.omit';
+import { createStore } from 'justorm/react';
+import Time from 'timen';
+import { Icon } from '../Icon/Icon.js';
+import { Button } from '../Button/Button.js';
+import { Input } from '../Input/Input.js';
+import { Label } from '../Label/Label.js';
+import { Popup } from '../Popup/Popup.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import { RequiredStar } from '../RequiredStar/RequiredStar.js';
+import { AssistiveText } from '../AssistiveText/AssistiveText.js';
+import { INTERACTION_MODE, getInteractionMode } from '../../tools/dom.js';
+import throttle from '../../tools/throttle.js';
+import * as Select_helpers from './Select.helpers.js';
+import { mapById, buildOptionsTree, isMultiple, renderLabel } from './Select.helpers.js';
+import S from './Select.styl.js';
+
+const SelectHelpers = Select_helpers;
+class Select extends Component {
+    store;
+    inputRef = createRef();
+    triggerInputRef = createRef();
+    contentRef = createRef();
+    scrollInnerElem;
+    onScrollInnerRef = elem => (this.scrollInnerElem = elem);
+    focusedElem;
+    timers = Time.create();
+    items = [];
+    maxIndex = -1;
+    isFirstSelectedMeet = false;
+    isTree = false;
+    focusedItemId = '';
+    preventClose = false;
+    searchValLower = '';
+    optionsTree = [];
+    ids = {
+        items: {},
+        childIds: {},
+    };
+    static defaultProps = {
+        size: 'm',
+        additionalOptions: [],
+    };
+    constructor(props) {
+        super(props);
+        this.onOptionsChange();
+        this.store = createStore(this, {
+            searchVal: '',
+            isOpen: false,
+            isFocused: false,
+            focusedItemIndex: 0,
+            selected: this.getDefaultSelected(),
+            expanded: this.getDefaultExpanded(props.value),
+            labelClipPath: '',
+        });
+    }
+    componentDidUpdate(prevProps) {
+        const { options, value } = this.props;
+        if (!compare(value, prevProps.value)) {
+            this.store.selected = this.getDefaultSelected();
+        }
+        if (!compare(options, prevProps.options)) {
+            this.onOptionsChange();
+        }
+    }
+    componentWillUnmount() {
+        this.timers.clear();
+        this.unDocumetnKeyDown();
+        this.unDocumentClick();
+    }
+    onOptionsChange() {
+        const { options } = this.props;
+        this.ids = mapById(options);
+        this.optionsTree = buildOptionsTree(options, this.ids);
+        this.items = this.getItems();
+        this.maxIndex = Math.max(0, this.items.length - 1);
+        if (this.store?.focusedItemIndex > this.maxIndex) {
+            this.store.focusedItemIndex = this.maxIndex;
+            this.focusedItemId = this.items[this.maxIndex].id;
+        }
+    }
+    coerceType(id) {
+        const isNumber = typeof this.ids.items[id].id === 'number';
+        if (isNumber)
+            return parseFloat(id);
+        return id;
+    }
+    getDefaultExpanded(value) {
+        const { expandSelected } = this.props;
+        const { items } = this.ids;
+        if (!expandSelected)
+            return {};
+        if (!value)
+            return {};
+        const result = {};
+        const stack = [...(this.isMultiple() ? value : [value])];
+        // go through all selected items and mark their parents as expanded
+        while (stack.length) {
+            const pointerId = stack.shift();
+            const item = items[pointerId];
+            if (item.parentId) {
+                result[item.parentId] = true;
+                stack.push(item.parentId);
+            }
+        }
+        return result;
+    }
+    getDefaultSelected() {
+        const { value } = this.props;
+        if (!value)
+            return {};
+        if (this.isMultiple()) {
+            // @ts-ignore
+            return value.reduce((acc, id) => {
+                const parentId = this.getParentId(id);
+                if (parentId) {
+                    if (!acc[parentId]) {
+                        acc[parentId] = [id];
+                    }
+                    else {
+                        acc[parentId].push(id);
+                    }
+                }
+                else {
+                    acc[id] = this.ids.childIds[id] ? [] : true;
+                }
+                return acc;
+            }, {});
+        }
+        // @ts-ignore
+        return { [value]: true };
+    }
+    isDisabled() {
+        return this.props.disabled || this.items.length === 0;
+    }
+    isClickedInside = elem => elem.closest(`.${S.root}`) || elem.closest(`.${S.options}`);
+    onFocusedElemRef = elem => {
+        this.focusedElem = elem;
+        if (elem) {
+            const content = this.contentRef.current;
+            if (!content)
+                return;
+            const { top, bottom } = elem.getBoundingClientRect();
+            const rect = this.contentRef.current.getBoundingClientRect();
+            const list = this.scrollInnerElem;
+            if (top < rect.top) {
+                list.scrollTop -= rect.top - top;
+            }
+            else if (bottom > rect.bottom) {
+                list.scrollTop += bottom - rect.bottom;
+            }
+        }
+    };
+    onDocumentClick = e => {
+        if (!this.isClickedInside(e.target)) {
+            this.store.isOpen = false;
+        }
+    };
+    onDocumentKeyDown = e => {
+        const currIndex = this.store.focusedItemIndex;
+        switch (e.key) {
+            case 'ArrowDown':
+                if (currIndex < this.maxIndex)
+                    this.setItemFocus(currIndex + 1);
+                break;
+            case 'ArrowUp':
+                if (currIndex > 0)
+                    this.setItemFocus(currIndex - 1);
+                break;
+        }
+    };
+    onDocumentKeyUp = e => {
+        const currIndex = this.store.focusedItemIndex;
+        if (currIndex === -1)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case 'Space':
+                if (this.store.isOpen) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.onItemToggle(this.items[currIndex].id);
+                }
+        }
+    };
+    unDocumetnKeyDown = () => document.removeEventListener('keyup', this.onDocumentKeyUp, true);
+    unDocumentClick = () => document.removeEventListener('click', this.onDocumentClick);
+    onFocus = e => {
+        const { onFocus } = this.props;
+        this.setSearchVal('');
+        this.store.isFocused = true;
+        onFocus?.(e);
+    };
+    onBlur = e => {
+        const { onBlur } = this.props;
+        this.store.isFocused = false;
+        onBlur?.(e);
+    };
+    onSearchChange = (e, value) => {
+        this.setSearchVal(value);
+    };
+    onExpandClick(e, id) {
+        const { expanded } = this.store;
+        e.preventDefault();
+        e.stopPropagation();
+        this.store.expanded[id] = !expanded[id];
+    }
+    onItemToggle(id) {
+        this.onChange(this.getNewSelected(id));
+        if (!this.isMultiple())
+            this.store.isOpen = false;
+    }
+    onChange(selected) {
+        const { onChange } = this.props;
+        this.store.selected = selected;
+        onChange(this.getValue());
+    }
+    onLabelClipPathChange = clipPath => (this.store.labelClipPath = clipPath);
+    onPopupOpen = () => {
+        this.store.isOpen = true;
+        if (this.isMultiple()) {
+            document.addEventListener('click', this.onDocumentClick);
+        }
+        document.addEventListener('keydown', this.onDocumentKeyDown);
+        document.addEventListener('keyup', this.onDocumentKeyUp, true);
+    };
+    onPopupClose = () => {
+        this.setItemFocus(-1);
+        this.store.isOpen = false;
+        this.unDocumentClick();
+        this.unDocumetnKeyDown();
+    };
+    onOptionHover = throttle(id => {
+        const mode = getInteractionMode();
+        if (mode !== INTERACTION_MODE.POINTER)
+            return;
+        const index = this.items.findIndex(item => item.id === id);
+        this.setItemFocus(index);
+    }, 100, { trailing: true });
+    setItemFocus = index => {
+        this.focusedItemId = this.items[index]?.id;
+        this.store.focusedItemIndex = index;
+    };
+    toggle = () => {
+        this.store.isOpen = !this.store.isOpen;
+    };
+    setSearchVal(searchVal) {
+        this.searchValLower = searchVal.toLowerCase();
+        this.store.searchVal = searchVal;
+    }
+    getItems = () => [...this.props.additionalOptions, ...this.optionsTree];
+    getParentId = id => this.ids.items[id]?.parentId;
+    getChildIds = id => this.ids.childIds[id];
+    isMultiple = () => isMultiple(this.props.value);
+    isErrorVisible = () => !this.store.isOpen && Boolean(this.props.error);
+    isSelected(id) {
+        const { selected } = this.store;
+        const parentId = this.getParentId(id);
+        const hasParent = parentId !== undefined;
+        if (hasParent) {
+            // @ts-ignore
+            return selected[parentId]?.indexOf(id) > -1;
+        }
+        const selectedVal = selected[id];
+        if (Array.isArray(selectedVal)) {
+            const childCount = this.getChildIds(id).length;
+            if (selectedVal.length !== childCount)
+                return 'indeterminate';
+            return selectedVal.length > 0;
+        }
+        return selectedVal;
+    }
+    addSelected(id, selected) {
+        if (!this.isMultiple())
+            return { [id]: true };
+        const parentId = this.getParentId(id);
+        const childIds = this.getChildIds(id);
+        const hasParent = parentId !== undefined;
+        const hasChilds = childIds?.length > 0;
+        if (!hasParent && !hasChilds) {
+            // top level without childs
+            return { ...selected, [id]: true };
+        }
+        this.addSelectedToParent(id, selected);
+        childIds?.forEach(childId => this.addSelected(childId, selected));
+        return selected;
+    }
+    addSelectedToParent(id, selected) {
+        const parentId = this.getParentId(id);
+        if (parentId === undefined)
+            return;
+        if (!selected[parentId])
+            selected[parentId] = [];
+        const arr = selected[parentId];
+        const index = arr.indexOf(id);
+        if (index > -1)
+            return;
+        arr.push(id);
+        this.addSelectedToParent(parentId, selected);
+    }
+    removeSelected(id, selected) {
+        if (!this.isMultiple())
+            return {};
+        this.removeSelectedChilds(id, selected);
+        this.removeSelectedFromParent(id, selected);
+        return selected;
+    }
+    removeSelectedChilds(id, selected) {
+        if (Array.isArray(selected[id])) {
+            selected[id].forEach(childId => this.removeSelectedChilds(childId, selected));
+        }
+        delete selected[id];
+    }
+    removeSelectedFromParent(id, selected) {
+        const parentId = this.getParentId(id);
+        const parentSelected = selected[parentId];
+        if (parentId === undefined || !parentSelected)
+            return;
+        const index = parentSelected.indexOf(id);
+        if (index > -1)
+            parentSelected.splice(index, 1);
+        if (parentSelected.length === 0) {
+            delete selected[parentId];
+            this.removeSelectedFromParent(parentId, selected);
+        }
+    }
+    selectAll = () => {
+        let selected = {};
+        this.optionsTree.forEach(({ id }) => (selected = this.addSelected(id, selected)));
+        this.onChange(selected);
+    };
+    setSelected(ids) {
+        let selected = {};
+        ids.forEach(id => (selected = this.addSelected(id, selected)));
+        this.onChange(selected);
+    }
+    dropSelected = () => {
+        this.setSelected([]);
+    };
+    getNewSelected(id) {
+        const { required } = this.props;
+        const selected = JSON.parse(JSON.stringify(this.store.selected));
+        if (this.isSelected(id)) {
+            if (required &&
+                (!this.isMultiple() || Object.keys(selected).length === 1)) {
+                return selected;
+            }
+            return this.removeSelected(id, selected);
+        }
+        return this.addSelected(id, selected);
+    }
+    getValue() {
+        const { selected } = this.store;
+        const entries = Object.entries(selected);
+        if (this.isMultiple()) {
+            // @ts-ignore
+            return entries.reduce((acc, [id, val]) => {
+                if (Array.isArray(val))
+                    return [...acc, ...val];
+                return [...acc, this.coerceType(id)];
+            }, []);
+        }
+        const entry = entries[0];
+        if (entry)
+            return this.coerceType(entry[0]);
+        return null;
+    }
+    getInputVal() {
+        const { isFocused, searchVal, selected } = this.store;
+        if (isFocused && searchVal)
+            return searchVal;
+        const selectedPlain = Object.entries(selected).reduce((acc, entry) => {
+            const parentId = this.coerceType(entry[0]);
+            const val = entry[1];
+            if (acc.indexOf(parentId) === -1)
+                acc.push(parentId);
+            if (Array.isArray(val)) {
+                val.forEach(id => {
+                    if (acc.indexOf(id) === -1)
+                        acc.push(id);
+                });
+            }
+            return acc;
+        }, []);
+        return selectedPlain.map(id => this.ids.items[id].label).join(', ');
+    }
+    getLabel(id) {
+        const { label, render } = Object(this.ids.items[id]);
+        if (render)
+            return render(label);
+        return label;
+    }
+    getFieldLabel(label) {
+        // @ts-ignore
+        const length = this.props.value?.length;
+        if (this.isMultiple() && length)
+            return `${label} (${length})`;
+        return label;
+    }
+    getSelectedLabel() {
+        const { value } = this.props;
+        if (!this.isMultiple())
+            return this.getLabel(value);
+        if (!value)
+            return '';
+        return (value
+            // @ts-ignore
+            .reduce((acc, id) => {
+            const label = this.getLabel(id);
+            return label ? [...acc, label] : acc;
+        }, [])
+            .join(', '));
+    }
+    filterOption({ label }) {
+        return label.toLowerCase().includes(this.searchValLower);
+    }
+    getTriggerProps() {
+        const { triggerProps } = this.props;
+        const props = {
+            ...pick(this.props, [
+                'name',
+                'label',
+                'size',
+                'variant',
+                // 'inputProps',
+                // 'required',
+                'autocomplete',
+                // 'hideRequiredStar',
+            ]),
+            ...triggerProps,
+        };
+        return props;
+    }
+    renderAdditionalLabel() {
+        const { additionalLabel } = this.props;
+        if (!additionalLabel)
+            return null;
+        return jsx("div", { className: S.additionalLabel, children: additionalLabel });
+    }
+    renderTriggerInput() {
+        const { inputProps, label } = this.props;
+        const value = this.getInputVal();
+        const props = {
+            ...this.getTriggerProps(),
+            ...inputProps,
+            error: this.isErrorVisible(),
+            // addonLeft: this.renderSelectedItems(),
+            addonRight: this.renderTriggerArrow(),
+            value,
+            onChange: this.onSearchChange,
+            ref: this.triggerInputRef,
+            label: this.getFieldLabel(label),
+        };
+        return jsx(Input, { ...props });
+    }
+    renderTriggerButton() {
+        const { size } = this.props;
+        const { labelClipPath } = this.store;
+        const { label, className, ...rest } = this.getTriggerProps();
+        const props = omit(rest, ['name', 'inputProps']);
+        const selectedLabel = [
+            this.getSelectedLabel(),
+            this.renderAdditionalLabel(),
+        ].filter(Boolean);
+        const hasSelected = selectedLabel.length > 0;
+        const displayLabel = hasSelected ? selectedLabel : label;
+        const title = hasSelected ? selectedLabel : null;
+        const triggerArrow = this.renderTriggerArrow();
+        const isError = this.isErrorVisible();
+        const classes = cn(S.triggerButton, isError && S.isError, triggerArrow && S.hasTriggerArrow, className);
+        return (jsxs("div", { children: [jsxs(Button, { className: classes, variant: "default", ...props, style: { clipPath: labelClipPath }, title: title?.join?.(', '), children: [jsx("div", { className: cn(S.triggerButtonLabel, hasSelected && S.hasSelected), children: displayLabel }), triggerArrow] }), jsx(Label, { size: size, isOnTop: hasSelected, isError: isError, onClipPathChange: this.onLabelClipPathChange, children: this.getFieldLabel(label) })] }));
+    }
+    renderTriggerArrow() {
+        const { size, inputProps } = this.props;
+        const { isOpen, searchVal } = this.store;
+        if (inputProps?.hasClear && searchVal)
+            return null;
+        return (jsx(Icon, { type: "chevronDown", className: cn(S.triggerArrow, isOpen && S.isOpen), size: size }));
+    }
+    renderTrigger() {
+        const { trigger, isSearchable, required, hideRequiredStar, size } = this.props;
+        if (trigger)
+            return trigger;
+        const triggerElem = isSearchable
+            ? this.renderTriggerInput()
+            : this.renderTriggerButton();
+        return (jsxs("div", { className: S.trigger, children: [triggerElem, required && !hideRequiredStar && jsx(RequiredStar, { size: size })] }));
+    }
+    renderFoldButton(id) {
+        const { size } = this.props;
+        return (jsx(Button, { variant: "clear", size: size, className: S.expandButton, onPointerUpCapture: e => this.onExpandClick(e, id), children: jsx(Icon, { type: "chevronRight", size: size, className: S.expandIcon }) }));
+    }
+    renderOption = (item, level = 0) => {
+        const { optionClassName } = this.props;
+        const { expanded } = this.store;
+        const { id, children, isGroup } = item;
+        const selectedState = this.isSelected(id);
+        const isFocused = id === this.focusedItemId;
+        const isExpanded = expanded[id];
+        const isSelected = selectedState === true;
+        const isIndeterminate = selectedState === 'indeterminate';
+        const items = [];
+        const className = cn(S.option, isGroup && S.isGroup, isFocused && S.isFocused, isSelected && S.isSelected, isIndeterminate && S.isIndeterminate, isExpanded && S.isExpanded, S[`level-${level}`], optionClassName);
+        const props = {
+            className,
+            key: id,
+            onPointerUp: () => this.onItemToggle(id),
+            onPointerEnter: () => this.onOptionHover(id),
+        };
+        // @ts-ignore
+        if (isFocused)
+            props.ref = this.onFocusedElemRef;
+        if (isIndeterminate || (isSelected && !this.isFirstSelectedMeet)) {
+            this.isFirstSelectedMeet = true;
+        }
+        if (children) {
+            this.isTree = true;
+            if (isExpanded) {
+                children.forEach(child => items.push(...this.renderOption(child, level + 1)));
+            }
+        }
+        if (this.filterOption(item) || items.length > 0) {
+            items.unshift(jsxs("div", { ...props, children: [children?.length && this.renderFoldButton(item.id), renderLabel(item)] }));
+        }
+        return items;
+    };
+    renderOptions() {
+        const { additionalOptions = [] } = this.props;
+        const items = additionalOptions.concat(this.optionsTree);
+        const itemsList = [];
+        this.isFirstSelectedMeet = false;
+        items.forEach(item => {
+            itemsList.push(...this.renderOption(item));
+        });
+        return itemsList;
+    }
+    renderPresets() {
+        const { presets = [], clearButton, selectAllButton } = this.props;
+        const items = presets.map(({ label, ids }) => ({
+            children: label,
+            onClick: () => this.setSelected(ids),
+            key: label,
+        }));
+        if (selectAllButton) {
+            items.push({
+                children: 'Select all',
+                onClick: this.selectAll,
+                key: 'select-all-button',
+            });
+        }
+        if (clearButton) {
+            items.push({
+                children: 'Clear',
+                onClick: this.dropSelected,
+                key: 'clear-button',
+            });
+        }
+        if (items.length === 0)
+            return null;
+        return (jsx("div", { className: S.presetPanel, children: items.map(props => (jsx(Button, { className: S.presetButton, variant: "clear", ...props }))) }, "preset-panel"));
+    }
+    renderOptionsList() {
+        const { size } = this.props;
+        this.isTree = false;
+        const optionsList = this.renderOptions();
+        const classes = cn(S.options, S[`size-${size}`], this.isTree && S.isTree);
+        return (jsxs("div", { ref: this.contentRef, children: [this.renderPresets(), jsx(Scroll, { y: true, offset: { y: { before: 10, after: 10 } }, className: classes, onInnerRef: this.onScrollInnerRef, children: optionsList }, "items-scroll")] }));
+    }
+    render() {
+        const { className, popupProps, size, error, blur } = this.props;
+        const { isOpen, isFocused } = this.store;
+        const classes = cn(S.root, className, S[`size-${size}`]);
+        return (jsxs(Fragment, { children: [jsx(Popup, { className: classes, direction: "bottom", size: size, focusControl: true, hoverControl: isFocused, blur: blur, isOpen: isOpen, ...popupProps, onOpen: this.onPopupOpen, onClose: this.onPopupClose, disabled: this.isDisabled(), trigger: this.renderTrigger(), triggerProps: {
+                        onFocus: this.onFocus,
+                        onBlur: this.onBlur,
+                    }, content: this.renderOptionsList() }), this.isErrorVisible() && (jsx(AssistiveText, { variant: "danger", size: size, children: error }))] }));
+    }
+}
+
+export { Select, SelectHelpers };

package/dist/esm/src/components/Select/Select.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z='.Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:var(--indent-s);transition:transform .2s ease-out}.Select_size-m__jp7n- .Select_triggerArrow__1LEop{margin-left:var(--indent-m)}.Select_size-l__b4EEy .Select_triggerArrow__1LEop{margin-left:var(--indent-l)}.Select_triggerButton__lErtt .Select_triggerArrow__1LEop{margin-right:0}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_size-s__qBK9t .Select_triggerButton__lErtt{padding-bottom:8px;padding-top:8px}.Select_size-m__jp7n- .Select_triggerButton__lErtt{padding-bottom:12px;padding-top:12px}.Select_size-l__b4EEy .Select_triggerButton__lErtt{padding-bottom:14px;padding-top:14px}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;animation:Select_fadeIn__QpAwZ .3s ease-out;cursor:pointer;display:flex;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-s__qBK9t .Select_option__iJkfJ{font-size:16px;height:26px;padding:0 8px}.Select_size-m__jp7n- .Select_option__iJkfJ{font-size:20px;height:34px;padding:0 12px}.Select_size-l__b4EEy .Select_option__iJkfJ{font-size:24px;height:42px;padding:0 14px}.Select_size-xl__0OerX .Select_option__iJkfJ{height:50px}.Select_option__iJkfJ:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Select_option__iJkfJ:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:"";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:"";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_expandIcon__gWAIB{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}',S={root:"Select_root__mjOjv",disabled:"Select_disabled__AlOQi",additionalLabel:"Select_additionalLabel__K0--Z",trigger:"Select_trigger__OH48f",triggerArrow:"Select_triggerArrow__1LEop","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy",triggerButton:"Select_triggerButton__lErtt",isOpen:"Select_isOpen__WlMUH","size-s":"Select_size-s__qBK9t",hasTriggerArrow:"Select_hasTriggerArrow__vPLad",isError:"Select_isError__WJJLq",triggerButtonLabel:"Select_triggerButtonLabel__XXLzh",hasSelected:"Select_hasSelected__zQhBV",presetPanel:"Select_presetPanel__Yu94r",presetButton:"Select_presetButton__BAl0q",options:"Select_options__3C0-v",option:"Select_option__iJkfJ",fadeIn:"Select_fadeIn__QpAwZ",isTree:"Select_isTree__SiTaD","size-xl":"Select_size-xl__0OerX",isGroup:"Select_isGroup__aP1lY",isExpanded:"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A",isSelected:"Select_isSelected__n3ZeN",isIndeterminate:"Select_isIndeterminate__dy-xV",isFocused:"Select_isFocused__oZSgY",expandButton:"Select_expandButton__UTwlR",expandIcon:"Select_expandIcon__gWAIB"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Select.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:var(--indent-s);transition:transform .2s ease-out}.Select_size-m__jp7n- .Select_triggerArrow__1LEop{margin-left:var(--indent-m)}.Select_size-l__b4EEy .Select_triggerArrow__1LEop{margin-left:var(--indent-l)}.Select_triggerButton__lErtt .Select_triggerArrow__1LEop{margin-right:0}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_size-s__qBK9t .Select_triggerButton__lErtt{padding-bottom:8px;padding-top:8px}.Select_size-m__jp7n- .Select_triggerButton__lErtt{padding-bottom:12px;padding-top:12px}.Select_size-l__b4EEy .Select_triggerButton__lErtt{padding-bottom:14px;padding-top:14px}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;animation:Select_fadeIn__QpAwZ .3s ease-out;cursor:pointer;display:flex;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-s__qBK9t .Select_option__iJkfJ{font-size:16px;height:26px;padding:0 8px}.Select_size-m__jp7n- .Select_option__iJkfJ{font-size:20px;height:34px;padding:0 12px}.Select_size-l__b4EEy .Select_option__iJkfJ{font-size:24px;height:42px;padding:0 14px}.Select_size-xl__0OerX .Select_option__iJkfJ{height:50px}.Select_option__iJkfJ:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Select_option__iJkfJ:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_expandIcon__gWAIB{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
+var S = {"root":"Select_root__mjOjv","disabled":"Select_disabled__AlOQi","additionalLabel":"Select_additionalLabel__K0--Z","trigger":"Select_trigger__OH48f","triggerArrow":"Select_triggerArrow__1LEop","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","triggerButton":"Select_triggerButton__lErtt","isOpen":"Select_isOpen__WlMUH","size-s":"Select_size-s__qBK9t","hasTriggerArrow":"Select_hasTriggerArrow__vPLad","isError":"Select_isError__WJJLq","triggerButtonLabel":"Select_triggerButtonLabel__XXLzh","hasSelected":"Select_hasSelected__zQhBV","presetPanel":"Select_presetPanel__Yu94r","presetButton":"Select_presetButton__BAl0q","options":"Select_options__3C0-v","option":"Select_option__iJkfJ","fadeIn":"Select_fadeIn__QpAwZ","isTree":"Select_isTree__SiTaD","size-xl":"Select_size-xl__0OerX","isGroup":"Select_isGroup__aP1lY","isExpanded":"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A","isSelected":"Select_isSelected__n3ZeN","isIndeterminate":"Select_isIndeterminate__dy-xV","isFocused":"Select_isFocused__oZSgY","expandButton":"Select_expandButton__UTwlR","expandIcon":"Select_expandIcon__gWAIB"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Spinner/Spinner.js

@@ -1,2 +1,11 @@
-import{jsx}from"react/jsx-runtime";import cn from"classnames";import SvgSpinner from"./spinner.svg.js";import S from"./Spinner.styl.js";const Spinner=({size:r="m",className:n="",...s})=>{r=cn(S.root,S["size-"+r],n);return jsx(SvgSpinner,{className:r,...s})};export{Spinner};
-//# sourceMappingURL=Spinner.js.map
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import SvgSpinner from './spinner.svg.js';
+import S from './Spinner.styl.js';
+
+const Spinner = ({ size = 'm', className = '', ...props }) => {
+    const classes = cn(S.root, S[`size-${size}`], className);
+    return jsx(SvgSpinner, { className: classes, ...props });
+};
+
+export { Spinner };

package/dist/esm/src/components/Spinner/Spinner.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Spinner_root__DsSOz{animation:Spinner_spin__7XKOR .5s linear infinite;color:inherit;display:inline-block}.Spinner_size-s__sc9kC{height:16px;width:16px}.Spinner_size-m__MY4q0{height:20px;width:20px}.Spinner_size-l__p16ZU{height:30px;width:30px}@keyframes Spinner_spin__7XKOR{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}",S={root:"Spinner_root__DsSOz",spin:"Spinner_spin__7XKOR","size-s":"Spinner_size-s__sc9kC","size-m":"Spinner_size-m__MY4q0","size-l":"Spinner_size-l__p16ZU"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Spinner.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Spinner_root__DsSOz{animation:Spinner_spin__7XKOR .5s linear infinite;color:inherit;display:inline-block}.Spinner_size-s__sc9kC{height:16px;width:16px}.Spinner_size-m__MY4q0{height:20px;width:20px}.Spinner_size-l__p16ZU{height:30px;width:30px}@keyframes Spinner_spin__7XKOR{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";
+var S = {"root":"Spinner_root__DsSOz","spin":"Spinner_spin__7XKOR","size-s":"Spinner_size-s__sc9kC","size-m":"Spinner_size-m__MY4q0","size-l":"Spinner_size-l__p16ZU"};
+styleInject(css_248z);
+
+export { S as default };