@rsuci/shared-form-components 1.0.1 → 1.0.3

package/dist/components/VariableRenderer.d.ts

@@ -21,6 +21,7 @@ export interface VariableRendererProps {
         valeur?: string;
     }>;
     allResponses?: Record<string, EnqueteReponse>;
+    reponses?: Record<string, any>;
     RosterCheckInput?: React.ComponentType<VariableRendererProps>;
     RosterListInput?: React.ComponentType<VariableRendererProps>;
     interpolateVariableLabel?: (label: string, responses: Record<string, EnqueteReponse>, numeroMembre?: number) => string;

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

@@ -1 +1 @@
-{"version":3,"file":"VariableRenderer.d.ts","sourceRoot":"","sources":["../../src/components/VariableRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgCxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,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;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9D,qBAAqB,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjE,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC3C,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChG,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAG9C,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC9D,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC7D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAGvH,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,oBAAoB,CAAC,EAAE,GAAG,CAAC;CAC5B;AAGD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAQvD,CAAC;AAGF,QAAA,MAAM,mBAAmB,GACvB,UAAU,MAAM,EAChB,mBAAmB,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,EAC7D,kBAAkB,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,KAC3D,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAgD3C,CAAC;AAGF,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+FrD,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"VariableRenderer.d.ts","sourceRoot":"","sources":["../../src/components/VariableRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA2BxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,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;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9D,qBAAqB,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjE,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC3C,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChG,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAG/B,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC9D,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAC7D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAGvH,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,oBAAoB,CAAC,EAAE,GAAG,CAAC;CAC5B;AAGD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAQvD,CAAC;AAGF,QAAA,MAAM,mBAAmB,GACvB,UAAU,MAAM,EAChB,mBAAmB,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,EAC7D,kBAAkB,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,KAC3D,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAgD3C,CAAC;AAGF,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiGrD,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/VariableRenderer.js

@@ -3,7 +3,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from 'react';
 import { AlertCircle, HelpCircle } from 'lucide-react';
 // Import des composants depuis l'index
-import { IdDocInput, LabelDisplay, PanelDisplay, DistrictInput, RegionInput, DepartementInput, SousPrefectureInput, QuartierInput, VillageInput, StringInput, NumberInput, DatePicker, SelectInput, RadioInput, CheckboxInput, ComboboxInput, PhoneInput, GPSInput, HourInput, RSUInput, MenageInput, EnqueteInput, PhotoCapture, ImageUpload } from './index';
+import { IdDocInput, LabelDisplay, PanelDisplay, GeographicCascadeInput, StringInput, NumberInput, DatePicker, SelectInput, RadioInput, CheckboxInput, ComboboxInput, PhoneInput, GPSInput, HourInput, RSUInput, MenageInput, EnqueteInput, PhotoCapture, ImageUpload } from './index';
 // Composant générique pour les types géographiques non encore implémentés
 const GeographicFallback = ({ variable }) => {
     return (_jsx("div", { className: "p-3 bg-yellow-50 border border-yellow-200 rounded-lg", children: _jsxs("p", { className: "text-yellow-800 text-sm", children: ["Composant ", variable.typeCode, " en cours d'impl\u00E9mentation"] }) }));
@@ -27,14 +27,14 @@ const getVariableRenderer = (typeCode, RosterCheckInput, RosterListInput) => {
         'PHONE': PhoneInput,
         'LABEL': LabelDisplay,
         'PANEL': PanelDisplay,
-        // Composants géographiques spécialisés
+        // Composants géographiques - Utilisation du composant unifié GeographicCascadeInput
         'PAYS': GeographicFallback,
-        'DISTRICT': DistrictInput,
-        'REGION': RegionInput,
-        'DEPARTEMENT': DepartementInput,
-        'SOUSPREFECTURE': SousPrefectureInput,
-        'QUARTIER': QuartierInput,
-        'VILLAGE': VillageInput,
+        'DISTRICT': GeographicCascadeInput,
+        'REGION': GeographicCascadeInput,
+        'DEPARTEMENT': GeographicCascadeInput,
+        'SOUSPREFECTURE': GeographicCascadeInput,
+        'QUARTIER': GeographicCascadeInput,
+        'VILLAGE': GeographicCascadeInput,
         'RSU': RSUInput,
         // Composant de sélection de ménage
         'MENAGE': MenageInput,
@@ -53,7 +53,7 @@ const getVariableRenderer = (typeCode, RosterCheckInput, RosterListInput) => {
     return renderers[typeCode] || StringInput;
 };
 // Composant principal VariableRenderer
-const VariableRenderer = ({ variable, value, onChange, onBlur, error, disabled, numeroMembre, valeurMin, onFillFormFromMenage, onFillFormFromEnquete, formulaireVariables, rosterVariables, allResponses = {}, RosterCheckInput, RosterListInput, interpolateVariableLabel }) => {
+const VariableRenderer = ({ variable, value, onChange, onBlur, error, disabled, numeroMembre, valeurMin, onFillFormFromMenage, onFillFormFromEnquete, formulaireVariables, rosterVariables, allResponses = {}, RosterCheckInput, RosterListInput, interpolateVariableLabel, reponses = {} }) => {
     const RendererComponent = getVariableRenderer(variable.typeCode, RosterCheckInput, RosterListInput);
     // Interpoler le libellé avec les valeurs des autres variables (si fonction fournie)
     const interpolatedDesignation = interpolateVariableLabel
@@ -77,7 +77,7 @@ const VariableRenderer = ({ variable, value, onChange, onBlur, error, disabled,
                             length: Array.isArray(rosterVariables) ? rosterVariables.length : 'N/A'
                         });
                         return null;
-                    })(), _jsx(RendererComponent, { variable: variable, value: value, onChange: onChange, onBlur: onBlur, error: error, disabled: disabled, numeroMembre: numeroMembre, valeurMin: valeurMin, onFillFormFromMenage: onFillFormFromMenage, onFillFormFromEnquete: onFillFormFromEnquete, formulaireVariables: formulaireVariables, rosterVariables: rosterVariables, allResponses: allResponses })] }), variable.proprietes?.helpText && (_jsx("p", { className: "text-xs text-gray-500", children: variable.proprietes.helpText })), error && (_jsxs("div", { className: "flex items-center space-x-1 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: error })] }))] }));
+                    })(), _jsx(RendererComponent, { variable: variable, value: value, onChange: onChange, onBlur: onBlur, error: error, disabled: disabled, numeroMembre: numeroMembre, valeurMin: valeurMin, onFillFormFromMenage: onFillFormFromMenage, onFillFormFromEnquete: onFillFormFromEnquete, formulaireVariables: formulaireVariables, rosterVariables: rosterVariables, allResponses: allResponses, reponses: reponses })] }), variable.proprietes?.helpText && (_jsx("p", { className: "text-xs text-gray-500", children: variable.proprietes.helpText })), error && (_jsxs("div", { className: "flex items-center space-x-1 text-red-600 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4" }), _jsx("span", { children: error })] }))] }));
 };
 export default VariableRenderer;
 export { getVariableRenderer, GeographicFallback };

