@sima-land/ui-nucleons 44.1.0 → 44.2.2

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/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

@@ -1,16 +1,28 @@
 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;
+    openerWidth?: number;
 }
 export interface GroupItemProps {
     children?: ReactNode;
@@ -22,9 +34,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, 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>>;
 };
-export {};

package/expandable/index.js

@@ -26,13 +26,12 @@ 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"));
 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,36 +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, }) {
+    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 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 })));
+    const items = react_1.Children.toArray(children).reduce((result, child) => {
+        if ((0, react_1.isValidElement)(child) && child.type === ExpandableItem) {
+            result.push(child);
+        }
         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 }))))))));
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        expandedProp !== undefined && setExpanded(expandedProp);
+    }, [expandedProp]);
+    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,69 +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 [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);
+                }
+            }
         }
-    }, [viewState.phase, containerRef, openerRef]);
-    return viewState;
+        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]);
+    // пересчитываем после каждого 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/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.2",
   "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;
   }