@cloud-ru/ds-fields 1.0.0

package/dist/cjs/components/FieldDate/types.d.ts

@@ -0,0 +1,100 @@
+import { CalendarDropdownProps } from '@cloud-ru/ds-calendar';
+import { FieldDecoratorProps, Size, ValidationState } from '@cloud-ru/ds-field-decorator';
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { FocusEvent, ReactNode } from 'react';
+import { FieldLayoutPresets } from '../../hooks';
+import { DATE_MODE } from './constants';
+export type DateMode = ValueOf<typeof DATE_MODE>;
+/** Значение одиночной даты/даты-времени. */
+export type DateValue = Date | undefined;
+/** Значение периода (`[from, to]`). */
+export type DateRangeValue = [DateValue, DateValue];
+type FieldDateDecoratorProps = Omit<FieldDecoratorProps, 'children' | 'validationState' | 'size'>;
+type CalendarPassthrough = Pick<CalendarDropdownProps, 'today' | 'showHolidays' | 'buildCellProps' | 'locale' | 'presets' | 'placement' | 'closeOnApply' | 'closeOnPopstate' | 'open' | 'onOpenChange'>;
+type CommonFieldDateProps = WithSupportProps<FieldDateDecoratorProps & CalendarPassthrough & {
+    /** Размер */
+    size?: Size;
+    /** Состояние валидации */
+    validationState?: ValidationState;
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля */
+    fieldClassName?: string;
+    /** Placeholder в триггере, когда нет значения */
+    placeholder?: string;
+    /**
+     * `aria-label` поля начала периода (режим `date-range`).
+     * @default 'Начало периода'
+     */
+    labelFrom?: string;
+    /**
+     * `aria-label` поля конца периода (режим `date-range`).
+     * @default 'Конец периода'
+     */
+    labelTo?: string;
+    /** Иконка перед текстом (если не задано — `CalendarSVG`) */
+    iconBefore?: ReactNode;
+    /** Деактивировано */
+    disabled?: boolean;
+    /** Read-only режим */
+    readonly?: boolean;
+    /**
+     * Фон поля (acrylic)
+     * @default true
+     */
+    background?: boolean;
+    /**
+     * Показывать кнопку очистки значения (✕). Активна, когда есть значение и поле не disabled/readonly.
+     * @default true
+     */
+    showClearButton?: boolean;
+    /**
+     * Показывать кнопку копирования значения (только при `readonly` и непустом значении).
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после копирования значения в буфер */
+    onCopyButtonClick?(): void;
+    /**
+     * Показывать секунды в режиме `date-time` (в маске и в выпадающем календаре).
+     * @default true
+     */
+    showSeconds?: boolean;
+    /** HTML-атрибут `id` для input (и `for` у label) */
+    id?: string;
+    /** HTML-атрибут `name` для input */
+    name?: string;
+    /** Автофокус input при монтировании. На mobile выключается адаптивно (см. `layoutPresets`) */
+    autoFocus?: boolean;
+    /**
+     * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+     * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+     */
+    layoutPresets?: FieldLayoutPresets;
+    /** Колбек фокуса input */
+    onFocus?(event: FocusEvent<HTMLInputElement>): void;
+    /** Колбек блюра input */
+    onBlur?(event: FocusEvent<HTMLInputElement>): void;
+}>;
+export type FieldDateSingleProps = CommonFieldDateProps & {
+    /** Режим выбора даты. По умолчанию `'date'`. */
+    mode?: typeof DATE_MODE.Date | typeof DATE_MODE.DateTime;
+    /** Управляемое значение */
+    value?: DateValue;
+    /** Неуправляемое значение по умолчанию */
+    defaultValue?: DateValue;
+    /** Колбек смены значения */
+    onChange?(value: DateValue): void;
+};
+export type FieldDateRangeProps = CommonFieldDateProps & {
+    /** Режим выбора периода */
+    mode: typeof DATE_MODE.DateRange;
+    /** Управляемое значение */
+    value?: DateRangeValue;
+    /** Неуправляемое значение по умолчанию */
+    defaultValue?: DateRangeValue;
+    /** Колбек смены значения */
+    onChange?(value: DateRangeValue): void;
+};
+export type FieldDateProps = FieldDateSingleProps | FieldDateRangeProps;
+export {};

