kelt-ui-kit-react 2.0.0 → 2.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.0.0",
+  "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);
+    }
+}

package/src/dataTable/DataTable.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { useIsMobile } from "../_core/hooks/useIsMobile";
+import { Card } from "../card/Card";
 import { TypeInputEnum } from "../form/form.enum";
 import { Input } from "../form/input/Input";
 import { Icon } from "../icon/Icon";
@@ -42,6 +44,7 @@ export type DataTableProps<T> = {
   onRowClassName?: (row: T) => string | undefined;
   rowStyle?: (row: T) => React.CSSProperties | undefined;
   rowClassName?: (row: T) => string | undefined;
+  mobileCardView?: boolean;
 };
 export function DataTable<T>(props: DataTableProps<T>) {
   const {
@@ -70,8 +73,11 @@ export function DataTable<T>(props: DataTableProps<T>) {
     onRowClassName,
     rowStyle,
     rowClassName,
+    mobileCardView = false,
   } = props;
 
+  const isMobile = useIsMobile();
+  const showMobileCardView = mobileCardView && isMobile;
   const loaderRef = useRef<HTMLDivElement | null>(null);
   const footerActionRef = useRef<HTMLDivElement | null>(null);
   const hasAutoFocusedRef = useRef(false);
@@ -150,7 +156,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
         return;
       }
 
-      const table = document.getElementById(id);
+      const table =
+        document.getElementById(`${id}-mobile`) ??
+        document.getElementById(id);
       const eligibleColumnIndexes = columns.reduce<number[]>(
         (indexes, column, idx) => {
           if (
@@ -232,7 +240,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
         return;
       }
 
-      const table = document.getElementById(id);
+      const table =
+        document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
       if (!table) {
         return;
       }
@@ -264,7 +273,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
       for (let offset = 1; offset <= data.length; offset += 1) {
         const nextRowIndex = (rowIndex + offset) % data.length;
         const cell = table.querySelector(
-          `tbody td[data-row-index="${nextRowIndex}"][data-column-index="${firstEligibleColumnIndex}"]`,
+          `[data-row-index="${nextRowIndex}"][data-column-index="${firstEligibleColumnIndex}"]`,
         );
 
         if (!(cell instanceof HTMLElement)) {
@@ -365,9 +374,10 @@ export function DataTable<T>(props: DataTableProps<T>) {
       return;
     }
 
-    const table = document.getElementById(id);
+    const table =
+      document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
     const firstCell = table?.querySelector(
-      `tbody td[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
+      `[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
     );
 
     if (!(firstCell instanceof HTMLElement)) {
@@ -462,7 +472,105 @@ export function DataTable<T>(props: DataTableProps<T>) {
     >
       {name && <h2 className="mb-2">{name}</h2>}
       {element}
-      <table className={`data-table ${className ? className : ""}`} id={id}>
+      {showMobileCardView && (
+        <div
+          id={`${id}-mobile`}
+          className={`data-table-mobile-cards ${className ? className : ""}`}
+        >
+          {loading && <Loader display={loading} />}
+          {!loading &&
+            data.map((row, rowIndex) => {
+              const customStyle = (onRowStyle ?? rowStyle)?.(row);
+              const customClass =
+                (onRowClassName ?? rowClassName)?.(row) ?? "";
+              const rowId = getRowId
+                ? getRowId(row)
+                : ((row as any).id ?? row);
+
+              return (
+                <Card
+                  key={rowId as React.Key}
+                  item={{ title: "" }}
+                  className={`data-table-mobile-card ${customClass}`.trim()}
+                  handleClick={onRowClick ? () => onRowClick(row) : undefined}
+                >
+                  <div
+                    className="data-table-mobile-card__content"
+                    style={customStyle}
+                    data-row-index={rowIndex}
+                    onMouseDown={(event) => {
+                      if (isInteractiveClick(event.target)) {
+                        event.stopPropagation();
+                      }
+                    }}
+                  >
+                    {onSelectionChange && (
+                      <div className="data-table-mobile-card__field data-table-mobile-card__selection">
+                        <span className="data-table-mobile-card__label">
+                          Sélection
+                        </span>
+                        <Input
+                          id={`select-card-${rowIndex}`}
+                          name={`select-card-${rowIndex}`}
+                          type={TypeInputEnum.CHECKBOX}
+                          disabled={
+                            limitSelect !== undefined &&
+                            selectedRowIds.size >= limitSelect &&
+                            !selectedRowIds.has(rowId)
+                          }
+                          checked={selectedRowIds.has(rowId)}
+                          onChange={(event) => toggleRow(event, row)}
+                        />
+                      </div>
+                    )}
+                    {columns.map((column, columnIndex) => (
+                      <div
+                        className="data-table-mobile-card__field"
+                        key={column.id}
+                      >
+                        <span className="data-table-mobile-card__label">
+                          {column.label}
+                        </span>
+                        <DataTableRow
+                          container="card"
+                          column={column}
+                          idx={columnIndex}
+                          row={row}
+                          rowIndex={rowIndex}
+                          onEnterNextColumn={focusNextColumn}
+                        />
+                      </div>
+                    ))}
+                    {actions.length > 0 && (
+                      <div className="data-table-mobile-card__actions card-actions">
+                        {actions.map((action, actionIndex) => (
+                          <DataTableAction
+                            key={action.id}
+                            action={action}
+                            row={row}
+                            rowIndex={rowIndex}
+                            index={actionIndex}
+                            onFocusNextRow={focusNextRow}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </Card>
+              );
+            })}
+          {!loading && data.length === 0 && (
+            <div className="data-table-mobile-cards__empty">
+              {emptyMessage ?? "Aucune donnée"}
+            </div>
+          )}
+        </div>
+      )}
+      <table
+        className={`data-table ${className ? className : ""}`}
+        id={id}
+        style={showMobileCardView ? { display: "none" } : undefined}
+      >
         <thead>
           <tr>
             {onSelectionChange && (

package/src/dataTable/DataTable.view.tsx

@@ -62,6 +62,7 @@ export const DataTableView = () => {
       columns={dataTableColumns}
       id="datatable-example"
       name={"DataTable"}
+      mobileCardView
       onSelectionChange={(selectedRows) => {
         console.log("Selected Rows: ", selectedRows);
       }}

package/src/dataTable/dataTable.css

@@ -47,6 +47,54 @@
   overflow: auto;
   position: relative;
 
+  .data-table-mobile-cards {
+    display: grid;
+    gap: 0.75rem;
+
+    .data-table-mobile-card {
+      width: 100%;
+      max-width: none;
+      height: auto;
+      padding: 0;
+      border-radius: 8px;
+    }
+
+    .data-table-mobile-card__content {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .data-table-mobile-card__field {
+      display: grid;
+      grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
+      gap: 0.75rem;
+      align-items: center;
+      padding: 0.625rem 0.75rem;
+      border-bottom: 1px solid #e5e5e5;
+    }
+
+    .data-table-mobile-card__label {
+      color: var(--tertiary-color);
+      font-size: 0.875rem;
+      font-weight: 600;
+      overflow-wrap: anywhere;
+    }
+
+    .data-table-mobile-card__actions {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 0.75rem;
+    }
+
+    .data-table-mobile-cards__empty {
+      padding: 1rem;
+      text-align: center;
+      color: #666;
+    }
+  }
+
   &.data-table-container--with-footer-action {
     scroll-padding-bottom: 80px;
   }