@homecode/ui 4.11.1

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

@@ -0,0 +1,43 @@
+import { useState, useRef, useCallback, createElement } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Button } from '../Button/Button.js';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
+import S from './Tabs.styl.js';
+
+function isId(id) {
+    return ['string', 'number'].includes(typeof id);
+}
+function Tabs(props) {
+    const { size = 'm', contentClassName, items, onChange, renderAll, activeId: initialId, children, ...rest } = props;
+    const [activeId, setActiveId] = useState(isId(initialId) ? initialId : items[0].id);
+    const tabsContent = useRef([]);
+    const onTabClick = useCallback((e, { id, onClick } = {}) => {
+        // @ts-ignore
+        if (onClick && !onClick(e)) {
+            e.peventDefault();
+            return;
+        }
+        setActiveId(id);
+        onChange?.(id);
+    }, []);
+    tabsContent.current = [];
+    const tabs = items.map((params) => {
+        const { id, label, forceRender, content, contentClassName: currContentClassName, ...rest } = params;
+        const isActive = activeId === id;
+        const tabContent = typeof content === 'function' ? content() : content;
+        if (renderAll || forceRender || isActive) {
+            tabsContent.current.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
+        }
+        return (createElement(Button, { ...rest, size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
+    });
+    if (typeof children === 'function') {
+        return children({
+            tabs: jsx(ButtonGroup, { ...rest, children: tabs }),
+            content: tabsContent.current,
+        });
+    }
+    return jsx(Fragment, { children: tabsContent.current });
+}
+
+export { Tabs };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "div .Tabs_inactive__H0mPh{display:none}";
+var S = {"inactive":"Tabs_inactive__H0mPh"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,44 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useCallback } from 'react';
+import { Link } from '../Router/Link/Link.js';
+import { isBrowser } from '../../tools/env.js';
+import 'nanoid';
+import '../../tools/dom.js';
+import 'timen';
+import 'compareq';
+import 'lodash.pick';
+import '../../tools/queryParams.js';
+import S from './Text.styl.js';
+
+const textToAnchorId = text => text.toLowerCase().split(' ').join('_');
+const getPath = () => (isBrowser && location.pathname) ?? '/';
+const scrollIntoHeader = id => document.getElementById(id)?.scrollIntoView();
+function useAnchor(text) {
+    if (typeof text !== 'string')
+        return [];
+    const id = textToAnchorId(text);
+    const href = `${getPath()}#${id}`;
+    const scrollUp = useCallback(() => scrollIntoHeader(id), [id]);
+    return [
+        id,
+        jsxs(Fragment, { children: ["\u00A0", jsx(Link, { href: href, className: S.anchor, onClick: scrollUp, children: "#" })] }),
+    ];
+}
+function H({ As, className, children, anchor, ...rest }) {
+    const [id, anchorEl] = useAnchor(anchor ?? children);
+    return (jsxs(As, { ...rest, className: cn(S.heading, className), id: id, children: [children, anchorEl] }));
+}
+const H1 = props => jsx(H, { ...props, As: "h1", anchor: false });
+const H2 = props => jsx(H, { ...props, As: "h2" });
+const H3 = props => jsx(H, { ...props, As: "h3" });
+const H4 = props => jsx(H, { ...props, As: "h4" });
+const H5 = props => jsx(H, { ...props, As: "h5" });
+const H6 = props => jsx(H, { ...props, As: "h6" });
+if (isBrowser) {
+    window.addEventListener('load', () => {
+        scrollIntoHeader(location.hash.slice(1));
+    });
+}
+
+export { H1, H2, H3, H4, H5, H6 };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Text_heading__DR-MG{position:relative}.Text_anchor__hq6W6{align-items:flex-start;border-radius:50%;height:100%;opacity:0;padding:0 .5em;transform:translateX(-1em);transition:.2s ease-out;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Text_anchor__hq6W6:before{background:none!important;height:100%;position:absolute;width:2em}.Text_heading__DR-MG:hover .Text_anchor__hq6W6{opacity:1;transform:translateX(0)}.Text_heading__DR-MG .Text_anchor__hq6W6:hover{color:var(--active-color)}";
+var S = {"heading":"Text_heading__DR-MG","anchor":"Text_anchor__hq6W6"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Theme/Theme.defaults.js

@@ -0,0 +1,50 @@
+import { colorsConfigToVars } from './Theme.helpers.js';
+
+const baseConfig = {
+    'indent-s': '10px',
+    'indent-m': '20px',
+    'indent-l': '30px',
+    'border-radius-s': '2px',
+    'border-radius-m': '4px',
+    'border-radius-l': '6px',
+};
+const colorsAlphaModes = [0, 50, 100, 200, 300, 500, 800, 900];
+const colors = {
+    light: '#e6e6e6',
+    dark: '#1a1a1a',
+};
+function getColors({ accent = colors.light, decent = colors.dark, active = '#54b62b', warning = '#ffa31a', danger = '#da3749', disabled = '#f1f1f2', link = '#3089fe', } = {}) {
+    return {
+        active: {
+            color: active,
+            mods: { alpha: [100, 300, 500, 800] /* mix: [['accent', 300]] */ },
+        },
+        warning: {
+            color: warning,
+            mods: { alpha: [100, 300, 500] },
+        },
+        danger: {
+            color: danger,
+            mods: { alpha: [100, 300, 500] },
+        },
+        disabled,
+        link,
+        accent: {
+            color: accent,
+            mods: { alpha: colorsAlphaModes },
+        },
+        decent: {
+            color: decent,
+            mods: { alpha: colorsAlphaModes },
+        },
+    };
+}
+const getConfig = (cfg = {}) => ({
+    // @ts-ignore
+    ...colorsConfigToVars(getColors(cfg.colors)),
+    ...baseConfig,
+    // @ts-ignore
+    ...cfg.rest,
+});
+
+export { baseConfig, colors, getColors, getConfig };

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

@@ -0,0 +1,67 @@
+function hexToRGB(str) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    const hex = str.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result)
+        return null;
+    return [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16),
+    ].join(',');
+}
+const mix = (c1, c2, val) => Math.floor(c1 * (1 - val) + c2 * val);
+function mixColor(color1, color2, val = 1) {
+    const c1 = (/^#/.test(color1) ? hexToRGB(color1) : color1)
+        .split(',')
+        .map(n => parseInt(n, 10));
+    const c2 = (/^#/.test(color2) ? hexToRGB(color2) : color2)
+        .split(',')
+        .map(n => parseInt(n, 10));
+    const rgb = [
+        mix(c1[0], c2[0], val),
+        mix(c1[1], c2[1], val),
+        mix(c1[2], c2[2], val),
+    ].join(',');
+    return `rgb(${rgb})`;
+}
+function rgba(color, transparency) {
+    return `rgba(${getRGB(color)},${transparency})`;
+}
+function getRGB(color) {
+    if (/^rgb/.test(color))
+        return color.replace(/^rgb?\(|\)$/g, '');
+    return hexToRGB(color);
+}
+const getConfigColor = val => val?.color || val;
+const colorMods = {
+    alpha: (color, val) => [rgba(color, val / 1000), `alpha-${val}`],
+    mix: (color1, [color2, val], config) => [
+        mixColor(color1, getConfigColor(config[color2]), val / 1000),
+        `mix-${color2}-${val}`,
+    ],
+};
+function colorsConfigToVars(config) {
+    return Object.entries(config).reduce((acc, [name, val]) => {
+        const colorName = `${name}-color`;
+        if (typeof val === 'string') {
+            acc[colorName] = val;
+        }
+        else {
+            const { color, mods } = val;
+            acc[colorName] = color;
+            if (typeof mods === 'object' && mods !== null) {
+                Object.entries(mods || {}).forEach(([mod, vals]) => {
+                    vals.forEach(val => {
+                        const [res, prefix] = colorMods[mod](color, val, config);
+                        acc[`${colorName}-${prefix}`] = res;
+                    });
+                });
+            }
+        }
+        return acc;
+    }, {});
+}
+
+export { colorsConfigToVars, getRGB, mixColor, rgba };

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

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+
+function buildVar(name, val) {
+    return `--${name}: ${val};`;
+}
+function Theme({ config = {} }) {
+    const vars = Object.entries(config)
+        .map(([name, val]) => buildVar(name, val))
+        .join('\n');
+    return jsx("style", { children: `:root {${vars}}` });
+}
+
+export { Theme };

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

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { isBrowser } from '../../tools/env.js';
+import 'nanoid';
+import '../../tools/dom.js';
+import 'timen';
+import 'compareq';
+import 'lodash.pick';
+import '../../tools/queryParams.js';
+
+const getVH = () => (isBrowser ? window.innerHeight / 100 : 0);
+class VH extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { vh: 0 };
+    }
+    componentDidMount() {
+        this.updateVH();
+        window.addEventListener('resize', this.updateVH);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.updateVH);
+    }
+    updateVH = () => {
+        this.setState({ vh: getVH() });
+    };
+    render() {
+        const { vh } = this.state;
+        return jsx("style", { children: `:root{--vh: ${vh}px;}` });
+    }
+}
+
+export { VH };

package/dist/esm/src/components/Virtualized/List/List.js

@@ -0,0 +1,124 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component, createRef } from 'react';
+import omit from 'lodash.omit';
+import { createStore } from 'justorm/react';
+import Time from 'timen';
+import * as number from '../../../tools/number.js';
+import 'nanoid';
+import '../../../tools/dom.js';
+import 'compareq';
+import 'lodash.pick';
+import '../../../tools/queryParams.js';
+import Virtualized from '../Virtualized.js';
+import S from './List.styl.js';
+
+const { zero } = number;
+const CONTENT_BEFORE_SIZE_CHECK_TIMEOUT = 300;
+class List extends Component {
+    store;
+    wrapElem;
+    contentBeforeElem;
+    contentAfterElem;
+    timers = Time.create();
+    unsubscribeContentBeforeResize;
+    constructor(props) {
+        super(props);
+        this.store = createStore(this, {
+            mounted: false,
+            contentBeforeHeight: 0,
+            hasWrap: false,
+        });
+        // this.wrapElem = createRef<HTMLDivElement>();
+        this.contentBeforeElem = createRef();
+        this.contentAfterElem = createRef();
+    }
+    componentDidMount() {
+        // update, to pass actual wrapElem to Virtualized props
+        // this.store.mounted = true;
+        if (this.props.contentBefore) {
+            this.subscribeContentBeforeResize();
+            this.checkContentBeforeHeight();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        const { contentBefore } = this.props;
+        if (!prevProps.contentBefore && contentBefore)
+            this.subscribeContentBeforeResize();
+        if (prevProps.contentBefore && !contentBefore)
+            this.unsubscribeContentBeforeResize?.();
+    }
+    subscribeContentBeforeResize() {
+        this.unsubscribeContentBeforeResize = Time.every(CONTENT_BEFORE_SIZE_CHECK_TIMEOUT, this.checkContentBeforeHeight);
+    }
+    checkContentBeforeHeight = () => {
+        const elem = this.contentBeforeElem.current;
+        if (!elem)
+            return;
+        const { offsetHeight } = elem;
+        if (offsetHeight !== this.store.contentBeforeHeight)
+            this.store.contentBeforeHeight = offsetHeight;
+    };
+    getProps() {
+        const props = omit(this.props, [
+            'contentBefore',
+            'contentAfter',
+            'customWrapElem',
+        ]);
+        const { contentBeforeHeight } = this.store;
+        const offsetBefore = zero(contentBeforeHeight) + zero(this.props.offsetBefore);
+        const offsetAfter = zero(this.contentAfterElem.current?.offsetHeight) +
+            zero(this.props.offsetAfter);
+        if (offsetBefore)
+            props.offsetBefore = offsetBefore;
+        if (offsetAfter)
+            props.offsetAfter = offsetAfter;
+        return props;
+    }
+    getItemProps = ({ index, offsetBefore, offsetAfter }) => {
+        const { itemHeight } = this.props;
+        return {
+            className: S.item,
+            style: { top: zero(offsetBefore) + index * itemHeight },
+        };
+    };
+    onWrapRef = (ref) => {
+        if (!ref)
+            return;
+        // @ts-ignore
+        this.wrapElem = this.props.customWrapElem?.getRef?.(ref) || ref;
+        if (!this.store.hasWrap)
+            this.store.hasWrap = true;
+    };
+    renderLayout = ({ state, items, ...rest }) => {
+        const { contentBefore, contentAfter, customWrapElem } = this.props;
+        const { height, offsetAfter } = state;
+        const { contentBeforeHeight } = this.store;
+        const props = omit(rest, [
+            'contentBefore',
+            'contentAfter',
+            'scrollTop',
+            'itemHeight',
+            'itemsCount',
+            'totalCount',
+            'overlapCount',
+            'onScrollEnd',
+            'renderItem',
+            'wrapElem',
+            'getItemProps',
+            'offsetAfter',
+            'offsetBefore',
+        ]);
+        const content = (jsxs(Fragment, { children: [contentBefore && (jsx("div", { ref: this.contentBeforeElem, children: contentBefore }, "contentBefore")), jsx("div", { className: S.gap, style: { height: height - contentBeforeHeight } }, "gap"), items, contentAfter && (jsx("div", { className: S.contentAfter, ref: this.contentAfterElem, style: { top: height - zero(offsetAfter) }, children: contentAfter }, "contentAfter"))] }));
+        let Elem = 'div';
+        if (customWrapElem) {
+            Elem = customWrapElem.component;
+            Object.assign(props, customWrapElem?.props);
+        }
+        return (jsx(Elem, { ...props, ref: this.onWrapRef, children: content }));
+    };
+    render() {
+        return (jsx(Virtualized, { ...this.getProps(), wrapElem: this.wrapElem, getItemProps: this.getItemProps, children: this.renderLayout }));
+    }
+}
+
+export { List as default };

package/dist/esm/src/components/Virtualized/List/List.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".List_gap__-52oM{pointer-events:none;width:100%}.List_gap__-52oM,.List_item__-true{position:absolute}.List_contentAfter__H0Ujd{left:0;position:absolute;width:100%}";
+var S = {"gap":"List_gap__-52oM","item":"List_item__-true","contentAfter":"List_contentAfter__H0Ujd"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Virtualized/List/ListScroll.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Scroll } from '../../Scroll/Scroll.js';
+import List from './List.js';
+import S from './ListScroll.styl.js';
+
+function ListScroll({ scrollProps, ...rest }) {
+    const innerClassName = cn(scrollProps.x && S.x, scrollProps.y && S.y);
+    const props = {
+        ...scrollProps,
+        innerClassName,
+    };
+    return (jsx(List, { ...rest, customWrapElem: {
+            component: Scroll,
+            props,
+            // @ts-ignore
+            getRef: ref => ref.innerElem,
+        } }));
+}
+
+export { ListScroll as default };

package/dist/esm/src/components/Virtualized/List/ListScroll.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ListScroll_x__tSPeG{width:100%}.ListScroll_y__mvFCU{height:100%}";
+var S = {"x":"ListScroll_x__tSPeG","y":"ListScroll_y__mvFCU"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,14 @@
+function getLastIndex(scrollTop, clientHeight, itemHeight, overlapCount, totalCount) {
+    return Math.min(totalCount - 1, Math.floor((scrollTop + clientHeight) / itemHeight + overlapCount));
+}
+// Returns indexes of first and last items to be rendered
+function getIndexes({ scrollTop, clientHeight, itemHeight, itemsCount, totalCount, overlapCount, }) {
+    const first = Math.max(0, Math.floor(scrollTop / itemHeight - overlapCount));
+    const last = Math.min(Math.max(first, itemsCount + overlapCount - 1), getLastIndex(scrollTop, clientHeight, itemHeight, overlapCount, totalCount));
+    return { first, last };
+}
+function getHeight({ itemsCount, itemHeight, offsetBefore = 0, offsetAfter = 0, }) {
+    return itemsCount * itemHeight + offsetBefore + offsetAfter;
+}
+
+export { getHeight, getIndexes, getLastIndex };

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

@@ -0,0 +1,200 @@
+import { Component } from 'react';
+import cn from 'classnames';
+import pick from 'lodash.pick';
+import compare from 'compareq';
+import Time from 'timen';
+import debounce from '../../tools/debounce.js';
+import { getHeight, getIndexes } from './Virtualized.helpers.js';
+import S from './Virtualized.styl.js';
+
+class Virtualized extends Component {
+    clearUnfreezeTimer;
+    scrollTopInited = false;
+    scrollElem;
+    lastScrollEndIndex = 0;
+    static defaultProps = {
+        overlapCount: 10,
+        pageSize: 20,
+    };
+    constructor(props) {
+        super(props);
+        this.state = {
+            id: null,
+            height: getHeight(props),
+            first: 0,
+            last: 0,
+            isFreezed: false,
+        };
+        this.onScroll = debounce(this.onScroll, 150);
+        this.checkIfEnd = debounce(this.checkIfEnd, 200);
+    }
+    static getDerivedStateFromProps(props, { height }) {
+        const newHeight = getHeight(props);
+        if (newHeight !== height)
+            return { height: newHeight };
+        return null;
+    }
+    componentDidMount() {
+        // Time.after(100, () => {
+        const indexes = this.getIndexes();
+        this.setState(indexes); // eslint-disable-line
+        // });
+        // document.addEventListener('scroll', this.onScroll, true);
+    }
+    getSnapshotBeforeUpdate(prevProps) {
+        const { itemHeight, itemsCount } = this.props;
+        if (itemsCount === 0 && itemsCount !== prevProps.itemsCount)
+            return 0;
+        if (this.scrollElem) {
+            if (itemHeight !== prevProps.itemHeight)
+                return (itemHeight / prevProps.itemHeight) * this.scrollElem.scrollTop;
+        }
+        return null;
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextProps.id !== this.props.id)
+            return true;
+        if (nextProps.itemsCount !== this.props.itemsCount)
+            return true;
+        if (nextProps.wrapElem !== this.props.wrapElem)
+            return true;
+        if (!compare(nextState, this.state))
+            return true;
+        return false;
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const state = {};
+        const scrollElemUpdated = this.scrollElem !== this.props.wrapElem;
+        if (scrollElemUpdated)
+            this.scrollElem = this.props.wrapElem;
+        if (this.scrollElem) {
+            const newScrollTop = this.getNewScrollTop(prevProps, snapshot);
+            if (typeof newScrollTop === 'number')
+                this.scrollElem.scrollTop = newScrollTop;
+        }
+        if (prevProps.id !== this.props.id)
+            state.id = this.props.id;
+        if (scrollElemUpdated || this.needUpdateIndexes(prevProps))
+            Object.assign(state, this.getIndexes());
+        if (this.needUpdateHeight(prevProps))
+            state.height = getHeight(this.props);
+        if (Object.keys(state).length)
+            this.setState(state);
+    }
+    componentWillUnmount() {
+        this.clearUnfreezeTimer?.();
+    }
+    needUpdateIndexes(prevProps) {
+        // const { wrapElem } = this.props;
+        // if (!prevProps.wrapElem && wrapElem) return true;
+        return ['id', 'itemsCount', 'totalCount', 'overlapCount'].some(key => prevProps[key] !== this.props[key]);
+    }
+    needUpdateHeight(prevProps) {
+        return ['totalCount', 'offsetAfter'].some(key => prevProps[key] !== this.props[key]);
+    }
+    getNewScrollTop(prevProps, snapshot) {
+        const { initialScrollTop, scrollTop, itemsCount } = this.props;
+        if (!this.scrollTopInited) {
+            const scrollValue = initialScrollTop ?? scrollTop;
+            if (scrollValue && prevProps.itemsCount && itemsCount) {
+                this.scrollTopInited = true;
+                return scrollValue;
+            }
+        }
+        if (prevProps.initialScrollTop > 0 && initialScrollTop === 0)
+            return 0;
+        if (typeof scrollTop === 'number' && scrollTop !== prevProps.scrollTop)
+            return scrollTop;
+        if (typeof snapshot === 'number')
+            return snapshot;
+        return null;
+    }
+    getIndexes() {
+        // const { wrapElem } = this.props;
+        if (!this.scrollElem)
+            return null;
+        const { scrollTop, clientHeight } = this.scrollElem;
+        return getIndexes({
+            scrollTop,
+            clientHeight,
+            ...pick(this.props, [
+                'itemsCount',
+                'totalCount',
+                'itemHeight',
+                'overlapCount',
+            ]),
+        });
+    }
+    onScroll = e => {
+        this.scrollElem = e.target;
+        const { onScroll } = this.props;
+        const indexes = this.getIndexes();
+        const { scrollTop } = this.scrollElem;
+        if (onScroll)
+            onScroll({ scrollTop, ...indexes });
+        this.checkIfEnd();
+        if (!compare(indexes, pick(this.state, ['first', 'last'])))
+            this.setState({ ...indexes });
+        this.unfreeze();
+    };
+    checkIfEnd = () => {
+        const { itemsCount, totalCount, pageSize, onScrollEnd } = this.props;
+        if (itemsCount === totalCount)
+            return;
+        if (itemsCount < this.lastScrollEndIndex)
+            return;
+        this.lastScrollEndIndex = Math.min(itemsCount + pageSize, totalCount);
+        onScrollEnd?.();
+    };
+    unfreeze = () => {
+        this.clearUnfreezeTimer?.();
+        this.clearUnfreezeTimer = Time.after(200, () => {
+            this.setState({ isFreezed: false });
+        });
+    };
+    getItemProps = (index) => {
+        const { getItemProps, offsetBefore, offsetAfter } = this.props;
+        const props = {
+            className: S.item,
+            key: index,
+        };
+        if (getItemProps) {
+            const { className, ...rest } = getItemProps({
+                index,
+                offsetBefore,
+                offsetAfter,
+            });
+            props.className = cn(props.className, className);
+            Object.assign(props, rest);
+        }
+        return props;
+    };
+    renderItems() {
+        const { itemsCount, renderItem } = this.props;
+        const { first, last } = this.state;
+        const items = [];
+        if (itemsCount > 0) {
+            for (let i = first; i <= last; i++) {
+                items.push(renderItem(this.getItemProps(i)));
+            }
+        }
+        return items;
+    }
+    render() {
+        const { children, className, pageSize, ...rest } = this.props;
+        const { isFreezed } = this.state;
+        const state = {
+            ...pick(this.state, ['first', 'last', 'height']),
+            ...pick(this.props, ['offsetBefore', 'offsetAfter']),
+        };
+        return children({
+            ...rest,
+            state,
+            className: cn(S.root, isFreezed && S.freezeClicks, className),
+            onScroll: this.onScroll,
+            items: this.renderItems(),
+        });
+    }
+}
+
+export { Virtualized as default };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Virtualized_root__SX71a{display:block;height:100%;max-height:100%;overflow-y:auto;position:relative}.Virtualized_item__1vSN0{animation:Virtualized_show__2WhkK .1s ease-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}.Virtualized_freezeClicks__SCBdy .Virtualized_item__1vSN0{pointer-events:none}@keyframes Virtualized_show__2WhkK{0%{opacity:0}to{opacity:1}}";
+var S = {"root":"Virtualized_root__SX71a","item":"Virtualized_item__1vSN0","show":"Virtualized_show__2WhkK","freezeClicks":"Virtualized_freezeClicks__SCBdy"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Virtualized/Virtualized.types.js

@@ -0,0 +1 @@
+