npm - @skbkontur/react-ui - Versions diffs - 6.1.6 → 6.1.7-41945.0 - Mend

@skbkontur/react-ui 6.1.6 → 6.1.7-41945.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/components/TimePicker/hooks/useTimePickerSource.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import type { TimeFormat, TimeItemValue, TimePickerExtendedItem, TimePickerSource } from '../helpers/TimePicker.shared.js';
+interface UseTimePickerSourceOptions<T extends TimeItemValue> {
+    source?: TimePickerSource<T>;
+    format: TimeFormat;
+    isDropdownOpened: boolean;
+    /** Текущий запрос: введенные цифры сегментов с сохранением их позиций. */
+    filterQuery: string;
+}
+interface UseTimePickerSourceResult<T extends TimeItemValue> {
+    /** Элементы источника, готовые к фильтрации и отрисовке. */
+    items: Array<TimePickerExtendedItem<T>>;
+    /** Запрос, для которого получены текущие элементы функции-источника. */
+    fetchedQuery: string | null;
+    isLoading: boolean;
+    isFailed: boolean;
+    retry: () => void;
+}
+/**
+ * Отдает элементы выпадающего списка из массива или функции-источника.
+ *
+ * Функция вызывается только для открытого меню и на каждый новый запрос;
+ * ответ на устаревший запрос отбрасывается, а отказ можно повторить через `retry`.
+ * При закрытии меню результаты функции сбрасываются, чтобы следующее открытие
+ * не показывало элементы для старого запроса.
+ * Замена самой функции уже открытый список не перезапрашивает: актуальная функция
+ * используется при следующем запросе.
+ */
+export declare const useTimePickerSource: <T extends TimeItemValue>(options: UseTimePickerSourceOptions<T>) => UseTimePickerSourceResult<T>;
+export {};

package/components/TimePicker/hooks/useTimePickerSource.js ADDED Viewed

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { sanitizeTimeItems } from '../helpers/TimePicker.value.js';
+/** Общая пустая коллекция элементов: не создает новую ссылку на каждый рендер. */
+var EMPTY_ITEMS = [];
+/**
+ * Отдает элементы выпадающего списка из массива или функции-источника.
+ *
+ * Функция вызывается только для открытого меню и на каждый новый запрос;
+ * ответ на устаревший запрос отбрасывается, а отказ можно повторить через `retry`.
+ * При закрытии меню результаты функции сбрасываются, чтобы следующее открытие
+ * не показывало элементы для старого запроса.
+ * Замена самой функции уже открытый список не перезапрашивает: актуальная функция
+ * используется при следующем запросе.
+ */
+export var useTimePickerSource = function (options) {
+    var source = options.source, format = options.format, isDropdownOpened = options.isDropdownOpened, filterQuery = options.filterQuery;
+    var isSourceFunction = typeof source === 'function';
+    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(null);
+                setIsLoading(false);
+                setIsFailed(true);
+            }
+        });
+        return function () {
+            cancelled = true;
+        };
+    }, [filterQuery, isDropdownOpened, isSourceFunction, requestVersion]);
+    useEffect(function () {
+        if (isDropdownOpened || !isSourceFunction) {
+            return;
+        }
+        setFetchedItems(EMPTY_ITEMS);
+        setFetchedQuery(null);
+    }, [isDropdownOpened, isSourceFunction]);
+    // Ссылка стабильна и без мемоизации: у массива это он сам, у функции — общая пустая коллекция.
+    var sourceItems = Array.isArray(source) ? source : EMPTY_ITEMS;
+    var items = useMemo(function () { return sanitizeTimeItems(isSourceFunction ? fetchedItems : sourceItems, format); }, [fetchedItems, format, isSourceFunction, sourceItems]);
+    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 ADDED Viewed

@@ -0,0 +1 @@

