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

``bash
npm install hrnet-select-menu
`

🚀 Utilisation Basique

`jsx
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 (
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

`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

`jsx
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 (


`bash
npm test
``

📄 Licence

MIT