@sima-land/ui-nucleons 44.0.1 → 44.2.1

package/carousel/index.js

@@ -101,7 +101,7 @@ class Carousel extends react_1.Component {
     static defaultRenderControl({ canUse, onUse, type, vertical }, props = { size: 's' }) {
         const forward = vertical ? 'down' : 'right';
         const backward = vertical ? 'up' : 'left';
-        return (react_1.default.createElement(arrow_button_1.ArrowButton, Object.assign({}, props, { className: cx('control', vertical && 'vertical', type), direction: type === 'forward' ? forward : backward, onClick: onUse, disabled: !canUse })));
+        return (react_1.default.createElement(arrow_button_1.ArrowButton, Object.assign({}, props, { className: cx('control', vertical && 'vertical', type, props.className), direction: type === 'forward' ? forward : backward, onClick: onUse, disabled: !canUse })));
     }
     /**
      * Возвращает функцию для поиска наиболее отдаленного элемента карусели от стартовой границы viewport'а.

package/chips/chips.module.scss

@@ -1,11 +1,11 @@
 @use '../colors';
 
-$gutter: 8px;
-
 .list {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 (-$gutter) (-$gutter) 0;
+  --chips-gutter: 8px;
+  margin-right: calc(-1 * var(--chips-gutter));
+  margin-bottom: calc(-1 * var(--chips-gutter));
 }
 
 .item {
@@ -15,7 +15,10 @@ $gutter: 8px;
   display: flex;
   align-items: center;
   height: 32px;
-  margin: 0 $gutter $gutter 0;
+
+  // по умолчанию 0 чтобы вне Chips отступов не было
+  margin-right: var(--chips-gutter, 0);
+  margin-bottom: var(--chips-gutter, 0);
   overflow: hidden;
   outline: 0;
   border: 0;

package/clean-buttons/index.d.ts

@@ -12,6 +12,12 @@ export interface CleanGroupProps {
     /** Содержимое. */
     children?: React.ReactNode;
 }
