@cloud-ru/ds-fields 1.0.0

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

@@ -0,0 +1,48 @@
+import { ColorPickerProps } from '@cloud-ru/ds-color-picker';
+import { FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import { InputPrivateProps } from '@cloud-ru/ds-input-private';
+import { FieldLayoutPresets } from '../../hooks';
+type FieldColorDecoratorProps = Omit<FieldDecoratorProps, 'children'>;
+type FieldColorOwnProps = {
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля */
+    fieldClassName?: string;
+    /** Текущее значение (hex/rgb/hsl-строка, controlled-режим). */
+    value?: string;
+    /** Начальное значение (uncontrolled-режим). */
+    defaultValue?: string;
+    /** Колбек смены значения. */
+    onChange?(value: string): void;
+    /** Открыт color-picker. */
+    open?: boolean;
+    /** Колбек смены состояния открытия. */
+    onOpenChange?(open: boolean): void;
+    /**
+     * Показывать кнопку очистки (видна при value && !readonly && !disabled).
+     * @default true
+     */
+    showClearButton?: boolean;
+    /** Колбек после клика по кнопке очистки. */
+    onClearButtonClick?(): void;
+    /**
+     * Показывать кнопку копирования (видна при readonly && value && !disabled).
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после копирования значения. */
+    onCopyButtonClick?(): void;
+    /**
+     * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+     * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+     */
+    layoutPresets?: FieldLayoutPresets;
+    /**
+     * Фон поля (acrylic).
+     * @default true
+     */
+    background?: boolean;
+} & Pick<ColorPickerProps, 'withAlpha' | 'autoApply' | 'availableModes'>;
+export type FieldColorProps = FieldColorDecoratorProps & Omit<InputPrivateProps, 'className' | 'value' | 'onChange'> & FieldColorOwnProps;
+export declare const FieldColor: import("react").ForwardRefExoticComponent<Omit<FieldColorProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/cjs/components/FieldColor/FieldColor.js

@@ -0,0 +1,147 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldColor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const button_1 = require("@cloud-ru/ds-button");
+const color_picker_1 = require("@cloud-ru/ds-color-picker");
+const dropdown_1 = require("@cloud-ru/ds-dropdown");
+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 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 hooks_1 = require("../../hooks");
+const shared_1 = require("../shared");
+const styles_module_scss_1 = __importDefault(require('../shared/styles.module.css'));
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+exports.FieldColor = (0, react_1.forwardRef)(function FieldColor({ 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 = '', onChange: onChangeProp, open: openProp, onOpenChange, showClearButton: showClearButtonProp = true, onClearButtonClick, showCopyButton: showCopyButtonProp = true, onCopyButtonClick, withAlpha, autoApply, availableModes, layoutPresets, disabled, readonly: readOnly, placeholder, 'data-test-id': dataTestId = constants_1.TEST_IDS.fieldColor, ...inputProps }, ref) {
+    const { onFocus: onFocusProp, onBlur: onBlurProp, onKeyDown: onKeyDownProp, tabIndex: tabIndexProp, autoFocus, ...restInputProps } = inputProps;
+    const localRef = (0, react_1.useRef)(null);
+    const clearButtonRef = (0, react_1.useRef)(null);
+    const copyButtonRef = (0, react_1.useRef)(null);
+    const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const [openLocal, setOpenLocal] = (0, react_1.useState)(false);
+    const open = openProp ?? openLocal;
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    const mobile = (0, adaptive_1.isMobileLayout)(layoutType);
+    const resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
+    const [value = '', onChange] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+    const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.VALIDATION_STATE.Error : validationState), [error, validationState]);
+    const showOpen = open && !disabled && !readOnly;
+    const showClearUi = Boolean(showClearButtonProp && value && !readOnly && !disabled);
+    const showCopyUi = Boolean(showCopyButtonProp && value && !disabled && readOnly);
+    const handleOpenChange = (0, react_1.useCallback)((next) => {
+        if (openProp === undefined)
+            setOpenLocal(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    // Фокус в поле при открытии пикера (паритет с легаси `@snack-uikit/fields`). На mobile пикер
+    // открывается в `BottomSheet` поверх поля — фокус на скрытый под ним input не уводим.
+    (0, react_1.useEffect)(() => {
+        if (open && !mobile) {
+            localRef.current?.focus();
+        }
+    }, [open, mobile]);
+    const onClear = (0, react_1.useCallback)(() => {
+        onChange?.('');
+        onClearButtonClick?.();
+        if (required) {
+            localRef.current?.focus();
+        }
+    }, [onChange, onClearButtonClick, required]);
+    const onCopy = (0, react_1.useCallback)(async () => {
+        const copied = await (0, shared_1.copyTextToClipboard)(value);
+        if (copied) {
+            onCopyButtonClick?.();
+        }
+        return copied;
+    }, [onCopyButtonClick, value]);
+    const clearButtonSettings = (0, input_private_1.useClearButton)({
+        clearButtonRef,
+        showClearButton: showClearUi,
+        size: (0, shared_1.toInputSize)(size),
+        onClear,
+        disabled: Boolean(disabled || readOnly),
+    });
+    const copyButtonSettings = (0, shared_1.useCopyButton)({
+        copyButtonRef,
+        showCopyButton: showCopyUi,
+        size: (0, shared_1.toInputSize)(size),
+        onCopy,
+        disabled: Boolean(disabled),
+    });
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = (0, input_private_1.useButtonNavigation)({
+        inputRef: localRef,
+        postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        readonly: Boolean(readOnly),
+        submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        onInputKeyDown(event);
+        onKeyDownProp?.(event);
+    }, [onInputKeyDown, onKeyDownProp]);
+    const handleInputChange = (0, react_1.useCallback)((next) => {
+        onChange?.((0, utils_2.normalizeHexInput)(next, withAlpha));
+    }, [onChange, withAlpha]);
+    const handlePickerChange = (0, react_1.useCallback)((raw) => {
+        onChange?.(raw.hex);
+    }, [onChange]);
+    const { t } = color_picker_1.colorPickerLocale.useTranslations();
+    // Mobile: палитра в BottomSheet с явным Apply — правки в черновик, коммит в поле по Apply.
+    const [draft, setDraft] = (0, react_1.useState)(value);
+    const prevOpenRef = (0, react_1.useRef)(open);
+    (0, react_1.useEffect)(() => {
+        if (open && !prevOpenRef.current && mobile) {
+            setDraft(value);
+        }
+        prevOpenRef.current = open;
+    }, [open, mobile, value]);
+    const handleMobileApply = (0, react_1.useCallback)(() => {
+        onChange?.(draft ?? '');
+        handleOpenChange(false);
+    }, [onChange, draft, handleOpenChange]);
+    const handleMobileCancel = (0, react_1.useCallback)(() => {
+        handleOpenChange(false);
+    }, [handleOpenChange]);
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (!readOnly && !disabled) {
+            setHover(true);
+        }
+    }, [readOnly, disabled]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        setHover(false);
+    }, []);
+    const handleInputFocus = (0, react_1.useCallback)((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        onFocusProp?.(event);
+    }, [onFocusProp]);
+    const handleInputBlur = (0, react_1.useCallback)((event) => {
+        setFocusVisible(false);
+        onBlurProp?.(event);
+    }, [onBlurProp]);
+    const trigger = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldWrapper, styles_module_scss_2.default.trigger, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || showOpen || undefined, "data-hover": !readOnly && !disabled && hover ? true : undefined, "data-test-id": dataTestId, 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: focusVisible || showOpen,
+                        }), 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: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.swatch, "data-test-id": constants_1.TEST_IDS.fieldColorSwatch, style: { '--field-color-swatch-color': value || 'transparent' }, "aria-hidden": true }) }), (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)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholder, autoFocus: resolvedAutoFocus, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, ...restInputProps, "data-test-id": constants_1.TEST_IDS.fieldColorInput }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.chevron, "data-test-id": constants_1.TEST_IDS.fieldColorChevron, "aria-hidden": true, children: showOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) }) })] }) })] }));
+    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, required: required, labelFor: inputProps.id, disabled: disabled, readonly: readOnly, size: size, children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { trigger: 'click', widthStrategy: 'auto', open: showOpen, onOpenChange: handleOpenChange, headerDivider: mobile, footerDivider: mobile, title: mobile ? ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_2.default.sheetTitle, "data-test-id": constants_1.TEST_IDS.fieldColorSheetTitle, children: [(draft || '').toUpperCase(), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.sheetSwatch, style: { '--field-color-swatch-color': draft || 'transparent' }, "aria-hidden": true })] })) : undefined, footer: mobile ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.sheetFooter, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: t('cancel'), size: size, view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, onClick: handleMobileCancel, "data-test-id": constants_1.TEST_IDS.fieldColorCancel }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: t('apply'), size: size, view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Primary, onClick: handleMobileApply, "data-test-id": constants_1.TEST_IDS.fieldColorApply })] })) : undefined, content: 
+            // На mobile палитра живёт в `BottomSheet`: помечаем её no-drag, иначе drag по слайдеру/области
+            // цвета одновременно потащил бы sheet к закрытию (свайп-дисмисс перехватывал бы жест контрола).
+            (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.pickerHost, ...(mobile ? { [bottom_sheet_1.NO_DRAG_ATTRIBUTE]: '' } : {}), children: (0, jsx_runtime_1.jsx)(color_picker_1.ColorPicker, { value: (mobile ? draft : value) || undefined, size: size, withAlpha: withAlpha, withColorArea: mobile ? false : undefined, autoApply: mobile ? true : autoApply, availableModes: availableModes, onChange: mobile ? raw => setDraft(raw.hex) : handlePickerChange, "data-test-id": constants_1.TEST_IDS.fieldColorPicker }) }), children: trigger }) }));
+});

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

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

