@cloud-ru/ds-fields 2.2.3 → 2.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-fields",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "description": "Поля ввода с единой обёрткой label/caption/hint/error и общими осями size/validationState — текст, пароль, число, ползунок, дата, время, выбор, цвет.",
   "repository": {
     "type": "git",
@@ -40,23 +40,23 @@
     "merge-refs": "^2.0.0",
     "react-textarea-autosize": "^8.5.9",
     "@cloud-ru/ds-adaptive": "^1.0.1",
+    "@cloud-ru/ds-calendar": "^1.0.17",
+    "@cloud-ru/ds-bottom-sheet": "^1.1.2",
     "@cloud-ru/ds-button": "^1.0.2",
-    "@cloud-ru/ds-bottom-sheet": "^1.1.1",
-    "@cloud-ru/ds-color-picker": "^1.0.6",
+    "@cloud-ru/ds-color-picker": "^1.0.7",
     "@cloud-ru/ds-divider": "^1.0.1",
-    "@cloud-ru/ds-calendar": "^1.0.15",
-    "@cloud-ru/ds-dropdown": "^1.0.8",
-    "@cloud-ru/ds-field-decorator": "^1.0.5",
-    "@cloud-ru/ds-icons": "^1.1.0",
-    "@cloud-ru/ds-input-private": "^1.0.4",
-    "@cloud-ru/ds-list": "^2.1.3",
-    "@cloud-ru/ds-materials": "^1.0.1",
+    "@cloud-ru/ds-dropdown": "^1.0.9",
+    "@cloud-ru/ds-input-private": "^1.0.5",
+    "@cloud-ru/ds-field-decorator": "^1.0.6",
+    "@cloud-ru/ds-list": "^2.1.5",
     "@cloud-ru/ds-loader": "^1.0.1",
+    "@cloud-ru/ds-materials": "^1.0.1",
+    "@cloud-ru/ds-icons": "^1.2.0",
     "@cloud-ru/ds-scroll": "^1.0.2",
     "@cloud-ru/ds-skeleton": "^1.0.1",
-    "@cloud-ru/ds-slider": "^1.0.4",
-    "@cloud-ru/ds-tag": "^1.1.1",
-    "@cloud-ru/ds-utils": "^1.1.0",
-    "@cloud-ru/ds-tooltip": "^1.0.4"
+    "@cloud-ru/ds-slider": "^1.0.5",
+    "@cloud-ru/ds-tag": "^1.1.2",
+    "@cloud-ru/ds-tooltip": "^1.0.5",
+    "@cloud-ru/ds-utils": "^1.1.0"
   }
 }

package/src/components/FieldDate/FieldDate.tsx

