@skbkontur/react-ui 6.1.7-65057.0 → 6.1.7-8e9d5.0

package/components/TimePicker/hooks/useTimePickerSource.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { sanitizeTimeItems } from '../helpers/TimePicker.value.js';
 /** Общая пустая коллекция элементов: не создает новую ссылку на каждый рендер. */
 var EMPTY_ITEMS = [];
@@ -6,7 +6,7 @@ var EMPTY_ITEMS = [];
  * Отдает элементы выпадающего списка из массива или функции-источника.
  *
  * Функция вызывается только для открытого меню и на каждый новый запрос;
- * ответ на устаревший запрос отбрасывается, а отказ трактуется как пустой результат.
+ * ответ на устаревший запрос отбрасывается, а отказ можно повторить через `retry`.
  * При закрытии меню результаты функции сбрасываются, чтобы следующее открытие
  * не показывало элементы для старого запроса.
  * Замена самой функции уже открытый список не перезапрашивает: актуальная функция
@@ -18,33 +18,39 @@ export var useTimePickerSource = function (options) {
     var _a = useState([]), fetchedItems = _a[0], setFetchedItems = _a[1];
     var _b = useState(null), fetchedQuery = _b[0], setFetchedQuery = _b[1];
     var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
+    var _d = useState(false), isFailed = _d[0], setIsFailed = _d[1];
+    var _e = useState(0), requestVersion = _e[0], setRequestVersion = _e[1];
     var sourceRef = useRef(source);
     sourceRef.current = source;
     useEffect(function () {
         var currentSource = sourceRef.current;
         if (typeof currentSource !== 'function' || !isDropdownOpened) {
             setIsLoading(false);
+            setIsFailed(false);
             return;
         }
         var cancelled = false;
         setIsLoading(true);
+        setIsFailed(false);
         new Promise(function (resolve) { return resolve(currentSource(filterQuery)); }).then(function (nextItems) {
             if (!cancelled) {
                 setFetchedItems(nextItems);
                 setFetchedQuery(filterQuery);
                 setIsLoading(false);
+                setIsFailed(false);
             }
         }, function () {
             if (!cancelled) {
                 setFetchedItems([]);
-                setFetchedQuery(filterQuery);
+                setFetchedQuery(null);
                 setIsLoading(false);
+                setIsFailed(true);
             }
         });
         return function () {
             cancelled = true;
         };
-    }, [filterQuery, isDropdownOpened, isSourceFunction]);
+    }, [filterQuery, isDropdownOpened, isSourceFunction, requestVersion]);
     useEffect(function () {
         if (isDropdownOpened || !isSourceFunction) {
             return;
@@ -52,8 +58,10 @@ export var useTimePickerSource = function (options) {
         setFetchedItems(EMPTY_ITEMS);
         setFetchedQuery(null);
     }, [isDropdownOpened, isSourceFunction]);
-    var sourceItems = useMemo(function () { return (Array.isArray(source) ? source : EMPTY_ITEMS); }, [source]);
+    // Ссылка стабильна и без мемоизации: у массива это он сам, у функции — общая пустая коллекция.
+    var sourceItems = Array.isArray(source) ? source : EMPTY_ITEMS;
     var items = useMemo(function () { return sanitizeTimeItems(isSourceFunction ? fetchedItems : sourceItems, format); }, [fetchedItems, format, isSourceFunction, sourceItems]);
-    return { items: items, fetchedQuery: fetchedQuery, isLoading: isLoading };
+    var retry = useCallback(function () { return setRequestVersion(function (version) { return version + 1; }); }, []);
+    return { items: items, fetchedQuery: fetchedQuery, isLoading: isLoading, isFailed: isFailed, retry: retry };
 };
 //# sourceMappingURL=useTimePickerSource.js.map

package/components/TimePicker/hooks/useTimePickerSource.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTimePickerSource.js","sourceRoot":"","sources":["useTimePickerSource.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport type {\n  TimeFormat,\n  TimeItemValue,\n  TimePickerExtendedItem,\n  TimePickerSource,\n} from '../helpers/TimePicker.shared.js';\nimport { sanitizeTimeItems } from '../helpers/TimePicker.value.js';\n\n/** Общая пустая коллекция элементов: не создает новую ссылку на каждый рендер. */\nconst EMPTY_ITEMS: never[] = [];\n\ninterface UseTimePickerSourceOptions<T extends TimeItemValue> {\n  source?: TimePickerSource<T>;\n  format: TimeFormat;\n  isDropdownOpened: boolean;\n  /** Текущий запрос: введенные цифры сегментов с сохранением их позиций. */\n  filterQuery: string;\n}\n\ninterface UseTimePickerSourceResult<T extends TimeItemValue> {\n  /** Элементы источника, готовые к фильтрации и отрисовке. */\n  items: Array<TimePickerExtendedItem<T>>;\n  /** Запрос, для которого получены текущие элементы функции-источника. */\n  fetchedQuery: string | null;\n  isLoading: boolean;\n}\n\n/**\n * Отдает элементы выпадающего списка из массива или функции-источника.\n *\n * Функция вызывается только для открытого меню и на каждый новый запрос;\n * ответ на устаревший запрос отбрасывается, а отказ трактуется как пустой результат.\n * При закрытии меню результаты функции сбрасываются, чтобы следующее открытие\n * не показывало элементы для старого запроса.\n * Замена самой функции уже открытый список не перезапрашивает: актуальная функция\n * используется при следующем запросе.\n */\nexport const useTimePickerSource = <T extends TimeItemValue>(\n  options: UseTimePickerSourceOptions<T>,\n): UseTimePickerSourceResult<T> => {\n  const { source, format, isDropdownOpened, filterQuery } = options;\n\n  const isSourceFunction = typeof source === 'function';\n\n  const [fetchedItems, setFetchedItems] = useState<Array<TimePickerExtendedItem<T>>>([]);\n  const [fetchedQuery, setFetchedQuery] = useState<string | null>(null);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const sourceRef = useRef(source);\n  sourceRef.current = source;\n\n  useEffect(() => {\n    const currentSource = sourceRef.current;\n\n    if (typeof currentSource !== 'function' || !isDropdownOpened) {\n      setIsLoading(false);\n      return;\n    }\n\n    let cancelled = false;\n\n    setIsLoading(true);\n\n    new Promise<Array<TimePickerExtendedItem<T>>>((resolve) => resolve(currentSource(filterQuery))).then(\n      (nextItems) => {\n        if (!cancelled) {\n          setFetchedItems(nextItems);\n          setFetchedQuery(filterQuery);\n          setIsLoading(false);\n        }\n      },\n      () => {\n        if (!cancelled) {\n          setFetchedItems([]);\n          setFetchedQuery(filterQuery);\n          setIsLoading(false);\n        }\n      },\n    );\n\n    return () => {\n      cancelled = true;\n    };\n  }, [filterQuery, isDropdownOpened, isSourceFunction]);\n\n  useEffect(() => {\n    if (isDropdownOpened || !isSourceFunction) {\n      return;\n    }\n\n    setFetchedItems(EMPTY_ITEMS);\n    setFetchedQuery(null);\n  }, [isDropdownOpened, isSourceFunction]);\n\n  const sourceItems = useMemo(() => (Array.isArray(source) ? source : EMPTY_ITEMS), [source]);\n\n  const items = useMemo(\n    () => sanitizeTimeItems(isSourceFunction ? fetchedItems : sourceItems, format),\n    [fetchedItems, format, isSourceFunction, sourceItems],\n  );\n\n  return { items, fetchedQuery, isLoading };\n};\n"]}
+{"version":3,"file":"useTimePickerSource.js","sourceRoot":"","sources":["useTimePickerSource.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport type {\n  TimeFormat,\n  TimeItemValue,\n  TimePickerExtendedItem,\n  TimePickerSource,\n} from '../helpers/TimePicker.shared.js';\nimport { sanitizeTimeItems } from '../helpers/TimePicker.value.js';\n\n/** Общая пустая коллекция элементов: не создает новую ссылку на каждый рендер. */\nconst EMPTY_ITEMS: never[] = [];\n\ninterface UseTimePickerSourceOptions<T extends TimeItemValue> {\n  source?: TimePickerSource<T>;\n  format: TimeFormat;\n  isDropdownOpened: boolean;\n  /** Текущий запрос: введенные цифры сегментов с сохранением их позиций. */\n  filterQuery: string;\n}\n\ninterface UseTimePickerSourceResult<T extends TimeItemValue> {\n  /** Элементы источника, готовые к фильтрации и отрисовке. */\n  items: Array<TimePickerExtendedItem<T>>;\n  /** Запрос, для которого получены текущие элементы функции-источника. */\n  fetchedQuery: string | null;\n  isLoading: boolean;\n  isFailed: boolean;\n  retry: () => void;\n}\n\n/**\n * Отдает элементы выпадающего списка из массива или функции-источника.\n *\n * Функция вызывается только для открытого меню и на каждый новый запрос;\n * ответ на устаревший запрос отбрасывается, а отказ можно повторить через `retry`.\n * При закрытии меню результаты функции сбрасываются, чтобы следующее открытие\n * не показывало элементы для старого запроса.\n * Замена самой функции уже открытый список не перезапрашивает: актуальная функция\n * используется при следующем запросе.\n */\nexport const useTimePickerSource = <T extends TimeItemValue>(\n  options: UseTimePickerSourceOptions<T>,\n): UseTimePickerSourceResult<T> => {\n  const { source, format, isDropdownOpened, filterQuery } = options;\n\n  const isSourceFunction = typeof source === 'function';\n\n  const [fetchedItems, setFetchedItems] = useState<Array<TimePickerExtendedItem<T>>>([]);\n  const [fetchedQuery, setFetchedQuery] = useState<string | null>(null);\n  const [isLoading, setIsLoading] = useState(false);\n  const [isFailed, setIsFailed] = useState(false);\n  const [requestVersion, setRequestVersion] = useState(0);\n\n  const sourceRef = useRef(source);\n  sourceRef.current = source;\n\n  useEffect(() => {\n    const currentSource = sourceRef.current;\n\n    if (typeof currentSource !== 'function' || !isDropdownOpened) {\n      setIsLoading(false);\n      setIsFailed(false);\n      return;\n    }\n\n    let cancelled = false;\n\n    setIsLoading(true);\n    setIsFailed(false);\n\n    new Promise<Array<TimePickerExtendedItem<T>>>((resolve) => resolve(currentSource(filterQuery))).then(\n      (nextItems) => {\n        if (!cancelled) {\n          setFetchedItems(nextItems);\n          setFetchedQuery(filterQuery);\n          setIsLoading(false);\n          setIsFailed(false);\n        }\n      },\n      () => {\n        if (!cancelled) {\n          setFetchedItems([]);\n          setFetchedQuery(null);\n          setIsLoading(false);\n          setIsFailed(true);\n        }\n      },\n    );\n\n    return () => {\n      cancelled = true;\n    };\n  }, [filterQuery, isDropdownOpened, isSourceFunction, requestVersion]);\n\n  useEffect(() => {\n    if (isDropdownOpened || !isSourceFunction) {\n      return;\n    }\n\n    setFetchedItems(EMPTY_ITEMS);\n    setFetchedQuery(null);\n  }, [isDropdownOpened, isSourceFunction]);\n\n  // Ссылка стабильна и без мемоизации: у массива это он сам, у функции — общая пустая коллекция.\n  const sourceItems = Array.isArray(source) ? source : EMPTY_ITEMS;\n\n  const items = useMemo(\n    () => sanitizeTimeItems(isSourceFunction ? fetchedItems : sourceItems, format),\n    [fetchedItems, format, isSourceFunction, sourceItems],\n  );\n\n  const retry = useCallback(() => setRequestVersion((version) => version + 1), []);\n\n  return { items, fetchedQuery, isLoading, isFailed, retry };\n};\n"]}

package/components/TimePicker/hooks/useTimePickerValue.d.ts

@@ -21,13 +21,18 @@ interface UseTimePickerValueOptions {
 interface UseTimePickerValueResult {
     editingValue: string;
     editingValueRef: RefObject<string>;
-    setEditingValue(value: string): void;
+    /**
+     * Последнее закоммиченное время в нормализованной форме.
+     * Правка значения его не меняет, поэтому в меню отмечено выбранным именно значение поля,
+     * а не время, которое пользователь набирает.
+     */
+    committedValue: string;
     updateEditingValue(value: string): void;
-    commitEditingValue(): string;
+    commitEditingValue(): void;
     /** Коммитит значение, введенное пользователем. Не эмитит повторно то же самое время. */
-    commitValue(value: string, item?: TimeItemValue | null): string;
+    commitValue(value: string, item?: TimeItemValue | null): void;
     /** Коммитит элемент, выбранный в выпадающем меню. Эмитит всегда, так как это явное действие пользователя. */
-    commitItem(item: TimeItemValue): string;
+    commitItem(item: TimeItemValue): void;
 }
 export declare const useTimePickerValue: (options: UseTimePickerValueOptions) => UseTimePickerValueResult;
 export {};

package/components/TimePicker/hooks/useTimePickerValue.js

@@ -1,28 +1,24 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import warning from 'warning';
-import { EMPTY_VALUE } from '../helpers/TimePicker.constants.js';
 import { getTimeItemValue } from '../helpers/TimePicker.shared.js';
-import { getExternalTimeDisplayValue, isTimeDisplayEmpty, normalizeTimeValue, serializeTimeValue, } from '../helpers/TimePicker.value.js';
+import { getExternalTimeDisplayValue, normalizeTimeValue, serializeTimeValue } from '../helpers/TimePicker.value.js';
 export var useTimePickerValue = function (options) {
     var externalValue = options.externalValue, isValueControlled = options.isValueControlled, format = options.format, isInputFocused = options.isInputFocused, onCommitValue = options.onCommitValue, onInputValueChange = options.onInputValueChange;
     var externalEditingValue = getExternalTimeDisplayValue(externalValue, format);
     var _a = useState(externalEditingValue), editingValue = _a[0], setEditingValueState = _a[1];
+    var _b = useState(function () { return normalizeTimeValue(externalValue, format); }), committedValue = _b[0], setCommittedValue = _b[1];
     var editingValueRef = useRef(editingValue);
+    /** Последнее значение, отданное в `onInputValueChange`, — как есть, без нормализации. */
     var emittedInputValueRef = useRef(externalValue);
-    var emittedValueRef = useRef(externalValue);
-    var lastEmittedValueRef = useRef(externalValue);
     /**
-     * Синхронизирует счетчики отданных значений с внешним значением.
-     * Коммит сравнивает время в нормализованной форме, поэтому счетчик закоммиченного значения хранит ее:
-     * иначе внешнее `9:00` или `09:00:00` в формате `HH:mm` выглядело бы как изменение
-     * и поле коммитило бы его заново, собирая элемент вместо исходного.
-     * Остальные счетчики хранят значение как есть: с ними сравнивают частичное значение и то,
-     * что вернул родитель.
+     * Последнее закоммиченное время в нормализованной форме.
+     * Форма именно нормализованная, иначе внешнее `9:00` или `09:00:00` в формате `HH:mm`
+     * выглядело бы как изменение и поле коммитило бы его заново, собирая элемент вместо исходного.
      */
+    var emittedValueRef = useRef(externalValue);
     var syncEmittedValues = useCallback(function (nextValue) {
         emittedInputValueRef.current = nextValue;
         emittedValueRef.current = normalizeTimeValue(nextValue, format);
-        lastEmittedValueRef.current = nextValue;
     }, [format]);
     var setEditingValue = useCallback(function (nextEditingValue) {
         editingValueRef.current = nextEditingValue;
@@ -31,14 +27,12 @@ export var useTimePickerValue = function (options) {
     var emitInputValue = useCallback(function (nextValue) {
         if (emittedInputValueRef.current !== nextValue) {
             emittedInputValueRef.current = nextValue;
-            lastEmittedValueRef.current = nextValue;
             onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange(nextValue);
         }
     }, [onInputValueChange]);
     var emitValue = useCallback(function (nextValue, item) {
         emittedInputValueRef.current = nextValue;
         emittedValueRef.current = nextValue;
-        lastEmittedValueRef.current = nextValue;
         onCommitValue(nextValue, item);
     }, [onCommitValue]);
     var updateEditingValue = useCallback(function (nextEditingValue) {
@@ -49,23 +43,19 @@ export var useTimePickerValue = function (options) {
         if (item === void 0) { item = null; }
         var normalizedValue = normalizeTimeValue(nextValue, format);
         setEditingValue(normalizedValue);
+        setCommittedValue(normalizedValue);
         if (emittedValueRef.current !== normalizedValue) {
             emitValue(normalizedValue, item);
         }
-        return normalizedValue;
     }, [emitValue, format, setEditingValue]);
     var commitItem = useCallback(function (item) {
         var normalizedValue = normalizeTimeValue(getTimeItemValue(item), format);
         setEditingValue(normalizedValue);
+        setCommittedValue(normalizedValue);
         emitValue(normalizedValue, item);
-        return normalizedValue;
     }, [emitValue, format, setEditingValue]);
     var commitEditingValue = useCallback(function () {
-        var currentEditingValue = editingValueRef.current;
-        if (isTimeDisplayEmpty(currentEditingValue)) {
-            return commitValue(EMPTY_VALUE);
-        }
-        return commitValue(currentEditingValue);
+        commitValue(editingValueRef.current);
     }, [commitValue, editingValueRef]);
     var initialIsValueControlledRef = useRef(isValueControlled);
     useEffect(function () {
@@ -79,15 +69,24 @@ export var useTimePickerValue = function (options) {
         if (!isValueControlled) {
             return;
         }
-        if (!isInputFocused || externalValue !== lastEmittedValueRef.current) {
+        if (!isInputFocused || externalValue !== emittedInputValueRef.current) {
             setEditingValue(externalEditingValue);
         }
+        setCommittedValue(normalizeTimeValue(externalValue, format));
         syncEmittedValues(externalValue);
-    }, [externalEditingValue, externalValue, isInputFocused, isValueControlled, setEditingValue, syncEmittedValues]);
+    }, [
+        externalEditingValue,
+        externalValue,
+        format,
+        isInputFocused,
+        isValueControlled,
+        setEditingValue,
+        syncEmittedValues,
+    ]);
     return {
         editingValue: editingValue,
         editingValueRef: editingValueRef,
-        setEditingValue: setEditingValue,
+        committedValue: committedValue,
         updateEditingValue: updateEditingValue,
         commitEditingValue: commitEditingValue,
         commitValue: commitValue,

package/components/TimePicker/hooks/useTimePickerValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTimePickerValue.js","sourceRoot":"","sources":["useTimePickerValue.ts"],"names":[],"mappings":"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","sourcesContent":["import type { RefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport warning from 'warning';\n\nimport { EMPTY_VALUE } from '../helpers/TimePicker.constants.js';\nimport { getTimeItemValue, type TimeFormat, type TimeItemValue } from '../helpers/TimePicker.shared.js';\nimport {\n  getExternalTimeDisplayValue,\n  isTimeDisplayEmpty,\n  normalizeTimeValue,\n  serializeTimeValue,\n} from '../helpers/TimePicker.value.js';\n\ninterface UseTimePickerValueOptions {\n  isInputFocused: boolean;\n  /** Внешнее значение, приведенное к строке времени. */\n  externalValue: string;\n  /**\n   * Значением управляет родитель: проп `value` задан.\n   * Если проп не задан, компонент неконтролируемый и хранит значение сам,\n   * поэтому внешнее пустое значение не должно затирать введенное пользователем.\n   */\n  isValueControlled: boolean;\n  format: TimeFormat;\n  /**\n   * Вызывается при коммите значения: получает нормализованное время\n   * и элемент из `source`, если значение выбрано в выпадающем меню.\n   */\n  onCommitValue(value: string, item: TimeItemValue | null): void;\n  onInputValueChange?(value: string): void;\n}\n\ninterface UseTimePickerValueResult {\n  editingValue: string;\n  editingValueRef: RefObject<string>;\n  setEditingValue(value: string): void;\n  updateEditingValue(value: string): void;\n  commitEditingValue(): string;\n  /** Коммитит значение, введенное пользователем. Не эмитит повторно то же самое время. */\n  commitValue(value: string, item?: TimeItemValue | null): string;\n  /** Коммитит элемент, выбранный в выпадающем меню. Эмитит всегда, так как это явное действие пользователя. */\n  commitItem(item: TimeItemValue): string;\n}\n\nexport const useTimePickerValue = (options: UseTimePickerValueOptions): UseTimePickerValueResult => {\n  const { externalValue, isValueControlled, format, isInputFocused, onCommitValue, onInputValueChange } = options;\n\n  const externalEditingValue = getExternalTimeDisplayValue(externalValue, format);\n\n  const [editingValue, setEditingValueState] = useState<string>(externalEditingValue);\n\n  const editingValueRef = useRef(editingValue);\n  const emittedInputValueRef = useRef(externalValue);\n  const emittedValueRef = useRef(externalValue);\n  const lastEmittedValueRef = useRef(externalValue);\n\n  /**\n   * Синхронизирует счетчики отданных значений с внешним значением.\n   * Коммит сравнивает время в нормализованной форме, поэтому счетчик закоммиченного значения хранит ее:\n   * иначе внешнее `9:00` или `09:00:00` в формате `HH:mm` выглядело бы как изменение\n   * и поле коммитило бы его заново, собирая элемент вместо исходного.\n   * Остальные счетчики хранят значение как есть: с ними сравнивают частичное значение и то,\n   * что вернул родитель.\n   */\n  const syncEmittedValues = useCallback(\n    (nextValue: string) => {\n      emittedInputValueRef.current = nextValue;\n      emittedValueRef.current = normalizeTimeValue(nextValue, format);\n      lastEmittedValueRef.current = nextValue;\n    },\n    [format],\n  );\n\n  const setEditingValue = useCallback((nextEditingValue: string) => {\n    editingValueRef.current = nextEditingValue;\n    setEditingValueState(nextEditingValue);\n  }, []);\n\n  const emitInputValue = useCallback(\n    (nextValue: string) => {\n      if (emittedInputValueRef.current !== nextValue) {\n        emittedInputValueRef.current = nextValue;\n        lastEmittedValueRef.current = nextValue;\n        onInputValueChange?.(nextValue);\n      }\n    },\n    [onInputValueChange],\n  );\n\n  const emitValue = useCallback(\n    (nextValue: string, item: TimeItemValue | null) => {\n      emittedInputValueRef.current = nextValue;\n      emittedValueRef.current = nextValue;\n      lastEmittedValueRef.current = nextValue;\n      onCommitValue(nextValue, item);\n    },\n    [onCommitValue],\n  );\n\n  const updateEditingValue = useCallback(\n    (nextEditingValue: string) => {\n      setEditingValue(nextEditingValue);\n      emitInputValue(serializeTimeValue(nextEditingValue, format));\n    },\n    [emitInputValue, format, setEditingValue],\n  );\n\n  const commitValue = useCallback(\n    (nextValue: string, item: TimeItemValue | null = null): string => {\n      const normalizedValue = normalizeTimeValue(nextValue, format);\n\n      setEditingValue(normalizedValue);\n\n      if (emittedValueRef.current !== normalizedValue) {\n        emitValue(normalizedValue, item);\n      }\n\n      return normalizedValue;\n    },\n    [emitValue, format, setEditingValue],\n  );\n\n  const commitItem = useCallback(\n    (item: TimeItemValue): string => {\n      const normalizedValue = normalizeTimeValue(getTimeItemValue(item), format);\n\n      setEditingValue(normalizedValue);\n      emitValue(normalizedValue, item);\n\n      return normalizedValue;\n    },\n    [emitValue, format, setEditingValue],\n  );\n\n  const commitEditingValue = useCallback((): string => {\n    const currentEditingValue = editingValueRef.current;\n\n    if (isTimeDisplayEmpty(currentEditingValue)) {\n      return commitValue(EMPTY_VALUE);\n    }\n\n    return commitValue(currentEditingValue);\n  }, [commitValue, editingValueRef]);\n\n  const initialIsValueControlledRef = useRef(isValueControlled);\n\n  useEffect(() => {\n    warning(\n      initialIsValueControlledRef.current === isValueControlled,\n      isValueControlled\n        ? '[TimePicker]: a component is changing an uncontrolled value to be controlled. ' +\n            'Decide between using a controlled or uncontrolled value for the lifetime of the component.'\n        : '[TimePicker]: a component is changing a controlled value to be uncontrolled. ' +\n            'Pass an empty string or null instead of undefined to keep the value controlled.',\n    );\n  }, [isValueControlled]);\n\n  useEffect(() => {\n    if (!isValueControlled) {\n      return;\n    }\n\n    if (!isInputFocused || externalValue !== lastEmittedValueRef.current) {\n      setEditingValue(externalEditingValue);\n    }\n\n    syncEmittedValues(externalValue);\n  }, [externalEditingValue, externalValue, isInputFocused, isValueControlled, setEditingValue, syncEmittedValues]);\n\n  return {\n    editingValue,\n    editingValueRef,\n    setEditingValue,\n    updateEditingValue,\n    commitEditingValue,\n    commitValue,\n    commitItem,\n  };\n};\n"]}
+{"version":3,"file":"useTimePickerValue.js","sourceRoot":"","sources":["useTimePickerValue.ts"],"names":[],"mappings":"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","sourcesContent":["import type { RefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport warning from 'warning';\n\nimport { getTimeItemValue, type TimeFormat, type TimeItemValue } from '../helpers/TimePicker.shared.js';\nimport { getExternalTimeDisplayValue, normalizeTimeValue, serializeTimeValue } from '../helpers/TimePicker.value.js';\n\ninterface UseTimePickerValueOptions {\n  isInputFocused: boolean;\n  /** Внешнее значение, приведенное к строке времени. */\n  externalValue: string;\n  /**\n   * Значением управляет родитель: проп `value` задан.\n   * Если проп не задан, компонент неконтролируемый и хранит значение сам,\n   * поэтому внешнее пустое значение не должно затирать введенное пользователем.\n   */\n  isValueControlled: boolean;\n  format: TimeFormat;\n  /**\n   * Вызывается при коммите значения: получает нормализованное время\n   * и элемент из `source`, если значение выбрано в выпадающем меню.\n   */\n  onCommitValue(value: string, item: TimeItemValue | null): void;\n  onInputValueChange?(value: string): void;\n}\n\ninterface UseTimePickerValueResult {\n  editingValue: string;\n  editingValueRef: RefObject<string>;\n  /**\n   * Последнее закоммиченное время в нормализованной форме.\n   * Правка значения его не меняет, поэтому в меню отмечено выбранным именно значение поля,\n   * а не время, которое пользователь набирает.\n   */\n  committedValue: string;\n  updateEditingValue(value: string): void;\n  commitEditingValue(): void;\n  /** Коммитит значение, введенное пользователем. Не эмитит повторно то же самое время. */\n  commitValue(value: string, item?: TimeItemValue | null): void;\n  /** Коммитит элемент, выбранный в выпадающем меню. Эмитит всегда, так как это явное действие пользователя. */\n  commitItem(item: TimeItemValue): void;\n}\n\nexport const useTimePickerValue = (options: UseTimePickerValueOptions): UseTimePickerValueResult => {\n  const { externalValue, isValueControlled, format, isInputFocused, onCommitValue, onInputValueChange } = options;\n\n  const externalEditingValue = getExternalTimeDisplayValue(externalValue, format);\n\n  const [editingValue, setEditingValueState] = useState<string>(externalEditingValue);\n  const [committedValue, setCommittedValue] = useState<string>(() => normalizeTimeValue(externalValue, format));\n\n  const editingValueRef = useRef(editingValue);\n  /** Последнее значение, отданное в `onInputValueChange`, — как есть, без нормализации. */\n  const emittedInputValueRef = useRef(externalValue);\n  /**\n   * Последнее закоммиченное время в нормализованной форме.\n   * Форма именно нормализованная, иначе внешнее `9:00` или `09:00:00` в формате `HH:mm`\n   * выглядело бы как изменение и поле коммитило бы его заново, собирая элемент вместо исходного.\n   */\n  const emittedValueRef = useRef(externalValue);\n\n  const syncEmittedValues = useCallback(\n    (nextValue: string) => {\n      emittedInputValueRef.current = nextValue;\n      emittedValueRef.current = normalizeTimeValue(nextValue, format);\n    },\n    [format],\n  );\n\n  const setEditingValue = useCallback((nextEditingValue: string) => {\n    editingValueRef.current = nextEditingValue;\n    setEditingValueState(nextEditingValue);\n  }, []);\n\n  const emitInputValue = useCallback(\n    (nextValue: string) => {\n      if (emittedInputValueRef.current !== nextValue) {\n        emittedInputValueRef.current = nextValue;\n        onInputValueChange?.(nextValue);\n      }\n    },\n    [onInputValueChange],\n  );\n\n  const emitValue = useCallback(\n    (nextValue: string, item: TimeItemValue | null) => {\n      emittedInputValueRef.current = nextValue;\n      emittedValueRef.current = nextValue;\n      onCommitValue(nextValue, item);\n    },\n    [onCommitValue],\n  );\n\n  const updateEditingValue = useCallback(\n    (nextEditingValue: string) => {\n      setEditingValue(nextEditingValue);\n      emitInputValue(serializeTimeValue(nextEditingValue, format));\n    },\n    [emitInputValue, format, setEditingValue],\n  );\n\n  const commitValue = useCallback(\n    (nextValue: string, item: TimeItemValue | null = null) => {\n      const normalizedValue = normalizeTimeValue(nextValue, format);\n\n      setEditingValue(normalizedValue);\n      setCommittedValue(normalizedValue);\n\n      if (emittedValueRef.current !== normalizedValue) {\n        emitValue(normalizedValue, item);\n      }\n    },\n    [emitValue, format, setEditingValue],\n  );\n\n  const commitItem = useCallback(\n    (item: TimeItemValue) => {\n      const normalizedValue = normalizeTimeValue(getTimeItemValue(item), format);\n\n      setEditingValue(normalizedValue);\n      setCommittedValue(normalizedValue);\n      emitValue(normalizedValue, item);\n    },\n    [emitValue, format, setEditingValue],\n  );\n\n  const commitEditingValue = useCallback(() => {\n    commitValue(editingValueRef.current);\n  }, [commitValue, editingValueRef]);\n\n  const initialIsValueControlledRef = useRef(isValueControlled);\n\n  useEffect(() => {\n    warning(\n      initialIsValueControlledRef.current === isValueControlled,\n      isValueControlled\n        ? '[TimePicker]: a component is changing an uncontrolled value to be controlled. ' +\n            'Decide between using a controlled or uncontrolled value for the lifetime of the component.'\n        : '[TimePicker]: a component is changing a controlled value to be uncontrolled. ' +\n            'Pass an empty string or null instead of undefined to keep the value controlled.',\n    );\n  }, [isValueControlled]);\n\n  useEffect(() => {\n    if (!isValueControlled) {\n      return;\n    }\n\n    if (!isInputFocused || externalValue !== emittedInputValueRef.current) {\n      setEditingValue(externalEditingValue);\n    }\n\n    setCommittedValue(normalizeTimeValue(externalValue, format));\n    syncEmittedValues(externalValue);\n  }, [\n    externalEditingValue,\n    externalValue,\n    format,\n    isInputFocused,\n    isValueControlled,\n    setEditingValue,\n    syncEmittedValues,\n  ]);\n\n  return {\n    editingValue,\n    editingValueRef,\n    committedValue,\n    updateEditingValue,\n    commitEditingValue,\n    commitValue,\n    commitItem,\n  };\n};\n"]}

package/components/TimePicker/index.d.ts

@@ -1,4 +1,4 @@
 export * from './TimePicker.js';
 export { TimePickerDataTids } from './helpers/TimePicker.constants.js';
 export type { TimePickerValidationOptions } from './helpers/validateTimePicker.js';
-export type { TimeFormat, TimeSegment, TimeItem, TimeItemValue, TimePickerExtendedItem, TimePickerMenuItem, TimePickerResolvedItem, TimePickerSource, TimePickerValue, TimePickerValueToItem, } from './helpers/TimePicker.shared.js';
+export type { TimeFormat, TimeSegment, TimeItem, TimeItemValue, TimePickerExtendedItem, TimePickerMenuElement, TimePickerMenuItem, TimePickerResolvedItem, TimePickerSource, TimePickerValue, TimePickerValueToItem, } from './helpers/TimePicker.shared.js';

package/components/TimePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC","sourcesContent":["export * from './TimePicker.js';\nexport { TimePickerDataTids } from './helpers/TimePicker.constants.js';\nexport type { TimePickerValidationOptions } from './helpers/validateTimePicker.js';\nexport type {\n  TimeFormat,\n  TimeSegment,\n  TimeItem,\n  TimeItemValue,\n  TimePickerExtendedItem,\n  TimePickerMenuItem,\n  TimePickerResolvedItem,\n  TimePickerSource,\n  TimePickerValue,\n  TimePickerValueToItem,\n} from './helpers/TimePicker.shared.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC","sourcesContent":["export * from './TimePicker.js';\nexport { TimePickerDataTids } from './helpers/TimePicker.constants.js';\nexport type { TimePickerValidationOptions } from './helpers/validateTimePicker.js';\nexport type {\n  TimeFormat,\n  TimeSegment,\n  TimeItem,\n  TimeItemValue,\n  TimePickerExtendedItem,\n  TimePickerMenuElement,\n  TimePickerMenuItem,\n  TimePickerResolvedItem,\n  TimePickerSource,\n  TimePickerValue,\n  TimePickerValueToItem,\n} from './helpers/TimePicker.shared.js';\n"]}

package/components/TimePicker/locale/locales/en.js

@@ -1,5 +1,7 @@
 export var componentsLocales = {
     ariaPlaceholderHHMM: 'hh:mm',
     ariaPlaceholderHHMMSS: 'hh:mm:ss',
+    errorNetworkButton: 'Refresh',
+    errorNetworkMessage: 'Something went wrong. Check your internet connection and try again',
 };
 //# sourceMappingURL=en.js.map

package/components/TimePicker/locale/locales/en.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.js","sourceRoot":"","sources":["en.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,iBAAiB,GAAqB;IACjD,mBAAmB,EAAE,OAAO;IAC5B,qBAAqB,EAAE,UAAU;CAClC,CAAC","sourcesContent":["import type { TimePickerLocale } from '../types.js';\n\nexport const componentsLocales: TimePickerLocale = {\n  ariaPlaceholderHHMM: 'hh:mm',\n  ariaPlaceholderHHMMSS: 'hh:mm:ss',\n};\n"]}
+{"version":3,"file":"en.js","sourceRoot":"","sources":["en.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,iBAAiB,GAAqB;IACjD,mBAAmB,EAAE,OAAO;IAC5B,qBAAqB,EAAE,UAAU;IACjC,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EAAE,oEAAoE;CAC1F,CAAC","sourcesContent":["import type { TimePickerLocale } from '../types.js';\n\nexport const componentsLocales: TimePickerLocale = {\n  ariaPlaceholderHHMM: 'hh:mm',\n  ariaPlaceholderHHMMSS: 'hh:mm:ss',\n  errorNetworkButton: 'Refresh',\n  errorNetworkMessage: 'Something went wrong. Check your internet connection and try again',\n};\n"]}

package/components/TimePicker/locale/locales/ru.js

@@ -1,5 +1,7 @@
 export var componentsLocales = {
     ariaPlaceholderHHMM: 'чч:мм',
     ariaPlaceholderHHMMSS: 'чч:мм:сс',
+    errorNetworkButton: 'Обновить',
+    errorNetworkMessage: 'Что-то пошло не так. Проверьте соединение с интернетом и попробуйте еще раз',
 };
 //# sourceMappingURL=ru.js.map

package/components/TimePicker/locale/locales/ru.js.map

@@ -1 +1 @@
-{"version":3,"file":"ru.js","sourceRoot":"","sources":["ru.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,iBAAiB,GAAqB;IACjD,mBAAmB,EAAE,OAAO;IAC5B,qBAAqB,EAAE,UAAU;CAClC,CAAC","sourcesContent":["import type { TimePickerLocale } from '../types.js';\n\nexport const componentsLocales: TimePickerLocale = {\n  ariaPlaceholderHHMM: 'чч:мм',\n  ariaPlaceholderHHMMSS: 'чч:мм:сс',\n};\n"]}
+{"version":3,"file":"ru.js","sourceRoot":"","sources":["ru.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,iBAAiB,GAAqB;IACjD,mBAAmB,EAAE,OAAO;IAC5B,qBAAqB,EAAE,UAAU;IACjC,kBAAkB,EAAE,UAAU;IAC9B,mBAAmB,EAAE,6EAA6E;CACnG,CAAC","sourcesContent":["import type { TimePickerLocale } from '../types.js';\n\nexport const componentsLocales: TimePickerLocale = {\n  ariaPlaceholderHHMM: 'чч:мм',\n  ariaPlaceholderHHMMSS: 'чч:мм:сс',\n  errorNetworkButton: 'Обновить',\n  errorNetworkMessage: 'Что-то пошло не так. Проверьте соединение с интернетом и попробуйте еще раз',\n};\n"]}

package/components/TimePicker/locale/types.d.ts

@@ -1,4 +1,6 @@
 export interface TimePickerLocale {
     ariaPlaceholderHHMM: string;
     ariaPlaceholderHHMMSS: string;
+    errorNetworkButton: string;
+    errorNetworkMessage: string;
 }

package/components/TimePicker/locale/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TimePickerLocale {\n  ariaPlaceholderHHMM: string;\n  ariaPlaceholderHHMMSS: string;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TimePickerLocale {\n  ariaPlaceholderHHMM: string;\n  ariaPlaceholderHHMMSS: string;\n  errorNetworkButton: string;\n  errorNetworkMessage: string;\n}\n"]}

package/internal/NativeTimeInput/NativeTimeInput.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { TimeFormat } from '../../components/TimePicker/index.js';
 import type { Nullable } from '../../typings/utility-types.js';
 export interface NativeTimeInputProps {
@@ -8,9 +9,12 @@ export interface NativeTimeInputProps {
     minTime?: Nullable<string>;
     maxTime?: Nullable<string>;
     onValueChange?(value: string): void;
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
 }
 export interface NativeTimeInputRef {
     focus(): void;
+    blur(): void;
     click(): void;
+    getNode(): HTMLInputElement | null;
 }
 export declare const NativeTimeInput: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<NativeTimeInputRef, NativeTimeInputProps> & Record<never, never>;

package/internal/NativeTimeInput/NativeTimeInput.js

@@ -5,7 +5,7 @@ import { getJsStyles } from './NativeTimeInput.styles.js';
 import { getDefaultMaxTime, getDefaultMinTime, getNativeTimeStep, getTimeForComponent, getTimeForNative, } from './NativeTimeInput.utils.js';
 export var NativeTimeInput = forwardRefAndName('NativeTimeInput', function (props, ref) {
     var _a;
-    var value = props.value, minTime = props.minTime, maxTime = props.maxTime, format = props.format, disabled = props.disabled, onValueChange = props.onValueChange, dataTid = props["data-tid"];
+    var value = props.value, minTime = props.minTime, maxTime = props.maxTime, format = props.format, disabled = props.disabled, onValueChange = props.onValueChange, onBlur = props.onBlur, dataTid = props["data-tid"];
     var jsStyles = getJsStyles(useEmotion());
     var inputRef = useRef(null);
     useImperativeHandle(ref, function () { return ({
@@ -13,12 +13,17 @@ export var NativeTimeInput = forwardRefAndName('NativeTimeInput', function (prop
             var _a;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         },
+        blur: function () {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        },
         click: function () {
             var _a;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
         },
+        getNode: function () { return inputRef.current; },
     }); }, []);
-    return (React.createElement("input", { type: 'time', "data-tid": dataTid, ref: inputRef, disabled: disabled, className: jsStyles.inputTypeTime(), tabIndex: -1, step: getNativeTimeStep(format), min: minTime ? getTimeForNative(minTime, format) : getDefaultMinTime(format), max: maxTime ? getTimeForNative(maxTime, format) : getDefaultMaxTime(format), value: (_a = getTimeForNative(value, format)) !== null && _a !== void 0 ? _a : '', onChange: function (event) {
+    return (React.createElement("input", { type: 'time', "data-tid": dataTid, ref: inputRef, disabled: disabled, className: jsStyles.inputTypeTime(), tabIndex: -1, step: getNativeTimeStep(format), min: minTime ? getTimeForNative(minTime, format) : getDefaultMinTime(format), max: maxTime ? getTimeForNative(maxTime, format) : getDefaultMaxTime(format), value: (_a = getTimeForNative(value, format)) !== null && _a !== void 0 ? _a : '', onBlur: onBlur, onChange: function (event) {
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(getTimeForComponent(event.target.value, format));
         } }));
 });

package/internal/NativeTimeInput/NativeTimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeTimeInput.js","sourceRoot":"","sources":["NativeTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAiBpC,MAAM,CAAC,IAAM,eAAe,GAAG,iBAAiB,CAC9C,iBAAiB,EACjB,UAAC,KAAK,EAAE,GAAG;;IACD,IAAA,KAAK,GAA6E,KAAK,MAAlF,EAAE,OAAO,GAAoE,KAAK,QAAzE,EAAE,OAAO,GAA2D,KAAK,QAAhE,EAAE,MAAM,GAAmD,KAAK,OAAxD,EAAE,QAAQ,GAAyC,KAAK,SAA9C,EAAE,aAAa,GAA0B,KAAK,cAA/B,EAAc,OAAO,GAAK,KAAK,YAAV,CAAW;IAEhG,IAAM,QAAQ,GAAG,WAAW,CAAC,UAAU,EAAE,CAAC,CAAC;IAC3C,IAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAEvD,mBAAmB,CACjB,GAAG,EACH,cAAM,OAAA,CAAC;QACL,KAAK;;YACH,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC5B,CAAC;QACD,KAAK;;YACH,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC5B,CAAC;KACF,CAAC,EAPI,CAOJ,EACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL,+BACE,IAAI,EAAE,MAAM,cACF,OAAO,EACjB,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,QAAQ,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAC/B,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAC5E,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAC5E,KAAK,EAAE,MAAA,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,mCAAI,EAAE,EAC5C,QAAQ,EAAE,UAAC,KAAK;YACd,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;QACnE,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React, { useImperativeHandle, useRef } from 'react';\n\nimport type { TimeFormat } from '../../components/TimePicker/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion } from '../../lib/renderEnvironment/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getJsStyles } from './NativeTimeInput.styles.js';\nimport {\n  getDefaultMaxTime,\n  getDefaultMinTime,\n  getNativeTimeStep,\n  getTimeForComponent,\n  getTimeForNative,\n} from './NativeTimeInput.utils.js';\n\nexport interface NativeTimeInputProps {\n  'data-tid'?: string;\n  disabled?: boolean;\n  format: TimeFormat;\n  value: Nullable<string>;\n  minTime?: Nullable<string>;\n  maxTime?: Nullable<string>;\n  onValueChange?(value: string): void;\n}\n\nexport interface NativeTimeInputRef {\n  focus(): void;\n  click(): void;\n}\n\nexport const NativeTimeInput = forwardRefAndName<NativeTimeInputRef, NativeTimeInputProps>(\n  'NativeTimeInput',\n  (props, ref) => {\n    const { value, minTime, maxTime, format, disabled, onValueChange, 'data-tid': dataTid } = props;\n\n    const jsStyles = getJsStyles(useEmotion());\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        focus() {\n          inputRef.current?.focus();\n        },\n        click() {\n          inputRef.current?.click();\n        },\n      }),\n      [],\n    );\n\n    return (\n      <input\n        type={'time'}\n        data-tid={dataTid}\n        ref={inputRef}\n        disabled={disabled}\n        className={jsStyles.inputTypeTime()}\n        tabIndex={-1}\n        step={getNativeTimeStep(format)}\n        min={minTime ? getTimeForNative(minTime, format) : getDefaultMinTime(format)}\n        max={maxTime ? getTimeForNative(maxTime, format) : getDefaultMaxTime(format)}\n        value={getTimeForNative(value, format) ?? ''}\n        onChange={(event) => {\n          onValueChange?.(getTimeForComponent(event.target.value, format));\n        }}\n      />\n    );\n  },\n);\n"]}
+{"version":3,"file":"NativeTimeInput.js","sourceRoot":"","sources":["NativeTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAoBpC,MAAM,CAAC,IAAM,eAAe,GAAG,iBAAiB,CAC9C,iBAAiB,EACjB,UAAC,KAAK,EAAE,GAAG;;IACD,IAAA,KAAK,GAAqF,KAAK,MAA1F,EAAE,OAAO,GAA4E,KAAK,QAAjF,EAAE,OAAO,GAAmE,KAAK,QAAxE,EAAE,MAAM,GAA2D,KAAK,OAAhE,EAAE,QAAQ,GAAiD,KAAK,SAAtD,EAAE,aAAa,GAAkC,KAAK,cAAvC,EAAE,MAAM,GAA0B,KAAK,OAA/B,EAAc,OAAO,GAAK,KAAK,YAAV,CAAW;IAExG,IAAM,QAAQ,GAAG,WAAW,CAAC,UAAU,EAAE,CAAC,CAAC;IAC3C,IAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAEvD,mBAAmB,CACjB,GAAG,EACH,cAAM,OAAA,CAAC;QACL,KAAK;;YACH,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC5B,CAAC;QACD,IAAI;;YACF,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;QAC3B,CAAC;QACD,KAAK;;YACH,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC5B,CAAC;QACD,OAAO,EAAE,cAAM,OAAA,QAAQ,CAAC,OAAO,EAAhB,CAAgB;KAChC,CAAC,EAXI,CAWJ,EACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL,+BACE,IAAI,EAAE,MAAM,cACF,OAAO,EACjB,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,QAAQ,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAC/B,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAC5E,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAC5E,KAAK,EAAE,MAAA,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,mCAAI,EAAE,EAC5C,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,UAAC,KAAK;YACd,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;QACnE,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React, { useImperativeHandle, useRef } from 'react';\n\nimport type { TimeFormat } from '../../components/TimePicker/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion } from '../../lib/renderEnvironment/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getJsStyles } from './NativeTimeInput.styles.js';\nimport {\n  getDefaultMaxTime,\n  getDefaultMinTime,\n  getNativeTimeStep,\n  getTimeForComponent,\n  getTimeForNative,\n} from './NativeTimeInput.utils.js';\n\nexport interface NativeTimeInputProps {\n  'data-tid'?: string;\n  disabled?: boolean;\n  format: TimeFormat;\n  value: Nullable<string>;\n  minTime?: Nullable<string>;\n  maxTime?: Nullable<string>;\n  onValueChange?(value: string): void;\n  onBlur?(event: React.FocusEvent<HTMLInputElement>): void;\n}\n\nexport interface NativeTimeInputRef {\n  focus(): void;\n  blur(): void;\n  click(): void;\n  getNode(): HTMLInputElement | null;\n}\n\nexport const NativeTimeInput = forwardRefAndName<NativeTimeInputRef, NativeTimeInputProps>(\n  'NativeTimeInput',\n  (props, ref) => {\n    const { value, minTime, maxTime, format, disabled, onValueChange, onBlur, 'data-tid': dataTid } = props;\n\n    const jsStyles = getJsStyles(useEmotion());\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        focus() {\n          inputRef.current?.focus();\n        },\n        blur() {\n          inputRef.current?.blur();\n        },\n        click() {\n          inputRef.current?.click();\n        },\n        getNode: () => inputRef.current,\n      }),\n      [],\n    );\n\n    return (\n      <input\n        type={'time'}\n        data-tid={dataTid}\n        ref={inputRef}\n        disabled={disabled}\n        className={jsStyles.inputTypeTime()}\n        tabIndex={-1}\n        step={getNativeTimeStep(format)}\n        min={minTime ? getTimeForNative(minTime, format) : getDefaultMinTime(format)}\n        max={maxTime ? getTimeForNative(maxTime, format) : getDefaultMaxTime(format)}\n        value={getTimeForNative(value, format) ?? ''}\n        onBlur={onBlur}\n        onChange={(event) => {\n          onValueChange?.(getTimeForComponent(event.target.value, format));\n        }}\n      />\n    );\n  },\n);\n"]}

package/internal/NativeTimeInput/NativeTimeInput.utils.d.ts

@@ -1,6 +1,8 @@
 import type { TimeFormat } from '../../components/TimePicker/index.js';
 import type { Nullable } from '../../typings/utility-types.js';
+/** Приводит время компонента к форме нативного инпута. Пустое значение отдается как отсутствующее. */
 export declare const getTimeForNative: (componentTime: Nullable<string>, format: TimeFormat) => string | undefined;
+/** Приводит время нативного инпута к форме компонента. Пустое значение отдается пустой строкой. */
 export declare const getTimeForComponent: (nativeTime: Nullable<string>, format: TimeFormat) => string;
 export declare const getDefaultMinTime: (format: TimeFormat) => string;
 export declare const getDefaultMaxTime: (format: TimeFormat) => string;

package/internal/NativeTimeInput/NativeTimeInput.utils.js

@@ -6,17 +6,13 @@ var normalizeNativeTime = function (value, format) {
     var normalizedTime = "".concat(padTimePart(hours), ":").concat(padTimePart(minutes), ":").concat(padTimePart(seconds));
     return format === 'HH:mm' ? normalizedTime.slice(0, 5) : normalizedTime;
 };
+/** Приводит время компонента к форме нативного инпута. Пустое значение отдается как отсутствующее. */
 export var getTimeForNative = function (componentTime, format) {
-    if (!componentTime) {
-        return undefined;
-    }
-    return normalizeNativeTime(componentTime, format);
+    return componentTime ? normalizeNativeTime(componentTime, format) : undefined;
 };
+/** Приводит время нативного инпута к форме компонента. Пустое значение отдается пустой строкой. */
 export var getTimeForComponent = function (nativeTime, format) {
-    if (!nativeTime) {
-        return '';
-    }
-    return normalizeNativeTime(nativeTime, format);
+    return nativeTime ? normalizeNativeTime(nativeTime, format) : '';
 };
 export var getDefaultMinTime = function (format) {
     return format === 'HH:mm' ? DEFAULT_NATIVE_MIN_TIME.slice(0, 5) : DEFAULT_NATIVE_MIN_TIME;

package/internal/NativeTimeInput/NativeTimeInput.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeTimeInput.utils.js","sourceRoot":"","sources":["NativeTimeInput.utils.ts"],"names":[],"mappings":"AAGA,IAAM,uBAAuB,GAAG,UAAU,CAAC;AAC3C,IAAM,uBAAuB,GAAG,UAAU,CAAC;AAE3C,IAAM,WAAW,GAAG,UAAC,KAAyB,IAAa,OAAA,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAhC,CAAgC,CAAC;AAE5F,IAAM,mBAAmB,GAAG,UAAC,KAAa,EAAE,MAAkB;IACtD,IAAA,KAA4B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,EAA3C,KAAK,QAAA,EAAE,OAAO,QAAA,EAAE,OAAO,QAAoB,CAAC;IAEnD,IAAM,cAAc,GAAG,UAAG,WAAW,CAAC,KAAK,CAAC,cAAI,WAAW,CAAC,OAAO,CAAC,cAAI,WAAW,CAAC,OAAO,CAAC,CAAE,CAAC;IAE/F,OAAO,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;AAC1E,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,aAA+B,EAAE,MAAkB;IAClF,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,mBAAmB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,UAA4B,EAAE,MAAkB;IAClF,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,mBAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB;IAClD,OAAA,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB;AAAlF,CAAkF,CAAC;AAErF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB;IAClD,OAAA,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB;AAAlF,CAAkF,CAAC;AAErF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB,IAAa,OAAA,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAA7B,CAA6B,CAAC","sourcesContent":["import type { TimeFormat } from '../../components/TimePicker/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\n\nconst DEFAULT_NATIVE_MIN_TIME = '00:00:00';\nconst DEFAULT_NATIVE_MAX_TIME = '23:59:59';\n\nconst padTimePart = (value: string | undefined): string => (value ?? '00').padStart(2, '0');\n\nconst normalizeNativeTime = (value: string, format: TimeFormat): string => {\n  const [hours, minutes, seconds] = value.split(':');\n\n  const normalizedTime = `${padTimePart(hours)}:${padTimePart(minutes)}:${padTimePart(seconds)}`;\n\n  return format === 'HH:mm' ? normalizedTime.slice(0, 5) : normalizedTime;\n};\n\nexport const getTimeForNative = (componentTime: Nullable<string>, format: TimeFormat): string | undefined => {\n  if (!componentTime) {\n    return undefined;\n  }\n\n  return normalizeNativeTime(componentTime, format);\n};\n\nexport const getTimeForComponent = (nativeTime: Nullable<string>, format: TimeFormat): string => {\n  if (!nativeTime) {\n    return '';\n  }\n\n  return normalizeNativeTime(nativeTime, format);\n};\n\nexport const getDefaultMinTime = (format: TimeFormat): string =>\n  format === 'HH:mm' ? DEFAULT_NATIVE_MIN_TIME.slice(0, 5) : DEFAULT_NATIVE_MIN_TIME;\n\nexport const getDefaultMaxTime = (format: TimeFormat): string =>\n  format === 'HH:mm' ? DEFAULT_NATIVE_MAX_TIME.slice(0, 5) : DEFAULT_NATIVE_MAX_TIME;\n\nexport const getNativeTimeStep = (format: TimeFormat): number => (format === 'HH:mm' ? 60 : 1);\n"]}
+{"version":3,"file":"NativeTimeInput.utils.js","sourceRoot":"","sources":["NativeTimeInput.utils.ts"],"names":[],"mappings":"AAGA,IAAM,uBAAuB,GAAG,UAAU,CAAC;AAC3C,IAAM,uBAAuB,GAAG,UAAU,CAAC;AAE3C,IAAM,WAAW,GAAG,UAAC,KAAyB,IAAa,OAAA,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAhC,CAAgC,CAAC;AAE5F,IAAM,mBAAmB,GAAG,UAAC,KAAa,EAAE,MAAkB;IACtD,IAAA,KAA4B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,EAA3C,KAAK,QAAA,EAAE,OAAO,QAAA,EAAE,OAAO,QAAoB,CAAC;IAEnD,IAAM,cAAc,GAAG,UAAG,WAAW,CAAC,KAAK,CAAC,cAAI,WAAW,CAAC,OAAO,CAAC,cAAI,WAAW,CAAC,OAAO,CAAC,CAAE,CAAC;IAE/F,OAAO,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;AAC1E,CAAC,CAAC;AAEF,sGAAsG;AACtG,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,aAA+B,EAAE,MAAkB;IAClF,OAAA,aAAa,CAAC,CAAC,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS;AAAtE,CAAsE,CAAC;AAEzE,mGAAmG;AACnG,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,UAA4B,EAAE,MAAkB;IAClF,OAAA,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;AAAzD,CAAyD,CAAC;AAE5D,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB;IAClD,OAAA,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB;AAAlF,CAAkF,CAAC;AAErF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB;IAClD,OAAA,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB;AAAlF,CAAkF,CAAC;AAErF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAkB,IAAa,OAAA,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAA7B,CAA6B,CAAC","sourcesContent":["import type { TimeFormat } from '../../components/TimePicker/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\n\nconst DEFAULT_NATIVE_MIN_TIME = '00:00:00';\nconst DEFAULT_NATIVE_MAX_TIME = '23:59:59';\n\nconst padTimePart = (value: string | undefined): string => (value ?? '00').padStart(2, '0');\n\nconst normalizeNativeTime = (value: string, format: TimeFormat): string => {\n  const [hours, minutes, seconds] = value.split(':');\n\n  const normalizedTime = `${padTimePart(hours)}:${padTimePart(minutes)}:${padTimePart(seconds)}`;\n\n  return format === 'HH:mm' ? normalizedTime.slice(0, 5) : normalizedTime;\n};\n\n/** Приводит время компонента к форме нативного инпута. Пустое значение отдается как отсутствующее. */\nexport const getTimeForNative = (componentTime: Nullable<string>, format: TimeFormat): string | undefined =>\n  componentTime ? normalizeNativeTime(componentTime, format) : undefined;\n\n/** Приводит время нативного инпута к форме компонента. Пустое значение отдается пустой строкой. */\nexport const getTimeForComponent = (nativeTime: Nullable<string>, format: TimeFormat): string =>\n  nativeTime ? normalizeNativeTime(nativeTime, format) : '';\n\nexport const getDefaultMinTime = (format: TimeFormat): string =>\n  format === 'HH:mm' ? DEFAULT_NATIVE_MIN_TIME.slice(0, 5) : DEFAULT_NATIVE_MIN_TIME;\n\nexport const getDefaultMaxTime = (format: TimeFormat): string =>\n  format === 'HH:mm' ? DEFAULT_NATIVE_MAX_TIME.slice(0, 5) : DEFAULT_NATIVE_MAX_TIME;\n\nexport const getNativeTimeStep = (format: TimeFormat): number => (format === 'HH:mm' ? 60 : 1);\n"]}

package/internal/TimeInput/TimeFragments.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import type { TimeFormat, TimeSegment } from '../../components/TimePicker/index.js';
 import type { SizeProp } from '../../lib/types/props.js';
 export interface TimeFragmentsRef {
-    isFragment(el: HTMLElement | EventTarget | null): boolean;
     getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;
     getRootNode(): HTMLSpanElement | null;
 }

package/internal/TimeInput/TimeFragments.js

@@ -5,6 +5,28 @@ import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
 import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { getStyles } from './TimeFragments.styles.js';
+var getEmptyPlaceholderClassName = function (styles, theme, size, format) {
+    if (format === 'HH:mm:ss') {
+        switch (size) {
+            case 'large':
+                return styles.emptyPlaceholderWithSecondsLarge(theme);
+            case 'medium':
+                return styles.emptyPlaceholderWithSecondsMedium(theme);
+            case 'small':
+            default:
+                return styles.emptyPlaceholderWithSecondsSmall(theme);
+        }
+    }
+    switch (size) {
+        case 'large':
+            return styles.emptyPlaceholderLarge(theme);
+        case 'medium':
+            return styles.emptyPlaceholderMedium(theme);
+        case 'small':
+        default:
+            return styles.emptyPlaceholderSmall(theme);
+    }
+};
 var getSeparatorSizeClassName = function (styles, theme, size) {
     switch (size) {
         case 'large':
@@ -17,12 +39,15 @@ var getSeparatorSizeClassName = function (styles, theme, size) {
     }
 };
 export var TimeFragments = forwardRefAndName('TimeFragments', function (props, ref) {
+    var _a;
     var value = props.value, format = props.format, size = props.size, onSelectSegment = props.onSelectSegment;
     var theme = useContext(ThemeContext);
     var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var rootRef = useRef(null);
-    var rootClassName = cx(styles.root(), styles.selected(theme));
+    var rootClassName = cx(styles.root(), styles.selected(theme), (_a = {},
+        _a[getEmptyPlaceholderClassName(styles, theme, size, format)] = !value,
+        _a));
     var maskClassName = styles.mask(theme);
     var separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);
     var getSegment = useCallback(function (el) {
@@ -36,14 +61,10 @@ export var TimeFragments = forwardRefAndName('TimeFragments', function (props, r
         var index = fragments.findIndex(function (fragment) { return fragment === el || fragment.contains(el); });
         return index >= 0 ? ((_a = segments[index]) !== null && _a !== void 0 ? _a : null) : null;
     }, [format]);
-    var isFragment = useCallback(function (el) {
-        return getSegment(el) !== null;
-    }, [getSegment]);
     useImperativeHandle(ref, function () { return ({
-        isFragment: isFragment,
         getSegment: getSegment,
         getRootNode: function () { return rootRef.current; },
-    }); }, [getSegment, isFragment]);
+    }); }, [getSegment]);
     var segments = getTimeSegments(format);
     var displaySegments = getDisplaySegments(value, format);
     return (React.createElement("span", { ref: rootRef, className: rootClassName }, value
@@ -61,9 +82,10 @@ export var TimeFragments = forwardRefAndName('TimeFragments', function (props, r
                     React.createElement("span", { className: maskClassName }, Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join(''))),
             ];
             if (index < segments.length - 1) {
-                nodes.push(React.createElement("span", { key: "separator-".concat(index), className: cx(maskClassName, styles.separator(), separatorSizeClassName, (_a = {},
+                nodes.push(React.createElement("span", { key: "separator-".concat(index), "data-separator": '', className: cx(maskClassName, styles.separator(), separatorSizeClassName, (_a = {},
                         _a[styles.separatorFilled()] = !segmentValue.includes(TIME_PLACEHOLDER_CHAR),
-                        _a)) }, TIME_SEPARATOR));
+                        _a)) },
+                    React.createElement("span", { "aria-hidden": true, className: styles.separatorText() }, TIME_SEPARATOR)));
             }
             return nodes;
         })

package/internal/TimeInput/TimeFragments.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeFragments.js","sourceRoot":"","sources":["TimeFragments.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';\n\nimport { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from '../../components/TimePicker/helpers/TimePicker.constants.js';\nimport { getDisplaySegments, getTimeSegments } from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport type { TimeFormat, TimeSegment } from '../../components/TimePicker/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { getStyles } from './TimeFragments.styles.js';\n\nexport interface TimeFragmentsRef {\n  isFragment(el: HTMLElement | EventTarget | null): boolean;\n  getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n  getRootNode(): HTMLSpanElement | null;\n}\n\nexport interface TimeFragmentsProps {\n  value: string;\n  format: TimeFormat;\n  size: SizeProp;\n\n  onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nconst getSeparatorSizeClassName = (styles: ReturnType<typeof getStyles>, theme: Theme, size: SizeProp): string => {\n  switch (size) {\n    case 'large':\n      return styles.separatorLarge(theme);\n    case 'medium':\n      return styles.separatorMedium(theme);\n    case 'small':\n    default:\n      return styles.separatorSmall(theme);\n  }\n};\n\nexport const TimeFragments = forwardRefAndName<TimeFragmentsRef, TimeFragmentsProps>('TimeFragments', (props, ref) => {\n  const { value, format, size, onSelectSegment } = props;\n\n  const theme = useContext(ThemeContext);\n\n  const { cx } = useEmotion();\n\n  const styles = useStyles(getStyles);\n\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const rootClassName = cx(styles.root(), styles.selected(theme));\n  const maskClassName = styles.mask(theme);\n  const separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);\n\n  const getSegment = useCallback(\n    (el: HTMLElement | EventTarget | null): TimeSegment | null => {\n      const rootNode = rootRef.current;\n\n      if (!rootNode || !el) {\n        return null;\n      }\n\n      const fragments: HTMLSpanElement[] = Array.from(rootNode.querySelectorAll('[data-fragment]'));\n      const segments = getTimeSegments(format);\n\n      const index = fragments.findIndex((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n\n      return index >= 0 ? (segments[index] ?? null) : null;\n    },\n    [format],\n  );\n\n  const isFragment = useCallback(\n    (el: HTMLElement | EventTarget | null): boolean => {\n      return getSegment(el) !== null;\n    },\n    [getSegment],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      isFragment,\n      getSegment,\n      getRootNode: () => rootRef.current,\n    }),\n    [getSegment, isFragment],\n  );\n\n  const segments = getTimeSegments(format);\n  const displaySegments = getDisplaySegments(value, format);\n\n  return (\n    <span ref={rootRef} className={rootClassName}>\n      {value\n        ? segments.flatMap((segment, index) => {\n            const segmentValue = displaySegments[index] ?? '';\n\n            const valueMask = Array.from(segmentValue)\n              .filter((char) => char !== TIME_PLACEHOLDER_CHAR)\n              .join('');\n\n            const placeholderLength = segmentValue.length - valueMask.length;\n\n            const nodes = [\n              <span\n                key={segment}\n                data-fragment={''}\n                className={styles.segment()}\n                onMouseUp={(event) => onSelectSegment?.(segment, event)}\n              >\n                {valueMask}\n                <span className={maskClassName}>{Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join('')}</span>\n              </span>,\n            ];\n\n            if (index < segments.length - 1) {\n              nodes.push(\n                <span\n                  key={`separator-${index}`}\n                  className={cx(maskClassName, styles.separator(), separatorSizeClassName, {\n                    [styles.separatorFilled()]: !segmentValue.includes(TIME_PLACEHOLDER_CHAR),\n                  })}\n                >\n                  {TIME_SEPARATOR}\n                </span>,\n              );\n            }\n\n            return nodes;\n          })\n        : null}\n    </span>\n  );\n});\n"]}
+{"version":3,"file":"TimeFragments.js","sourceRoot":"","sources":["TimeFragments.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef } from 'react';\n\nimport { TIME_PLACEHOLDER_CHAR, TIME_SEPARATOR } from '../../components/TimePicker/helpers/TimePicker.constants.js';\nimport { getDisplaySegments, getTimeSegments } from '../../components/TimePicker/helpers/TimePicker.shared.js';\nimport type { TimeFormat, TimeSegment } from '../../components/TimePicker/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { getStyles } from './TimeFragments.styles.js';\n\nexport interface TimeFragmentsRef {\n  getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n  getRootNode(): HTMLSpanElement | null;\n}\n\nexport interface TimeFragmentsProps {\n  value: string;\n  format: TimeFormat;\n  size: SizeProp;\n\n  onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nconst getEmptyPlaceholderClassName = (\n  styles: ReturnType<typeof getStyles>,\n  theme: Theme,\n  size: SizeProp,\n  format: TimeFormat,\n): string => {\n  if (format === 'HH:mm:ss') {\n    switch (size) {\n      case 'large':\n        return styles.emptyPlaceholderWithSecondsLarge(theme);\n      case 'medium':\n        return styles.emptyPlaceholderWithSecondsMedium(theme);\n      case 'small':\n      default:\n        return styles.emptyPlaceholderWithSecondsSmall(theme);\n    }\n  }\n\n  switch (size) {\n    case 'large':\n      return styles.emptyPlaceholderLarge(theme);\n    case 'medium':\n      return styles.emptyPlaceholderMedium(theme);\n    case 'small':\n    default:\n      return styles.emptyPlaceholderSmall(theme);\n  }\n};\n\nconst getSeparatorSizeClassName = (styles: ReturnType<typeof getStyles>, theme: Theme, size: SizeProp): string => {\n  switch (size) {\n    case 'large':\n      return styles.separatorLarge(theme);\n    case 'medium':\n      return styles.separatorMedium(theme);\n    case 'small':\n    default:\n      return styles.separatorSmall(theme);\n  }\n};\n\nexport const TimeFragments = forwardRefAndName<TimeFragmentsRef, TimeFragmentsProps>('TimeFragments', (props, ref) => {\n  const { value, format, size, onSelectSegment } = props;\n\n  const theme = useContext(ThemeContext);\n\n  const { cx } = useEmotion();\n\n  const styles = useStyles(getStyles);\n\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const rootClassName = cx(styles.root(), styles.selected(theme), {\n    [getEmptyPlaceholderClassName(styles, theme, size, format)]: !value,\n  });\n  const maskClassName = styles.mask(theme);\n  const separatorSizeClassName = getSeparatorSizeClassName(styles, theme, size);\n\n  const getSegment = useCallback(\n    (el: HTMLElement | EventTarget | null): TimeSegment | null => {\n      const rootNode = rootRef.current;\n\n      if (!rootNode || !el) {\n        return null;\n      }\n\n      const fragments: HTMLSpanElement[] = Array.from(rootNode.querySelectorAll('[data-fragment]'));\n      const segments = getTimeSegments(format);\n\n      const index = fragments.findIndex((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n\n      return index >= 0 ? (segments[index] ?? null) : null;\n    },\n    [format],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getSegment,\n      getRootNode: () => rootRef.current,\n    }),\n    [getSegment],\n  );\n\n  const segments = getTimeSegments(format);\n  const displaySegments = getDisplaySegments(value, format);\n\n  return (\n    <span ref={rootRef} className={rootClassName}>\n      {value\n        ? segments.flatMap((segment, index) => {\n            const segmentValue = displaySegments[index] ?? '';\n\n            const valueMask = Array.from(segmentValue)\n              .filter((char) => char !== TIME_PLACEHOLDER_CHAR)\n              .join('');\n\n            const placeholderLength = segmentValue.length - valueMask.length;\n\n            const nodes = [\n              <span\n                key={segment}\n                data-fragment={''}\n                className={styles.segment()}\n                onMouseUp={(event) => onSelectSegment?.(segment, event)}\n              >\n                {valueMask}\n                <span className={maskClassName}>{Array(placeholderLength).fill(TIME_PLACEHOLDER_CHAR).join('')}</span>\n              </span>,\n            ];\n\n            if (index < segments.length - 1) {\n              nodes.push(\n                <span\n                  key={`separator-${index}`}\n                  data-separator={''}\n                  className={cx(maskClassName, styles.separator(), separatorSizeClassName, {\n                    [styles.separatorFilled()]: !segmentValue.includes(TIME_PLACEHOLDER_CHAR),\n                  })}\n                >\n                  <span aria-hidden className={styles.separatorText()}>\n                    {TIME_SEPARATOR}\n                  </span>\n                </span>,\n              );\n            }\n\n            return nodes;\n          })\n        : null}\n    </span>\n  );\n});\n"]}