+ {"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 ADDED Viewed

@@ -0,0 +1,38 @@
+import type { RefObject } from 'react';
+import { type TimeFormat, type TimeItemValue } from '../helpers/TimePicker.shared.js';
+interface UseTimePickerValueOptions {
+    isInputFocused: boolean;
+    /** Внешнее значение, приведенное к строке времени. */
+    externalValue: string;
+    /**
+     * Значением управляет родитель: проп `value` задан.
+     * Если проп не задан, компонент неконтролируемый и хранит значение сам,
+     * поэтому внешнее пустое значение не должно затирать введенное пользователем.
+     */
+    isValueControlled: boolean;
+    format: TimeFormat;
+    /**
+     * Вызывается при коммите значения: получает нормализованное время
+     * и элемент из `source`, если значение выбрано в выпадающем меню.
+     */
+    onCommitValue(value: string, item: TimeItemValue | null): void;
+    onInputValueChange?(value: string): void;
+}
+interface UseTimePickerValueResult {
+    editingValue: string;
+    editingValueRef: RefObject<string>;
+    /**
+     * Последнее закоммиченное время в нормализованной форме.
+     * Правка значения его не меняет, поэтому в меню отмечено выбранным именно значение поля,
+     * а не время, которое пользователь набирает.
+     */
+    committedValue: string;
+    updateEditingValue(value: string): void;
+    commitEditingValue(): void;
+    /** Коммитит значение, введенное пользователем. Не эмитит повторно то же самое время. */
+    commitValue(value: string, item?: TimeItemValue | null): void;
+    /** Коммитит элемент, выбранный в выпадающем меню. Эмитит всегда, так как это явное действие пользователя. */
+    commitItem(item: TimeItemValue): void;
+}
+export declare const useTimePickerValue: (options: UseTimePickerValueOptions) => UseTimePickerValueResult;
+export {};

package/components/TimePicker/hooks/useTimePickerValue.js ADDED Viewed

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import warning from 'warning';
+import { getTimeItemValue } from '../helpers/TimePicker.shared.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);
+    /**
+     * Последнее закоммиченное время в нормализованной форме.
+     * Форма именно нормализованная, иначе внешнее `9:00` или `09:00:00` в формате `HH:mm`
+     * выглядело бы как изменение и поле коммитило бы его заново, собирая элемент вместо исходного.
+     */
+    var emittedValueRef = useRef(externalValue);
+    var syncEmittedValues = useCallback(function (nextValue) {
+        emittedInputValueRef.current = nextValue;
+        emittedValueRef.current = normalizeTimeValue(nextValue, format);
+    }, [format]);
+    var setEditingValue = useCallback(function (nextEditingValue) {
+        editingValueRef.current = nextEditingValue;
+        setEditingValueState(nextEditingValue);
+    }, []);
+    var emitInputValue = useCallback(function (nextValue) {
+        if (emittedInputValueRef.current !== nextValue) {
+            emittedInputValueRef.current = nextValue;
+            onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange(nextValue);
+        }
+    }, [onInputValueChange]);
+    var emitValue = useCallback(function (nextValue, item) {
+        emittedInputValueRef.current = nextValue;
+        emittedValueRef.current = nextValue;
+        onCommitValue(nextValue, item);
+    }, [onCommitValue]);
+    var updateEditingValue = useCallback(function (nextEditingValue) {
+        setEditingValue(nextEditingValue);
+        emitInputValue(serializeTimeValue(nextEditingValue, format));
+    }, [emitInputValue, format, setEditingValue]);
+    var commitValue = useCallback(function (nextValue, item) {
+        if (item === void 0) { item = null; }
+        var normalizedValue = normalizeTimeValue(nextValue, format);
+        setEditingValue(normalizedValue);
+        setCommittedValue(normalizedValue);
+        if (emittedValueRef.current !== normalizedValue) {
+            emitValue(normalizedValue, item);
+        }
+    }, [emitValue, format, setEditingValue]);
+    var commitItem = useCallback(function (item) {
+        var normalizedValue = normalizeTimeValue(getTimeItemValue(item), format);
+        setEditingValue(normalizedValue);
+        setCommittedValue(normalizedValue);
+        emitValue(normalizedValue, item);
+    }, [emitValue, format, setEditingValue]);
+    var commitEditingValue = useCallback(function () {
+        commitValue(editingValueRef.current);
+    }, [commitValue, editingValueRef]);
+    var initialIsValueControlledRef = useRef(isValueControlled);
+    useEffect(function () {
+        warning(initialIsValueControlledRef.current === isValueControlled, isValueControlled
+            ? '[TimePicker]: a component is changing an uncontrolled value to be controlled. ' +
+                'Decide between using a controlled or uncontrolled value for the lifetime of the component.'
+            : '[TimePicker]: a component is changing a controlled value to be uncontrolled. ' +
+                'Pass an empty string or null instead of undefined to keep the value controlled.');
+    }, [isValueControlled]);
+    useEffect(function () {
+        if (!isValueControlled) {
+            return;
+        }
+        if (!isInputFocused || externalValue !== emittedInputValueRef.current) {
+            setEditingValue(externalEditingValue);
+        }
+        setCommittedValue(normalizeTimeValue(externalValue, format));
+        syncEmittedValues(externalValue);
+    }, [
+        externalEditingValue,
+        externalValue,
+        format,
+        isInputFocused,
+        isValueControlled,
+        setEditingValue,
+        syncEmittedValues,
+    ]);
+    return {
+        editingValue: editingValue,
+        editingValueRef: editingValueRef,
+        committedValue: committedValue,
+        updateEditingValue: updateEditingValue,
+        commitEditingValue: commitEditingValue,
+        commitValue: commitValue,
+        commitItem: commitItem,
+    };
+};
+//# sourceMappingURL=useTimePickerValue.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"useTimePickerValue.js","sourceRoot":"","sources":["useTimePickerValue.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,gBAAgB,EAAuC,MAAM,iCAAiC,CAAC;AACxG,OAAO,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAsCrH,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,OAAkC;IAC3D,IAAA,aAAa,GAAmF,OAAO,cAA1F,EAAE,iBAAiB,GAAgE,OAAO,kBAAvE,EAAE,MAAM,GAAwD,OAAO,OAA/D,EAAE,cAAc,GAAwC,OAAO,eAA/C,EAAE,aAAa,GAAyB,OAAO,cAAhC,EAAE,kBAAkB,GAAK,OAAO,mBAAZ,CAAa;IAEhH,IAAM,oBAAoB,GAAG,2BAA2B,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAE1E,IAAA,KAAuC,QAAQ,CAAS,oBAAoB,CAAC,EAA5E,YAAY,QAAA,EAAE,oBAAoB,QAA0C,CAAC;IAC9E,IAAA,KAAsC,QAAQ,CAAS,cAAM,OAAA,kBAAkB,CAAC,aAAa,EAAE,MAAM,CAAC,EAAzC,CAAyC,CAAC,EAAtG,cAAc,QAAA,EAAE,iBAAiB,QAAqE,CAAC;IAE9G,IAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC7C,yFAAyF;IACzF,IAAM,oBAAoB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACnD;;;;OAIG;IACH,IAAM,eAAe,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAE9C,IAAM,iBAAiB,GAAG,WAAW,CACnC,UAAC,SAAiB;QAChB,oBAAoB,CAAC,OAAO,GAAG,SAAS,CAAC;QACzC,eAAe,CAAC,OAAO,GAAG,kBAAkB,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAClE,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,IAAM,eAAe,GAAG,WAAW,CAAC,UAAC,gBAAwB;QAC3D,eAAe,CAAC,OAAO,GAAG,gBAAgB,CAAC;QAC3C,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,cAAc,GAAG,WAAW,CAChC,UAAC,SAAiB;QAChB,IAAI,oBAAoB,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/C,oBAAoB,CAAC,OAAO,GAAG,SAAS,CAAC;YACzC,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,SAAS,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,EACD,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,IAAM,SAAS,GAAG,WAAW,CAC3B,UAAC,SAAiB,EAAE,IAA0B;QAC5C,oBAAoB,CAAC,OAAO,GAAG,SAAS,CAAC;QACzC,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;QACpC,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,IAAM,kBAAkB,GAAG,WAAW,CACpC,UAAC,gBAAwB;QACvB,eAAe,CAAC,gBAAgB,CAAC,CAAC;QAClC,cAAc,CAAC,kBAAkB,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/D,CAAC,EACD,CAAC,cAAc,EAAE,MAAM,EAAE,eAAe,CAAC,CAC1C,CAAC;IAEF,IAAM,WAAW,GAAG,WAAW,CAC7B,UAAC,SAAiB,EAAE,IAAiC;QAAjC,qBAAA,EAAA,WAAiC;QACnD,IAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QAE9D,eAAe,CAAC,eAAe,CAAC,CAAC;QACjC,iBAAiB,CAAC,eAAe,CAAC,CAAC;QAEnC,IAAI,eAAe,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;YAChD,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,EACD,CAAC,SAAS,EAAE,MAAM,EAAE,eAAe,CAAC,CACrC,CAAC;IAEF,IAAM,UAAU,GAAG,WAAW,CAC5B,UAAC,IAAmB;QAClB,IAAM,eAAe,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;QAE3E,eAAe,CAAC,eAAe,CAAC,CAAC;QACjC,iBAAiB,CAAC,eAAe,CAAC,CAAC;QACnC,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC,EACD,CAAC,SAAS,EAAE,MAAM,EAAE,eAAe,CAAC,CACrC,CAAC;IAEF,IAAM,kBAAkB,GAAG,WAAW,CAAC;QACrC,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnC,IAAM,2BAA2B,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAE9D,SAAS,CAAC;QACR,OAAO,CACL,2BAA2B,CAAC,OAAO,KAAK,iBAAiB,EACzD,iBAAiB;YACf,CAAC,CAAC,gFAAgF;gBAC9E,4FAA4F;YAChG,CAAC,CAAC,+EAA+E;gBAC7E,iFAAiF,CACxF,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,SAAS,CAAC;QACR,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,IAAI,aAAa,KAAK,oBAAoB,CAAC,OAAO,EAAE,CAAC;YACtE,eAAe,CAAC,oBAAoB,CAAC,CAAC;QACxC,CAAC;QAED,iBAAiB,CAAC,kBAAkB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;QAC7D,iBAAiB,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC,EAAE;QACD,oBAAoB;QACpB,aAAa;QACb,MAAM;QACN,cAAc;QACd,iBAAiB;QACjB,eAAe;QACf,iBAAiB;KAClB,CAAC,CAAC;IAEH,OAAO;QACL,YAAY,cAAA;QACZ,eAAe,iBAAA;QACf,cAAc,gBAAA;QACd,kBAAkB,oBAAA;QAClB,kBAAkB,oBAAA;QAClB,WAAW,aAAA;QACX,UAAU,YAAA;KACX,CAAC;AACJ,CAAC,CAAC","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 ADDED Viewed