+/**
+ * Компонент группы прозрачных кнопок.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const CleanGroup: React.FC<CleanGroupProps>;
 export declare const Clean: {
     Group: React.FC<CleanGroupProps>;
     Button: ({ size, href, asLink, ...restProps }: CleanButtonProps) => JSX.Element;

package/clean-buttons/index.js

@@ -37,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Clean = void 0;
+exports.Clean = exports.CleanGroup = void 0;
 const react_1 = __importStar(require("react"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const link_1 = require("../link");
@@ -55,6 +55,7 @@ const CleanGroup = ({ size: sizeFromProps, children }) => {
     const size = sizeFromProps || sizeFromContext;
     return (react_1.default.createElement("div", { className: cx('group') }, react_1.Children.toArray(children).map(item => (0, react_1.isValidElement)(item) && item.type === CleanButton ? (0, react_1.cloneElement)(item, { size }) : null)));
 };
+exports.CleanGroup = CleanGroup;
 /**
  * Компонент прозрачной кнопки.
  * @param props Свойства.
@@ -65,6 +66,6 @@ const CleanButton = (_a) => {
     return (react_1.default.createElement(link_1.Link, Object.assign({ pseudo: !asLink, className: cx('button', `size-${size}`), href: href }, restProps)));
 };
 exports.Clean = {
-    Group: CleanGroup,
+    Group: exports.CleanGroup,
     Button: CleanButton,
 };

package/expandable/expandable-group.module.scss

@@ -0,0 +1,20 @@
+.root {
+  overflow: hidden;
+}
+
+.inner {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.item {
+  display: block;
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+  &.hidden {
+    display: none;
+  }
+}

package/expandable/index.d.ts

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

package/expandable/index.js

@@ -0,0 +1,90 @@
+"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 });
+exports.Expandable = exports.ExpandableGroup = void 0;
+const react_1 = __importStar(require("react"));
+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 GroupContext = (0, react_1.createContext)({ gap: 8, itemHeight: 32 });
+/**
+ * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ExpandableGroup({ gap = 8, itemHeight = 32, lineLimit = 2, defaultExpanded = false, children, onExpand, opener = data => react_1.default.createElement(react_1.default.Fragment, null,
+    "\u0415\u0449\u0451 ",
+    data.hiddenCount), className, style, expanded: expandedProp, }) {
+    const wrapperRef = (0, react_1.useRef)(null);
+    const containerRef = (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;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        expandedProp !== undefined && setExpanded(expandedProp);
+    }, [expandedProp]);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
+    const { hiddenCount } = (0, utils_1.useExpandable)({
+        expanded,
+        wrapperRef,
+        containerRef,
+        openerRef,
+    });
+    return (react_1.default.createElement(GroupContext.Provider, { value: { gap, itemHeight } },
+        react_1.default.createElement("div", { ref: wrapperRef, className: cx('root', className), style: Object.assign(Object.assign({}, style), { maxHeight: expanded ? undefined : `${itemHeight * lineLimit + gap * (lineLimit - 1)}px` }) },
+            react_1.default.createElement("ul", { ref: containerRef, className: expandable_group_module_scss_1.default.inner, style: { marginRight: `${-gap}px`, marginBottom: `${-gap}px` } },
+                items,
+                mounted && !expanded && (react_1.default.createElement(ExpandableItem, { ref: openerRef, onClick: () => {
+                        setExpanded(true);
+                        onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+                    }, "data-testid": 'expandable:opener' }, opener({ hiddenCount })))))));
+}
+exports.ExpandableGroup = ExpandableGroup;
+const ExpandableItem = (0, react_1.forwardRef)(({ children, onClick, 'data-testid': testId = 'expandable:item' }, ref) => {
+    const { gap, itemHeight } = (0, react_1.useContext)(GroupContext);
+    return (react_1.default.createElement("li", { ref: ref, className: cx('item'), "data-testid": testId, onClick: onClick, style: {
+            height: `${itemHeight}px`,
+            margin: `0 ${gap}px ${gap}px 0`,
+        } }, children));
+});
+exports.Expandable = {
+    Group: ExpandableGroup,
+    Item: ExpandableItem,
+};

package/expandable/utils.d.ts

@@ -0,0 +1,28 @@
+import { RefObject } from 'react';
+export interface ViewState {
+    lastVisibleIndex: number;
+}
+/**
+ * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
+ * @param options.expanded Развернут ли список.
+ * @param options.wrapperRef Реф элемента, формирующего ограничение по высоте.
+ * @param options.containerRef Реф элемента, содержащего список.
+ * @param options.openerRef Реф элемента "открывашки".
+ * @return Рассчитанные данные: кол-во скрытых элементов.
+ */
+export declare function useExpandable({ expanded, wrapperRef, containerRef, openerRef, }: {
+    expanded: boolean;
+    wrapperRef: RefObject<HTMLElement>;
+    containerRef: RefObject<HTMLElement>;
+    openerRef: RefObject<HTMLElement>;
+}): {
+    hiddenCount: number;
+};
+/**
+ * Определяет индекс последнего видимого элемента для свернутого списка.
+ * @param wrapper Элемент, формирующий ограничение по высоте.
+ * @param items Элементы, все кроме "закрывашки".
+ * @param opener Элемент "закрывашки".
+ * @return Состояние.
+ */
+export declare function defineViewState(wrapper: HTMLElement, items: Element[], opener: HTMLElement): ViewState;

package/expandable/utils.js

@@ -0,0 +1,86 @@
+"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;
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const on_1 = __importDefault(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 Реф элемента "открывашки".
+ * @return Рассчитанные данные: кол-во скрытых элементов.
+ */
+function useExpandable({ expanded, wrapperRef, containerRef, openerRef, }) {
+    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);
+                // делаем невидимыми элементы списка которые не влезли
+                for (const [index, item] of items.entries()) {
+                    if (item !== openerEl && index >= state.lastVisibleIndex) {
+                        item.classList.add(expandable_group_module_scss_1.default.hidden);
+                    }
+                }
+                setHiddenCount(items.length - state.lastVisibleIndex);
+            }
+        }
+    }, [expanded]);
+    // пересчитываем после каждого rerender'а
+    (0, hooks_1.useIsomorphicLayoutEffect)(calc);
+    // пересчитываем при resize
+    (0, react_1.useEffect)(() => (0, on_1.default)(window, 'resize', calc), [calc]);
+    return { hiddenCount };
+}
+exports.useExpandable = useExpandable;
+/**
+ * Определяет индекс последнего видимого элемента для свернутого списка.
+ * @param wrapper Элемент, формирующий ограничение по высоте.
+ * @param items Элементы, все кроме "закрывашки".
+ * @param opener Элемент "закрывашки".
+ * @return Состояние.
+ */
+function defineViewState(wrapper, items, opener) {
+    const state = { lastVisibleIndex: -1 };
+    const parentRect = wrapper.getBoundingClientRect();
+    const firstHiddenNodeIndex = items.findIndex(child => {
+        const childRect = child.getBoundingClientRect();
+        return childRect.top - parentRect.top >= parentRect.height;
+    });
+    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 >= opener.clientWidth * 1.5;
+            // если хватает места - ставим кнопку после последнего, иначе - вместо
+            state.lastVisibleIndex = lastVisibleIndex + Number(isOpenerFit);
+        }
+    }
+    return state;
+}
+exports.defineViewState = defineViewState;

