@cloud-ru/ds-fields 1.0.0

package/dist/esm/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/index.js';
+import { DATE_MODE } from './constants.js';
+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/esm/components/FieldDate/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,5 @@
+import { DATE_MODE } from './constants.js';
+/** Type-guard: режим выбора периода (range) против одиночной даты/даты-времени. */
+export function isRange(props) {
+    return props.mode === DATE_MODE.DateRange;
+}

package/dist/esm/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/esm/components/FieldSecure/FieldSecure.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Имя совпадает с мастер-нодой Figma (`fieldSecure`). Легаси-проп `prefixIcon` ниже
+// сохраняет совместимость с `@snack-uikit/fields` (`FieldSecure.prefixIcon`).
+import { Divider } from '@cloud-ru/ds-divider';
+import { FieldDecorator, SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
+import { EyeClosedSVG, EyeSVG } from '@cloud-ru/ds-icons/interface/system';
+import { InputPrivate, TYPE, useButtonNavigation } from '@cloud-ru/ds-input-private';
+import { Skeleton, WithSkeleton } from '@cloud-ru/ds-skeleton';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { copyTextToClipboard, FieldElementButton, getAcrylicProps, toInputSize, useCopyButton } from '../shared/index.js';
+import fieldStyles from '../shared/styles.module.css';
+const isCursorAtEnd = (el) => Boolean(el && el.selectionStart === el.value.length && el.selectionEnd === el.value.length);
+export const FieldSecure = forwardRef(function FieldSecure({ label = '', labelTooltip, caption, hint, error, validationState = VALIDATION_STATE.Default, showHintIcon, length, required, size = 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 = useRef(null);
+    const copyButtonRef = useRef(null);
+    const hideButtonRef = useRef(null);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [hover, setHover] = useState(false);
+    const [hiddenInner, setHiddenInner] = useState(defaultHidden ?? true);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isAsyncLoaded, setIsAsyncLoaded] = useState(false);
+    const isHiddenControlled = hiddenProp !== undefined;
+    const hidden = isHiddenControlled ? hiddenProp : hiddenInner;
+    // controlled/uncontrolled: useValueControl держит значение при отсутствии `value`.
+    const [value = '', setValue] = useValueControl({ value: valueProp, defaultValue });
+    const emitChange = useCallback((next) => {
+        setValue(next);
+        onChange?.(next);
+    }, [onChange, setValue]);
+    const ensureAsyncValue = 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 = 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 = useMemo(() => (error ? 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 = useCallback(() => ensureAsyncValue().then(async (success) => {
+        const copied = success && (await copyTextToClipboard(stringValue));
+        if (copied) {
+            onCopyButtonClick?.();
+        }
+        return copied;
+    }), [ensureAsyncValue, onCopyButtonClick, stringValue]);
+    const copyButtonSettings = useCopyButton({
+        copyButtonRef,
+        showCopyButton: showCopyUi,
+        size: toInputSize(size),
+        onCopy,
+        disabled: Boolean(disabled),
+    });
+    // ArrowRight с copy-кнопки уводит фокус на «глаз» (buttonFieldAfter), продолжая roving-цепочку.
+    const onPostfixKeyDown = useCallback((event) => {
+        if (event.key === 'ArrowRight' && showHideUi && hideButtonRef.current) {
+            event.preventDefault();
+            hideButtonRef.current.focus();
+        }
+    }, [showHideUi]);
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+        inputRef: localRef,
+        postfixButtons: useMemo(() => [copyButtonSettings], [copyButtonSettings]),
+        onButtonKeyDown: onPostfixKeyDown,
+        readonly: Boolean(readOnly),
+        submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+    const handleKeyDown = 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 = useCallback((event) => {
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            ((showCopyUi && copyButtonRef.current) || localRef.current)?.focus();
+        }
+    }, [showCopyUi]);
+    const handleFocus = useCallback((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        onFocusProp?.(event);
+    }, [onFocusProp]);
+    const handleBlur = useCallback((event) => {
+        setFocusVisible(false);
+        onBlurProp?.(event);
+    }, [onBlurProp]);
+    const handleMouseEnter = useCallback(() => {
+        if (!readOnly && !disabled) {
+            setHover(true);
+        }
+    }, [disabled, readOnly]);
+    const handleMouseLeave = useCallback(() => {
+        setHover(false);
+    }, []);
+    const shell = (_jsxs("div", { className: cn(fieldStyles.fieldWrapper, fieldClassName), "data-test-id": 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: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({
+                            validationState: effectiveValidationState,
+                            disabled,
+                            readonly: readOnly,
+                            hover,
+                            focusVisible,
+                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [prefixIcon && _jsx("div", { className: fieldStyles.iconSlot, children: prefixIcon }), _jsx("div", { className: fieldStyles.inputLine, children: _jsxs("div", { className: fieldStyles.inputArea, children: [_jsx(WithSkeleton, { skeleton: _jsx(Skeleton, { width: '100%', borderRadius: 2, "data-test-id": TEST_IDS.fieldSecureSkeleton }), loading: isLoading, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.fieldInput, value: value, disabled: disabled, readonly: readOnly, onChange: emitChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, type: hidden ? TYPE.Password : TYPE.Text, maxLength: allowMoreThanMaxLength ? undefined : maxLength, ...restInputProps, "data-test-id": TEST_IDS.fieldSecureInput }) }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] }) })] }) }), showHideUi && (_jsxs("div", { className: fieldStyles.elementWrapperAfter, children: [_jsx("div", { className: fieldStyles.lineWrapper, "data-outline": true, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) }), _jsx(FieldElementButton, { ref: hideButtonRef, variant: 'after', size: size, action: hidden ? _jsx(EyeSVG, {}) : _jsx(EyeClosedSVG, {}), onClick: toggleHidden, onKeyDown: onEyeKeyDown, disabled: disabled, 
+                        // Roving-композит (легаси: обе кнопки в postfixButtons useButtonNavigation):
+                        // Tab уходит из поля целиком, по кнопкам (copy → глаз) ходят стрелки.
+                        tabIndex: -1, "data-test-id": TEST_IDS.fieldSecureHideButton })] }))] }));
+    return (_jsx(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/esm/components/FieldSecure/index.d.ts

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

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

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

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

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