HRnet SelectMenu

Composant SelectMenu réutilisable pour React avec support clavier complet et accessibilité.

✨ Fonctionnalités

• 🎯 Accessibilité complète - Support clavier, ARIA, navigation
• ⌨️ Navigation clavier - Flèches, Entrée, Échap
• 🎨 Styles personnalisables - CSS variables pour le thème
• 📱 Responsive - S'adapte à tous les écrans
• 🔧 Contrôlé/Non-contrôlé - Support des deux modes
• 🚀 Léger - Pas de dépendances externes

📦 Installation

npm install hrnet-select-menu

🚀 Utilisation Basique

import { SelectMenu } from 'hrnet-select-menu';

const options = [
  { value: 'sales', label: 'Sales' },
  { value: 'marketing', label: 'Marketing' },
  { value: 'engineering', label: 'Engineering' }
];

function MyComponent() {
  const [selected, setSelected] = useState('');

  return (
    <SelectMenu 
      options={options}
      value={selected}
      onChange={(e) => setSelected(e.target.value)}
      placeholder="Sélectionner un département..."
    />
  );
}

🎛️ Props API

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | options | Array<{value: string, label: string}> | [] | Options disponibles | | value | string | '' | Valeur sélectionnée (mode contrôlé) | | defaultValue | string | '' | Valeur par défaut (mode non-contrôlé) | | onChange | (event) => void | - | Callback de changement | | placeholder | string | 'Select...' | Texte de placeholder | | id | string | - | ID du composant | | name | string | - | Nom du champ | | required | boolean | false | Champ requis |

🎨 Personnalisation CSS

:root {
  --border: #e6e9ee;
  --accent: #0b5fff;
  --card: #fff;
  --shadow: 0 8px 24px rgba(20,24,30,0.08);
}

.select-menu {
  /* Vos styles personnalisés */
}

⌨️ Navigation Clavier

• Flèches ↑↓ : Naviguer dans les options
• Entrée : Sélectionner l'option
• Échap : Fermer le menu
• Tab : Navigation entre les champs

📱 Exemple Complet

import React, { useState } from 'react';
import { SelectMenu } from 'hrnet-select-menu';

function EmployeeForm() {
  const [formData, setFormData] = useState({
    department: '',
    state: ''
  });

  const departments = [
    { value: 'sales', label: 'Sales' },
    { value: 'marketing', label: 'Marketing' },
    { value: 'engineering', label: 'Engineering' },
    { value: 'hr', label: 'Human Resources' }
  ];

  const states = [
    { value: 'AL', label: 'Alabama' },
    { value: 'CA', label: 'California' },
    { value: 'NY', label: 'New York' },
    { value: 'TX', label: 'Texas' }
  ];

  const handleChange = (field) => (e) => {
    setFormData(prev => ({
      ...prev,
      [field]: e.target.value
    }));
  };

  return (
    <form>
      <div>
        <label>Département</label>
        <SelectMenu
          name="department"
          options={departments}
          value={formData.department}
          onChange={handleChange('department')}
          placeholder="Sélectionner un département..."
          required
        />
      </div>
      
      <div>
        <label>État</label>
        <SelectMenu
          name="state"
          options={states}
          value={formData.state}
          onChange={handleChange('state')}
          placeholder="Sélectionner un état..."
          required
        />
      </div>
    </form>
  );
}

🧪 Tests

npm test

📄 Licence

MIT