@sima-land/ui-nucleons 44.2.0 → 44.2.3

package/expandable/expandable-group.module.scss

@@ -4,15 +4,25 @@
 
 .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: 100%;
+  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

@@ -22,6 +22,7 @@ export interface ExpandableGroupProps {
     style?: CSSProperties;
     /** Нужно ли выводить список развернутым. */
     expanded?: boolean;
+    openerWidth?: number;
 }
 export interface GroupItemProps {
     children?: ReactNode;
@@ -33,8 +34,8 @@ export interface GroupItemProps {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function ExpandableGroup({ gap, itemHeight, lineLimit, defaultExpanded, children, onExpand, opener, className, style, expanded: expandedProp, }: ExpandableGroupProps): JSX.Element;
+export declare function ExpandableGroup({ gap, itemHeight, lineLimit, defaultExpanded, children, onExpand, opener, className, style, expanded: expandedProp, openerWidth, }: ExpandableGroupProps): JSX.Element;
 export declare const Expandable: {
     readonly Group: typeof ExpandableGroup;
-    readonly Item: React.ForwardRefExoticComponent<GroupItemProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Item: React.ForwardRefExoticComponent<GroupItemProps & React.RefAttributes<HTMLLIElement>>;
 };

package/expandable/index.js

@@ -32,7 +32,6 @@ 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)({});
 /**
  * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
@@ -41,40 +40,44 @@ 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, expanded: expandedProp, }) {
+    data.hiddenCount), className, style, expanded: expandedProp, openerWidth = 72, }) {
+    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 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 isDisplayed = !needHideItems || index < viewState.lastVisibleIndex;
+    const items = react_1.Children.toArray(children).reduce((result, child) => {
         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 })));
+            result.push(child);
         }
         return result;
     }, []);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
     (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`, marginBottom: `${-gap}px` } },
-                items,
-                !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 }))))))));
+    const { hiddenCount } = (0, utils_1.useExpandable)({
+        expanded,
+        wrapperRef,
+        containerRef,
+        openerRef,
+        gap,
+    });
+    return (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`, '--expandable-item-height': `${itemHeight}px`, '--expandable-opener-width': `${openerWidth}px`, '--expandable-gap': `${gap}px` }) },
+        react_1.default.createElement("ul", { ref: containerRef, className: expandable_group_module_scss_1.default.inner },
+            items,
+            mounted && !expanded && (react_1.default.createElement(ItemContext.Provider, { value: { invisible: hiddenCount === 0, opener: true } },
+                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);
-    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));
+    const context = (0, react_1.useContext)(ItemContext);
+    return (react_1.default.createElement("li", { ref: ref, className: cx('item', context), "data-testid": testId, onClick: onClick }, children));
 });
 exports.Expandable = {
     Group: ExpandableGroup,

package/expandable/utils.d.ts

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

package/expandable/utils.js

@@ -3,78 +3,87 @@ 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;
+exports.defineViewState = exports.useExpandable = 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,
-};
+const expandable_group_module_scss_1 = __importDefault(require("./expandable-group.module.scss"));
 /**
  * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
- * @param containerRef Ref элемента-контейнера.
- * @param openerRef Ref элемента кнопки, показывающей всю группу.
- * @return Состояние.
+ * @param options.expanded Развернут ли список.
+ * @param options.wrapperRef Реф элемента, формирующего ограничение по высоте.
+ * @param options.containerRef Реф элемента, содержащего список.
+ * @param options.openerRef Реф элемента "открывашки".
+ * @param options.gap Расстояние между элементами списка.
+ * @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', () => {
-            setViewState(exports.initialViewState);
-        });
-        return off;
-    }, []);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        if (viewState.phase === 'default') {
-            setViewState(defineViewState(containerRef, openerRef));
+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);
+                }
+            }
         }
-        // если произошел рендер и на предыдущем рендере уже все было готово - сбрасываем состояние
-        if (viewState.phase === 'ready' && prevPhaseRef.current === 'ready') {
-            setViewState({
-                phase: 'default',
-                lastVisibleIndex: -1,
-            });
+        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);
+            }
         }
-        prevPhaseRef.current = viewState.phase;
-    });
-    return viewState;
+    }, [expanded, gap]);
+    // пересчитываем после каждого rerender'а
+    (0, hooks_1.useIsomorphicLayoutEffect)(calc);
+    // пересчитываем при resize
+    (0, react_1.useEffect)(() => (0, on_1.default)(window, 'resize', calc), [calc]);
+    return { hiddenCount };
 }
-exports.useViewState = useViewState;
+exports.useExpandable = useExpandable;
 /**
  * Определяет индекс последнего видимого элемента для свернутого списка.
- * @param containerRef Ref элемента-контейнера.
- * @param openerRef Ref элемента кнопки, показывающей весь список.
+ * @param wrapper Элемент, формирующий ограничение по высоте.
+ * @param items Элементы, все кроме "закрывашки".
+ * @param opener Элемент "закрывашки".
+ * @param gap Расстояние между элементами списка.
  * @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);
-            }
+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;
+    });
+    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);
         }
     }
     return state;

package/package.json

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

package/stepper/index.d.ts

@@ -9,9 +9,9 @@ export interface StepperProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
     /** Нужно ли выводить кнопку вычитания. */
     canSubtract?: boolean;
     /** Сработает при добавлении. */
-    onAdd?: React.MouseEventHandler<SVGSVGElement>;
+    onAdd?: React.MouseEventHandler;
     /** Сработает при вычитании. */
-    onSubtract?: React.MouseEventHandler<SVGSVGElement>;
+    onSubtract?: React.MouseEventHandler;
     /** Размер. */
     size?: Size;
     /** Идентификатор для систем автоматизированного тестирования. */

package/stepper/index.js

@@ -53,7 +53,8 @@ exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
     var { canAdd = true, canSubtract = true, className, disabled, readOnly, onAdd, onBlur, onChange, onFocus, onSubtract, size = 'm', style, value, failed, 'data-testid': testId = 'stepper' } = _a, inputProps = __rest(_a, ["canAdd", "canSubtract", "className", "disabled", "readOnly", "onAdd", "onBlur", "onChange", "onFocus", "onSubtract", "size", "style", "value", "failed", 'data-testid']);
     const [focused, setFocused] = (0, react_1.useState)(false);
     return (react_1.default.createElement("div", { "data-testid": testId, style: style, className: cx('root', `size-${size}`, { disabled, focused, readonly: readOnly, failed }, className) },
-        react_1.default.createElement(minus_1.default, { "data-testid": 'stepper:minus', className: cx('button', { hidden: !canSubtract }), onClick: canSubtract && !disabled && !readOnly ? onSubtract : undefined }),
+        react_1.default.createElement("button", { className: cx('button', { hidden: !canSubtract }), "data-testid": 'stepper:minus', onClick: canSubtract && !disabled && !readOnly ? onSubtract : undefined },
+            react_1.default.createElement(minus_1.default, null)),
         react_1.default.createElement("input", Object.assign({}, inputProps, { ref: ref, readOnly: readOnly, "data-testid": 'stepper:input', className: cx('input'), value: value, disabled: disabled, onChange: onChange, onFocus: e => {
                 setFocused(true);
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
@@ -61,5 +62,6 @@ exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
                 setFocused(false);
                 onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
             } })),
-        react_1.default.createElement(plus_1.default, { "data-testid": 'stepper:plus', className: cx('button', { hidden: !canAdd }), onClick: canAdd && !disabled && !readOnly ? onAdd : undefined })));
+        react_1.default.createElement("button", { className: cx('button', { hidden: !canAdd }), "data-testid": 'stepper:plus', onClick: canAdd && !disabled && !readOnly ? onAdd : undefined },
+            react_1.default.createElement(plus_1.default, null))));
 });

