@homecode/ui 5.1.9 → 5.1.11

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

@@ -1,2 +1,308 @@
-import{jsx,jsxs}from"react/jsx-runtime";import{forwardRef,useRef,useImperativeHandle,useState,useMemo,useCallback,useEffect,createElement}from"react";import cn from"classnames";import Time from"timen";import{isTouch}from"../../tools/dom.js";import{observe,unobserve}from"../../tools/resizeObserver.js";import S from"./Scroll.styl.js";import useEvent from"../../hooks/useEvent.js";import{useDebounce}from"../../hooks/useDebounce.js";const getEventCoords=e=>({x:e.clientX,y:e.clientY}),OFFSET_THRESHOLD=5,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"}},Scroll=forwardRef(function(s,e){const{x:n,y:c,offset:u,size:O="m",fadeSize:t,smooth:r,className:j,innerClassName:o,xScrollbarClassName:F,yScrollbarClassName:P,innerProps:l,onInnerRef:a,thumbClassName:i,autoHide:L,children:f,onScroll:m,...W}=s,p=useRef(null);const b={x:useRef(null),y:useRef(null)},[v,h]=(useImperativeHandle(e,()=>({innerElem:p.current})),useState(!1)),[d,C]=useState(null),[k,w]=useState({x:0,y:0}),[y,M]=useState({top:!1,left:!1,right:!1,bottom:!1});e=useMemo(()=>isTouch(),[]);const E=useRef({x:0,y:0}),g=useRef({x:0,y:0}),x=useRef({x:0,y:0}),z=useRef({x:0,y:0}),A=useCallback(t=>AXES.map(e=>s[e]&&t(e)),[n,c]),H=e=>p.current[BY_AXIS[e].offsetSize],R=e=>p.current[BY_AXIS[e].innerSize],X=e=>p.current[BY_AXIS[e].scrollSize],I=e=>p.current[BY_AXIS[e].scrollPos],q=e=>b[e].current[BY_AXIS[e].offsetSize],G=useCallback(e=>{var t=u?.[e],e="y"===e;return{[e?"top":"left"]:t?.before||0,[e?"bottom":"right"]:t?.after||0}},[u]),J=useCallback(e=>100*k[e]+"%",[k]),K=e=>E.current[e]+"px",T=useCallback(e=>{var t=X(e),r=x.current[e]!==t;return r&&(x.current[e]=t),r},[X]),Q=useCallback(e=>{var t=H(e),r=z.current[e]!==t;return r&&(z.current[e]=t),r},[H]),U=useCallback(t=>{var e=b[t].current;if(p.current){var r=BY_AXIS[t].size;const s=R(t)/X(t);k[t]!==s&&w(e=>({...e,[t]:s})),e&&(e.style[r]=100*s+"%")}},[k,R,X,b]),_=useCallback(e=>{var t,r,s,o,l,a,n,c=b[e].current;p.current&&c&&(t=u?.[e]?.before||0,r=u?.[e]?.after||0,s=R(e),o=q(e),l=X(e),n=I(e),a=BY_AXIS[e].posField,n=o?n/(l-s)*(s-o-t-r):0,E.current[e]=n,c.style[a]=n+"px")},[R,I,X,q,u,b]),B=useCallback(e=>{U(e),_(e)},[U,_]),Y=useCallback(()=>{if(p.current){const{scrollTop:t,scrollLeft:r,scrollHeight:s,scrollWidth:o,offsetHeight:l,offsetWidth:a}=p.current;M(e=>{e={...e};return c&&(e.top=0<t,e.bottom=s-(t+l)>OFFSET_THRESHOLD),!n||e.top||e.bottom||(e.left=0<r,e.right=o-(r+a)>OFFSET_THRESHOLD),e})}},[n,c]),D=useCallback(()=>{p.current&&(A(e=>B(e)),Y())},[A,B,Y]),V=useCallback((e,t)=>{var t=getEventCoords(t),r=BY_AXIS[e].scrollPos,s=t[e]-g.current[e];g.current=t,p.current[r]+=s/k[e]},[k]),N=useDebounce(()=>{h(!1)},2e3),Z=useCallback(()=>{A(e=>{(s[e]&&T(e)||Q(e))&&B(e)})},[s,Q,T,B]);var $=useCallback(e=>{d&&p.current!==e.target&&(e.preventDefault(),e.stopPropagation())},[d]);const ee=useCallback(e=>{p.current===e.target&&(Y(),m?.(e),d||A(_),v||h(!0),N())},[d,N,A,T,v,m,B,Y]),te=useCallback((e,t)=>{t.preventDefault(),t.stopPropagation(),g.current=getEventCoords(t),C(e)},[]),re=useCallback(e=>{d&&(e.preventDefault(),e.stopPropagation(),V(d,e),_(d))},[d,_,V]),se=useCallback(e=>{e.stopPropagation(),C(null),N()},[N]);useEffect(()=>{if(p.current)return D(),observe(p.current,D),a?.(p.current),()=>{unobserve(p.current,D)}},[a]),useEffect(()=>{const e=Time.every(100,Z);return()=>{e?.()}},[Z]),useEvent({elem:document,event:"scroll",callback:$}),useEvent({elem:document,event:["pointermove","pointerup"],callback:e=>{"pointermove"===e.type?re(e):"pointerup"===e.type&&se(e)},isActive:!!d});var $=useCallback(t=>{var e,r;return s[t]&&1!==k[t]?(e=BY_AXIS[t].size,r=BY_AXIS[t].posField,e={[e]:J(t),[r]:K(t)},r={className:cn(S.bar,S[t],d===t&&S.isActive,s[t+"ScrollbarClassName"]),style:G(t),onPointerDown:e=>te(t,e)},createElement("div",{...r,key:"bar-"+t},jsx("div",{className:cn(S.thumb,i),style:e,ref:b[t]}))):null},[d,k,J,G,K,te,s,i,b]),oe=useCallback(()=>{var e=cn(S.inner,l?.className,o,!d&&r&&S.smooth,y.top&&S.hasOffsetTop,y.bottom&&S.hasOffsetBottom,y.right&&S.hasOffsetRight,y.left&&S.hasOffsetLeft),t={...l};return t.onScrollCapture=ee,createElement("div",{...t,className:e,ref:p,key:"inner"},f)},[d,f,y,o,l,ee,r]),e=cn(S.root,c&&S.y,n&&S.x,S["size-"+O],t&&S["fadeSize-"+t],L&&S.autoHide,(v||d)&&S.isScrolling,e?S.isTouch:S.isDesktop,j);return jsxs("div",{className:e,...W,children:[oe(),AXES.map($)]})});export{Scroll};
-//# sourceMappingURL=Scroll.js.map
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle, useState, useMemo, useCallback, useEffect, createElement } from 'react';
+import cn from 'classnames';
+import Time from 'timen';
+import { isTouch } from '../../tools/dom.js';
+import { observe, unobserve } from '../../tools/resizeObserver.js';
+import S from './Scroll.styl.js';
+import useEvent from '../../hooks/useEvent.js';
+import { useDebounce } from '../../hooks/useDebounce.js';
+
+const getEventCoords = e => ({
+    x: e.clientX,
+    y: e.clientY,
+});
+const OFFSET_THRESHOLD = 5;
+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',
+    },
+};
+const Scroll = forwardRef(function Scroll(props, ref) {
+    const { x, y, offset, size = 'm', fadeSize, smooth, className, innerClassName, xScrollbarClassName, yScrollbarClassName, innerProps, onInnerRef, thumbClassName, autoHide, children, onScroll, ...rest } = props;
+    const innerElemRef = useRef(null);
+    const thumbXRef = useRef(null);
+    const thumbYRef = useRef(null);
+    const thumbElemRef = {
+        x: thumbXRef,
+        y: thumbYRef,
+    };
+    useImperativeHandle(ref, () => ({
+        innerElem: innerElemRef.current,
+    }));
+    const [isScrolling, setIsScrolling] = useState(false);
+    const [activeAxis, setActiveAxis] = useState(null);
+    const [coeff, setCoeff] = useState({ x: 0, y: 0 });
+    const [hasOffset, setHasOffset] = useState({
+        top: false,
+        left: false,
+        right: false,
+        bottom: false,
+    });
+    const isTouchDevice = useMemo(() => isTouch(), []);
+    const posRef = useRef({ x: 0, y: 0 });
+    const prevCoordsRef = useRef({ x: 0, y: 0 });
+    const prevScrollsRef = useRef({ x: 0, y: 0 });
+    const prevBoundingsRef = useRef({ x: 0, y: 0 });
+    const eachAxis = useCallback(fn => AXES.map(axis => props[axis] && fn(axis)), [x, y]);
+    const getOffsetSize = axis => innerElemRef.current[BY_AXIS[axis].offsetSize];
+    const getInnerSize = axis => innerElemRef.current[BY_AXIS[axis].innerSize];
+    const getScrollSize = axis => innerElemRef.current[BY_AXIS[axis].scrollSize];
+    const getScrollPos = axis => innerElemRef.current[BY_AXIS[axis].scrollPos];
+    const getThumbSize = axis => thumbElemRef[axis].current[BY_AXIS[axis].offsetSize];
+    const getOffset = useCallback(axis => {
+        const axisOffset = offset?.[axis];
+        const isVertical = axis === 'y';
+        const before = isVertical ? 'top' : 'left';
+        const after = isVertical ? 'bottom' : 'right';
+        return {
+            [before]: axisOffset?.before || 0,
+            [after]: axisOffset?.after || 0,
+        };
+    }, [offset]);
+    const getCoeffStyle = useCallback(axis => `${coeff[axis] * 100}%`, [coeff]);
+    const getPosStyle = axis => `${posRef.current[axis]}px`;
+    const isScrollSizeChanged = useCallback(axis => {
+        const currScrolls = getScrollSize(axis);
+        const isChanged = prevScrollsRef.current[axis] !== currScrolls;
+        if (isChanged)
+            prevScrollsRef.current[axis] = currScrolls;
+        return isChanged;
+    }, [getScrollSize]);
+    const isBoudingsChanged = useCallback(axis => {
+        const curroffsetSize = getOffsetSize(axis);
+        const isChanged = prevBoundingsRef.current[axis] !== curroffsetSize;
+        if (isChanged)
+            prevBoundingsRef.current[axis] = curroffsetSize;
+        return isChanged;
+    }, [getOffsetSize]);
+    // Update functions
+    const updateCoeff = useCallback(axis => {
+        const thumb = thumbElemRef[axis].current;
+        if (!innerElemRef.current)
+            return;
+        const sizeField = BY_AXIS[axis].size;
+        const newCoeff = getInnerSize(axis) / getScrollSize(axis);
+        // Only update if the value has changed
+        if (coeff[axis] !== newCoeff) {
+            setCoeff(prev => ({
+                ...prev,
+                [axis]: newCoeff,
+            }));
+        }
+        if (thumb)
+            thumb.style[sizeField] = `${newCoeff * 100}%`;
+    }, [coeff, getInnerSize, getScrollSize, thumbElemRef]);
+    const updatePos = useCallback(axis => {
+        const thumb = thumbElemRef[axis].current;
+        if (!innerElemRef.current || !thumb)
+            return;
+        const offsetBefore = offset?.[axis]?.before || 0;
+        const offsetAfter = offset?.[axis]?.after || 0;
+        const innerSize = getInnerSize(axis);
+        const thumbSize = getThumbSize(axis);
+        const scrollSize = getScrollSize(axis);
+        const scrollPos = getScrollPos(axis);
+        const posField = BY_AXIS[axis].posField;
+        const pos = thumbSize
+            ? (innerSize - thumbSize - offsetBefore - offsetAfter) *
+                (scrollPos / (scrollSize - innerSize))
+            : 0;
+        posRef.current[axis] = pos;
+        thumb.style[posField] = `${pos}px`;
+    }, [
+        getInnerSize,
+        getScrollPos,
+        getScrollSize,
+        getThumbSize,
+        offset,
+        thumbElemRef,
+    ]);
+    const update = useCallback(axis => {
+        updateCoeff(axis);
+        updatePos(axis);
+    }, [updateCoeff, updatePos]);
+    const updateHasOffsets = useCallback(() => {
+        if (!innerElemRef.current)
+            return;
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, offsetHeight, offsetWidth, } = innerElemRef.current;
+        setHasOffset(prev => {
+            const newHasOffset = { ...prev };
+            if (y) {
+                newHasOffset.top = scrollTop > 0;
+                newHasOffset.bottom =
+                    scrollHeight - (scrollTop + offsetHeight) > OFFSET_THRESHOLD;
+            }
+            if (x && !(newHasOffset.top || newHasOffset.bottom)) {
+                newHasOffset.left = scrollLeft > 0;
+                newHasOffset.right =
+                    scrollWidth - (scrollLeft + offsetWidth) > OFFSET_THRESHOLD;
+            }
+            return newHasOffset;
+        });
+    }, [x, y]);
+    const updateAll = useCallback(() => {
+        if (!innerElemRef.current)
+            return;
+        eachAxis(axis => update(axis));
+        updateHasOffsets();
+    }, [eachAxis, update, updateHasOffsets]);
+    const updateScroll = useCallback((axis, e) => {
+        const coords = getEventCoords(e);
+        const scrollPos = BY_AXIS[axis].scrollPos;
+        const pos = coords[axis] - prevCoordsRef.current[axis];
+        prevCoordsRef.current = coords;
+        innerElemRef.current[scrollPos] += pos / coeff[axis];
+    }, [coeff]);
+    // Event handlers
+    const dropScrollingState = useDebounce(() => {
+        setIsScrolling(false);
+    }, 2000);
+    const observeScrollHeight = useCallback(() => {
+        eachAxis(axis => {
+            const needUpdate = (props[axis] && isScrollSizeChanged(axis)) || isBoudingsChanged(axis);
+            if (needUpdate)
+                update(axis);
+        });
+    }, [props, isBoudingsChanged, isScrollSizeChanged, update]);
+    const onDocScroll = useCallback(e => {
+        // if dragging thumb - prevent any other scrolls
+        if (activeAxis && innerElemRef.current !== e.target) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }, [activeAxis]);
+    const onInnerScroll = useCallback(e => {
+        if (innerElemRef.current !== e.target)
+            return;
+        updateHasOffsets();
+        onScroll?.(e);
+        if (!activeAxis)
+            eachAxis(updatePos);
+        if (!isScrolling)
+            setIsScrolling(true);
+        dropScrollingState();
+    }, [
+        activeAxis,
+        dropScrollingState,
+        eachAxis,
+        isScrollSizeChanged,
+        isScrolling,
+        onScroll,
+        update,
+        updateHasOffsets,
+    ]);
+    const onPointerDown = useCallback((axis, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        prevCoordsRef.current = getEventCoords(e);
+        setActiveAxis(axis);
+    }, []);
+    const onPointerMove = useCallback(e => {
+        if (!activeAxis)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        updateScroll(activeAxis, e);
+        updatePos(activeAxis);
+    }, [activeAxis, updatePos, updateScroll]);
+    const onPointerUp = useCallback(e => {
+        e.stopPropagation();
+        setActiveAxis(null);
+        dropScrollingState();
+    }, [dropScrollingState]);
+    useEffect(() => {
+        if (innerElemRef.current) {
+            // Initial update
+            updateAll();
+            // Set up resize observer
+            observe(innerElemRef.current, updateAll);
+            onInnerRef?.(innerElemRef.current);
+            return () => {
+                unobserve(innerElemRef.current, updateAll);
+            };
+        }
+    }, [onInnerRef]); // Remove updateAll from dependencies
+    useEffect(() => {
+        const unsubscribeScrollHeightObserver = Time.every(100, observeScrollHeight);
+        return () => {
+            unsubscribeScrollHeightObserver?.();
+        };
+    }, [observeScrollHeight]);
+    useEvent({
+        elem: document,
+        event: 'scroll',
+        callback: onDocScroll,
+    });
+    useEvent({
+        elem: document,
+        event: ['pointermove', 'pointerup'],
+        callback: e => {
+            if (e.type === 'pointermove')
+                onPointerMove(e);
+            else if (e.type === 'pointerup')
+                onPointerUp(e);
+        },
+        isActive: !!activeAxis,
+    });
+    const renderBar = useCallback(axis => {
+        if (!props[axis] || coeff[axis] === 1)
+            return null;
+        const sizeField = BY_AXIS[axis].size;
+        const posField = BY_AXIS[axis].posField;
+        const thumbStyle = {
+            [sizeField]: getCoeffStyle(axis),
+            [posField]: getPosStyle(axis),
+        };
+        const className = cn(S.bar, S[axis], activeAxis === axis && S.isActive, props[`${axis}ScrollbarClassName`]);
+        const barProps = {
+            className,
+            style: getOffset(axis),
+            onPointerDown: e => onPointerDown(axis, e),
+        };
+        return (createElement("div", { ...barProps, key: `bar-${axis}` },
+            jsx("div", { className: cn(S.thumb, thumbClassName), style: thumbStyle, ref: thumbElemRef[axis] })));
+    }, [
+        activeAxis,
+        coeff,
+        getCoeffStyle,
+        getOffset,
+        getPosStyle,
+        onPointerDown,
+        props,
+        thumbClassName,
+        thumbElemRef,
+    ]);
+    const renderInner = useCallback(() => {
+        const innerClasses = cn(S.inner, innerProps?.className, innerClassName, !activeAxis && smooth && S.smooth, hasOffset.top && S.hasOffsetTop, hasOffset.bottom && S.hasOffsetBottom, hasOffset.right && S.hasOffsetRight, hasOffset.left && S.hasOffsetLeft);
+        const props = { ...innerProps };
+        props.onScrollCapture = onInnerScroll;
+        return (createElement("div", { ...props, className: innerClasses, ref: innerElemRef, key: "inner" }, children));
+    }, [
+        activeAxis,
+        children,
+        hasOffset,
+        innerClassName,
+        innerProps,
+        onInnerScroll,
+        smooth,
+    ]);
+    const classes = cn(S.root, y && S.y, x && S.x, S[`size-${size}`], fadeSize && S[`fadeSize-${fadeSize}`], autoHide && S.autoHide, (isScrolling || activeAxis) && S.isScrolling, isTouchDevice ? S.isTouch : S.isDesktop, className);
+    return (jsxs("div", { className: classes, ...rest, children: [renderInner(), AXES.map(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{--hide-delay:0.3s;display:flex;position:relative}.Scroll_inner__DmxTb{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow:hidden;position:relative;scrollbar-width:none;transition:-webkit-mask-image .3s ease-out;transition:mask-image .3s ease-out;transition:mask-image .3s ease-out,-webkit-mask-image .3s ease-out;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_fadeSize-xs__iPkYe .Scroll_inner__DmxTb{--fade-size:6px}.Scroll_fadeSize-s__WeI0f .Scroll_inner__DmxTb{--fade-size:10px}.Scroll_fadeSize-m__Hb-1p .Scroll_inner__DmxTb{--fade-size:16px}.Scroll_fadeSize-l__E0CbA .Scroll_inner__DmxTb{--fade-size:20px}.Scroll_fadeSize-xl__jcYk0 .Scroll_inner__DmxTb{--fade-size:30px}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetTop__zEkUg.Scroll_hasOffsetBottom__S2rCM{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent)}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetTop__zEkUg{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size));mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size))}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetBottom__S2rCM{-webkit-mask-image:linear-gradient(to top,transparent,#000 var(--fade-size));mask-image:linear-gradient(to top,transparent,#000 var(--fade-size))}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetLeft__WWEyC.Scroll_hasOffsetRight__HhJWt{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent)}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetLeft__WWEyC{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-size));mask-image:linear-gradient(to right,transparent,#000 var(--fade-size))}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetRight__HhJWt{-webkit-mask-image:linear-gradient(to left,transparent,#000 var(--fade-size));mask-image:linear-gradient(to left,transparent,#000 var(--fade-size))}.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{border-radius:2px;cursor:pointer;overscroll-behavior:contain;position:absolute;touch-action:none;transition:.1s opacity var(--hide-delay) ease-out;z-index:2}.Scroll_autoHide__URLqx>.Scroll_bar__6CL7R{opacity:0;transition:.3s opacity calc(var(--hide-delay)*.6) ease-out}.Scroll_bar__6CL7R:before{content:"";pointer-events:none;position:absolute;transition:.3s background-color var(--hide-delay) ease-out}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi,.Scroll_isDesktop__7r-bH .Scroll_bar__6CL7R:hover{opacity:1;transition-delay:0s;z-index:1}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi:before,.Scroll_isDesktop__7r-bH .Scroll_bar__6CL7R:hover:before{background-color:var(--accent-color-alpha-100)}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi .Scroll_thumb__ccEPj,.Scroll_isDesktop__7r-bH .Scroll_bar__6CL7R:hover .Scroll_thumb__ccEPj{background-color:var(--active-color)}.Scroll_isScrolling__yV2Pj>.Scroll_bar__6CL7R{opacity:1;transition:none}.Scroll_bar__6CL7R.Scroll_y__2xWol{bottom:8px;right:0;top:8px}.Scroll_isTouch__Vb2mT .Scroll_bar__6CL7R.Scroll_y__2xWol{width:32px}.Scroll_bar__6CL7R.Scroll_y__2xWol:before{height:100%;width:16px}.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:before{width:100%}.Scroll_bar__6CL7R.Scroll_x__--Ycm{height:32px}.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{left:0}.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{bottom:0}.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before,.Scroll_size-xs__Hebsj>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-xs__Hebsj>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:.5px;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_size-xl__Fvx02>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-xl__Fvx02>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:7px;height:14px}.Scroll_bar__6CL7R.Scroll_y__2xWol{width:32px}.Scroll_bar__6CL7R.Scroll_y__2xWol:before{top:0}.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_y__2xWol:before{right:0}.Scroll_size-xs__Hebsj>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-xs__Hebsj>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{border-radius:.5px;width:1px}.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_size-xl__Fvx02>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-xl__Fvx02>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{border-radius:7px;width:14px}',S={root:"Scroll_root__NNx5K",inner:"Scroll_inner__DmxTb",smooth:"Scroll_smooth__2vqKe",y:"Scroll_y__2xWol",x:"Scroll_x__--Ycm","fadeSize-xs":"Scroll_fadeSize-xs__iPkYe","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",hasOffsetTop:"Scroll_hasOffsetTop__zEkUg",hasOffsetBottom:"Scroll_hasOffsetBottom__S2rCM",hasOffsetLeft:"Scroll_hasOffsetLeft__WWEyC",hasOffsetRight:"Scroll_hasOffsetRight__HhJWt",thumb:"Scroll_thumb__ccEPj",bar:"Scroll_bar__6CL7R",autoHide:"Scroll_autoHide__URLqx",isDesktop:"Scroll_isDesktop__7r-bH",isActive:"Scroll_isActive__Nkkmi",isScrolling:"Scroll_isScrolling__yV2Pj",isTouch:"Scroll_isTouch__Vb2mT","size-xs":"Scroll_size-xs__Hebsj","size-s":"Scroll_size-s__px8sG","size-m":"Scroll_size-m__gfTwB","size-l":"Scroll_size-l__Pe4z7","size-xl":"Scroll_size-xl__Fvx02"};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{--hide-delay:0.3s;display:flex;position:relative}.Scroll_inner__DmxTb{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow:hidden;position:relative;scrollbar-width:none;transition:-webkit-mask-image .3s ease-out;transition:mask-image .3s ease-out;transition:mask-image .3s ease-out,-webkit-mask-image .3s ease-out;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_fadeSize-xs__iPkYe .Scroll_inner__DmxTb{--fade-size:6px}.Scroll_fadeSize-s__WeI0f .Scroll_inner__DmxTb{--fade-size:10px}.Scroll_fadeSize-m__Hb-1p .Scroll_inner__DmxTb{--fade-size:16px}.Scroll_fadeSize-l__E0CbA .Scroll_inner__DmxTb{--fade-size:20px}.Scroll_fadeSize-xl__jcYk0 .Scroll_inner__DmxTb{--fade-size:30px}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetTop__zEkUg.Scroll_hasOffsetBottom__S2rCM{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent)}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetTop__zEkUg{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size));mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-size))}.Scroll_y__2xWol .Scroll_inner__DmxTb.Scroll_hasOffsetBottom__S2rCM{-webkit-mask-image:linear-gradient(to top,transparent,#000 var(--fade-size));mask-image:linear-gradient(to top,transparent,#000 var(--fade-size))}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetLeft__WWEyC.Scroll_hasOffsetRight__HhJWt{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent)}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetLeft__WWEyC{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-size));mask-image:linear-gradient(to right,transparent,#000 var(--fade-size))}.Scroll_x__--Ycm .Scroll_inner__DmxTb.Scroll_hasOffsetRight__HhJWt{-webkit-mask-image:linear-gradient(to left,transparent,#000 var(--fade-size));mask-image:linear-gradient(to left,transparent,#000 var(--fade-size))}.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{border-radius:2px;cursor:pointer;overscroll-behavior:contain;position:absolute;touch-action:none;transition:.1s opacity var(--hide-delay) ease-out;z-index:2}.Scroll_autoHide__URLqx>.Scroll_bar__6CL7R{opacity:0;transition:.3s opacity calc(var(--hide-delay)*.6) ease-out}.Scroll_bar__6CL7R:before{content:\"\";pointer-events:none;position:absolute;transition:.3s background-color var(--hide-delay) ease-out}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi,.Scroll_isDesktop__7r-bH .Scroll_bar__6CL7R:hover{opacity:1;transition-delay:0s;z-index:1}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi:before,.Scroll_isDesktop__7r-bH .Scroll_bar__6CL7R:hover:before{background-color:var(--accent-color-alpha-100)}.Scroll_bar__6CL7R.Scroll_isActive__Nkkmi .Scroll_thumb__ccEPj,.Scroll_isDesktop__7r-bH .Scroll_bar__6CL7R:hover .Scroll_thumb__ccEPj{background-color:var(--active-color)}.Scroll_isScrolling__yV2Pj>.Scroll_bar__6CL7R{opacity:1;transition:none}.Scroll_bar__6CL7R.Scroll_y__2xWol{bottom:8px;right:0;top:8px}.Scroll_isTouch__Vb2mT .Scroll_bar__6CL7R.Scroll_y__2xWol{width:32px}.Scroll_bar__6CL7R.Scroll_y__2xWol:before{height:100%;width:16px}.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:before{width:100%}.Scroll_bar__6CL7R.Scroll_x__--Ycm{height:32px}.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{left:0}.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{bottom:0}.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-s__px8sG>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before,.Scroll_size-xs__Hebsj>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-xs__Hebsj>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:.5px;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_size-xl__Fvx02>.Scroll_bar__6CL7R.Scroll_x__--Ycm .Scroll_thumb__ccEPj,.Scroll_size-xl__Fvx02>.Scroll_bar__6CL7R.Scroll_x__--Ycm:before{border-radius:7px;height:14px}.Scroll_bar__6CL7R.Scroll_y__2xWol{width:32px}.Scroll_bar__6CL7R.Scroll_y__2xWol:before{top:0}.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_bar__6CL7R.Scroll_y__2xWol:before{right:0}.Scroll_size-xs__Hebsj>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-xs__Hebsj>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{border-radius:.5px;width:1px}.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_size-xl__Fvx02>.Scroll_bar__6CL7R.Scroll_y__2xWol .Scroll_thumb__ccEPj,.Scroll_size-xl__Fvx02>.Scroll_bar__6CL7R.Scroll_y__2xWol:before{border-radius:7px;width:14px}";
+var S = {"root":"Scroll_root__NNx5K","inner":"Scroll_inner__DmxTb","smooth":"Scroll_smooth__2vqKe","y":"Scroll_y__2xWol","x":"Scroll_x__--Ycm","fadeSize-xs":"Scroll_fadeSize-xs__iPkYe","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","hasOffsetTop":"Scroll_hasOffsetTop__zEkUg","hasOffsetBottom":"Scroll_hasOffsetBottom__S2rCM","hasOffsetLeft":"Scroll_hasOffsetLeft__WWEyC","hasOffsetRight":"Scroll_hasOffsetRight__HhJWt","thumb":"Scroll_thumb__ccEPj","bar":"Scroll_bar__6CL7R","autoHide":"Scroll_autoHide__URLqx","isDesktop":"Scroll_isDesktop__7r-bH","isActive":"Scroll_isActive__Nkkmi","isScrolling":"Scroll_isScrolling__yV2Pj","isTouch":"Scroll_isTouch__Vb2mT","size-xs":"Scroll_size-xs__Hebsj","size-s":"Scroll_size-s__px8sG","size-m":"Scroll_size-m__gfTwB","size-l":"Scroll_size-l__Pe4z7","size-xl":"Scroll_size-xl__Fvx02"};
+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 };