@cloud-ru/ds-fields 1.0.2-preview-cd0cd6fb.0 → 1.0.2

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.2 (2026-08-20)
+
+### Bug Fixes
+
+- **FF-8879:** keep selected item label when items change in FieldSelect ([f42c100](https://github.com/cloud-ru-tech/snack-v2/commit/f42c100707a25c9bee46906f5a78b8624d1b3ecf))
+
 ## 1.0.1 (2026-08-18)
 
 **Note:** Version bump only for package @ds/fields

package/dist/cjs/components/FieldSelect/FieldSelect.js

@@ -61,13 +61,23 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
     }, [multiple, props.value, multipleLocal]);
     const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.VALIDATION_STATE.Error : validationState), [error, validationState]);
     const allItems = (0, react_1.useMemo)(() => [...(pinTop ?? []), ...items, ...(pinBottom ?? [])], [items, pinTop, pinBottom]);
+    // Выбранное значение переживает смену `items` (серверный поиск, ленивая подгрузка).
+    const seenItems = (0, react_1.useRef)(new Map());
+    const resolveItem = (0, react_1.useMemo)(() => {
+        for (const item of (0, utils_2.flatten)(allItems)) {
+            if (item.id !== undefined) {
+                seenItems.current.set(item.id, item);
+            }
+        }
+        return (id) => (0, utils_2.findItem)(allItems, id) ?? seenItems.current.get(id);
+    }, [allItems]);
     const selectedPairs = (0, react_1.useMemo)(() => {
         if (!multiple || multipleValue.length === 0) {
             return [];
         }
         // Неизвестное значение (ещё не загружены опции) показываем по его id, не теряем (паритет с легаси).
         return multipleValue.map(id => {
-            const item = (0, utils_2.findItem)(allItems, id);
+            const item = resolveItem(id);
             return {
                 id,
                 label: item ? (0, utils_2.extractLabel)(item) : String(id),
@@ -75,14 +85,14 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
                 appearance: (0, utils_2.extractAppearance)(item),
             };
         });
-    }, [allItems, multiple, multipleValue]);
+    }, [multiple, multipleValue, resolveItem]);
     const formatPair = (0, react_1.useCallback)((pair) => (selectedOptionFormatter ? selectedOptionFormatter(pair) : pair.label), [selectedOptionFormatter]);
     const selectedLabel = (0, react_1.useMemo)(() => {
         if (!multiple) {
             if (singleValue === undefined) {
                 return '';
             }
-            const item = (0, utils_2.findItem)(allItems, singleValue);
+            const item = resolveItem(singleValue);
             const label = item ? (0, utils_2.extractLabel)(item) : String(singleValue);
             return formatPair({ id: singleValue, label });
         }
@@ -93,7 +103,7 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
             return props.formatSelected(selectedPairs);
         }
         return selectedPairs.map(formatPair).join(', ');
-    }, [allItems, multiple, singleValue, selectedPairs, chips, props, formatPair]);
+    }, [multiple, singleValue, selectedPairs, chips, props, formatPair, resolveItem]);
     // Строка поиска: controlled через `search.value`, иначе локальный state. Auto-sync к выбранному
     // значению делаем через СТАБИЛЬНЫЙ setLocalInput, а не через setInputValue в deps эффекта —
     // иначе нестабильная ссылка сеттера зацикливает эффект (сбрасывала бы значение постоянно).

package/dist/cjs/components/FieldTextArea/FieldTextArea.js