package/stepper/stepper.module.scss

@@ -3,18 +3,19 @@
 .root {
   display: flex;
   align-items: center;
-  border: 1px solid colors.$basic-gray12;
+  border: 1px solid transparent;
   border-radius: 4px;
   color: colors.$basic-gray87;
-  background: #fff;
+  background: colors.$basic-gray8;
   &.focused:not(.disabled) {
     border-color: colors.$basic-blue;
   }
   &.disabled {
     color: colors.$basic-gray24;
-    border-color: colors.$basic-gray12;
+    border-color: colors.$basic-gray4;
+    background: colors.$basic-gray4;
     .button {
-      fill: colors.$basic-gray12;
+      fill: colors.$basic-gray24;
     }
   }
   &.readonly {
@@ -23,17 +24,18 @@
     }
   }
   &.failed:not(.disabled):not(.focused) {
-    border-color: colors.$additional-deep-red;
+    border-color: transparent;
+    color: colors.$additional-deep-red;
   }
   &.size-s {
+    --stepper-button-width: 24px;
     width: var(--stepper-width, 122px);
     height: 40px;
-    padding: 0 8px;
   }
   &.size-m {
+    --stepper-button-width: 32px;
     width: var(--stepper-width, 160px);
     height: 48px;
-    padding: 0 16px;
   }
 }
 
@@ -42,7 +44,7 @@
   padding: 0;
 
   // не надо делать transparent: https://stackoverflow.com/q/43483363/13166471
-  background: #fff;
+  background: inherit;
   outline: 0;
   width: 0;
   flex-grow: 1;
@@ -56,8 +58,21 @@
 }
 
 .button {
-  fill: colors.$basic-gray38;
+  display: flex;
+  align-items: center;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  width: var(--stepper-button-width);
+  height: 100%;
+  fill: colors.$basic-gray87;
   flex-shrink: 0;
+  &:first-child {
+    justify-content: flex-end;
+  }
+  &:last-child {
+    justify-content: flex-start;
+  }
   &:not(.hidden) {
     cursor: pointer;
   }

package/text-field/text-field.module.scss

@@ -91,7 +91,7 @@ input.reset {
       box-shadow: inset 0 -1px colors.$basic-blue;
     }
     &.failed:not(:disabled) {
-      box-shadow: inset 0 -1px colors.$additional-red;
+      box-shadow: inset 0 -1px colors.$additional-deep-red;
     }
     &:not(.multiline) {
       height: 48px;
@@ -158,12 +158,12 @@ input.reset {
     }
     &.failed.focused,
     &.failed.filled {
-      color: colors.$additional-red;
+      color: colors.$additional-deep-red;
     }
   }
   &.variant-desktop {
     &.failed:not(.focused):not(.filled) {
-      color: colors.$additional-red;
+      color: colors.$additional-deep-red;
     }
   }
 }
@@ -190,7 +190,7 @@ input.reset {
     text-overflow: ellipsis;
   }
   &.variant-desktop.failed {
-    color: colors.$additional-red;
+    color: colors.$additional-deep-red;
     --placeholder-color: #{colors.$additional-deep-red};
   }
 }
@@ -200,6 +200,6 @@ input.reset {
   line-height: 16px;
   color: colors.$basic-gray38;
   &.failed {
-    color: colors.$additional-red;
+    color: colors.$additional-deep-red;
   }
 }