@@ -0,0 +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, TimePickerMenuElement, TimePickerMenuItem, TimePickerResolvedItem, TimePickerSource, TimePickerValue, TimePickerValueToItem, } from './helpers/TimePicker.shared.js';

package/components/TimePicker/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './TimePicker.js';
+export { TimePickerDataTids } from './helpers/TimePicker.constants.js';
+//# sourceMappingURL=index.js.map

package/components/TimePicker/index.js.map ADDED Viewed

@@ -0,0 +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 TimePickerMenuElement,\n TimePickerMenuItem,\n TimePickerResolvedItem,\n TimePickerSource,\n TimePickerValue,\n TimePickerValueToItem,\n} from './helpers/TimePicker.shared.js';\n"]}

package/components/TimePicker/locale/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper.js';
+import type { TimePickerLocale } from './types.js';
+export * from './types.js';
+export declare const TimePickerLocaleHelper: LocaleHelper<TimePickerLocale>;

package/components/TimePicker/locale/index.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper.js';
+import { componentsLocales as en_GB } from './locales/en.js';
+import { componentsLocales as ru_RU } from './locales/ru.js';
+export * from './types.js';
+export var TimePickerLocaleHelper = new LocaleHelper({
+    ru_RU: ru_RU,
+    en_GB: en_GB,
+});
+//# sourceMappingURL=index.js.map

