allaw-ui 4.8.8 → 4.9.0

package/dist/components/atoms/inputs/SearchBar.d.ts

@@ -12,6 +12,9 @@ export interface SearchBarProps {
     style?: "classic" | "form";
     disableAutofill?: boolean;
     showLocate?: boolean;
+    minChar?: number;
+    /** Affiche un indicateur de chargement à droite lorsque true */
+    loading?: boolean;
     resolveCityFromCoords?: (lat: number, lon: number) => Promise<string | undefined>;
 }
 declare const SearchBar: React.FC<SearchBarProps>;

package/dist/components/atoms/inputs/SearchBar.js

@@ -51,9 +51,9 @@ import "../../../styles/global.css";
 import "../../../styles/icons.css";
 import TinyInfo from "../typography/TinyInfo";
 var SearchBar = function (_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Faites une recherche" : _b, endIcon = _a.endIcon, startIcon = _a.startIcon, _c = _a.value, controlledValue = _c === void 0 ? "" : _c, onChange = _a.onChange, _d = _a.showClear, showClear = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "normal" : _e, _f = _a.style, styleProp = _f === void 0 ? "classic" : _f, _g = _a.disableAutofill, disableAutofill = _g === void 0 ? false : _g, _h = _a.showLocate, showLocate = _h === void 0 ? false : _h, resolveCityFromCoords = _a.resolveCityFromCoords;
-    var _j = useState(controlledValue), value = _j[0], setValue = _j[1];
-    var _k = useState(null), locationError = _k[0], setLocationError = _k[1];
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Faites une recherche" : _b, endIcon = _a.endIcon, startIcon = _a.startIcon, _c = _a.value, controlledValue = _c === void 0 ? "" : _c, onChange = _a.onChange, _d = _a.showClear, showClear = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "normal" : _e, _f = _a.style, styleProp = _f === void 0 ? "classic" : _f, _g = _a.disableAutofill, disableAutofill = _g === void 0 ? false : _g, _h = _a.showLocate, showLocate = _h === void 0 ? false : _h, minChar = _a.minChar, _j = _a.loading, loading = _j === void 0 ? false : _j, resolveCityFromCoords = _a.resolveCityFromCoords;
+    var _k = useState(controlledValue), value = _k[0], setValue = _k[1];
+    var _l = useState(null), locationError = _l[0], setLocationError = _l[1];
     var handleChange = function (event) {
         var newValue = event.target.value;
         setValue(newValue);
@@ -137,10 +137,13 @@ var SearchBar = function (_a) {
             }
         }, { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 });
     };
+    var currentValue = controlledValue || value;
+    var hasMinChar = minChar && minChar > 0 && currentValue.length >= minChar;
     var wrapperClassName = [
         styles.searchBar,
         styleProp === "form" ? styles.styleForm : "",
         size === "big" ? styles.sizeBig : "",
+        hasMinChar ? styles.minCharReached : "",
     ]
         .filter(Boolean)
         .join(" ");
@@ -156,13 +159,16 @@ var SearchBar = function (_a) {
             }))),
             showClear && (controlledValue || value) && (React.createElement("button", { type: "button", className: styles.searchBarClearButton, onClick: handleClear, "aria-label": "Effacer la recherche" },
                 React.createElement("i", { className: "allaw-icon-x-small" }))),
-            endIcon && (React.createElement("button", { className: styles.searchBarIconButton, tabIndex: -1, "aria-label": "Rechercher" },
+            loading && (React.createElement("span", { className: styles.searchBarLoader, "aria-live": "polite", "aria-busy": "true" })),
+            !loading && endIcon && (React.createElement("button", { className: styles.searchBarIconButton, tabIndex: -1, "aria-label": "Rechercher" },
                 React.createElement("i", { className: endIcon }))),
             showLocate && (React.createElement("button", { type: "button", className: styles.searchBarLocateButton, onClick: function (e) {
                     e.preventDefault();
                     e.stopPropagation();
                     handleLocate();
-                }, "aria-label": "Me localiser", title: "Me localiser" }, "Me localiser"))),
+                }, "aria-label": "Me localiser", title: "Me localiser" },
+                React.createElement("span", { className: styles.searchBarLocateText }, "Me localiser"),
+                React.createElement("i", { className: "allaw-icon-map-pin ".concat(styles.searchBarLocateIcon) })))),
         locationError && (React.createElement("div", { className: styles.searchBarError },
             React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: locationError, align: "left" })))));
 };

package/dist/components/atoms/inputs/SearchBar.stories.d.ts

