@ssa-ui-kit/core 1.0.9 → 1.0.10

package/package.json

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

package/src/components/Typeahead/Typeahead.context.ts

@@ -52,9 +52,6 @@ export const TypeaheadContext = React.createContext<UseTypeaheadResult>({
   handleRemoveSelectedClick: () => () => {
     /* no-op */
   },
-  handleInputBlur: () => {
-    /* no-op */
-  },
   handleSelectedClick: () => {
     /* no-op */
   },

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

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

package/src/components/Typeahead/Typeahead.tsx

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

package/src/components/Typeahead/components/MultipleTrigger.tsx

@@ -67,7 +67,6 @@ export const MultipleTrigger = () => {
               onClick: context.handleInputClick,
               onKeyDown: context.handleInputKeyDown,
               onChange: context.handleInputChange,
-              onBlur: context.handleInputBlur,
               value: context.inputValue,
               autoComplete: 'off',
               className: ['typeahead-input', S.TypeaheadInput(theme)].join(' '),

package/src/components/Typeahead/components/SingleTrigger.tsx

@@ -26,7 +26,6 @@ export const SingleTrigger = () => {
             onClick: context.handleInputClick,
             onKeyDown: context.handleInputKeyDown,
             onChange: context.handleInputChange,
-            onBlur: context.handleInputBlur,
             value: context.inputValue,
             autoComplete: 'off',
             className: ['typeahead-input', S.TypeaheadInput(theme)].join(' '),

package/src/components/Typeahead/types.ts

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

package/src/components/Typeahead/useTypeahead.tsx

@@ -29,7 +29,7 @@ export const useTypeahead = ({
   register,
   setValue,
   onChange,
-  onBlur,
+  onEmptyChange,
   renderOption,
 }: UseTypeaheadProps) => {
   const inputName = `${name}-text`;
@@ -40,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>('');
@@ -70,8 +71,16 @@ export const useTypeahead = ({
         shouldDirty: !isFirstRender,
       });
     }
+
+    if (!isFirstRender) {
+      setIsEmpty(!selected.length);
+    }
   }, [selected]);
 
+  useEffect(() => {
+    onEmptyChange?.(isEmpty);
+  }, [isEmpty]);
+
   useEffect(() => {
     if (isDisabled && isOpen) {
       setIsOpen(false);
@@ -341,7 +350,6 @@ export const useTypeahead = ({
     handleInputChange,
     handleInputClick,
     handleInputKeyDown,
-    handleInputBlur: onBlur,
     handleSelectedClick,
     handleRemoveSelectedClick,
   };