@sima-land/ui-nucleons 44.2.1 → 44.2.4

package/checkbox/checkbox.module.scss

@@ -1,3 +1,5 @@
+@use '../colors';
+
 .root {
   position: relative;
   display: inline-block;
@@ -17,4 +19,23 @@
   opacity: 0;
   margin: 0;
   padding: 0;
+  &:not(:checked) + svg .mark {
+    display: none;
+  }
+  &:not(:checked) + svg .square {
+    fill: #fff;
+    stroke: colors.$basic-gray24;
+  }
+  &:checked + svg .square {
+    fill: colors.$basic-blue;
+    stroke: colors.$basic-blue;
+  }
+  &:disabled:not(:checked) + svg .square {
+    fill: colors.$basic-gray4;
+    stroke: colors.$basic-gray24;
+  }
+  &:disabled:checked + svg .square {
+    fill: colors.$basic-gray12;
+    stroke: colors.$basic-gray12;
+  }
 }

package/checkbox/index.js

@@ -39,10 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 const react_1 = __importStar(require("react"));
-const checked_svg_1 = __importDefault(require("./svg/checked.svg"));
-const unchecked_svg_1 = __importDefault(require("./svg/unchecked.svg"));
-const disabled_checked_svg_1 = __importDefault(require("./svg/disabled-checked.svg"));
-const disabled_unchecked_svg_1 = __importDefault(require("./svg/disabled-unchecked.svg"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const checkbox_module_scss_1 = __importDefault(require("./checkbox.module.scss"));
 const cx = bind_1.default.bind(checkbox_module_scss_1.default);
@@ -50,21 +46,13 @@ const cx = bind_1.default.bind(checkbox_module_scss_1.default);
  * Компонент стилизованного переключателя (input[type=checkbox]).
  */
 exports.Checkbox = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, style, 'data-testid': testId = 'checkbox', 
+    var { className, style, 'data-testid': testId = 'checkbox' } = _a, 
     // input props
-    defaultChecked, checked = defaultChecked, disabled, onChange } = _a, restProps = __rest(_a, ["className", "style", 'data-testid', "defaultChecked", "checked", "disabled", "onChange"]);
-    const [isChecked, toggleCheck] = (0, react_1.useState)(Boolean(checked));
-    (0, react_1.useEffect)(() => {
-        toggleCheck(Boolean(checked));
-    }, [checked]);
+    restProps = __rest(_a, ["className", "style", 'data-testid']);
     return (react_1.default.createElement("span", { className: cx('root', className), style: style },
-        react_1.default.createElement("input", Object.assign({}, restProps, { "data-testid": testId, ref: ref, type: 'checkbox', className: cx('input'), onChange: event => {
-                toggleCheck(event.target.checked);
-                onChange === null || onChange === void 0 ? void 0 : onChange(event);
-            }, checked: isChecked, disabled: disabled })),
-        !isChecked && !disabled && react_1.default.createElement(unchecked_svg_1.default, null),
-        isChecked && !disabled && react_1.default.createElement(checked_svg_1.default, null),
-        !isChecked && disabled && react_1.default.createElement(disabled_unchecked_svg_1.default, null),
-        isChecked && disabled && react_1.default.createElement(disabled_checked_svg_1.default, null)));
+        react_1.default.createElement("input", Object.assign({}, restProps, { "data-testid": testId, ref: ref, type: 'checkbox', className: cx('input') })),
+        react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' },
+            react_1.default.createElement("rect", { x: '0.5', y: '0.5', width: '15', height: '15', rx: '1.5', className: cx('square') }),
+            react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z', fill: 'white', className: cx('mark') }))));
 });
 exports.Checkbox.displayName = 'Checkbox';

package/expandable/expandable-group.module.scss

@@ -4,17 +4,25 @@
 
 .inner {
   display: flex;
-  margin: 0;
   padding: 0;
   flex-wrap: wrap;
+  margin: 0 calc(var(--expandable-gap) * -1) calc(var(--expandable-gap) * -1) 0;
 }
 
 .item {
   display: block;
-  margin: 0;
   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,7 +34,7 @@ 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<HTMLLIElement>>;

package/expandable/index.js

@@ -32,7 +32,7 @@ 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 Свойства.
@@ -40,7 +40,7 @@ const GroupContext = (0, react_1.createContext)({ gap: 8, itemHeight: 32 });
  */
 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);
@@ -58,31 +58,26 @@ function ExpandableGroup({ gap = 8, itemHeight = 32, lineLimit = 2, defaultExpan
     (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,
+        gap,
     });
-    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: () => {
+    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);
-    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));
+    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