@@ -24,11 +24,6 @@ exports.FieldTextArea = (0, react_1.forwardRef)(function FieldTextArea({ label =
     const copyButtonRef = (0, react_1.useRef)(null);
     const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
     const [hover, setHover] = (0, react_1.useState)(false);
-    // autosize меряет высоту до того, как ThemeScope навесит классы темы — пересчитываем после mount.
-    const [, remeasure] = (0, react_1.useReducer)((tick) => tick + 1, 0);
-    (0, react_1.useEffect)(() => {
-        remeasure();
-    }, []);
     const resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
     // controlled/uncontrolled: useValueControl держит внутреннее состояние при отсутствии `value`,
     // событие в `onChange` пробрасываем сами (useValueControl передаёт только значение).

package/dist/esm/components/FieldSelect/FieldSelect.js

@@ -16,7 +16,7 @@ import { useAdaptiveAutoFocus } from '../../hooks/index.js';
 import { copyTextToClipboard, getAcrylicProps, preventSlotMouseDown, stopSlotClickPropagation, toInputSize, useCopyButton, } from '../shared/index.js';
 import fieldStyles from '../shared/styles.module.css';
 import styles from './styles.module.css';
-import { extractAppearance, extractLabel, filterItems, findItem, isMultiple, TAG_SIZE_MAP } from './utils.js';
+import { extractAppearance, extractLabel, filterItems, findItem, flatten, isMultiple, TAG_SIZE_MAP, } from './utils.js';
 export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
     const { label = '', labelTooltip, caption, hint, error, validationState = VALIDATION_STATE.Default, showHintIcon, length, required, size = SIZE.M, className, fieldClassName, items, pinTop, pinBottom, placeholder = '', iconBefore, prefix, postfix, disabled, readonly: readOnly, background = true, open: openProp, onOpenChange, placement, widthStrategy = 'eq', searchable = true, search, autocomplete = false, addOptionByEnter = false, resetSearchOnOptionSelection = true, showClearButton = true, showCopyButton = true, onCopyButtonClick, id, name, autoFocus, layoutPresets, onFocus: onFocusProp, onBlur: onBlurProp, enableFuzzySearch = true, selectedOptionFormatter, footer, footerActiveElementsRefs, loading, noDataState, noResultsState, errorDataState, dataError, dataFiltered, virtualized, scrollToSelectedItem, limitedScrollHeight, untouchableScrollbars, closeOnPopstate, onKeyDown: onKeyDownProp, 'data-test-id': dataTestId = TEST_IDS.fieldSelect, } = props;
     const multiple = isMultiple(props);
@@ -55,13 +55,23 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
     }, [multiple, props.value, multipleLocal]);
     const effectiveValidationState = useMemo(() => (error ? VALIDATION_STATE.Error : validationState), [error, validationState]);
     const allItems = useMemo(() => [...(pinTop ?? []), ...items, ...(pinBottom ?? [])], [items, pinTop, pinBottom]);
+    // Выбранное значение переживает смену `items` (серверный поиск, ленивая подгрузка).
+    const seenItems = useRef(new Map());
+    const resolveItem = useMemo(() => {
+        for (const item of flatten(allItems)) {
+            if (item.id !== undefined) {
+                seenItems.current.set(item.id, item);
+            }
+        }
+        return (id) => findItem(allItems, id) ?? seenItems.current.get(id);
+    }, [allItems]);
     const selectedPairs = useMemo(() => {
         if (!multiple || multipleValue.length === 0) {
             return [];
         }
         // Неизвестное значение (ещё не загружены опции) показываем по его id, не теряем (паритет с легаси).
         return multipleValue.map(id => {
-            const item = findItem(allItems, id);
+            const item = resolveItem(id);
             return {
                 id,
                 label: item ? extractLabel(item) : String(id),
@@ -69,14 +79,14 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
                 appearance: extractAppearance(item),
             };
         });
-    }, [allItems, multiple, multipleValue]);
+    }, [multiple, multipleValue, resolveItem]);
     const formatPair = useCallback((pair) => (selectedOptionFormatter ? selectedOptionFormatter(pair) : pair.label), [selectedOptionFormatter]);
     const selectedLabel = useMemo(() => {
         if (!multiple) {
             if (singleValue === undefined) {
                 return '';
             }
-            const item = findItem(allItems, singleValue);
+            const item = resolveItem(singleValue);
             const label = item ? extractLabel(item) : String(singleValue);
             return formatPair({ id: singleValue, label });
         }
@@ -87,7 +97,7 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
             return props.formatSelected(selectedPairs);
         }
         return selectedPairs.map(formatPair).join(', ');
-    }, [allItems, multiple, singleValue, selectedPairs, chips, props, formatPair]);
+    }, [multiple, singleValue, selectedPairs, chips, props, formatPair, resolveItem]);
     // Строка поиска: controlled через `search.value`, иначе локальный state. Auto-sync к выбранному
     // значению делаем через СТАБИЛЬНЫЙ setLocalInput, а не через setInputValue в deps эффекта —
     // иначе нестабильная ссылка сеттера зацикливает эффект (сбрасывала бы значение постоянно).

package/dist/esm/components/FieldTextArea/FieldTextArea.js

@@ -5,7 +5,7 @@ import { BAR_HIDE_STRATEGY, RESIZE, Scroll, SIZE as SCROLL_SIZE } from '@cloud-r
 import { extractSupportProps, useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState, } from 'react';
+import { forwardRef, useCallback, useMemo, useRef, useState, } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { TEST_IDS } from '../../constants.js';
 import { useAdaptiveAutoFocus } from '../../hooks/index.js';
@@ -18,11 +18,6 @@ export const FieldTextArea = forwardRef(function FieldTextArea({ label = '', lab
     const copyButtonRef = useRef(null);
     const [focusVisible, setFocusVisible] = useState(false);
     const [hover, setHover] = useState(false);
-    // autosize меряет высоту до того, как ThemeScope навесит классы темы — пересчитываем после mount.
-    const [, remeasure] = useReducer((tick) => tick + 1, 0);
-    useEffect(() => {
-        remeasure();
-    }, []);
     const resolvedAutoFocus = useAdaptiveAutoFocus(autoFocus, layoutPresets);
     // controlled/uncontrolled: useValueControl держит внутреннее состояние при отсутствии `value`,
     // событие в `onChange` пробрасываем сами (useValueControl передаёт только значение).