@homecode/ui 4.11.1

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

@@ -0,0 +1,583 @@
+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)
+            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 { 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}`]);
+        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 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: this.renderOptions() }, "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, ...popupProps, isOpen: isOpen, 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

@@ -0,0 +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);margin-right:0!important;transition:transform .2s ease-out;width:14px!important}.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:10px;padding-top:10px}.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:12px;height:26px;padding:0 10px}.Select_size-m__jp7n- .Select_option__iJkfJ{font-size:16px;height:34px;padding:0 12px}.Select_size-l__b4EEy .Select_option__iJkfJ{font-size:20px;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","isOpen":"Select_isOpen__WlMUH","triggerButton":"Select_triggerButton__lErtt","size-s":"Select_size-s__qBK9t","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","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

@@ -0,0 +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 = '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

@@ -0,0 +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)}}";
+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 };

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+var _circle;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgSpinner = function SvgSpinner(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 50,
+    height: 50,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 100 100",
+    preserveAspectRatio: "xMidYMid"
+  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 50,
+    cy: 50,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 8,
+    r: 45,
+    strokeDasharray: "212.05750411731105 72.68583470577035",
+    transform: "rotate(270 50 50)"
+  })));
+};
+
+export { SvgSpinner as default };

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

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Component } from 'react';
+import cn from 'classnames';
+import { Paranja } from '../Paranja/Paranja.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import S from './Table.styl.js';
+
+class Table extends Component {
+    renderHeaderColumn = ({ id, label, sticky }) => (jsx("th", { className: cn(sticky && S.sticky), children: label }, id));
+    renderRow = data => {
+        const { columns } = this.props;
+        return (jsx("tr", { children: columns.map(param => this.renderDataCol(param, data)) }, data.id));
+    };
+    renderDataCol({ id, dataField, render, sticky }, data) {
+        return (jsx("td", { className: cn(sticky && S.sticky), children: render ? render(data) : data[dataField || id] }, id));
+    }
+    render() {
+        const { className, columns, isLoading = false, loadingText, blur, data, } = this.props;
+        return (jsxs("div", { className: cn(S.root, blur && S.blur, className), children: [jsx(Scroll, { x: true, y: true, offset: { x: { before: 10, after: 10 } }, children: jsxs("table", { children: [jsx("thead", { children: jsx("tr", { children: columns.map(this.renderHeaderColumn) }) }), jsx("tbody", { children: data.map(this.renderRow) })] }) }), jsx(Paranja, { inline: true, visible: isLoading, blur: blur, children: isLoading && (loadingText ?? jsx(Spinner, {})) })] }));
+    }
+}
+
+export { Table };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Table_root__PxLR-{border-radius:var(--border-radius-l);box-shadow:0 0 0 2px var(--accent-color-alpha-100);overflow:hidden;position:relative}.Table_root__PxLR- table{min-width:100%}.Table_root__PxLR- tbody{overflow-scrolling:touch;overflow:auto}.Table_root__PxLR- thead{position:sticky;top:0;z-index:1}.Table_root__PxLR- td{box-shadow:inset 0 1px 0 0 var(--accent-color-alpha-100)}.Table_root__PxLR- td,.Table_root__PxLR- th{min-width:5em;padding:var(--indent-s);text-align:left}.Table_root__PxLR- th{background-color:var(--accent-color-alpha-100);padding-bottom:16px}.Table_root__PxLR- td{vertical-align:top}.Table_root__PxLR- tr:last-child td{padding-bottom:var(--indent-l)}.Table_sticky__99lks{background-color:var(--decent-color);left:0;position:sticky;z-index:1}th.Table_sticky__99lks{background-color:var(--accent-color);color:var(--decent-color)}.Table_blur__UwMAo .Table_sticky__99lks{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--decent-color-alpha-500)}.Table_blur__UwMAo th.Table_sticky__99lks{background-color:var(--accent-color-alpha-500);color:var(--decent-color-alpha-800)}";
+var S = {"root":"Table_root__PxLR-","sticky":"Table_sticky__99lks","blur":"Table_blur__UwMAo"};
+styleInject(css_248z);
+
+export { S as default };