package/dist/cjs/components/FieldColor/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("./FieldColor"), exports);

package/dist/cjs/components/FieldColor/styles.module.css

@@ -0,0 +1,79 @@
+.trigger{
+  cursor:pointer;
+}
+
+.swatch{
+  position:relative;
+  flex:0 0 auto;
+  background-color:var(--field-color-swatch-color, transparent);
+  background-image:linear-gradient(45deg, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 25%, transparent 25%), linear-gradient(-45deg, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 75%), linear-gradient(-45deg, transparent 75%, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 75%);
+  background-position:0 0, 0 4px, 4px -4px, -4px 0;
+  background-size:8px 8px;
+}
+.swatch::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  background-color:var(--field-color-swatch-color, transparent);
+}
+
+.chevron{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.trigger[data-size=s] .swatch{
+  width:var(--sn-colorPicker-anatomy-size-s-previewColor-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-colorPicker-anatomy-size-s-previewColor-height, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+}
+
+.trigger[data-size=m] .swatch{
+  width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
+}
+
+.trigger[data-size=l] .swatch{
+  width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
+}
+
+.sheetTitle{
+  display:inline-flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+
+.sheetSwatch{
+  position:relative;
+  flex:0 0 auto;
+  width:var(--sn-primitive-dimension-24, 24px);
+  height:var(--sn-primitive-dimension-24, 24px);
+  border-radius:50%;
+  background-color:var(--field-color-swatch-color, transparent);
+  background-image:linear-gradient(45deg, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 25%, transparent 25%), linear-gradient(-45deg, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 75%), linear-gradient(-45deg, transparent 75%, var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843))) 75%);
+  background-position:0 0, 0 4px, 4px -4px, -4px 0;
+  background-size:8px 8px;
+}
+.sheetSwatch::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  background-color:var(--field-color-swatch-color, transparent);
+}
+
+.sheetFooter{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  justify-content:space-between;
+}
+
+.pickerHost{
+  display:contents;
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Нормализует пользовательский ввод цвета в потенциально валидную hex-строку:
+ * при наличии hex-цифр ведущая `#` обязательна (добавляется всегда), за ней — не более
+ * 8 hex-цифр (`rrggbbaa`) при `withAlpha`, иначе 6 (`rrggbb`). Лишние/внутренние `#` и
+ * любые не-hex символы отбрасываются. Пустой ввод (очистка поля) остаётся пустым.
+ */
+export declare function normalizeHexInput(raw: string, withAlpha?: boolean): string;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeHexInput = normalizeHexInput;
+/** Всё, что не hex-цифра. */
+const NON_HEX_CHARS = /[^0-9a-fA-F]/g;
+/** Hex-цифр с альфой: `rrggbbaa` (8); без альфы: `rrggbb` (6). `#` не считается. */
+const HEX_DIGITS_WITH_ALPHA = 8;
+const HEX_DIGITS_NO_ALPHA = 6;
+/**
+ * Нормализует пользовательский ввод цвета в потенциально валидную hex-строку:
+ * при наличии hex-цифр ведущая `#` обязательна (добавляется всегда), за ней — не более
+ * 8 hex-цифр (`rrggbbaa`) при `withAlpha`, иначе 6 (`rrggbb`). Лишние/внутренние `#` и
+ * любые не-hex символы отбрасываются. Пустой ввод (очистка поля) остаётся пустым.
+ */
+function normalizeHexInput(raw, withAlpha = true) {
+    const maxDigits = withAlpha ? HEX_DIGITS_WITH_ALPHA : HEX_DIGITS_NO_ALPHA;
+    const digits = raw.replace(NON_HEX_CHARS, '').slice(0, maxDigits);
+    return digits ? `#${digits}` : '';
+}

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

@@ -0,0 +1,91 @@
+import { FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import { InputPrivateProps } from '@cloud-ru/ds-input-private';
+import { ReactNode } from 'react';
+import { FieldLayoutPresets } from '../../hooks';
+import { FieldElementButtonProps, FieldElementDroplistProps } from '../shared';
+/**
+ * Слот-кнопка поля (`elementBefore` / `elementAfter`). Помимо обычной кнопки-действия
+ * может нести встроенный выпадающий список (`droplist`) на `@cloud-ru/ds-list`.
+ */
+type FieldElementSlot = Omit<FieldElementButtonProps, 'variant' | 'open' | 'onKeyDown'> & {
+    /** Встроенный выпадающий список (действия / выбор) на `@cloud-ru/ds-list` `Droplist` */
+    droplist?: FieldElementDroplistProps;
+};
+type FieldComboDecoratorProps = Omit<FieldDecoratorProps, 'children'>;
+type FieldComboSlotProps = {
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля ввода */
+    fieldClassName?: string;
+    /**
+     * Фон поля (acrylic)
+     * @default true
+     */
+    background?: boolean;
+    /**
+     * Разделитель между основным полем и слотами `elementBefore` / `elementAfter`
+     * @default true
+     */
+    outline?: boolean;
+    /** Префикс (текст или нода) */
+    prefix?: ReactNode;
+    /** Постфикс (текст или нода) */
+    postfix?: ReactNode;
+    /** Иконка слева от строки ввода */
+    iconBefore?: ReactNode;
+    /** Иконка справа от строки ввода */
+    iconAfter?: ReactNode;
+    /**
+     * Ведущая иконка.
+     * @deprecated Используйте `iconBefore` — он приоритетнее, если заданы оба.
+     */
+    prefixIcon?: ReactNode;
+    /** Слот слева (кнопка / селект с опциональным выпадающим списком) */
+    elementBefore?: FieldElementSlot;
+    /** Слот справа (кнопка / селект с опциональным выпадающим списком) */
+    elementAfter?: FieldElementSlot;
+    /**
+     * Показывать кнопку очистки значения (как в Search)
+     * @default true
+     */
+    showClearButton?: boolean;
+    /** Колбек клика по кнопке очистки */
+    onClearButtonClick?(): void;
+    /**
+     * Показывать кнопку копирования значения (только при `readonly = true` и непустом `value`)
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после копирования значения в буфер */
+    onCopyButtonClick?(): void;
+    /**
+     * Разрешить ввод свыше `maxLength` символов (счётчик продолжит расти).
+     * @default false
+     */
+    allowMoreThanMaxLength?: boolean;
+    /** Значение поля (controlled-режим) */
+    value?: string;
+    /** Начальное значение (uncontrolled-режим) */
+    defaultValue?: string;
+    /** Колбек смены значения */
+    onChange?(value: string): void;
+    /**
+     * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+     * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+     */
+    layoutPresets?: FieldLayoutPresets;
+    /**
+     * Идентификаторы внутренних слотов — оболочки и строки ввода. Нужны компонентам, которые
+     * рендерят `FieldCombo` под собственным именем (`FieldText`): их e2e адресует свои слоты,
+     * а не слоты `FieldCombo`.
+     */
+    innerTestIds?: {
+        /** `data-test-id` оболочки поля */
+        shell?: string;
+        /** `data-test-id` строки ввода */
+        input?: string;
+    };
+};
+export type FieldComboProps = FieldComboDecoratorProps & Omit<InputPrivateProps, 'className' | 'value' | 'onChange'> & FieldComboSlotProps;
+export declare const FieldCombo: import("react").ForwardRefExoticComponent<Omit<FieldComboProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/cjs/components/FieldCombo/FieldCombo.js

@@ -0,0 +1,200 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldCombo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const divider_1 = require("@cloud-ru/ds-divider");
+const field_decorator_1 = require("@cloud-ru/ds-field-decorator");
+const input_private_1 = require("@cloud-ru/ds-input-private");
+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 hooks_1 = require("../../hooks");
+const shared_1 = require("../shared");
+const styles_module_scss_1 = __importDefault(require('../shared/styles.module.css'));
+exports.FieldCombo = (0, react_1.forwardRef)(function FieldCombo({ 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, outline = true, prefix, postfix, iconBefore: iconBeforeProp, iconAfter, prefixIcon, elementBefore, elementAfter, showClearButton: showClearButtonProp = true, onClearButtonClick, showCopyButton: showCopyButtonProp = true, onCopyButtonClick, allowMoreThanMaxLength = false, disabled, readonly: readOnly, value: valueProp, defaultValue = '', onChange: onChangeProp, placeholder, 'data-test-id': dataTestId, innerTestIds, ...inputProps }, ref) {
+    const { onFocus: onFocusProp, onBlur: onBlurProp, onKeyDown: onKeyDownProp, tabIndex: tabIndexProp, maxLength, autoFocus, layoutPresets, ...restInputProps } = inputProps;
+    const resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
+    // `prefixIcon` — легаси-псевдоним ведущей иконки; `iconBefore` приоритетнее.
+    const iconBefore = iconBeforeProp ?? prefixIcon;
+    const [value = '', onChange] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+    const localRef = (0, react_1.useRef)(null);
+    const clearButtonRef = (0, react_1.useRef)(null);
+    const copyButtonRef = (0, react_1.useRef)(null);
+    const elementBeforeRef = (0, react_1.useRef)(null);
+    const elementAfterRef = (0, react_1.useRef)(null);
+    const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.VALIDATION_STATE.Error : validationState), [error, validationState]);
+    const slotSize = (s) => (s ?? size ?? field_decorator_1.SIZE.M);
+    const showClearUi = Boolean(showClearButtonProp && value && !readOnly && !disabled);
+    const showCopyUi = Boolean(showCopyButtonProp && value && !disabled && readOnly);
+    const stringValue = String(value ?? '');
+    const textToCopy = (0, react_1.useMemo)(() => `${typeof prefix === 'string' ? prefix : ''}${stringValue}${typeof postfix === 'string' ? postfix : ''}`, [postfix, prefix, stringValue]);
+    const effectiveMaxLength = allowMoreThanMaxLength ? undefined : maxLength;
+    const effectiveLength = (0, react_1.useMemo)(() => length ?? (maxLength ? { current: stringValue.length, max: maxLength } : undefined), [length, maxLength, stringValue.length]);
+    const onClear = (0, react_1.useCallback)(() => {
+        onChange?.('');
+        // Возврат фокуса в поле после очистки: clear-кнопка исчезает (значение пусто),
+        // фокус не должен «упасть» на body — паритет с легаси (focusedRef) и FieldTextArea.
+        localRef.current?.focus();
+        onClearButtonClick?.();
+    }, [onChange, onClearButtonClick]);
+    const onCopy = (0, react_1.useCallback)(async () => {
+        const copied = await (0, shared_1.copyTextToClipboard)(textToCopy);
+        if (copied) {
+            onCopyButtonClick?.();
+        }
+        return copied;
+    }, [onCopyButtonClick, textToCopy]);
+    const clearButtonSettings = (0, input_private_1.useClearButton)({
+        clearButtonRef,
+        showClearButton: showClearUi,
+        size: (0, shared_1.toInputSize)(size),
+        onClear,
+        disabled: Boolean(disabled || readOnly),
+    });
+    const copyButtonSettings = (0, shared_1.useCopyButton)({
+        copyButtonRef,
+        showCopyButton: showCopyUi,
+        size: (0, shared_1.toInputSize)(size),
+        onCopy,
+        disabled: Boolean(disabled),
+    });
+    // ArrowRight с последней postfix-кнопки (clear/copy — взаимоисключающие) уводит фокус
+    // на правый слот-элемент, продолжая roving-цепочку input → clear/copy → elementAfter.
+    const onPostfixButtonKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowRight' && elementAfterRef.current) {
+            event.preventDefault();
+            elementAfterRef.current.focus();
+        }
+    }, []);
+    const { postfixButtons, inputTabIndex, onInputKeyDown, setInitialTabIndices } = (0, input_private_1.useButtonNavigation)({
+        inputRef: localRef,
+        postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        onButtonKeyDown: onPostfixButtonKeyDown,
+        readonly: Boolean(readOnly),
+        submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+    const focusInput = (0, react_1.useCallback)(() => {
+        setInitialTabIndices();
+        localRef.current?.focus();
+    }, [setInitialTabIndices]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        onInputKeyDown(event);
+        const atStart = Boolean(readOnly) || (0, shared_1.isCursorAtStart)(localRef.current);
+        const atEnd = Boolean(readOnly) || (0, shared_1.isCursorAtEnd)(localRef.current);
+        // ← к левому слоту; → к правому слоту (если справа нет видимой clear/copy — иначе
+        // их обрабатывает useButtonNavigation, а цепочку дальше ведёт onPostfixButtonKeyDown).
+        if (elementBefore && event.key === 'ArrowLeft' && atStart && elementBeforeRef.current) {
+            event.preventDefault();
+            elementBeforeRef.current.focus();
+        }
+        if (elementAfter &&
+            event.key === 'ArrowRight' &&
+            atEnd &&
+            !showClearUi &&
+            !showCopyUi &&
+            elementAfterRef.current) {
+            event.preventDefault();
+            elementAfterRef.current.focus();
+        }
+        onKeyDownProp?.(event);
+    }, [elementAfter, elementBefore, onInputKeyDown, onKeyDownProp, readOnly, showClearUi, showCopyUi]);
+    const onElementKeyDown = (0, react_1.useCallback)((variant) => (event) => {
+        // Возврат в поле: ArrowRight с левого слота, ArrowLeft с правого.
+        if (variant === 'before' && event.key === 'ArrowRight') {
+            event.preventDefault();
+            focusInput();
+        }
+        if (variant === 'after' && event.key === 'ArrowLeft') {
+            event.preventDefault();
+            const visiblePostfixButton = (showCopyUi && copyButtonRef.current) || (showClearUi && clearButtonRef.current);
+            (visiblePostfixButton || localRef.current)?.focus();
+        }
+    }, [focusInput, showClearUi, 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);
+        // Не пробрасываем consumer onBlur, если фокус ушёл на собственную кнопку поля (clear/copy/слот).
+        // `next != null` обязателен: при blur «в никуда» relatedTarget и нерендеренные кнопки-рефы оба null,
+        // без него null === null ложно срабатывает и глотает onBlur.
+        const next = event.relatedTarget;
+        const movedToOwnButton = next != null &&
+            (next === clearButtonRef.current ||
+                next === copyButtonRef.current ||
+                next === elementBeforeRef.current ||
+                next === elementAfterRef.current);
+        if (!movedToOwnButton) {
+            onBlurProp?.(event);
+        }
+    }, [onBlurProp]);
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (!readOnly) {
+            setHover(true);
+        }
+    }, [readOnly]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        setHover(false);
+    }, []);
+    const renderElement = (slot, variant) => {
+        const commonProps = {
+            variant,
+            size: slotSize(slot.size),
+            loading: slot.loading,
+            disabled: disabled || slot.disabled || Boolean(readOnly),
+            onClick: slot.onClick,
+            action: slot.action,
+            onKeyDown: onElementKeyDown(variant),
+            ref: variant === 'before' ? elementBeforeRef : elementAfterRef,
+            'data-test-id': slot['data-test-id'],
+        };
+        if (!slot.droplist) {
+            return (0, jsx_runtime_1.jsx)(shared_1.FieldElementButton, { ...commonProps, withDropdownList: slot.withDropdownList });
+        }
+        // Возврат фокуса в поле после выбора пункта (паритет с легаси `@snack-uikit/fields`).
+        const { selection } = slot.droplist;
+        const returnFocus = () => setTimeout(() => localRef.current?.focus(), 0);
+        // selection — дискриминированный union по `mode`; оборачиваем onChange в каждой ветке
+        // отдельно, чтобы значение сохраняло свой точный тип (ItemId vs ItemId[]).
+        const wrapSelection = (sel) => {
+            if (sel.mode === 'multiple') {
+                return {
+                    ...sel,
+                    onChange: (value) => {
+                        sel.onChange?.(value);
+                        returnFocus();
+                    },
+                };
+            }
+            return {
+                ...sel,
+                onChange: (value) => {
+                    sel.onChange?.(value);
+                    returnFocus();
+                },
+            };
+        };
+        const droplist = selection ? { ...slot.droplist, selection: wrapSelection(selection) } : slot.droplist;
+        return (0, jsx_runtime_1.jsx)(shared_1.FieldElementButtonList, { ...commonProps, droplist: droplist });
+    };
+    const shell = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldWrapper, fieldClassName), "data-test-id": innerTestIds?.shell ?? constants_1.TEST_IDS.fieldComboShell, "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 && 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 })] }), elementBefore && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperBefore, children: [renderElement(elementBefore, 'before'), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": outline, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) })] })), (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: [iconBefore && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconBefore }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, 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: onChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, maxLength: effectiveMaxLength, onFocus: handleFocus, onBlur: handleBlur, ...restInputProps, autoFocus: resolvedAutoFocus, "data-test-id": innerTestIds?.input ?? constants_1.TEST_IDS.fieldComboInput }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix })] }), iconAfter && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconAfter })] }) }), elementAfter && ((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": outline, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), renderElement(elementAfter, 'after')] }))] }));
+    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: effectiveLength, required: required, labelFor: inputProps.id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: shell }));
+});

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

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