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

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

@@ -29,9 +29,7 @@ type UseSegmentedMaskParams = {
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
- *
- * Навигация идёт через `handleKeyDown`, правка значения — через нативные `beforeinput`/`input`:
- * `nativeInputRef` нужно передать в `ref` того же input'а.
+ * `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;

package/dist/cjs/segments/useSegmentedMask.js

@@ -18,9 +18,7 @@ const RESET_TYPED_KEYS = new Set([
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
- *
- * Навигация идёт через `handleKeyDown`, правка значения — через нативные `beforeinput`/`input`:
- * `nativeInputRef` нужно передать в `ref` того же input'а.
+ * `nativeInputRef` передаётся в `ref` того же input'а: значение правится через нативные `beforeinput`/`input`.
  */
 function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue, onMaskedChange, onArrowDown, onArrowUp, onEscape, onEdit, }) {
     const firstSlot = slots[0];
@@ -125,8 +123,7 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         }
         selectSlot(nextSlot(slot));
     }, [clearSlot, isValidDate, lastSlot, nextSlot, selectSlot, slots, tryToComplete]);
-    // Цифры, набранные в текущий сегмент. Храним отдельно от текста: по `01` в поле нельзя понять,
-    // набрали `1` или `0` + `1`, а от этого зависит, ждать ли вторую цифру.
+    // Цифры сегмента храним отдельно от текста: по `01` в поле не отличить `1` от `0` + `1`.
     const typedRef = (0, react_1.useRef)(null);
     const resetTyped = (0, react_1.useCallback)(() => {
         typedRef.current = null;
@@ -135,12 +132,11 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         const maxLength = slot.max.toString().length;
         const prev = typedRef.current?.key === slot.key ? typedRef.current.digits : '';
         const appended = prev + key;
-        // Цифра выводит сегмент за max — сегмент начинается с неё заново (как React Aria и MUI X): `13` в месяце → `03`.
+        // Как в 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;
-        // Значение ниже min (`0` в дне) не показываем, но помним цифру до следующей.
         const accepted = value >= slot.min;
         if (accepted)
             updateSlot(slot, value);
@@ -180,7 +176,6 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         const input = inputRef.current;
         if (!input || readonly || disabled)
             return;
-        // Навигация и правка начинают набор сегмента заново. Цифры, `Unidentified` (Android) и модификаторы — нет.
         if (RESET_TYPED_KEYS.has(event.key))
             resetTyped();
         // Tab уводит фокус из поля — не перехватываем.
@@ -197,11 +192,11 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
             onArrowUp?.();
             return;
         }
-        // Сочетания (копирование, вставка, выделение) отдаём браузеру: правку поля перехватит beforeinput.
+        // Копирование и вставку не блокируем: правку поля перехватит beforeinput.
         if (event.ctrlKey || event.metaKey || event.altKey)
             return;
         onEdit?.();
-        // Цифры и `Unidentified` (экранные клавиатуры Android, IME) вводятся через beforeinput.
+        // Экранные клавиатуры присылают `Unidentified` вместо цифры, её данные есть только в beforeinput.
         if (/^\d$/.test(event.key) || event.key === 'Unidentified')
             return;
         if (event.key === 'Escape') {
@@ -258,7 +253,6 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         slotFromIndex,
         tryToComplete,
     ]);
-    // Раскладывает цифры по сегментам слева направо полными кусками — для вставки и автозаполнения.
     const fillFromDigits = (0, react_1.useCallback)((digits) => {
         resetTyped();
         ensureMask();
@@ -280,8 +274,6 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
             selectSlot(nextSlot(lastFilled));
         }
     }, [ensureMask, lastSlot, nextSlot, resetTyped, selectSlot, slots, tryToComplete, updateSlot]);
-    // Вставка (Ctrl+V) полной строки даты/времени. Нативный onChange у поля игнорируется (движок
-    // controlled), поэтому без этого обработчика вставка не работала бы вовсе.
     const handlePaste = (0, react_1.useCallback)((event) => {
         if (readonly || disabled)
             return;
@@ -306,7 +298,7 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         const digits = text.replace(/\D/g, '');
         if (!inputType.startsWith('insert') || !digits)
             return;
-        // Строка целиком (автозаполнение, `fill`, drop) раскладывается с начала маски, одиночная цифра — в текущий сегмент.
+        // Автозаполнение, `fill` и drop присылают строку целиком.
         if (text.length > 1) {
             fillFromDigits(digits);
         }
@@ -315,7 +307,7 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         }
         emit();
     }, [clearSlot, emit, fillFromDigits, inputRef, onEdit, resetTyped, slotFromIndex, typeDigit]);
-    // Значение и выделение до правки, которую браузер не дал отменить (композиция IME).
+    // Композицию IME браузер не даёт отменить — откатываем её в input.
     const pendingEditRef = (0, react_1.useRef)(null);
     const handleBeforeInput = (0, react_1.useCallback)((event) => {
         const input = inputRef.current;
@@ -336,18 +328,17 @@ function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue,
         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);
-            // Цифру из композиции IME применит её фиксация (отменяемый insertText), как в React Aria.
+            // Цифру композиции вводит её фиксация (insertText), иначе цифра запишется дважды.
             if (!inputType.includes('Composition'))
                 applyEdit(inputType, inserted);
             return;
         }
-        // Значение сменили без beforeinput (автозаполнение браузера).
+        // Автозаполнение меняет значение без beforeinput.
         const digits = input.value.replace(/\D/g, '');
         input.value = mask;
         setValue(mask);

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

@@ -29,9 +29,7 @@ type UseSegmentedMaskParams = {
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
- *
- * Навигация идёт через `handleKeyDown`, правка значения — через нативные `beforeinput`/`input`:
- * `nativeInputRef` нужно передать в `ref` того же input'а.
+ * `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;

package/dist/esm/segments/useSegmentedMask.js

@@ -15,9 +15,7 @@ const RESET_TYPED_KEYS = new Set([
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
- *
- * Навигация идёт через `handleKeyDown`, правка значения — через нативные `beforeinput`/`input`:
- * `nativeInputRef` нужно передать в `ref` того же input'а.
+ * `nativeInputRef` передаётся в `ref` того же input'а: значение правится через нативные `beforeinput`/`input`.
  */
 export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue, onMaskedChange, onArrowDown, onArrowUp, onEscape, onEdit, }) {
     const firstSlot = slots[0];
@@ -122,8 +120,7 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         }
         selectSlot(nextSlot(slot));
     }, [clearSlot, isValidDate, lastSlot, nextSlot, selectSlot, slots, tryToComplete]);
