kelt-ui-kit-react 2.0.1 → 2.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/App.menu.tsx

@@ -1,5 +1,6 @@
 import { NavLink } from "react-router-dom";
 import { ActionView } from "./action/Action.view";
+import { AddressSearchView } from "./addressSearch/AddressSearch.view";
 import { BadgeView } from "./badge/Badge.view";
 import { ButtonView } from "./button/Button.view";
 import { ButtonFileView } from "./button/buttonFile/ButtonFile.view";
@@ -242,6 +243,13 @@ export const MenuList: MenuProps[] = [
     children: <NavLink to="/button-file">Button File</NavLink>,
     element: <ButtonFileView />,
   },
+  {
+    id: 30,
+    name: "Address search",
+    link: "/address-search",
+    children: <NavLink to="/address-search">Address search</NavLink>,
+    element: <AddressSearchView />,
+  },
 ];
 
 export const AppMenu = (): JSX.Element => {

package/src/addressSearch/AddressSearch.tsx

@@ -0,0 +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>
+    );
+};

package/src/addressSearch/AddressSearch.view.tsx

@@ -0,0 +1,52 @@
+import { useMemo } from "react";
+import { DynamicForm } from "../form/Form";
+import { TypeInputEnum } from "../form/form.enum";
+import { FormInterface } from "../form/form.interface";
+
+export const AddressSearchView = () => {
+    const fields = useMemo<FormInterface[]>(
+        () => [
+            {
+                name: "adresse1",
+                label: "Adresse",
+                type: TypeInputEnum.ADDRESS,
+                value: "",
+                col: { xs: 12, md: 6 },
+                addressSearch: {
+                    mapAddress: (address) => ({
+                        adresse1: address.addressLine,
+                        codePostal: address.postalCode,
+                        ville: address.city,
+                        paysIso2: address.countryCode,
+                    }),
+                },
+            },
+            {
+                name: "codePostal",
+                label: "Code postal",
+                type: TypeInputEnum.TEXT,
+                value: "",
+                col: { xs: 12, md: 6 },
+            },
+            {
+                name: "ville",
+                label: "Ville",
+                type: TypeInputEnum.TEXT,
+                value: "",
+                col: { xs: 12, md: 6 },
+            },
+            {
+                name: "paysIso2",
+                label: "Pays",
+                type: TypeInputEnum.TEXT,
+                value: "FR",
+                col: { xs: 12, md: 6 },
+            },
+        ],
+        [],
+    );
+
+    return (
+        <DynamicForm initialForm={fields} hideSubmit />
+    );
+};

package/src/addressSearch/addressSearch.css

@@ -0,0 +1,133 @@
+.address-search {
+    position: relative;
+    width: 100%;
+
+    >label {
+        display: block;
+        padding-bottom: 0.15rem;
+        font-size: 0.85rem;
+        font-weight: 600;
+    }
+}
+
+.address-search-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    >.bi {
+        position: absolute;
+        left: 0.75rem;
+        z-index: 1;
+        color: var(--primary-color);
+    }
+
+    >input {
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+        padding-left: 2.25rem;
+        padding-right: 2.25rem;
+    }
+}
+
+.address-search-spinner {
+    position: absolute;
+    right: 0.75rem;
+    width: 0.9rem;
+    height: 0.9rem;
+    border: 2px solid #dedede;
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: address-search-spin 0.7s linear infinite;
+}
+
+.address-search-results {
+    position: absolute;
+    top: calc(100% + 0.25rem);
+    right: 0;
+    left: 0;
+    z-index: 20;
+    overflow: hidden;
+    border: 1px solid #cfbdbd;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
+
+    [role="listbox"] {
+        max-height: 15rem;
+        overflow-y: auto;
+    }
+
+    [role="listbox"]>button {
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        max-height: none;
+        margin: 0;
+        padding: 0.65rem 0.75rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.2rem;
+        border: 0;
+        border-bottom: 1px solid #ece8e8;
+        border-radius: 0;
+        background: #fff;
+        color: inherit;
+        font-size: 0.85rem;
+        line-height: 1.3;
+        text-align: left;
+        overflow-wrap: anywhere;
+        cursor: pointer;
+
+        &:last-child {
+            border-bottom: 0;
+        }
+
+        &:hover,
+        &.active {
+            background: color-mix(in srgb, var(--primary-color), white 92%);
+        }
+
+        >small {
+            color: #686868;
+        }
+    }
+}
+
+.address-search-manual {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    max-height: none;
+    margin: 0;
+    padding: 0.65rem 0.75rem;
+    align-items: center;
+    gap: 0.5rem;
+    border: 0;
+    border-top: 1px solid #dedede;
+    border-radius: 0;
+    background: #fff;
+    color: var(--primary-color);
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+        background: color-mix(in srgb, var(--primary-color), white 92%);
+    }
+}
+
+.address-search-status {
+    padding: 0.75rem;
+    color: #686868;
+    font-size: 0.85rem;
+}
+
+@keyframes address-search-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}