@sima-land/ui-nucleons 45.0.0-alpha.5 → 45.0.0-alpha.51

package/dist/button/button.m.scss

@@ -0,0 +1,118 @@
+@use '../colors';
+@use './button-util';
+
+.root {
+  position: relative;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  border-radius: 4px;
+  font-family: inherit;
+  font-weight: 600;
+  box-sizing: border-box;
+  padding: 0;
+  padding-left: var(--button-left-gutter, var(--button-gutter));
+  padding-right: var(--button-right-gutter, var(--button-gutter));
+  border: 0;
+  outline: 0;
+  text-decoration: none;
+  overflow: hidden;
+  font-size: var(--button-font-size);
+  background: var(--button-background);
+  color: var(--button-color);
+  min-width: var(--button-min-size);
+  height: var(--button-min-size);
+  --button-icon-gutter: 12px;
+  transition:
+    background 0.2s ease-in-out,
+    transform 0.1s ease-in-out;
+  &::-moz-focus-inner {
+    border: 0;
+  }
+  // @todo disabled для ссылок?
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    color: var(--button-disabled-color, var(--button-color));
+    background: var(--button-disabled-background, var(--button-background));
+  }
+  &.loading {
+    color: transparent;
+    > :not(.spinner) {
+      opacity: 0;
+      pointer-events: 0;
+    }
+  }
+  &:not(:disabled):hover {
+    cursor: pointer;
+    background: var(--button-hover-background, var(--button-background));
+  }
+  &:not(:disabled):not(.loading):hover {
+    color: var(--button-hover-color, var(--button-color));
+  }
+  &:active {
+    transform: scale(0.96);
+  }
+}
+
+// sizes
+.size-xs {
+  @include button-util.size-xs;
+}
+
+.size-s {
+  @include button-util.size-s;
+}
+
+.size-m {
+  @include button-util.size-m;
+}
+
+// content
+.icon-only {
+  --button-left-gutter: 0;
+  --button-right-gutter: 0;
+  --button-icon-gutter: 0;
+}
+
+.icon-start {
+  --button-left-gutter: 0;
+}
+
+.icon-end {
+  --button-right-gutter: 0;
+}
+
+// view variants
+.view-primary {
+  @include button-util.color-primary;
+}
+
+.view-secondary {
+  @include button-util.color-secondary;
+}
+
+.view-success {
+  @include button-util.color-success;
+}
+
+.view-info {
+  @include button-util.color-info;
+}
+
+// icons
+.icon {
+  margin: 0 var(--button-icon-gutter);
+  flex-shrink: 0;
+  fill: currentColor;
+}
+
+// spinner
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonSize, ButtonViewType, ButtonAppearance, ButtonStyle, ButtonProps, ButtonIconPosition, } from './types';
+export { Button } from './button';

package/dist/button/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var button_1 = require("./button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+//# sourceMappingURL=index.js.map

package/dist/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/dist/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/dist/button/types.js

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

package/dist/button/types.js.map

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

package/dist/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[];
+}