@ssa-ui-kit/core 1.0.7 → 1.0.8

package/package.json

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

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,
@@ -86,8 +86,38 @@ 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
@@ -98,7 +128,11 @@ export const Multiple: StoryObj = (args: TypeaheadProps) => {
         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/components/MultipleTrigger.tsx

@@ -78,9 +78,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 +92,6 @@ export const MultipleTrigger = () => {
         />
         <input
           type="hidden"
-          aria-hidden
           readOnly
           value={context.selectedItems as string[]}
           {...context.register?.(context.name, context.validationSchema)}
@@ -103,7 +103,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

@@ -37,9 +37,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 +50,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 +60,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/useTypeahead.tsx

@@ -39,6 +39,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 +59,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 +90,7 @@ export const useTypeahead = ({
     if (error) {
       useFormResult.setError(name, error);
     } else {
+      setStatus('basic');
       useFormResult.resetField(name);
     }
   }, [error]);
@@ -108,6 +114,7 @@ export const useTypeahead = ({
     });
     setOptionsWithKey(keyedOptions);
     setItems(childItems);
+    setFirstRender(false);
   }, [initialSelectedItems, children]);
 
   useEffect(() => {
@@ -216,7 +223,8 @@ export const useTypeahead = ({
     setFirstSuggestion('');
     inputRef.current?.focus();
     setStatus('basic');
-    useFormResult.clearErrors();
+    useFormResult.clearErrors(name);
+    useFormResult.trigger(name);
     onChange && onChange(changingValue, isNewSelected);
   };
 
@@ -230,6 +238,7 @@ export const useTypeahead = ({
     setInputValue('');
     setIsOpen(false);
     setFirstSuggestion('');
+    useFormResult.trigger(name);
     inputRef.current?.focus();
   };
 
@@ -247,13 +256,12 @@ 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) {
       const foundItem = Object.values(optionsWithKey).find(
         (item) =>
           `${item.label}`.toLowerCase() === firstSuggestion.toLowerCase(),
@@ -264,8 +272,7 @@ export const useTypeahead = ({
       }
       event.preventDefault();
       return false;
-    }
-    if (
+    } else if (
       isMultiple &&
       event.code === 'Backspace' &&
       selected.length > 0 &&
@@ -274,8 +281,7 @@ export const useTypeahead = ({
       handleChange(selected[selected.length - 1]);
       event.preventDefault();
       return false;
-    }
-    if (!isOpen) {
+    } else if (!isOpen) {
       setIsOpen(true);
     }
   };