@sima-land/ui-nucleons 45.0.0-alpha.6 → 45.0.0-alpha.7

package/colors.scss

@@ -18,6 +18,7 @@ $basic-white: #fff;
 $additional-deep-red: #d50000;
 $additional-red: #fb3a2f;
 $additional-light-red: #feebea;
+$additional-dark-teal: #089176;
 $additional-teal: #09ab8b;
 $additional-green: #00c853;
 $additional-light-green: #64dd17;
@@ -39,3 +40,4 @@ $additional-brown: #795548;
 $additional-blue-gray: #607d8b;
 $additional-deep-blue: #00599d;
 $additional-dark-blue: #002b41;
+$additional-unlit-blue: #1b75c2;

package/expandable/expandable-group.module.scss

@@ -12,16 +12,12 @@
 .item {
   display: block;
   padding: 0;
-  max-width: 100%;
+  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;
   }
-  &.invisible {
-    opacity: 0;
-    pointer-events: none;
-  }
   &.opener {
     width: var(--expandable-opener-width);
   }

package/expandable/index.d.ts

@@ -1,42 +1,12 @@
-import { ReactNode, MouseEventHandler, CSSProperties } from 'react';
-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 GroupItemProps {
-    children?: ReactNode;
-    onClick?: MouseEventHandler;
-    'data-testid'?: string;
-}
+/// <reference types="react" />
+import { ExpandableGroupProps, ExpandableGroupItemProps } from './types';
 /**
  * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function ExpandableGroup({ gap, itemHeight, lineLimit, defaultExpanded, children, onExpand, opener, className, style, expanded: expandedProp, openerWidth, }: ExpandableGroupProps): JSX.Element;
+export declare function ExpandableGroup(props: ExpandableGroupProps): JSX.Element;
 export declare const Expandable: {
     readonly Group: typeof ExpandableGroup;
-    readonly Item: import("react").ForwardRefExoticComponent<GroupItemProps & import("react").RefAttributes<HTMLLIElement>>;
+    readonly Item: import("react").ForwardRefExoticComponent<ExpandableGroupItemProps & import("react").RefAttributes<HTMLLIElement>>;
 };

package/expandable/index.js

@@ -6,56 +6,103 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Expandable = exports.ExpandableGroup = void 0;
 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_module_scss_1 = __importDefault(require("./expandable-group.module.scss"));
 const cx = bind_1.default.bind(expandable_group_module_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({ gap = 8, itemHeight = 32, lineLimit = 2, defaultExpanded = false, children, onExpand, opener = data => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u0415\u0449\u0451 ", data.hiddenCount] }), className, style, expanded: expandedProp, openerWidth = 72, }) {
-    const wrapperRef = (0, react_1.useRef)(null);
-    const containerRef = (0, react_1.useRef)(null);
+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 });
+}
+exports.ExpandableGroup = ExpandableGroup;
+/**
+ * Внутренний компонент, необходимый для корректной обработки повторных 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 [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
-    const items = react_1.Children.toArray(children).reduce((result, child) => {
-        if ((0, react_1.isValidElement)(child) && child.type === ExpandableItem) {
-            result.push(child);
-        }
-        return result;
-    }, []);
+    const [state, setState] = (0, react_1.useState)(() => (defaultExpanded ? expandedState : initialState));
     (0, react_1.useEffect)(() => {
         setMounted(true);
     }, []);
+    // даем возможность управлять состоянием с помощью пропса "expanded"
     (0, react_1.useEffect)(() => {
-        expandedProp !== undefined && setExpanded(expandedProp);
+        if (typeof expandedProp === 'boolean') {
+            setState(expandedProp ? expandedState : initialState);
+        }
     }, [expandedProp]);
-    const { hiddenCount } = (0, utils_1.useExpandable)({
-        expanded,
-        wrapperRef,
-        containerRef,
-        openerRef,
-        gap,
+    // если "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));
     });
-    return ((0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, className: cx('root', className), style: {
-            ...style,
-            maxHeight: expanded ? undefined : `${itemHeight * lineLimit + gap * (lineLimit - 1)}px`,
-            '--expandable-item-height': `${itemHeight}px`,
-            '--expandable-opener-width': `${openerWidth}px`,
-            '--expandable-gap': `${gap}px`,
-        }, children: (0, jsx_runtime_1.jsxs)("ul", { ref: containerRef, className: expandable_group_module_scss_1.default.inner, children: [items, mounted && !expanded && ((0, jsx_runtime_1.jsx)(ItemContext.Provider, { value: { invisible: hiddenCount === 0, opener: true }, children: (0, jsx_runtime_1.jsx)(ExpandableItem, { ref: openerRef, onClick: () => {
-                            setExpanded(true);
-                            onExpand === null || onExpand === void 0 ? void 0 : onExpand();
-                        }, "data-testid": 'expandable:opener', children: opener({ hiddenCount }) }) }))] }) }));
+    // выполняем расчет
+    (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 === null || onExpand === void 0 ? void 0 : onExpand();
+    }, [onExpand]);
+    const items = react_1.Children.toArray(children).reduce((result, child, index) => {
+        if ((0, react_1.isValidElement)(child) && child.type === 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)(ExpandableItem, { ref: openerRef, onClick: handleExpand, "data-testid": 'expandable:opener', children: renderOpener({ hiddenCount: items.length - state.lastVisibleIndex - 1 }) }) }))] }) }));
 }
-exports.ExpandableGroup = ExpandableGroup;
 const ExpandableItem = (0, react_1.forwardRef)(({ children, onClick, 'data-testid': testId = 'expandable:item' }, ref) => {
-    const context = (0, react_1.useContext)(ItemContext);
-    return ((0, jsx_runtime_1.jsx)("li", { ref: ref, className: cx('item', context), "data-testid": testId, onClick: onClick, children: children }));
+    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,

package/expandable/index.js.map

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

package/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/expandable/types.js

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

package/expandable/types.js.map

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

package/expandable/utils.d.ts

@@ -1,31 +1,30 @@
 import { RefObject } from 'react';
-export interface ViewState {
-    lastVisibleIndex: number;
-}
 /**
- * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
- * @param options.expanded Развернут ли список.
- * @param options.wrapperRef Реф элемента, формирующего ограничение по высоте.
- * @param options.containerRef Реф элемента, содержащего список.
- * @param options.openerRef Реф элемента "открывашки".
- * @param options.gap Расстояние между элементами списка.
- * @return Рассчитанные данные: кол-во скрытых элементов.
+ * Определяет последний дочерний элемент который должен быть виден чтобы влезла "открывашка".
+ * @param payload Данные.
+ * @return Результат.
+ *
+ * ВАЖНО: lastVisibleIndex: -1 означает что все элементы видны и "открывашка" не нужна.
  */