@@ -16,6 +16,8 @@ declare namespace _default {
         let startIcon: undefined;
         let showLocate: boolean;
         let locateIcon: string;
+        let minChar: undefined;
+        let loading: boolean;
     }
     export namespace argTypes {
         export namespace placeholder {
@@ -90,6 +92,25 @@ declare namespace _default {
             export { description_3 as description };
         }
         export { showClear_1 as showClear };
+        export namespace minChar_1 {
+            export namespace control_9 {
+                let type_7: string;
+                export { type_7 as type };
+                export let min: number;
+                export let max: number;
+            }
+            export { control_9 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        export { minChar_1 as minChar };
+        export namespace loading_1 {
+            let control_10: string;
+            export { control_10 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        export { loading_1 as loading };
         export namespace onChange_1 {
             let action_1: string;
             export { action_1 as action };
@@ -115,4 +136,7 @@ export const FormStyle: any;
 export const WithStartIcon: any;
 export const BigFormStartIconNoEnd: any;
 export const WithLocate: any;
+export const WithMinChar: any;
+export const ResponsiveLocate: any;
+export const WithLoading: any;
 import SearchBar from "./SearchBar";

package/dist/components/atoms/inputs/SearchBar.stories.js

@@ -21,7 +21,7 @@ export default {
     component: SearchBar,
     tags: ["autodocs"],
     excludeStories: /.*Data$/,
-    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-search", showClear: false, size: "normal", style: "classic", startIcon: undefined, showLocate: false, locateIcon: "allaw-icon-map-pin" }),
+    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-search", showClear: false, size: "normal", style: "classic", startIcon: undefined, showLocate: false, locateIcon: "allaw-icon-map-pin", minChar: undefined, loading: false }),
     argTypes: {
         placeholder: {
             control: {
@@ -68,6 +68,14 @@ export default {
             control: "boolean",
             description: "Affiche une croix pour effacer le champ si true.",
         },
+        minChar: {
+            control: { type: "number", min: 0, max: 20 },
+            description: "Nombre minimum de caractères pour changer la couleur de bordure en vert (#29a36a).",
+        },
+        loading: {
+            control: "boolean",
+            description: "Affiche un loader à la fin du champ.",
+        },
         onChange: { action: "changed" },
     },
     parameters: {
@@ -153,3 +161,37 @@ WithLocate.args = {
     showLocate: true,
     locateIcon: "allaw-icon-map-pin",
 };
+export var WithMinChar = Template.bind({});
+WithMinChar.args = {
+    placeholder: "Saisissez au moins 6 caractères",
+    endIcon: "allaw-icon-search",
+    showClear: true,
+    size: "normal",
+    style: "form",
+    minChar: 6,
+};
+export var ResponsiveLocate = Template.bind({});
+ResponsiveLocate.args = {
+    placeholder: "Ville (redimensionnez la fenêtre)",
+    startIcon: "allaw-icon-map-pin",
+    showClear: true,
+    size: "normal",
+    style: "form",
+    showLocate: true,
+};
+export var WithLoading = Template.bind({});
+WithLoading.args = {
+    placeholder: "Recherche en cours...",
+    endIcon: "allaw-icon-search",
+    showClear: false,
+    size: "normal",
+    style: "classic",
+    loading: true,
+};
+ResponsiveLocate.parameters = {
+    docs: {
+        description: {
+            story: "Le bouton 'Me localiser' devient une icône en dessous de 480px de largeur. Redimensionnez votre navigateur pour voir l'effet.",
+        },
+    },
+};

package/dist/components/atoms/inputs/searchBar.module.css

@@ -110,6 +110,37 @@
   font-size: 13px;
 }
 
+.searchBarLocateText {
+  display: inline;
+}
+
+.searchBarLocateIcon {
+  display: none;
+  font-size: 14px;
+}
+
+/* Responsive behavior for mobile */
+@media (max-width: 479px) {
+  .searchBarLocateText {
+    display: none;
+  }
+
+  .searchBarLocateIcon {
+    display: inline;
+  }
+
+  .searchBarLocateButton {
+    padding: 0;
+    width: 28px;
+    min-width: 28px;
+  }
+
+  .sizeBig .searchBarLocateButton {
+    width: 32px;
+    min-width: 32px;
+  }
+}
+
 .searchBarClearButton {
   display: flex;
   align-items: center;
@@ -152,3 +183,41 @@
   margin-top: 8px;
   margin-left: 14px;
 }
+
+/* MinChar variant */
+.minCharReached {
+  border-color: #25beeb !important;
+}
+
+.minCharReached:hover {
+  border-color: #25beeb !important;
+}
+
+.minCharReached:focus-within {
+  border-color: #25beeb !important;
+}
+
+/* Loader */
+.searchBarLoader {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid rgba(37, 190, 235, 0.25);
+  border-top-color: #25beeb;
+  animation: searchBarSpin 0.8s linear infinite;
+  margin-right: 8px; /* décale de 4px depuis la bordure droite */
+}
+
+.sizeBig .searchBarLoader {
+  width: 20px;
+  height: 20px;
+}
+
+@keyframes searchBarSpin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.8.8",
+  "version": "4.9.0",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",