@via-profit/ui-kit 0.4.0 → 0.6.0

package/Menu/MeasuredItem.js

@@ -1,51 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const MeasuredItem = props => {
-    const { index, top, isFixed, updateHeight, children } = props;
-    const ref = React.useRef(null);
-    React.useLayoutEffect(() => {
-        if (isFixed)
-            return; // в фиксированном режиме измерять не нужно
-        const el = ref.current;
-        if (!el)
-            return;
-        const measure = () => {
-            const h = el.offsetHeight;
-            updateHeight(index, h);
-        };
-        measure();
-        const ro = new ResizeObserver(measure);
-        ro.observe(el);
-        return () => ro.disconnect();
-    }, [index, updateHeight, isFixed]);
-    return (React.createElement("div", { ref: ref, style: {
-            position: 'absolute',
-            top,
-            width: '100%',
-        } }, children));
-};
-exports.default = MeasuredItem;

package/Menu/VirtualizedItem.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-export type VirtualizedItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
-    readonly key: string;
-    readonly index: number;
-    readonly style: React.CSSProperties;
-    readonly setItemHeight: (index: number, height: number) => void;
-    readonly isActiveOnScroll: boolean;
-    readonly children: VirtualizedItemChildren;
-};
-export type VirtualizedItemChildren = (params: {
-    readonly index: number;
-    readonly isActiveOnScroll: boolean;
-}) => React.ReactNode;
-export declare const VirtualizedItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    readonly key: string;
-    readonly index: number;
-    readonly style: React.CSSProperties;
-    readonly setItemHeight: (index: number, height: number) => void;
-    readonly isActiveOnScroll: boolean;
-    readonly children: VirtualizedItemChildren;
-} & React.RefAttributes<HTMLDivElement>>;
-export default VirtualizedItem;

package/Menu/VirtualizedItem.js

@@ -1,69 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VirtualizedItem = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const React = __importStar(require("react"));
-const StyledVirtualizedItem = styled_1.default.div `
-  position: absolute;
-  width: 100%;
-`;
-exports.VirtualizedItem = React.forwardRef((props, ref) => {
-    const { children, style, index, setItemHeight, isActiveOnScroll } = props, restProps = __rest(props, ["children", "style", "index", "setItemHeight", "isActiveOnScroll"]);
-    const containerRef = React.useRef(null);
-    React.useEffect(() => {
-        const el = containerRef.current;
-        if (!el)
-            return;
-        const observer = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                const { height } = entry.contentRect;
-                if (height) {
-                    setItemHeight(index, height);
-                }
-            }
-        });
-        observer.observe(el);
-        return () => observer.disconnect();
-    }, [index, setItemHeight]);
-    return (React.createElement(StyledVirtualizedItem, Object.assign({ style: style }, restProps, { ref: ref }),
-        React.createElement("div", { ref: containerRef }, children({ index, isActiveOnScroll }))));
-});
-exports.VirtualizedItem.displayName = 'VirtualizedItem';
-exports.default = exports.VirtualizedItem;

package/Menu/VirtualizedList.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { VirtualizedListRef, VirtualizedRenderItem } from './VirtualizedListComponent';
-export type ScrollAlign = 'start' | 'center' | 'end' | 'auto';
-export * from './VirtualizedListComponent';
-export type VirtualizedListProps<T> = {
-    readonly items: readonly T[];
-    readonly renderItem: VirtualizedRenderItem<T>;
-    readonly estimatedItemHeight?: number;
-    readonly itemHeight?: number;
-    readonly overscan?: number;
-    readonly scrollToIndex?: number | null;
-    readonly scrollToAlign?: ScrollAlign;
-    readonly onEndReached?: () => void;
-};
-declare const _default: <T>(props: VirtualizedListProps<T> & {
-    ref?: React.Ref<VirtualizedListRef> | undefined;
-}) => React.ReactElement;
-export default _default;

package/Menu/VirtualizedList.js

@@ -1,26 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const AutoHeightWrapper_1 = __importDefault(require("./AutoHeightWrapper"));
-const VirtualizedListComponent_1 = __importDefault(require("./VirtualizedListComponent"));
-__exportStar(require("./VirtualizedListComponent"), exports);
-const VirtualizedList = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(AutoHeightWrapper_1.default, null, height => height > 0 && react_1.default.createElement(VirtualizedListComponent_1.default, Object.assign({}, props, { height: height, ref: ref })))));
-VirtualizedList.displayName = 'VirtualizedList';
-exports.default = VirtualizedList;