@@ -520,12 +520,12 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(function F
                 </span>
               ) : (
                 <InputPrivate
-                  ref={mergeRefs(ref, fromInputRef)}
+                  ref={mergeRefs(ref, fromInputRef, singleSeg.nativeInputRef)}
                   className={fieldStyles.fieldInput}
                   value={singleInputValue}
                   placeholder={placeholderMask}
-                  // Single/date-time ведёт сегментный движок (keydown, useSegmentedMask), нативный
-                  // onChange игнорируется. Range — обычный ввод-по-маске (formatMask в handleRangeInput).
+                  // Single/date-time ведёт сегментный движок (useSegmentedMask), нативный onChange
+                  // игнорируется. Range — обычный ввод-по-маске (formatMask в handleRangeInput).
                   onChange={() => {}}
                   onKeyDown={handleSingleKeyDown}
                   onClick={singleSeg.handleClick}

package/src/components/FieldDate/mask.ts

@@ -55,8 +55,9 @@ function buildSegments(mode: MaskMode, showSeconds: boolean): Segment[] {
  *    «десятку» (`day` → > 3, `month` → > 1, `hour` → > 2, `minute`/`second` → > 5), цифра трактуется
  *    как «единицы» и в начало сегмента добавляется ноль. Пример: `5` для day → `05.`,
  *    фокус автоматически уезжает на следующий сегмент.
- * 2. **Clamp полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
- *    значение прижимается к верхней границе. Пример: `55` для day → `31`, `99` для month → `12`.
+ * 2. **Переполнение полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
+ *    сегмент начинается заново с последней цифры (как посегментный ввод в `useSegmentedMask`).
+ *    Пример: `39` для day → `09`, `13` для month → `03`.
  */
 export function formatMask(input: string, mode: MaskMode, showSeconds = true): string {
   const maxLen = totalLen(mode, showSeconds);
@@ -81,7 +82,7 @@ export function formatMask(input: string, mode: MaskMode, showSeconds = true): s
     stream = stream.slice(seg.len);
     if (raw.length === seg.len) {
       const n = Number(raw);
-      out += n > seg.max ? String(seg.max).padStart(seg.len, '0') : raw;
+      out += n > seg.max ? raw.slice(-1).padStart(seg.len, '0') : raw;
     } else {
       out += raw;
     }

package/src/components/FieldTime/FieldTime.tsx

@@ -267,7 +267,7 @@ export const FieldTime = forwardRef<HTMLInputElement, FieldTimeProps>(function F
     [onInputKeyDown, timeSeg],
   );
 
-  // value ведёт сегментный движок (keydown); нативный onChange input'а игнорируем.
+  // value ведёт сегментный движок (useSegmentedMask); нативный onChange input'а игнорируем.
   const handleInputChange = useCallback(() => undefined, []);
 
   const handleInputFocus = useCallback(
@@ -323,7 +323,7 @@ export const FieldTime = forwardRef<HTMLInputElement, FieldTimeProps>(function F
           <div className={fieldStyles.inputLine}>
             <div className={fieldStyles.inputArea}>
               <InputPrivate
-                ref={mergeRefs(ref, localRef)}
+                ref={mergeRefs(ref, localRef, timeSeg.nativeInputRef)}
                 className={fieldStyles.fieldInput}
                 value={inputValue}
                 onChange={handleInputChange}

package/src/segments/useSegmentedMask.ts

@@ -1,6 +1,19 @@
+import { useEventHandler } from '@cloud-ru/ds-utils';
 import { ClipboardEvent, KeyboardEvent, MouseEvent, RefObject, useCallback, useRef } from 'react';
 
-import { SlotMeta } from './segments';
+import { SegmentKey, SlotMeta } from './segments';
+
+const RESET_TYPED_KEYS = new Set([
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+  'Backspace',
+  'Delete',
+  'Enter',
+  'Tab',
+  'Escape',
+]);
 
 type UseSegmentedMaskParams = {
   inputRef: RefObject<HTMLInputElement | null>;
@@ -32,6 +45,7 @@ type UseSegmentedMaskParams = {
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
+ * `nativeInputRef` передаётся в `ref` того же input'а: значение правится через нативные `beforeinput`/`input`.
  */
 export function useSegmentedMask({
   inputRef,
@@ -174,74 +188,71 @@ export function useSegmentedMask({
     [clearSlot, isValidDate, lastSlot, nextSlot, selectSlot, slots, tryToComplete],
   );
 
+  // Цифры сегмента храним отдельно от текста: по `01` в поле не отличить `1` от `0` + `1`.
+  const typedRef = useRef<{ key: SegmentKey; digits: string } | null>(null);
+  const resetTyped = useCallback(() => {
+    typedRef.current = null;
+  }, []);
+
   const typeDigit = useCallback(
     (slot: SlotMeta, key: string) => {
-      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);
-      } else if (digit * 10 > slot.max) {
-        updateSlot(slot, key);
-        checkInputAndGoNext(slot);
-      } else if (digit || digit >= slot.min) {
-        updateSlot(slot, key);
+      const prev = typedRef.current?.key === slot.key ? typedRef.current.digits : '';
+      const appended = prev + key;
+      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;
       }
+
+      typedRef.current = null;
+      if (accepted) checkInputAndGoNext(slot);
     },
-    [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: MouseEvent<HTMLInputElement>) => {
       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: KeyboardEvent<HTMLInputElement>) => {
       const input = inputRef.current;
       if (!input || readonly || disabled) return;
 
+      if (RESET_TYPED_KEYS.has(event.key)) resetTyped();
+
       // Tab уводит фокус из поля — не перехватываем.
       if (event.key === 'Tab') return;
 
@@ -258,8 +269,14 @@ export function useSegmentedMask({
         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?.();
@@ -297,11 +314,6 @@ export function useSegmentedMask({
       if (event.key === 'Enter') {
         tryToComplete();
         emit();
-        return;
-      }
-      if (/^\d$/.test(event.key)) {
-        typeDigit(slot, event.key);
-        emit();
       }
     },
     [
@@ -318,22 +330,16 @@ export function useSegmentedMask({
       onEscape,
       prevSlot,
       readonly,
+      resetTyped,
       selectSlot,
       slotFromIndex,
       tryToComplete,
-      typeDigit,
     ],
   );
 
-  // Вставка (Ctrl+V) полной строки даты/времени: вытаскиваем цифры и заполняем сегменты
-  // слева направо. Нативный onChange у поля игнорируется (движок controlled), поэтому без
-  // этого обработчика вставка не работала бы вовсе.
-  const handlePaste = useCallback(
-    (event: ClipboardEvent<HTMLInputElement>) => {
-      if (readonly || disabled) return;
-      event.preventDefault();
-      const digits = event.clipboardData.getData('text').replace(/\D/g, '');
-      if (!digits) return;
+  const fillFromDigits = useCallback(
+    (digits: string) => {
+      resetTyped();
       ensureMask();
 
       let cursor = 0;
@@ -352,10 +358,123 @@ export function useSegmentedMask({
       } else if (lastFilled) {
         selectSlot(nextSlot(lastFilled));
       }
+    },
+    [ensureMask, lastSlot, nextSlot, resetTyped, selectSlot, slots, tryToComplete, updateSlot],
+  );
+
+  const handlePaste = useCallback(
+    (event: ClipboardEvent<HTMLInputElement>) => {
+      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: string, text: string) => {
+      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();
     },
-    [disabled, emit, ensureMask, lastSlot, nextSlot, readonly, selectSlot, slots, tryToComplete, updateSlot],
+    [clearSlot, emit, fillFromDigits, inputRef, onEdit, resetTyped, slotFromIndex, typeDigit],
+  );
+
+  // Композицию IME браузер не даёт отменить — откатываем её в input.
+  const pendingEditRef = useRef<{ value: string; start: number; end: number } | null>(null);
+
+  const handleBeforeInput = useCallback(
+    (event: InputEvent) => {
+      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: 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();
+    },
+    [applyEdit, disabled, emit, fillFromDigits, inputRef, mask, readonly, setValue],
+  );
+
+  // React 18 не отдаёт `inputType` в `onBeforeInput`, поэтому слушаем нативные события.
+  const onNativeBeforeInput = useEventHandler(handleBeforeInput);
+  const onNativeInput = useEventHandler(handleInput);
+  const attachedInputRef = useRef<HTMLInputElement | null>(null);
+  const nativeInputRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      /* 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, selectSlot, firstSlot, lastSlot };
+  return {
+    handleKeyDown,
+    handleClick,
+    handleFocus,
+    handleBlur,
+    handlePaste,
+    nativeInputRef,
+    selectSlot,
+    firstSlot,
+    lastSlot,
+  };
 }