@homecode/ui 4.18.16 → 4.18.18

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

@@ -1,2 +1,274 @@
-import{jsx,jsxs}from"react/jsx-runtime";import{Component,createRef,createElement}from"react";import cn from"classnames";import{createStore}from"justorm/react";import omit from"lodash.omit";import Time from"timen";import{isTouch}from"../../tools/dom.js";import{unobserve,observe}from"../../tools/resizeObserver.js";import S from"./Scroll.styl.js";import debounce from"../../tools/debounce.js";const getEventCoords=e=>({x:e.clientX,y:e.clientY}),AXES=["x","y"],BY_AXIS={x:{scrollPos:"scrollLeft",scrollSize:"scrollWidth",size:"width",offsetSize:"offsetWidth",innerSize:"clientWidth",posField:"left"},y:{scrollPos:"scrollTop",scrollSize:"scrollHeight",size:"height",offsetSize:"offsetHeight",innerSize:"clientHeight",posField:"top"}};class Scroll extends Component{innerElem;onInnerRef=e=>{this.innerElem&&unobserve(this.innerElem,this.updateAll),this.innerElem=e,this.props.onInnerRef?.(e),e&&(this.updateAll(),observe(e,this.updateAll))};thumbELem={x:createRef(),y:createRef()};store;isTouch;timers=Time.create();currAxis;pos={x:0,y:0};prevCoords={x:0,y:0};prevScrolls={x:0,y:0};prevBoundings={x:0,y:0};unsubscribeScrollHeightObserver;static defaultProps={size:"m"};constructor(e){super(e),this.isTouch=isTouch(),this.store=createStore(this,{isScrolling:!1,activeAxis:null,coeff:{x:0,y:0}})}componentDidMount(){this.updateAll(),this.unsubscribeScrollHeightObserver=Time.every(100,this.observeScrollHeight),document.addEventListener("scroll",this.onDocScroll)}componentWillUnmount(){this.unsubscribeScrollHeightObserver?.(),this.unsubscribePointerMoveUp(),document.removeEventListener("scroll",this.onDocScroll)}eachAxis=t=>AXES.map(e=>this.props[e]&&t(e));observeScrollHeight=()=>{this.eachAxis(e=>{(this.props[e]&&this.isScrollChanged(e)||this.isBoudingsChanged(e))&&this.update(e)})};isScrollChanged(e){var t=this.getScrollSize(e),s=this.prevScrolls[e]!==t[e];return s&&(this.prevScrolls[e]=t),s}isBoudingsChanged(e){var t=this.getoffsetSize(e),s=this.prevBoundings[e]!==t[e];return s&&(this.prevBoundings[e]=t[e]),s}getoffsetSize=e=>this.innerElem[BY_AXIS[e].offsetSize];getInnerSize=e=>this.innerElem[BY_AXIS[e].innerSize];getScrollSize=e=>this.innerElem[BY_AXIS[e].scrollSize];getScrollPos=e=>this.innerElem[BY_AXIS[e].scrollPos];getThumbSize=e=>this.thumbELem[e].current[BY_AXIS[e].offsetSize];getOffset(e){var t=this.props.offset?.[e],e="y"===e;return{[e?"top":"left"]:t?.before||0,[e?"bottom":"right"]:t?.after||0}}getCoeffStyle=e=>100*this.store.coeff[e]+"%";getPosStyle=e=>this.pos[e]+"px";updateAll=()=>{this.eachAxis(this.update)};update=e=>{this.updateCoeff(e),this.updatePos(e)};updateCoeff(e){var t,s=this.thumbELem[e].current;this.innerElem&&(t=BY_AXIS[e].size,this.store.coeff[e]=this.getInnerSize(e)/this.getScrollSize(e),s)&&(s.style[t]=this.getCoeffStyle(e))}updatePos=e=>{var t,s,i,o,r,n,l,h=this.thumbELem[e].current;this.innerElem&&h&&(s=this.props["offset"],t=s?.[e]?.before||0,s=s?.[e]?.after||0,i=this.getInnerSize(e),o=this.getThumbSize(e),r=this.getScrollSize(e),n=this.getScrollPos(e),l=BY_AXIS[e].posField,this.pos[e]=o?n/(r-i)*(i-o-t-s):0,h.style[l]=this.getPosStyle(e))};updateScroll=(e,t)=>{var t=getEventCoords(t),s=BY_AXIS[e].scrollPos,i=t[e]-this.prevCoords[e];this.prevCoords=t,this.innerElem[s]+=i/this.store.coeff[e]};dropScrollingState=debounce(()=>this.store.isScrolling=!1,2e3);subscribePointerMoveUp=()=>{document.addEventListener("pointermove",this.onPointerMove,{passive:!1}),document.addEventListener("pointerup",this.onPointerUp)};unsubscribePointerMoveUp=()=>{document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)};onDocScroll=e=>{var t=this.store["activeAxis"];t&&this.innerElem!==e.target&&(e.preventDefault(),e.stopPropagation())};onInnerScroll=e=>{var t,s,i;this.innerElem===e.target&&(t=this.props["onScroll"],{activeAxis:s,isScrolling:i}=this.store,t?.(e),s||this.eachAxis(e=>{this.isScrollChanged(e)&&this.update(e)}),i||(this.store.isScrolling=!0),this.dropScrollingState())};onPointerDown=(e,t)=>{t.preventDefault(),t.stopPropagation(),this.prevCoords=getEventCoords(t),this.store.activeAxis=e,this.subscribePointerMoveUp()};onPointerMove=e=>{var t=this.store["activeAxis"];t&&(e.preventDefault(),e.stopPropagation(),this.updateScroll(t,e),this.updatePos(t))};onPointerUp=e=>{e.stopPropagation(),this.store.activeAxis=null,this.dropScrollingState(),this.unsubscribePointerMoveUp()};renderBar=e=>{var t,s=this.props["thumbClassName"],{activeAxis:i,coeff:o}=this.store;return 1===o[e]?null:(o=BY_AXIS[e].size,t=BY_AXIS[e].posField,o={[o]:this.getCoeffStyle(e),[t]:this.getPosStyle(e)},t={className:cn(S.bar,S[e],i===e&&S.isActive),style:this.getOffset(e),onPointerDown:this.onPointerDown.bind(this,e)},createElement("div",{...t,key:"bar-"+e},jsx("div",{className:cn(S.thumb,s),style:o,ref:this.thumbELem[e]})))};renderInner(){var{innerClassName:e,innerProps:t,children:s,smooth:i}=this.props,o=this.store["activeAxis"],e=cn(S.inner,t?.className,e,!o&&i&&S.smooth),o={...t};return o.onScrollCapture=this.onInnerScroll,createElement("div",{...o,className:e,ref:this.onInnerRef,key:"inner"},s)}render(){var{y:e,x:t,size:s,fadeSize:i,extraWide:o,autoHide:r,className:n}=this.props,{isScrolling:l,activeAxis:h}=this.store,e=cn(S.root,e&&S.y,t&&S.x,S["size-"+s],i&&S["fadeSize-"+i],r&&S.autoHide,o&&S.extraWide,(l||h)&&S.isScrolling,this.isTouch&&S.isTouch,n),t=omit(this.props,["x","y","offset","size","fadeSize","smooth","className","innerClassName","innerProps","onInnerRef","thumbClassName","autoHide","children","extraWide"]);return jsxs("div",{className:e,...t,children:[this.renderInner(),this.eachAxis(this.renderBar)]})}}export{Scroll};
-//# sourceMappingURL=Scroll.js.map
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Component, createRef, createElement } from 'react';
+import cn from 'classnames';
+import { createStore } from 'justorm/react';
+import omit from 'lodash.omit';
+import Time from 'timen';
+import { isTouch } from '../../tools/dom.js';
+import { unobserve, observe } from '../../tools/resizeObserver.js';
+import S from './Scroll.styl.js';
+import debounce from '../../tools/debounce.js';
+
+const getEventCoords = e => ({
+    x: e.clientX,
+    y: e.clientY,
+});
+const AXES = ['x', 'y'];
+const BY_AXIS = {
+    x: {
+        scrollPos: 'scrollLeft',
+        scrollSize: 'scrollWidth',
+        size: 'width',
+        offsetSize: 'offsetWidth',
+        innerSize: 'clientWidth',
+        posField: 'left',
+    },
+    y: {
+        scrollPos: 'scrollTop',
+        scrollSize: 'scrollHeight',
+        size: 'height',
+        offsetSize: 'offsetHeight',
+        innerSize: 'clientHeight',
+        posField: 'top',
+    },
+};
+class Scroll extends Component {
+    innerElem;
+    onInnerRef = elem => {
+        if (this.innerElem) {
+            unobserve(this.innerElem, this.updateAll);
+        }
+        this.innerElem = elem;
+        this.props.onInnerRef?.(elem);
+        if (elem) {
+            this.updateAll();
+            observe(elem, this.updateAll);
+        }
+    };
+    thumbELem = {
+        x: createRef(),
+        y: createRef(),
+    };
+    store;
+    isTouch;
+    timers = Time.create();
+    currAxis;
+    pos = { x: 0, y: 0 };
+    prevCoords = { x: 0, y: 0 };
+    prevScrolls = { x: 0, y: 0 };
+    prevBoundings = { x: 0, y: 0 };
+    unsubscribeScrollHeightObserver;
+    static defaultProps = { size: 'm' };
+    constructor(props) {
+        super(props);
+        this.isTouch = isTouch();
+        this.store = createStore(this, {
+            isScrolling: false,
+            activeAxis: null,
+            coeff: { x: 0, y: 0 },
+        });
+    }
+    componentDidMount() {
+        this.updateAll();
+        this.unsubscribeScrollHeightObserver = Time.every(100, this.observeScrollHeight);
+        document.addEventListener('scroll', this.onDocScroll);
+    }
+    componentWillUnmount() {
+        this.unsubscribeScrollHeightObserver?.();
+        this.unsubscribePointerMoveUp();
+        document.removeEventListener('scroll', this.onDocScroll);
+    }
+    eachAxis = fn => AXES.map(axis => this.props[axis] && fn(axis));
+    observeScrollHeight = () => {
+        this.eachAxis(axis => {
+            if ((this.props[axis] && this.isScrollChanged(axis)) ||
+                this.isBoudingsChanged(axis)) {
+                this.update(axis);
+            }
+        });
+    };
+    isScrollChanged(axis) {
+        const currScrolls = this.getScrollSize(axis);
+        const isChanged = this.prevScrolls[axis] !== currScrolls[axis];
+        if (isChanged)
+            this.prevScrolls[axis] = currScrolls;
+        return isChanged;
+    }
+    isBoudingsChanged(axis) {
+        const curroffsetSize = this.getoffsetSize(axis);
+        const isChanged = this.prevBoundings[axis] !== curroffsetSize[axis];
+        if (isChanged)
+            this.prevBoundings[axis] = curroffsetSize[axis];
+        return isChanged;
+    }
+    getoffsetSize = axis => this.innerElem[BY_AXIS[axis].offsetSize];
+    getInnerSize = axis => this.innerElem[BY_AXIS[axis].innerSize];
+    getScrollSize = axis => this.innerElem[BY_AXIS[axis].scrollSize];
+    getScrollPos = axis => this.innerElem[BY_AXIS[axis].scrollPos];
+    getThumbSize = axis => this.thumbELem[axis].current[BY_AXIS[axis].offsetSize];
+    getOffset(axis) {
+        const offset = this.props.offset?.[axis];
+        const isVertical = axis === 'y';
+        const before = isVertical ? 'top' : 'left';
+        const after = isVertical ? 'bottom' : 'right';
+        return {
+            [before]: offset?.before || 0,
+            [after]: offset?.after || 0,
+        };
+    }
+    getCoeffStyle = axis => `${this.store.coeff[axis] * 100}%`;
+    getPosStyle = axis => `${this.pos[axis]}px`;
+    updateAll = () => {
+        this.eachAxis(this.update);
+    };
+    update = axis => {
+        this.updateCoeff(axis);
+        this.updatePos(axis);
+    };
+    updateCoeff(axis) {
+        const thumb = this.thumbELem[axis].current;
+        if (!this.innerElem)
+            return;
+        const sizeField = BY_AXIS[axis].size;
+        this.store.coeff[axis] = this.getInnerSize(axis) / this.getScrollSize(axis);
+        if (thumb)
+            thumb.style[sizeField] = this.getCoeffStyle(axis);
+    }
+    updatePos = axis => {
+        const thumb = this.thumbELem[axis].current;
+        if (!this.innerElem || !thumb)
+            return;
+        const { offset } = this.props;
+        const offsetBefore = offset?.[axis]?.before || 0;
+        const offsetAfter = offset?.[axis]?.after || 0;
+        const innerSize = this.getInnerSize(axis);
+        const thumbSize = this.getThumbSize(axis);
+        const scrollSize = this.getScrollSize(axis);
+        const scrollPos = this.getScrollPos(axis);
+        const posField = BY_AXIS[axis].posField;
+        // const AXIS = axis.toUpperCase();
+        const pos = thumbSize
+            ? (innerSize - thumbSize - offsetBefore - offsetAfter) *
+                (scrollPos / (scrollSize - innerSize))
+            : 0;
+        this.pos[axis] = pos;
+        // thumb.style.transform = `translate${AXIS}(${pos}px)`;
+        thumb.style[posField] = this.getPosStyle(axis);
+    };
+    updateScroll = (axis, e) => {
+        const coords = getEventCoords(e);
+        const scrollPos = BY_AXIS[axis].scrollPos;
+        const pos = coords[axis] - this.prevCoords[axis];
+        this.prevCoords = coords;
+        this.innerElem[scrollPos] += pos / this.store.coeff[axis];
+    };
+    dropScrollingState = debounce(() => (this.store.isScrolling = false), 2000);
+    subscribePointerMoveUp = () => {
+        document.addEventListener('pointermove', this.onPointerMove, {
+            passive: false, // do not generate passive event warning
+        });
+        document.addEventListener('pointerup', this.onPointerUp);
+    };
+    unsubscribePointerMoveUp = () => {
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+    };
+    onDocScroll = e => {
+        const { activeAxis } = this.store;
+        // if dragging thumb - prevent any other scrolls
+        if (activeAxis && this.innerElem !== e.target) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    onInnerScroll = e => {
+        if (this.innerElem !== e.target)
+            return;
+        const { onScroll } = this.props;
+        const { activeAxis, isScrolling } = this.store;
+        onScroll?.(e);
+        if (!activeAxis) {
+            this.eachAxis(axis => {
+                if (this.isScrollChanged(axis))
+                    this.update(axis);
+            });
+        }
+        if (!isScrolling)
+            this.store.isScrolling = true;
+        this.dropScrollingState();
+    };
+    onPointerDown = (axis, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // TOOD: if target is bar(not thumb) - move thumb to target coords
+        this.prevCoords = getEventCoords(e);
+        this.store.activeAxis = axis;
+        this.subscribePointerMoveUp();
+    };
+    onPointerMove = e => {
+        const { activeAxis: axis } = this.store;
+        if (!axis)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        this.updateScroll(axis, e);
+        this.updatePos(axis);
+    };
+    onPointerUp = e => {
+        e.stopPropagation();
+        this.store.activeAxis = null;
+        this.dropScrollingState();
+        this.unsubscribePointerMoveUp();
+    };
+    renderBar = axis => {
+        const { thumbClassName } = this.props;
+        const { activeAxis, coeff } = this.store;
+        if (coeff[axis] === 1)
+            return null;
+        const sizeField = BY_AXIS[axis].size;
+        const posField = BY_AXIS[axis].posField;
+        const thumbStyle = {
+            [sizeField]: this.getCoeffStyle(axis),
+            [posField]: this.getPosStyle(axis),
+        };
+        const barProps = {
+            className: cn(S.bar, S[axis], activeAxis === axis && S.isActive),
+            style: this.getOffset(axis),
+            onPointerDown: this.onPointerDown.bind(this, axis),
+        };
+        return (createElement("div", { ...barProps, key: `bar-${axis}` },
+            jsx("div", { className: cn(S.thumb, thumbClassName), style: thumbStyle, ref: this.thumbELem[axis] })));
+    };
+    renderInner() {
+        const { innerClassName, innerProps, children, smooth } = this.props;
+        const { activeAxis } = this.store;
+        const innerClasses = cn(S.inner, innerProps?.className, innerClassName, !activeAxis && smooth && S.smooth);
+        const props = { ...innerProps };
+        props.onScrollCapture = this.onInnerScroll;
+        return (createElement("div", { ...props, className: innerClasses, ref: this.onInnerRef, key: "inner" }, children));
+    }
+    render() {
+        const { y, x, size, fadeSize, extraWide, autoHide, className } = this.props;
+        const { isScrolling, activeAxis } = this.store;
+        const classes = cn(S.root, y && S.y, x && S.x, S[`size-${size}`], fadeSize && S[`fadeSize-${fadeSize}`], autoHide && S.autoHide, extraWide && S.extraWide, (isScrolling || activeAxis) && S.isScrolling, this.isTouch && S.isTouch, className);
+        const props = omit(this.props, [
+            'x',
+            'y',
+            'offset',
+            'size',
+            'fadeSize',
+            'smooth',
+            'className',
+            'innerClassName',
+            'innerProps',
+            'onInnerRef',
+            'thumbClassName',
+            'autoHide',
+            'children',
+            'extraWide',
+        ]);
+        return (jsxs("div", { className: classes, ...props, children: [this.renderInner(), this.eachAxis(this.renderBar)] }));
+    }
+}
+
+export { Scroll };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z='.Scroll_root__NNx5K{display:flex;overflow:hidden;position:relative}.Scroll_inner__DmxTb{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow:hidden;position:relative;scrollbar-width:none;width:100%}.Scroll_inner__DmxTb.Scroll_smooth__2vqKe{scroll-behavior:smooth}.Scroll_inner__DmxTb::-webkit-scrollbar{display:none}.Scroll_y__2xWol .Scroll_inner__DmxTb{max-height:100%;overflow-y:auto}.Scroll_x__--Ycm .Scroll_inner__DmxTb{max-width:100%;overflow-x:auto}.Scroll_y__2xWol.Scroll_fadeSize-s__WeI0f .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(180deg,transparent 2px,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(180deg,transparent 2px,#000 10px,#000 calc(100% - 10px),transparent)}.Scroll_x__--Ycm.Scroll_fadeSize-s__WeI0f .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(90deg,transparent 2px,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,transparent 2px,#000 10px,#000 calc(100% - 10px),transparent)}.Scroll_y__2xWol.Scroll_fadeSize-m__Hb-1p .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(180deg,transparent 2px,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(180deg,transparent 2px,#000 16px,#000 calc(100% - 16px),transparent)}.Scroll_x__--Ycm.Scroll_fadeSize-m__Hb-1p .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(90deg,transparent 2px,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent 2px,#000 16px,#000 calc(100% - 16px),transparent)}.Scroll_y__2xWol.Scroll_fadeSize-l__E0CbA .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(180deg,transparent 2px,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(180deg,transparent 2px,#000 20px,#000 calc(100% - 20px),transparent)}.Scroll_x__--Ycm.Scroll_fadeSize-l__E0CbA .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(90deg,transparent 2px,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent 2px,#000 20px,#000 calc(100% - 20px),transparent)}.Scroll_y__2xWol.Scroll_fadeSize-xl__jcYk0 .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(180deg,transparent 2px,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(180deg,transparent 2px,#000 30px,#000 calc(100% - 30px),transparent)}.Scroll_x__--Ycm.Scroll_fadeSize-xl__jcYk0 .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(90deg,transparent 2px,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent 2px,#000 30px,#000 calc(100% - 30px),transparent)}.Scroll_autoHide__URLqx>.Scroll_bar__6CL7R{opacity:0}.Scroll_isScrolling__yV2Pj.Scroll_autoHide__URLqx>.Scroll_bar__6CL7R{opacity:1;transition:none}.Scroll_thumb__ccEPj{background-color:var(--accent-color-alpha-200);border-radius:1px;position:absolute;transform-origin:center;transition:background-color .1s ease-out}.Scroll_y__2xWol>.Scroll_thumb__ccEPj{min-height:30px;top:0;width:100%}.Scroll_x__--Ycm>.Scroll_thumb__ccEPj{height:100%;left:0;min-width:30px}.Scroll_bar__6CL7R{cursor:pointer;overflow:hidden;position:absolute;touch-action:none;transition:opacity .3s ease-out .1s;z-index:2}.Scroll_bar__6CL7R:before{background-color:var(--accent-color-alpha-100);border-radius:2px;content:"";opacity:0;position:absolute;transition:opacity .2s ease-out .3s}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi,.Scroll_bar__6CL7R:hover{z-index:1}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi:before,.Scroll_bar__6CL7R:hover:before{opacity:1;transition-delay:0s}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R:hover .Scroll_thumb__ccEPj{background-color:var(--active-color)}.Scroll_bar__6CL7R.Scroll_y__2xWol{bottom:8px;right:0;top:8px;width:16px}.Scroll_isTouch__Vb2mT .Scroll_bar__6CL7R.Scroll_y__2xWol{width:32px}.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_y__2xWol:before{right:30%}.Scroll_bar__6CL7R.Scroll_y__2xWol:before{height:100%}.Scroll_bar__6CL7R.Scroll_x__--Ycm{bottom:0;height:16px;left:8px;right:8px}.Scroll_isTouch__Vb2mT .Scroll_bar__6CL7R.Scroll_x__--Ycm{height:32px}.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{bottom:30%}.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{width:100%}.Scroll_bar__6CL7R.Scroll_x__--Ycm{height:32px}.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{height:1px}.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:2.5px;height:5px}.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:4.5px;height:9px}.Scroll_bar__6CL7R.Scroll_y__2xWol{width:32px}.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{width:1px}.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{border-radius:2.5px;width:5px}.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{border-radius:4.5px;width:9px}.Scroll_extraWide__IL5ZI .Scroll_bar__6CL7R.Scroll_x__--Ycm{height:52px}.Scroll_extraWide__IL5ZI .Scroll_bar__6CL7R.Scroll_y__2xWol{width:52px}',S={root:"Scroll_root__NNx5K",inner:"Scroll_inner__DmxTb",smooth:"Scroll_smooth__2vqKe",y:"Scroll_y__2xWol",x:"Scroll_x__--Ycm","fadeSize-s":"Scroll_fadeSize-s__WeI0f","fadeSize-m":"Scroll_fadeSize-m__Hb-1p","fadeSize-l":"Scroll_fadeSize-l__E0CbA","fadeSize-xl":"Scroll_fadeSize-xl__jcYk0",autoHide:"Scroll_autoHide__URLqx",bar:"Scroll_bar__6CL7R",isScrolling:"Scroll_isScrolling__yV2Pj",thumb:"Scroll_thumb__ccEPj",isActive:"Scroll_isActive__Nkkmi",isTouch:"Scroll_isTouch__Vb2mT","size-s":"Scroll_size-s__px8sG","size-m":"Scroll_size-m__gfTwB","size-l":"Scroll_size-l__Pe4z7",extraWide:"Scroll_extraWide__IL5ZI"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Scroll.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Scroll_root__NNx5K{display:flex;overflow:hidden;position:relative}.Scroll_inner__DmxTb{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow:hidden;position:relative;scrollbar-width:none;width:100%}.Scroll_inner__DmxTb.Scroll_smooth__2vqKe{scroll-behavior:smooth}.Scroll_inner__DmxTb::-webkit-scrollbar{display:none}.Scroll_y__2xWol .Scroll_inner__DmxTb{max-height:100%;overflow-y:auto}.Scroll_x__--Ycm .Scroll_inner__DmxTb{max-width:100%;overflow-x:auto}.Scroll_y__2xWol.Scroll_fadeSize-s__WeI0f .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(180deg,transparent 2px,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(180deg,transparent 2px,#000 10px,#000 calc(100% - 10px),transparent)}.Scroll_x__--Ycm.Scroll_fadeSize-s__WeI0f .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(90deg,transparent 2px,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,transparent 2px,#000 10px,#000 calc(100% - 10px),transparent)}.Scroll_y__2xWol.Scroll_fadeSize-m__Hb-1p .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(180deg,transparent 2px,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(180deg,transparent 2px,#000 16px,#000 calc(100% - 16px),transparent)}.Scroll_x__--Ycm.Scroll_fadeSize-m__Hb-1p .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(90deg,transparent 2px,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent 2px,#000 16px,#000 calc(100% - 16px),transparent)}.Scroll_y__2xWol.Scroll_fadeSize-l__E0CbA .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(180deg,transparent 2px,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(180deg,transparent 2px,#000 20px,#000 calc(100% - 20px),transparent)}.Scroll_x__--Ycm.Scroll_fadeSize-l__E0CbA .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(90deg,transparent 2px,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent 2px,#000 20px,#000 calc(100% - 20px),transparent)}.Scroll_y__2xWol.Scroll_fadeSize-xl__jcYk0 .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(180deg,transparent 2px,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(180deg,transparent 2px,#000 30px,#000 calc(100% - 30px),transparent)}.Scroll_x__--Ycm.Scroll_fadeSize-xl__jcYk0 .Scroll_inner__DmxTb{-webkit-mask-image:linear-gradient(90deg,transparent 2px,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent 2px,#000 30px,#000 calc(100% - 30px),transparent)}.Scroll_autoHide__URLqx>.Scroll_bar__6CL7R{opacity:0}.Scroll_isScrolling__yV2Pj.Scroll_autoHide__URLqx>.Scroll_bar__6CL7R{opacity:1;transition:none}.Scroll_thumb__ccEPj{background-color:var(--accent-color-alpha-200);border-radius:1px;position:absolute;transform-origin:center;transition:background-color .1s ease-out}.Scroll_y__2xWol>.Scroll_thumb__ccEPj{min-height:30px;top:0;width:100%}.Scroll_x__--Ycm>.Scroll_thumb__ccEPj{height:100%;left:0;min-width:30px}.Scroll_bar__6CL7R{cursor:pointer;overflow:hidden;position:absolute;touch-action:none;transition:opacity .3s ease-out .1s;z-index:2}.Scroll_bar__6CL7R:before{background-color:var(--accent-color-alpha-100);border-radius:2px;content:\"\";opacity:0;position:absolute;transition:opacity .2s ease-out .3s}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi,.Scroll_bar__6CL7R:hover{z-index:1}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi:before,.Scroll_bar__6CL7R:hover:before{opacity:1;transition-delay:0s}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R:hover .Scroll_thumb__ccEPj{background-color:var(--active-color)}.Scroll_bar__6CL7R.Scroll_y__2xWol{bottom:8px;right:0;top:8px;width:16px}.Scroll_isTouch__Vb2mT .Scroll_bar__6CL7R.Scroll_y__2xWol{width:32px}.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_y__2xWol:before{right:30%}.Scroll_bar__6CL7R.Scroll_y__2xWol:before{height:100%}.Scroll_bar__6CL7R.Scroll_x__--Ycm{bottom:0;height:16px;left:8px;right:8px}.Scroll_isTouch__Vb2mT .Scroll_bar__6CL7R.Scroll_x__--Ycm{height:32px}.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{bottom:30%}.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{width:100%}.Scroll_bar__6CL7R.Scroll_x__--Ycm{height:32px}.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{height:1px}.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:2.5px;height:5px}.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:4.5px;height:9px}.Scroll_bar__6CL7R.Scroll_y__2xWol{width:32px}.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{width:1px}.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-m__gfTwB>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{border-radius:2.5px;width:5px}.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-l__Pe4z7>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{border-radius:4.5px;width:9px}.Scroll_extraWide__IL5ZI .Scroll_bar__6CL7R.Scroll_x__--Ycm{height:52px}.Scroll_extraWide__IL5ZI .Scroll_bar__6CL7R.Scroll_y__2xWol{width:52px}";
+var S = {"root":"Scroll_root__NNx5K","inner":"Scroll_inner__DmxTb","smooth":"Scroll_smooth__2vqKe","y":"Scroll_y__2xWol","x":"Scroll_x__--Ycm","fadeSize-s":"Scroll_fadeSize-s__WeI0f","fadeSize-m":"Scroll_fadeSize-m__Hb-1p","fadeSize-l":"Scroll_fadeSize-l__E0CbA","fadeSize-xl":"Scroll_fadeSize-xl__jcYk0","autoHide":"Scroll_autoHide__URLqx","bar":"Scroll_bar__6CL7R","isScrolling":"Scroll_isScrolling__yV2Pj","thumb":"Scroll_thumb__ccEPj","isActive":"Scroll_isActive__Nkkmi","isTouch":"Scroll_isTouch__Vb2mT","size-s":"Scroll_size-s__px8sG","size-m":"Scroll_size-m__gfTwB","size-l":"Scroll_size-l__Pe4z7","extraWide":"Scroll_extraWide__IL5ZI"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,37 @@
-function isMultiple(e){return Array.isArray(e)}function renderLabel({label:e,render:r}){return r?r(e):e}function buildOptionsTree(e,i){function t(e){var{items:r,childIds:n}=i,r={...r[e]},n=n[e];return n&&(r.children=n.map(t)),r}return e.reduce((e,{id:r,parentId:n})=>n?e:[...e,t(r)],[])}function mapById(e){return e.reduce((e,r)=>{var{items:n,childIds:i}=e,{id:t,parentId:d}=r;return n[t]=r,d&&(i[d]||(i[d]=[]),i[d].push(t)),e},{items:{},childIds:{}})}export{buildOptionsTree,isMultiple,mapById,renderLabel};
-//# sourceMappingURL=Select.helpers.js.map
+function isMultiple(value) {
+    return Array.isArray(value);
+}
+function renderLabel({ label, render }) {
+    if (render)
+        return render(label);
+    return label;
+}
+function buildOptionsTree(options, idsMap) {
+    function buildOption(id) {
+        const { items, childIds } = idsMap;
+        const data = { ...items[id] };
+        const childs = childIds[id];
+        if (childs)
+            data.children = childs.map(buildOption);
+        return data;
+    }
+    return options.reduce((acc, { id, parentId }) => (parentId ? acc : [...acc, buildOption(id)]), []);
+}
+function mapById(options) {
+    return options.reduce((acc, item) => {
+        const { items, childIds } = acc;
+        const { id, parentId } = item;
+        items[id] = item;
+        if (parentId) {
+            if (!childIds[parentId])
+                childIds[parentId] = [];
+            childIds[parentId].push(id);
+        }
+        return acc;
+    }, {
+        items: {},
+        childIds: {},
+    });
+}
+
+export { buildOptionsTree, isMultiple, mapById, renderLabel };