@rsuci/shared-form-components 1.0.2 → 1.0.3

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export { default as DepartementInput } from './geographic/DepartementInput';
 export { default as SousPrefectureInput } from './geographic/SousPrefectureInput';
 export { default as QuartierInput } from './geographic/QuartierInput';
 export { default as VillageInput } from './geographic/VillageInput';
+export { default as SearchableSelect } from './inputs/SearchableSelect';
 export { default as GeographicCascadeInput } from './inputs/GeographicCascadeInput';
 export { default as StringInput } from './inputs/StringInput';
 export { default as NumberInput } from './inputs/NumberInput';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAI3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGpE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAG9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAI3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAG9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/index.js

@@ -14,6 +14,7 @@ export { default as SousPrefectureInput } from './geographic/SousPrefectureInput
 export { default as QuartierInput } from './geographic/QuartierInput';
 export { default as VillageInput } from './geographic/VillageInput';
 // Input Components
+export { default as SearchableSelect } from './inputs/SearchableSelect';
 export { default as GeographicCascadeInput } from './inputs/GeographicCascadeInput';
 export { default as StringInput } from './inputs/StringInput';
 export { default as NumberInput } from './inputs/NumberInput';

package/dist/components/inputs/GeographicCascadeInput.d.ts

@@ -2,6 +2,7 @@
  * Composant unifié pour la sélection géographique en cascade
  * S'adapte automatiquement selon le type de variable (DISTRICT, REGION, DEPARTEMENT, etc.)
  * Gère la cascade via le champ variable.valeur (ex: "${G_01}")
+ * Utilise SearchableSelect pour une meilleure UX avec recherche intégrée
  */
 import React from 'react';
 /**

package/dist/components/inputs/GeographicCascadeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GeographicCascadeInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/GeographicCascadeInput.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAShE;;GAEG;AACH,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB;AAWD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAiLxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"GeographicCascadeInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/GeographicCascadeInput.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAUhE;;GAEG;AACH,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB;AAWD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA+KxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/inputs/GeographicCascadeInput.js

@@ -3,8 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Composant unifié pour la sélection géographique en cascade
  * S'adapte automatiquement selon le type de variable (DISTRICT, REGION, DEPARTEMENT, etc.)
  * Gère la cascade via le champ variable.valeur (ex: "${G_01}")
+ * Utilise SearchableSelect pour une meilleure UX avec recherche intégrée
  */
 import { useEffect, useState, useCallback } from 'react';
+import SearchableSelect from './SearchableSelect';
 import { resolveParentValue, getApiEndpoint, getParentLabel, requiresParent } from '../../utils/variableDependencyResolver';
 export const GeographicCascadeInput = ({ variable, value, onChange, reponses, disabled = false, required = false, className = '' }) => {
     const [items, setItems] = useState([]);
@@ -71,22 +73,18 @@ export const GeographicCascadeInput = ({ variable, value, onChange, reponses, di
         }
     }, [parentValue, needsParent, value]);
     // 7. Gérer le changement de valeur
