@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.1

package/{colors.js → colors/index.js}

@@ -1,4 +1,5 @@
 "use strict";
+// GENERATED FILE - DO NOT CHANGE IT MANUALLY
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.COLORS = void 0;
 const collection = {
@@ -14,7 +15,7 @@ const collection = {
     'basic-gray8': '#ebebeb',
     'basic-gray4': '#f5f5f5',
     'basic-gray2': '#fafafa',
-    'basic-white': '#ffffff',
+    'basic-white': '#fff',
     // additional
     'additional-deep-red': '#d50000',
     'additional-red': '#fb3a2f',

package/colors.scss

@@ -1,3 +1,5 @@
+// GENERATED FILE - DO NOT CHANGE IT MANUALLY
+
 // basic
 $basic-blue: #1f84db;
 $basic-gray87: #212121;

package/dot-nav/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type DotNavSize = 's' | 'l';
+export type DotNavSize = 's' | 'l';
 export interface DotNavProps {
     /** Индекс выбранной точки. */
     current?: number;

package/dropdown/index.d.ts

@@ -4,6 +4,7 @@ interface DropdownStyle extends React.CSSProperties {
     '--dropdown-max-height'?: string;
 }
 export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    /** Стили. */
     style?: DropdownStyle;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;

package/dropdown/utils.d.ts

@@ -0,0 +1,19 @@
+import { UseFloatingProps, UseFloatingReturn } from '@floating-ui/react';
+/**
+ * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
+ * @return Конфигурация для `useFloating` по дизайн-гайдам.
+ */
+export declare function dropdownFloatingConfig(): Partial<UseFloatingProps>;
+/**
+ * Возвращает стили для элемента с учетом "слоя".
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+export declare function useDropdownFloatingStyle({ strategy, x, y, refs, }: Pick<UseFloatingReturn, 'strategy' | 'x' | 'y' | 'refs'>): {
+    position: import("@floating-ui/react").Strategy;
+    top: number;
+    left: number;
+    minWidth: string | undefined;
+    zIndex: number;
+    '--opener-width': string | undefined;
+};

package/dropdown/utils.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropdownFloatingStyle = exports.dropdownFloatingConfig = void 0;
+const react_1 = require("@floating-ui/react");
+const layer_1 = require("../helpers/layer");
+/**
+ * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
+ * @return Конфигурация для `useFloating` по дизайн-гайдам.
+ */
+function dropdownFloatingConfig() {
+    return {
+        whileElementsMounted: react_1.autoUpdate,
+        placement: 'bottom-start',
+        middleware: [
+            // @todo в будущем с дизайнерами можем решить использовать autoPlacement
+            // но есть сложности: https://github.com/floating-ui/floating-ui/discussions/2155
+            (0, react_1.flip)({
+                padding: 16,
+            }),
+            (0, react_1.shift)({
+                padding: 16,
+            }),
+        ],
+    };
+}
+exports.dropdownFloatingConfig = dropdownFloatingConfig;
+/**
+ * Возвращает стили для элемента с учетом "слоя".
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+function useDropdownFloatingStyle({ strategy, x, y, refs, }) {
+    const layer = (0, layer_1.useLayer)();
+    const openerWidth = refs.reference.current
+        ? `${refs.reference.current.getBoundingClientRect().width}px`
+        : undefined;
+    return {
+        position: strategy,
+        top: y !== null && y !== void 0 ? y : 0,
+        left: x !== null && x !== void 0 ? x : 0,
+        minWidth: openerWidth,
+        zIndex: layer + 2,
+        // для возможности стилизации
+        '--opener-width': openerWidth,
+    };
+}
+exports.useDropdownFloatingStyle = useDropdownFloatingStyle;

package/dropdown-item/dropdown-item.module.scss

@@ -1,18 +1,24 @@
 @use '../colors';
 
-$sizes: (
-  s: 40px,
-  m: 48px,
-  l: 56px,
-  xl: 72px,
-);
-
 .root {
   display: flex;
-  align-items: center;
-  padding: 0 24px;
+  padding: var(--menu-item-gutter-y) 16px;
   font-size: 16px;
   line-height: 24px;
+  min-height: var(--menu-item-min-height);
+  max-height: var(--menu-item-max-height);
+  background: #fff;
+  overflow: hidden;
+  --menu-item-primary-color: #{colors.$basic-gray87};
+  --menu-item-secondary-color: #{colors.$basic-gray38};
+  --menu-item-main-weight: 400;
+  &.selected {
+    --menu-item-primary-weight: 600;
+  }
+  &.disabled {
+    --menu-item-primary-color: #{colors.$basic-gray24};
+    --menu-item-secondary-color: #{colors.$basic-gray24};
+  }
   &:not(.disabled):not(.no-hover).checked,
   &:not(.disabled):not(.no-hover):hover {
     cursor: pointer;
@@ -20,12 +26,71 @@ $sizes: (
   }
 }
 
-.disabled {
-  color: colors.$basic-gray24;
+// sizes
+.size-s {
+  --menu-item-min-height: 40px;
+  --menu-item-max-height: 64px;
+  --menu-item-gutter-y: 8px;
 }
 
-@each $key, $size in $sizes {
-  .size-#{$key} {
-    height: $size;
-  }
+.size-m {
+  --menu-item-min-height: 48px;
+  --menu-item-max-height: 72px;
+  --menu-item-gutter-y: 12px;
+}
+
+.size-l {
+  --menu-item-min-height: 56px;
+  --menu-item-max-height: 80px;
+  --menu-item-gutter-y: 16px;
+}
+
+.size-xl {
+  --menu-item-min-height: 72px;
+  --menu-item-max-height: 116px;
+  --menu-item-gutter-y: 12px;
+}
+
+// items
+.col + .col {
+  margin-left: 12px;
+}
+
+.col-start {
+  color: var(--menu-item-primary-color);
+}
+
+.col-center {
+  flex-grow: 1;
+}
+
+.row-main {
+  color: var(--menu-item-primary-color);
+  font-weight: var(--menu-item-primary-weight);
+  max-height: 48px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.row-comment {
+  margin-top: 4px;
+  font-size: 14px;
+  line-height: 20px;
+  max-height: 40px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.col-end,
+.row-comment {
+  color: var(--menu-item-secondary-color);
+}
+
+.icon {
+  display: block;
+  fill: currentColor;
 }

package/dropdown-item/index.d.ts

@@ -1,23 +1,34 @@
-import React from 'react';
+import React, { ComponentType, ReactNode, SVGAttributes } from 'react';
+export type DropdownItemSize = 's' | 'm' | 'l' | 'xl';
 export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size'> {
-    /** Отображать элемент как отмеченный или нет. */
+    /** Отображать элемент как отмеченный (активный) или нет. */
     checked?: boolean;
+    /** Отображать элемент как выбранный или нет. */
+    selected?: boolean;
     /** Отключен ли элемент. */
     disabled?: boolean;
     /** Нужно ли отключить эффект при наведении. */
     noHover?: boolean;
     /** Размер. */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: DropdownItemSize;
+    /** Строковое значение, ассоциированное с элементом списка. */
+    value?: string;
+    /** Контент перед основным содержимым. */
+    startContent?: ReactNode;
+    /** Контент после основного содержимого. */
+    endContent?: ReactNode;
+    /** Иконка перед основным содержимым. При указании будет проигнорирован "startContent". */
+    startIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Иконка после основного содержимого. При указании будет проигнорирован "endContent". */
+    endIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Контент под основным содержимым. Выводится только при size='xl'. */
+    comment?: ReactNode;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
 /**
- * Компонент элемента выпадающего списка.
+ * Элемент выпадающего списка.
  * @param props Свойства.
- * @param props.checked Отображать элемент как отмеченный или нет.
- * @param props.disabled Отключен ли элемент.
- * @param props.noHover Нужно ли отключить эффект при наведении.
- * @param props.size Размер.
  * @return Элемент.
  */
-export declare const DropdownItem: ({ size, children, className, disabled, noHover, checked, "data-testid": testId, ...restProps }: DropdownItemProps) => JSX.Element;
+export declare function DropdownItem({ size, children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, 'data-testid': testId, ...restProps }: DropdownItemProps): JSX.Element;

package/dropdown-item/index.js

@@ -20,16 +20,19 @@ const bind_1 = __importDefault(require("classnames/bind"));
 const dropdown_item_module_scss_1 = __importDefault(require("./dropdown-item.module.scss"));
 const cx = bind_1.default.bind(dropdown_item_module_scss_1.default);
 /**
- * Компонент элемента выпадающего списка.
+ * Элемент выпадающего списка.
  * @param props Свойства.
- * @param props.checked Отображать элемент как отмеченный или нет.
- * @param props.disabled Отключен ли элемент.
- * @param props.noHover Нужно ли отключить эффект при наведении.
- * @param props.size Размер.
  * @return Элемент.
  */
-const DropdownItem = (_a) => {
-    var { size = 'm', children, className, disabled, noHover, checked, 'data-testid': testId = 'dropdown-item' } = _a, restProps = __rest(_a, ["size", "children", "className", "disabled", "noHover", "checked", 'data-testid']);
-    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('root', `size-${size}`, checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), "data-testid": testId }), children));
-};
+function DropdownItem(_a) {
+    var { size = 'm', children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, 'data-testid': testId = 'dropdown-item' } = _a, restProps = __rest(_a, ["size", "children", "className", "selected", "disabled", "noHover", "checked", "startContent", "startIcon", "endContent", "endIcon", "comment", 'data-testid']);
+    const start = StartIcon ? react_1.default.createElement(StartIcon, { className: cx('icon') }) : startContent;
+    const end = EndIcon ? react_1.default.createElement(EndIcon, { className: cx('icon') }) : endContent;
+    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('root', `size-${size}`, selected && 'selected', checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), "data-testid": testId }),
+        start && react_1.default.createElement("div", { className: cx('col', 'col-start') }, start),
+        react_1.default.createElement("div", { className: cx('col', 'col-center') },
+            react_1.default.createElement("div", { className: cx('row-main') }, children),
+            size === 'xl' && comment && react_1.default.createElement("div", { className: cx('row-comment') }, comment)),
+        end && react_1.default.createElement("div", { className: cx('col', 'col-end') }, end)));
+}
 exports.DropdownItem = DropdownItem;