package/dist/cjs/components/FieldDate/types.js

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

package/dist/cjs/components/FieldDate/utils.d.ts

@@ -0,0 +1,3 @@
+import { FieldDateProps, FieldDateRangeProps } from './types';
+/** Type-guard: режим выбора периода (range) против одиночной даты/даты-времени. */
+export declare function isRange(props: FieldDateProps): props is FieldDateRangeProps;

package/dist/cjs/components/FieldDate/utils.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRange = isRange;
+const constants_1 = require("./constants");
+/** Type-guard: режим выбора периода (range) против одиночной даты/даты-времени. */
+function isRange(props) {
+    return props.mode === constants_1.DATE_MODE.DateRange;
+}

package/dist/cjs/components/FieldSecure/FieldSecure.d.ts

@@ -0,0 +1,64 @@
+import { FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import { InputPrivateProps } from '@cloud-ru/ds-input-private';
+import { ReactNode } from 'react';
+type FieldSecureDecoratorProps = Omit<FieldDecoratorProps, 'children'>;
+type FieldSecureOwnProps = {
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля ввода */
+    fieldClassName?: string;
+    /**
+     * Фон поля (acrylic)
+     * @default true
+     */
+    background?: boolean;
+    /** Значение (controlled-режим) */
+    value?: string;
+    /** Начальное значение (uncontrolled-режим) */
+    defaultValue?: string;
+    /** Колбек смены значения */
+    onChange?(value: string): void;
+    /**
+     * Скрыто ли значение (controlled). Для uncontrolled-режима используйте `defaultHidden`.
+     */
+    hidden?: boolean;
+    /**
+     * Начальное состояние маскирования (uncontrolled-режим). Кнопка «глаз» переключает
+     * маскирование сама; `hidden` для этого передавать не нужно.
+     * @default true
+     */
+    defaultHidden?: boolean;
+    /** Колбек смены маскирования */
+    onHiddenChange?(hidden: boolean): void;
+    /**
+     * Показывать кнопку «глаз»
+     * @default true
+     */
+    showHideButton?: boolean;
+    /**
+     * Показывать кнопку копирования (только при `readonly = true` и непустом `value`)
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после копирования значения в буфер */
+    onCopyButtonClick?(): void;
+    /**
+     * Разрешить ввод свыше `maxLength` символов.
+     * @default false
+     */
+    allowMoreThanMaxLength?: boolean;
+    /**
+     * Async-загрузчик значения. Вызывается перед раскрытием/копированием значения,
+     * результат передаётся через `onChange`. Во время запроса показывается Skeleton.
+     * После успешного запроса значение считается полученным и больше не запрашивается.
+     */
+    asyncValueGetter?: () => Promise<string>;
+    /**
+     * Ведущая иконка.
+     * @deprecated Используйте `iconBefore`.
+     */
+    prefixIcon?: ReactNode;
+};
+export type FieldSecureProps = FieldSecureDecoratorProps & Omit<InputPrivateProps, 'className' | 'type' | 'value' | 'onChange'> & FieldSecureOwnProps;
+export declare const FieldSecure: import("react").ForwardRefExoticComponent<Omit<FieldSecureProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/cjs/components/FieldSecure/FieldSecure.js

@@ -0,0 +1,158 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldSecure = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Имя совпадает с мастер-нодой Figma (`fieldSecure`). Легаси-проп `prefixIcon` ниже
+// сохраняет совместимость с `@snack-uikit/fields` (`FieldSecure.prefixIcon`).
+const divider_1 = require("@cloud-ru/ds-divider");
+const field_decorator_1 = require("@cloud-ru/ds-field-decorator");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const input_private_1 = require("@cloud-ru/ds-input-private");
+const skeleton_1 = require("@cloud-ru/ds-skeleton");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const shared_1 = require("../shared");
+const styles_module_scss_1 = __importDefault(require('../shared/styles.module.css'));
+const isCursorAtEnd = (el) => Boolean(el && el.selectionStart === el.value.length && el.selectionEnd === el.value.length);
+exports.FieldSecure = (0, react_1.forwardRef)(function FieldSecure({ label = '', labelTooltip, caption, hint, error, validationState = field_decorator_1.VALIDATION_STATE.Default, showHintIcon, length, required, size = field_decorator_1.SIZE.M, className, fieldClassName, background = true, value: valueProp, defaultValue, hidden: hiddenProp, defaultHidden, onHiddenChange, showHideButton: showHideButtonProp = true, showCopyButton: showCopyButtonProp = true, onCopyButtonClick, allowMoreThanMaxLength = false, asyncValueGetter, prefixIcon, disabled, readonly: readOnly, onChange, placeholder, 'data-test-id': dataTestId, ...inputProps }, ref) {
+    const { onFocus: onFocusProp, onBlur: onBlurProp, onKeyDown: onKeyDownProp, tabIndex: tabIndexProp, maxLength, ...restInputProps } = inputProps;
+    const localRef = (0, react_1.useRef)(null);
+    const copyButtonRef = (0, react_1.useRef)(null);
+    const hideButtonRef = (0, react_1.useRef)(null);
+    const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const [hiddenInner, setHiddenInner] = (0, react_1.useState)(defaultHidden ?? true);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [isAsyncLoaded, setIsAsyncLoaded] = (0, react_1.useState)(false);
+    const isHiddenControlled = hiddenProp !== undefined;
+    const hidden = isHiddenControlled ? hiddenProp : hiddenInner;
+    // controlled/uncontrolled: useValueControl держит значение при отсутствии `value`.
+    const [value = '', setValue] = (0, utils_1.useValueControl)({ value: valueProp, defaultValue });
+    const emitChange = (0, react_1.useCallback)((next) => {
+        setValue(next);
+        onChange?.(next);
+    }, [onChange, setValue]);
+    const ensureAsyncValue = (0, react_1.useCallback)(async () => {
+        if (!asyncValueGetter || isAsyncLoaded) {
+            return true;
+        }
+        setIsLoading(true);
+        try {
+            const next = await asyncValueGetter();
+            setIsAsyncLoaded(true);
+            emitChange(next);
+            return true;
+        }
+        catch {
+            return false;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [asyncValueGetter, emitChange, isAsyncLoaded]);
+    const toggleHidden = (0, react_1.useCallback)(() => {
+        ensureAsyncValue().then(success => {
+            if (!success) {
+                return;
+            }
+            const next = !hidden;
+            if (!isHiddenControlled) {
+                setHiddenInner(next);
+            }
+            onHiddenChange?.(next);
+            // Возврат фокуса в поле + каретка в конец после переключения (паритет с легаси FieldSecure).
+            if (!readOnly) {
+                setTimeout(() => {
+                    const input = localRef.current;
+                    if (input) {
+                        input.focus();
+                        const end = input.value.length;
+                        input.setSelectionRange(end, end);
+                    }
+                }, 0);
+            }
+        });
+    }, [ensureAsyncValue, hidden, isHiddenControlled, onHiddenChange, readOnly]);
+    const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.VALIDATION_STATE.Error : validationState), [error, validationState]);
+    const stringValue = String(value ?? '');
+    const showCopyUi = Boolean(showCopyButtonProp && stringValue && !disabled && readOnly);
+    const showHideUi = Boolean(showHideButtonProp && !(readOnly && !stringValue));
+    const onCopy = (0, react_1.useCallback)(() => ensureAsyncValue().then(async (success) => {
+        const copied = success && (await (0, shared_1.copyTextToClipboard)(stringValue));
+        if (copied) {
+            onCopyButtonClick?.();
+        }
+        return copied;
+    }), [ensureAsyncValue, onCopyButtonClick, stringValue]);
+    const copyButtonSettings = (0, shared_1.useCopyButton)({
+        copyButtonRef,
+        showCopyButton: showCopyUi,
+        size: (0, shared_1.toInputSize)(size),
+        onCopy,
+        disabled: Boolean(disabled),
+    });
+    // ArrowRight с copy-кнопки уводит фокус на «глаз» (buttonFieldAfter), продолжая roving-цепочку.
+    const onPostfixKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowRight' && showHideUi && hideButtonRef.current) {
+            event.preventDefault();
+            hideButtonRef.current.focus();
+        }
+    }, [showHideUi]);
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = (0, input_private_1.useButtonNavigation)({
+        inputRef: localRef,
+        postfixButtons: (0, react_1.useMemo)(() => [copyButtonSettings], [copyButtonSettings]),
+        onButtonKeyDown: onPostfixKeyDown,
+        readonly: Boolean(readOnly),
+        submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        onKeyDownProp?.(event);
+        onInputKeyDown(event);
+        // ArrowRight в конце поля уводит фокус на кнопку «глаз» (если рядом нет видимой copy).
+        const atEnd = Boolean(readOnly) || isCursorAtEnd(localRef.current);
+        if (showHideUi && event.key === 'ArrowRight' && atEnd && !showCopyUi && hideButtonRef.current) {
+            event.preventDefault();
+            hideButtonRef.current.focus();
+        }
+    }, [onInputKeyDown, onKeyDownProp, readOnly, showCopyUi, showHideUi]);
+    // ArrowLeft с «глаза» возвращает фокус на copy (если видима) или в поле.
+    const onEyeKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            ((showCopyUi && copyButtonRef.current) || localRef.current)?.focus();
+        }
+    }, [showCopyUi]);
+    const handleFocus = (0, react_1.useCallback)((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        onFocusProp?.(event);
+    }, [onFocusProp]);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        setFocusVisible(false);
+        onBlurProp?.(event);
+    }, [onBlurProp]);
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (!readOnly && !disabled) {
+            setHover(true);
+        }
+    }, [disabled, readOnly]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        setHover(false);
+    }, []);
+    const shell = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldWrapper, fieldClassName), "data-test-id": constants_1.TEST_IDS.fieldSecureShell, "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || undefined, "data-hover": !readOnly && !disabled && hover ? true : undefined, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.backgroundWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.materialLayer, ...(0, shared_1.getAcrylicProps)({
+                            validationState: effectiveValidationState,
+                            disabled,
+                            readonly: readOnly,
+                            hover,
+                            focusVisible,
+                        }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [prefixIcon && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: prefixIcon }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { skeleton: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: '100%', borderRadius: 2, "data-test-id": constants_1.TEST_IDS.fieldSecureSkeleton }), loading: isLoading, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, disabled: disabled, readonly: readOnly, onChange: emitChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, type: hidden ? input_private_1.TYPE.Password : input_private_1.TYPE.Text, maxLength: allowMoreThanMaxLength ? undefined : maxLength, ...restInputProps, "data-test-id": constants_1.TEST_IDS.fieldSecureInput }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }) })] }) }), showHideUi && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": true, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), (0, jsx_runtime_1.jsx)(shared_1.FieldElementButton, { ref: hideButtonRef, variant: 'after', size: size, action: hidden ? (0, jsx_runtime_1.jsx)(system_1.EyeSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.EyeClosedSVG, {}), onClick: toggleHidden, onKeyDown: onEyeKeyDown, disabled: disabled, 
+                        // Roving-композит (легаси: обе кнопки в postfixButtons useButtonNavigation):
+                        // Tab уходит из поля целиком, по кнопкам (copy → глаз) ходят стрелки.
+                        tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldSecureHideButton })] }))] }));
+    return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length ?? (maxLength ? { current: stringValue.length, max: maxLength } : undefined), required: required, labelFor: inputProps.id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: shell }));
+});

package/dist/cjs/components/FieldSecure/index.d.ts

@@ -0,0 +1 @@
+export * from './FieldSecure';

package/dist/cjs/components/FieldSecure/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldSecure"), exports);

package/dist/cjs/components/FieldSelect/FieldSelect.d.ts

@@ -0,0 +1,2 @@
+import { FieldSelectProps } from './types';
+export declare const FieldSelect: import("react").ForwardRefExoticComponent<FieldSelectProps & import("react").RefAttributes<HTMLInputElement>>;