-    const handleChange = (e) => {
-        const selectedId = e.target.value;
-        if (!selectedId || selectedId === '') {
+    const handleChange = (option) => {
+        if (!option) {
             onChange(null);
             return;
         }
-        const parsedId = parseInt(selectedId, 10);
-        if (isNaN(parsedId)) {
-            onChange(null);
-            return;
-        }
-        const selected = items.find(item => item.id === parsedId);
-        if (selected) {
-            // Stocker l'objet complet SelectDto
-            onChange(selected);
-        }
+        // Convertir SelectOption vers SelectDto
+        const selectDto = {
+            id: typeof option.id === 'string' ? parseInt(option.id, 10) : option.id,
+            code: option.code || '',
+            designation: option.designation
+        };
+        onChange(selectDto);
     };
     // 8. Déterminer si le champ est désactivé
     const isDisabled = disabled || loading || (needsParent && !parentValue);
@@ -94,8 +92,6 @@ export const GeographicCascadeInput = ({ variable, value, onChange, reponses, di
     const getPlaceholder = () => {
         if (loading)
             return 'Chargement...';
-        if (error)
-            return error;
         if (needsParent && !parentValue) {
             return `Sélectionnez d'abord ${getParentLabel(variable.type)}`;
         }
@@ -104,9 +100,24 @@ export const GeographicCascadeInput = ({ variable, value, onChange, reponses, di
         }
         return `Sélectionner ${variable.libelle || 'un élément'}...`;
     };
-    // 10. Rendu du composant
-    return (_jsxs("div", { className: "w-full", children: [_jsxs("select", { value: value?.id || '', onChange: handleChange, disabled: isDisabled, required: required, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors ${error ? 'border-red-300 bg-red-50' : 'border-gray-300'} ${isDisabled
-                    ? 'bg-gray-100 cursor-not-allowed text-gray-500'
-                    : 'bg-white text-gray-900'} ${className}`, title: isDisabled && needsParent && !parentValue ? `Sélectionnez d'abord ${getParentLabel(variable.type)}` : '', children: [_jsx("option", { value: "", children: getPlaceholder() }), items.map((item) => (_jsx("option", { value: item.id, children: item.designation }, item.id)))] }), error && !loading && (_jsxs("p", { className: "mt-1 text-sm text-red-600 flex items-center", children: [_jsx("svg", { className: "w-4 h-4 mr-1", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), error] })), needsParent && !parentValue && !loading && !error && (_jsxs("p", { className: "mt-1 text-sm text-gray-500 flex items-center", children: [_jsx("svg", { className: "w-4 h-4 mr-1", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }), "Veuillez d'abord s\u00E9lectionner ", getParentLabel(variable.type)] })), loading && (_jsxs("p", { className: "mt-1 text-sm text-blue-600 flex items-center", children: [_jsxs("svg", { className: "animate-spin h-4 w-4 mr-1", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "Chargement des donn\u00E9es..."] }))] }));
+    // 10. Convertir les items en SelectOption pour SearchableSelect
+    const options = items.map(item => ({
+        id: item.id,
+        code: item.code,
+        designation: item.designation
+    }));
+    // 11. Convertir la valeur actuelle en SelectOption
+    const currentValue = value ? {
+        id: value.id,
+        code: value.code,
+        designation: value.designation
+    } : null;
+    // 12. Rendu du composant
+    return (_jsxs("div", { className: "w-full", children: [_jsx(SearchableSelect, { options: options, value: currentValue, onChange: handleChange, placeholder: getPlaceholder(), searchPlaceholder: "Rechercher...", disabled: isDisabled, required: required, loading: loading, error: error || undefined, className: className, noOptionsMessage: needsParent && !parentValue
+                    ? `Veuillez d'abord sélectionner ${getParentLabel(variable.type)}`
+                    : `Aucun(e) ${variable.libelle?.toLowerCase() || 'élément'} disponible`, formatOptionLabel: (option) => {
+                    // Formater le label avec le code si disponible
+                    return option.code ? `${option.code} ${option.designation}` : option.designation;
+                } }), needsParent && !parentValue && !loading && !error && (_jsxs("p", { className: "mt-1 text-sm text-gray-500 flex items-center", children: [_jsx("svg", { className: "w-4 h-4 mr-1", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }), "Veuillez d'abord s\u00E9lectionner ", getParentLabel(variable.type)] })), loading && (_jsxs("p", { className: "mt-1 text-sm text-blue-600 flex items-center", children: [_jsxs("svg", { className: "animate-spin h-4 w-4 mr-1", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "Chargement des donn\u00E9es..."] }))] }));
 };
 export default GeographicCascadeInput;

package/dist/components/inputs/SearchableSelect.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Composant de sélection avec recherche intégrée
+ * Inspiré du design de production avec champ de filtre
+ */
+import React from 'react';
+export interface SelectOption {
+    id: number | string;
+    code?: string;
+    designation: string;
+    [key: string]: any;
+}
+interface SearchableSelectProps {
+    options: SelectOption[];
+    value?: SelectOption | null;
+    onChange: (option: SelectOption | null) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    loading?: boolean;
+    error?: string;
+    className?: string;
+    noOptionsMessage?: string;
+    formatOptionLabel?: (option: SelectOption) => string;
+}
+export declare const SearchableSelect: React.FC<SearchableSelectProps>;
+export default SearchableSelect;
+//# sourceMappingURL=SearchableSelect.d.ts.map

package/dist/components/inputs/SearchableSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SearchableSelect.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,MAAM,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+L5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/inputs/SearchableSelect.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Composant de sélection avec recherche intégrée
+ * Inspiré du design de production avec champ de filtre
+ */
+import { useState, useRef, useEffect } from 'react';
+export const SearchableSelect = ({ options, value, onChange, placeholder = 'Sélectionner...', searchPlaceholder = 'Rechercher...', disabled = false, required = false, loading = false, error, className = '', noOptionsMessage = 'Aucune option disponible', formatOptionLabel }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const dropdownRef = useRef(null);
+    const searchInputRef = useRef(null);
+    // Fermer le dropdown quand on clique à l'extérieur
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setSearchTerm('');
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    // Focus sur le champ de recherche quand le dropdown s'ouvre
+    useEffect(() => {
+        if (isOpen && searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    }, [isOpen]);
+    // Filtrer les options selon le terme de recherche
+    const filteredOptions = options.filter(option => {
+        const label = formatOptionLabel ? formatOptionLabel(option) : option.designation;
+        const searchLower = searchTerm.toLowerCase();
+        return (label.toLowerCase().includes(searchLower) ||
+            (option.code && option.code.toLowerCase().includes(searchLower)));
+    });
+    // Gérer la sélection d'une option
+    const handleSelect = (option) => {
+        onChange(option);
+        setIsOpen(false);
+        setSearchTerm('');
+    };
+    // Gérer l'ouverture/fermeture du dropdown
+    const toggleDropdown = () => {
+        if (!disabled && !loading) {
+            setIsOpen(!isOpen);
+            if (!isOpen) {
+                setSearchTerm('');
+            }
+        }
+    };
+    // Formater le label d'une option
+    const getOptionLabel = (option) => {
+        if (formatOptionLabel) {
+            return formatOptionLabel(option);
+        }
+        return option.code ? `${option.code} ${option.designation}` : option.designation;
+    };
+    // Obtenir le label de la valeur sélectionnée
+    const getSelectedLabel = () => {
+        if (!value)
+            return placeholder;
+        return getOptionLabel(value);
+    };
+    return (_jsxs("div", { className: `relative w-full ${className}`, ref: dropdownRef, children: [_jsx("button", { type: "button", onClick: toggleDropdown, disabled: disabled || loading, className: `w-full px-3 py-2 text-left border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors ${error ? 'border-red-300 bg-red-50' : 'border-gray-300'} ${disabled || loading
+                    ? 'bg-gray-100 cursor-not-allowed text-gray-500'
+                    : 'bg-white text-gray-900 hover:border-gray-400'} ${isOpen ? 'ring-2 ring-blue-500 border-transparent' : ''}`, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: value ? 'text-gray-900' : 'text-gray-500', children: loading ? 'Chargement...' : getSelectedLabel() }), _jsx("svg", { className: `w-5 h-5 text-gray-400 transition-transform ${isOpen ? 'transform rotate-180' : ''}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }) }), isOpen && !disabled && !loading && (_jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-80 overflow-hidden", children: [_jsx("div", { className: "p-2 border-b border-gray-200 bg-gray-50", children: _jsxs("div", { className: "relative", children: [_jsx("svg", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx("input", { ref: searchInputRef, type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: searchPlaceholder, className: "w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" })] }) }), _jsx("div", { className: "overflow-y-auto max-h-60", children: filteredOptions.length === 0 ? (_jsx("div", { className: "px-4 py-3 text-sm text-gray-500 text-center", children: searchTerm ? `Aucun résultat pour "${searchTerm}"` : noOptionsMessage })) : (_jsx("ul", { className: "py-1", children: filteredOptions.map((option) => {
+                                const isSelected = value?.id === option.id;
+                                return (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => handleSelect(option), className: `w-full px-4 py-2 text-left text-sm hover:bg-blue-50 transition-colors ${isSelected ? 'bg-blue-100 text-blue-900 font-medium' : 'text-gray-900'}`, children: getOptionLabel(option) }) }, option.id));
+                            }) })) })] })), error && (_jsxs("p", { className: "mt-1 text-sm text-red-600 flex items-center", children: [_jsx("svg", { className: "w-4 h-4 mr-1", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), error] })), required && !value && (_jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Ce champ est obligatoire" }))] }));
+};
+export default SearchableSelect;

package/dist/components/inputs/SelectInput.d.ts

@@ -1,5 +1,5 @@
 /**
- * Composant SelectInput - Liste de sélection avec recherche et pagination
+ * Composant SelectInput - Liste de sélection avec recherche intégrée
  * RSU v2 - Moteur de Rendu des Formulaires d'Enquête
  */
 import React from 'react';

package/dist/components/inputs/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SelectInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGxE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkI3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SelectInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIxE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuF3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/inputs/SelectInput.js

@@ -1,15 +1,12 @@
 /**
- * Composant SelectInput - Liste de sélection avec recherche et pagination
+ * Composant SelectInput - Liste de sélection avec recherche intégrée
  * RSU v2 - Moteur de Rendu des Formulaires d'Enquête
  */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
 import { VariableValueConverter } from '../../lib/utils/variableValueConverter';
+import SearchableSelect from './SearchableSelect';
 const SelectInput = ({ variable, value, onChange, onBlur, error, disabled }) => {
-    const [searchTerm, setSearchTerm] = useState('');
-    const [currentPage, setCurrentPage] = useState(1);
-    const itemsPerPage = 10;
     // Récupérer les options depuis la propriété valeur OU valeurDefaut (format: "Code1#Designation1|Code2#Designation2")
     const optionsSource = variable.proprietes?.valeur || variable.valeurDefaut;
     const allOptions = optionsSource && typeof optionsSource === 'string'
@@ -18,22 +15,30 @@ const SelectInput = ({ variable, value, onChange, onBlur, error, disabled }) =>
             code: opt.value.toString(),
             designation: opt.label
         }));
-    // Filtrage par recherche
-    const filteredOptions = allOptions.filter(option => option.designation.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        option.code.toLowerCase().includes(searchTerm.toLowerCase()));
-    // Pagination
-    const totalPages = Math.ceil(filteredOptions.length / itemsPerPage);
-    const startIndex = (currentPage - 1) * itemsPerPage;
-    const paginatedOptions = filteredOptions.slice(startIndex, startIndex + itemsPerPage);
     const selectedValue = value || '';
-    // Affichage radio pour peu d'options
-    if (allOptions.length <= 5 && !searchTerm) {
+    // Affichage radio pour peu d'options (≤5)
+    if (allOptions.length <= 5) {
         return (_jsx("div", { className: "space-y-2", children: allOptions.map((option) => (_jsxs("label", { className: "flex items-center space-x-2 cursor-pointer", children: [_jsx("input", { type: "radio", name: variable.code, value: option.code, checked: selectedValue === option.code, onChange: (e) => onChange(e.target.value), onBlur: onBlur, disabled: disabled, className: `w-4 h-4 text-green-600 border-gray-300 focus:ring-green-500 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}` }), _jsx("span", { className: `text-sm ${disabled ? 'text-gray-400' : 'text-gray-700'}`, children: option.designation })] }, option.code))) }));
     }
-    // Affichage avec recherche et pagination pour beaucoup d'options
-    return (_jsxs("div", { className: "space-y-3", children: [allOptions.length > 10 && (_jsx("div", { className: "relative", children: _jsx("input", { type: "text", placeholder: "Rechercher...", value: searchTerm, onChange: (e) => {
-                        setSearchTerm(e.target.value.toUpperCase());
-                        setCurrentPage(1); // Reset à la première page lors de la recherche
-                    }, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-sm text-gray-900 bg-white" }) })), _jsxs("select", { value: selectedValue, onChange: (e) => onChange(e.target.value || ''), onBlur: onBlur, disabled: disabled, className: `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent text-gray-900 ${error ? 'border-red-500' : 'border-gray-300'} ${disabled ? 'bg-gray-100 cursor-not-allowed text-gray-500' : 'bg-white'}`, children: [_jsx("option", { value: "", children: "S\u00E9lectionner..." }), paginatedOptions.map((option) => (_jsxs("option", { value: option.code, children: [option.code, " - ", option.designation] }, option.code)))] }), totalPages > 1 && (_jsxs("div", { className: "flex items-center justify-between text-sm text-gray-600", children: [_jsxs("div", { children: ["Page ", currentPage, " sur ", totalPages, " (", filteredOptions.length, " \u00E9l\u00E9ments)"] }), _jsxs("div", { className: "flex space-x-2", children: [_jsx("button", { type: "button", onClick: () => setCurrentPage(Math.max(1, currentPage - 1)), disabled: currentPage === 1 || disabled, className: "px-2 py-1 border border-gray-300 rounded text-xs hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed", children: "Pr\u00E9c\u00E9dent" }), _jsx("button", { type: "button", onClick: () => setCurrentPage(Math.min(totalPages, currentPage + 1)), disabled: currentPage === totalPages || disabled, className: "px-2 py-1 border border-gray-300 rounded text-xs hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed", children: "Suivant" })] })] })), selectedValue && (_jsx("div", { className: "p-2 bg-green-50 border border-green-200 rounded text-sm", children: _jsxs("span", { className: "text-green-800", children: ["S\u00E9lectionn\u00E9: ", allOptions.find(opt => opt.code === selectedValue)?.designation || selectedValue] }) }))] }));
+    // Convertir les options au format SelectOption pour SearchableSelect
+    const selectOptions = allOptions.map(opt => ({
+        id: opt.code,
+        code: opt.code,
+        designation: opt.designation
+    }));
+    // Trouver l'option sélectionnée
+    const selectedOption = selectOptions.find(opt => opt.code === selectedValue) || null;
+    // Gérer le changement de sélection
+    const handleChange = (option) => {
+        onChange(option?.code || '');
+        if (onBlur)
+            onBlur();
+    };
+    // Format d'affichage: "Code - Designation"
+    const formatOptionLabel = (option) => {
+        return `${option.code} - ${option.designation}`;
+    };
+    // Affichage avec SearchableSelect pour beaucoup d'options (>5)
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(SearchableSelect, { options: selectOptions, value: selectedOption, onChange: handleChange, placeholder: "S\u00E9lectionner...", searchPlaceholder: "Rechercher...", disabled: disabled, required: variable.estObligatoire, error: error, formatOptionLabel: formatOptionLabel, noOptionsMessage: "Aucune option trouv\u00E9e" }), selectedValue && selectedOption && (_jsx("div", { className: "p-2 bg-green-50 border border-green-200 rounded text-sm", children: _jsxs("span", { className: "text-green-800", children: ["S\u00E9lectionn\u00E9: ", selectedOption.designation] }) }))] }));
 };
 export default SelectInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsuci/shared-form-components",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Composants partagés de rendu de formulaires RSU v2 - Package local pour frontend Admin et Public",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto