@sima-land/ui-nucleons 45.0.0-alpha.5 → 45.0.0-alpha.50

package/dist/dropdown/utils.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdownFloatingConfig = dropdownFloatingConfig;
+exports.useDropdownFloatingStyle = useDropdownFloatingStyle;
+exports.useDismissByWheel = useDismissByWheel;
+const react_1 = require("react");
+const react_2 = require("@floating-ui/react");
+const layer_1 = require("../helpers/layer");
+const context_1 = require("../context");
+const helpers_1 = require("../helpers");
+/**
+ * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
+ * @return Конфигурация для `useFloating` по дизайн-гайдам.
+ */
+function dropdownFloatingConfig() {
+    return {
+        whileElementsMounted: react_2.autoUpdate,
+        placement: 'bottom-start',
+        middleware: [
+            // @todo в будущем с дизайнерами можем решить использовать autoPlacement
+            // но есть сложности: https://github.com/floating-ui/floating-ui/discussions/2155
+            (0, react_2.flip)({
+                padding: 16,
+            }),
+            (0, react_2.shift)({
+                padding: 16,
+            }),
+        ],
+    };
+}
+/**
+ * Возвращает стили для элемента с учетом "слоя".
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+function useDropdownFloatingStyle({ strategy, x, y, refs, }) {
+    const layer = (0, layer_1.useLayer)();
+    const [openerWidth, setOpenerWidth] = (0, react_1.useState)(() => refs.reference.current?.getBoundingClientRect().width ?? null);
+    const { createResizeObserver } = (0, react_1.useContext)(context_1.ResizeObserverContext);
+    (0, react_1.useEffect)(() => {
+        const opener = refs.reference.current;
+        if (!(opener instanceof Element)) {
+            return;
+        }
+        const observer = createResizeObserver(() => {
+            setOpenerWidth(opener.getBoundingClientRect().width);
+        });
+        setOpenerWidth(opener.getBoundingClientRect().width);
+        observer.observe(opener);
+        return () => {
+            observer.disconnect();
+        };
+    }, [refs.reference.current, createResizeObserver]);
+    return (0, react_1.useMemo)(() => {
+        const base = {
+            position: strategy,
+            top: y,
+            left: x,
+            zIndex: layer + 2,
+        };
+        if (typeof openerWidth === 'number') {
+            return {
+                ...base,
+                minWidth: `${openerWidth}px`,
+                // ВАЖНО: для возможности стилизации задаем переменную с шириной
+                // @todo при необходимости добавить высоту и другие размеры или же наоборот отказаться от этой переменной
+                '--opener-width': `${openerWidth}px`,
+            };
+        }
+        return base;
+    }, [strategy, x, y, layer, openerWidth]);
+}
+/**
+ * Скрытие меню при прокрутке колесом за пределами меню.
+ * @inheritdoc
+ */
+function useDismissByWheel(ref, callback) {
+    const callbackRef = (0, react_1.useRef)(callback);
+    callbackRef.current = callback;
+    (0, react_1.useEffect)(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        return (0, helpers_1.on)(window, 'wheel', event => {
+            if (event.target instanceof HTMLElement &&
+                element !== event.target &&
+                !element.contains(event.target)) {
+                callbackRef.current();
+            }
+        });
+    }, [ref]);
+}
+//# sourceMappingURL=utils.js.map

package/dist/dropdown/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/dropdown/utils.ts"],"names":[],"mappings":"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"}

package/dist/dropdown-item/dropdown-item.d.ts

