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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-fields",
-  "version": "2.2.3-preview-a42433ce.0",
+  "version": "2.2.3-preview-f436e22b.0",
   "description": "Поля ввода с единой обёрткой label/caption/hint/error и общими осями size/validationState — текст, пароль, число, ползунок, дата, время, выбор, цвет.",
   "repository": {
     "type": "git",
@@ -42,17 +42,17 @@
     "@cloud-ru/ds-adaptive": "1.0.1",
     "@cloud-ru/ds-bottom-sheet": "1.1.1",
     "@cloud-ru/ds-button": "1.0.2",
+    "@cloud-ru/ds-calendar": "1.0.15-preview-f436e22b.0",
     "@cloud-ru/ds-color-picker": "1.0.6",
-    "@cloud-ru/ds-calendar": "1.0.15-preview-a42433ce.0",
     "@cloud-ru/ds-divider": "1.0.1",
     "@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-loader": "1.0.1",
-    "@cloud-ru/ds-list": "2.1.4-preview-a42433ce.0",
-    "@cloud-ru/ds-scroll": "1.0.2",
     "@cloud-ru/ds-materials": "1.0.1",
+    "@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",

package/src/components/FieldDate/FieldDate.tsx

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

package/src/components/FieldDate/mask.ts

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

package/src/segments/useSegmentedMask.ts

@@ -1,19 +1,6 @@
-import { useEventHandler } from '@cloud-ru/ds-utils';
 import { ClipboardEvent, KeyboardEvent, MouseEvent, RefObject, useCallback, useRef } from 'react';
 
-import { SegmentKey, SlotMeta } from './segments';
-
-const RESET_TYPED_KEYS = new Set([
-  'ArrowLeft',
-  'ArrowRight',
-  'ArrowUp',
-  'ArrowDown',
-  'Backspace',
-  'Delete',
-  'Enter',
-  'Tab',
-  'Escape',
-]);
+import { SlotMeta } from './segments';
 
 type UseSegmentedMaskParams = {
   inputRef: RefObject<HTMLInputElement | null>;
@@ -45,7 +32,6 @@ type UseSegmentedMaskParams = {
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
- * `nativeInputRef` передаётся в `ref` того же input'а: значение правится через нативные `beforeinput`/`input`.
  */
 export function useSegmentedMask({
   inputRef,
@@ -188,72 +174,74 @@ 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 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;
-      }
+      const isTheLastInput = /^0+$/.test(text) && maxLength === 2 && digit === 0;
 
-      typedRef.current = null;
-      if (accepted) checkInputAndGoNext(slot);
+      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);
+      }
     },
-    [checkInputAndGoNext, updateSlot],
+    [checkInputAndGoNext, getSlotText, updateSlot],
   );
 
   const handleFocus = useCallback(() => {
     if (readonly || disabled) return;
-    resetTyped();
     ensureMask();
     // На фокус всегда выбираем ПЕРВЫЙ сегмент (паритет с легаси). При клике мышью `handleClick`
     // отработает следом и перевыберет сегмент под кареткой; при Tab остаётся первый.
     selectSlot(firstSlot);
-  }, [disabled, ensureMask, firstSlot, readonly, resetTyped, selectSlot]);
+  }, [disabled, ensureMask, firstSlot, readonly, selectSlot]);
 
   const handleClick = useCallback(
     (event: MouseEvent<HTMLInputElement>) => {
       if (readonly || disabled) return;
-      resetTyped();
       ensureMask();
       selectSlot(slotFromIndex(event.currentTarget.selectionStart));
     },
-    [disabled, ensureMask, readonly, resetTyped, selectSlot, slotFromIndex],
+    [disabled, ensureMask, readonly, selectSlot, slotFromIndex],
   );
 
   const handleBlur = useCallback(() => {
-    resetTyped();
     const input = inputRef.current;
     if (input && input.value === mask) {
       input.value = '';
       setValue('');
     }
-  }, [inputRef, mask, resetTyped, setValue]);
+  }, [inputRef, mask, 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;
 
@@ -270,14 +258,8 @@ 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?.();
@@ -315,6 +297,11 @@ export function useSegmentedMask({
       if (event.key === 'Enter') {
         tryToComplete();
         emit();
+        return;
+      }
+      if (/^\d$/.test(event.key)) {
+        typeDigit(slot, event.key);
+        emit();
       }
     },
     [
@@ -331,16 +318,22 @@ export function useSegmentedMask({
       onEscape,
       prevSlot,
       readonly,
-      resetTyped,
       selectSlot,
       slotFromIndex,
       tryToComplete,
+      typeDigit,
     ],
   );
 
-  const fillFromDigits = useCallback(
-    (digits: string) => {
-      resetTyped();
+  // Вставка (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;
       ensureMask();
 
       let cursor = 0;
@@ -359,123 +352,10 @@ 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();
     },
-    [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],
+    [disabled, emit, ensureMask, lastSlot, nextSlot, readonly, selectSlot, slots, tryToComplete, updateSlot],
   );
 
-  return {
-    handleKeyDown,
-    handleClick,
-    handleFocus,
-    handleBlur,
-    handlePaste,
-    nativeInputRef,
-    selectSlot,
-    firstSlot,
-    lastSlot,
-  };
+  return { handleKeyDown, handleClick, handleFocus, handleBlur, handlePaste, selectSlot, firstSlot, lastSlot };
 }