@sima-land/ui-nucleons 44.1.0 → 44.2.0

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/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/index.d.ts

@@ -1,16 +1,27 @@
 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;
@@ -22,9 +33,8 @@ export interface GroupItemProps {
  * @param props Свойства.
  * @return Элемент.
  */
-declare function ExpandableGroup({ gap, itemHeight, lineLimit, defaultExpanded, children, onExpand, opener, className, style, }: ExpandableGroupProps): JSX.Element;
+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<HTMLDivElement>>;
 };
-export {};

package/expandable/index.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Expandable = void 0;
+exports.Expandable = exports.ExpandableGroup = void 0;
 const react_1 = __importStar(require("react"));
 const utils_1 = require("./utils");
 const bind_1 = __importDefault(require("classnames/bind"));
@@ -41,29 +41,33 @@ const ItemContext = (0, react_1.createContext)({});
  */
 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, }) {
+    data.hiddenCount), className, style, expanded: expandedProp, }) {
     const containerRef = (0, react_1.useRef)(null);
     const openerRef = (0, react_1.useRef)(null);
     const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
     const viewState = (0, utils_1.useViewState)(containerRef, openerRef);
+    const needHideItems = viewState.lastVisibleIndex !== -1 && !expanded;
     const items = react_1.Children.toArray(children).reduce((result, child, index) => {
-        const needHideItems = viewState.lastVisibleIndex !== -1 && !expanded;
         const isDisplayed = !needHideItems || index < viewState.lastVisibleIndex;
-        (0, react_1.isValidElement)(child) &&
-            child.type === ExpandableItem &&
+        if ((0, react_1.isValidElement)(child) && child.type === ExpandableItem) {
             result.push(react_1.default.createElement(ItemContext.Provider, { key: index, value: { hidden: !isDisplayed } }, (0, react_1.cloneElement)(child, { hidden: !isDisplayed })));
+        }
         return result;
     }, []);
+    (0, react_1.useEffect)(() => {
+        expandedProp !== undefined && setExpanded(expandedProp);
+    }, [expandedProp]);
     return (react_1.default.createElement(GroupContext.Provider, { value: { gap, itemHeight } },
         react_1.default.createElement("div", { ref: containerRef, className: cx('root', className), style: Object.assign(Object.assign({}, style), { maxHeight: expanded ? undefined : `${itemHeight * lineLimit + gap * (lineLimit - 1)}px` }) },
-            react_1.default.createElement("div", { className: expandable_group_module_scss_1.default.inner, style: { marginRight: `${-gap}px` } },
+            react_1.default.createElement("div", { className: expandable_group_module_scss_1.default.inner, style: { marginRight: `${-gap}px`, marginBottom: `${-gap}px` } },
                 items,
-                !expanded && (react_1.default.createElement(ItemContext.Provider, { value: { invisible: viewState.lastVisibleIndex === -1 } },
+                !expanded && (react_1.default.createElement(ItemContext.Provider, { value: { invisible: false } },
                     react_1.default.createElement(ExpandableItem, { ref: openerRef, onClick: () => {
                             setExpanded(true);
                             onExpand === null || onExpand === void 0 ? void 0 : onExpand();
                         }, "data-testid": 'expandable:opener' }, opener({ hiddenCount: items.length - viewState.lastVisibleIndex }))))))));
 }
+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);
     const { invisible, hidden } = (0, react_1.useContext)(ItemContext);

package/expandable/utils.js

@@ -18,6 +18,7 @@ exports.initialViewState = {
  * @return Состояние.
  */
 function useViewState(containerRef, openerRef) {
+    const prevPhaseRef = (0, react_1.useRef)(null);
     const [viewState, setViewState] = (0, react_1.useState)(exports.initialViewState);
     (0, react_1.useEffect)(() => {
         const off = (0, on_1.default)(window, 'resize', () => {
@@ -29,7 +30,15 @@ function useViewState(containerRef, openerRef) {
         if (viewState.phase === 'default') {
             setViewState(defineViewState(containerRef, openerRef));
         }
-    }, [viewState.phase, containerRef, openerRef]);
+        // если произошел рендер и на предыдущем рендере уже все было готово - сбрасываем состояние
+        if (viewState.phase === 'ready' && prevPhaseRef.current === 'ready') {
+            setViewState({
+                phase: 'default',
+                lastVisibleIndex: -1,
+            });
+        }
+        prevPhaseRef.current = viewState.phase;
+    });
     return viewState;
 }
 exports.useViewState = useViewState;

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.1.0",
+  "version": "44.2.0",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",