@ssa-ui-kit/core 2.15.0-canary-6bf2bcc-20250506 → 2.15.0-canary-8972259-20250507

package/dist/components/Typeahead/useTypeahead.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { OpenChangeReason } from '@floating-ui/react';
-import { TypeaheadOptionProps, UseTypeaheadProps } from './types';
-export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems, defaultSelectedItems, isDisabled, isMultiple, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, }: UseTypeaheadProps) => {
+import { TypeaheadOptionProps, TypeaheadValue, UseTypeaheadProps } from './types';
+export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, }: UseTypeaheadProps) => {
     isOpen: boolean;
     isDisabled: boolean | undefined;
     optionsWithKey: Record<string | number, TypeaheadOptionProps>;
-    selectedItems: import("./types").TypeaheadValue[];
+    selectedItems: TypeaheadValue[];
     inputRef: React.RefObject<HTMLInputElement>;
     firstSuggestion: string;
     isMultiple: boolean | undefined;
@@ -27,7 +27,7 @@ export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems, d
     useFormResult: import("react-hook-form").UseFormReturn<import("react-hook-form").FieldValues, any, undefined>;
     register: import("react-hook-form").UseFormRegister<import("react-hook-form").FieldValues>;
     setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues>;
-    onChange: ((selectedItem: import("./types").TypeaheadValue, isSelected: boolean) => void) | undefined;
+    onChange: ((selectedItem: TypeaheadValue, isSelected: boolean) => void) | undefined;
     handleClearAll: (e: React.MouseEvent) => void;
     handleOpenChange: (open: boolean, event: Event, reason?: OpenChangeReason) => void;
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/index.js

@@ -17559,7 +17559,7 @@ const findExactMatch = (input, options) => {
 const useTypeahead = ({
   name = 'typeahead-input',
   isOpen: isInitOpen,
-  selectedItems,
+  selectedItems: providedSelectedItems,
   defaultSelectedItems,
   isDisabled,
   isMultiple,
@@ -17582,12 +17582,33 @@ const useTypeahead = ({
   renderOption
 }) => {
   const inputName = `${name}-text`;
+  const defaultForm = (0,external_react_hook_form_namespaceObject.useForm)();
+  const form = (0,external_react_hook_form_namespaceObject.useFormContext)() ?? defaultForm;
+  const {
+    register,
+    setValue,
+    watch
+  } = form;
+  const formFieldValue = watch(name);
+  const controlledValue = (() => {
+    if (providedSelectedItems) {
+      return providedSelectedItems;
+    }
+    // controlledValue should be undefined if defaultSelectedItems is provided
+    if (defaultSelectedItems) {
+      return;
+    }
+    if (isMultiple) {
+      return Array.isArray(formFieldValue) ? formFieldValue : [];
+    }
+    return ['number', 'string'].includes(typeof formFieldValue) ? [formFieldValue] : [];
+  })();
   const [isOpen, _setIsOpen] = (0,hooks_namespaceObject.useUncontrolled)({
     defaultValue: isInitOpen,
     finalValue: false
   });
-  const [selected, setSelected] = (0,hooks_namespaceObject.useUncontrolled)({
-    value: selectedItems,
+  const [selectedItems, setSelected] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: controlledValue,
     defaultValue: defaultSelectedItems,
     finalValue: []
   });
@@ -17596,26 +17617,11 @@ const useTypeahead = ({
     ref: inputRef
   } = (0,hooks_namespaceObject.useElementSize)();
   const triggerRef = (0,external_react_namespaceObject.useRef)(null);
-  const defaultForm = (0,external_react_hook_form_namespaceObject.useForm)();
-  const form = (0,external_react_hook_form_namespaceObject.useFormContext)() ?? defaultForm;
-  const {
-    register,
-    setValue
-  } = form;
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (!selected.length) {
-      return;
-    }
-    if (isMultiple) {
-      setValue?.(name, selected, {
-        shouldDirty: false
-      });
-    } else {
-      setValue?.(name, selected[0], {
-        shouldDirty: false
-      });
-    }
-  }, []);
+  (0,external_react_hook_form_namespaceObject.useController)({
+    name,
+    rules: validationSchema,
+    defaultValue: isMultiple ? selectedItems : selectedItems[0]
+  });
   const typeaheadId = (0,external_react_namespaceObject.useId)();
   const optionsWithKey = (0,external_react_namespaceObject.useMemo)(() => {
     const opts = {};
@@ -17629,8 +17635,8 @@ const useTypeahead = ({
   const inputValue = (0,external_react_namespaceObject.useMemo)(() => {
     if (isMultiple) return rawInput ?? '';
     if (rawInput != null) return rawInput;
-    return selected.length === 1 ? optionsWithKey[selected[0]]?.label?.toString() || '' : '';
-  }, [isMultiple, rawInput, selected, optionsWithKey]);
+    return selectedItems.length === 1 ? optionsWithKey[selectedItems[0]]?.label?.toString() || '' : '';
+  }, [isMultiple, rawInput, selectedItems, optionsWithKey]);
   const filteredChildren = (0,external_react_namespaceObject.useMemo)(() => {
     // if filtering is disabled, or there's no input, show all
     if (!filterOptions || !inputValue) return external_react_default().Children.toArray(children);
@@ -17648,7 +17654,7 @@ const useTypeahead = ({
   const items = (0,external_react_namespaceObject.useMemo)(() => {
     return filteredChildren.map((child, index) => {
       if (! /*#__PURE__*/external_react_default().isValidElement(child)) return null;
-      const isActive = selected.includes(child.props.value);
+      const isActive = selectedItems.includes(child.props.value);
       const {
         value,
         label,
@@ -17680,7 +17686,7 @@ const useTypeahead = ({
         }) ?? child.props.children ?? label ?? value
       });
     });
-  }, [children, selected, inputValue]);
+  }, [children, selectedItems, inputValue]);
   const firstSuggestion = (0,external_react_namespaceObject.useMemo)(() => {
     if (!inputValue) return '';
     const needle = inputValue.toLowerCase();
@@ -17705,8 +17711,8 @@ const useTypeahead = ({
     resetInput = true
   }) => {
     if (isDisabled || value == null) return;
-    const alreadySelected = selected.includes(value);
-    const updatedSelected = isMultiple ? alreadySelected ? selected.filter(item => item !== value) : [...selected, value] : alreadySelected ? [] : [value];
+    const alreadySelected = selectedItems.includes(value);
+    const updatedSelected = isMultiple ? alreadySelected ? selectedItems.filter(item => item !== value) : [...selectedItems, value] : alreadySelected ? [] : [value];
     const fieldValue = isMultiple ? updatedSelected : updatedSelected[0];
     setSelected(updatedSelected);
     setValue?.(name, fieldValue);
@@ -17747,9 +17753,9 @@ const useTypeahead = ({
       return;
     }
     // unset selected value if not fully matched
-    if (!isMultiple && selected.length > 0) {
+    if (!isMultiple && selectedItems.length > 0) {
       handleChange({
-        value: selected[0],
+        value: selectedItems[0],
         shouldClose: false,
         resetInput: false
       });
@@ -17769,15 +17775,14 @@ const useTypeahead = ({
       const match = findExactMatch(firstSuggestion, optionsWithKey);
       if (match) {
         handleChange({
-          value: match.value,
-          shouldClose: false
+          value: match.value
         });
       }
       e.preventDefault();
       return;
     }
-    if (isMultiple && e.code === 'Backspace' && selected.length && !inputValue) {
-      const lastSelected = selected[selected.length - 1];
+    if (isMultiple && e.code === 'Backspace' && selectedItems.length && !inputValue) {
+      const lastSelected = selectedItems[selectedItems.length - 1];
       handleChange({
         value: lastSelected,
         shouldClose: false
@@ -17802,8 +17807,8 @@ const useTypeahead = ({
       return;
     }
     setIsOpen(open);
-    if (!isMultiple && selected.length > 0) {
-      const selectedValue = selected[0];
+    if (!isMultiple && selectedItems.length > 0) {
+      const selectedValue = selectedItems[0];
       const label = optionsWithKey[selectedValue]?.label;
       setRawInput(label ? String(label) : null);
       return;
@@ -17820,7 +17825,7 @@ const useTypeahead = ({
     isOpen,
     isDisabled,
     optionsWithKey,
-    selectedItems: selected,
+    selectedItems,
     inputRef,
     firstSuggestion,
     isMultiple,
@@ -18013,11 +18018,6 @@ const MultipleTrigger = () => {
         disabled: context.isDisabled,
         className: ['typeahead-input', TypeaheadInput(theme), TypeaheadInputPlaceholder].join(' '),
         ...typeaheadInputAdditionalProps
-      }), (0,jsx_runtime_namespaceObject.jsx)("input", {
-        type: "hidden",
-        readOnly: true,
-        value: context.selectedItems,
-        ...context.register?.(context.name, context.validationSchema)
       })]
     }), !context.isDisabled && context.selectedItems.length ? (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       variant: "tertiary",
@@ -18073,11 +18073,6 @@ const SingleTrigger = () => {
       tabIndex: -1,
       className: ['typeahead-input', TypeaheadInput(theme), TypeaheadInputPlaceholder].join(' '),
       ...typeaheadInputAdditionalProps
-    }), (0,jsx_runtime_namespaceObject.jsx)("input", {
-      type: "hidden",
-      readOnly: true,
-      value: context.selectedItems[0] || '',
-      ...context.register?.(context.name, context.validationSchema)
     }), !context.isDisabled && context.selectedItems.length ? (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       variant: "tertiary",
       "data-testid": "remove-all-button",