@ssa-ui-kit/core 1.0.7 → 1.0.9

package/package.json

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

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

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

package/src/components/Typeahead/Typeahead.spec.tsx

@@ -60,7 +60,9 @@ describe('Typeahead', () => {
   it('Renders without a selected item', async () => {
     const { user, mockOnChange, getByRole, queryByRole, getByTestId } = setup();
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', undefined);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', undefined, {
+      shouldDirty: false,
+    });
 
     const mainElement = getByTestId('typeahead');
 
@@ -104,7 +106,9 @@ describe('Typeahead', () => {
       label: 'Label',
     });
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs, {
+      shouldDirty: false,
+    });
 
     let mainElement = getByTestId('typeahead');
 
@@ -164,7 +168,9 @@ describe('Typeahead', () => {
       />,
     );
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', []);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', [], {
+      shouldDirty: false,
+    });
 
     let mainElement = getByTestId('typeahead');
 
@@ -203,7 +209,9 @@ describe('Typeahead', () => {
       label: 'Label',
     });
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs, {
+      shouldDirty: false,
+    });
 
     const mainElement = getByTestId('typeahead');
 
@@ -243,7 +251,9 @@ describe('Typeahead', () => {
       label: 'Label',
     });
 
-    expect(mockOnChange).lastCalledWith('typeahead-dropdown', selectedIDs[0]);
+    expect(mockOnChange).lastCalledWith('typeahead-dropdown', selectedIDs[0], {
+      shouldDirty: true,
+    });
 
     let inputEl = screen.queryByTestId('typeahead-input');
     expect(inputEl).toHaveValue('First');
@@ -345,7 +355,9 @@ describe('Typeahead', () => {
       label: 'Label',
     });
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs, {
+      shouldDirty: false,
+    });
 
     let mainElement = getByTestId('typeahead');
 
@@ -448,7 +460,9 @@ describe('Typeahead', () => {
       label: 'Label',
     });
 
-    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs);
+    expect(mockOnChange).toBeCalledWith('typeahead-dropdown', selectedIDs, {
+      shouldDirty: false,
+    });
 
     let mainElement = getByTestId('typeahead');
     let toggleElement = within(mainElement).getByRole('combobox');

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   FieldError,
   FieldValues,
