@cloud-ru/ds-fields 2.2.3-preview-0c4119af.0 → 2.2.3-preview-a42433ce.0

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

@@ -0,0 +1,19 @@
+import { Size } from '@cloud-ru/ds-field-decorator';
+import { ItemId } from '@cloud-ru/ds-list';
+import { Appearance as TagAppearance, Size as TagSize } from '@cloud-ru/ds-tag';
+import { FieldSelectItem, FieldSelectMultipleProps, FieldSelectProps } from './types.js';
+export declare const TAG_SIZE_MAP: Record<Size, TagSize>;
+export type WithIdContent = {
+    id?: ItemId;
+    content?: unknown;
+    disabled?: boolean;
+    appearance?: TagAppearance;
+};
+export declare function extractLabel(item: WithIdContent): string;
+export declare function extractSearchText(item: WithIdContent): string;
+export declare function extractAppearance(item?: WithIdContent): TagAppearance | undefined;
+export declare function flatten(items: FieldSelectItem[]): WithIdContent[];
+export declare function findItem(items: FieldSelectItem[], id: ItemId): WithIdContent | undefined;
+export declare function isFuzzyMatch(haystack: string, needle: string): boolean;
+export declare function filterItems(items: FieldSelectItem[], query: string, fuzzy: boolean): FieldSelectItem[];
+export declare function isMultiple(props: FieldSelectProps): props is FieldSelectMultipleProps;

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

