kelt-ui-kit-react 2.0.2 → 2.0.3

package/src/tabs/tabs.css

@@ -1,30 +1,24 @@
 .tabs-root {
   height: 100%;
-
   .tabs-header {
     display: flex;
     border-bottom: 1px solid #b2a1a1;
-
     .tab-button {
       padding: 0.5rem 0.75rem;
       border: 0px;
       outline: none;
       background-color: transparent;
-      color: #1e293b;
-      /* slate-800 */
+      color: #1e293b; /* slate-800 */
       cursor: pointer;
 
       &.tab-button--active {
-        border-bottom: 2px solid var(--primary-color);
-        /* slate-800 */
+        border-bottom: 2px solid var(--primary-color); /* slate-800 */
         border-radius: 0px;
-        font-weight: bold;
       }
-
       &.tab-button--disabled {
         opacity: 0.5;
         cursor: not-allowed;
       }
     }
   }
-}
+}

package/src/toaster/Toaster.tsx

@@ -34,14 +34,9 @@ export const Toaster = () => {
   return ReactDOM.createPortal(
     <div className={`toaster toaster-${severity}`}>
       {close && (
-        <button
-          type="button"
-          className="toaster--close"
-          onClick={onClose}
-          aria-label="Fermer la notification"
-        >
+        <div className="toaster--close" onClick={onClose}>
           <Icon classIcon="bi-x" />
-        </button>
+        </div>
       )}
       <div>
         {severity === "info" && <Icon classIcon="bi-info-circle" />}

package/src/toaster/Toaster.view.tsx

@@ -9,7 +9,6 @@ export const ToasterView = (): JSX.Element => {
       description: "This is a description for the toast message.",
       severity: "warning",
       duration: 10000,
-      close: true,
       children: <div>Additional content can go here.</div>,
     });
   }, [showToast]);

package/src/toaster/store/useToasterStore.tsx

@@ -15,7 +15,6 @@ type ToasterState = {
       severity?: "info" | "success" | "error" | "warning";
       duration?: number;
       children?: React.ReactNode;
-      close?: boolean;
     }
   ) => void;
   hideToast: () => void;
@@ -37,7 +36,6 @@ export const useToasterStore = create<ToasterState>((set) => ({
       duration: options.duration || 2500,
       visible: true,
       children: options.children || null,
-      close: options.close ?? true,
     })),
   hideToast: () => set(() => ({ visible: false })),
 }));

package/src/toaster/toaster.css

@@ -15,12 +15,7 @@
     position: absolute;
     top: 2px;
     right: 2px;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
     color: #333;