@@ -0,0 +1,8 @@
+import type { DropdownItemProps } from './types';
+/**
+ * Элемент выпадающего списка.
+ * @param props Свойства.
+ * @todo Переименовать в MenuItem.
+ * @return Элемент.
+ */
+export declare function DropdownItem({ value, size, children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId, ...restProps }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/dropdown-item/dropdown-item.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownItem = DropdownItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bind_1 = __importDefault(require("classnames/bind"));
+const dropdown_item_m_scss_1 = __importDefault(require("./dropdown-item.m.scss"));
+const cx = bind_1.default.bind(dropdown_item_m_scss_1.default);
+/**
+ * Элемент выпадающего списка.
+ * @param props Свойства.
+ * @todo Переименовать в MenuItem.
+ * @return Элемент.
+ */
+function DropdownItem({ value, size = 'm', children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId = 'dropdown-item', ...restProps }) {
+    const start = StartIcon ? (0, jsx_runtime_1.jsx)(StartIcon, { className: cx('icon') }) : startContent;
+    const end = EndIcon ? (0, jsx_runtime_1.jsx)(EndIcon, { className: cx('icon') }) : endContent;
+    const hasChildren = [start, children, end].some(item => typeof item !== 'undefined');
+    return ((0, jsx_runtime_1.jsx)("div", { ...(value !== undefined && { 'data-value': value }), ...restProps, className: cx('root', `size-${size}`, selected && 'selected', checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), dangerouslySetInnerHTML: dangerouslySetInnerHTML, "data-testid": testId, children: hasChildren ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [start && (0, jsx_runtime_1.jsx)("div", { className: cx('col', 'col-start'), children: start }), (0, jsx_runtime_1.jsxs)("div", { className: cx('col', 'col-center'), children: [(0, jsx_runtime_1.jsx)("div", { className: cx('row-main'), children: children }), size === 'xl' && comment && (0, jsx_runtime_1.jsx)("div", { className: cx('row-comment'), children: comment })] }), end && (0, jsx_runtime_1.jsx)("div", { className: cx('col', 'col-end'), children: end })] })) : undefined }));
+}
+//# sourceMappingURL=dropdown-item.js.map

package/dist/dropdown-item/dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../src/dropdown-item/dropdown-item.tsx"],"names":[],"mappings":";;;;;AAYA,oCAyDC;;AApED,2DAAyC;AACzC,kFAA4C;AAE5C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,8BAAM,CAAC,CAAC;AAEnC;;;;;GAKG;AACH,SAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,YAAY,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EACP,uBAAuB,EACvB,aAAa,EAAE,MAAM,GAAG,eAAe,EACvC,GAAG,SAAS,EACM;IAClB,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,uBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,CAAC,CAAC,CAAC,YAAY,CAAC;IAC9E,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,uBAAC,OAAO,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,CAAC,CAAC,CAAC,UAAU,CAAC;IAEtE,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,KAAK,WAAW,CAAC,CAAC;IAErF,OAAO,CACL,mCACM,CAAC,KAAK,KAAK,SAAS,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,KAChD,SAAS,EACb,SAAS,EAAE,EAAE,CACX,MAAM,EACN,QAAQ,IAAI,EAAE,EACd,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,SAAS,EACpB,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,UAAU,EACrB,SAAS,CACV,EACD,uBAAuB,EAAE,uBAAuB,iBACnC,MAAM,YAMlB,WAAW,CAAC,CAAC,CAAC,CACb,6DACG,KAAK,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAG,KAAK,GAAO,EAE/D,iCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,aACrC,gCAAK,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,YAAG,QAAQ,GAAO,EAC/C,IAAI,KAAK,IAAI,IAAI,OAAO,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,YAAG,OAAO,GAAO,IAC3E,EAEL,GAAG,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,YAAG,GAAG,GAAO,IACxD,CACJ,CAAC,CAAC,CAAC,SAAS,GACT,CACP,CAAC;AACJ,CAAC"}

package/dist/dropdown-item/index.d.ts

@@ -0,0 +1,2 @@
+export type { DropdownItemProps, DropdownItemSize } from './types';
+export { DropdownItem } from './dropdown-item';

package/dist/dropdown-item/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownItem = void 0;
+var dropdown_item_1 = require("./dropdown-item");
+Object.defineProperty(exports, "DropdownItem", { enumerable: true, get: function () { return dropdown_item_1.DropdownItem; } });
+//# sourceMappingURL=index.js.map

package/dist/dropdown-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dropdown-item/index.ts"],"names":[],"mappings":";;;AACA,iDAA+C;AAAtC,6GAAA,YAAY,OAAA"}

package/dist/dropdown-item/types.d.ts

@@ -0,0 +1,28 @@
+import type { ReactElement, ComponentType, ReactNode, SVGAttributes, HTMLAttributes } from 'react';
+import type { WithTestId } from '../types';
+export type DropdownItemSize = 's' | 'm' | 'l' | 'xl';
+export interface DropdownItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'>, WithTestId {
+    /** Отображать элемент как отмеченный (активный) или нет. */
+    checked?: boolean;
+    /** Отображать элемент как выбранный или нет. */
+    selected?: boolean;
+    /** Отключен ли элемент. */
+    disabled?: boolean;
+    /** Нужно ли отключить эффект при наведении. */
+    noHover?: boolean;
+    /** Размер. */
+    size?: DropdownItemSize;
+    /** Строковое значение, ассоциированное с элементом списка. */
+    value?: string;
+    /** Контент перед основным содержимым. */
+    startContent?: ReactNode;
+    /** Контент после основного содержимого. */
+    endContent?: ReactNode;
+    /** Иконка перед основным содержимым. При указании будет проигнорирован "startContent". */
+    startIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Иконка после основного содержимого. При указании будет проигнорирован "endContent". */
+    endIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Контент под основным содержимым. Выводится только при size='xl'. */
+    comment?: ReactNode;
+}
+export type DropdownItemElement = ReactElement<DropdownItemProps>;

