allaw-ui 4.8.9 → 4.9.0

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

@@ -13,6 +13,8 @@ export interface SearchBarProps {
     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, minChar = _a.minChar, 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);
@@ -159,7 +159,8 @@ 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();

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

@@ -17,6 +17,7 @@ declare namespace _default {
         let showLocate: boolean;
         let locateIcon: string;
         let minChar: undefined;
+        let loading: boolean;
     }
     export namespace argTypes {
         export namespace placeholder {
@@ -103,6 +104,13 @@ declare namespace _default {
             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 };
@@ -130,4 +138,5 @@ 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", minChar: undefined }),
+    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: {
@@ -72,6 +72,10 @@ export default {
             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: {
@@ -175,6 +179,15 @@ ResponsiveLocate.args = {
     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: {

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

@@ -186,13 +186,38 @@
 
 /* MinChar variant */
 .minCharReached {
-  border-color: #29a36a !important;
+  border-color: #25beeb !important;
 }
 
 .minCharReached:hover {
-  border-color: #29a36a !important;
+  border-color: #25beeb !important;
 }
 
 .minCharReached:focus-within {
-  border-color: #29a36a !important;
+  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.9",
+  "version": "4.9.0",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",