-    min-width: auto;
     cursor: pointer;
     .bi {
       font-size: 1.2rem;
@@ -60,7 +55,7 @@
   }
   .title {
     font-weight: 500;
-    font-size: 18px;
+    font-size: 16px;
     &.title-info {
       color: var(--primary-color);
     }
@@ -75,7 +70,7 @@
     }
   }
   .subtitle {
-    font-size: 16px;
+    font-size: 14px;
   }
   .bi-info-circle {
     color: var(--primary-color);

package/dist/addressSearch/AddressSearch.d.ts

@@ -1,20 +0,0 @@
-import { GeocodedAddress, GeocodingProvider } from '../geocoding/geocoding.interface';
-
-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 declare const AddressSearch: ({ id, className, label, placeholder, value, disabled, minimumQueryLength, debounceTime, limit, provider, allowManualEntry, manualEntryLabel, onChange, onManualEntry, onSelect, }: AddressSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/addressSearch/AddressSearch.view.d.ts

@@ -1 +0,0 @@
-export declare const AddressSearchView: () => import("react/jsx-runtime").JSX.Element;

package/dist/geocoding/GeocodingService.d.ts

@@ -1,13 +0,0 @@
-import { GeocodedAddress, GeocodingProvider, GeocodingSearchOptions } from './geocoding.interface';
-
-export interface GeocodingServiceOptions {
-    baseUrl?: string;
-    fetcher?: typeof fetch;
-}
-export declare class GeocodingService implements GeocodingProvider {
-    private readonly baseUrl;
-    private readonly fetcher;
-    constructor(options?: GeocodingServiceOptions);
-    search(query: string, options?: GeocodingSearchOptions): Promise<GeocodedAddress[]>;
-}
-export declare const geocodingService: GeocodingService;

package/dist/geocoding/geocoding.interface.d.ts

@@ -1,20 +0,0 @@
-export interface GeocodedAddress {
-    id: string;
-    label: string;
-    addressLine: string;
-    postalCode: string;
-    city: string;
-    cityCode?: string;
-    countryCode: string;
-    longitude: number;
-    latitude: number;
-    score?: number;
-    type?: string;
-}
-export interface GeocodingSearchOptions {
-    limit?: number;
-    signal?: AbortSignal;
-}
-export interface GeocodingProvider {
-    search(query: string, options?: GeocodingSearchOptions): Promise<GeocodedAddress[]>;
-}

package/src/addressSearch/AddressSearch.tsx

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

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

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

package/src/geocoding/GeocodingService.ts

@@ -1,89 +0,0 @@
-import {
-    GeocodedAddress,
-    GeocodingProvider,
-    GeocodingSearchOptions,
-} from "./geocoding.interface";
-
-const DEFAULT_GEOCODING_URL = "https://data.geopf.fr/geocodage/search";
-
-interface GeocodingFeature {
-    geometry?: {
-        coordinates?: [number, number];
-    };
-    properties?: {
-        id?: string;
-        label?: string;
-        name?: string;
-        postcode?: string;
-        city?: string;
-        citycode?: string;
-        score?: number;
-        type?: string;
-    };
-}
-
-interface GeocodingResponse {
-    features?: GeocodingFeature[];
-}
-
-export interface GeocodingServiceOptions {
-    baseUrl?: string;
-    fetcher?: typeof fetch;
-}
-
-export class GeocodingService implements GeocodingProvider {
-    private readonly baseUrl: string;
-    private readonly fetcher: typeof fetch;
-
-    constructor(options: GeocodingServiceOptions = {}) {
-        this.baseUrl = options.baseUrl ?? DEFAULT_GEOCODING_URL;
-        this.fetcher = options.fetcher ?? globalThis.fetch.bind(globalThis);
-    }
-
-    async search(
-        query: string,
-        options: GeocodingSearchOptions = {},
-    ): Promise<GeocodedAddress[]> {
-        const normalizedQuery = query.trim();
-        if (!normalizedQuery) return [];
-
-        const params = new URLSearchParams({
-            q: normalizedQuery,
-            limit: String(options.limit ?? 5),
-            autocomplete: "1",
-            index: "address",
-        });
-        const response = await this.fetcher(`${this.baseUrl}?${params}`, {
-            signal: options.signal,
-        });
-
-        if (!response.ok) {
-            throw new Error(`Geocoding request failed (${response.status})`);
-        }
-
-        const data = (await response.json()) as GeocodingResponse;
-        return (data.features ?? []).flatMap((feature) => {
-            const properties = feature.properties;
-            const coordinates = feature.geometry?.coordinates;
-            if (!properties?.label || !coordinates) return [];
-
-            return [
-                {
-                    id: properties.id ?? properties.label,
-                    label: properties.label,
-                    addressLine: properties.name ?? properties.label,
-                    postalCode: properties.postcode ?? "",
-                    city: properties.city ?? "",
-                    cityCode: properties.citycode,
-                    countryCode: "FR",
-                    longitude: coordinates[0],
-                    latitude: coordinates[1],
-                    score: properties.score,
-                    type: properties.type,
-                },
-            ];
-        });
-    }
-}
-
-export const geocodingService = new GeocodingService();