@sima-land/ui-nucleons 44.0.1 → 44.1.0

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/expandable/expandable-group.module.scss

@@ -0,0 +1,18 @@
+.root {
+  overflow: hidden;
+}
+
+.inner {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.item {
+  max-width: 100%;
+  &.hidden {
+    display: none;
+  }
+  &.invisible {
+    opacity: 0;
+  }
+}

package/expandable/index.d.ts

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

package/expandable/index.js

@@ -0,0 +1,78 @@
+"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 = 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 });
+const ItemContext = (0, react_1.createContext)({});
+/**
+ * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
+ * @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, }) {
+    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 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 &&
+            result.push(react_1.default.createElement(ItemContext.Provider, { key: index, value: { hidden: !isDisplayed } }, (0, react_1.cloneElement)(child, { hidden: !isDisplayed })));
+        return result;
+    }, []);
+    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` } },
+                items,
+                !expanded && (react_1.default.createElement(ItemContext.Provider, { value: { invisible: viewState.lastVisibleIndex === -1 } },
+                    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 }))))))));
+}
+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);
+    return (react_1.default.createElement("div", { ref: ref, className: cx('item', { hidden, invisible }), "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,20 @@
+import { RefObject } from 'react';
+export interface ViewState {
+    phase: 'default' | 'ready';
+    lastVisibleIndex: number;
+}
+export declare const initialViewState: ViewState;
+/**
+ * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
+ * @param containerRef Ref элемента-контейнера.
+ * @param openerRef Ref элемента кнопки, показывающей всю группу.
+ * @return Состояние.
+ */
+export declare function useViewState(containerRef: RefObject<HTMLElement>, openerRef: RefObject<HTMLElement>): ViewState;
+/**
+ * Определяет индекс последнего видимого элемента для свернутого списка.
+ * @param containerRef Ref элемента-контейнера.
+ * @param openerRef Ref элемента кнопки, показывающей весь список.
+ * @return Состояние.
+ */
+export declare function defineViewState(containerRef: RefObject<HTMLElement>, openerRef: RefObject<HTMLElement>): ViewState;

package/expandable/utils.js

@@ -0,0 +1,73 @@
+"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.useViewState = exports.initialViewState = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const on_1 = __importDefault(require("../helpers/on"));
+exports.initialViewState = {
+    phase: 'default',
+    lastVisibleIndex: -1,
+};
+/**
+ * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
+ * @param containerRef Ref элемента-контейнера.
+ * @param openerRef Ref элемента кнопки, показывающей всю группу.
+ * @return Состояние.
+ */
+function useViewState(containerRef, openerRef) {
+    const [viewState, setViewState] = (0, react_1.useState)(exports.initialViewState);
+    (0, react_1.useEffect)(() => {
+        const off = (0, on_1.default)(window, 'resize', () => {
+            setViewState(exports.initialViewState);
+        });
+        return off;
+    }, []);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (viewState.phase === 'default') {
+            setViewState(defineViewState(containerRef, openerRef));
+        }
+    }, [viewState.phase, containerRef, openerRef]);
+    return viewState;
+}
+exports.useViewState = useViewState;
+/**
+ * Определяет индекс последнего видимого элемента для свернутого списка.
+ * @param containerRef Ref элемента-контейнера.
+ * @param openerRef Ref элемента кнопки, показывающей весь список.
+ * @return Состояние.
+ */
+function defineViewState(containerRef, openerRef) {
+    const state = {
+        phase: 'ready',
+        lastVisibleIndex: -1,
+    };
+    const container = containerRef.current;
+    const opener = openerRef.current;
+    if (container && opener && opener.parentNode) {
+        const parentRect = container.getBoundingClientRect();
+        const childList = [...opener.parentNode.children];
+        const firstHiddenNodeIndex = childList
+            .filter(child => child !== opener)
+            .findIndex(child => {
+            const childRect = child.getBoundingClientRect();
+            return childRect.top - parentRect.top >= parentRect.height;
+        });
+        if (firstHiddenNodeIndex !== -1) {
+            const lastVisibleIndex = firstHiddenNodeIndex - 1;
+            const lastVisible = childList[lastVisibleIndex];
+            if (lastVisible) {
+                const rightBound = lastVisible.getBoundingClientRect().right;
+                const rightContainerBound = container.getBoundingClientRect().right;
+                // проверяем, хватает ли кнопке места (с запасом в половину) после последнего видимого дочернего элемента
+                const isOpenerFit = rightContainerBound - rightBound >= opener.clientWidth * 1.5;
+                // если хватает места - ставим кнопку после последнего, иначе - вместо
+                state.lastVisibleIndex = lastVisibleIndex + Number(isOpenerFit);
+            }
+        }
+    }
+    return state;
+}
+exports.defineViewState = defineViewState;

package/package.json

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