sbwb-ds 3.36.2 → 3.37.0

package/dist/src/presentation/components/molecules/Autocomplete/hooks/useAutocomplete.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SelectOption } from '../../../../../models/select-option';
 import { AutocompleteProps } from '..';
-export declare const useAutocomplete: (handleOption: (value: SelectOption | SelectOption[] | undefined) => void, { value, options, size, variant, }: Pick<AutocompleteProps, 'value' | 'options' | 'size' | 'variant'>) => {
+export declare const useAutocomplete: (handleOption: (value: SelectOption | SelectOption[] | undefined) => void, { value, options, size, variant, clearSearchOnSelect, }: Pick<AutocompleteProps, 'value' | 'options' | 'size' | 'variant' | 'clearSearchOnSelect'>) => {
     isOpen: boolean;
     setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     expanded: boolean;

package/dist/src/presentation/components/molecules/Autocomplete/index.d.ts

@@ -25,6 +25,7 @@ export interface AutocompleteProps extends CustomDataAttributes {
     onEnter?: (option: SelectOption) => void;
     onInputEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     disableSelectOnEnter?: boolean;
+    clearSearchOnSelect?: boolean;
     /** @deprecated Use `onChange` instead */
     onSearchTextChange?: (value: string) => void;
     /** @deprecated Use `onSelect` instead */

package/dist/src/presentation/components/molecules/MultiSelect/MultiSelect.component.d.ts

@@ -12,6 +12,7 @@ declare const MultiSelect: React.ForwardRefExoticComponent<{
     label?: React.ReactNode;
     onChange: (values: string[]) => void;
     onSearchChange?: (searchText: string) => void;
+    clearSearchOnSelect?: boolean;
     disabled?: boolean;
     enableSearch?: boolean;
     width?: string;

package/dist/src/presentation/components/molecules/MultiSelect/index.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/src/presentation/components/molecules/MultiSelect/types.d.ts

@@ -18,6 +18,7 @@ type MultiSelectProps = {
     label?: string | React.ReactNode;
     onChange: (values: string[]) => void;
     onSearchChange?: (searchText: string) => void;
+    clearSearchOnSelect?: boolean;
     disabled?: boolean;
     enableSearch?: boolean;
     width?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "3.36.2",
+  "version": "3.37.0",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",

package/src/presentation/components/molecules/Autocomplete/Autocomplete.stories.tsx

@@ -95,6 +95,11 @@ const meta: Meta<typeof Autocomplete> = {
       description:
         'Prevents selecting the focused option when pressing Enter; pair with onInputEnter to handle filtering.',
     },
+    clearSearchOnSelect: {
+      control: 'boolean',
+      description:
+        'Clears the search term after selecting an option. Set to false for withTag to keep filtering during multiple selections.',
+    },
     onSearchTextChange: {
       description: 'Function to be called when the search text is changed.',
     },

package/src/presentation/components/molecules/Autocomplete/documentation/index.tsx

@@ -166,6 +166,13 @@ export default Example;`}
         autocomplete input. Options include "singleValue" for single selection
         and "withTag" for multi-selection with tags.
       </li>
+      <li>
+        <InlineCode>clearSearchOnSelect</InlineCode>: Clears the search term
+        after selecting an option. Defaults to <InlineCode>true</InlineCode>;
+        set it to <InlineCode>false</InlineCode> with{' '}
+        <InlineCode>variant="withTag"</InlineCode> to keep filtering while the
+        menu remains open.
+      </li>
       <li>
         <InlineCode>onTagClose</InlineCode>: A callback function that handles
         the removal of a tag in multi-select mode.

package/src/presentation/components/molecules/Autocomplete/hooks/useAutocomplete.tsx

@@ -11,7 +11,11 @@ export const useAutocomplete = (
     options,
     size,
     variant,
-  }: Pick<AutocompleteProps, 'value' | 'options' | 'size' | 'variant'>
+    clearSearchOnSelect,
+  }: Pick<
+    AutocompleteProps,
+    'value' | 'options' | 'size' | 'variant' | 'clearSearchOnSelect'
+  >
 ) => {
   const [isOpen, setIsOpen] = useState(false);
   const [expanded, setExpanded] = useState(false);
@@ -57,7 +61,9 @@ export const useAutocomplete = (
   }, [options]);
 
   function autocompleteOption(option: SelectOption) {
-    setInputValue('');
+    if (clearSearchOnSelect || variant === 'singleValue') {
+      setInputValue('');
+    }
     setExpanded(variant === 'singleValue' ? false : true);
     setIsOpen(variant === 'singleValue' ? false : true);
     inputContainerRef?.current && inputContainerRef.current.focus();

package/src/presentation/components/molecules/Autocomplete/index.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen, act, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { useState } from 'react';
 import { SelectOption } from '../../../../models/select-option';
 import { Autocomplete } from '../../atoms/index';
 
@@ -28,7 +29,7 @@ describe('Autocomplete component', () => {
       />
     );
 
-    const autocomplete = screen.getByTestId(/autocomplete/i);
+    const autocomplete = screen.getByTestId('autocomplete');
 
     act(() => {
       fireEvent.click(autocomplete);
@@ -52,7 +53,7 @@ describe('Autocomplete component', () => {
         size="Small"
       />
     );
-    const autocomplete = screen.getByTestId(/autocomplete/i);
+    const autocomplete = screen.getByTestId('autocomplete');
 
     act(() => {
       fireEvent.click(autocomplete);
@@ -186,7 +187,7 @@ describe('Autocomplete component', () => {
       />
     );
 
-    const autocomplete = screen.getByTestId(/autocomplete/i);
+    const autocomplete = screen.getByTestId('autocomplete');
 
     act(() => {
       fireEvent.click(autocomplete);
@@ -200,4 +201,89 @@ describe('Autocomplete component', () => {
 
     expect(option).not.toBeInTheDocument();
   });
+
+  it('should preserve the search term after selecting a withTag option when clearSearchOnSelect is false', () => {
+    const WithTagAutocomplete = () => {
+      const [value, setValue] = useState<SelectOption[]>([]);
+
+      return (
+        <Autocomplete
+          options={options}
+          value={value}
+          variant="withTag"
+          clearSearchOnSelect={false}
+          onSelect={(nextValue) =>
+            setValue((nextValue as SelectOption[]) ?? [])
+          }
+        />
+      );
+    };
+
+    render(<WithTagAutocomplete />);
+
+    const input = screen.getByTestId('autocomplete-input');
+    fireEvent.change(input, { target: { value: 'th' } });
+    fireEvent.click(screen.getByTestId('3'));
+
+    expect(input).toHaveValue('th');
+    expect(
+      screen.getByTestId('autocomplete-menu-multi-select')
+    ).toBeInTheDocument();
+  });
+
+  it('should clear the preserved search term after closing the withTag menu', () => {
+    const WithTagAutocomplete = () => {
+      const [value, setValue] = useState<SelectOption[]>([]);
+
+      return (
+        <Autocomplete
+          options={options}
+          value={value}
+          variant="withTag"
+          clearSearchOnSelect={false}
+          onSelect={(nextValue) =>
+            setValue((nextValue as SelectOption[]) ?? [])
+          }
+        />
+      );
+    };
+
+    render(<WithTagAutocomplete />);
+
+    const input = screen.getByTestId('autocomplete-input');
+    fireEvent.change(input, { target: { value: 'th' } });
+    fireEvent.click(screen.getByTestId('3'));
+    fireEvent.mouseDown(document.body);
+
+    expect(input).toHaveValue('');
+  });
+
+  it('should clear the preserved search term when pressing Escape', () => {
+    const WithTagAutocomplete = () => {
+      const [value, setValue] = useState<SelectOption[]>([]);
+
+      return (
+        <Autocomplete
+          options={options}
+          value={value}
+          variant="withTag"
+          clearSearchOnSelect={false}
+          onSelect={(nextValue) =>
+            setValue((nextValue as SelectOption[]) ?? [])
+          }
+        />
+      );
+    };
+
+    render(<WithTagAutocomplete />);
+
+    const input = screen.getByTestId('autocomplete-input');
+    fireEvent.change(input, { target: { value: 'th' } });
+    fireEvent.keyDown(input, { key: 'Escape' });
+
+    expect(input).toHaveValue('');
+    expect(
+      screen.queryByTestId('autocomplete-menu-multi-select')
+    ).not.toBeInTheDocument();
+  });
 });

package/src/presentation/components/molecules/Autocomplete/index.tsx

@@ -2,7 +2,7 @@ import { Icons } from '../../../../main/helpers/functions/icons';
 import { SelectOption } from '../../../../models/select-option';
 import * as C from './styles';
 import { useAutocomplete } from './hooks/useAutocomplete';
-import { forwardRef, ReactNode, useEffect } from 'react';
+import { forwardRef, ReactNode } from 'react';
 import MenuSelect from '../MenuSelect';
 import MenuMultiSelect from '../../atoms/MenuMultiSelect';
 import Tag from '../../atoms/Tag';
@@ -35,6 +35,7 @@ export interface AutocompleteProps extends CustomDataAttributes {
   onEnter?: (option: SelectOption) => void;
   onInputEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   disableSelectOnEnter?: boolean;
+  clearSearchOnSelect?: boolean;
 
   /** @deprecated Use `onChange` instead */
   onSearchTextChange?: (value: string) => void;
@@ -101,6 +102,7 @@ const Autocomplete: React.FC<AutocompleteProps> = forwardRef<
       onEnter,
       onInputEnter,
       disableSelectOnEnter = false,
+      clearSearchOnSelect = true,
       onSearchTextChange,
       onChange,
       errorMessage,
@@ -151,7 +153,13 @@ const Autocomplete: React.FC<AutocompleteProps> = forwardRef<
       isValue,
       handleRemoveOption,
       handleBackspace,
-    } = useAutocomplete(handlerOption, { value, options, size, variant });
+    } = useAutocomplete(handlerOption, {
+      value,
+      options,
+      size,
+      variant,
+      clearSearchOnSelect,
+    });
 
     const hasError = !!errorMessage;
 
@@ -173,6 +181,12 @@ const Autocomplete: React.FC<AutocompleteProps> = forwardRef<
         } else if (!Array.isArray(value) && value) {
           handleBackspace();
         }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        setInputValue('');
+        setIsOpen(false);
+        setExpanded(false);
+        inputContainerRef.current?.blur();
       } else if (e.key === 'Enter') {
         e.preventDefault();
         if (onInputEnter) {

package/src/presentation/components/molecules/MultiSelect/MultiSelect.component.tsx

@@ -33,6 +33,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       onChange,
       onSearchChange, // Nova prop para capturar mudanças no texto de busca
       searchValue, // Nova prop para controlar o valor de busca externamente
+      clearSearchOnSelect = true,
       disabled = false,
       enableSearch = true,
       width = '100%',
@@ -126,6 +127,11 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       setIsFocused(false);
     }, []);
 
+    const clearSearch = useCallback(() => {
+      setInternalSearchText('');
+      onSearchChange?.('');
+    }, [onSearchChange]);
+
     const selectableOptions = useMemo(
       () => options.filter((opt) => !opt.disabled),
       [options]
@@ -150,14 +156,16 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
             : [...values, optionValue];
           handleChange(newValues);
         }
-        setInternalSearchText('');
-        onSearchChange?.('');
+        if (clearSearchOnSelect) {
+          clearSearch();
+        }
         handleInputFocus();
       },
       [
         values,
         handleChange,
-        onSearchChange,
+        clearSearch,
+        clearSearchOnSelect,
         handleInputFocus,
         enableSelectAll,
         isAllSelected,
@@ -172,13 +180,14 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
         }
         if (e.key === 'Escape') {
           setIsOpen(false);
+          clearSearch();
           inputRef.current?.blur();
         }
         if (e.key === 'Enter') {
           e.preventDefault();
         }
       },
-      [searchText, values, handleChange]
+      [searchText, values, handleChange, clearSearch]
     );
 
     const handleKeyUp = useCallback(
@@ -225,16 +234,14 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
           !selectContainerRef.current.contains(target)
         ) {
           setIsOpen(false);
-          if (searchValue === undefined && !onSearchChange) {
-            setInternalSearchText('');
-          }
+          clearSearch();
         }
       };
       document.addEventListener('mousedown', handleClickOutside);
       return () => {
         document.removeEventListener('mousedown', handleClickOutside);
       };
-    }, [isOpen, searchValue, onSearchChange]);
+    }, [isOpen, clearSearch]);
 
     useEffect(() => {
       if (!ref) return;
@@ -242,14 +249,17 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
         focus: () => inputRef.current?.focus(),
         blur: () => inputRef.current?.blur(),
         open: () => setIsOpen(true),
-        close: () => setIsOpen(false),
+        close: () => {
+          clearSearch();
+          setIsOpen(false);
+        },
       };
       if (typeof ref === 'function') {
         ref(handle);
       } else {
         ref.current = handle;
       }
-    }, [ref]);
+    }, [ref, clearSearch]);
 
     return (
       <C.SelectContainer
@@ -262,7 +272,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
         onBlur={() => {
           setIsFocused(false);
           if (!isOpen) {
-            setInternalSearchText('');
+            clearSearch();
           }
         }}
         data-status={multiSelectStatus}
@@ -402,7 +412,12 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
             <C.WrapperIcon
               onClick={(e) => {
                 e.stopPropagation();
-                if (!disabled) setIsOpen((prev) => !prev);
+                if (!disabled) {
+                  if (isOpen) {
+                    clearSearch();
+                  }
+                  setIsOpen((prev) => !prev);
+                }
               }}
             >
               <Icon

package/src/presentation/components/molecules/MultiSelect/MultiSelect.stories.tsx

@@ -40,6 +40,11 @@ const meta: Meta<typeof MultiSelect> = {
       control: false,
       description: 'Callback fired when the search input changes.',
     },
+    clearSearchOnSelect: {
+      control: 'boolean',
+      description:
+        'Clears the search term after selecting an option. Set to false to keep filtering during multiple selections.',
+    },
     disabled: { description: 'Disables the multiSelect.' },
     enableSearch: {
       control: { type: 'boolean' },

package/src/presentation/components/molecules/MultiSelect/documentation/index.tsx

@@ -136,6 +136,12 @@ export default Example;`}
         <InlineCode>onChange</InlineCode>: A callback function that is triggered
         when the selection changes.
       </li>
+      <li>
+        <InlineCode>clearSearchOnSelect</InlineCode>: Clears the search term
+        after selecting an option. Defaults to <InlineCode>true</InlineCode>;
+        set it to <InlineCode>false</InlineCode> to keep filtering while the
+        menu remains open.
+      </li>
       <li>
         <InlineCode>disabled</InlineCode>: Disables the MultiSelect input,
         preventing user interaction.

package/src/presentation/components/molecules/MultiSelect/index.spec.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useState } from 'react';
+import MultiSelect from './';
+import { MultiSelectOption } from './types';
+
+const options: MultiSelectOption[] = [
+  { label: 'North Port', value: 'north-port' },
+  { label: 'Portland', value: 'portland' },
+  { label: 'South', value: 'south' },
+];
+
+describe('MultiSelect search preservation', () => {
+  it('should preserve the search term after selecting an option when clearSearchOnSelect is false', () => {
+    const MultiSelectHarness = () => {
+      const [values, setValues] = useState<string[]>([]);
+
+      return (
+        <MultiSelect
+          options={options}
+          values={values}
+          onChange={setValues}
+          clearSearchOnSelect={false}
+        />
+      );
+    };
+
+    render(<MultiSelectHarness />);
+
+    const input = screen.getByTestId('multi-select-input');
+    fireEvent.change(input, { target: { value: 'port' } });
+    fireEvent.click(screen.getByTestId('north-port'));
+
+    expect(input).toHaveValue('port');
+    expect(
+      screen.getByTestId('multi-select-menu-multi-select')
+    ).toBeInTheDocument();
+  });
+
+  it('should clear the preserved search term after closing the menu', () => {
+    const MultiSelectHarness = () => {
+      const [values, setValues] = useState<string[]>([]);
+
+      return (
+        <MultiSelect
+          options={options}
+          values={values}
+          onChange={setValues}
+          clearSearchOnSelect={false}
+        />
+      );
+    };
+
+    render(<MultiSelectHarness />);
+
+    const input = screen.getByTestId('multi-select-input');
+    fireEvent.change(input, { target: { value: 'port' } });
+    fireEvent.click(screen.getByTestId('north-port'));
+    fireEvent.mouseDown(document.body);
+
+    expect(input).toHaveValue('');
+  });
+});

package/src/presentation/components/molecules/MultiSelect/types.ts

@@ -20,6 +20,7 @@ type MultiSelectProps = {
   label?: string | React.ReactNode;
   onChange: (values: string[]) => void;
   onSearchChange?: (searchText: string) => void;
+  clearSearchOnSelect?: boolean;
   disabled?: boolean;
   enableSearch?: boolean;
   width?: string;