package/dist/dropdown-item/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/dropdown-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/dropdown-item/types.ts"],"names":[],"mappings":""}

package/dist/dropdown-item/utils.d.ts

@@ -0,0 +1,44 @@
+import { DropdownItemElement } from './types';
+/** Утилиты для работы с DropdownItem. */
+export declare class DropdownItemUtils {
+    /**
+     * Определяет, является ли переданное значение элементом DropdownItem.
+     * @param value Значение.
+     * @return Является ли переданное значение элементом DropdownItem.
+     */
+    static is(value: unknown): value is DropdownItemElement;
+    /**
+     * Возвращает значение элемента меню.
+     * @param menuItem Значение.
+     * @return Значение элемента меню.
+     */
+    static getValue(menuItem: DropdownItemElement): string;
+    /**
+     * Получив опции меню вернет LinkedList и текущую позицию в нем.
+     * @param menuItems Опции.
+     * @param currentIndex Индекс текущей выбранной опции.
+     * @return Текущая позиция в списке и список.
+     */
+    static asLoopedIterator(menuItems: DropdownItemElement[], currentIndex: number): LoopedIterator<number>;
+}
+/** Список с возможностью перемещаться вперед назад с закольцовыванием. */
+export declare class LoopedIterator<T = unknown> {
+    private source;
+    private position;
+    /**
+     * Конструктор.
+     * @param source Источник данных.
+     * @param startPosition Начальная позиция.
+     */
+    constructor(source: T[], startPosition?: number);
+    /**
+     * Возвращает следующий элемент списка.
+     * @return Элемент списка или undefined.
+     */
+    next(): T | undefined;
+    /**
+     * Возвращает предыдущий элемент списка.
+     * @return Элемент списка или undefined.
+     */
+    prev(): T | undefined;
+}

