@sima-land/ui-nucleons 45.0.0-alpha.3 → 45.0.0-alpha.31

package/button/index.js

@@ -1,72 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-const react_1 = __importStar(require("react"));
-const spinner_1 = require("../spinner");
-const bind_1 = __importDefault(require("classnames/bind"));
-const button_module_scss_1 = __importDefault(require("./button.module.scss"));
-const cx = bind_1.default.bind(button_module_scss_1.default);
-/**
- * Компонент кнопки, стилизованной по дизайн-гайдам.
- * @param props Свойства.
- * @return Элемент.
- */
-exports.Button = (0, react_1.forwardRef)(function Button(_a, ref) {
-    var { viewType = 'primary', icon: Icon, iconPosition = 'start', size = 'm', loading, disabled, className, children, 'data-testid': testId = 'button' } = _a, restProps = __rest(_a, ["viewType", "icon", "iconPosition", "size", "loading", "disabled", "className", "children", 'data-testid']);
-    const hasIcon = Boolean(Icon);
-    const hasText = Boolean(children);
-    const rootClassName = cx('root', `size-${size}`, `view-${viewType}`, loading && 'loading', disabled && 'disabled', hasIcon && !hasText && 'icon-only', hasText && hasIcon && iconPosition === 'start' && 'icon-start', hasText && hasIcon && iconPosition === 'end' && 'icon-end', className);
-    const content = (react_1.default.createElement(react_1.default.Fragment, null,
-        Icon && iconPosition === 'start' && react_1.default.createElement(Icon, { className: cx('icon') }),
-        children,
-        Icon && iconPosition === 'end' && react_1.default.createElement(Icon, { className: cx('icon') }),
-        loading && (react_1.default.createElement(spinner_1.SpinnerSVG, { size: 's', color: disabled || viewType === 'secondary' ? 'basic-gray38' : 'basic-white', className: cx('spinner') }))));
-    let result = null;
-    if (restProps.appearance === 'container') {
-        result = (react_1.default.createElement("div", Object.assign({}, restProps, { ref: ref, className: rootClassName, role: 'button', "data-testid": testId }), content));
-    }
-    else if (restProps.appearance === 'link') {
-        result = (react_1.default.createElement("a", Object.assign({}, restProps, { ref: ref, className: rootClassName, "data-testid": testId }), content));
-    }
-    else {
-        result = (react_1.default.createElement("button", Object.assign({}, restProps, { ref: ref, className: rootClassName, disabled: disabled, "data-testid": testId }), content));
-    }
-    return result;
-});
+var button_1 = require("./button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+//# sourceMappingURL=index.js.map

package/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/button/index.ts"],"names":[],"mappings":";;;AAQA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}

package/button/types.d.ts

@@ -0,0 +1,43 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, ElementType, HTMLAttributes, SVGAttributes } from 'react';
+import type { WithTestId } from '../types';
+export type ButtonSize = 'xs' | 's' | 'm';
+export type ButtonViewType = 'primary' | 'secondary' | 'success' | 'info' | 'unset';
+export type ButtonAppearance = 'button' | 'link' | 'container';
+export type ButtonIconPosition = 'start' | 'end';
+export interface ButtonStyle extends CSSProperties {
+    '--button-color'?: string;
+    '--button-background'?: string;
+    '--button-hover-color'?: string;
+    '--button-hover-background'?: string;
+    '--button-disabled-color'?: string;
+    '--button-disabled-background'?: string;
+}
+interface CommonProps<T extends ButtonAppearance = ButtonAppearance> extends WithTestId {
+    /** Определяет внешний вид кнопки. */
+    viewType?: ButtonViewType;
+    /** Определяет тип корневого элемента. */
+    appearance?: T;
+    /** Иконка. */
+    icon?: ElementType<SVGAttributes<SVGSVGElement>>;
+    /** Позиция иконки относительно текста. */
+    iconPosition?: ButtonIconPosition;
+    /** Размер. */
+    size?: ButtonSize;
+    /** Нужно ли отображать состояние загрузки. */
+    loading?: boolean;
+    /** Отключенное состояние. */
+    disabled?: boolean;
+    /** Стили. */
+    style?: ButtonStyle;
+}
+type AsButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
+    appearance?: 'button';
+};
+type AsAnchorProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    appearance: 'link';
+};
+type AsContainerProps = CommonProps & Omit<HTMLAttributes<HTMLDivElement>, keyof CommonProps> & {
+    appearance: 'container';
+};
+export type ButtonProps = AsButtonProps | AsAnchorProps | AsContainerProps;
+export {};

package/button/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/button/types.ts"],"names":[],"mappings":""}

package/carousel/carousel.d.ts

