@popsure/dirty-swan 0.65.1 → 0.66.1

package/src/lib/components/searchableDropdown/index.test.tsx

@@ -0,0 +1,355 @@
+import { render, screen } from '../../util/testUtils';
+
+import { SearchableDropdown, SearchableDropdownProps } from '.';
+
+const options = [
+  { id: 'de', label: 'Germany' },
+  { id: 'fr', label: 'France' },
+  { id: 'es', label: 'Spain' },
+  { id: 'it', label: 'Italy' },
+  { id: 'pt', label: 'Portugal' },
+];
+
+const defaultProps: SearchableDropdownProps = {
+  options,
+  value: 'de',
+  onChange: jest.fn(),
+  groupName: 'country',
+};
+
+const setup = (props: Partial<SearchableDropdownProps> = {}) => {
+  const onChange = jest.fn();
+  const utils = render(
+    <SearchableDropdown {...defaultProps} onChange={onChange} {...props} />
+  );
+  return { ...utils, onChange };
+};
+
+describe('SearchableDropdown', () => {
+  describe('rendering', () => {
+    it('should render the selected option label in the trigger', () => {
+      setup();
+      expect(screen.getByRole('button')).toHaveTextContent('Germany');
+    });
+
+    it('should render triggerPlaceholder when value is null', () => {
+      setup({ value: null, triggerPlaceholder: 'Select a country' });
+      expect(screen.getByRole('button')).toHaveTextContent('Select a country');
+    });
+
+    it('should not render the dropdown when closed', () => {
+      setup();
+      expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+    });
+
+    it('should render all options when opened', async () => {
+      const { user } = setup();
+      await user.click(screen.getByRole('button'));
+
+      options.forEach((option) => {
+        expect(screen.getByLabelText(option.label)).toBeInTheDocument();
+      });
+    });
+
+    it('should render icons in options', async () => {
+      const { user } = setup({
+        options: [
+          { id: 'de', label: 'Germany', icon: <span data-testid="icon-de">flag</span> },
+        ],
+      });
+      await user.click(screen.getByRole('button'));
+
+      expect(screen.getAllByTestId('icon-de')).toHaveLength(2); // trigger + option
+    });
+
+    it('should render the selected option icon in the trigger', () => {
+      setup({
+        options: [
+          { id: 'de', label: 'Germany', icon: <span data-testid="trigger-icon">flag</span> },
+        ],
+        value: 'de',
+      });
+
+      expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+    });
+
+    it('should show no results text when search has no matches', async () => {
+      const { user } = setup({ searchable: true, noResultsText: 'Nothing here' });
+      await user.click(screen.getByRole('button'));
+      await user.type(screen.getByPlaceholderText('Search'), 'zzzzz');
+
+      expect(screen.getByText('Nothing here')).toBeInTheDocument();
+    });
+  });
+
+  describe('open / close', () => {
+    it('should open the dropdown on trigger click', async () => {
+      const { user } = setup();
+      await user.click(screen.getByRole('button'));
+
+      expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+    });
+
+    it('should close the dropdown on second trigger click', async () => {
+      const { user } = setup();
+      const trigger = screen.getByRole('button');
+      await user.click(trigger);
+      await user.click(trigger);
+
+      expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+    });
+
+    it('should close the dropdown on Escape', async () => {
+      const { user } = setup();
+      await user.click(screen.getByRole('button'));
+      expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+
+      await user.keyboard('{Escape}');
+      expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+    });
+
+    it('should close the dropdown when clicking outside', async () => {
+      const { user } = setup();
+      await user.click(screen.getByRole('button'));
+      expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+
+      await user.click(document.body);
+      expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('selection', () => {
+    it('should call onChange when an option is clicked', async () => {
+      const { user, onChange } = setup();
+      await user.click(screen.getByRole('button'));
+      await user.click(screen.getByLabelText('France'));
+
+      expect(onChange).toHaveBeenCalledWith('fr');
+    });
+
+    it('should close the dropdown after selecting an option', async () => {
+      const { user } = setup();
+      await user.click(screen.getByRole('button'));
+      await user.click(screen.getByLabelText('France'));
+
+      expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+    });
+
+    it('should mark the current value as checked', async () => {
+      const { user } = setup({ value: 'fr' });
+      await user.click(screen.getByRole('button'));
+
+      expect(screen.getByRole('radio', { name: 'France' })).toBeChecked();
+    });
+  });
+
+  describe('search', () => {
+    it('should filter options based on search term', async () => {
+      const { user } = setup({ searchable: true });
+      await user.click(screen.getByRole('button'));
+      await user.type(screen.getByPlaceholderText('Search'), 'ger');
+
+      expect(screen.getByLabelText('Germany')).toBeInTheDocument();
+      expect(screen.queryByLabelText('France')).not.toBeInTheDocument();
+    });
+
+    it('should prioritize options that start with the search term', async () => {
+      const { user } = setup({
+        searchable: true,
+        options: [
+          { id: 'al', label: 'Algeria' },
+          { id: 'po', label: 'Portugal' },
+          { id: 'pl', label: 'Poland' },
+        ],
+      });
+      await user.click(screen.getByRole('button'));
+      await user.type(screen.getByPlaceholderText('Search'), 'po');
+
+      const radios = screen.getAllByRole('radio');
+      expect(radios[0]).toHaveAttribute('value', 'po');
+      expect(radios[1]).toHaveAttribute('value', 'pl');
+    });
+
+    it('should clear the search term when dropdown closes', async () => {
+      const { user } = setup({ searchable: true });
+      await user.click(screen.getByRole('button'));
+      await user.type(screen.getByPlaceholderText('Search'), 'ger');
+      await user.keyboard('{Escape}');
+
+      await user.click(screen.getByRole('button'));
+      expect(screen.getByPlaceholderText('Search')).toHaveValue('');
+      expect(screen.getAllByRole('radio')).toHaveLength(options.length);
+    });
+
+    it('should select the first filtered option on Enter in search input', async () => {
+      const { user, onChange } = setup({ searchable: true });
+      await user.click(screen.getByRole('button'));
+      await user.type(screen.getByPlaceholderText('Search'), 'fra');
+      await user.keyboard('{Enter}');
+
+      expect(onChange).toHaveBeenCalledWith('fr');
+    });
+
+    it('should use custom placeholder text', async () => {
+      const { user } = setup({ searchable: true, placeholder: 'Find a country' });
+      await user.click(screen.getByRole('button'));
+
+      expect(screen.getByPlaceholderText('Find a country')).toBeInTheDocument();
+    });
+  });
+
+  describe('keyboard navigation', () => {
+    it('should move focus to the first option on ArrowDown from search input', async () => {
+      const { user } = setup({ searchable: true });
+      await user.click(screen.getByRole('button'));
+      await user.keyboard('{ArrowDown}');
+
+      expect(screen.getByRole('radio', { name: 'Germany' })).toHaveFocus();
+    });
+
+    it('should move focus to the last option on ArrowUp from search input', async () => {
+      const { user } = setup({ searchable: true });
+      await user.click(screen.getByRole('button'));
+      await user.keyboard('{ArrowUp}');
+
+      expect(screen.getByRole('radio', { name: 'Portugal' })).toHaveFocus();
+    });
+
+    it('should navigate between options with ArrowDown and ArrowUp', async () => {
+      const { user } = setup({ searchable: true });
+      await user.click(screen.getByRole('button'));
+      await user.keyboard('{ArrowDown}');
+
+      expect(screen.getByRole('radio', { name: 'Germany' })).toHaveFocus();
+
+      await user.keyboard('{ArrowDown}');
+      expect(screen.getByRole('radio', { name: 'France' })).toHaveFocus();
+
+      await user.keyboard('{ArrowUp}');
+      expect(screen.getByRole('radio', { name: 'Germany' })).toHaveFocus();
+    });
+
+    it('should not go past the last option on ArrowDown', async () => {
+      const { user } = setup({
+        searchable: true,
+        options: [
+          { id: 'a', label: 'Alpha' },
+          { id: 'b', label: 'Beta' },
+        ],
+      });
+      await user.click(screen.getByRole('button'));
+      await user.keyboard('{ArrowDown}{ArrowDown}{ArrowDown}');
+
+      expect(screen.getByRole('radio', { name: 'Beta' })).toHaveFocus();
+    });
+
+    it('should not go past the first option on ArrowUp', async () => {
+      const { user } = setup({
+        searchable: true,
+        options: [
+          { id: 'a', label: 'Alpha' },
+          { id: 'b', label: 'Beta' },
+        ],
+      });
+      await user.click(screen.getByRole('button'));
+      await user.keyboard('{ArrowDown}{ArrowUp}{ArrowUp}');
+
+      expect(screen.getByRole('radio', { name: 'Alpha' })).toHaveFocus();
+    });
+
+    it('should select option and close on Enter key', async () => {
+      const { user, onChange } = setup({ searchable: true });
+      await user.click(screen.getByRole('button'));
+      await user.keyboard('{ArrowDown}{ArrowDown}{Enter}');
+
+      expect(onChange).toHaveBeenCalledWith('fr');
+      expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+    });
+
+    it('should select option and close on Space key', async () => {
+      const { user, onChange } = setup({ searchable: true });
+      await user.click(screen.getByRole('button'));
+      await user.keyboard('{ArrowDown}{ArrowDown} ');
+
+      expect(onChange).toHaveBeenCalledWith('fr');
+      expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('disabled', () => {
+    it('should not open the dropdown when disabled', async () => {
+      const { user } = setup({ disabled: true });
+      await user.click(screen.getByRole('button'));
+
+      expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+    });
+
+    it('should have the disabled attribute on the trigger', () => {
+      setup({ disabled: true });
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('should have aria-expanded false when closed', () => {
+      setup();
+      expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('should have aria-expanded true when open', async () => {
+      const { user } = setup();
+      await user.click(screen.getByRole('button'));
+
+      expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('should have aria-haspopup on the trigger', () => {
+      setup();
+      expect(screen.getByRole('button')).toHaveAttribute('aria-haspopup', 'listbox');
+    });
+
+    it('should have aria-controls linking to the dropdown when open', async () => {
+      const { user } = setup();
+      await user.click(screen.getByRole('button'));
+
+      const trigger = screen.getByRole('button');
+      const controlsId = trigger.getAttribute('aria-controls');
+      expect(controlsId).toBeTruthy();
+      expect(document.getElementById(controlsId!)).toBeInTheDocument();
+    });
+
+    it('should have a radiogroup with aria-label', async () => {
+      const { user } = setup({ groupName: 'test-group' });
+      await user.click(screen.getByRole('button'));
+
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-label', 'test-group');
+    });
+
+    it('should return focus to the trigger after selection', async () => {
+      const { user } = setup();
+      await user.click(screen.getByRole('button'));
+      await user.click(screen.getByLabelText('France'));
+
+      expect(screen.getByRole('button')).toHaveFocus();
+    });
+
+    it('should return focus to the trigger after pressing Escape', async () => {
+      const { user } = setup();
+      await user.click(screen.getByRole('button'));
+      await user.keyboard('{Escape}');
+
+      expect(screen.getByRole('button')).toHaveFocus();
+    });
+  });
+
+  describe('groupName', () => {
+    it('should auto-generate a groupName when not provided', async () => {
+      const { user } = setup({ groupName: undefined });
+      await user.click(screen.getByRole('button'));
+
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-label');
+      const radios = screen.getAllByRole('radio');
+      expect(radios[0]).toHaveAttribute('name');
+    });
+  });
+});

package/src/lib/components/searchableDropdown/index.tsx

@@ -0,0 +1,267 @@
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classnames from 'classnames';
+
+import { Input } from '../input';
+import { ChevronDownIcon } from '../icon';
+import { useDropdownAlignment } from '../../hooks/useDropdownAlignment';
+import { useEscapeKey } from '../../hooks/useEscapeKey';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside';
+import generateId from '../../util/generateId';
+
+import styles from './style.module.scss';
+
+export interface SearchableDropdownOption {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface SearchableDropdownProps {
+  options: SearchableDropdownOption[];
+  value: string | null;
+  onChange: (value: string) => void;
+  searchable?: boolean;
+  placeholder?: string;
+  triggerPlaceholder?: string;
+  noResultsText?: string;
+  groupName?: string;
+  dropUp?: boolean;
+  condensed?: boolean;
+  bordered?: boolean;
+  showChevron?: boolean;
+  disabled?: boolean;
+}
+
+export const SearchableDropdown = ({
+  options,
+  value,
+  onChange,
+  searchable = false,
+  placeholder = 'Search',
+  triggerPlaceholder,
+  noResultsText = 'No results found',
+  groupName: groupNameProp,
+  dropUp = false,
+  condensed = false,
+  bordered = false,
+  showChevron = false,
+  disabled = false,
+}: SearchableDropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [localValue, setLocalValue] = useState(value);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const optionRefs = useRef<Map<string, HTMLInputElement>>(new Map());
+  const [groupName] = useState(() => groupNameProp ?? `sd-${generateId()}`);
+  const dropdownId = `${groupName}-dropdown`;
+
+  const closeAndRestoreFocus = useCallback(() => {
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  }, []);
+
+  useOnClickOutside(containerRef, () => isOpen && closeAndRestoreFocus());
+  useEscapeKey(
+    useCallback(() => {
+      if (isOpen) closeAndRestoreFocus();
+    }, [isOpen, closeAndRestoreFocus])
+  );
+
+  const { alignRight, alignUp } = useDropdownAlignment(containerRef, dropdownRef, isOpen);
+
+  useEffect(() => {
+    if (isOpen && searchable && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isOpen, searchable]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchTerm('');
+      setLocalValue(value);
+    }
+  }, [isOpen, value]);
+
+  const filteredOptions = useMemo(() => {
+    if (!searchTerm) return options;
+    return [...options]
+      .filter((option) =>
+        option.label.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+      .sort((a, b) => {
+        const term = searchTerm.toLowerCase();
+        const aStartsWith = a.label.toLowerCase().startsWith(term);
+        const bStartsWith = b.label.toLowerCase().startsWith(term);
+        if (aStartsWith && !bStartsWith) return -1;
+        if (!aStartsWith && bStartsWith) return 1;
+        return 0;
+      });
+  }, [options, searchTerm]);
+
+  const selectedOption = options.find((option) => option.id === value);
+
+  const handleTriggerClick = () => {
+    if (!disabled) setIsOpen(!isOpen);
+  };
+
+  const handleSearchKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const target =
+        e.key === 'ArrowDown'
+          ? filteredOptions[0]
+          : filteredOptions[filteredOptions.length - 1];
+      if (target) {
+        setLocalValue(target.id);
+        optionRefs.current.get(target.id)?.focus();
+      }
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const target = filteredOptions[0];
+      if (target) {
+        onChange(target.id);
+        closeAndRestoreFocus();
+      }
+    }
+  };
+
+  const handleOptionClick = (optionId: string) => {
+    onChange(optionId);
+    closeAndRestoreFocus();
+  };
+
+  const handleOptionRef = (optionId: string, el: HTMLInputElement | null) => {
+    if (el) optionRefs.current.set(optionId, el);
+    else optionRefs.current.delete(optionId);
+  };
+
+  const handleOptionKeyDown = (e: React.KeyboardEvent, optionId: string) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const currentIndex = filteredOptions.findIndex(
+        (o) => o.id === optionId
+      );
+      const nextIndex =
+        e.key === 'ArrowDown'
+          ? Math.min(currentIndex + 1, filteredOptions.length - 1)
+          : Math.max(currentIndex - 1, 0);
+      const next = filteredOptions[nextIndex];
+      if (next) {
+        setLocalValue(next.id);
+        optionRefs.current.get(next.id)?.focus();
+      }
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onChange(optionId);
+      closeAndRestoreFocus();
+    }
+  };
+
+  return (
+    <div className={classnames(styles.container, { 'd-inline-block': condensed })} ref={containerRef}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={classnames(
+          'd-flex ai-center jc-between w100 br8 bg-white c-pointer ta-left tc-neutral-900',
+          styles.selectTrigger, {
+            [styles.selectTriggerOpen]: isOpen,
+            [styles.condensed]: condensed,
+            [styles.bordered]: bordered,
+            [styles.disabled]: disabled,
+          }
+        )}
+        onClick={handleTriggerClick}
+        disabled={disabled}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        aria-controls={isOpen ? dropdownId : undefined}
+      >
+        <span className={'d-flex ai-center gap8'}>
+          {selectedOption?.icon && (
+            <span className={styles.optionIcon}>{selectedOption.icon}</span>
+          )}
+          {!condensed && (
+            <span className="p-p">
+              {selectedOption?.label ?? triggerPlaceholder}
+            </span>
+          )}
+        </span>
+        {showChevron && (
+          <ChevronDownIcon
+            className={classnames('ml8', { [styles.chevronOpen]: isOpen })}
+            size={20}
+            noMargin
+            color="neutral-600"
+          />
+        )}
+      </button>
+      {isOpen && (
+        <div
+          id={dropdownId}
+          ref={dropdownRef}
+          className={classnames(
+            styles.dropdown,
+            'bg-white br8 p8 d-flex fd-column',
+            { [styles.dropdownUp]: dropUp || alignUp, [styles.dropdownRight]: alignRight }
+          )}
+        >
+          {searchable && (
+            <div className={classnames('pb8 bg-white', styles.searchContainer)}>
+              <Input
+                ref={searchInputRef}
+                type="text"
+                placeholder={placeholder}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                label={placeholder}
+                hideLabel
+                onKeyDown={handleSearchKeyDown}
+              />
+            </div>
+          )}
+          <div className={styles.optionList} role="radiogroup" aria-label={groupName}>
+            {filteredOptions.map((option) => (
+              <div key={option.id} className={styles.optionWrapper}>
+                <input
+                  type="radio"
+                  id={`${groupName}-${option.id}`}
+                  name={groupName}
+                  value={option.id}
+                  checked={option.id === localValue}
+                  onChange={() => setLocalValue(option.id)}
+                  onClick={() => handleOptionClick(option.id)}
+                  tabIndex={option.id === localValue ? 0 : -1}
+                  className={styles.optionRadio}
+                  ref={(el) => handleOptionRef(option.id, el)}
+                  onKeyDown={(e) => handleOptionKeyDown(e, option.id)}
+                />
+                <label
+                  htmlFor={`${groupName}-${option.id}`}
+                  className={classnames(
+                    'd-flex ai-center gap8 w100 br8 c-pointer ta-left tc-neutral-900',
+                    styles.option, {
+                    [styles.optionSelected]: option.id === localValue,
+                  })}
+                >
+                  {option.icon && (
+                    <span className={styles.optionIcon}>{option.icon}</span>
+                  )}
+                  <span className="p-p">{option.label}</span>
+                </label>
+              </div>
+            ))}
+            {filteredOptions.length === 0 && (
+              <p className={`p-p tc-neutral-500 ${styles.noResults}`}>
+                {noResultsText}
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};