@@ -0,0 +1,92 @@
+import { SELECTION_MODE } from './constants.js';
+export const TAG_SIZE_MAP = { s: 'xs', m: 'xs', l: 's' };
+export function extractLabel(item) {
+    const { content, id } = item;
+    if (!content) {
+        return String(id ?? '');
+    }
+    if (typeof content === 'string' || typeof content === 'number') {
+        return String(content);
+    }
+    if (typeof content === 'object' && content !== null && 'label' in content) {
+        return String(content.label);
+    }
+    return String(id ?? '');
+}
+// Текст для поиска: лейбл (option) + caption + description — паритет с легаси `useSearch`,
+// который матчил запрос по всем трём полям контента, а не только по лейблу.
+export function extractSearchText(item) {
+    const parts = [extractLabel(item)];
+    const { content } = item;
+    if (content && typeof content === 'object') {
+        const c = content;
+        if (typeof c.caption === 'string') {
+            parts.push(c.caption);
+        }
+        if (typeof c.description === 'string') {
+            parts.push(c.description);
+        }
+    }
+    return parts.join(' ');
+}
+// Цвет тега выбранного значения (multiple) — паритет с легаси `option.appearance`.
+// Проверка типа нужна и при типизированном поле: items часто приходят из ответа бэкенда.
+export function extractAppearance(item) {
+    return typeof item?.appearance === 'string' ? item.appearance : undefined;
+}
+export function flatten(items) {
+    const out = [];
+    for (const item of items) {
+        out.push(item);
+        if ('items' in item && Array.isArray(item.items)) {
+            out.push(...flatten(item.items));
+        }
+    }
+    return out;
+}
+export function findItem(items, id) {
+    for (const item of flatten(items)) {
+        if (item.id === id) {
+            return item;
+        }
+    }
+    return undefined;
+}
+// Subsequence-fuzzy: символы запроса должны встречаться в строке в исходном порядке.
+// Пример: query=`lge` matches `Large` (L → r → arg → e).
+export function isFuzzyMatch(haystack, needle) {
+    if (!needle) {
+        return true;
+    }
+    let i = 0;
+    for (const ch of haystack) {
+        if (ch === needle[i]) {
+            i += 1;
+            if (i === needle.length) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+export function filterItems(items, query, fuzzy) {
+    if (!query) {
+        return items;
+    }
+    const q = query.toLowerCase();
+    const matches = (item) => {
+        const text = extractSearchText(item).toLowerCase();
+        return fuzzy ? isFuzzyMatch(text, q) : text.includes(q);
+    };
+    const walk = (list) => list.flatMap(item => {
+        if ('items' in item && Array.isArray(item.items)) {
+            const filteredChildren = walk(item.items);
+            return filteredChildren.length > 0 ? [{ ...item, items: filteredChildren }] : [];
+        }
+        return matches(item) ? [item] : [];
+    });
+    return walk(items);
+}
+export function isMultiple(props) {
+    return props.selection === SELECTION_MODE.Multiple;
+}

package/dist/esm/components/FieldTime/FieldTime.js

@@ -131,7 +131,7 @@ export const FieldTime = forwardRef(function FieldTime({ label = '', labelToolti
         // clear/copy недостижимыми со стрелок — движок всегда делает preventDefault на ArrowRight.
         onInputKeyDown(event);
     }, [onInputKeyDown, timeSeg]);
-    // value ведёт сегментный движок (keydown); нативный onChange input'а игнорируем.
+    // value ведёт сегментный движок (useSegmentedMask); нативный onChange input'а игнорируем.
     const handleInputChange = useCallback(() => undefined, []);
     const handleInputFocus = useCallback((event) => {
         setFocusVisible(event.target.matches(':focus-visible'));
@@ -149,7 +149,7 @@ export const FieldTime = forwardRef(function FieldTime({ label = '', labelToolti
                             readonly: readOnly,
                             hover,
                             focusVisible: focusVisible || open,
-                        }), 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: [_jsx("div", { className: fieldStyles.inputLine, children: _jsxs("div", { className: fieldStyles.inputArea, children: [_jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.fieldInput, value: inputValue, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholderMask, inputMode: INPUT_MODE.Numeric, tabIndex: inputTabIndex, onClick: timeSeg.handleClick, onPaste: timeSeg.handlePaste, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "aria-haspopup": 'dialog', "aria-expanded": open, ...extractSupportProps(rest), "data-test-id": TEST_IDS.fieldTimeInput }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] }) }), _jsx("div", { className: fieldStyles.iconSlot, "data-test-id": TEST_IDS.fieldTimeIcon, "aria-hidden": true, children: _jsx(WatchSVG, {}) })] }) })] }));
+                        }), 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: [_jsx("div", { className: fieldStyles.inputLine, children: _jsxs("div", { className: fieldStyles.inputArea, children: [_jsx(InputPrivate, { ref: mergeRefs(ref, localRef, timeSeg.nativeInputRef), className: fieldStyles.fieldInput, value: inputValue, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholderMask, inputMode: INPUT_MODE.Numeric, tabIndex: inputTabIndex, onClick: timeSeg.handleClick, onPaste: timeSeg.handlePaste, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "aria-haspopup": 'dialog', "aria-expanded": open, ...extractSupportProps(rest), "data-test-id": TEST_IDS.fieldTimeInput }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] }) }), _jsx("div", { className: fieldStyles.iconSlot, "data-test-id": TEST_IDS.fieldTimeIcon, "aria-hidden": true, children: _jsx(WatchSVG, {}) })] }) })] }));
     return (_jsx(FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, children: _jsx(TimePickerDropdown
         // Явный data-test-id на дропдауне → детерминированный id портального контента:
         // `getTestIdBuilder` строит `content-${id}`, так контент адресуем для open-picker-снимка

package/dist/esm/segments/useSegmentedMask.d.ts

@@ -29,6 +29,7 @@ type UseSegmentedMaskParams = {
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
+ * `nativeInputRef` передаётся в `ref` того же input'а: значение правится через нативные `beforeinput`/`input`.
  */
 export declare function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue, onMaskedChange, onArrowDown, onArrowUp, onEscape, onEdit, }: UseSegmentedMaskParams): {
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
@@ -36,6 +37,7 @@ export declare function useSegmentedMask({ inputRef, mask, slots, readonly, disa
     handleFocus: () => void;
     handleBlur: () => void;
     handlePaste: (event: ClipboardEvent<HTMLInputElement>) => void;
+    nativeInputRef: (node: HTMLInputElement | null) => void;
     selectSlot: (slot: SlotMeta) => void;
     firstSlot: SlotMeta;
     lastSlot: SlotMeta;

package/dist/esm/segments/useSegmentedMask.js

@@ -1,8 +1,21 @@
+import { useEventHandler } from '@cloud-ru/ds-utils';
 import { useCallback, useRef } from 'react';
+const RESET_TYPED_KEYS = new Set([
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Backspace',
+    'Delete',
+    'Enter',
+    'Tab',
+    'Escape',
+]);
 /**
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
+ * `nativeInputRef` передаётся в `ref` того же input'а: значение правится через нативные `beforeinput`/`input`.
  */
 export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue, onMaskedChange, onArrowDown, onArrowUp, onEscape, onEdit, }) {
     const firstSlot = slots[0];
@@ -107,70 +120,61 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         }
         selectSlot(nextSlot(slot));
     }, [clearSlot, isValidDate, lastSlot, nextSlot, selectSlot, slots, tryToComplete]);
+    // Цифры сегмента храним отдельно от текста: по `01` в поле не отличить `1` от `0` + `1`.
+    const typedRef = useRef(null);
+    const resetTyped = useCallback(() => {
+        typedRef.current = null;
+    }, []);
     const typeDigit = useCallback((slot, key) => {
-        const text = getSlotText(slot);
-        const numberValue = Number(text) || 0;
-        const digit = Number(key);
-        const slotValue = parseInt(numberValue.toString() + key, 10) || 0;
-        const valueLength = slotValue.toString().length;
         const maxLength = slot.max.toString().length;
-        const isTheLastInput = /^0+$/.test(text) && maxLength === 2 && digit === 0;
-        if (valueLength < maxLength) {
-            if (slotValue || slotValue >= slot.min) {
-                updateSlot(slot, slotValue);
-                if (isTheLastInput)
-                    checkInputAndGoNext(slot);
-            }
-            if (slotValue * 10 > slot.max) {
-                checkInputAndGoNext(slot);
-            }
-        }
-        else if (valueLength > maxLength) {
-            if (digit * 10 > slot.max) {
-                updateSlot(slot, key);
-                checkInputAndGoNext(slot);
-            }
-            else if (digit || digit >= slot.min) {
-                updateSlot(slot, key);
-            }
-        }
-        else if (slotValue <= slot.max) {
-            updateSlot(slot, slotValue);
-            checkInputAndGoNext(slot);
+        const prev = typedRef.current?.key === slot.key ? typedRef.current.digits : '';
+        const appended = prev + key;
+        // Как в React Aria и MUI X: `13` в месяце → `03`.
+        const overflow = Number(appended) > slot.max;
+        const digits = overflow ? key : appended;
+        const value = Number(digits);
+        const complete = overflow || digits.length >= maxLength || value * 10 > slot.max;
+        const accepted = value >= slot.min;
+        if (accepted)
+            updateSlot(slot, value);
+        if (!complete) {
+            typedRef.current = { key: slot.key, digits };
+            return;
         }
-        else if (digit * 10 > slot.max) {
-            updateSlot(slot, key);
+        typedRef.current = null;
+        if (accepted)
             checkInputAndGoNext(slot);
-        }
-        else if (digit || digit >= slot.min) {
-            updateSlot(slot, key);
-        }
-    }, [checkInputAndGoNext, getSlotText, updateSlot]);
+    }, [checkInputAndGoNext, updateSlot]);
     const handleFocus = useCallback(() => {
         if (readonly || disabled)
             return;
+        resetTyped();
         ensureMask();
         // На фокус всегда выбираем ПЕРВЫЙ сегмент (паритет с легаси). При клике мышью `handleClick`
         // отработает следом и перевыберет сегмент под кареткой; при Tab остаётся первый.
         selectSlot(firstSlot);
-    }, [disabled, ensureMask, firstSlot, readonly, selectSlot]);
+    }, [disabled, ensureMask, firstSlot, readonly, resetTyped, selectSlot]);
     const handleClick = useCallback((event) => {
         if (readonly || disabled)
             return;
+        resetTyped();
         ensureMask();
         selectSlot(slotFromIndex(event.currentTarget.selectionStart));
-    }, [disabled, ensureMask, readonly, selectSlot, slotFromIndex]);
+    }, [disabled, ensureMask, readonly, resetTyped, selectSlot, slotFromIndex]);
     const handleBlur = useCallback(() => {
+        resetTyped();
         const input = inputRef.current;
         if (input && input.value === mask) {
             input.value = '';
             setValue('');
         }
-    }, [inputRef, mask, setValue]);
+    }, [inputRef, mask, resetTyped, setValue]);
     const handleKeyDown = useCallback((event) => {
         const input = inputRef.current;
         if (!input || readonly || disabled)
             return;
+        if (RESET_TYPED_KEYS.has(event.key))
+            resetTyped();
         // Tab уводит фокус из поля — не перехватываем.
         if (event.key === 'Tab')
             return;
@@ -185,7 +189,13 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
             onArrowUp?.();
             return;
         }
+        // Копирование и вставку не блокируем: правку поля перехватит beforeinput.
+        if (event.ctrlKey || event.metaKey || event.altKey)
+            return;
         onEdit?.();
+        // Экранные клавиатуры присылают `Unidentified` вместо цифры, её данные есть только в beforeinput.
+        if (/^\d$/.test(event.key) || event.key === 'Unidentified')
+            return;
         if (event.key === 'Escape') {
             event.preventDefault();
             onEscape?.();
@@ -220,11 +230,6 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         if (event.key === 'Enter') {
             tryToComplete();
             emit();
-            return;
-        }
-        if (/^\d$/.test(event.key)) {
-            typeDigit(slot, event.key);
-            emit();
         }
     }, [
         clearSlot,
@@ -240,21 +245,13 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         onEscape,
         prevSlot,
         readonly,
+        resetTyped,
         selectSlot,
         slotFromIndex,
         tryToComplete,
-        typeDigit,
     ]);
