agroptima-design-system 0.35.0-beta.13 → 0.35.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.35.0-beta.13",
+  "version": "0.35.0-beta.14",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Multiselect.tsx

@@ -56,11 +56,17 @@ export function Multiselect({
 }: MultiselectProps): React.JSX.Element {
   const { isOpen, close, toggle } = useOpen()
   const selectRef = useRef(null)
+  const selectTriggerRef = useRef<HTMLButtonElement | null>(null)
   useOutsideClick(selectRef, close)
   const [selectedOptions, setSelectedOptions] = useState<string[]>(defaultValue)
   const isInvalid = Boolean(errors?.length)
   const hasSelectedOptions = selectedOptions.length > 0
 
+  const handleClose = () => {
+    close()
+    selectTriggerRef?.current?.focus()
+  }
+
   function handleSelectOption({ id }: Option) {
     const isOptionSelected = selectedOptions.includes(id)
     const options = isOptionSelected
@@ -76,6 +82,7 @@ export function Multiselect({
     setSelectedOptions([])
     onChange([])
   }
+
   const identifier = id || name
   return (
     <div
@@ -102,6 +109,7 @@ export function Multiselect({
         onClick={toggle}
         onClear={handleClear}
         isEmpty={!hasSelectedOptions}
+        buttonRef={selectTriggerRef}
       >
         {hasSelectedOptions
           ? `${selectedOptions.length} ${selectedLabel}`
@@ -116,6 +124,7 @@ export function Multiselect({
           selectOption={handleSelectOption}
           isSearchable={isSearchable}
           searchLabel={searchLabel}
+          onClose={handleClose}
         />
       )}
       <HelpText helpText={helpText} errors={errors} />

package/src/atoms/Select/Select.scss

@@ -66,8 +66,7 @@ $elements-space: config.$space-2x;
       background: color_alias.$neutral-white;
       @include mixins.icon-color(color_alias.$primary-color-600);
 
-      &:focus {
-        outline: color_alias.$primary-color-600;
+      &:has(.select:focus) {
         border: 1px solid color_alias.$primary-color-600;
       }
     }
@@ -75,9 +74,9 @@ $elements-space: config.$space-2x;
     .select-options {
       border-radius: config.$corner-radius-xxs;
       background: color_alias.$neutral-white;
-      box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
-      0px 6px 16px 0px rgba(0, 0, 0, 0.08),
-      0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+      box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.05),
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12);
 
       .option {
         background: color_alias.$neutral-white;

package/src/atoms/Select/Select.tsx

@@ -61,7 +61,12 @@ export function Select({
   const isEmpty = selectedOption.id === EMPTY_OPTION.id
   const isInvalid = Boolean(errors?.length)
   const selectRef = useRef(null)
-  useOutsideClick(selectRef, close)
+  const selectTriggerRef = useRef<HTMLButtonElement | null>(null)
+  const handleClose = () => {
+    close()
+    selectTriggerRef?.current?.focus()
+  }
+  useOutsideClick(selectRef, handleClose)
 
   function handleSelectOption(option: Option) {
     setSelectedOption(option)
@@ -93,6 +98,7 @@ export function Select({
 
       <SelectTrigger
         id={identifier}
+        buttonRef={selectTriggerRef}
         label={label}
         accessibilityLabel={accessibilityLabel}
         invalid={isInvalid}
@@ -110,9 +116,10 @@ export function Select({
           options={options}
           selectedOptions={[selectedOption.id]}
           selectOption={handleSelectOption}
-          onClick={close}
+          onClick={handleClose}
           isSearchable={isSearchable}
           searchLabel={searchLabel}
+          onClose={handleClose}
         />
       )}
       <HelpText helpText={helpText} errors={errors} />

package/src/atoms/Select/SelectItem.tsx

@@ -6,15 +6,29 @@ interface OptionProps {
   option: Option
   multiple?: boolean
   isSelected: boolean
-  onClick: (option: Option) => void
+  onSelectOption: (option: Option) => void
+  onClose: () => void
 }
 
+const ENTER_KEY = 'Enter'
+const SPACE_KEY = ' '
+
 export function SelectItem({
   option,
   isSelected,
-  onClick,
+  onSelectOption,
   multiple,
+  onClose,
 }: OptionProps) {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLLIElement>) => {
+    if (e.key === ENTER_KEY || e.key === SPACE_KEY) {
+      e.preventDefault()
+      onSelectOption(option)
+      if (!multiple) {
+        onClose()
+      }
+    }
+  }
   return (
     <li
       className="option"
@@ -22,7 +36,8 @@ export function SelectItem({
       role="option"
       aria-selected={isSelected}
       data-option={option}
-      onClick={() => onClick(option)}
+      onClick={() => onSelectOption(option)}
+      onKeyDown={handleKeyDown}
     >
       {multiple && <CheckboxIcon selected={isSelected} />}
       {option.label}

package/src/atoms/Select/SelectItems.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useSearch } from '../../hooks/useSearch'
 import { Input } from '../Input'
 import type { Option } from './Select'
@@ -13,8 +13,11 @@ interface OptionListProps {
   onClick?: () => void
   isSearchable: boolean
   searchLabel: string
+  onClose: () => void
 }
 
+const ESCAPE_KEY = 'Escape'
+
 export function SelectItems({
   id,
   options,
@@ -24,8 +27,21 @@ export function SelectItems({
   onClick,
   isSearchable,
   searchLabel,
+  onClose,
 }: OptionListProps) {
   const { findItems, search } = useSearch(options, 'label')
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === ESCAPE_KEY) {
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [onClose])
+
   return (
     <div className="select-options-container">
       <div className="select-options" id={id}>
@@ -47,7 +63,8 @@ export function SelectItems({
               key={option.id}
               option={option}
               isSelected={selectedOptions.includes(option.id)}
-              onClick={selectOption}
+              onSelectOption={selectOption}
+              onClose={onClose}
             />
           ))}
         </ul>

package/src/atoms/Select/SelectTrigger.tsx

@@ -13,6 +13,7 @@ export interface SelectTriggerProps {
   onClick: () => void
   onClear: (event: React.MouseEvent) => void
   children: React.ReactNode
+  buttonRef: React.RefObject<HTMLButtonElement | null>
 }
 
 export function SelectTrigger({
@@ -26,6 +27,7 @@ export function SelectTrigger({
   onClear,
   isEmpty,
   children,
+  buttonRef,
 }: SelectTriggerProps) {
   const handleClear = (event: React.MouseEvent) => {
     if (disabled) return
@@ -35,6 +37,7 @@ export function SelectTrigger({
     <div className="select-container">
       <button
         id={id}
+        ref={buttonRef}
         type="button"
         role="combobox"
         className="select"
@@ -56,6 +59,7 @@ export function SelectTrigger({
       </button>
       <IconButton
         type="button"
+        tabIndex={-1}
         size="3"
         icon="Close"
         className="clear-button"

package/src/stories/Changelog.mdx

@@ -15,6 +15,8 @@ import { Meta } from "@storybook/blocks";
 * Add `classic-view` and `new-view` to icons
 * Add InputWithButton component
 * Fix close modal when press `Escape` key
+* Add focus style to Select and MultiSelect components
+* Focus in Select and MultiSelect components after close
 
 ## 0.34.9
 

package/tests/Select.spec.tsx

@@ -166,4 +166,21 @@ describe('Select', () => {
       playstation5.label,
     )
   })
+  it('closes when Escape key is pressed', async () => {
+    const user = userEvent.setup()
+    render(
+      <Select
+        label="Videogames"
+        name="select-videogames"
+        isSearchable
+        options={OPTIONS}
+      />,
+    )
+
+    await user.click(screen.getByLabelText('Videogames'))
+    expect(screen.getByText(playstation5.label)).toBeInTheDocument()
+    await user.keyboard('{Escape}')
+
+    expect(screen.queryByText(playstation5.label)).not.toBeInTheDocument()
+  })
 })