@alfalab/core-components 42.3.1 → 42.5.0

package/number-input/cssm/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

package/number-input/desktop.d.ts

@@ -0,0 +1,2 @@
+export { NumberInputDesktop, NumberInputDesktopProps } from "./Component.desktop";
+export {};

package/number-input/desktop.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_desktop = require('./Component.desktop.js');
+require('tslib');
+require('react');
+require('../input/desktop');
+require('./components/number-input/Component.js');
+require('react-merge-refs');
+require('./utils.js');
+
+
+
+exports.NumberInputDesktop = Component_desktop.NumberInputDesktop;

package/number-input/esm/Component.desktop.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { NumberInputProps } from "./components/number-input/index";
+type NumberInputDesktopProps = Omit<NumberInputProps, 'Input' | 'breakpoint'>;
+declare const NumberInputDesktop: React.ForwardRefExoticComponent<NumberInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { NumberInputDesktopProps, NumberInputDesktop };

package/number-input/esm/Component.desktop.js

@@ -0,0 +1,10 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { InputDesktop } from '../../input/esm/desktop';
+import { NumberInput } from './components/number-input/Component.js';
+import 'react-merge-refs';
+import './utils.js';
+
+var NumberInputDesktop = forwardRef(function (props, ref) { return React.createElement(NumberInput, __assign({}, props, { Input: InputDesktop, ref: ref })); });
+
+export { NumberInputDesktop };

package/number-input/esm/Component.mobile-ebda875c.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/number-input/esm/Component.mobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { NumberInputProps } from "./components/number-input/index";
+type NumberInputMobileProps = Omit<NumberInputProps, 'Input' | 'breakpoint'>;
+declare const NumberInputMobile: React.ForwardRefExoticComponent<NumberInputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { NumberInputMobileProps, NumberInputMobile };

package/number-input/esm/Component.mobile.js

@@ -0,0 +1,10 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { InputMobile } from '../../input/esm/mobile';
+import { NumberInput } from './components/number-input/Component.js';
+import 'react-merge-refs';
+import './utils.js';
+
+var NumberInputMobile = forwardRef(function (props, ref) { return React.createElement(NumberInput, __assign({}, props, { Input: InputMobile, ref: ref })); });
+
+export { NumberInputMobile };

package/number-input/esm/Component.responsive.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { NumberInputProps } from "./components/number-input/index";
+type NumberInputResponsiveProps = Omit<NumberInputProps, 'Input'>;
+declare const NumberInputResponsive: React.ForwardRefExoticComponent<NumberInputResponsiveProps & React.RefAttributes<HTMLInputElement>>;
+export { NumberInputResponsiveProps, NumberInputResponsive };

package/number-input/esm/Component.responsive.js

