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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-fields",
-  "version": "2.2.3-preview-7425cb27.0",
+  "version": "2.2.3-preview-8025692f.0",
   "description": "Поля ввода с единой обёрткой label/caption/hint/error и общими осями size/validationState — текст, пароль, число, ползунок, дата, время, выбор, цвет.",
   "repository": {
     "type": "git",
@@ -39,24 +39,24 @@
     "classnames": "^2.5.1",
     "merge-refs": "^2.0.0",
     "react-textarea-autosize": "^8.5.9",
-    "@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.14",
+    "@cloud-ru/ds-adaptive": "1.0.1",
     "@cloud-ru/ds-color-picker": "1.0.6",
+    "@cloud-ru/ds-calendar": "1.0.15-preview-8025692f.0",
     "@cloud-ru/ds-divider": "1.0.1",
+    "@cloud-ru/ds-dropdown": "1.0.8",
+    "@cloud-ru/ds-button": "1.0.2",
     "@cloud-ru/ds-field-decorator": "1.0.5",
     "@cloud-ru/ds-icons": "1.1.0",
-    "@cloud-ru/ds-list": "2.1.3",
-    "@cloud-ru/ds-dropdown": "1.0.8",
+    "@cloud-ru/ds-list": "2.1.4-preview-8025692f.0",
     "@cloud-ru/ds-input-private": "1.0.4",
     "@cloud-ru/ds-loader": "1.0.1",
     "@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",
+    "@cloud-ru/ds-skeleton": "1.0.1",
     "@cloud-ru/ds-tooltip": "1.0.4",
+    "@cloud-ru/ds-tag": "1.1.1",
     "@cloud-ru/ds-utils": "1.1.0"
   }
 }

package/src/segments/useSegmentedMask.ts

@@ -45,9 +45,7 @@ type UseSegmentedMaskParams = {
  * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
  * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
  * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
- *
- * Навигация идёт через `handleKeyDown`, правка значения — через нативные `beforeinput`/`input`:
- * `nativeInputRef` нужно передать в `ref` того же input'а.
+ * `nativeInputRef` передаётся в `ref` того же input'а: значение правится через нативные `beforeinput`/`input`.
  */
 export function useSegmentedMask({
   inputRef,
@@ -190,8 +188,7 @@ export function useSegmentedMask({
     [clearSlot, isValidDate, lastSlot, nextSlot, selectSlot, slots, tryToComplete],
   );
 
-  // Цифры, набранные в текущий сегмент. Храним отдельно от текста: по `01` в поле нельзя понять,
-  // набрали `1` или `0` + `1`, а от этого зависит, ждать ли вторую цифру.
+  // Цифры сегмента храним отдельно от текста: по `01` в поле не отличить `1` от `0` + `1`.
   const typedRef = useRef<{ key: SegmentKey; digits: string } | null>(null);
   const resetTyped = useCallback(() => {
     typedRef.current = null;
@@ -202,12 +199,11 @@ export function useSegmentedMask({
       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);
@@ -256,7 +252,6 @@ export function useSegmentedMask({
       const input = inputRef.current;
       if (!input || readonly || disabled) return;
 
-      // Навигация и правка начинают набор сегмента заново. Цифры, `Unidentified` (Android) и модификаторы — нет.
       if (RESET_TYPED_KEYS.has(event.key)) resetTyped();
 
       // Tab уводит фокус из поля — не перехватываем.
@@ -275,12 +270,12 @@ export function useSegmentedMask({
         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') {
@@ -343,7 +338,6 @@ export function useSegmentedMask({
     ],
   );
 
-  // Раскладывает цифры по сегментам слева направо полными кусками — для вставки и автозаполнения.
   const fillFromDigits = useCallback(
     (digits: string) => {
       resetTyped();
@@ -369,8 +363,6 @@ export function useSegmentedMask({
     [ensureMask, lastSlot, nextSlot, resetTyped, selectSlot, slots, tryToComplete, updateSlot],
   );
 
-  // Вставка (Ctrl+V) полной строки даты/времени. Нативный onChange у поля игнорируется (движок
-  // controlled), поэтому без этого обработчика вставка не работала бы вовсе.
   const handlePaste = useCallback(
     (event: ClipboardEvent<HTMLInputElement>) => {
       if (readonly || disabled) return;
@@ -399,7 +391,7 @@ export function useSegmentedMask({
       const digits = text.replace(/\D/g, '');
       if (!inputType.startsWith('insert') || !digits) return;
 
-      // Строка целиком (автозаполнение, `fill`, drop) раскладывается с начала маски, одиночная цифра — в текущий сегмент.
+      // Автозаполнение, `fill` и drop присылают строку целиком.
       if (text.length > 1) {
         fillFromDigits(digits);
       } else {
@@ -410,7 +402,7 @@ export function useSegmentedMask({
     [clearSlot, emit, fillFromDigits, inputRef, onEdit, resetTyped, slotFromIndex, typeDigit],
   );
 
-  // Значение и выделение до правки, которую браузер не дал отменить (композиция IME).
+  // Композицию IME браузер не даёт отменить — откатываем её в input.
   const pendingEditRef = useRef<{ value: string; start: number; end: number } | null>(null);
 
   const handleBeforeInput = useCallback(
@@ -438,18 +430,17 @@ export function useSegmentedMask({
       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);