kelt-ui-kit-react 2.0.8 → 2.0.9

package/src/action/ButtonAction.tsx

@@ -1,32 +1,32 @@
-import { Badge, BadgeInterface } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./action.css";
-
-export type ButtonActionProps = {
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title?: string;
-  classIcon?: string;
-  badge?: BadgeInterface;
-};
-export const ButtonAction = ({
-  className,
-  onClick,
-  title,
-  classIcon,
-  badge,
-}: ButtonActionProps) => {
-  const handleClick = (e: React.MouseEvent) => {
-    if (onClick) {
-      onClick(e);
-    }
-  };
-  return (
-    <div className={`action ${className}`} onClick={handleClick}>
-      {badge && <Badge {...badge} />}
-      {classIcon && <Icon classIcon={classIcon} size={IconSizeEnum.LARGE} />}
-      <small>{title}</small>
-    </div>
-  );
-};
+import { Badge, BadgeInterface } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./action.css";
+
+export type ButtonActionProps = {
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  title?: string;
+  classIcon?: string;
+  badge?: BadgeInterface;
+};
+export const ButtonAction = ({
+  className,
+  onClick,
+  title,
+  classIcon,
+  badge,
+}: ButtonActionProps) => {
+  const handleClick = (e: React.MouseEvent) => {
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  return (
+    <div className={`action ${className}`} onClick={handleClick}>
+      {badge && <Badge {...badge} />}
+      {classIcon && <Icon classIcon={classIcon} size={IconSizeEnum.LARGE} />}
+      <small>{title}</small>
+    </div>
+  );
+};

package/src/action/action.css

@@ -1,20 +1,20 @@
-.action {
-  background-color: var(--tertiary-color);
-  color: #fff;
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0.5rem 0.5rem;
-  min-width: 120px;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 4px;
-  height: 100%;
-  .badge {
-    position: absolute;
-    right: 10px;
-    top: -10px;
-  }
-}
+.action {
+  background-color: var(--tertiary-color);
+  color: #fff;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.5rem 0.5rem;
+  min-width: 120px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 4px;
+  height: 100%;
+  .badge {
+    position: absolute;
+    right: 10px;
+    top: -10px;
+  }
+}

package/src/addressSearch/AddressSearch.tsx

@@ -1,246 +1,246 @@
-import {
-    useCallback,
-    useEffect,
-    useId,
-    useRef,
-    useState,
-} from "react";
-import { Icon } from "../icon/Icon";
-import {
-    GeocodedAddress,
-    GeocodingProvider,
-} from "../geocoding/geocoding.interface";
-import { geocodingService } from "../geocoding/GeocodingService";
-import "./addressSearch.css";
-
-export interface AddressSearchProps {
-    id?: string;
-    className?: string;
-    label?: string;
-    placeholder?: string;
-    value?: string;
-    disabled?: boolean;
-    minimumQueryLength?: number;
-    debounceTime?: number;
-    limit?: number;
-    provider?: GeocodingProvider;
-    allowManualEntry?: boolean;
-    manualEntryLabel?: string;
-    onChange?: (value: string) => void;
-    onManualEntry?: (addressLine: string) => void;
-    onSelect: (address: GeocodedAddress) => void;
-}
-
-export const AddressSearch = ({
-    id,
-    className,
-    label = "Rechercher une adresse",
-    placeholder = "Numéro, rue, code postal, ville",
-    value,
-    disabled = false,
-    minimumQueryLength = 3,
-    debounceTime = 300,
-    limit = 5,
-    provider = geocodingService,
-    allowManualEntry = true,
-    manualEntryLabel = "Je ne trouve pas mon adresse",
-    onChange,
-    onManualEntry,
-    onSelect,
-}: AddressSearchProps) => {
-    const generatedId = useId();
-    const inputId = id ?? `address-search-${generatedId}`;
-    const listboxId = `${inputId}-results`;
-    const [query, setQuery] = useState(value ?? "");
-    const [results, setResults] = useState<GeocodedAddress[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(-1);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const requestRef = useRef<AbortController>();
-    const skipNextSearchRef = useRef(false);
-
-    useEffect(() => {
-        if (value !== undefined) setQuery(value);
-    }, [value]);
-
-    useEffect(() => {
-        const handlePointerDown = (event: PointerEvent) => {
-            if (!containerRef.current?.contains(event.target as Node)) {
-                setIsOpen(false);
-            }
-        };
-
-        document.addEventListener("pointerdown", handlePointerDown);
-        return () => document.removeEventListener("pointerdown", handlePointerDown);
-    }, []);
-
-    useEffect(() => {
-        if (skipNextSearchRef.current) {
-            skipNextSearchRef.current = false;
-            return;
-        }
-
-        const normalizedQuery = query.trim();
-        if (normalizedQuery.length < minimumQueryLength || disabled) {
-            requestRef.current?.abort();
-            setResults([]);
-            setLoading(false);
-            setError(false);
-            setIsOpen(false);
-            return;
-        }
-
-        const timeout = window.setTimeout(async () => {
-            requestRef.current?.abort();
-            const controller = new AbortController();
-            requestRef.current = controller;
-            setLoading(true);
-            setError(false);
-
-            try {
-                const addresses = await provider.search(normalizedQuery, {
-                    limit,
-                    signal: controller.signal,
-                });
-                setResults(addresses);
-                setActiveIndex(-1);
-                setIsOpen(true);
-            } catch (requestError) {
-                if ((requestError as Error).name !== "AbortError") {
-                    setResults([]);
-                    setError(true);
-                    setIsOpen(true);
-                }
-            } finally {
-                if (!controller.signal.aborted) setLoading(false);
-            }
-        }, debounceTime);
-
-        return () => {
-            window.clearTimeout(timeout);
-            requestRef.current?.abort();
-        };
-    }, [debounceTime, disabled, limit, minimumQueryLength, provider, query]);
-
-    const selectAddress = useCallback(
-        (address: GeocodedAddress) => {
-            requestRef.current?.abort();
-            skipNextSearchRef.current = true;
-            setQuery(address.addressLine);
-            setResults([]);
-            setIsOpen(false);
-            setActiveIndex(-1);
-            onChange?.(address.addressLine);
-            onSelect(address);
-        },
-        [onChange, onSelect],
-    );
-
-    const selectManualAddress = useCallback(() => {
-        const addressLine = query.trim();
-        if (!addressLine) return;
-
-        requestRef.current?.abort();
-        skipNextSearchRef.current = true;
-        setQuery(addressLine);
-        setResults([]);
-        setIsOpen(false);
-        setActiveIndex(-1);
-        onChange?.(addressLine);
-        onManualEntry?.(addressLine);
-    }, [onChange, onManualEntry, query]);
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (!isOpen || results.length === 0) return;
-
-        if (event.key === "ArrowDown") {
-            event.preventDefault();
-            setActiveIndex((index) => (index + 1) % results.length);
-        } else if (event.key === "ArrowUp") {
-            event.preventDefault();
-            setActiveIndex((index) => (index <= 0 ? results.length - 1 : index - 1));
-        } else if (event.key === "Enter" && activeIndex >= 0) {
-            event.preventDefault();
-            selectAddress(results[activeIndex]);
-        } else if (event.key === "Escape") {
-            setIsOpen(false);
-        }
-    };
-
-    return (
-        <div ref={containerRef} className={`address-search ${className ?? ""}`}>
-            {label && <label htmlFor={inputId}>{label}</label>}
-            <div className="address-search-input">
-                <Icon classIcon="bi-geo-alt" />
-                <input
-                    id={inputId}
-                    type="search"
-                    role="combobox"
-                    aria-autocomplete="list"
-                    aria-expanded={isOpen}
-                    aria-controls={listboxId}
-                    aria-activedescendant={
-                        activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : undefined
-                    }
-                    autoComplete="off"
-                    disabled={disabled}
-                    value={query}
-                    placeholder={placeholder}
-                    onChange={(event) => {
-                        setQuery(event.target.value);
-                        onChange?.(event.target.value);
-                    }}
-                    onFocus={() => results.length > 0 && setIsOpen(true)}
-                    onKeyDown={handleKeyDown}
-                />
-                {loading && <span className="address-search-spinner" aria-hidden />}
-            </div>
-
-            {isOpen && (
-                <div className="address-search-results">
-                    <div id={listboxId} role="listbox">
-                        {error ? (
-                            <div className="address-search-status" role="alert">
-                                La recherche d'adresse est indisponible.
-                            </div>
-                        ) : results.length === 0 && !loading ? (
-                            <div className="address-search-status">Aucune adresse trouvée.</div>
-                        ) : (
-                            results.map((address, index) => (
-                                <button
-                                    id={`${inputId}-option-${index}`}
-                                    key={`${address.id}-${index}`}
-                                    type="button"
-                                    role="option"
-                                    aria-selected={activeIndex === index}
-                                    className={activeIndex === index ? "active" : ""}
-                                    onMouseDown={(event) => event.preventDefault()}
-                                    onMouseEnter={() => setActiveIndex(index)}
-                                    onClick={() => selectAddress(address)}
-                                >
-                                    <span>{address.addressLine}</span>
-                                    <small>
-                                        {address.postalCode} {address.city}
-                                    </small>
-                                </button>
-                            ))
-                        )}
-                    </div>
-                    {allowManualEntry && query.trim() && !loading && (
-                        <button
-                            type="button"
-                            className="address-search-manual"
-                            onMouseDown={(event) => event.preventDefault()}
-                            onClick={selectManualAddress}
-                        >
-                            <Icon classIcon="bi-pencil" />
-                            {manualEntryLabel}
-                        </button>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-};
+import {
+    useCallback,
+    useEffect,
+    useId,
+    useRef,
+    useState,
+} from "react";
+import { Icon } from "../icon/Icon";
+import {
+    GeocodedAddress,
+    GeocodingProvider,
+} from "../geocoding/geocoding.interface";
+import { geocodingService } from "../geocoding/GeocodingService";
+import "./addressSearch.css";
+
+export interface AddressSearchProps {
+    id?: string;
+    className?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    disabled?: boolean;
+    minimumQueryLength?: number;
+    debounceTime?: number;
+    limit?: number;
+    provider?: GeocodingProvider;
+    allowManualEntry?: boolean;
+    manualEntryLabel?: string;
+    onChange?: (value: string) => void;
+    onManualEntry?: (addressLine: string) => void;
+    onSelect: (address: GeocodedAddress) => void;
+}
+
+export const AddressSearch = ({
+    id,
+    className,
+    label = "Rechercher une adresse",
+    placeholder = "Numéro, rue, code postal, ville",
+    value,
+    disabled = false,
+    minimumQueryLength = 3,
+    debounceTime = 300,
+    limit = 5,
+    provider = geocodingService,
+    allowManualEntry = true,
+    manualEntryLabel = "Je ne trouve pas mon adresse",
+    onChange,
+    onManualEntry,
+    onSelect,
+}: AddressSearchProps) => {
+    const generatedId = useId();
+    const inputId = id ?? `address-search-${generatedId}`;
+    const listboxId = `${inputId}-results`;
+    const [query, setQuery] = useState(value ?? "");
+    const [results, setResults] = useState<GeocodedAddress[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const requestRef = useRef<AbortController>();
+    const skipNextSearchRef = useRef(false);
+
+    useEffect(() => {
+        if (value !== undefined) setQuery(value);
+    }, [value]);
+
+    useEffect(() => {
+        const handlePointerDown = (event: PointerEvent) => {
+            if (!containerRef.current?.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, []);
+
+    useEffect(() => {
+        if (skipNextSearchRef.current) {
+            skipNextSearchRef.current = false;
+            return;
+        }
+
+        const normalizedQuery = query.trim();
+        if (normalizedQuery.length < minimumQueryLength || disabled) {
+            requestRef.current?.abort();
+            setResults([]);
+            setLoading(false);
+            setError(false);
+            setIsOpen(false);
+            return;
+        }
+
+        const timeout = window.setTimeout(async () => {
+            requestRef.current?.abort();
+            const controller = new AbortController();
+            requestRef.current = controller;
+            setLoading(true);
+            setError(false);
+
+            try {
+                const addresses = await provider.search(normalizedQuery, {
+                    limit,
+                    signal: controller.signal,
+                });
+                setResults(addresses);
+                setActiveIndex(-1);
+                setIsOpen(true);
+            } catch (requestError) {
+                if ((requestError as Error).name !== "AbortError") {
+                    setResults([]);
+                    setError(true);
+                    setIsOpen(true);
+                }
+            } finally {
+                if (!controller.signal.aborted) setLoading(false);
+            }
+        }, debounceTime);
+
+        return () => {
+            window.clearTimeout(timeout);
+            requestRef.current?.abort();
+        };
+    }, [debounceTime, disabled, limit, minimumQueryLength, provider, query]);
+
+    const selectAddress = useCallback(
+        (address: GeocodedAddress) => {
+            requestRef.current?.abort();
+            skipNextSearchRef.current = true;
+            setQuery(address.addressLine);
+            setResults([]);
+            setIsOpen(false);
+            setActiveIndex(-1);
+            onChange?.(address.addressLine);
+            onSelect(address);
+        },
+        [onChange, onSelect],
+    );
+
+    const selectManualAddress = useCallback(() => {
+        const addressLine = query.trim();
+        if (!addressLine) return;
+
+        requestRef.current?.abort();
+        skipNextSearchRef.current = true;
+        setQuery(addressLine);
+        setResults([]);
+        setIsOpen(false);
+        setActiveIndex(-1);
+        onChange?.(addressLine);
+        onManualEntry?.(addressLine);
+    }, [onChange, onManualEntry, query]);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (!isOpen || results.length === 0) return;
+
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setActiveIndex((index) => (index + 1) % results.length);
+        } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setActiveIndex((index) => (index <= 0 ? results.length - 1 : index - 1));
+        } else if (event.key === "Enter" && activeIndex >= 0) {
+            event.preventDefault();
+            selectAddress(results[activeIndex]);
+        } else if (event.key === "Escape") {
+            setIsOpen(false);
+        }
+    };
+
+    return (
+        <div ref={containerRef} className={`address-search ${className ?? ""}`}>
+            {label && <label htmlFor={inputId}>{label}</label>}
+            <div className="address-search-input">
+                <Icon classIcon="bi-geo-alt" />
+                <input
+                    id={inputId}
+                    type="search"
+                    role="combobox"
+                    aria-autocomplete="list"
+                    aria-expanded={isOpen}
+                    aria-controls={listboxId}
+                    aria-activedescendant={
+                        activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : undefined
+                    }
+                    autoComplete="off"
+                    disabled={disabled}
+                    value={query}
+                    placeholder={placeholder}
+                    onChange={(event) => {
+                        setQuery(event.target.value);
+                        onChange?.(event.target.value);
+                    }}
+                    onFocus={() => results.length > 0 && setIsOpen(true)}
+                    onKeyDown={handleKeyDown}
+                />
+                {loading && <span className="address-search-spinner" aria-hidden />}
+            </div>
+
+            {isOpen && (
+                <div className="address-search-results">
+                    <div id={listboxId} role="listbox">
+                        {error ? (
+                            <div className="address-search-status" role="alert">
+                                La recherche d'adresse est indisponible.
+                            </div>
+                        ) : results.length === 0 && !loading ? (
+                            <div className="address-search-status">Aucune adresse trouvée.</div>
+                        ) : (
+                            results.map((address, index) => (
+                                <button
+                                    id={`${inputId}-option-${index}`}
+                                    key={`${address.id}-${index}`}
+                                    type="button"
+                                    role="option"
+                                    aria-selected={activeIndex === index}
+                                    className={activeIndex === index ? "active" : ""}
+                                    onMouseDown={(event) => event.preventDefault()}
+                                    onMouseEnter={() => setActiveIndex(index)}
+                                    onClick={() => selectAddress(address)}
+                                >
+                                    <span>{address.addressLine}</span>
+                                    <small>
+                                        {address.postalCode} {address.city}
+                                    </small>
+                                </button>
+                            ))
+                        )}
+                    </div>
+                    {allowManualEntry && query.trim() && !loading && (
+                        <button
+                            type="button"
+                            className="address-search-manual"
+                            onMouseDown={(event) => event.preventDefault()}
+                            onClick={selectManualAddress}
+                        >
+                            <Icon classIcon="bi-pencil" />
+                            {manualEntryLabel}
+                        </button>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};