@@ -0,0 +1,10 @@
+import { __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { Input } from '../../input/esm';
+import { NumberInput } from './components/number-input/Component.js';
+import 'react-merge-refs';
+import './utils.js';
+
+var NumberInputResponsive = forwardRef(function (props, ref) { return React.createElement(NumberInput, __assign({}, props, { Input: Input, ref: ref })); });
+
+export { NumberInputResponsive };

package/number-input/esm/components/number-input/Component.d.ts

@@ -0,0 +1,80 @@
+/// <reference types="react" />
+import React from 'react';
+import { InputProps } from "../../../../input";
+type NumberInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
+    /**
+     * Значение поля ввода
+     */
+    value?: string | number | null;
+    /**
+     * Учитывать знаки '+' и '-'
+     */
+    allowSigns?: boolean;
+    /**
+     * Разделитель ',' или '.'
+     */
+    separator?: '.' | ',';
+    /**
+     * Количество символов после разделителя
+     */
+    fractionLength?: number;
+    /**
+     *  Компонент инпута
+     */
+    Input: React.FC<InputProps & {
+        ref?: React.Ref<HTMLInputElement>;
+    }>;
+    /**
+     * Обработчик события изменения значения
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, payload: {
+        /**
+         * Числовое значение инпута
+         */
+        value: number | null;
+        /**
+         * Строковое значение инпута
+         * Используйте для изменения значения инпута
+         */
+        valueString: string;
+    }) => void;
+};
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange" | "type" | "value"> & {
+    /**
+     * Значение поля ввода
+     */
+    value?: string | number | null | undefined;
+    /**
+     * Учитывать знаки '+' и '-'
+     */
+    allowSigns?: boolean | undefined;
+    /**
+     * Разделитель ',' или '.'
+     */
+    separator?: "," | "." | undefined;
+    /**
+     * Количество символов после разделителя
+     */
+    fractionLength?: number | undefined;
+    /**
+     *  Компонент инпута
+     */
+    Input: React.FC<InputProps & {
+        ref?: React.Ref<HTMLInputElement>;
+    }>;
+    /**
+     * Обработчик события изменения значения
+     */
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement>, payload: {
+        /**
+         * Числовое значение инпута
+         */
+        value: number | null;
+        /**
+         * Строковое значение инпута
+         * Используйте для изменения значения инпута
+         */
+        valueString: string;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { NumberInputProps, NumberInput };

package/number-input/esm/components/number-input/Component.js

@@ -0,0 +1,101 @@
+import { __rest, __assign } from 'tslib';
+import React, { useRef, useState } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { createSeparatorsRegExp, getAllowedValue, SEPARATORS, SIGNS } from '../../utils.js';
+
+var NumberInput = React.forwardRef(function (_a, ref) {
+    var propValue = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _b = _a.allowSigns, allowSigns = _b === void 0 ? true : _b, _c = _a.separator, separator = _c === void 0 ? ',' : _c, fractionLength = _a.fractionLength, defaultValue = _a.defaultValue, Input = _a.Input, restProps = __rest(_a, ["value", "onChange", "onBlur", "allowSigns", "separator", "fractionLength", "defaultValue", "Input"]);
+    var uncontrolled = propValue === undefined;
+    var inputRef = useRef(null);
+    var _d = useState(defaultValue || ''), value = _d[0], setValue = _d[1];
+    var getNumberValueFromStr = function (valueString) {
+        if (valueString === '')
+            return null;
+        if (valueString.includes(',')) {
+            return parseFloat(valueString.replace(',', '.'));
+        }
+        return parseFloat(valueString);
+    };
+    var restoreCaret = function (target) {
+        setTimeout(function () {
+            var input = target;
+            var positionCursor = input.selectionStart || 0;
+            var isEndPosition = input.value.length === positionCursor;
+            var enteredSign = SIGNS.some(function (s) { return s === input.value[positionCursor - 1]; });
+            var enteredSeparator = SEPARATORS.filter(function (s) { return s !== separator; }).some(function (s) { return s === input.value[positionCursor - 1]; });
+            var shouldRestore = enteredSeparator || enteredSign;
+            if (!isEndPosition && shouldRestore) {
+                input.selectionStart = positionCursor;
+                input.selectionEnd = positionCursor;
+            }
+        });
+    };
+    var handleChange = function (event) {
+        var input = event.target;
+        var newValue = input.value.replace(createSeparatorsRegExp(), separator);
+        var allowedValue = getAllowedValue({
+            value: newValue,
+            fractionLength: fractionLength,
+            allowSigns: allowSigns,
+            separator: separator,
+        });
+        if (onChange) {
+            onChange(event, {
+                value: getNumberValueFromStr(allowedValue),
+                valueString: allowedValue,
+            });
+        }
+        if (uncontrolled) {
+            setValue(allowedValue);
+        }
+        restoreCaret(input);
+    };
+    var handleKeyDown = function (event) {
+        var disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё ]/;
+        var oneKeyPress = !event.altKey && !event.metaKey && !event.ctrlKey;
+        var target = event.target;
+        // Запрещаем вводить неразрешенные символы за исключением комбинаций клавиш
+        if (oneKeyPress && event.key.length === 1 && disallowedSymbols.test(event.key)) {
+            return event.preventDefault();
+        }
+        var val = target.value;
+        var hasSeparator = (val.match(createSeparatorsRegExp()) || []).length > 0;
+        // Запрещаем вводить второй сепаратор
+        if (hasSeparator && SEPARATORS.some(function (s) { return s === event.key; })) {
+            return event.preventDefault();
+        }
+        // Запрещаем вводить лишний знак
+        if ((!allowSigns || SIGNS.some(function (s) { return s === val[0]; })) &&
+            SIGNS.some(function (s) { return s === event.key; })) {
+            return event.preventDefault();
+        }
+        var selectionStart = target.selectionStart || 0;
+        // Запрещаем вводить цифры в дробную часть, если кол-во цифр больше fractionLength
+        if (hasSeparator &&
+            fractionLength &&
+            event.key.length === 1 &&
+            selectionStart > val.indexOf(separator) &&
+            val.split(separator)[1].length >= fractionLength) {
+            return event.preventDefault();
+        }
+        return undefined;
+    };
+    var handleBlur = function (event) {
+        var valueBlur = event.target.value.replace(new RegExp("\\".concat(separator, "$")), '');
+        if (onChange) {
+            onChange(event, {
+                value: getNumberValueFromStr(valueBlur),
+                valueString: valueBlur,
+            });
+        }
+        if (uncontrolled) {
+            setValue(valueBlur);
+        }
+        if (onBlur)
+            onBlur(event);
+    };
+    var visibleValue = uncontrolled ? value : propValue === null || propValue === void 0 ? void 0 : propValue.toString();
+    return (React.createElement(Input, __assign({ ref: mergeRefs([ref, inputRef]), value: visibleValue, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, inputMode: 'decimal' }, restProps)));
+});
+
+export { NumberInput };

