feat(new-hope): add default values for combobox react-hook-form

Author: iljs

packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tsx

@@ -35,7 +35,7 @@ import { Ul, base, StyledArrow, IconArrowWrapper, StyledEmptyState } from './Com
 import type { ItemContext, ComboboxProps } from './Combobox.types';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
-import type { ItemOptionTransformed } from './ui/Inner/ui/Item/Item.types';
+import type { ItemOption, ItemOptionTransformed } from './ui/Inner/ui/Item/Item.types';
 import { SelectNative } from './ui/SelectNative/SelectNative';
 
 export const Context = createContext<ItemContext>({} as ItemContext);
@@ -382,10 +382,12 @@ export const comboboxRoot = (Root: RootProps<HTMLInputElement, Omit<ComboboxProp
             >
                 {name && (
                     <SelectNative
+                        items={valueToCheckedMap}
                         name={name}
                         value={internalValue}
                         multiple={multiple}
                         onChange={onChange}
+                        onSetValue={setInternalValue}
                         ref={ref as ForwardedRef<HTMLInputElement>}
                     />
                 )}

packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/SelectNative/SelectNative.tsx

@@ -3,34 +3,57 @@ import { useForkRef } from '@salutejs/plasma-core';
 
 import { createEvent } from '../../../../../utils';
 import { ComboboxProps } from '../../Combobox.types';
+import { ValueToCheckedMapType } from '../../hooks/getPathMaps';
 
 import { SelectHidden } from './SelectNative.styles';
 
 type Props = Pick<ComboboxProps, 'name' | 'value' | 'multiple'> & {
     onChange: (value: ChangeEvent<HTMLSelectElement> | null) => void;
+    onSetValue: (value: string) => void;
+    items: ValueToCheckedMapType;
 };
 
-export const SelectNative = forwardRef<HTMLInputElement, Props>(({ name, multiple, value, onChange }, ref) => {
-    const values = (multiple ? value : [value]) as string[];
-    const selectRef = useRef<HTMLSelectElement>(null);
-    const forkRef = useForkRef(selectRef, ref as any);
-
-    useEffect(() => {
-        const event = createEvent(selectRef);
-        if (onChange) {
-            onChange(event);
-        }
-    }, [values]);
-
-    return (
-        <>
-            <SelectHidden ref={forkRef} multiple={multiple} name={name} hidden value={multiple ? values : values[0]}>
-                {values.map((v) => (
-                    <option key={v} value={v}>
-                        {v}
-                    </option>
-                ))}
-            </SelectHidden>
-        </>
-    );
-});
+export const SelectNative = forwardRef<HTMLInputElement, Props>(
+    ({ name, multiple, items, value, onChange, onSetValue }, ref) => {
+        const values = (multiple ? value : [value]) as string[];
+        const selectRef = useRef<HTMLSelectElement>(null);
+        const forkRef = useForkRef(selectRef, ref as any);
+        const options = Array.from(items.keys());
+
+        useEffect(() => {
+            const event = createEvent(selectRef);
+            if (onChange) {
+                onChange(event);
+            }
+        }, [values]);
+
+        useEffect(() => {
+            if (selectRef.current) {
+                const valueInit = selectRef.current.value;
+                const item = options.find((v) => v === valueInit);
+
+                if (item) {
+                    onSetValue(item);
+                }
+            }
+        }, [selectRef]);
+
+        return (
+            <>
+                <SelectHidden
+                    ref={forkRef}
+                    multiple={multiple}
+                    name={name}
+                    hidden
+                    value={multiple ? values : values[0]}
+                >
+                    {options.map((v) => (
+                        <option key={v} value={v}>
+                            {v}
+                        </option>
+                    ))}
+                </SelectHidden>
+            </>
+        );
+    },
+);

packages/plasma-new-hope/src/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx

@@ -357,7 +357,6 @@ const SingleStory = (args: StorySelectProps) => {
         <div style={{ width: '400px' }}>
             <Combobox
                 {...args}
-                name="mau"
                 items={items}
                 value={value}
                 onChange={setValue}