@ssa-ui-kit/core 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/Typeahead/Typeahead.stories.tsx

@@ -63,6 +63,9 @@ export const Basic: StoryObj = (args: TypeaheadProps) => {
       <Typeahead
         initialSelectedItems={[items[2].id]}
         isDisabled={args.isDisabled}
+        onEmptyChange={(isEmpty) => {
+          console.log('>>>onEmptyChange event', isEmpty);
+        }}
         name={'typeahead-dropdown'}
         label="Label"
         helperText="Helper Text"
@@ -124,6 +127,9 @@ export const Multiple: StoryObj = (args: TypeaheadProps) => {
         initialSelectedItems={[items[2].id, items[1].id]}
         isMultiple
         isDisabled={args.isDisabled}
+        onEmptyChange={(isEmpty) => {
+          console.log('>>>onEmptyChange event', isEmpty);
+        }}
         label="Label"
         helperText="Helper Text"
         register={register}

package/src/components/Typeahead/Typeahead.tsx

@@ -45,6 +45,7 @@ export const Typeahead = ({
   setValue,
   register,
   onChange,
+  onEmptyChange,
   renderOption,
 }: TypeaheadProps) => {
   const theme = useTheme();
@@ -67,6 +68,7 @@ export const Typeahead = ({
     setValue,
     register,
     onChange,
+    onEmptyChange,
     renderOption,
   });
 

package/src/components/Typeahead/types.ts

@@ -34,6 +34,7 @@ export interface TypeaheadProps {
   setValue?: UseFormSetValue<FieldValues>;
   register?: UseFormReturn['register'];
   onChange?: (selectedItem: TypeaheadValue, isSelected: boolean) => void;
+  onEmptyChange?: (isEmpty?: boolean) => void;
   renderOption?: (data: {
     value: string | number;
     input: string;
@@ -48,6 +49,7 @@ export type UseTypeaheadProps = Pick<
   | 'children'
   | 'isMultiple'
   | 'onChange'
+  | 'onEmptyChange'
   | 'renderOption'
   | 'isOpen'
   | 'className'

package/src/components/Typeahead/useTypeahead.tsx

@@ -29,6 +29,7 @@ export const useTypeahead = ({
   register,
   setValue,
   onChange,
+  onEmptyChange,
   renderOption,
 }: UseTypeaheadProps) => {
   const inputName = `${name}-text`;
@@ -39,6 +40,7 @@ export const useTypeahead = ({
   const [optionsWithKey, setOptionsWithKey] = useState<
     Record<number | string, Record<string, string | number>>
   >({});
+  const [isEmpty, setIsEmpty] = useState<boolean>();
   const [isFirstRender, setFirstRender] = useState<boolean>(true);
   const [items, setItems] = useState<Array<React.ReactElement> | undefined>();
   const [inputValue, setInputValue] = useState<string>('');
@@ -69,8 +71,16 @@ export const useTypeahead = ({
         shouldDirty: !isFirstRender,
       });
     }
+
+    if (!isFirstRender) {
+      setIsEmpty(!selected.length);
+    }
   }, [selected]);
 
+  useEffect(() => {
+    onEmptyChange?.(isEmpty);
+  }, [isEmpty]);
+
   useEffect(() => {
     if (isDisabled && isOpen) {
       setIsOpen(false);
@@ -261,7 +271,11 @@ export const useTypeahead = ({
       inputRef.current?.focus();
       event.stopPropagation();
       event.preventDefault();
-    } else if (['Tab', 'Enter'].includes(event.code) && firstSuggestion) {
+    } else if (
+      ['Tab', 'Enter'].includes(event.code) &&
+      firstSuggestion &&
+      firstSuggestion !== inputValue
+    ) {
       const foundItem = Object.values(optionsWithKey).find(
         (item) =>
           `${item.label}`.toLowerCase() === firstSuggestion.toLowerCase(),
@@ -281,7 +295,7 @@ export const useTypeahead = ({
       handleChange(selected[selected.length - 1]);
       event.preventDefault();
       return false;
-    } else if (!isOpen) {
+    } else if (!isOpen && firstSuggestion !== inputValue) {
       setIsOpen(true);
     }
   };