@@ -0,0 +1,262 @@
+import type { CarouselControlData, CarouselProps, CarouselState, ElementPredicate } from './types';
+import { Component, RefObject } from 'react';
+import { Control } from './draggable';
+import { IPoint } from '../helpers/point';
+import { ArrowButtonProps } from '../arrow-button';
+import { DraggableEvent } from './helpers/draggable-event';
+/**
+ * Карусель - блок с возможностью прокрутки содержимого в виде "слайдов" по горизонтали или вертикали.
+ */
+export declare class Carousel extends Component<CarouselProps, CarouselState> {
+    infinite: boolean;
+    dragStartClient: IPoint;
+    dragStartOffset: IPoint;
+    currentIndex: number;
+    containerRef: RefObject<HTMLDivElement>;
+    rootElementRef: RefObject<HTMLDivElement>;
+    wrapperRef: RefObject<HTMLDivElement>;
+    timerId?: number;
+    canAutoMove?: boolean;
+    mounted?: boolean;
+    offWindowResize: () => void;
+    toggleDragTransition: Control['toggleTransition'];
+    setDragOffset: Control['setOffset'];
+    isGrabbed: Control['isGrabbed'];
+    isTransitionEnabled: Control['isTransitionEnabled'];
+    /**
+     * Конструктор.
+     * @param props Свойства.
+     */
+    constructor(props: CarouselProps);
+    /**
+     * Возвращает элемент списка.
+     * @param item Элемент списка.
+     * @param index Индекс.
+     * @return Элемент списка.
+     */
+    static defaultRenderItem(item: any, index: number): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Возвращает кнопку управления.
+     * @param data Данные для вывода кнопки.
+     * @param data.canUse Можно ли использовать кнопку.
+     * @param data.onUse Выполнится при нажатии на кнопку.
+     * @param props Свойства ArrowButton.
+     * @return Кнопка управления.
+     */
+    static defaultRenderControl({ canUse, onUse, type, vertical }: CarouselControlData, props?: ArrowButtonProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Возвращает функцию для поиска наиболее отдаленного элемента карусели от стартовой границы viewport'а.
+     * @param data Данные.
+     * @param data.viewport Область видимости галереи.
+     * @param data.vertical Показывает, что прокрутка выполняется по вертикали.
+     * @return Функция для поиска наиболее отдаленного элемента.
+     */
+    static makeFurthestSiblingChecker({ vertical, viewport, }: {
+        vertical: boolean;
+        viewport?: DOMRect | null;
+    }): ElementPredicate;
+    /**
+     * Возвращает функцию для поиска наиболее близкого элемента карусели к viewport'у.
+     * @param data Данные.
+     * @param data.viewport Область видимости галереи.
+     * @param data.vertical Показывает, что прокрутка выполняется по вертикали.
+     * @param data.backward Показывает, что прокрутка выполняется к началу списка.
+     * @return Функция для поиска наиболее близкого элемента.
+     */
+    static makeNearestSiblingChecker({ viewport, vertical, backward, }: {
+        backward: boolean;
+        vertical: boolean;
+        viewport?: DOMRect | null;
+    }): ElementPredicate;
+    /**
+     * Геттер элемента списка.
+     * @return Элемент списка или null.
+     */
+    get listElement(): HTMLDivElement | null;
+    /**
+     * Выполняет подписку на глобальное событие "resize".
+     * Запускает прокрутку до текущего элемента.
+     * Обновляет информацию о состоянии отображения элементов.
+     */
+    componentDidMount(): void;
+    /**
+     * Подписывается на изменение размера корневого элемента.
+     * @param Observer Класс ResizeObserver.
+     */
+    observeResize(Observer?: typeof ResizeObserver): void;
+    /**
+     * Корректирует смещение при изменении размеров.
+     */
+    handleResize(): void;
+    /**
+     * По необходимости обновляет индекс текущего элемента.
+     * Обновляет информацию о состоянии отображения элементов.
+     * @param prevProps Предыдущие свойства.
+     */
+    componentDidUpdate(prevProps: CarouselProps): void;
+    /**
+     * Выполняет отписку от глобального события "resize".
+     * Отключает таймер автоматической прокрутки.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Включает автоматическую прокрутку.
+     */
+    enableAutoplay(): void;
+    /**
+     * Отключает автоматическую прокрутку.
+     */
+    disableAutoplay(): void;
+    /**
+     * Переключает флаг возможности автоматической прокрутки.
+     * @param canAutoMove Флаг возможности автоматической прокрутки.
+     */
+    toggleAutoMove(canAutoMove: boolean): void;
+    /**
+     * Переключает флаг, определяющий, что компонент смонтирован.
+     * @param mounted Флаг.
+     */
+    toggleMounted(mounted: boolean): void;
+    /**
+     * Определяет, можно ли перетаскивать карусель.
+     * @return Можно ли перетаскивать карусель?
+     */
+    canDrag(): boolean;
+    /**
+     * Обновляет информацию о состоянии отображения элементов.
+     */
+    updateItemsVisibility(): void;
+    /**
+     * По возможности выполняет прокрутку карусели вперед.
+     */
+    moveForward(): void;
+    /**
+     * Выполняет конечную прокрутку карусели вперед.
+     * @param step На сколько элементов надо прокрутить карусель.
+     */
+    moveForwardFinite(step: number): void;
+    /**
+     * По возможности выполняет прокрутку карусели назад.
+     */
+    moveBackward(): void;
+    /**
+     * Выполняет конечную прокрутку карусели назад.
+     * @param step На сколько элементов надо прокрутить карусель.
+     */
+    moveBackwardFinite(step: number): void;
+    /**
+     * Выполняет прокрутку в бесконечном режиме.
+     * @param step Количество элементов для прокрутки.
+     * @param forward Нужно выполнить прокрутку вперед?
+     */
+    moveInfinite(step: number, forward: boolean): void;
+    /**
+     * Сохраняет смещение элементов карусели и позицию при захвате мышкой.
+     * Отключает плавную прокрутку.
+     * @param dragEvent Событие.
+     */
+    onDragStart(dragEvent: DraggableEvent): void;
+    /**
+     * При необходимости запускает корректировку смещения.
+     * @param dragEvent Событие.
+     */
+    onDragMove(dragEvent: DraggableEvent): void;
+    /**
+     * Корректирует смещение в бесконечном режиме.
+     * @param dragEvent Событие.
+     */
+    correctInfiniteOffset(dragEvent: DraggableEvent): void;
+    /**
+     * Определяет начальную границу (левую или верхнюю) списка не клонированных элементов.
+     * @return Начальную граница.
+     */
+    findRealItemsStartBound(): number;
+    /**
+     * Выполняет прокрутку к элементу, который наиболее близок к стартовой границе viewport'а.
+     * @param dragEvent Событие.
+     */
+    onDragEnd({ offset: endOffset, client: endClient }: DraggableEvent): void;
+    /**
+     * Определяет информацию о направлении между двумя точками.
+     * @param start Точка.
+     * @param end Точка.
+     * @return Информация.
+     */
+    defineDirection(start: IPoint, end: IPoint): {
+        forward: boolean;
+        backward: boolean;
+    };
+    /**
+     * Устанавливает индекс элемента к которому прокручена карусель.
+     * @param newIndex Индекс элемента к которому прокручена карусель.
+     * @param options Опции.
+     * @param options.withScroll Нужна ли прокрутка.
+     * @param options.needTransition Нужна ли анимация при прокрутке.
+     */
+    setCurrentIndex(newIndex: number, { withScroll, needTransition }?: {
+        withScroll?: boolean | undefined;
+        needTransition?: boolean | undefined;
+    }): void;
+    /**
+     * Прокручивает галерею к заданному элементу по индексу.
+     * @param options Свойства.
+     * @param options.targetIndex Индекс.
+     * @param options.needTransition Нужна ли плавная анимация прокрутки.
+     */
+    scrollToItem({ targetIndex, needTransition }?: {
+        targetIndex?: number | undefined;
+        needTransition?: boolean | undefined;
+    }): void;
+    /**
+     * Определяет, видны ли все элементы галереи.
+     * @return Видны ли все элементы галереи.
+     */
+    isAllItemsVisible(): boolean;
+    /**
+     * Определяет минимально возможное смещение списка элементов карусели.
+     * @return Минимально возможное смещение.
+     */
+    defineMinOffset(): number;
+    /**
+     * Возвращает длину/ширину списка элементов (в зависимости от ориентации карусели).
+     * @return Длина/ширина списка элементов.
+     */
+    getRealItemsSize(): number;
+    /**
+     * Возвращает длину/ширину области видимости карусели (в зависимости от ориентации).
+     * @return Длина/ширина области видимости.
+     */
+    getViewportSize(): number;
+    /**
+     * Возвращает данные прямоугольной области видимости карусели.
+     * @return Данные прямоугольной области видимости карусели.
+     */
+    getViewport(): DOMRect | null;
+    /**
+     * Сохраняет смещение карусели и позицию из события при старте захвата.
+     * @param dragEvent Нестандартное событие из компонента Draggable.
+     * @param dragEvent.offset Смещение.
+     * @param dragEvent.client Позиция.
+     */
+    saveDragStartData({ offset, client }: DraggableEvent): void;
+    /**
+     * Сохраняет в состоянии смещение карусели.
+     * @param newOffset Смещение.
+     * @param options Опции.
+     */
+    setCurrentOffset(newOffset: number, { withStateUpdate }?: {
+        withStateUpdate?: boolean | undefined;
+    }): void;
+    /**
+     * Получает управление от Draggable.
+     * @param control Функции управления Draggable.
+     */
+    takeDragControl(control: Control): void;
+    /** @inheritdoc */
+    render(): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Формирует список элементов карусели с учетом необходимости клонирования.
+     * @return Список элементов карусели.
+     */
+    renderItems(): JSX.Element[];
+}