@tsiky/components-r19 1.0.0 → 1.2.0

package/src/components/SelectFilter/SelectFilter.tsx

@@ -0,0 +1,219 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import type { SelectFilterProps, SelectOption } from './types';
+import styles from './SelectFilter.module.css';
+
+const SelectFilter: React.FC<SelectFilterProps> = ({
+  options,
+  value,
+  onChange,
+  placeholder = 'Sélectionner une option...',
+  disabled = false,
+  loading = false,
+  error = false,
+  className = '',
+  size = 'md',
+  variant = 'default',
+  width = 'w-full',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const filteredOptions = useMemo(() => {
+    if (!searchTerm) return options;
+    return options.filter((option) =>
+      option.label.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [options, searchTerm]);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setSearchTerm('');
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [filteredOptions]);
+
+  const handleSelect = (option: SelectOption) => {
+    if (option.disabled) return;
+    onChange?.(option.value, option);
+    setIsOpen(false);
+    setSearchTerm('');
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+    if (!isOpen) setIsOpen(true);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter') {
+        setIsOpen(true);
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setHighlightedIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : prev));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (filteredOptions[highlightedIndex]) {
+          handleSelect(filteredOptions[highlightedIndex]);
+        }
+        break;
+      case 'Escape':
+        setIsOpen(false);
+        setSearchTerm('');
+        break;
+    }
+  };
+
+  const getButtonClasses = () => {
+    const baseClasses = [
+      styles.selectButton,
+      styles[size],
+      styles[variant],
+      disabled ? styles.disabled : '',
+      error ? styles.error : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return baseClasses;
+  };
+
+  const getWidthClass = () => {
+    switch (width) {
+      case 'w-64':
+        return styles.width64;
+      case 'w-80':
+        return styles.width80;
+      case 'w-96':
+        return styles.width96;
+      default:
+        return styles.widthFull;
+    }
+  };
+
+  const getOptionClasses = (option: SelectOption, index: number) => {
+    return [
+      styles.option,
+      index === highlightedIndex ? styles.optionHighlighted : '',
+      option.value === value ? styles.optionSelected : '',
+      option.disabled ? styles.optionDisabled : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  };
+
+  return (
+    <div className={`${styles.container} ${getWidthClass()}`} ref={dropdownRef}>
+      <button
+        className={getButtonClasses()}
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        onKeyDown={handleKeyDown}
+        tabIndex={disabled ? -1 : 0}
+        type='button'
+        aria-haspopup='listbox'
+        aria-expanded={isOpen}
+        disabled={disabled}
+      >
+        <div className={styles.buttonContent}>
+          <span className={`${styles.label} ${!selectedOption ? styles.placeholder : ''}`}>
+            {selectedOption ? selectedOption.label : placeholder}
+          </span>
+          <div className={styles.iconsContainer}>
+            {loading && <div className={styles.loadingSpinner} />}
+            <svg
+              className={`${styles.arrowIcon} ${isOpen ? styles.arrowIconOpen : ''}`}
+              fill='none'
+              stroke='currentColor'
+              viewBox='0 0 24 24'
+            >
+              <path
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth={2}
+                d='M19 9l-7 7-7-7'
+              />
+            </svg>
+          </div>
+        </div>
+      </button>
+
+      {isOpen && (
+        <div className={`${styles.dropdown} ${getWidthClass()}`}>
+          <div className={styles.searchContainer}>
+            <input
+              ref={inputRef}
+              type='text'
+              value={searchTerm}
+              onChange={handleInputChange}
+              placeholder='Rechercher...'
+              className={styles.searchInput}
+              autoFocus
+            />
+          </div>
+
+          <div className={styles.optionsList}>
+            {filteredOptions.length === 0 ? (
+              <div className={styles.noResults}>Aucun résultat trouvé</div>
+            ) : (
+              <ul role='listbox'>
+                {filteredOptions.map((option, index) => (
+                  <li
+                    key={option.value}
+                    className={getOptionClasses(option, index)}
+                    onClick={() => handleSelect(option)}
+                    onMouseEnter={() => setHighlightedIndex(index)}
+                    role='option'
+                    aria-selected={option.value === value}
+                    aria-disabled={option.disabled}
+                  >
+                    <div className={styles.buttonContent}>
+                      <span className={styles.optionLabel} title={option.label}>
+                        {option.label}
+                      </span>
+                      {option.value === value && (
+                        <svg className={styles.checkIcon} fill='currentColor' viewBox='0 0 20 20'>
+                          <path
+                            fillRule='evenodd'
+                            d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
+                            clipRule='evenodd'
+                          />
+                        </svg>
+                      )}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SelectFilter;

package/src/components/SelectFilter/index.ts

@@ -0,0 +1,2 @@
+export { default as SelectFilter } from './SelectFilter';
+export type { SelectFilterProps, SelectOption } from './types';

package/src/components/SelectFilter/types.ts

@@ -0,0 +1,19 @@
+export interface SelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectFilterProps {
+  options: SelectOption[];
+  value?: string | number;
+  onChange?: (value: string | number, option: SelectOption) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  error?: boolean;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline' | 'filled';
+  width?: 'w-full' | 'w-64' | 'w-80' | 'w-96';
+}