-    // Цифры, набранные в текущий сегмент. Храним отдельно от текста: по `01` в поле нельзя понять,
-    // набрали `1` или `0` + `1`, а от этого зависит, ждать ли вторую цифру.
+    // Цифры сегмента храним отдельно от текста: по `01` в поле не отличить `1` от `0` + `1`.
     const typedRef = useRef(null);
     const resetTyped = useCallback(() => {
         typedRef.current = null;
@@ -132,12 +129,11 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         const maxLength = slot.max.toString().length;
         const prev = typedRef.current?.key === slot.key ? typedRef.current.digits : '';
         const appended = prev + key;
-        // Цифра выводит сегмент за max — сегмент начинается с неё заново (как React Aria и MUI X): `13` в месяце → `03`.
+        // Как в 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;
-        // Значение ниже min (`0` в дне) не показываем, но помним цифру до следующей.
         const accepted = value >= slot.min;
         if (accepted)
             updateSlot(slot, value);
@@ -177,7 +173,6 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         const input = inputRef.current;
         if (!input || readonly || disabled)
             return;
-        // Навигация и правка начинают набор сегмента заново. Цифры, `Unidentified` (Android) и модификаторы — нет.
         if (RESET_TYPED_KEYS.has(event.key))
             resetTyped();
         // Tab уводит фокус из поля — не перехватываем.
@@ -194,11 +189,11 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
             onArrowUp?.();
             return;
         }
-        // Сочетания (копирование, вставка, выделение) отдаём браузеру: правку поля перехватит beforeinput.
+        // Копирование и вставку не блокируем: правку поля перехватит beforeinput.
         if (event.ctrlKey || event.metaKey || event.altKey)
             return;
         onEdit?.();
-        // Цифры и `Unidentified` (экранные клавиатуры Android, IME) вводятся через beforeinput.
+        // Экранные клавиатуры присылают `Unidentified` вместо цифры, её данные есть только в beforeinput.
         if (/^\d$/.test(event.key) || event.key === 'Unidentified')
             return;
         if (event.key === 'Escape') {
@@ -255,7 +250,6 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         slotFromIndex,
         tryToComplete,
     ]);
-    // Раскладывает цифры по сегментам слева направо полными кусками — для вставки и автозаполнения.
     const fillFromDigits = useCallback((digits) => {
         resetTyped();
         ensureMask();
@@ -277,8 +271,6 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
             selectSlot(nextSlot(lastFilled));
         }
     }, [ensureMask, lastSlot, nextSlot, resetTyped, selectSlot, slots, tryToComplete, updateSlot]);
-    // Вставка (Ctrl+V) полной строки даты/времени. Нативный onChange у поля игнорируется (движок
-    // controlled), поэтому без этого обработчика вставка не работала бы вовсе.
     const handlePaste = useCallback((event) => {
         if (readonly || disabled)
             return;
@@ -303,7 +295,7 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         const digits = text.replace(/\D/g, '');
         if (!inputType.startsWith('insert') || !digits)
             return;
-        // Строка целиком (автозаполнение, `fill`, drop) раскладывается с начала маски, одиночная цифра — в текущий сегмент.
+        // Автозаполнение, `fill` и drop присылают строку целиком.
         if (text.length > 1) {
             fillFromDigits(digits);
         }
@@ -312,7 +304,7 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         }
         emit();
     }, [clearSlot, emit, fillFromDigits, inputRef, onEdit, resetTyped, slotFromIndex, typeDigit]);
-    // Значение и выделение до правки, которую браузер не дал отменить (композиция IME).
+    // Композицию IME браузер не даёт отменить — откатываем её в input.
     const pendingEditRef = useRef(null);
     const handleBeforeInput = useCallback((event) => {
         const input = inputRef.current;
@@ -333,18 +325,17 @@ export function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, se
         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);
-            // Цифру из композиции IME применит её фиксация (отменяемый insertText), как в React Aria.
+            // Цифру композиции вводит её фиксация (insertText), иначе цифра запишется дважды.
             if (!inputType.includes('Composition'))
                 applyEdit(inputType, inserted);
             return;
         }
-        // Значение сменили без beforeinput (автозаполнение браузера).
+        // Автозаполнение меняет значение без beforeinput.
         const digits = input.value.replace(/\D/g, '');
         input.value = mask;
         setValue(mask);