-export declare function useExpandable({ expanded, wrapperRef, containerRef, openerRef, gap, }: {
-    expanded: boolean;
-    wrapperRef: RefObject<HTMLElement>;
-    containerRef: RefObject<HTMLElement>;
-    openerRef: RefObject<HTMLElement>;
+export declare function defineLastVisible({ outer, inner, gap, opener, openerWidth, }: {
+    outer: Element;
+    inner: Element;
     gap: number;
+    opener: Element;
+    openerWidth: number;
 }): {
-    hiddenCount: number;
+    lastVisibleIndex: number;
 };
 /**
- * Определяет индекс последнего видимого элемента для свернутого списка.
- * @param wrapper Элемент, формирующий ограничение по высоте.
- * @param items Элементы, все кроме "закрывашки".
- * @param opener Элемент "закрывашки".
- * @param gap Расстояние между элементами списка.
- * @return Состояние.
+ * Регистрирует обработчик изменения ширины элемента.
+ * @param element Элемент.
+ * @param callback Callback.
+ * @return Функция отписки.
+ */
+export declare function observeWidth(element: Element, callback: VoidFunction): () => void;
+/**
+ * Хук для регистрации обработчика изменения ширины элемента.
+ * @param ref Ref элемента.
+ * @param callback Callback.
  */
-export declare function defineViewState(wrapper: HTMLElement, items: Element[], opener: HTMLElement, gap: number): ViewState;
+export declare function useObserveWidth(ref: RefObject<Element>, callback: VoidFunction): void;

package/expandable/utils.js

@@ -1,92 +1,77 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineViewState = exports.useExpandable = void 0;
+exports.useObserveWidth = exports.observeWidth = exports.defineLastVisible = void 0;
 const react_1 = require("react");
-const hooks_1 = require("../hooks");
-const on_1 = require("../helpers/on");
-const expandable_group_module_scss_1 = __importDefault(require("./expandable-group.module.scss"));
 /**
- * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
- * @param options.expanded Развернут ли список.
- * @param options.wrapperRef Реф элемента, формирующего ограничение по высоте.
- * @param options.containerRef Реф элемента, содержащего список.
- * @param options.openerRef Реф элемента "открывашки".
- * @param options.gap Расстояние между элементами списка.
- * @return Рассчитанные данные: кол-во скрытых элементов.
+ * Определяет последний дочерний элемент который должен быть виден чтобы влезла "открывашка".
+ * @param payload Данные.
+ * @return Результат.
+ *
+ * ВАЖНО: lastVisibleIndex: -1 означает что все элементы видны и "открывашка" не нужна.
  */
-function useExpandable({ expanded, wrapperRef, containerRef, openerRef, gap, }) {
-    const [hiddenCount, setHiddenCount] = (0, react_1.useState)(0);
-    const calc = (0, react_1.useCallback)(() => {
-        const wrapperEl = wrapperRef.current;
-        const containerEl = containerRef.current;
-        const openerEl = openerRef.current;
-        if (expanded) {
-            if (containerEl) {
-                for (const item of containerEl.children) {
-                    item.classList.remove(expandable_group_module_scss_1.default.hidden);
-                }
-            }
-        }
-        else {
-            if (wrapperEl && containerEl && openerEl) {
-                const items = [...containerEl.children].filter(child => child !== openerEl);
-                // делаем все элементы списка видимыми чтобы правильно считать размеры
-                for (const item of items) {
-                    item.classList.remove(expandable_group_module_scss_1.default.hidden);
-                }
-                // определяем какие элементы не влезли в ограничение по высоте
-                const state = defineViewState(wrapperEl, items, openerEl, gap);
-                if (state.lastVisibleIndex !== -1) {
-                    // делаем невидимыми элементы списка которые не влезли
-                    for (const [index, item] of items.entries()) {
-                        if (item !== openerEl && index >= state.lastVisibleIndex) {
-                            item.classList.add(expandable_group_module_scss_1.default.hidden);
-                        }
-                    }
-                }
-                setHiddenCount(state.lastVisibleIndex !== -1 ? items.length - state.lastVisibleIndex : 0);
-            }
-        }
-    }, [expanded, gap, wrapperRef, containerRef, openerRef]);
-    // пересчитываем после каждого rerender'а
-    (0, hooks_1.useIsomorphicLayoutEffect)(calc);
-    // пересчитываем при resize
-    (0, react_1.useEffect)(() => (0, on_1.on)(window, 'resize', calc), [calc]);
-    return { hiddenCount };
+function defineLastVisible({ outer, inner, gap, opener, openerWidth, }) {
+    const items = [...inner.children].filter(el => el !== opener);
+    // если список пуст или состоит из одного элемента - видны все, открывашка не нужна
+    if (items.length <= 1) {
+        return { lastVisibleIndex: -1 };
+    }
+    const bounds = outer.getBoundingClientRect();
+    // индекс последнего элемента который должен быть виден
+    let lastVisibleIndex = items.length - 1;
+    while (items[lastVisibleIndex] &&
+        items[lastVisibleIndex].getBoundingClientRect().bottom > bounds.bottom) {
+        lastVisibleIndex--;
+    }
+    const last = items[items.length - 1];
+    // если последний видимый является последним в списке - видны все, открывашка не нужна
+    if (last === items[lastVisibleIndex]) {
+        return { lastVisibleIndex: -1 };
+    }
+    while (lastVisibleIndex >= 1 &&
+        items[lastVisibleIndex] &&
+        bounds.right - items[lastVisibleIndex].getBoundingClientRect().right < openerWidth + gap) {
+        lastVisibleIndex--;
+    }
+    // @todo он не должен быть первым на строке
+    return { lastVisibleIndex };
 }
-exports.useExpandable = useExpandable;
+exports.defineLastVisible = defineLastVisible;
 /**
- * Определяет индекс последнего видимого элемента для свернутого списка.
- * @param wrapper Элемент, формирующий ограничение по высоте.
- * @param items Элементы, все кроме "закрывашки".
- * @param opener Элемент "закрывашки".
- * @param gap Расстояние между элементами списка.
- * @return Состояние.
+ * Регистрирует обработчик изменения ширины элемента.
+ * @param element Элемент.
+ * @param callback Callback.
+ * @return Функция отписки.
  */
-function defineViewState(wrapper, items, opener, gap) {
-    const state = { lastVisibleIndex: -1 };
-    const parentRect = wrapper.getBoundingClientRect();
-    const firstHiddenNodeIndex = items.findIndex(child => {
-        const childRect = child.getBoundingClientRect();
-        return childRect.top - parentRect.top >= parentRect.height;
+function observeWidth(element, callback) {
+    // eslint-disable-next-line require-jsdoc
+    const getWidth = () => element.getBoundingClientRect().width;
+    let lastWidth = getWidth();
+    const observer = new ResizeObserver(() => {
+        requestAnimationFrame(() => {
+            const actualWidth = getWidth();
+            if (lastWidth !== actualWidth) {
+                lastWidth = actualWidth;
+                callback();
+            }
+        });
     });
-    if (firstHiddenNodeIndex !== -1) {
-        const lastVisibleIndex = firstHiddenNodeIndex - 1;
-        const lastVisible = items[lastVisibleIndex];
-        if (lastVisible) {
-            const rightBound = lastVisible.getBoundingClientRect().right;
-            const rightContainerBound = wrapper.getBoundingClientRect().right;
-            // хватает ли кнопке места после последнего видимого дочернего элемента с учетом отступа между элементами
-            const isOpenerFit = rightContainerBound - rightBound - gap >= opener.clientWidth;
-            // если хватает места - ставим кнопку после последнего, иначе - вместо
-            // @todo возможна ситуация когда нужно будет удалить N элементов чтобы влезла кнопка
-            state.lastVisibleIndex = lastVisibleIndex + Number(isOpenerFit);
+    observer.observe(element);
+    return () => observer.disconnect();
+}
+exports.observeWidth = observeWidth;
+/**
+ * Хук для регистрации обработчика изменения ширины элемента.
+ * @param ref Ref элемента.
+ * @param callback Callback.
+ */
+function useObserveWidth(ref, callback) {
+    const callbackRef = (0, react_1.useRef)(callback);
+    callbackRef.current = callback;
+    (0, react_1.useEffect)(() => {
+        if (ref.current) {
+            return observeWidth(ref.current, () => callbackRef.current());
         }
-    }
-    return state;
+    }, [ref]);
 }
-exports.defineViewState = defineViewState;
+exports.useObserveWidth = useObserveWidth;
 //# sourceMappingURL=utils.js.map

package/expandable/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/expandable/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/expandable/utils.ts"],"names":[],"mappings":";;;AAAA,iCAAqD;AAErD;;;;;;GAMG;AACH,SAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,GAAG,EACH,MAAM,EACN,WAAW,GAOZ;IACC,MAAM,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;IAE9D,mFAAmF;IACnF,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;QACrB,OAAO,EAAE,gBAAgB,EAAE,CAAC,CAAC,EAAE,CAAC;KACjC;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;IAE7C,uDAAuD;IACvD,IAAI,gBAAgB,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAExC,OACE,KAAK,CAAC,gBAAgB,CAAC;QACvB,KAAK,CAAC,gBAAgB,CAAC,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EACtE;QACA,gBAAgB,EAAE,CAAC;KACpB;IAED,MAAM,IAAI,GAAwB,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE1D,sFAAsF;IACtF,IAAI,IAAI,KAAK,KAAK,CAAC,gBAAgB,CAAC,EAAE;QACpC,OAAO,EAAE,gBAAgB,EAAE,CAAC,CAAC,EAAE,CAAC;KACjC;IAED,OACE,gBAAgB,IAAI,CAAC;QACrB,KAAK,CAAC,gBAAgB,CAAC;QACvB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,WAAW,GAAG,GAAG,EACxF;QACA,gBAAgB,EAAE,CAAC;KACpB;IAED,2CAA2C;IAC3C,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC9B,CAAC;AAjDD,8CAiDC;AAED;;;;;GAKG;AACH,SAAgB,YAAY,CAAC,OAAgB,EAAE,QAAsB;IACnE,yCAAyC;IACzC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAE7D,IAAI,SAAS,GAAG,QAAQ,EAAE,CAAC;IAE3B,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;QACvC,qBAAqB,CAAC,GAAG,EAAE;YACzB,MAAM,WAAW,GAAG,QAAQ,EAAE,CAAC;YAE/B,IAAI,SAAS,KAAK,WAAW,EAAE;gBAC7B,SAAS,GAAG,WAAW,CAAC;gBACxB,QAAQ,EAAE,CAAC;aACZ;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAE1B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;AACrC,CAAC;AApBD,oCAoBC;AAED;;;;GAIG;AACH,SAAgB,eAAe,CAAC,GAAuB,EAAE,QAAsB;IAC7E,MAAM,WAAW,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,CAAC;IACrC,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;SAC/D;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACZ,CAAC;AATD,0CASC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "45.0.0-alpha.6",
+  "version": "45.0.0-alpha.7",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",

package/styling/colors.d.ts

@@ -1,10 +1,10 @@
 /** @deprecated */
-export declare const color: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const color: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-dark-teal" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue" | "additional-unlit-blue") => string | undefined;
 /** @deprecated */
-export declare const hoverColor: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const hoverColor: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-dark-teal" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue" | "additional-unlit-blue") => string | undefined;
 /** @deprecated */
-export declare const bgColor: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const bgColor: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-dark-teal" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue" | "additional-unlit-blue") => string | undefined;
 /** @deprecated */
-export declare const stroke: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const stroke: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-dark-teal" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue" | "additional-unlit-blue") => string | undefined;
 /** @deprecated */
-export declare const fill: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const fill: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-dark-teal" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue" | "additional-unlit-blue") => string | undefined;

package/avatar/user.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { AvatarProps } from '.';
-export type UserAvatarProps = Omit<AvatarProps, 'bgColor' | 'bgOpacity' | 'textColor'>;
-export declare const colorKey: unique symbol;
-/**
- * Компонент аватара пользователя (не сотрудника).
- * @param props Свойства. Поддерживаются свойства Avatar.
- * @return Элемент.
- */
-export declare function UserAvatar(props: UserAvatarProps): JSX.Element;