package/components/TimePicker/locale/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAG7D,cAAc,YAAY,CAAC;AAE3B,MAAM,CAAC,IAAM,sBAAsB,GAAG,IAAI,YAAY,CAAmB;IACvE,KAAK,OAAA;IACL,KAAK,OAAA;CACN,CAAC,CAAC","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper.js';\nimport { componentsLocales as en_GB } from './locales/en.js';\nimport { componentsLocales as ru_RU } from './locales/ru.js';\nimport type { TimePickerLocale } from './types.js';\n\nexport * from './types.js';\n\nexport const TimePickerLocaleHelper = new LocaleHelper<TimePickerLocale>({\n ru_RU,\n en_GB,\n});\n"]}

package/components/TimePicker/locale/locales/en.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { TimePickerLocale } from '../types.js';
2	+ export declare const componentsLocales: TimePickerLocale;

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

@@ -0,0 +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 ADDED Viewed

@@ -0,0 +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;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.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { TimePickerLocale } from '../types.js';
2	+ export declare const componentsLocales: TimePickerLocale;

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

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

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

@@ -0,0 +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;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 ADDED Viewed

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

package/components/TimePicker/locale/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=types.js.map

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

	@@ -0,0 +1 @@
1	+ {"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/components/Toggle/Toggle.d.ts CHANGED Viewed

@@ -39,6 +39,8 @@ export interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-d
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     /** Отключает анимацию. */
     disableAnimations?: boolean;
+    /** Задаёт второстепенный пояснительный текст под основным текстом тогла. */
+    comment?: React.ReactNode;
 }
 export interface ToggleState {
     checked?: boolean;
@@ -80,7 +82,10 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     private getRootSizeClassName;
     private getInputSizeClassName;
     private getCaptionSizeClassName;
+    private getSubcaptionSizeClassName;
     private renderMain;
+    private renderCaption;
+    private renderComment;
     private inputRef;
     private handleChange;
     private handleFocus;

package/components/Toggle/Toggle.js CHANGED Viewed

@@ -181,9 +181,20 @@ var Toggle = /** @class */ (function (_super) {
                 return this.styles.captionSmall(this.theme);
         }
     };
+    Toggle.prototype.getSubcaptionSizeClassName = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.subcaptionLarge(this.theme);
+            case 'medium':
+                return this.styles.subcaptionMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.subcaptionSmall(this.theme);
+        }
+    };
     Toggle.prototype.renderMain = function () {
         var _a, _b, _c, _d, _e;
-        var _f = this.props, children = _f.children, warning = _f.warning, error = _f.error, id = _f.id, name = _f.name, ariaDescribedby = _f["aria-describedby"], ariaLabel = _f["aria-label"];
+        var _f = this.props, children = _f.children, warning = _f.warning, error = _f.error, id = _f.id, name = _f.name, comment = _f.comment, ariaDescribedby = _f["aria-describedby"], ariaLabel = _f["aria-label"];
         var _g = this.getProps(), loading = _g.loading, captionPosition = _g.captionPosition, disableAnimations = _g.disableAnimations;
         var disabled = this.getProps().disabled || loading;
         var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
@@ -201,32 +212,45 @@ var Toggle = /** @class */ (function (_super) {
             _b[globalClasses.disabled] = !!disabled,
             _b[this.styles.disableAnimation()] = disableAnimations,
             _b));
-        var caption = null;
-        if (children) {
-            var captionClass = this.cx(this.getCaptionSizeClassName(), (_c = {},
-                _c[this.styles.caption(this.theme)] = true,
-                _c[this.styles.captionLeft(this.theme)] = captionPosition === 'left',
-                _c[this.styles.disabledCaption(this.theme)] = !!disabled,
-                _c));
-            caption = React.createElement("span", { className: captionClass }, children);
-        }
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
             React.createElement("label", { "data-tid": ToggleDataTids.root, className: labelClassNames },
-                React.createElement("div", { className: this.cx(this.getButtonSizeClassName(), (_d = {},
-                        _d[this.styles.button(this.theme)] = true,
-                        _d[this.styles.buttonRight()] = captionPosition === 'left',
-                        _d[this.styles.isWarning(this.theme)] = !!warning,
-                        _d[this.styles.isError(this.theme)] = !!error,
-                        _d[this.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab,
-                        _d)) },
+                React.createElement("div", { className: this.cx(this.getButtonSizeClassName(), (_c = {},
+                        _c[this.styles.button(this.theme)] = true,
+                        _c[this.styles.buttonRight()] = captionPosition === 'left',
+                        _c[this.styles.isWarning(this.theme)] = !!warning,
+                        _c[this.styles.isError(this.theme)] = !!error,
+                        _c[this.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab,
+                        _c)) },
                     React.createElement(FocusControlWrapper, { onBlurWhenDisabled: this.resetFocus },
                         React.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: this.cx(this.getInputSizeClassName(), this.styles.input(this.theme)), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled, id: id, name: name, role: "switch", "aria-label": ariaLabel, "aria-describedby": ariaDescribedby })),
                     React.createElement("div", { className: containerClassNames }),
-                    React.createElement("div", { className: this.cx(this.getHandleSizeClassName(), globalClasses.handle, (_e = {},
-                            _e[this.styles.handle(this.theme)] = true,
-                            _e[this.styles.handleDisabled(this.theme)] = disabled,
-                            _e)) })),
-                caption)));
+                    React.createElement("div", { className: this.cx(this.getHandleSizeClassName(), globalClasses.handle, (_d = {},
+                            _d[this.styles.handle(this.theme)] = true,
+                            _d[this.styles.handleDisabled(this.theme)] = disabled,
+                            _d)) })),
+                children &&
+                    (comment ? (React.createElement("div", { className: this.cx(this.styles.captionWrapper(), (_e = {},
+                            _e[this.styles.captionWrapperGap(this.theme)] = captionPosition !== 'left',
+                            _e[this.styles.captionWrapperGapLeft(this.theme)] = captionPosition === 'left',
+                            _e)) },
+                        this.renderCaption(disabled, captionPosition, true),
+                        this.renderComment(disabled))) : (this.renderCaption(disabled, captionPosition, false))))));
+    };
+    Toggle.prototype.renderCaption = function (disabled, captionPosition, noGap) {
+        var _a;
+        var captionClass = this.cx(this.getCaptionSizeClassName(), (_a = {},
+            _a[this.styles.caption(this.theme)] = true,
+            _a[this.styles.captionLeft(this.theme)] = captionPosition === 'left',
+            _a[this.styles.disabledCaption(this.theme)] = !!disabled,
+            _a[this.styles.captionNoGap()] = noGap,
+            _a));
+        return React.createElement("div", { className: captionClass }, this.props.children);
+    };
+    Toggle.prototype.renderComment = function (disabled) {
+        var _a;
+        return (React.createElement("div", { className: this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), (_a = {},
+                _a[this.styles.subcaptionDisabled(this.theme)] = !!disabled,
+                _a)) }, this.props.comment));
     };
     Toggle.prototype.isUncontrolled = function () {
         return this.props.checked === undefined;

package/components/Toggle/Toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["Toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, InputHTMLAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.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, globalClasses } from './Toggle.styles.js';\n\nexport interface ToggleProps\n extends\n Pick<AriaAttributes, 'aria-label' \| 'aria-describedby'>,\n Pick<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'name'>,\n CommonProps {\n /** @ignore /\n children?: React.ReactNode;\n\n /* Расположение названия относительно переключателя.\n * @default 'right' /\n captionPosition?: 'left' \| 'right';\n\n /* Включает тогл.\n * @default false /\n checked?: boolean;\n\n /* Делает тогл включенным по умолчанию. Не работает, если задан проп `checked`. /\n defaultChecked?: boolean;\n\n /* Блокирует тогл. /\n disabled?: boolean;\n\n /* Событие изменения значения. /\n onValueChange?: (value: boolean) => void;\n\n /* Событие клика на тогл. /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n\n /* Переводит тогл в состояние предупреждения.\n * @default false /\n warning?: boolean;\n\n /* Переводит тогл в состояние ошибки.\n * @default false /\n error?: boolean;\n\n /* Переводит тогл в состояние загрузки: добавляет стили для состояния `loading` и отключает тогл./\n loading?: boolean;\n\n /* Устанавливает фокус на тогл после окончания загрузки страницы.\n * @default false /\n autoFocus?: boolean;\n\n /* Размер тогла. /\n size?: SizeProp;\n\n /* Событие получения тоглом фокуса./\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n\n /* Событие потери тоглом фокуса. /\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n\n /* Отключает анимацию. /\n disableAnimations?: boolean;\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ToggleProps, 'disabled' \| 'loading' \| 'captionPosition' \| 'disableAnimations'>>;\n\n/\n Тогл переключает состояния. Например, включает или отключает уведомления в настройках.\n * Состоит из надписи и переключателя.\n /\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n public static displayName = 'Toggle';\n\n public static defaultProps: DefaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n disableAnimations: isTestEnv,\n };\n private size!: SizeProp;\n\n private getProps = createPropsGetter(Toggle.defaultProps);\n\n private styles!: ReturnType<typeof getStyles>;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private globalObject!: GlobalObject;\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private keyListener!: KeyListener;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n this.keyListener = new KeyListener(this.globalObject);\n if (this.props.autoFocus) {\n this.keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = (): void => {\n if (this.input) {\n this.keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private getContainerSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.containerLarge(this.theme);\n case 'medium':\n return this.styles.containerMedium(this.theme);\n case 'small':\n default:\n return this.styles.containerSmall(this.theme);\n }\n }\n\n private getHandleSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.handleLarge(this.theme);\n case 'medium':\n return this.styles.handleMedium(this.theme);\n case 'small':\n default:\n return this.styles.handleSmall(this.theme);\n }\n }\n\n private getButtonSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.buttonLarge(this.theme);\n case 'medium':\n return this.styles.buttonMedium(this.theme);\n case 'small':\n default:\n return this.styles.buttonSmall(this.theme);\n }\n }\n\n private getRootSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.rootLarge(this.theme);\n case 'medium':\n return this.styles.rootMedium(this.theme);\n case 'small':\n default:\n return this.styles.rootSmall(this.theme);\n }\n }\n\n private getInputSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.inputLarge(this.theme);\n case 'medium':\n return this.styles.inputMedium(this.theme);\n case 'small':\n default:\n return this.styles.inputSmall(this.theme);\n }\n }\n\n private getCaptionSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.captionLarge(this.theme);\n case 'medium':\n return this.styles.captionMedium(this.theme);\n case 'small':\n default:\n return this.styles.captionSmall(this.theme);\n }\n }\n\n private renderMain() {\n const {\n children,\n warning,\n error,\n id,\n name,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n } = this.props;\n const { loading, captionPosition, disableAnimations } = this.getProps();\n const disabled = this.getProps().disabled \|\| loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = this.cx(this.getContainerSizeClassName(), {\n [this.styles.container(this.theme)]: true,\n [this.styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = this.cx(this.getRootSizeClassName(), {\n [this.styles.root(this.theme)]: true,\n [this.styles.rootLeft()]: captionPosition === 'left',\n [this.styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n [this.styles.disableAnimation()]: disableAnimations,\n });\n\n let caption = null;\n if (children) {\n const captionClass = this.cx(this.getCaptionSizeClassName(), {\n [this.styles.caption(this.theme)]: true,\n [this.styles.captionLeft(this.theme)]: captionPosition === 'left',\n [this.styles.disabledCaption(this.theme)]: !!disabled,\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n <div\n className={this.cx(this.getButtonSizeClassName(), {\n [this.styles.button(this.theme)]: true,\n [this.styles.buttonRight()]: captionPosition === 'left',\n [this.styles.isWarning(this.theme)]: !!warning,\n [this.styles.isError(this.theme)]: !!error,\n [this.styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={this.cx(this.getInputSizeClassName(), this.styles.input(this.theme))}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n name={name}\n role=\"switch\"\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n />\n </FocusControlWrapper>\n <div className={containerClassNames} />\n <div\n className={this.cx(this.getHandleSizeClassName(), globalClasses.handle, {\n [this.styles.handle(this.theme)]: true,\n [this.styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (this.keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private resetFocus = () => this.setState({ focusByTab: false });\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(event);\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}
1	+ {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["Toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, InputHTMLAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.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, globalClasses } from './Toggle.styles.js';\n\nexport interface ToggleProps\n extends\n Pick<AriaAttributes, 'aria-label' \| 'aria-describedby'>,\n Pick<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'name'>,\n CommonProps {\n /** @ignore /\n children?: React.ReactNode;\n\n /* Расположение названия относительно переключателя.\n * @default 'right' /\n captionPosition?: 'left' \| 'right';\n\n /* Включает тогл.\n * @default false /\n checked?: boolean;\n\n /* Делает тогл включенным по умолчанию. Не работает, если задан проп `checked`. /\n defaultChecked?: boolean;\n\n /* Блокирует тогл. /\n disabled?: boolean;\n\n /* Событие изменения значения. /\n onValueChange?: (value: boolean) => void;\n\n /* Событие клика на тогл. /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n\n /* Переводит тогл в состояние предупреждения.\n * @default false /\n warning?: boolean;\n\n /* Переводит тогл в состояние ошибки.\n * @default false /\n error?: boolean;\n\n /* Переводит тогл в состояние загрузки: добавляет стили для состояния `loading` и отключает тогл./\n loading?: boolean;\n\n /* Устанавливает фокус на тогл после окончания загрузки страницы.\n * @default false /\n autoFocus?: boolean;\n\n /* Размер тогла. /\n size?: SizeProp;\n\n /* Событие получения тоглом фокуса./\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n\n /* Событие потери тоглом фокуса. /\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n\n /* Отключает анимацию. /\n disableAnimations?: boolean;\n\n /* Задаёт второстепенный пояснительный текст под основным текстом тогла. /\n comment?: React.ReactNode;\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ToggleProps, 'disabled' \| 'loading' \| 'captionPosition' \| 'disableAnimations'>>;\n\n/\n Тогл переключает состояния. Например, включает или отключает уведомления в настройках.\n * Состоит из надписи и переключателя.\n /\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n public static displayName = 'Toggle';\n\n public static defaultProps: DefaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n disableAnimations: isTestEnv,\n };\n private size!: SizeProp;\n\n private getProps = createPropsGetter(Toggle.defaultProps);\n\n private styles!: ReturnType<typeof getStyles>;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private globalObject!: GlobalObject;\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private keyListener!: KeyListener;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n this.keyListener = new KeyListener(this.globalObject);\n if (this.props.autoFocus) {\n this.keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = (): void => {\n if (this.input) {\n this.keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private getContainerSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.containerLarge(this.theme);\n case 'medium':\n return this.styles.containerMedium(this.theme);\n case 'small':\n default:\n return this.styles.containerSmall(this.theme);\n }\n }\n\n private getHandleSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.handleLarge(this.theme);\n case 'medium':\n return this.styles.handleMedium(this.theme);\n case 'small':\n default:\n return this.styles.handleSmall(this.theme);\n }\n }\n\n private getButtonSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.buttonLarge(this.theme);\n case 'medium':\n return this.styles.buttonMedium(this.theme);\n case 'small':\n default:\n return this.styles.buttonSmall(this.theme);\n }\n }\n\n private getRootSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.rootLarge(this.theme);\n case 'medium':\n return this.styles.rootMedium(this.theme);\n case 'small':\n default:\n return this.styles.rootSmall(this.theme);\n }\n }\n\n private getInputSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.inputLarge(this.theme);\n case 'medium':\n return this.styles.inputMedium(this.theme);\n case 'small':\n default:\n return this.styles.inputSmall(this.theme);\n }\n }\n\n private getCaptionSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.captionLarge(this.theme);\n case 'medium':\n return this.styles.captionMedium(this.theme);\n case 'small':\n default:\n return this.styles.captionSmall(this.theme);\n }\n }\n\n private getSubcaptionSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.subcaptionLarge(this.theme);\n case 'medium':\n return this.styles.subcaptionMedium(this.theme);\n case 'small':\n default:\n return this.styles.subcaptionSmall(this.theme);\n }\n }\n\n private renderMain() {\n const {\n children,\n warning,\n error,\n id,\n name,\n comment,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n } = this.props;\n const { loading, captionPosition, disableAnimations } = this.getProps();\n const disabled = this.getProps().disabled \|\| loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = this.cx(this.getContainerSizeClassName(), {\n [this.styles.container(this.theme)]: true,\n [this.styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = this.cx(this.getRootSizeClassName(), {\n [this.styles.root(this.theme)]: true,\n [this.styles.rootLeft()]: captionPosition === 'left',\n [this.styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n [this.styles.disableAnimation()]: disableAnimations,\n });\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n <div\n className={this.cx(this.getButtonSizeClassName(), {\n [this.styles.button(this.theme)]: true,\n [this.styles.buttonRight()]: captionPosition === 'left',\n [this.styles.isWarning(this.theme)]: !!warning,\n [this.styles.isError(this.theme)]: !!error,\n [this.styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={this.cx(this.getInputSizeClassName(), this.styles.input(this.theme))}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n name={name}\n role=\"switch\"\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n />\n </FocusControlWrapper>\n <div className={containerClassNames} />\n <div\n className={this.cx(this.getHandleSizeClassName(), globalClasses.handle, {\n [this.styles.handle(this.theme)]: true,\n [this.styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </div>\n {children &&\n (comment ? (\n <div\n className={this.cx(this.styles.captionWrapper(), {\n [this.styles.captionWrapperGap(this.theme)]: captionPosition !== 'left',\n [this.styles.captionWrapperGapLeft(this.theme)]: captionPosition === 'left',\n })}\n >\n {this.renderCaption(disabled, captionPosition, true)}\n {this.renderComment(disabled)}\n </div>\n ) : (\n this.renderCaption(disabled, captionPosition, false)\n ))}\n </label>\n </CommonWrapper>\n );\n }\n\n private renderCaption(disabled: boolean, captionPosition: 'left' \| 'right', noGap: boolean) {\n const captionClass = this.cx(this.getCaptionSizeClassName(), {\n [this.styles.caption(this.theme)]: true,\n [this.styles.captionLeft(this.theme)]: captionPosition === 'left',\n [this.styles.disabledCaption(this.theme)]: !!disabled,\n [this.styles.captionNoGap()]: noGap,\n });\n\n return <div className={captionClass}>{this.props.children}</div>;\n }\n\n private renderComment(disabled: boolean) {\n return (\n <div\n className={this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), {\n [this.styles.subcaptionDisabled(this.theme)]: !!disabled,\n })}\n >\n {this.props.comment}\n </div>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (this.keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private resetFocus = () => this.setState({ focusByTab: false });\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(event);\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}

package/components/Toggle/Toggle.mixins.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 export declare const toggleSizeMixin: (fontSize: string, toggleHeight: string, toggleWidth: string) => string;
 export declare const buttonSizeMixin: (labGrotesqueBaselineCompensation: string, fontSize: string, toggleHeight: string, toggleWidth: string, toggleBorderRadius: string, toggleButtonOffsetY: string) => string;
 export declare const captionSizeMixin: (fontSize: string, toggleHeight: string) => string;
+export declare const subcaptionMixin: (fontSize: string, lineHeight: string) => string;
+export declare const disabledTextColorMixin: (textColor: string) => string;
 export declare const handleMixin: (toggleHandleSize: string, toggleHandleBorderRadius: string) => string;
 export declare const containerSizeMixin: (toggleBorderRadius: string) => string;
 export declare const inputSizeMixin: (toggleHeight: string, toggleWidth: string) => string;

package/components/Toggle/Toggle.mixins.js CHANGED Viewed

@@ -12,6 +12,12 @@ export var buttonSizeMixin = function (labGrotesqueBaselineCompensation, fontSiz
 export var captionSizeMixin = function (fontSize, toggleHeight) {
     return "\n    line-height: ".concat(toggleHeight, ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
+export var subcaptionMixin = function (fontSize, lineHeight) {
+    return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n  ");
+};
+export var disabledTextColorMixin = function (textColor) {
+    return "\n    color: ".concat(textColor, ";\n  ");
+};
 export var handleMixin = function (toggleHandleSize, toggleHandleBorderRadius) {
     return "\n    border-radius: ".concat(toggleHandleBorderRadius, ";\n    height: ").concat(toggleHandleSize, ";\n    width: ").concat(toggleHandleSize, ";\n  ");
 };