@@ -63,6 +63,9 @@ export const Basic: StoryObj = (args: TypeaheadProps) => {
       <Typeahead
         initialSelectedItems={[items[2].id]}
         isDisabled={args.isDisabled}
+        onBlur={() => {
+          console.log('>>>onBlur event');
+        }}
         name={'typeahead-dropdown'}
         label="Label"
         helperText="Helper Text"
@@ -86,19 +89,56 @@ Basic.args = { isDisabled: false };
 
 export const Multiple: StoryObj = (args: TypeaheadProps) => {
   const useFormResult = useForm<FieldValues>();
-  const { handleSubmit, register, setValue } = useFormResult;
+  const {
+    handleSubmit,
+    register,
+    setValue,
+    setError,
+    clearErrors,
+    watch,
+    formState: { errors, isDirty },
+  } = useFormResult;
+  const fieldName = 'typeahead-dropdown';
+  const error = errors[fieldName]
+    ? {
+        type: errors[fieldName].type,
+        message: errors[fieldName].message,
+      }
+    : undefined;
+
   const onSubmit: SubmitHandler<FieldValues> = (data) => console.log(data);
+  const fieldWatch = watch(fieldName);
+  useEffect(() => {
+    if (isDirty) {
+      if (Array.isArray(fieldWatch) && !fieldWatch.length) {
+        setError(fieldName, {
+          message: 'Required field',
+          type: 'required',
+        });
+      } else {
+        clearErrors(fieldName);
+      }
+    }
+  }, [fieldWatch, isDirty]);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Typeahead
         initialSelectedItems={[items[2].id, items[1].id]}
         isMultiple
         isDisabled={args.isDisabled}
+        onBlur={() => {
+          console.log('>>>onBlur event');
+        }}
         label="Label"
         helperText="Helper Text"
         register={register}
         setValue={setValue}
-        name={'typeahead-dropdown'}
+        validationSchema={{
+          required: 'Required',
+        }}
+        name={fieldName}
+        error={error as FieldError}
         renderOption={({ label, input }) => highlightInputMatch(label, input)}>
         {items.map(({ label, value, id }) => (
           <TypeaheadOption key={id} value={id} label={label || value}>

package/src/components/Typeahead/Typeahead.tsx

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

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

@@ -67,6 +67,7 @@ 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(' '),
@@ -78,9 +79,10 @@ export const MultipleTrigger = () => {
         <input
           type="text"
           data-testid="typeahead-input"
-          aria-hidden
+          aria-hidden={context.isOpen}
           readOnly
           value={context.firstSuggestion}
+          tabIndex={-1}
           disabled={context.isDisabled}
           className={[
             'typeahead-input',
@@ -91,7 +93,6 @@ export const MultipleTrigger = () => {
         />
         <input
           type="hidden"
-          aria-hidden
           readOnly
           value={context.selectedItems as string[]}
           {...context.register?.(context.name, context.validationSchema)}
@@ -103,7 +104,8 @@ export const MultipleTrigger = () => {
           data-testid="remove-all-button"
           endIcon={<Icon name="cross" size={8} tooltip="Remove all" />}
           css={{
-            padding: '0 14px 0 10px',
+            padding: '0 10px',
+            marginRight: 4,
             position: 'absolute',
             right: 0,
             zIndex: 10,

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

@@ -26,6 +26,7 @@ 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(' '),
@@ -37,9 +38,10 @@ export const SingleTrigger = () => {
       <input
         type="text"
         data-testid="typeahead-input"
-        aria-hidden
+        aria-hidden={context.isOpen}
         readOnly
         value={context.firstSuggestion}
+        tabIndex={-1}
         className={[
           'typeahead-input',
           S.TypeaheadInput(theme),
@@ -49,7 +51,6 @@ export const SingleTrigger = () => {
       />
       <input
         type="hidden"
-        aria-hidden
         readOnly
         value={(context.selectedItems[0] || '') as string | undefined}
         {...context.register?.(context.name, context.validationSchema)}
@@ -60,7 +61,8 @@ export const SingleTrigger = () => {
           data-testid="remove-all-button"
           endIcon={<Icon name="cross" size={8} tooltip="Remove" />}
           css={{
-            padding: '0 14px 0 10px',
+            padding: '0 10px',
+            marginRight: 4,
             position: 'absolute',
             right: -28,
             zIndex: 10,

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;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
   renderOption?: (data: {
     value: string | number;
     input: string;
@@ -48,6 +49,7 @@ export type UseTypeaheadProps = Pick<
   | 'children'
   | 'isMultiple'
   | 'onChange'
+  | 'onBlur'
   | 'renderOption'
   | 'isOpen'
   | 'className'

package/src/components/Typeahead/useTypeahead.tsx

@@ -29,6 +29,7 @@ export const useTypeahead = ({
   register,
   setValue,
   onChange,
+  onBlur,
   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 [isFirstRender, setFirstRender] = useState<boolean>(true);
   const [items, setItems] = useState<Array<React.ReactElement> | undefined>();
   const [inputValue, setInputValue] = useState<string>('');
   const [status, setStatus] = useState<'basic' | 'success' | 'error'>('basic');
@@ -58,11 +60,15 @@ export const useTypeahead = ({
 
   useEffect(() => {
     if (isMultiple) {
-      setValue?.(name, selected);
+      setValue?.(name, selected, {
+        shouldDirty: !isFirstRender,
+      });
       setInputValue('');
       setFirstSuggestion('');
     } else {
-      setValue?.(name, selected.length ? selected[0] : undefined);
+      setValue?.(name, selected.length ? selected[0] : undefined, {
+        shouldDirty: !isFirstRender,
+      });
     }
   }, [selected]);
 
@@ -85,6 +91,7 @@ export const useTypeahead = ({
     if (error) {
       useFormResult.setError(name, error);
     } else {
+      setStatus('basic');
       useFormResult.resetField(name);
     }
   }, [error]);
@@ -108,6 +115,7 @@ export const useTypeahead = ({
     });
     setOptionsWithKey(keyedOptions);
     setItems(childItems);
+    setFirstRender(false);
   }, [initialSelectedItems, children]);
 
   useEffect(() => {
@@ -216,7 +224,8 @@ export const useTypeahead = ({
     setFirstSuggestion('');
     inputRef.current?.focus();
     setStatus('basic');
-    useFormResult.clearErrors();
+    useFormResult.clearErrors(name);
+    useFormResult.trigger(name);
     onChange && onChange(changingValue, isNewSelected);
   };
 
@@ -230,6 +239,7 @@ export const useTypeahead = ({
     setInputValue('');
     setIsOpen(false);
     setFirstSuggestion('');
+    useFormResult.trigger(name);
     inputRef.current?.focus();
   };
 
@@ -247,13 +257,16 @@ export const useTypeahead = ({
   const handleInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (
     event,
   ) => {
-    if (['Tab', 'Space'].includes(event.code) && !firstSuggestion) {
+    if (['Space'].includes(event.code) && !firstSuggestion) {
       setIsOpen(true);
       inputRef.current?.focus();
       event.stopPropagation();
       event.preventDefault();
-    }
-    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(),
@@ -264,8 +277,7 @@ export const useTypeahead = ({
       }
       event.preventDefault();
       return false;
-    }
-    if (
+    } else if (
       isMultiple &&
       event.code === 'Backspace' &&
       selected.length > 0 &&
@@ -274,8 +286,7 @@ export const useTypeahead = ({
       handleChange(selected[selected.length - 1]);
       event.preventDefault();
       return false;
-    }
-    if (!isOpen) {
+    } else if (!isOpen && firstSuggestion !== inputValue) {
       setIsOpen(true);
     }
   };
@@ -330,6 +341,7 @@ export const useTypeahead = ({
     handleInputChange,
     handleInputClick,
     handleInputKeyDown,
+    handleInputBlur: onBlur,
     handleSelectedClick,
     handleRemoveSelectedClick,
   };