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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-fields",
-  "version": "1.0.2-preview-cd0cd6fb.0",
+  "version": "1.0.2",
   "description": "Поля ввода с единой обёрткой label/caption/hint/error и общими осями size/validationState — текст, пароль, число, ползунок, дата, время, выбор, цвет.",
   "repository": {
     "type": "git",
@@ -39,24 +39,24 @@
     "classnames": "^2.5.1",
     "merge-refs": "^2.0.0",
     "react-textarea-autosize": "^8.5.9",
-    "@cloud-ru/ds-button": "1.0.0",
-    "@cloud-ru/ds-adaptive": "1.0.0",
-    "@cloud-ru/ds-bottom-sheet": "1.0.0",
-    "@cloud-ru/ds-calendar": "1.0.2-preview-cd0cd6fb.0",
-    "@cloud-ru/ds-color-picker": "1.0.0",
-    "@cloud-ru/ds-divider": "1.0.0",
-    "@cloud-ru/ds-dropdown": "1.0.0",
-    "@cloud-ru/ds-field-decorator": "1.0.0",
-    "@cloud-ru/ds-input-private": "1.0.0",
-    "@cloud-ru/ds-list": "1.1.1-preview-cd0cd6fb.0",
-    "@cloud-ru/ds-icons": "1.0.0",
-    "@cloud-ru/ds-loader": "1.0.0",
-    "@cloud-ru/ds-materials": "1.0.0",
-    "@cloud-ru/ds-scroll": "1.0.0",
-    "@cloud-ru/ds-slider": "1.0.0",
-    "@cloud-ru/ds-skeleton": "1.0.0",
-    "@cloud-ru/ds-tooltip": "1.0.0",
-    "@cloud-ru/ds-tag": "1.0.0",
-    "@cloud-ru/ds-utils": "1.0.0"
+    "@cloud-ru/ds-adaptive": "^1.0.0",
+    "@cloud-ru/ds-button": "^1.0.0",
+    "@cloud-ru/ds-bottom-sheet": "^1.0.0",
+    "@cloud-ru/ds-calendar": "^1.0.1",
+    "@cloud-ru/ds-color-picker": "^1.0.0",
+    "@cloud-ru/ds-divider": "^1.0.0",
+    "@cloud-ru/ds-dropdown": "^1.0.0",
+    "@cloud-ru/ds-field-decorator": "^1.0.0",
+    "@cloud-ru/ds-icons": "^1.0.0",
+    "@cloud-ru/ds-list": "^1.1.0",
+    "@cloud-ru/ds-input-private": "^1.0.0",
+    "@cloud-ru/ds-loader": "^1.0.0",
+    "@cloud-ru/ds-materials": "^1.0.0",
+    "@cloud-ru/ds-scroll": "^1.0.0",
+    "@cloud-ru/ds-skeleton": "^1.0.0",
+    "@cloud-ru/ds-slider": "^1.0.0",
+    "@cloud-ru/ds-tooltip": "^1.0.0",
+    "@cloud-ru/ds-tag": "^1.0.1",
+    "@cloud-ru/ds-utils": "^1.0.0"
   }
 }

package/src/components/FieldSelect/FieldSelect.tsx

@@ -37,7 +37,16 @@ import {
 import fieldStyles from '../shared/styles.module.scss';
 import styles from './styles.module.scss';
 import { FieldSelectProps } from './types';
-import { extractAppearance, extractLabel, filterItems, findItem, isMultiple, TAG_SIZE_MAP } from './utils';
+import {
+  extractAppearance,
+  extractLabel,
+  filterItems,
+  findItem,
+  flatten,
+  isMultiple,
+  TAG_SIZE_MAP,
+  WithIdContent,
+} from './utils';
 
 export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(function FieldSelect(props, ref) {
   const {
@@ -150,6 +159,19 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
 
   const allItems = useMemo(() => [...(pinTop ?? []), ...items, ...(pinBottom ?? [])], [items, pinTop, pinBottom]);
 
+  // Выбранное значение переживает смену `items` (серверный поиск, ленивая подгрузка).
+  const seenItems = useRef(new Map<ItemId, WithIdContent>());
+
+  const resolveItem = useMemo(() => {
+    for (const item of flatten(allItems)) {
+      if (item.id !== undefined) {
+        seenItems.current.set(item.id, item);
+      }
+    }
+
+    return (id: ItemId) => findItem(allItems, id) ?? seenItems.current.get(id);
+  }, [allItems]);
+
   const selectedPairs = useMemo(() => {
     if (!multiple || multipleValue.length === 0) {
       return [];
@@ -157,7 +179,7 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
 
     // Неизвестное значение (ещё не загружены опции) показываем по его id, не теряем (паритет с легаси).
     return multipleValue.map(id => {
-      const item = findItem(allItems, id);
+      const item = resolveItem(id);
 
       return {
         id,
@@ -166,7 +188,7 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
         appearance: extractAppearance(item),
       };
     });
-  }, [allItems, multiple, multipleValue]);
+  }, [multiple, multipleValue, resolveItem]);
 
   const formatPair = useCallback(
     (pair: { id: ItemId; label: string }) => (selectedOptionFormatter ? selectedOptionFormatter(pair) : pair.label),
@@ -179,7 +201,7 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
         return '';
       }
 
-      const item = findItem(allItems, singleValue);
+      const item = resolveItem(singleValue);
       const label = item ? extractLabel(item) : String(singleValue);
 
       return formatPair({ id: singleValue, label });
@@ -194,7 +216,7 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
     }
 
     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/src/components/FieldTextArea/FieldTextArea.tsx

@@ -14,9 +14,7 @@ import {
   MouseEvent,
   ReactNode,
   useCallback,
-  useEffect,
   useMemo,
-  useReducer,
   useRef,
   useState,
 } from 'react';
@@ -172,12 +170,6 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
   const [focusVisible, setFocusVisible] = useState(false);
   const [hover, setHover] = useState(false);
 
-  // autosize меряет высоту до того, как ThemeScope навесит классы темы — пересчитываем после mount.
-  const [, remeasure] = useReducer((tick: number) => tick + 1, 0);
-  useEffect(() => {
-    remeasure();
-  }, []);
-
   const resolvedAutoFocus = useAdaptiveAutoFocus(autoFocus, layoutPresets);
 
   // controlled/uncontrolled: useValueControl держит внутреннее состояние при отсутствии `value`,