package/dist/components/index.d.ts

@@ -9,6 +9,8 @@ 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';
 export { default as DatePicker } from './inputs/DatePicker';

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,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,8 @@ 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';
 export { default as DatePicker } from './inputs/DatePicker';

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

@@ -0,0 +1,27 @@
+/**
+ * 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';
+/**
+ * Format de données retourné par les APIs backend
+ */
+interface SelectDto {
+    id: number;
+    code: string;
+    designation: string;
+}
+interface GeographicCascadeInputProps {
+    variable: any;
+    value: any;
+    onChange: (value: SelectDto | null) => void;
+    reponses: Record<string, any>;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+}
+export declare const GeographicCascadeInput: React.FC<GeographicCascadeInputProps>;
+export default GeographicCascadeInput;
+//# sourceMappingURL=GeographicCascadeInput.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,123 @@
+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([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // 1. Déterminer si ce type nécessite un parent
+    const needsParent = requiresParent(variable.type);
+    // 2. Résoudre la valeur du parent depuis les réponses
+    const parentValue = resolveParentValue(variable, reponses);
+    // 3. Déterminer l'endpoint API à appeler
+    const apiEndpoint = getApiEndpoint(variable.type, parentValue);
+    // 4. Fonction pour charger les données
+    const fetchData = useCallback(async () => {
+        // Si un parent est requis mais absent, ne rien charger
+        if (needsParent && !parentValue) {
+            setItems([]);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+        // Si pas d'endpoint valide, ne rien charger
+        if (!apiEndpoint) {
+            setItems([]);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+        try {
+            setLoading(true);
+            setError(null);
+            const response = await fetch(apiEndpoint);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const result = await response.json();
+            // Vérifier le format de la réponse
+            if (result.success && Array.isArray(result.data)) {
+                setItems(result.data);
+            }
+            else {
+                throw new Error('Format de réponse invalide');
+            }
+        }
+        catch (err) {
+            console.error(`Error fetching ${variable.type}:`, err);
+            setError(`Erreur de chargement des ${variable.libelle?.toLowerCase() || 'données'}`);
+            setItems([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiEndpoint, needsParent, parentValue, variable.type, variable.libelle]);
+    // 5. Charger les données quand l'endpoint ou le parent change
+    useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+    // 6. Réinitialiser la valeur si le parent change
+    useEffect(() => {
+        // Si un parent est requis et qu'il a changé, réinitialiser la valeur
+        if (needsParent && value && parentValue) {
+            // Vérifier si la valeur actuelle est toujours valide
+            // (on pourrait faire une vérification plus poussée ici)
+            // Pour l'instant, on garde la valeur et laisse l'utilisateur la changer si nécessaire
+        }
+    }, [parentValue, needsParent, value]);
+    // 7. Gérer le changement de valeur
+    const handleChange = (option) => {
+        if (!option) {
+            onChange(null);
+            return;
+        }
+        // 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);
+    // 9. Déterminer le message du placeholder
+    const getPlaceholder = () => {
+        if (loading)
+            return 'Chargement...';
+        if (needsParent && !parentValue) {
+            return `Sélectionnez d'abord ${getParentLabel(variable.type)}`;
+        }
+        if (items.length === 0 && !loading) {
+            return `Aucun(e) ${variable.libelle?.toLowerCase() || 'élément'} disponible`;
+        }
+        return `Sélectionner ${variable.libelle || 'un élément'}...`;
+    };
+    // 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/dist/utils/variableDependencyResolver.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Utilitaires pour résoudre les dépendances entre variables géographiques
+ * Permet de gérer la cascade : District → Région → Département → Sous-Préfecture → Quartier/Village
+ */
+/**
+ * Extrait le code d'une variable depuis le format "${CODE}"
+ * @param valeur - Valeur du champ variable.valeur (ex: "${G_01}")
+ * @returns Code de la variable (ex: "G_01") ou null si pas de référence
+ *
+ * @example
+ * extractVariableCode("${G_01}") // Returns: "G_01"
+ * extractVariableCode("${DISTRICT_VAR}") // Returns: "DISTRICT_VAR"
+ * extractVariableCode(null) // Returns: null
+ * extractVariableCode("G_01") // Returns: null (pas de ${})
+ */
+export declare function extractVariableCode(valeur: string | null | undefined): string | null;
+/**
+ * Résout la valeur ID d'une variable parente depuis les réponses
+ * @param variable - Variable actuelle
+ * @param reponses - Toutes les réponses du formulaire
+ * @returns ID de la valeur parente ou null
+ *
+ * @example
+ * // Variable G_03 (Département) avec valeur: "${G_02}"
+ * // reponses = { "G_02": { valeur: { id: 10, code: "REG01", designation: "Abidjan" } } }
+ * resolveParentValue(variable, reponses) // Returns: 10
+ */
+export declare function resolveParentValue(variable: any, reponses: Record<string, any>): number | null;
+/**
+ * Détermine l'endpoint API selon le type de variable et l'ID du parent
+ * @param variableType - Type de la variable (DISTRICT, REGION, DEPARTEMENT, etc.)
+ * @param parentId - ID du parent (optionnel)
+ * @returns Endpoint API ou null si invalide
+ *
+ * @example
+ * getApiEndpoint('DISTRICT') // Returns: '/api/v1/Districts/select'
+ * getApiEndpoint('REGION', 1) // Returns: '/api/v1/Regions/1/select'
+ * getApiEndpoint('REGION') // Returns: null (parent requis mais absent)
+ */
+export declare function getApiEndpoint(variableType: string, parentId?: number | null): string | null;
+/**
+ * Détermine le libellé du parent selon le type de variable
+ * @param variableType - Type de la variable
+ * @returns Libellé du parent en français
+ *
+ * @example
+ * getParentLabel('REGION') // Returns: 'un district'
+ * getParentLabel('DEPARTEMENT') // Returns: 'une région'
+ */
+export declare function getParentLabel(variableType: string): string;
+/**
+ * Vérifie si un type de variable nécessite un parent
+ * @param variableType - Type de la variable
+ * @returns true si un parent est requis
+ *
+ * @example
+ * requiresParent('DISTRICT') // Returns: false
+ * requiresParent('REGION') // Returns: true
+ */
+export declare function requiresParent(variableType: string): boolean;
+/**
+ * Vérifie si un type de variable est géographique
+ * @param variableType - Type de la variable
+ * @returns true si c'est un type géographique
+ *
+ * @example
+ * isGeographicType('DISTRICT') // Returns: true
+ * isGeographicType('TEXT') // Returns: false
+ */
+export declare function isGeographicType(variableType: string): boolean;
+//# sourceMappingURL=variableDependencyResolver.d.ts.map

package/dist/utils/variableDependencyResolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variableDependencyResolver.d.ts","sourceRoot":"","sources":["../../src/utils/variableDependencyResolver.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAMpF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC5B,MAAM,GAAG,IAAI,CAiCf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CA0B5F;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAa3D;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAW5D;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAY9D"}

package/dist/utils/variableDependencyResolver.js

@@ -0,0 +1,155 @@
+/**
+ * Utilitaires pour résoudre les dépendances entre variables géographiques
+ * Permet de gérer la cascade : District → Région → Département → Sous-Préfecture → Quartier/Village
+ */
+/**
+ * Extrait le code d'une variable depuis le format "${CODE}"
+ * @param valeur - Valeur du champ variable.valeur (ex: "${G_01}")
+ * @returns Code de la variable (ex: "G_01") ou null si pas de référence
+ *
+ * @example
+ * extractVariableCode("${G_01}") // Returns: "G_01"
+ * extractVariableCode("${DISTRICT_VAR}") // Returns: "DISTRICT_VAR"
+ * extractVariableCode(null) // Returns: null
+ * extractVariableCode("G_01") // Returns: null (pas de ${})
+ */
+export function extractVariableCode(valeur) {
+    if (!valeur)
+        return null;
+    // Match ${ANYTHING}
+    const match = valeur.match(/\$\{([^}]+)\}/);
+    return match ? match[1] : null;
+}
+/**
+ * Résout la valeur ID d'une variable parente depuis les réponses
+ * @param variable - Variable actuelle
+ * @param reponses - Toutes les réponses du formulaire
+ * @returns ID de la valeur parente ou null
+ *
+ * @example
+ * // Variable G_03 (Département) avec valeur: "${G_02}"
+ * // reponses = { "G_02": { valeur: { id: 10, code: "REG01", designation: "Abidjan" } } }
+ * resolveParentValue(variable, reponses) // Returns: 10
+ */
+export function resolveParentValue(variable, reponses) {
+    // Extraire le code de la variable parente
+    const parentCode = extractVariableCode(variable.valeur);
+    if (!parentCode)
+        return null;
+    // Récupérer la réponse de la variable parente
+    const parentReponse = reponses[parentCode];
+    if (!parentReponse?.valeur)
+        return null;
+    // La valeur peut être :
+    // 1. Un objet SelectDto : { id: number, code: string, designation: string }
+    // 2. Un nombre (ID direct)
+    // 3. Autre format (on essaie d'extraire l'ID)
+    const parentValue = parentReponse.valeur;
+    // Cas 1 : Objet avec propriété id
+    if (typeof parentValue === 'object' && parentValue !== null && 'id' in parentValue) {
+        return typeof parentValue.id === 'number' ? parentValue.id : null;
+    }
+    // Cas 2 : Nombre direct
+    if (typeof parentValue === 'number') {
+        return parentValue;
+    }
+    // Cas 3 : String qui pourrait être un nombre
+    if (typeof parentValue === 'string') {
+        const parsed = parseInt(parentValue, 10);
+        return isNaN(parsed) ? null : parsed;
+    }
+    return null;
+}
+/**
+ * Détermine l'endpoint API selon le type de variable et l'ID du parent
+ * @param variableType - Type de la variable (DISTRICT, REGION, DEPARTEMENT, etc.)
+ * @param parentId - ID du parent (optionnel)
+ * @returns Endpoint API ou null si invalide
+ *
+ * @example
+ * getApiEndpoint('DISTRICT') // Returns: '/api/v1/Districts/select'
+ * getApiEndpoint('REGION', 1) // Returns: '/api/v1/Regions/1/select'
+ * getApiEndpoint('REGION') // Returns: null (parent requis mais absent)
+ */
+export function getApiEndpoint(variableType, parentId) {
+    const type = variableType?.toUpperCase();
+    switch (type) {
+        case 'DISTRICT':
+            return '/api/v1/Districts/select';
+        case 'REGION':
+            return parentId ? `/api/v1/Regions/${parentId}/select` : null;
+        case 'DEPARTEMENT':
+            return parentId ? `/api/v1/Departements/${parentId}/select` : null;
+        case 'SOUS_PREFECTURE':
+        case 'SOUSPREFECTURE':
+            return parentId ? `/api/v1/SousPrefectures/${parentId}/select` : null;
+        case 'QUARTIER':
+            return parentId ? `/api/v1/Quartiers/${parentId}/select` : null;
+        case 'VILLAGE':
+            return parentId ? `/api/v1/Villages/${parentId}/select` : null;
+        default:
+            return null;
+    }
+}
+/**
+ * Détermine le libellé du parent selon le type de variable
+ * @param variableType - Type de la variable
+ * @returns Libellé du parent en français
+ *
+ * @example
+ * getParentLabel('REGION') // Returns: 'un district'
+ * getParentLabel('DEPARTEMENT') // Returns: 'une région'
+ */
+export function getParentLabel(variableType) {
+    const type = variableType?.toUpperCase();
+    const labels = {
+        'REGION': 'un district',
+        'DEPARTEMENT': 'une région',
+        'SOUS_PREFECTURE': 'un département',
+        'SOUSPREFECTURE': 'un département',
+        'QUARTIER': 'une sous-préfecture',
+        'VILLAGE': 'une sous-préfecture'
+    };
+    return labels[type] || 'le niveau précédent';
+}
+/**
+ * Vérifie si un type de variable nécessite un parent
+ * @param variableType - Type de la variable
+ * @returns true si un parent est requis
+ *
+ * @example
+ * requiresParent('DISTRICT') // Returns: false
+ * requiresParent('REGION') // Returns: true
+ */
+export function requiresParent(variableType) {
+    const type = variableType?.toUpperCase();
+    return [
+        'REGION',
+        'DEPARTEMENT',
+        'SOUS_PREFECTURE',
+        'SOUSPREFECTURE',
+        'QUARTIER',
+        'VILLAGE'
+    ].includes(type);
+}
+/**
+ * Vérifie si un type de variable est géographique
+ * @param variableType - Type de la variable
+ * @returns true si c'est un type géographique
+ *
+ * @example
+ * isGeographicType('DISTRICT') // Returns: true
+ * isGeographicType('TEXT') // Returns: false
+ */
+export function isGeographicType(variableType) {
+    const type = variableType?.toUpperCase();
+    return [
+        'DISTRICT',
+        'REGION',
+        'DEPARTEMENT',
+        'SOUS_PREFECTURE',
+        'SOUSPREFECTURE',
+        'QUARTIER',
+        'VILLAGE'
+    ].includes(type);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsuci/shared-form-components",
-  "version": "1.0.1",
+  "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",