@@ -8,13 +8,15 @@ export interface ViewState {
  * @param options.wrapperRef Реф элемента, формирующего ограничение по высоте.
  * @param options.containerRef Реф элемента, содержащего список.
  * @param options.openerRef Реф элемента "открывашки".
+ * @param options.gap Расстояние между элементами списка.
  * @return Рассчитанные данные: кол-во скрытых элементов.
  */
-export declare function useExpandable({ expanded, wrapperRef, containerRef, openerRef, }: {
+export declare function useExpandable({ expanded, wrapperRef, containerRef, openerRef, gap, }: {
     expanded: boolean;
     wrapperRef: RefObject<HTMLElement>;
     containerRef: RefObject<HTMLElement>;
     openerRef: RefObject<HTMLElement>;
+    gap: number;
 }): {
     hiddenCount: number;
 };
@@ -23,6 +25,7 @@ export declare function useExpandable({ expanded, wrapperRef, containerRef, open
  * @param wrapper Элемент, формирующий ограничение по высоте.
  * @param items Элементы, все кроме "закрывашки".
  * @param opener Элемент "закрывашки".
+ * @param gap Расстояние между элементами списка.
  * @return Состояние.
  */
-export declare function defineViewState(wrapper: HTMLElement, items: Element[], opener: HTMLElement): ViewState;
+export declare function defineViewState(wrapper: HTMLElement, items: Element[], opener: HTMLElement, gap: number): ViewState;

package/expandable/utils.js

@@ -14,9 +14,10 @@ const expandable_group_module_scss_1 = __importDefault(require("./expandable-gro
  * @param options.wrapperRef Реф элемента, формирующего ограничение по высоте.
  * @param options.containerRef Реф элемента, содержащего список.
  * @param options.openerRef Реф элемента "открывашки".
+ * @param options.gap Расстояние между элементами списка.
  * @return Рассчитанные данные: кол-во скрытых элементов.
  */
-function useExpandable({ expanded, wrapperRef, 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;
@@ -37,17 +38,19 @@ function useExpandable({ expanded, wrapperRef, containerRef, openerRef, }) {
                     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);
+                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(items.length - state.lastVisibleIndex);
+                setHiddenCount(state.lastVisibleIndex !== -1 ? items.length - state.lastVisibleIndex : 0);
             }
         }
-    }, [expanded]);
+    }, [expanded, gap]);
     // пересчитываем после каждого rerender'а
     (0, hooks_1.useIsomorphicLayoutEffect)(calc);
     // пересчитываем при resize
@@ -60,9 +63,10 @@ exports.useExpandable = useExpandable;
  * @param wrapper Элемент, формирующий ограничение по высоте.
  * @param items Элементы, все кроме "закрывашки".
  * @param opener Элемент "закрывашки".
+ * @param gap Расстояние между элементами списка.
  * @return Состояние.
  */
-function defineViewState(wrapper, items, opener) {
+function defineViewState(wrapper, items, opener, gap) {
     const state = { lastVisibleIndex: -1 };
     const parentRect = wrapper.getBoundingClientRect();
     const firstHiddenNodeIndex = items.findIndex(child => {
@@ -75,9 +79,10 @@ function defineViewState(wrapper, items, opener) {
         if (lastVisible) {
             const rightBound = lastVisible.getBoundingClientRect().right;
             const rightContainerBound = wrapper.getBoundingClientRect().right;
-            // проверяем, хватает ли кнопке места (с запасом в половину) после последнего видимого дочернего элемента
-            const isOpenerFit = rightContainerBound - rightBound >= opener.clientWidth * 1.5;
+            // хватает ли кнопке места после последнего видимого дочернего элемента с учетом отступа между элементами
+            const isOpenerFit = rightContainerBound - rightBound - gap >= opener.clientWidth;
             // если хватает места - ставим кнопку после последнего, иначе - вместо
+            // @todo возможна ситуация когда нужно будет удалить N элементов чтобы влезла кнопка
             state.lastVisibleIndex = lastVisibleIndex + Number(isOpenerFit);
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "44.2.1",
+  "version": "44.2.4",
   "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;
   }
 }

package/checkbox/svg/checked.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="16" height="16" rx="2" fill="#1F84DB"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z" fill="white"/>
-</svg>

package/checkbox/svg/disabled-checked.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="16" height="16" rx="2" fill="#E0E0E0"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z" fill="#F5F5F5"/>
-</svg>

package/checkbox/svg/disabled-unchecked.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0.5" y="0.5" width="15" height="15" rx="1.5" fill="#F5F5F5" stroke="#C2C2C2"/>
-</svg>

package/checkbox/svg/unchecked.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0.5" y="0.5" width="15" height="15" rx="1.5" stroke="#9E9E9E"/>
-</svg>