package/number-input/esm/components/number-input/index.d.ts

@@ -0,0 +1 @@
+export { NumberInput, NumberInputProps } from "./Component";

package/number-input/esm/components/number-input/index.js

@@ -0,0 +1,5 @@
+export { NumberInput } from './Component.js';
+import 'tslib';
+import 'react';
+import 'react-merge-refs';
+import '../../utils.js';

package/number-input/esm/desktop.d.ts

@@ -0,0 +1,2 @@
+export { NumberInputDesktop, NumberInputDesktopProps } from "./Component.desktop";
+export {};

package/number-input/esm/desktop.js

@@ -0,0 +1,7 @@
+export { NumberInputDesktop } from './Component.desktop.js';
+import 'tslib';
+import 'react';
+import '../../input/esm/desktop';
+import './components/number-input/Component.js';
+import 'react-merge-refs';
+import './utils.js';

package/number-input/esm/index-2abb571d.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import React from "react";
+import { PaddingType } from "./index-72dda473";
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
+declare const inputUtils: {
+    disableUserInput: typeof disableUserInput;
+};
+export { createPaddingStyle, isClient, getDataTestId, easingFns, inputUtils };

package/number-input/esm/index-72dda473.d.ts

@@ -0,0 +1,12 @@
+type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
+type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
+type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };

package/number-input/esm/index-ebda875c.d.ts

@@ -0,0 +1,135 @@
+/// <reference types="react" />
+import React from "react";
+import { HTMLAttributes, ReactNode } from "react";
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type BaseFormControlProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl";
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean;
+    /**
+     * Cостояние только для чтения
+     */
+    readOnly?: boolean;
+    /**
+     * Заполненное состояние
+     */
+    filled?: boolean;
+    /**
+     * Выбранное (фокус) состояние
+     */
+    focused?: boolean;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Текст подсказки
+     */
+    hint?: ReactNode;
+    /**
+     * Лейбл компонента
+     */
+    label?: ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer";
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Слот под полем
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    inputWrapperClassName?: string;
+    /**
+     * Дополнительный класс для лейбла
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonsClassName?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Компонент поля (инпут, textarea и пр.)
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStyles?: StyleColors;
+};
+declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    block?: boolean | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    colors?: "default" | "inverted" | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    filled?: boolean | undefined;
+    focused?: boolean | undefined;
+    error?: ReactNode | boolean;
+    hint?: ReactNode;
+    label?: ReactNode;
+    labelView?: "inner" | "outer" | undefined;
+    leftAddons?: ReactNode;
+    rightAddons?: ReactNode;
+    bottomAddons?: ReactNode;
+    className?: string | undefined;
+    fieldClassName?: string | undefined;
+    inputWrapperClassName?: string | undefined;
+    labelClassName?: string | undefined;
+    addonsClassName?: string | undefined;
+    dataTestId?: string | undefined;
+    children?: ReactNode;
+    styles: {
+        [key: string]: string;
+    };
+    colorStyles?: StyleColors | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { StyleColors, BaseFormControlProps, BaseFormControl };

package/number-input/esm/index.d.ts

@@ -1 +1,2 @@
-export * from "./Component";
+export { NumberInputResponsive as NumberInput, NumberInputResponsiveProps as NumberInputProps } from "./Component.responsive";
+export {};

package/number-input/esm/index.js

@@ -1,6 +1,7 @@
-export { NumberInput } from './Component.js';
+export { NumberInputResponsive as NumberInput } from './Component.responsive.js';
 import 'tslib';
 import 'react';
-import 'react-merge-refs';
 import '../../input/esm';
+import './components/number-input/Component.js';
+import 'react-merge-refs';
 import './utils.js';

package/number-input/esm/mobile.d.ts

@@ -0,0 +1,2 @@
+export { NumberInputMobile, NumberInputMobileProps } from "./Component.mobile";
+export {};

package/number-input/esm/mobile.js

@@ -0,0 +1,7 @@
+export { NumberInputMobile } from './Component.mobile.js';
+import 'tslib';
+import 'react';
+import '../../input/esm/mobile';
+import './components/number-input/Component.js';
+import 'react-merge-refs';
+import './utils.js';