-    // Вставка (Ctrl+V) полной строки даты/времени: вытаскиваем цифры и заполняем сегменты
-    // слева направо. Нативный onChange у поля игнорируется (движок controlled), поэтому без
-    // этого обработчика вставка не работала бы вовсе.
-    const handlePaste = useCallback((event) => {
-        if (readonly || disabled)
-            return;
-        event.preventDefault();
-        const digits = event.clipboardData.getData('text').replace(/\D/g, '');
-        if (!digits)
-            return;
+    const fillFromDigits = useCallback((digits) => {
+        resetTyped();
         ensureMask();
         let cursor = 0;
         let lastFilled;
@@ -273,7 +270,100 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         else if (lastFilled) {
             selectSlot(nextSlot(lastFilled));
         }
+    }, [ensureMask, lastSlot, nextSlot, resetTyped, selectSlot, slots, tryToComplete, updateSlot]);
+    const handlePaste = useCallback((event) => {
+        if (readonly || disabled)
+            return;
+        event.preventDefault();
+        const digits = event.clipboardData.getData('text').replace(/\D/g, '');
+        if (!digits)
+            return;
+        fillFromDigits(digits);
+        emit();
+    }, [disabled, emit, fillFromDigits, readonly]);
+    const applyEdit = useCallback((inputType, text) => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        onEdit?.();
+        if (inputType.startsWith('delete')) {
+            resetTyped();
+            clearSlot(slotFromIndex(input.selectionStart));
+            emit();
+            return;
+        }
+        const digits = text.replace(/\D/g, '');
+        if (!inputType.startsWith('insert') || !digits)
+            return;
+        // Автозаполнение, `fill` и drop присылают строку целиком.
+        if (text.length > 1) {
+            fillFromDigits(digits);
+        }
+        else {
+            typeDigit(slotFromIndex(input.selectionStart), digits);
+        }
+        emit();
+    }, [clearSlot, emit, fillFromDigits, inputRef, onEdit, resetTyped, slotFromIndex, typeDigit]);
+    // Композицию IME браузер не даёт отменить — откатываем её в input.
+    const pendingEditRef = useRef(null);
+    const handleBeforeInput = useCallback((event) => {
+        const input = inputRef.current;
+        if (!input || readonly || disabled)
+            return;
+        ensureMask();
+        if (!event.cancelable) {
+            pendingEditRef.current = { value: input.value, start: input.selectionStart ?? 0, end: input.selectionEnd ?? 0 };
+            return;
+        }
+        event.preventDefault();
+        applyEdit(event.inputType, event.data ?? event.dataTransfer?.getData('text') ?? '');
+    }, [applyEdit, disabled, ensureMask, inputRef, readonly]);
+    const handleInput = useCallback((event) => {
+        const input = inputRef.current;
+        if (!input || readonly || disabled)
+            return;
+        const pending = pendingEditRef.current;
+        pendingEditRef.current = null;
+        if (pending) {
+            const inputType = event instanceof InputEvent ? event.inputType : '';
+            const inserted = input.value.slice(pending.start, input.value.length - (pending.value.length - pending.end));
+            input.value = pending.value;
+            setValue(pending.value);
+            input.setSelectionRange(pending.start, pending.end);
+            // Цифру композиции вводит её фиксация (insertText), иначе цифра запишется дважды.
+            if (!inputType.includes('Composition'))
+                applyEdit(inputType, inserted);
+            return;
+        }
+        // Автозаполнение меняет значение без beforeinput.
+        const digits = input.value.replace(/\D/g, '');
+        input.value = mask;
+        setValue(mask);
+        fillFromDigits(digits);
         emit();
-    }, [disabled, emit, ensureMask, lastSlot, nextSlot, readonly, selectSlot, slots, tryToComplete, updateSlot]);
-    return { handleKeyDown, handleClick, handleFocus, handleBlur, handlePaste, selectSlot, firstSlot, lastSlot };
+    }, [applyEdit, disabled, emit, fillFromDigits, inputRef, mask, readonly, setValue]);
+    // React 18 не отдаёт `inputType` в `onBeforeInput`, поэтому слушаем нативные события.
+    const onNativeBeforeInput = useEventHandler(handleBeforeInput);
+    const onNativeInput = useEventHandler(handleInput);
+    const attachedInputRef = useRef(null);
+    const nativeInputRef = useCallback((node) => {
+        /* eslint-disable @cloud-ru/ssr-safe-react/domApi -- callback-ref вызывается только в браузере */
+        attachedInputRef.current?.removeEventListener('beforeinput', onNativeBeforeInput);
+        attachedInputRef.current?.removeEventListener('input', onNativeInput);
+        attachedInputRef.current = node;
+        node?.addEventListener('beforeinput', onNativeBeforeInput);
+        node?.addEventListener('input', onNativeInput);
+        /* eslint-enable @cloud-ru/ssr-safe-react/domApi */
+    }, [onNativeBeforeInput, onNativeInput]);
+    return {
+        handleKeyDown,
+        handleClick,
+        handleFocus,
+        handleBlur,
+        handlePaste,
+        nativeInputRef,
+        selectSlot,
+        firstSlot,
+        lastSlot,
+    };
 }