package/dropdown-item/types.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { DropdownItem, DropdownItemProps } from '.';
+export type DropdownItemElement = ReactElement<DropdownItemProps, typeof DropdownItem>;

package/dropdown-item/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dropdown-item/utils.d.ts

@@ -0,0 +1,45 @@
+import { isValidElement } from 'react';
+import { DropdownItemElement } from './types';
+/** Утилиты для работы с DropdownItem. */
+export declare class DropdownItemUtils {
+    /**
+     * Определяет, является ли переданное значение элементом DropdownItem.
+     * @param value Значение.
+     * @return Является ли переданное значение элементом DropdownItem.
+     */
+    static is(value: Parameters<typeof isValidElement>[0]): value is DropdownItemElement;
+    /**
+     * Возвращает значение элемента меню.
+     * @param menuItem Значение.
+     * @return Значение элемента меню.
+     */
+    static getValue(menuItem: DropdownItemElement): string;
+    /**
+     * Получив опции меню вернет LinkedList и текущую позицию в нем.
+     * @param menuItems Опции.
+     * @param currentIndex Индекс текущей выбранной опции.
+     * @return Текущая позиция в списке и список.
+     */
+    static asLoopedIterator(menuItems: DropdownItemElement[], currentIndex: number): LoopedIterator<number>;
+}
+/** Список с возможностью перемещаться вперед назад с закольцовыванием. */
+export declare class LoopedIterator<T = unknown> {
+    private source;
+    private position;
+    /**
+     * Конструктор.
+     * @param source Источник данных.
+     * @param startPosition Начальная позиция.
+     */
+    constructor(source: T[], startPosition?: number);
+    /**
+     * Возвращает следующий элемент списка.
+     * @return Элемент списка или undefined.
+     */
+    next(): T | undefined;
+    /**
+     * Возвращает предыдущий элемент списка.
+     * @return Элемент списка или undefined.
+     */
+    prev(): T | undefined;
+}