package/dist/dropdown-item/utils.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoopedIterator = exports.DropdownItemUtils = void 0;
+const react_1 = require("react");
+const dropdown_item_1 = require("./dropdown-item");
+/** Утилиты для работы с DropdownItem. */
+class DropdownItemUtils {
+    /**
+     * Определяет, является ли переданное значение элементом DropdownItem.
+     * @param value Значение.
+     * @return Является ли переданное значение элементом DropdownItem.
+     */
+    static is(value) {
+        return (0, react_1.isValidElement)(value) && value.type === dropdown_item_1.DropdownItem;
+    }
+    /**
+     * Возвращает значение элемента меню.
+     * @param menuItem Значение.
+     * @return Значение элемента меню.
+     */
+    static getValue(menuItem) {
+        const { value, children } = menuItem.props;
+        // нативный select преобразует содержимое option к строке если не указан value, делаем также
+        return typeof value === 'string' ? value : String(children);
+    }
+    /**
+     * Получив опции меню вернет LinkedList и текущую позицию в нем.
+     * @param menuItems Опции.
+     * @param currentIndex Индекс текущей выбранной опции.
+     * @return Текущая позиция в списке и список.
+     */
+    static asLoopedIterator(menuItems, currentIndex) {
+        let currentPosition = -1;
+        const availableIndices = menuItems.reduce((acc, item, index) => {
+            if (index === currentIndex) {
+                currentPosition = acc.length;
+            }
+            if (!item.props.disabled) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        return new LoopedIterator(availableIndices, currentPosition);
+    }
+}
+exports.DropdownItemUtils = DropdownItemUtils;
+/** Список с возможностью перемещаться вперед назад с закольцовыванием. */
+class LoopedIterator {
+    source;
+    position;
+    /**
+     * Конструктор.
+     * @param source Источник данных.
+     * @param startPosition Начальная позиция.
+     */
+    constructor(source, startPosition = 0) {
+        this.source = source;
+        this.position = startPosition;
+    }
+    /**
+     * Возвращает следующий элемент списка.
+     * @return Элемент списка или undefined.
+     */
+    next() {
+        if (this.source.length === 0) {
+            return undefined;
+        }
+        let nextIndex = this.position + 1;
+        if (nextIndex >= this.source.length) {
+            nextIndex = 0;
+        }
+        this.position = nextIndex;
+        return this.source[nextIndex];
+    }
+    /**
+     * Возвращает предыдущий элемент списка.
+     * @return Элемент списка или undefined.
+     */
+    prev() {
+        if (this.source.length === 0) {
+            return undefined;
+        }
+        let nextIndex = this.position - 1;
+        if (nextIndex < 0) {
+            nextIndex = this.source.length - 1;
+        }
+        this.position = nextIndex;
+        return this.source[nextIndex];
+    }
+}
+exports.LoopedIterator = LoopedIterator;
+//# sourceMappingURL=utils.js.map

package/dist/dropdown-item/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/dropdown-item/utils.ts"],"names":[],"mappings":";;;AAAA,iCAAuC;AACvC,mDAA+C;AAG/C,yCAAyC;AACzC,MAAa,iBAAiB;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,KAAc;QACtB,OAAO,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,4BAAY,CAAC;IAC9D,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,QAAQ,CAAC,QAA6B;QAC3C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC;QAE3C,4FAA4F;QAC5F,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC9D,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,gBAAgB,CACrB,SAAgC,EAChC,YAAoB;QAEpB,IAAI,eAAe,GAAG,CAAC,CAAC,CAAC;QAEzB,MAAM,gBAAgB,GAAkB,SAAS,CAAC,MAAM,CAAW,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YACtF,IAAI,KAAK,KAAK,YAAY,EAAE,CAAC;gBAC3B,eAAe,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,CAAC;YAED,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACzB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC;YAED,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,IAAI,cAAc,CAAS,gBAAgB,EAAE,eAAe,CAAC,CAAC;IACvE,CAAC;CACF;AAhDD,8CAgDC;AAED,0EAA0E;AAC1E,MAAa,cAAc;IACjB,MAAM,CAAM;IACZ,QAAQ,CAAS;IAEzB;;;;OAIG;IACH,YAAY,MAAW,EAAE,aAAa,GAAG,CAAC;QACxC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC;IAChC,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAElC,IAAI,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;YACpC,SAAS,GAAG,CAAC,CAAC;QAChB,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAE1B,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAElC,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;YAClB,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAE1B,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;CACF;AArDD,wCAqDC"}

package/dist/expandable/expandable-group.d.ts

@@ -0,0 +1,12 @@
+import { ExpandableGroupProps, ExpandableGroupItemProps } from './types';
+/**
+ * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ExpandableGroup(props: ExpandableGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const ExpandableItem: import("react").ForwardRefExoticComponent<ExpandableGroupItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare const Expandable: {
+    readonly Group: typeof ExpandableGroup;
+    readonly Item: import("react").ForwardRefExoticComponent<ExpandableGroupItemProps & import("react").RefAttributes<HTMLLIElement>>;
+};

package/dist/expandable/expandable-group.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Expandable = exports.ExpandableItem = void 0;
+exports.ExpandableGroup = ExpandableGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const expandable_group_m_scss_1 = __importDefault(require("./expandable-group.m.scss"));
+const cx = bind_1.default.bind(expandable_group_m_scss_1.default);
+const ItemContext = (0, react_1.createContext)({});
+const initialState = {
+    status: 'initial',
+    lastVisibleIndex: -1,
+};
+const expandedState = {
+    status: 'expanded',
+    lastVisibleIndex: -1,
+};
+/**
+ * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ExpandableGroup(props) {
+    const time = (0, react_1.useRef)(1);
+    // @todo зациклить если каким-то невероятным образом уйдет за границу number
+    time.current = time.current + 1;
+    // ВАЖНО: рендер вызванный родительским компонентом должен приводить к пересчету, поэтому передаем уникальный time
+    return (0, jsx_runtime_1.jsx)(ExpandableGroupInner, { ...props, time: time.current });
+}
+/**
+ * Внутренний компонент, необходимый для корректной обработки повторных render'ов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ExpandableGroupInner({ gap = 8, itemHeight = 32, lineLimit = 2, defaultExpanded = false, children, opener: renderOpener = data => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u0415\u0449\u0451 ", data.hiddenCount] }), className, style, expanded: expandedProp, onExpand, openerWidth = 72, time, }) {
+    const outerRef = (0, react_1.useRef)(null);
+    const innerRef = (0, react_1.useRef)(null);
+    const openerRef = (0, react_1.useRef)(null);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    const [state, setState] = (0, react_1.useState)(() => (defaultExpanded ? expandedState : initialState));
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
+    // даем возможность управлять состоянием с помощью пропса "expanded"
+    (0, react_1.useEffect)(() => {
+        if (typeof expandedProp === 'boolean') {
+            // ВАЖНО: передаем именно копию состояний чтобы гарантированно вызвать рендер
+            setState(expandedProp ? { ...expandedState } : { ...initialState });
+        }
+    }, [expandedProp]);
+    // если "time" обновился - это сигнал о том что надо пересчитать состояние
+    (0, react_1.useEffect)(() => {
+        // ВАЖНО: передаем именно копию состояний чтобы гарантированно вызвать рендер
+        setState(current => (current.status === 'expanded' ? current : { ...initialState }));
+    }, [time]);
+    // следим за изменением ширины чтобы запустить перерасчет
+    (0, utils_1.useObserveWidth)(outerRef, () => {
+        // ВАЖНО: передаем именно копию состояний чтобы гарантированно вызвать рендер
+        setState(current => (current.status === 'expanded' ? current : { ...initialState }));
+    });
+    // выполняем расчет
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (state.status === 'initial') {
+            const outer = outerRef.current;
+            const inner = innerRef.current;
+            const opener = openerRef.current;
+            if (outer && inner && opener) {
+                const { lastVisibleIndex } = (0, utils_1.defineLastVisible)({ outer, inner, gap, opener, openerWidth });
+                setState({
+                    status: lastVisibleIndex !== -1 ? 'some-hidden' : 'all-visible',
+                    lastVisibleIndex,
+                });
+            }
+        }
+    }, [state, mounted]);
+    const rootStyle = {
+        ...style,
+        maxHeight: state.status === 'expanded'
+            ? undefined
+            : `${itemHeight * lineLimit + gap * (lineLimit - 1)}px`,
+        '--expandable-gap': `${gap}px`,
+        '--expandable-item-height': `${itemHeight}px`,
+        '--expandable-opener-width': `${openerWidth}px`,
+    };
+    const handleExpand = (0, react_1.useCallback)(() => {
+        setState(expandedState);
+        onExpand?.();
+    }, [onExpand]);
+    const items = react_1.Children.toArray(children).reduce((result, child, index) => {
+        if ((0, react_1.isValidElement)(child) && child.type === exports.ExpandableItem) {
+            result.push((0, jsx_runtime_1.jsx)(ItemContext.Provider, { value: {
+                    hidden: state.status === 'some-hidden' && index > state.lastVisibleIndex,
+                }, children: child }, child.key));
+        }
+        return result;
+    }, []);
+    // ВАЖНО: root нужен для того чтобы формировать ограничение по высоте
+    return ((0, jsx_runtime_1.jsx)("div", { ref: outerRef, className: cx('root', className), style: rootStyle, children: (0, jsx_runtime_1.jsxs)("ul", { ref: innerRef, className: cx('inner'), children: [items, mounted && state.status !== 'expanded' && ((0, jsx_runtime_1.jsx)(ItemContext.Provider, { value: { hidden: state.status !== 'some-hidden' }, children: (0, jsx_runtime_1.jsx)(exports.ExpandableItem, { ref: openerRef, onClick: handleExpand, "data-testid": 'expandable:opener', children: renderOpener({ hiddenCount: items.length - state.lastVisibleIndex - 1 }) }) }))] }) }));
+}
+exports.ExpandableItem = (0, react_1.forwardRef)(({ children, onClick, 'data-testid': testId = 'expandable:item' }, ref) => {
+    const { hidden } = (0, react_1.useContext)(ItemContext);
+    return ((0, jsx_runtime_1.jsx)("li", { ref: ref, className: cx('item', { hidden }), "data-testid": testId, onClick: onClick, children: children }));
+});
+exports.Expandable = {
+    Group: ExpandableGroup,
+    Item: exports.ExpandableItem,
+};
+//# sourceMappingURL=expandable-group.js.map

package/dist/expandable/expandable-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-group.js","sourceRoot":"","sources":["../../src/expandable/expandable-group.tsx"],"names":[],"mappings":"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"}

package/dist/expandable/expandable-group.m.scss

@@ -0,0 +1,24 @@
+.root {
+  overflow: hidden;
+}
+
+.inner {
+  display: flex;
+  padding: 0;
+  flex-wrap: wrap;
+  margin: 0 calc(var(--expandable-gap) * -1) calc(var(--expandable-gap) * -1) 0;
+}
+
+.item {
+  display: block;
+  padding: 0;
+  max-width: calc(100% - var(--expandable-gap, 0));
+  height: var(--expandable-item-height);
+  margin: 0 (var(--expandable-gap)) var(--expandable-gap) 0;
+  &.hidden {
+    display: none;
+  }
+  &.opener {
+    width: var(--expandable-opener-width);
+  }
+}

package/dist/expandable/index.d.ts

@@ -0,0 +1,2 @@
+export type { ExpandableGroupProps, ExpandableGroupItemProps } from './types';
+export { Expandable, ExpandableGroup, ExpandableItem } from './expandable-group';

package/dist/expandable/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandableItem = exports.ExpandableGroup = exports.Expandable = void 0;
+var expandable_group_1 = require("./expandable-group");
+Object.defineProperty(exports, "Expandable", { enumerable: true, get: function () { return expandable_group_1.Expandable; } });
+Object.defineProperty(exports, "ExpandableGroup", { enumerable: true, get: function () { return expandable_group_1.ExpandableGroup; } });
+Object.defineProperty(exports, "ExpandableItem", { enumerable: true, get: function () { return expandable_group_1.ExpandableItem; } });
+//# sourceMappingURL=index.js.map

package/dist/expandable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expandable/index.ts"],"names":[],"mappings":";;;AACA,uDAAiF;AAAxE,8GAAA,UAAU,OAAA;AAAE,mHAAA,eAAe,OAAA;AAAE,kHAAA,cAAc,OAAA"}

package/dist/expandable/types.d.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import type { WithTestId } from '../types';
+export interface ExpandableGroupInnerStyle extends CSSProperties {
+    '--expandable-item-height'?: string;
+    '--expandable-opener-width'?: string;
+    '--expandable-gap'?: string;
+}
+export interface ExpandableGroupProps {
+    /** Расстояние между элементами группы в пикселях. */
+    gap?: number;
+    /** Высота каждого элемента группы в пикселях. */
+    itemHeight?: number;
+    /** Развернут ли список по умолчанию. */
+    defaultExpanded?: boolean;
+    /** Количество строк в свернутом состоянии группы. */
+    lineLimit?: number;
+    /** Содержимое. */
+    children?: ReactNode;
+    /** Функция, возвращающая содержимое кнопки разворачивания списка. */
+    opener?: (data: {
+        hiddenCount: number;
+    }) => ReactNode;
+    /** Сработает при разворачивании списка. */
+    onExpand?: () => void;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Стили корневого элемента. */
+    style?: CSSProperties;
+    /** Нужно ли выводить список развернутым. */
+    expanded?: boolean;
+    /** Ширина открывающего элемента. */
+    openerWidth?: number;
+}
+export interface ExpandableGroupItemProps extends WithTestId {
+    /** Содержимое. */
+    children?: ReactNode;
+    /** Сработает при клике. */
+    onClick?: MouseEventHandler;
+}

package/dist/expandable/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/expandable/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/expandable/types.ts"],"names":[],"mappings":""}

package/dist/expandable/utils.d.ts

@@ -0,0 +1,30 @@
+import { RefObject } from 'react';
+/**
+ * Определяет последний дочерний элемент который должен быть виден чтобы влезла "открывашка".
+ * @param payload Данные.
+ * @return Результат.
+ *
+ * ВАЖНО: lastVisibleIndex: -1 означает что все элементы видны и "открывашка" не нужна.
+ */
+export declare function defineLastVisible({ outer, inner, gap, opener, openerWidth, }: {
+    outer: Element;
+    inner: Element;
+    gap: number;
+    opener: Element;
+    openerWidth: number;
+}): {
+    lastVisibleIndex: number;
+};
+/**
+ * Регистрирует обработчик изменения ширины элемента.
+ * @param element Элемент.
+ * @param callback Callback.
+ * @return Функция отписки.
+ */
+export declare function observeWidth(element: Element, callback: (width: number) => void): () => void;
+/**
+ * Хук для регистрации обработчика изменения ширины элемента.
+ * @param ref Ref элемента.
+ * @param callback Callback.
+ */
+export declare function useObserveWidth(ref: RefObject<Element | null>, callback: VoidFunction): void;