package/Menu/VirtualizedListComponent.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-export type VirtualizedRenderItem<T> = (item: T, index: number) => React.ReactNode;
-export type VirtualizedListComponentProp<T> = {
-    readonly items: readonly T[];
-    readonly height: number;
-    readonly renderItem: VirtualizedRenderItem<T>;
-    readonly estimatedItemHeight?: number;
-    readonly itemHeight?: number;
-    readonly overscan?: number;
-    readonly scrollToIndex?: number | null;
-    readonly scrollToAlign?: ScrollAlign;
-    readonly onEndReached?: () => void;
-};
-export type ScrollAlign = 'start' | 'center' | 'end' | 'auto';
-export type VirtualizedListRef = {
-    scrollToIndex: (index: number, align?: ScrollAlign) => void;
-    getTopVisibleIndex: () => number;
-};
-declare const VirtualizedListComponent: React.ForwardRefExoticComponent<VirtualizedListComponentProp<unknown> & React.RefAttributes<VirtualizedListRef>>;
-export default VirtualizedListComponent;

package/Menu/VirtualizedListComponent.js

@@ -1,305 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
-const BLOCK_SIZE = 50;
-function updateHeightWithBlocks(index, newHeight, heightsRef, offsetsRef, blockOffsetsRef, bumpVersion) {
-    const heights = heightsRef.current;
-    const offsets = offsetsRef.current;
-    const blocks = blockOffsetsRef.current;
-    const oldHeight = heights[index];
-    if (oldHeight == null || oldHeight === newHeight)
-        return;
-    const diff = newHeight - oldHeight;
-    heights[index] = newHeight;
-    // обновляем offsets начиная с index+1
-    for (let i = index + 1; i < offsets.length; i++) {
-        offsets[i] += diff;
-    }
-    // обновляем блоки, начиная с блока index
-    const blockIndex = Math.floor(index / BLOCK_SIZE);
-    for (let b = blockIndex + 1; b < blocks.length; b++) {
-        blocks[b] += diff;
-    }
-    // форсим пересчёт totalHeight
-    bumpVersion(v => v + 1);
-}
-const VirtualizedListComponent = react_1.default.forwardRef((props, ref) => {
-    const { items, height, renderItem, estimatedItemHeight = 40, itemHeight, overscan = 4, scrollToIndex = null, scrollToAlign = 'auto', onEndReached, } = props;
-    const containerRef = (0, react_1.useRef)(null);
-    const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
-    const [renderVersion, setRenderVersion] = (0, react_1.useState)(0);
-    const heightsRef = (0, react_1.useRef)([]);
-    const offsetsRef = (0, react_1.useRef)([]);
-    const blockOffsetsRef = (0, react_1.useRef)([]);
-    const isFixed = typeof itemHeight === 'number';
-    const onEndReachedRef = react_1.default.useRef(false);
-    const threshold = Math.max(300, height * 1.5);
-    const animateScrollTop = (0, react_1.useCallback)((to, duration = 300) => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const start = container.scrollTop;
-        const change = to - start;
-        const startTime = performance.now();
-        const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
-        const step = (now) => {
-            const elapsed = now - startTime;
-            const progress = Math.min(1, elapsed / duration);
-            const eased = easeOutCubic(progress);
-            container.scrollTop = start + change * eased;
-            if (progress < 1) {
-                requestAnimationFrame(step);
-            }
-        };
-        requestAnimationFrame(step);
-    }, []);
-    const scrollTo = (0, react_1.useCallback)((index, align = 'auto') => {
-        var _a;
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const len = items.length;
-        if (index < 0 || index >= len)
-            return;
-        const offsets = offsetsRef.current;
-        const heights = heightsRef.current;
-        const itemTop = offsets[index];
-        const itemHeightValue = (_a = heights[index]) !== null && _a !== void 0 ? _a : estimatedItemHeight;
-        const viewportHeight = height;
-        const viewportTop = container.scrollTop;
-        const viewportBottom = viewportTop + viewportHeight;
-        let target = itemTop;
-        switch (align) {
-            case 'start':
-                target = itemTop;
-                break;
-            case 'center':
-                target = itemTop - viewportHeight / 2 + itemHeightValue / 2;
-                break;
-            case 'end':
-                target = itemTop - viewportHeight + itemHeightValue;
-                break;
-            case 'auto':
-            default:
-                if (itemTop < viewportTop) {
-                    target = itemTop; // прокрутить вверх
-                }
-                else if (itemTop + itemHeightValue > viewportBottom) {
-                    target = itemTop - viewportHeight + itemHeightValue; // прокрутить вниз
-                }
-                else {
-                    return; // уже видно
-                }
-                break;
-        }
-        animateScrollTop(Math.max(0, target));
-    }, [items.length, estimatedItemHeight, height, animateScrollTop]);
-    // scrollToIndex без rAF
-    (0, react_1.useLayoutEffect)(() => {
-        var _a, _b;
-        if (scrollToIndex == null)
-            return;
-        if (!containerRef.current)
-            return;
-        const idx = Math.max(0, Math.min(items.length - 1, scrollToIndex));
-        const offsets = offsetsRef.current;
-        const itemTop = offsets[idx];
-        const itemBottom = itemTop + ((_b = (_a = heightsRef.current[idx]) !== null && _a !== void 0 ? _a : itemHeight) !== null && _b !== void 0 ? _b : estimatedItemHeight);
-        const viewportTop = containerRef.current.scrollTop;
-        const viewportBottom = viewportTop + height;
-        let nextScrollTop = viewportTop;
-        if (scrollToAlign === 'start') {
-            nextScrollTop = itemTop;
-        }
-        else if (scrollToAlign === 'end') {
-            nextScrollTop = itemBottom - height;
-        }
-        else if (scrollToAlign === 'center') {
-            nextScrollTop = itemTop - height / 2 + (itemBottom - itemTop) / 2;
-        }
-        else {
-            // auto
-            if (itemTop < viewportTop) {
-                nextScrollTop = itemTop;
-            }
-            else if (itemBottom > viewportBottom) {
-                nextScrollTop = itemBottom - height;
-            }
-            else {
-                return;
-            }
-        }
-        containerRef.current.scrollTop = nextScrollTop;
-    }, [scrollToIndex, scrollToAlign, items.length, height, itemHeight, estimatedItemHeight]);
-    react_1.default.useLayoutEffect(() => {
-        const totalHeight = offsetsRef.current[offsetsRef.current.length - 1] +
-            heightsRef.current[heightsRef.current.length - 1];
-        const viewportBottom = scrollTop + height;
-        const isNearEnd = viewportBottom >= totalHeight - threshold;
-        if (isNearEnd && !onEndReachedRef.current) {
-            onEndReachedRef.current = true;
-            onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
-        }
-        if (!isNearEnd) {
-            onEndReachedRef.current = false;
-        }
-    }, [scrollTop, height, items.length, threshold, onEndReached]);
-    // ⭐ ИДЕАЛЬНАЯ ИНИЦИАЛИЗАЦИЯ offsets/heights
-    // инициализация кэша высот/offsets
-    // инициализация кэша высот/offsets
-    (0, react_1.useLayoutEffect)(() => {
-        var _a;
-        const len = items.length;
-        const oldLen = heightsRef.current.length;
-        if (isFixed) {
-            // фиксированная высота — всё просто
-            heightsRef.current = new Array(len).fill(itemHeight);
-            offsetsRef.current = new Array(len);
-            for (let i = 0; i < len; i++) {
-                offsetsRef.current[i] = i * itemHeight;
-            }
-            const blockCount = Math.ceil(len / BLOCK_SIZE);
-            blockOffsetsRef.current = new Array(blockCount);
-            for (let b = 0; b < blockCount; b++) {
-                blockOffsetsRef.current[b] = b * BLOCK_SIZE * itemHeight;
-            }
-        }
-        else {
-            // динамическая высота — добавляем только новые элементы
-            const heights = heightsRef.current;
-            const offsets = offsetsRef.current;
-            // список вырос
-            if (len > oldLen) {
-                // добавляем новые элементы
-                for (let i = oldLen; i < len; i++) {
-                    heights[i] = estimatedItemHeight;
-                    offsets[i] = i === 0 ? 0 : offsets[i - 1] + heights[i - 1];
-                }
-                // пересчитываем блоки только для новых блоков
-                const blockCount = Math.ceil(len / BLOCK_SIZE);
-                const oldBlockCount = blockOffsetsRef.current.length;
-                for (let b = oldBlockCount; b < blockCount; b++) {
-                    const start = b * BLOCK_SIZE;
-                    blockOffsetsRef.current[b] = (_a = offsets[start]) !== null && _a !== void 0 ? _a : 0;
-                }
-            }
-        }
-        // форсим ререндер, чтобы использовать новые offsets
-        setRenderVersion(v => v + 1);
-    }, [items.length, isFixed, itemHeight, estimatedItemHeight]);
-    const onScroll = (0, react_1.useCallback)(() => {
-        var _a, _b;
-        const top = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
-        setScrollTop(top);
-    }, []);
-    // ⭐ Поиск startIndex
-    const findStartIndex = (0, react_1.useCallback)((scrollTopValue) => {
-        const len = items.length;
-        if (len === 0)
-            return 0;
-        const offsets = offsetsRef.current;
-        const blocks = blockOffsetsRef.current;
-        if (isFixed) {
-            const idx = Math.floor(scrollTopValue / (itemHeight || estimatedItemHeight));
-            return Math.max(0, Math.min(len - 1, idx));
-        }
-        // бинарный поиск по блокам
-        let low = 0;
-        let high = blocks.length - 1;
-        while (low < high) {
-            const mid = (low + high) >> 1;
-            if (blocks[mid] < scrollTopValue)
-                low = mid + 1;
-            else
-                high = mid;
-        }
-        const blockIndex = Math.max(0, low - 1);
-        const start = blockIndex * BLOCK_SIZE;
-        const end = Math.min(len - 1, start + BLOCK_SIZE * 2);
-        let i = start;
-        while (i < end && offsets[i] < scrollTopValue)
-            i++;
-        return Math.max(0, Math.min(len - 1, i));
-    }, [items.length, isFixed, itemHeight, estimatedItemHeight, renderVersion]);
-    const startIndex = (0, react_1.useMemo)(() => {
-        const idx = findStartIndex(scrollTop);
-        const _ = renderVersion;
-        return Math.max(0, idx - overscan);
-    }, [scrollTop, findStartIndex, overscan, renderVersion]);
-    // ⭐ Поиск endIndex
-    const endIndex = (0, react_1.useMemo)(() => {
-        const len = items.length;
-        if (len === 0)
-            return -1;
-        const offsets = offsetsRef.current;
-        if (offsets.length !== len)
-            return -1;
-        const totalVisibleBottom = scrollTop + height;
-        let i = startIndex;
-        while (i < len && offsets[i] < totalVisibleBottom)
-            i++;
-        const _ = renderVersion;
-        // renderVersion;
-        return Math.min(len - 1, i + overscan);
-    }, [scrollTop, height, startIndex, items.length, overscan, renderVersion]);
-    const getTopVisibleIndex = (0, react_1.useCallback)(() => startIndex, [startIndex]);
-    react_1.default.useImperativeHandle(ref, () => ({
-        scrollToIndex: (index, align = 'auto') => {
-            scrollTo(index, align);
-        },
-        getTopVisibleIndex: () => getTopVisibleIndex(),
-    }));
-    if (renderVersion === 0) {
-        return (react_1.default.createElement("div", { ref: containerRef, style: {
-                overflowY: 'auto',
-                position: 'relative',
-                height,
-            } }));
-    }
-    const visibleStart = startIndex;
-    const visibleEnd = endIndex;
-    let totalHeight = offsetsRef.current[items.length - 1] + heightsRef.current[items.length - 1];
-    if (isNaN(totalHeight)) {
-        totalHeight = 0;
-    }
-    return (react_1.default.createElement("div", { ref: containerRef, onScroll: onScroll, style: {
-            overflowY: 'auto',
-            position: 'relative',
-            height,
-        } },
-        react_1.default.createElement("div", { style: { height: totalHeight, position: 'relative' } }, Array.from({ length: visibleEnd - visibleStart + 1 }, (_, i) => {
-            const index = visibleStart + i;
-            const item = items[index];
-            const top = offsetsRef.current[index];
-            return (react_1.default.createElement(MeasuredItem_1.default, { key: index, index: index, isFixed: isFixed, top: top, updateHeight: (idx, h) => updateHeightWithBlocks(idx, h, heightsRef, offsetsRef, blockOffsetsRef, setRenderVersion) }, renderItem(item, index)));
-        }))));
-});
-VirtualizedListComponent.displayName = 'VirtualizedListComponent';
-exports.default = VirtualizedListComponent;