package/dropdown-item/utils.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoopedIterator = exports.DropdownItemUtils = void 0;
+const react_1 = require("react");
+const _1 = require(".");
+/** Утилиты для работы с DropdownItem. */
+class DropdownItemUtils {
+    /**
+     * Определяет, является ли переданное значение элементом DropdownItem.
+     * @param value Значение.
+     * @return Является ли переданное значение элементом DropdownItem.
+     */
+    static is(value) {
+        return (0, react_1.isValidElement)(value) && value.type === _1.DropdownItem;
+    }
+    /**
+     * Возвращает значение элемента меню.
+     * @param menuItem Значение.
+     * @return Значение элемента меню.
+     */
+    static getValue(menuItem) {
+        const { value, children } = menuItem.props;
+        // нативный select преобразует содержимое option к строке если не указан value, делаем также
+        return typeof value === 'string' ? value : String(children);
+    }
+    /**
+     * Получив опции меню вернет LinkedList и текущую позицию в нем.
+     * @param menuItems Опции.
+     * @param currentIndex Индекс текущей выбранной опции.
+     * @return Текущая позиция в списке и список.
+     */
+    static asLoopedIterator(menuItems, currentIndex) {
+        let currentPosition = -1;
+        const availableIndices = menuItems.reduce((acc, item, index) => {
+            if (index === currentIndex) {
+                currentPosition = acc.length;
+            }
+            if (!item.props.disabled) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        return new LoopedIterator(availableIndices, currentPosition);
+    }
+}
+exports.DropdownItemUtils = DropdownItemUtils;
+/** Список с возможностью перемещаться вперед назад с закольцовыванием. */
+class LoopedIterator {
+    /**
+     * Конструктор.
+     * @param source Источник данных.
+     * @param startPosition Начальная позиция.
+     */
+    constructor(source, startPosition = 0) {
+        this.source = source;
+        this.position = startPosition;
+    }
+    /**
+     * Возвращает следующий элемент списка.
+     * @return Элемент списка или undefined.
+     */
+    next() {
+        if (this.source.length === 0) {
+            return undefined;
+        }
+        let nextIndex = this.position + 1;
+        if (nextIndex >= this.source.length) {
+            nextIndex = 0;
+        }
+        this.position = nextIndex;
+        return this.source[nextIndex];
+    }
+    /**
+     * Возвращает предыдущий элемент списка.
+     * @return Элемент списка или undefined.
+     */
+    prev() {
+        if (this.source.length === 0) {
+            return undefined;
+        }
+        let nextIndex = this.position - 1;
+        if (nextIndex < 0) {
+            nextIndex = this.source.length - 1;
+        }
+        this.position = nextIndex;
+        return this.source[nextIndex];
+    }
+}
+exports.LoopedIterator = LoopedIterator;

package/expandable/utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.defineViewState = exports.useExpandable = void 0;
 const react_1 = require("react");
 const hooks_1 = require("../hooks");
-const on_1 = __importDefault(require("../helpers/on"));
+const on_1 = require("../helpers/on");
 const expandable_group_module_scss_1 = __importDefault(require("./expandable-group.module.scss"));
 /**
  * Хук состояния группы элементов ограниченных несколькими строками с возможностью показать все.
@@ -50,11 +50,11 @@ function useExpandable({ expanded, wrapperRef, containerRef, openerRef, gap, })
                 setHiddenCount(state.lastVisibleIndex !== -1 ? items.length - state.lastVisibleIndex : 0);
             }
         }
-    }, [expanded, gap]);
+    }, [expanded, gap, wrapperRef, containerRef, openerRef]);
     // пересчитываем после каждого rerender'а
     (0, hooks_1.useIsomorphicLayoutEffect)(calc);
     // пересчитываем при resize
-    (0, react_1.useEffect)(() => (0, on_1.default)(window, 'resize', calc), [calc]);
+    (0, react_1.useEffect)(() => (0, on_1.on)(window, 'resize', calc), [calc]);
     return { hiddenCount };
 }
 exports.useExpandable = useExpandable;

package/field-block/field-block.module.scss

@@ -0,0 +1,155 @@
+@use '../colors';
+
+.root {
+  font-size: 16px;
+  line-height: 24px;
+  width: var(--field-width, 240px);
+  color: var(--field-primary-text-color);
+  --field-primary-text-color: #{colors.$basic-gray87};
+  --field-label-text-color: #{colors.$basic-gray38};
+  --field-background: #fff;
+  --field-border-color: #{colors.$basic-gray12};
+  --field-caption-color: #{colors.$basic-gray38};
+  &.size-s {
+    font-size: 14px;
+    line-height: 20px;
+    --field-height: 32px;
+    --field-gutter-horizontal: 12px;
+    --field-gutter-adornment: 8px;
+    --field-gutter-vertical: 6px;
+  }
+  &.size-m {
+    --field-height: 40px;
+    --field-gutter-horizontal: 12px;
+    --field-gutter-adornment: 8px;
+    --field-gutter-vertical: 8px;
+  }
+  &.size-l {
+    --field-height: 56px;
+    --field-gutter-horizontal: 16px;
+    --field-gutter-adornment: 12px;
+    --field-gutter-vertical: 8px;
+    &.no-label {
+      .main-col {
+        padding: 8px 0;
+      }
+    }
+  }
+  &.focused {
+    --field-border-color: #{colors.$basic-blue};
+  }
+  &.disabled {
+    --field-primary-text-color: #{colors.$basic-gray24};
+    --field-main-text-color: #{colors.$basic-gray24};
+    --field-label-text-color: #{colors.$basic-gray24};
+    --field-background: #{colors.$basic-gray2};
+    --field-border-color: #{colors.$basic-gray12};
+  }
+  &.failed {
+    --field-caption-color: #{colors.$additional-deep-red};
+    --field-main-text-color: #{colors.$additional-deep-red};
+    &.label-as-placeholder {
+      --field-label-text-color: #{colors.$additional-deep-red};
+    }
+  }
+  &.label-as-placeholder {
+    &.size-s {
+      .label {
+        // @todo из-за overflow:hidden + height:0 скрывается - поменять логику
+        // height: 0;
+
+        // размер шрифта 12px увеличиваем до 14px
+        transform: scale(calc(7 / 6)) translateY(1px);
+        max-width: calc(100% * (6 / 7));
+      }
+    }
+    &.size-m {
+      .label {
+        // @todo из-за overflow:hidden + height:0 скрывается - поменять логику
+        // height: 0;
+
+        // размер шрифта 12px увеличиваем до 16px
+        transform: scale(calc(4 / 3)) translateY(1px);
+        max-width: calc(100% * (3 / 4));
+      }
+    }
+    &.size-l {
+      .label {
+        // размер шрифта 12px увеличиваем до 16px
+        transform: scale(calc(4 / 3)) translateY(7px);
+        max-width: calc(100% * (3 / 4));
+      }
+    }
+    .main {
+      opacity: 0;
+    }
+  }
+}
+
+.block {
+  border-radius: 4px;
+  outline: 0;
+  display: flex;
+  align-items: flex-start;
+  padding: var(--field-gutter-vertical) var(--field-gutter-horizontal);
+  width: 100%;
+  background: var(--field-background);
+  box-shadow: inset 0 0 0 1px var(--field-border-color);
+  &.fixed-height {
+    height: var(--field-height);
+  }
+  &:not(.fixed-height) {
+    min-height: var(--field-height);
+  }
+}
+
+.label {
+  max-width: 100%;
+  transform-origin: 0 0;
+  transition: transform 0.2s ease-in-out, max-width 0.2s ease-in-out;
+  height: 16px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--field-label-text-color, var(--field-primary-text-color));
+  user-select: none;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.col {
+  min-height: calc(var(--field-height) - (2 * var(--field-gutter-vertical)));
+}
+
+.main-col {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 0; // чтобы не выбивал "соседей" за пределы блока
+}
+
+.adornment-col {
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  &.start {
+    margin-right: var(--field-gutter-adornment);
+  }
+  &.end {
+    margin-left: var(--field-gutter-adornment);
+  }
+}
+
+.main {
+  max-width: 100%;
+  white-space: nowrap;
+  color: var(--field-main-text-color, var(--field-primary-text-color));
+}
+
+.caption {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--field-caption-color);
+}