package/modal/index.js

@@ -35,17 +35,17 @@ const shadows_1 = require("../styling/shadows");
 const lodash_1 = require("lodash");
 const slots_1 = require("./slots");
 const layer_1 = require("../helpers/layer");
-const bind_1 = __importDefault(require("classnames/bind"));
-const modal_module_scss_1 = __importDefault(require("./modal.module.scss"));
 const define_slots_1 = require("../helpers/define-slots");
 const body_scroll_1 = require("../_internal/body-scroll");
+const bind_1 = __importDefault(require("classnames/bind"));
+const modal_module_scss_1 = __importDefault(require("./modal.module.scss"));
 const cx = bind_1.default.bind(modal_module_scss_1.default);
 /**
  * Компонент модального окна.
  * @param props Свойства.
  * @return Элемент.
  */
-const Modal = ({ children, height, onClose, scrollDisableOptions = { reserveScrollBarGap: true }, size = 'm', withScrollDisable = false, 'data-testid': testId = 'modal', }) => {
+const Modal = ({ children, height, onClose, scrollDisableOptions, size = 'm', withScrollDisable = false, 'data-testid': testId = 'modal', }) => {
     const layer = (0, layer_1.useLayer)() + 100;
     const rootRef = (0, react_1.useRef)(null);
     const bind = (0, utils_1.useCloseHandler)(onClose);
@@ -67,7 +67,9 @@ const Modal = ({ children, height, onClose, scrollDisableOptions = { reserveScro
         '--header-height': `${headerHeight}px`,
         '--footer-height': `${footerHeight}px`,
     };
-    (0, body_scroll_1.useBodyScrollLock)(rootRef, withScrollDisable, scrollDisableOptions);
+    (0, body_scroll_1.useBodyScrollLock)(rootRef, withScrollDisable, Object.assign({ 
+        // defaults
+        reserveScrollBarGap: true, allowTouchMove: body_scroll_1.allowTouchMove }, scrollDisableOptions));
     return (react_1.default.createElement("div", Object.assign({ ref: rootRef, className: cx('overlay'), "data-testid": 'modal:overlay', style: { zIndex: layer } }, bind),
         react_1.default.createElement("div", { className: cx('modal', `size-${size}`, !fullscreen && shadows_1.BoxShadow.z4), style: style, "data-testid": testId },
             header &&

package/modal/slots.js

@@ -46,6 +46,7 @@ const bottom_bar_1 = require("../bottom-bar");
 const custom_scrollbar_1 = require("../_internal/custom-scrollbar");
 const modal_module_scss_1 = __importDefault(require("./modal.module.scss"));
 const viewport_1 = require("../context/viewport");
+const constants_1 = require("../constants");
 /**
  * Шапка окна.
  * @param props Свойства.
@@ -77,7 +78,7 @@ const ModalBody = ({ children, onFullScroll, fullScrollThreshold, }) => {
     const ref = (0, react_1.useRef)(null);
     return (react_1.default.createElement(custom_scrollbar_1.CustomScrollbar, { inFlexBox: true, className: modal_module_scss_1.default.body, overflow: { x: 'h', y: 's' }, onFullScroll: onFullScroll, fullScrollThreshold: fullScrollThreshold },
         react_1.default.createElement(viewport_1.ViewportContext.Provider, { value: ref },
-            react_1.default.createElement("div", { className: modal_module_scss_1.default.main, ref: ref }, children))));
+            react_1.default.createElement("div", Object.assign({ className: modal_module_scss_1.default.main, ref: ref }, { [constants_1.BSL_IGNORE_ATTR]: true }), children))));
 };
 exports.ModalBody = ModalBody;
 /**

package/package.json

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