agroptima-design-system 0.27.15 → 0.27.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.27.15",
+  "version": "0.27.16",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Multiselect.tsx

@@ -4,8 +4,10 @@ import { Icon } from './Icon'
 import { IconButton } from './Button'
 import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
-import { useOutsideClick } from '../utils/useOutsideClick'
-import { useOpen } from '../utils/useOpen'
+import { useOutsideClick } from '../hooks/useOutsideClick'
+import { useOpen } from '../hooks/useOpen'
+import { Input } from './Input'
+import { useSearch } from '../hooks/useSearch'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }
@@ -27,6 +29,8 @@ export interface MultiselectProps extends InputPropsWithoutOnChange {
   hideLabel?: boolean
   defaultValue?: string[]
   onChange?: (value: string[]) => void
+  isSearchable?: boolean
+  searchLabel?: string
 }
 
 export function Multiselect({
@@ -44,6 +48,8 @@ export function Multiselect({
   selectedLabel = 'items selected',
   hideLabel = false,
   defaultValue = [],
+  isSearchable = false,
+  searchLabel = 'Search',
   ...props
 }: MultiselectProps): React.JSX.Element {
   const helpTexts = buildHelpText(helpText, errors)
@@ -108,18 +114,15 @@ export function Multiselect({
             visible={hasSelectedOptions}
           />
         </div>
-        {isOpen && (
-          <ul className="select-options" role="listbox">
-            {options.map((option) => (
-              <Option
-                key={`${name}-${option.id}`}
-                option={option}
-                selectedOptions={selectedOptions}
-                onSelect={selectOption}
-              />
-            ))}
-          </ul>
-        )}
+
+        <OptionList
+          isOpen={isOpen}
+          options={options}
+          selectedOptions={selectedOptions}
+          onSelect={selectOption}
+          isSearchable={isSearchable}
+          searchLabel={searchLabel}
+        />
       </div>
       {helpTexts.map((helpText) => (
         <span key={`${name}-${helpText}`} className="select-help-text">
@@ -136,26 +139,80 @@ export function Multiselect({
   )
 }
 
-interface OptionProps {
-  option: Option
+interface OptionListProps {
+  isSearchable: boolean
+  searchLabel: string
+  options: Option[]
   selectedOptions: string[]
   onSelect: (id: string) => void
+  isOpen: boolean
+}
+
+function OptionList({
+  options,
+  selectedOptions,
+  onSelect,
+  isSearchable,
+  searchLabel,
+  isOpen,
+}: OptionListProps) {
+  const { findItems, search } = useSearch(options, 'label')
+  if (!isOpen) return null
+
+  return (
+    <div className="select-options">
+      {isSearchable && (
+        <Input
+          label={searchLabel}
+          hideLabel
+          onChange={(e) => search(e.target.value)}
+          placeholder={searchLabel}
+          icon="Search"
+          className="search"
+        />
+      )}
+      <ul role="listbox">
+        <Option
+          options={findItems}
+          selectedOptions={selectedOptions}
+          onSelect={onSelect}
+        />
+      </ul>
+    </div>
+  )
+}
+
+interface OptionProps {
+  options: Option[]
+  onSelect: (id: string) => void
+  selectedOptions: string[]
 }
 
-function Option({ option, selectedOptions, onSelect }: OptionProps) {
-  const isOptionSelected = selectedOptions.includes(option.id)
-  const icon = isOptionSelected ? 'CheckboxActive' : 'CheckboxInactive'
+function Option({ options, onSelect, selectedOptions }: OptionProps) {
+  function isSelected(id: string): boolean {
+    return selectedOptions.includes(id)
+  }
+  function getIcon(id: string) {
+    return isSelected(id) ? 'CheckboxActive' : 'CheckboxInactive'
+  }
   return (
-    <li
-      role="option"
-      className="option"
-      tabIndex={0}
-      aria-selected={isOptionSelected}
-      data-option={option}
-      onClick={() => onSelect(option.id)}
-    >
-      <Icon name={icon} />
-      {option.label}
-    </li>
+    <>
+      {options.map((option) => {
+        return (
+          <li
+            key={option.id}
+            role="option"
+            className="option"
+            tabIndex={0}
+            aria-selected={isSelected(option.id)}
+            data-option={option}
+            onClick={() => onSelect(option.id)}
+          >
+            <Icon name={getIcon(option.id)} />
+            {option.label}
+          </li>
+        )
+      })}
+    </>
   )
 }

package/src/atoms/Popover/Popover.tsx

@@ -1,7 +1,7 @@
 'use client'
-import { useOutsideClick } from '../../utils/useOutsideClick'
+import { useOutsideClick } from '../../hooks/useOutsideClick'
 import { classNames } from '../../utils/classNames'
-import { useOpen } from '../../utils/useOpen'
+import { useOpen } from '../../hooks/useOpen'
 import { useRef } from 'react'
 import './Popover.scss'
 

package/src/atoms/Select.scss

@@ -74,10 +74,6 @@
     }
 
     .select-options {
-      max-height: 256px;
-      overflow-y: auto;
-      overflow-anchor: none;
-      z-index: depth.$z-dropdown-options;
       border-radius: config.$corner-radius-xxs;
       background: color_alias.$neutral-white;
       box-shadow:
@@ -132,8 +128,11 @@
       height: config.$icon-size-3x;
     }
   }
-
+  
   .select-options {
+    max-height: 256px;
+    overflow-y: auto;
+    overflow-anchor: none;
     z-index: depth.$z-dropdown-options;
     margin: 0;
     padding: config.$space-1x 0rem;
@@ -141,6 +140,16 @@
     position: absolute;
     width: 100%;
 
+    .search {
+      margin: config.$space-2x config.$space-3x;
+    }
+
+    ul {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+    
     .option {
       display: flex;
       align-items: center;
@@ -154,5 +163,5 @@
         margin-right: config.$space-1x;
       }
     }
-  }
+  }  
 }

package/src/atoms/Select.tsx

@@ -4,9 +4,11 @@ import { Icon } from './Icon'
 import { IconButton } from './Button'
 import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
-import { useOutsideClick } from '../utils/useOutsideClick'
-import { useOpen } from '../utils/useOpen'
+import { useOutsideClick } from '../hooks/useOutsideClick'
+import { useOpen } from '../hooks/useOpen'
 import './Select.scss'
+import { Input } from './Input'
+import { useSearch } from '../hooks/useSearch'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }
@@ -27,6 +29,8 @@ export interface SelectProps extends InputPropsWithoutOnChange {
   defaultValue?: string
   onChange?: (value: string) => void
   required?: boolean
+  isSearchable: boolean
+  searchLabel?: string
 }
 
 const EMPTY_OPTION = { id: '', label: '' }
@@ -46,6 +50,8 @@ export function Select({
   onChange = () => {},
   defaultValue,
   required = false,
+  isSearchable = false,
+  searchLabel = 'Search',
   ...props
 }: SelectProps): React.JSX.Element {
   const helpTexts = buildHelpText(helpText, errors)
@@ -110,14 +116,16 @@ export function Select({
             visible={!isEmpty}
           />
         </div>
-        {isOpen && (
-          <OptionList
-            options={options}
-            selectedOption={selectedOption}
-            selectOption={selectOption}
-            onClick={close}
-          />
-        )}
+
+        <OptionList
+          isOpen={isOpen}
+          options={options}
+          selectedOption={selectedOption}
+          selectOption={selectOption}
+          onClick={close}
+          isSearchable={isSearchable}
+          searchLabel={searchLabel}
+        />
       </div>
       {helpTexts.map((helpText) => (
         <span key={`${name}-${helpText}`} className="select-help-text">
@@ -140,6 +148,9 @@ interface OptionListProps {
   selectedOption: Option
   selectOption: (option: Option) => void
   onClick: () => void
+  isSearchable: boolean
+  searchLabel: string
+  isOpen: boolean
 }
 
 function OptionList({
@@ -147,9 +158,44 @@ function OptionList({
   selectedOption,
   selectOption,
   onClick,
+  isSearchable,
+  searchLabel,
+  isOpen,
 }: OptionListProps) {
+  const { findItems, search } = useSearch(options, 'label')
+  if (!isOpen) return null
+
+  return (
+    <div className="select-options">
+      {isSearchable && (
+        <Input
+          label={searchLabel}
+          hideLabel
+          onChange={(e) => search(e.target.value)}
+          placeholder={searchLabel}
+          icon="Search"
+          className="search"
+        />
+      )}
+      <ul role="listbox" onClick={onClick}>
+        <Option
+          options={findItems}
+          selectedOption={selectedOption}
+          selectOption={selectOption}
+        />
+      </ul>
+    </div>
+  )
+}
+interface OptionProps {
+  options: Option[]
+  selectedOption: Option
+  selectOption: (option: Option) => void
+}
+
+function Option({ options, selectedOption, selectOption }: OptionProps) {
   return (
-    <ul className="select-options" role="listbox" onClick={onClick}>
+    <>
       {options.map((option) => {
         return (
           <li
@@ -165,6 +211,6 @@ function OptionList({
           </li>
         )
       })}
-    </ul>
+    </>
   )
 }

package/src/hooks/useSearch.ts

@@ -0,0 +1,14 @@
+import { useState } from 'react'
+import { normalizeSearch } from '../utils/normalizeSearch'
+
+export function useSearch(items: any[], key: string) {
+  const [findItems, setFindItems] = useState<any[]>(items)
+
+  function search(term: string) {
+    const filteredList = items.filter((option) => {
+      return normalizeSearch(option[key]).includes(normalizeSearch(term))
+    })
+    setFindItems(filteredList)
+  }
+  return { findItems, search }
+}

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.27.16
+
+* Add optional search to Select and MultiSelect component.
+
 ## 0.27.15
 
 * Update `pointer-events` to `auto` on Alert component.

package/src/stories/Multiselect.stories.ts

@@ -41,6 +41,12 @@ const meta = {
       description:
         'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
     },
+    isSearchable: {
+      description: 'Select component with search option',
+    },
+    searchLabel: {
+      description: 'Label for the search ',
+    },
   },
 }
 
@@ -65,6 +71,7 @@ export const Primary: Story = {
     accessibilityLabel: 'Select your favourite videogames options',
     selectedLabel: 'videogames selected',
     placeholder: 'Select your favourite videogames...',
+    isSearchable: false,
     options: [
       { id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
       { id: '2', label: 'Spyro the Dragon' },
@@ -87,6 +94,7 @@ export const PrimaryWithSelectedOptions: Story = {
     label: 'Videogames',
     selectedLabel: 'videogames selected',
     placeholder: 'Select your favourite videogames...',
+    isSearchable: false,
     options: [
       { id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
       { id: '2', label: 'Spyro the Dragon' },
@@ -111,6 +119,7 @@ export const PrimaryWithErrors: Story = {
     accessibilityLabel: 'Select your favourite videogames options',
     selectedLabel: 'videogames selected',
     placeholder: 'Select your favourite videogames...',
+    isSearchable: false,
     options: [
       { id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
       { id: '2', label: 'Spyro the Dragon' },
@@ -123,3 +132,27 @@ export const PrimaryWithErrors: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+export const PrimaryWithSearch: Story = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+    hideLabel: false,
+    helpText: 'This text can help you',
+    name: 'videogames',
+    label: 'Videogames',
+    accessibilityLabel: 'Select your favourite videogames options',
+    selectedLabel: 'videogames selected',
+    placeholder: 'Select your favourite videogames...',
+    options: [
+      { id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
+      { id: '2', label: 'Spyro the Dragon' },
+      { id: '3', label: 'Halo' },
+      { id: '4', label: 'Tetris' },
+      { id: '5', label: 'Super Mario Bros' },
+      { id: '6', label: 'Red Dead Redemption' },
+    ],
+    isSearchable: true,
+    searchLabel: 'Search',
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Select.stories.ts

@@ -41,6 +41,12 @@ const meta = {
       description:
         'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
     },
+    isSearchable: {
+      description: 'Select component with search option',
+    },
+    searchLabel: {
+      description: 'Label for the search ',
+    },
   },
 }
 
@@ -63,6 +69,7 @@ export const Primary: Story = {
     label: 'Videogames',
     accessibilityLabel: 'Select your favourite gaming system options',
     hideLabel: false,
+    isSearchable: false,
     placeholder: 'Select your favourite gaming system...',
     options: [
       { id: '1', label: 'Nintendo Switch' },
@@ -100,6 +107,7 @@ export const PrimaryWithSelectedOptions: Story = {
     label: 'Videogames',
     hideLabel: false,
     placeholder: 'Select your favourite gaming system...',
+    isSearchable: false,
     options: [
       { id: '1', label: 'Nintendo Switch' },
       { id: '2', label: 'PlayStation 5' },
@@ -121,6 +129,7 @@ export const PrimaryWithErrors: Story = {
     accessibilityLabel: 'Select your favourite gaming system options',
     hideLabel: false,
     placeholder: 'Select your favourite gaming system...',
+    isSearchable: false,
     options: [
       { id: '1', label: 'Nintendo Switch' },
       { id: '2', label: 'PlayStation 5' },
@@ -132,3 +141,41 @@ export const PrimaryWithErrors: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const PrimaryWithSearch: Story = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+    helpText: 'This text can help you',
+    name: 'example',
+    label: 'Videogames',
+    accessibilityLabel: 'Select your favourite gaming system options',
+    hideLabel: false,
+    placeholder: 'Select your favourite gaming system...',
+    options: [
+      { id: '1', label: 'Nintendo Switch' },
+      { id: '2', label: 'PlayStation 5' },
+      { id: '3', label: 'Xbox Series S/X' },
+      { id: '4', label: 'PC' },
+      { id: '5', label: 'Mobile' },
+      { id: '6', label: 'PlayStation 4' },
+      { id: '7', label: 'Xbox One' },
+      { id: '8', label: 'PlayStation 3' },
+      { id: '9', label: 'Xbox 360' },
+      { id: '10', label: 'PlayStation 2' },
+      { id: '11', label: 'Xbox' },
+      { id: '12', label: 'PlayStation' },
+      { id: '13', label: 'Nintendo 64' },
+      { id: '14', label: 'Super Nintendo' },
+      { id: '15', label: 'Sega Genesis' },
+      { id: '16', label: 'Sega Saturn' },
+      { id: '17', label: 'Sega Dreamcast' },
+      { id: '18', label: 'Atari 2600' },
+    ],
+    id: 'select-videogames',
+    onChange: (optionId) => console.log('onChange optionId:', optionId),
+    isSearchable: true,
+    searchLabel: 'Search',
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/utils/normalizeSearch.ts

@@ -0,0 +1,4 @@
+export function normalizeSearch(value: string): string {
+  const pattern = value.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+  return pattern.replace(/[^a-zA-Z0-9_]/g, '').toLowerCase()
+}

package/tests/Multiselect.spec.tsx

@@ -30,6 +30,7 @@ describe('Multiselect', () => {
         placeholder="Select your favourite videogames..."
         selectedLabel="videogames selected"
         variant="primary"
+        isSearchable={false}
       />,
     )
 
@@ -70,6 +71,7 @@ describe('Multiselect', () => {
         defaultValue={['2', '1']}
         selectedLabel="videogames selected"
         variant="primary"
+        isSearchable={false}
       />,
     )
 
@@ -106,6 +108,7 @@ describe('Multiselect', () => {
         placeholder="Select your favourite videogames..."
         selectedLabel="videogames selected"
         variant="primary"
+        isSearchable={false}
       />,
     )
 
@@ -140,6 +143,7 @@ describe('Multiselect', () => {
         selectedLabel="videogames selected"
         onChange={mockChange}
         variant="primary"
+        isSearchable={false}
       />,
     )
 
@@ -148,4 +152,45 @@ describe('Multiselect', () => {
     expect(getByText(placeholder)).toBeInTheDocument()
     expect(mockChange).toHaveBeenCalledWith([])
   })
+
+  it('return filtered options by search', async () => {
+    const user = userEvent.setup()
+    const placeholder = 'Select your favourite gaming system...'
+    const options = [
+      {
+        id: '1',
+        label: 'Nintendo Switch',
+      },
+      {
+        id: '2',
+        label: 'PlayStation 5',
+      },
+      {
+        id: '3',
+        label: 'Xbox Series S/X',
+      },
+    ]
+    const { queryByText, getByText } = render(
+      <Multiselect
+        helpText="This text can help you"
+        id="select-videogames"
+        label="Videogames"
+        name="example"
+        isSearchable={true}
+        options={options}
+        placeholder={placeholder}
+        variant="primary"
+      />,
+    )
+
+    await user.click(screen.getByRole('alert'))
+
+    const input = screen.getByRole('textbox')
+
+    await user.type(input, ' PlaySta')
+
+    expect(getByText('PlayStation 5')).toBeInTheDocument()
+    expect(queryByText('Nintendo Switch')).not.toBeInTheDocument()
+    expect(queryByText('Xbox Series S/X')).not.toBeInTheDocument()
+  })
 })

package/tests/Select.spec.tsx

@@ -11,6 +11,7 @@ describe('Select', () => {
         helpText="This text can help you"
         id="select-videogames"
         label="Videogames"
+        isSearchable={false}
         name="example"
         options={[
           {
@@ -54,6 +55,7 @@ describe('Select', () => {
         id="select-videogames"
         label="Videogames"
         name="example"
+        isSearchable={false}
         options={[
           {
             id: '1',
@@ -94,6 +96,7 @@ describe('Select', () => {
         id="select-videogames"
         label="Videogames"
         name="example"
+        isSearchable={false}
         onChange={() => {}}
         options={[
           {
@@ -128,6 +131,7 @@ describe('Select', () => {
         id="select-videogames"
         label="Videogames"
         name="example"
+        isSearchable={false}
         options={[
           {
             id: '1',
@@ -153,4 +157,45 @@ describe('Select', () => {
     expect(getByText(placeholder)).toBeInTheDocument()
     expect(mockChange).toHaveBeenCalledWith('')
   })
+
+  it('return filtered options by search', async () => {
+    const user = userEvent.setup()
+    const placeholder = 'Select your favourite gaming system...'
+    const options = [
+      {
+        id: '1',
+        label: 'Nintendo Switch',
+      },
+      {
+        id: '2',
+        label: 'PlayStation 5',
+      },
+      {
+        id: '3',
+        label: 'Xbox Series S/X',
+      },
+    ]
+    const { queryByText, getByText } = render(
+      <Select
+        helpText="This text can help you"
+        id="select-videogames"
+        label="Videogames"
+        name="example"
+        isSearchable={true}
+        options={options}
+        placeholder={placeholder}
+        variant="primary"
+      />,
+    )
+
+    await user.click(screen.getByRole('alert'))
+
+    const input = screen.getByRole('textbox')
+
+    await user.type(input, ' PlaySta')
+
+    expect(getByText('PlayStation 5')).toBeInTheDocument()
+    expect(queryByText('Nintendo Switch')).not.toBeInTheDocument()
+    expect(queryByText('Xbox Series S/X')).not.toBeInTheDocument()
+  })
 })

package/tests/utils/normalizeSearch.spec.tsx

@@ -0,0 +1,7 @@
+import { normalizeSearch } from '../../src/utils/normalizeSearch'
+
+describe('normalizeSearch', () => {
+  it('returns a normalize string without unusual characters, capital letters or accents', () => {
+    expect(normalizeSearch('Piñón')).toBe('pinon')
+  })
+})