@addev-be/ui 3.3.3 → 3.3.7

package/dist/components/auth/PasswordResetForm.js

@@ -9,6 +9,7 @@ import "lodash";
 import "../forms/Form/index.js";
 import "../forms/Form/styles.js";
 import "../forms/NumberInput.js";
+import "../forms/SqlPrefixFilterCombobox/SqlPrefixFilterCombobox.js";
 import { useParams as x, Link as R } from "react-router-dom";
 import "../common/Accordion/Accordion.js";
 import "../common/Avatar/styles.js";
@@ -26,7 +27,7 @@ import "../common/TreeView/TreeContext.js";
 import { FormContainer as j } from "./styles.js";
 import { StackedLabel as w } from "../forms/VerticalLabel.js";
 import { useAuthentication as E } from "../../hooks/providers.js";
-const ne = () => {
+const ae = () => {
   const { key: t } = x(), [s, y] = o(""), [i, C] = o(""), [n, v] = o(-1), [p, k] = o(-1), [c, u] = o(""), { resetPassword: d, checkRecoveryKey: l } = E();
   S(() => {
     t && l(t).then((r) => {
@@ -75,5 +76,5 @@ const ne = () => {
   ] }) });
 };
 export {
-  ne as PasswordResetForm
+  ae as PasswordResetForm
 };

package/dist/components/forms/SqlPrefixFilterCombobox/SqlPrefixFilterCombobox.d.ts

@@ -0,0 +1,9 @@
+import { UseSqlPrefixFilterComboboxStateProps } from './useSqlPrefixFilterComboboxState';
+export type SqlPrefixFilterComboboxProps<T> = UseSqlPrefixFilterComboboxStateProps<T> & {
+    label?: string;
+    itemKey: (item: T, index: number) => string;
+    noResultsText?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+};
+export declare const SqlPrefixFilterCombobox: <T>({ label, value, itemKey, itemLabel, readOnly, noResultsText, placeholder, ...props }: SqlPrefixFilterComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/SqlPrefixFilterCombobox/SqlPrefixFilterCombobox.js

@@ -0,0 +1,140 @@
+import { jsx as o, jsxs as a, Fragment as _ } from "react/jsx-runtime";
+import { CardForm as h } from "../Form/index.js";
+import r from "styled-components";
+import { useSqlPrefixFilterComboboxState as $ } from "./useSqlPrefixFilterComboboxState.js";
+const A = 20, B = 40, O = r.div`
+  position: relative;
+  width: 100%;
+`, j = r.input`
+  font-family: var(--font-input);
+  font-size: var(--text-base);
+  font-weight: 500;
+  border: 1px solid var(--color-base-300);
+  color: var(--color-text-800);
+  background: var(--color-base-0);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--space-2);
+  border-radius: var(--rounded-md);
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-sky-500);
+    box-shadow: 0 0 0 1px var(--color-sky-500);
+  }
+`, q = r.div`
+  position: absolute;
+  top: calc(100% + var(--space-1));
+  left: 0;
+  right: 0;
+  z-index: 20;
+  max-height: ${A}rem;
+  background: var(--color-base-0);
+  border: 1px solid var(--color-base-300);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-lg);
+  overflow-y: auto;
+  overflow-x: hidden;
+`, K = r.button`
+  width: 100%;
+  border: 0;
+  height: ${B}px;
+  padding: 0 var(--space-3);
+  text-align: left;
+  cursor: pointer;
+  background: ${({ $highlighted: t }) => t ? "var(--color-base-100)" : "var(--color-base-0)"};
+  color: var(--color-text-800);
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background: var(--color-base-100);
+  }
+`, l = r.div`
+  padding: var(--space-2) var(--space-3);
+  color: var(--color-text-500);
+  font-size: var(--text-sm);
+`, V = ({
+  label: t,
+  value: g,
+  itemKey: v,
+  itemLabel: i,
+  readOnly: p = !1,
+  noResultsText: b = "Aucun resultat",
+  placeholder: x,
+  ...f
+}) => {
+  const {
+    bottomSpacerHeight: m,
+    filteredRows: s,
+    handleBlur: w,
+    handleChange: S,
+    handleFocus: C,
+    handleKeyDown: y,
+    handleOpenAllItems: d,
+    handleSuggestionsScroll: I,
+    inputValue: k,
+    isLoading: c,
+    opened: u,
+    highlightedIndex: F,
+    selectedLabel: H,
+    selectItem: D,
+    suggestionsContainerRef: E,
+    topSpacerHeight: M,
+    visibleRows: R,
+    visibleStartIndex: z
+  } = $({
+    ...f,
+    itemLabel: i,
+    value: g
+  });
+  return p ? /* @__PURE__ */ o(h.Input, { label: t, value: H, readOnly: !0 }) : /* @__PURE__ */ o(h.Row, { label: t, children: /* @__PURE__ */ a(O, { children: [
+    /* @__PURE__ */ o(
+      j,
+      {
+        type: "text",
+        value: k,
+        placeholder: u ? void 0 : x,
+        autoComplete: "off",
+        onMouseDown: d,
+        onClick: d,
+        onFocus: C,
+        onBlur: w,
+        onKeyDown: y,
+        onChange: (e) => S(e.target.value)
+      }
+    ),
+    u && /* @__PURE__ */ a(
+      q,
+      {
+        ref: E,
+        onScroll: I,
+        children: [
+          s.length > 0 ? /* @__PURE__ */ a(_, { children: [
+            /* @__PURE__ */ o("div", { style: { height: M } }),
+            R.map((e, G) => {
+              const n = z + G;
+              return /* @__PURE__ */ o(
+                K,
+                {
+                  type: "button",
+                  $highlighted: n === F,
+                  onMouseDown: (T) => {
+                    T.preventDefault(), D(e);
+                  },
+                  children: i(e, n)
+                },
+                v(e, n)
+              );
+            }),
+            /* @__PURE__ */ o("div", { style: { height: m } })
+          ] }) : c ? /* @__PURE__ */ o(l, { children: "Chargement..." }) : /* @__PURE__ */ o(l, { children: b }),
+          c && s.length > 0 && /* @__PURE__ */ o(l, { children: "Chargement..." })
+        ]
+      }
+    )
+  ] }) });
+};
+export {
+  V as SqlPrefixFilterCombobox
+};

package/dist/components/forms/SqlPrefixFilterCombobox/useSqlPrefixFilterComboboxState.d.ts

@@ -0,0 +1,36 @@
+import { ConditionDTO, OrderByDTO, SqlRequestRow } from '../../../services/sqlRequests';
+export type UseSqlPrefixFilterComboboxStateProps<T> = {
+    requestName: string;
+    columns: string[];
+    returnColumns?: string[];
+    parser?: (row: SqlRequestRow<T>) => T;
+    value: T | null;
+    itemLabel: (item: T, index: number) => string;
+    filterField: string;
+    conditions?: ConditionDTO[];
+    orderBy?: OrderByDTO[];
+    onChange?: (value: T | null) => void;
+    initialPageSize?: number;
+    pageSize?: number;
+};
+export declare const useSqlPrefixFilterComboboxState: <T>({ requestName, columns, returnColumns, parser, value, itemLabel, filterField, conditions, orderBy, onChange, initialPageSize, pageSize, }: UseSqlPrefixFilterComboboxStateProps<T>) => {
+    bottomSpacerHeight: number;
+    filteredRows: T[];
+    handleBlur: () => void;
+    handleChange: (nextValue: string) => void;
+    handleFocus: () => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleOpenAllItems: () => void;
+    handleSuggestionsScroll: (event: React.UIEvent<HTMLDivElement>) => void;
+    inputValue: string;
+    isLoading: boolean;
+    opened: boolean;
+    highlightedIndex: number;
+    resetToSelectedValue: () => void;
+    selectedLabel: string;
+    selectItem: (item: T | null) => void;
+    suggestionsContainerRef: import('react').RefObject<HTMLDivElement | null>;
+    topSpacerHeight: number;
+    visibleRows: T[];
+    visibleStartIndex: number;
+};

package/dist/components/forms/SqlPrefixFilterCombobox/useSqlPrefixFilterComboboxState.js

@@ -0,0 +1,275 @@
+import { useSqlRequestHandler as De } from "../../../services/sqlRequests.js";
+import { useRef as b, useMemo as g, useState as i, useCallback as o, useEffect as R } from "react";
+const Fe = 25, ye = 50, N = 40, qe = 80, Ce = 8, Te = 6, pe = 2, Ue = 250, v = (r) => (r ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").trim().toLowerCase(), se = (r) => v(r).replace(/[^a-z0-9]+/g, ""), be = (r) => {
+  const u = se(r);
+  if (!u) return "";
+  const d = v(r).match(/^[a-z0-9]+/)?.[0] ?? "";
+  return /[^a-z0-9]/i.test(r ?? "") && d || u.slice(0, pe);
+}, Ge = ({
+  requestName: r,
+  columns: u,
+  returnColumns: M = u,
+  parser: d,
+  value: z,
+  itemLabel: S,
+  filterField: k,
+  conditions: G = [],
+  orderBy: B = [],
+  onChange: oe,
+  initialPageSize: O = Fe,
+  pageSize: V = ye
+}) => {
+  const K = b(null), P = b(null), Y = b(0), T = b(!1), re = b(
+    /* @__PURE__ */ new Map()
+  ), [ce] = De(r), f = g(
+    () => z ? S(z, -1) : "",
+    [S, z]
+  ), [p, W] = i(f), [n, x] = i(!1), [c, m] = i(!1), [h, _] = i(-1), [a, X] = i([]), [Z, $] = i(!1), [D, le] = i(!1), [Ie, ue] = i(0), [I, J] = i(null), F = g(() => !n || c ? "" : se(p), [p, n, c]), Q = g(
+    () => v(p).length === 0,
+    [p]
+  ), y = g(
+    () => !n || c ? "" : be(p),
+    [p, n, c]
+  ), ae = g(
+    () => JSON.stringify({
+      requestName: r,
+      columns: u,
+      returnColumns: M,
+      filterField: k,
+      conditions: G,
+      orderBy: B,
+      initialPageSize: O,
+      pageSize: V,
+      hasParser: !!d
+    }),
+    [
+      u,
+      G,
+      k,
+      O,
+      B,
+      V,
+      d,
+      r,
+      M
+    ]
+  ), w = g(
+    () => `${ae}::${y || "__all__"}`,
+    [ae, y]
+  ), s = g(() => c || !F ? a : a.filter(
+    (e, t) => se(S(e, t)).startsWith(
+      F
+    )
+  ), [S, F, a, c]), q = Math.max(
+    0,
+    Math.floor(Ie / N) - Te
+  ), we = Ce + Te * 2, ee = Math.min(
+    s.length,
+    q + we
+  ), Ee = g(
+    () => s.slice(q, ee),
+    [s, ee, q]
+  ), Re = q * N, Se = (s.length - ee) * N, l = o(() => {
+    K.current !== null && (window.clearTimeout(K.current), K.current = null);
+  }, []);
+  R(
+    () => () => {
+      l();
+    },
+    [l]
+  ), R(() => {
+    n || (T.current = !1);
+  }, [n]), R(() => {
+    n || W(I ?? f);
+  }, [n, I, f]), R(() => {
+    I !== null && I === f && J(null);
+  }, [I, f]);
+  const C = o(() => {
+    P.current && (P.current.scrollTop = 0), ue(0);
+  }, []), A = o(() => {
+    x(!1), m(!1), _(-1), X([]), $(!1), C();
+  }, [C]), H = o(() => {
+    T.current = !1, J(null), W(f), A();
+  }, [A, f]), L = o(
+    async (e, t, U) => {
+      const ie = ++Y.current;
+      le(!0);
+      const fe = [...G];
+      y && fe.push({
+        field: k,
+        operator: "startsWith",
+        value: y
+      });
+      const Oe = (t ? O : V) + 1, Ve = {
+        columns: u,
+        returnColumns: M,
+        conditions: fe,
+        orderBy: B,
+        start: e,
+        length: Oe,
+        getCount: !1
+      };
+      try {
+        const xe = await ce(Ve);
+        if (Y.current !== ie) return;
+        const te = xe.data ?? [], he = t ? O : V, ne = te.length > he, ge = (ne ? te.slice(0, he) : te).map((j) => d ? d(j) : j);
+        X((j) => {
+          const de = t ? ge : [...j, ...ge];
+          return re.current.set(U, {
+            rows: de,
+            hasMore: ne
+          }), de;
+        }), $(ne);
+      } finally {
+        Y.current === ie && le(!1);
+      }
+    },
+    [
+      u,
+      G,
+      k,
+      O,
+      B,
+      V,
+      d,
+      M,
+      y,
+      ce
+    ]
+  );
+  R(() => {
+    if (!n) return;
+    const e = re.current.get(w);
+    if (e) {
+      X(e.rows), $(e.hasMore), _(-1), C();
+      return;
+    }
+    X([]), $(!1);
+    const t = window.setTimeout(
+      () => {
+        _(-1), C(), L(0, !0, w);
+      },
+      c ? 0 : 120
+    );
+    return () => {
+      window.clearTimeout(t);
+    };
+  }, [
+    L,
+    n,
+    w,
+    C,
+    c
+  ]), R(() => {
+    if (!n || h < 0) return;
+    const e = P.current;
+    if (!e) return;
+    const t = h * N, U = t + N;
+    t < e.scrollTop ? e.scrollTop = t : U > e.scrollTop + e.clientHeight && (e.scrollTop = U - e.clientHeight);
+  }, [h, n]);
+  const E = o(
+    (e) => {
+      const t = e ? S(e, -1) : "";
+      T.current = !0, l(), J(t), W(t), A(), oe?.(e);
+    },
+    [l, A, S, oe]
+  ), me = o(() => {
+    T.current = !1, l(), x(!0), m(!0);
+  }, [l]), _e = o(() => {
+    T.current = !1, l(), x(!0), m(!0);
+  }, [l]), Ae = o(() => {
+    if (l(), Q) {
+      E(null);
+      return;
+    }
+    if (T.current || I !== null) {
+      A();
+      return;
+    }
+    K.current = window.setTimeout(() => {
+      H();
+    }, 150);
+  }, [
+    l,
+    A,
+    Q,
+    I,
+    H,
+    E
+  ]), He = o((e) => {
+    T.current = !1, J(null), W(e), x(!0), m(!1), _(v(e).length === 0 ? -1 : 0);
+  }, []), Le = o(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), x(!0), m(!1), _(
+          (t) => Math.min(t + 1, s.length - 1)
+        );
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), m(!1), _((t) => Math.max(t - 1, 0));
+        return;
+      }
+      if (e.key === "Enter") {
+        if (e.preventDefault(), Q) {
+          E(null);
+          return;
+        }
+        if (h >= 0 && s[h]) {
+          E(s[h]);
+          return;
+        }
+        if (s.length === 1) {
+          E(s[0]);
+          return;
+        }
+        H();
+        return;
+      }
+      e.key === "Escape" && (e.preventDefault(), H());
+    },
+    [s, h, Q, H, E]
+  ), Me = o(
+    (e) => {
+      const t = e.currentTarget;
+      ue(t.scrollTop), t.scrollTop + t.clientHeight >= t.scrollHeight - qe && !D && Z && L(a.length, !1, w);
+    },
+    [Z, D, L, w, a.length]
+  );
+  return R(() => {
+    !n || c || !F || D || !Z || s.length > 0 || a.length === 0 || a.length >= Ue || L(a.length, !1, w);
+  }, [
+    s.length,
+    Z,
+    D,
+    L,
+    F,
+    n,
+    w,
+    a.length,
+    c
+  ]), {
+    bottomSpacerHeight: Se,
+    filteredRows: s,
+    handleBlur: Ae,
+    handleChange: He,
+    handleFocus: me,
+    handleKeyDown: Le,
+    handleOpenAllItems: _e,
+    handleSuggestionsScroll: Me,
+    inputValue: p,
+    isLoading: D,
+    opened: n,
+    highlightedIndex: h,
+    resetToSelectedValue: H,
+    selectedLabel: f,
+    selectItem: E,
+    suggestionsContainerRef: P,
+    topSpacerHeight: Re,
+    visibleRows: Ee,
+    visibleStartIndex: q
+  };
+};
+export {
+  Ge as useSqlPrefixFilterComboboxState
+};

package/dist/components/forms/index.d.ts

@@ -9,3 +9,4 @@ export * from './Form/styles';
 export * from './Form/Row';
 export * from './styles';
 export * from './NumberInput';
+export * from './SqlPrefixFilterCombobox/SqlPrefixFilterCombobox';

package/dist/components/forms/index.js

@@ -1,37 +1,39 @@
 import { AutoTextArea as r } from "./AutoTextArea.js";
 import { BillitIdentifier as m } from "./BillitIdentifier/index.js";
 import { Button as p, StyledButton as x } from "./Button.js";
-import { Select as d } from "./Select.js";
-import { IconButton as i } from "./IconButton.js";
-import { IndeterminateCheckbox as f } from "./IndeterminateCheckbox.js";
+import { Select as i } from "./Select.js";
+import { IconButton as d } from "./IconButton.js";
+import { IndeterminateCheckbox as u } from "./IndeterminateCheckbox.js";
 import { CardForm as C } from "./Form/index.js";
-import { FormCondensedFields as c, FormFields as y, FormGroupContainer as b, FormGroupHeader as s, FormRowContainer as I, FormRowLabel as B, ReadOnlyValue as R, StyledCheckbox as k, inputCss as w } from "./Form/styles.js";
+import { FormCondensedFields as b, FormFields as c, FormGroupContainer as y, FormGroupHeader as s, FormRowContainer as I, FormRowLabel as B, ReadOnlyValue as R, StyledCheckbox as k, inputCss as w } from "./Form/styles.js";
 import { FormRow as h } from "./Form/Row.js";
-import { Input as L, StackedLabelContainer as N, StyledNumericFormat as T, StyledTextArea as H, inputStyle as O } from "./styles.js";
-import { NumberInput as g } from "./NumberInput.js";
+import { Input as L, StackedLabelContainer as N, StyledNumericFormat as T, StyledTextArea as q, inputStyle as H } from "./styles.js";
+import { NumberInput as P } from "./NumberInput.js";
+import { SqlPrefixFilterCombobox as g } from "./SqlPrefixFilterCombobox/SqlPrefixFilterCombobox.js";
 export {
   r as AutoTextArea,
   m as BillitIdentifier,
   p as Button,
   C as CardForm,
-  c as FormCondensedFields,
-  y as FormFields,
-  b as FormGroupContainer,
+  b as FormCondensedFields,
+  c as FormFields,
+  y as FormGroupContainer,
   s as FormGroupHeader,
   h as FormRow,
   I as FormRowContainer,
   B as FormRowLabel,
-  i as IconButton,
-  f as IndeterminateCheckbox,
+  d as IconButton,
+  u as IndeterminateCheckbox,
   L as Input,
-  g as NumberInput,
+  P as NumberInput,
   R as ReadOnlyValue,
-  d as Select,
+  i as Select,
+  g as SqlPrefixFilterCombobox,
   N as StackedLabelContainer,
   x as StyledButton,
   k as StyledCheckbox,
   T as StyledNumericFormat,
-  H as StyledTextArea,
+  q as StyledTextArea,
   w as inputCss,
-  O as inputStyle
+  H as inputStyle
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "3.3.3",
+  "version": "3.3.7",
   "type": "module",
   "scripts": {
     "watch": "vite build --watch",
@@ -74,7 +74,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^3.3.3",
+    "@addev-be/framework-utils": "^3.3.7",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -114,5 +114,9 @@
     "tailwind-merge": "^3.5.0",
     "uuid": "^13.0.0",
     "zod": "^4.1.9"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
   }
 }

package/src/components/forms/SqlPrefixFilterCombobox/SqlPrefixFilterCombobox.tsx

@@ -0,0 +1,176 @@
+import { CardForm } from '../Form';
+import styled from 'styled-components';
+import {
+  useSqlPrefixFilterComboboxState,
+  type UseSqlPrefixFilterComboboxStateProps,
+} from './useSqlPrefixFilterComboboxState';
+
+const MAX_HEIGHT_REM = 20;
+const SUGGESTION_ITEM_HEIGHT = 40;
+
+const ComboboxContainer = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const ComboboxInput = styled.input`
+  font-family: var(--font-input);
+  font-size: var(--text-base);
+  font-weight: 500;
+  border: 1px solid var(--color-base-300);
+  color: var(--color-text-800);
+  background: var(--color-base-0);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--space-2);
+  border-radius: var(--rounded-md);
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-sky-500);
+    box-shadow: 0 0 0 1px var(--color-sky-500);
+  }
+`;
+
+const SuggestionsContainer = styled.div`
+  position: absolute;
+  top: calc(100% + var(--space-1));
+  left: 0;
+  right: 0;
+  z-index: 20;
+  max-height: ${MAX_HEIGHT_REM}rem;
+  background: var(--color-base-0);
+  border: 1px solid var(--color-base-300);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-lg);
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+
+const SuggestionButton = styled.button<{ $highlighted: boolean }>`
+  width: 100%;
+  border: 0;
+  height: ${SUGGESTION_ITEM_HEIGHT}px;
+  padding: 0 var(--space-3);
+  text-align: left;
+  cursor: pointer;
+  background: ${({ $highlighted }) =>
+    $highlighted ? 'var(--color-base-100)' : 'var(--color-base-0)'};
+  color: var(--color-text-800);
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background: var(--color-base-100);
+  }
+`;
+
+const SuggestionsStatus = styled.div`
+  padding: var(--space-2) var(--space-3);
+  color: var(--color-text-500);
+  font-size: var(--text-sm);
+`;
+
+export type SqlPrefixFilterComboboxProps<T> =
+  UseSqlPrefixFilterComboboxStateProps<T> & {
+    label?: string;
+    itemKey: (item: T, index: number) => string;
+    noResultsText?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+  };
+
+export const SqlPrefixFilterCombobox = <T,>({
+  label,
+  value,
+  itemKey,
+  itemLabel,
+  readOnly = false,
+  noResultsText = 'Aucun resultat',
+  placeholder,
+  ...props
+}: SqlPrefixFilterComboboxProps<T>) => {
+  const {
+    bottomSpacerHeight,
+    filteredRows,
+    handleBlur,
+    handleChange,
+    handleFocus,
+    handleKeyDown,
+    handleOpenAllItems,
+    handleSuggestionsScroll,
+    inputValue,
+    isLoading,
+    opened,
+    highlightedIndex,
+    selectedLabel,
+    selectItem,
+    suggestionsContainerRef,
+    topSpacerHeight,
+    visibleRows,
+    visibleStartIndex,
+  } = useSqlPrefixFilterComboboxState<T>({
+    ...props,
+    itemLabel,
+    value,
+  });
+
+  if (readOnly) {
+    return <CardForm.Input label={label} value={selectedLabel} readOnly />;
+  }
+
+  return (
+    <CardForm.Row label={label}>
+      <ComboboxContainer>
+        <ComboboxInput
+          type="text"
+          value={inputValue}
+          placeholder={opened ? undefined : placeholder}
+          autoComplete="off"
+          onMouseDown={handleOpenAllItems}
+          onClick={handleOpenAllItems}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          onChange={(e) => handleChange(e.target.value)}
+        />
+        {opened && (
+          <SuggestionsContainer
+            ref={suggestionsContainerRef}
+            onScroll={handleSuggestionsScroll}
+          >
+            {filteredRows.length > 0 ? (
+              <>
+                <div style={{ height: topSpacerHeight }} />
+                {visibleRows.map((item, index) => {
+                  const absoluteIndex = visibleStartIndex + index;
+                  return (
+                    <SuggestionButton
+                      key={itemKey(item, absoluteIndex)}
+                      type="button"
+                      $highlighted={absoluteIndex === highlightedIndex}
+                      onMouseDown={(event) => {
+                        event.preventDefault();
+                        selectItem(item);
+                      }}
+                    >
+                      {itemLabel(item, absoluteIndex)}
+                    </SuggestionButton>
+                  );
+                })}
+                <div style={{ height: bottomSpacerHeight }} />
+              </>
+            ) : isLoading ? (
+              <SuggestionsStatus>Chargement...</SuggestionsStatus>
+            ) : (
+              <SuggestionsStatus>{noResultsText}</SuggestionsStatus>
+            )}
+            {isLoading && filteredRows.length > 0 && (
+              <SuggestionsStatus>Chargement...</SuggestionsStatus>
+            )}
+          </SuggestionsContainer>
+        )}
+      </ComboboxContainer>
+    </CardForm.Row>
+  );
+};

package/src/components/forms/SqlPrefixFilterCombobox/useSqlPrefixFilterComboboxState.ts

@@ -0,0 +1,522 @@
+import {
+  ConditionDTO,
+  OrderByDTO,
+  SqlRequestDTO,
+  SqlRequestRow,
+  useSqlRequestHandler,
+} from '../../../services/sqlRequests';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+const INITIAL_PAGE_SIZE_DEFAULT = 25;
+const PAGE_SIZE_DEFAULT = 50;
+const SUGGESTION_ITEM_HEIGHT = 40;
+const LOAD_MORE_THRESHOLD_PX = 80;
+const VISIBLE_ITEMS_COUNT = 8;
+const VIRTUALIZATION_BUFFER = 6;
+const SERVER_FALLBACK_PREFIX_LENGTH = 2;
+const MAX_AUTOFETCH_ROWS = 250;
+
+const normalizeSearchValue = (value?: string | null) =>
+  (value ?? '')
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .trim()
+    .toLowerCase();
+
+const normalizeLooseSearchValue = (value?: string | null) =>
+  normalizeSearchValue(value).replace(/[^a-z0-9]+/g, '');
+
+const getServerFilterValue = (value?: string | null) => {
+  const compactValue = normalizeLooseSearchValue(value);
+
+  if (!compactValue) return '';
+
+  const normalizedValue = normalizeSearchValue(value);
+  const leadingToken = normalizedValue.match(/^[a-z0-9]+/)?.[0] ?? '';
+
+  if (/[^a-z0-9]/i.test(value ?? '')) {
+    return leadingToken || compactValue.slice(0, SERVER_FALLBACK_PREFIX_LENGTH);
+  }
+
+  return compactValue.slice(0, SERVER_FALLBACK_PREFIX_LENGTH);
+};
+
+export type UseSqlPrefixFilterComboboxStateProps<T> = {
+  requestName: string;
+  columns: string[];
+  returnColumns?: string[];
+  parser?: (row: SqlRequestRow<T>) => T;
+  value: T | null;
+  itemLabel: (item: T, index: number) => string;
+  filterField: string;
+  conditions?: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  onChange?: (value: T | null) => void;
+  initialPageSize?: number;
+  pageSize?: number;
+};
+
+export const useSqlPrefixFilterComboboxState = <T>({
+  requestName,
+  columns,
+  returnColumns = columns,
+  parser,
+  value,
+  itemLabel,
+  filterField,
+  conditions = [],
+  orderBy = [],
+  onChange,
+  initialPageSize = INITIAL_PAGE_SIZE_DEFAULT,
+  pageSize = PAGE_SIZE_DEFAULT,
+}: UseSqlPrefixFilterComboboxStateProps<T>) => {
+  const closeTimeoutRef = useRef<number | null>(null);
+  const suggestionsContainerRef = useRef<HTMLDivElement | null>(null);
+  const requestIdRef = useRef(0);
+  const selectingItemRef = useRef(false);
+  const cacheRef = useRef<Map<string, { rows: T[]; hasMore: boolean }>>(
+    new Map()
+  );
+
+  const [sqlRequest] = useSqlRequestHandler<T>(requestName);
+  const selectedLabel = useMemo(
+    () => (value ? itemLabel(value, -1) : ''),
+    [itemLabel, value]
+  );
+
+  const [inputValue, setInputValue] = useState(selectedLabel);
+  const [opened, setOpened] = useState(false);
+  const [showAllOnFocus, setShowAllOnFocus] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const [rows, setRows] = useState<T[]>([]);
+  const [hasMore, setHasMore] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [pendingSelectionLabel, setPendingSelectionLabel] = useState<
+    string | null
+  >(null);
+
+  const matchingQuery = useMemo(() => {
+    if (!opened || showAllOnFocus) return '';
+    return normalizeLooseSearchValue(inputValue);
+  }, [inputValue, opened, showAllOnFocus]);
+  const isInputEmpty = useMemo(
+    () => normalizeSearchValue(inputValue).length === 0,
+    [inputValue]
+  );
+
+  const serverFilterValue = useMemo(
+    () => (!opened || showAllOnFocus ? '' : getServerFilterValue(inputValue)),
+    [inputValue, opened, showAllOnFocus]
+  );
+
+  const requestScopeKey = useMemo(
+    () =>
+      JSON.stringify({
+        requestName,
+        columns,
+        returnColumns,
+        filterField,
+        conditions,
+        orderBy,
+        initialPageSize,
+        pageSize,
+        hasParser: Boolean(parser),
+      }),
+    [
+      columns,
+      conditions,
+      filterField,
+      initialPageSize,
+      orderBy,
+      pageSize,
+      parser,
+      requestName,
+      returnColumns,
+    ]
+  );
+  const requestCacheKey = useMemo(
+    () => `${requestScopeKey}::${serverFilterValue || '__all__'}`,
+    [requestScopeKey, serverFilterValue]
+  );
+
+  const filteredRows = useMemo(() => {
+    if (showAllOnFocus || !matchingQuery) return rows;
+
+    return rows.filter((item, index) =>
+      normalizeLooseSearchValue(itemLabel(item, index)).startsWith(
+        matchingQuery
+      )
+    );
+  }, [itemLabel, matchingQuery, rows, showAllOnFocus]);
+
+  const visibleStartIndex = Math.max(
+    0,
+    Math.floor(scrollTop / SUGGESTION_ITEM_HEIGHT) - VIRTUALIZATION_BUFFER
+  );
+  const visibleLength = VISIBLE_ITEMS_COUNT + VIRTUALIZATION_BUFFER * 2;
+  const visibleEndIndex = Math.min(
+    filteredRows.length,
+    visibleStartIndex + visibleLength
+  );
+  const visibleRows = useMemo(
+    () => filteredRows.slice(visibleStartIndex, visibleEndIndex),
+    [filteredRows, visibleEndIndex, visibleStartIndex]
+  );
+  const topSpacerHeight = visibleStartIndex * SUGGESTION_ITEM_HEIGHT;
+  const bottomSpacerHeight =
+    (filteredRows.length - visibleEndIndex) * SUGGESTION_ITEM_HEIGHT;
+
+  const clearCloseTimeout = useCallback(() => {
+    if (closeTimeoutRef.current !== null) {
+      window.clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  }, []);
+
+  useEffect(
+    () => () => {
+      clearCloseTimeout();
+    },
+    [clearCloseTimeout]
+  );
+
+  useEffect(() => {
+    if (!opened) {
+      selectingItemRef.current = false;
+    }
+  }, [opened]);
+
+  useEffect(() => {
+    if (!opened) {
+      setInputValue(pendingSelectionLabel ?? selectedLabel);
+    }
+  }, [opened, pendingSelectionLabel, selectedLabel]);
+
+  useEffect(() => {
+    if (
+      pendingSelectionLabel !== null &&
+      pendingSelectionLabel === selectedLabel
+    ) {
+      setPendingSelectionLabel(null);
+    }
+  }, [pendingSelectionLabel, selectedLabel]);
+
+  const resetSuggestionsScroll = useCallback(() => {
+    if (suggestionsContainerRef.current) {
+      suggestionsContainerRef.current.scrollTop = 0;
+    }
+    setScrollTop(0);
+  }, []);
+
+  const closeSuggestions = useCallback(() => {
+    setOpened(false);
+    setShowAllOnFocus(false);
+    setHighlightedIndex(-1);
+    setRows([]);
+    setHasMore(false);
+    resetSuggestionsScroll();
+  }, [resetSuggestionsScroll]);
+
+  const resetToSelectedValue = useCallback(() => {
+    selectingItemRef.current = false;
+    setPendingSelectionLabel(null);
+    setInputValue(selectedLabel);
+    closeSuggestions();
+  }, [closeSuggestions, selectedLabel]);
+
+  const loadRows = useCallback(
+    async (start: number, reset: boolean, cacheKey: string) => {
+      const currentRequestId = ++requestIdRef.current;
+      setIsLoading(true);
+
+      const nextConditions: ConditionDTO[] = [...conditions];
+
+      if (serverFilterValue) {
+        nextConditions.push({
+          field: filterField,
+          operator: 'startsWith',
+          value: serverFilterValue,
+        });
+      }
+
+      const requestedLength = (reset ? initialPageSize : pageSize) + 1;
+
+      const request: SqlRequestDTO = {
+        columns,
+        returnColumns,
+        conditions: nextConditions,
+        orderBy,
+        start,
+        length: requestedLength,
+        getCount: false,
+      };
+
+      try {
+        const response = await sqlRequest(request);
+
+        if (requestIdRef.current !== currentRequestId) return;
+
+        const fetchedRows = response.data ?? [];
+        const pageLength = reset ? initialPageSize : pageSize;
+        const nextHasMore = fetchedRows.length > pageLength;
+        const nextRows = (
+          nextHasMore ? fetchedRows.slice(0, pageLength) : fetchedRows
+        ).map((row) => (parser ? parser(row) : (row as T)));
+
+        setRows((prevRows) => {
+          const mergedRows = reset ? nextRows : [...prevRows, ...nextRows];
+          cacheRef.current.set(cacheKey, {
+            rows: mergedRows,
+            hasMore: nextHasMore,
+          });
+          return mergedRows;
+        });
+        setHasMore(nextHasMore);
+      } finally {
+        if (requestIdRef.current === currentRequestId) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [
+      columns,
+      conditions,
+      filterField,
+      initialPageSize,
+      orderBy,
+      pageSize,
+      parser,
+      returnColumns,
+      serverFilterValue,
+      sqlRequest,
+    ]
+  );
+
+  useEffect(() => {
+    if (!opened) return;
+
+    const cachedValue = cacheRef.current.get(requestCacheKey);
+    if (cachedValue) {
+      setRows(cachedValue.rows);
+      setHasMore(cachedValue.hasMore);
+      setHighlightedIndex(-1);
+      resetSuggestionsScroll();
+      return;
+    }
+
+    setRows([]);
+    setHasMore(false);
+
+    const timeoutId = window.setTimeout(
+      () => {
+        setHighlightedIndex(-1);
+        resetSuggestionsScroll();
+        loadRows(0, true, requestCacheKey);
+      },
+      showAllOnFocus ? 0 : 120
+    );
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [
+    loadRows,
+    opened,
+    requestCacheKey,
+    resetSuggestionsScroll,
+    showAllOnFocus,
+  ]);
+
+  useEffect(() => {
+    if (!opened || highlightedIndex < 0) return;
+
+    const container = suggestionsContainerRef.current;
+
+    if (!container) return;
+
+    const itemTop = highlightedIndex * SUGGESTION_ITEM_HEIGHT;
+    const itemBottom = itemTop + SUGGESTION_ITEM_HEIGHT;
+
+    if (itemTop < container.scrollTop) {
+      container.scrollTop = itemTop;
+    } else if (itemBottom > container.scrollTop + container.clientHeight) {
+      container.scrollTop = itemBottom - container.clientHeight;
+    }
+  }, [highlightedIndex, opened]);
+
+  const selectItem = useCallback(
+    (item: T | null) => {
+      const nextLabel = item ? itemLabel(item, -1) : '';
+      selectingItemRef.current = true;
+      clearCloseTimeout();
+      setPendingSelectionLabel(nextLabel);
+      setInputValue(nextLabel);
+      closeSuggestions();
+      onChange?.(item);
+    },
+    [clearCloseTimeout, closeSuggestions, itemLabel, onChange]
+  );
+
+  const handleFocus = useCallback(() => {
+    selectingItemRef.current = false;
+    clearCloseTimeout();
+    setOpened(true);
+    setShowAllOnFocus(true);
+  }, [clearCloseTimeout]);
+
+  const handleOpenAllItems = useCallback(() => {
+    selectingItemRef.current = false;
+    clearCloseTimeout();
+    setOpened(true);
+    setShowAllOnFocus(true);
+  }, [clearCloseTimeout]);
+
+  const handleBlur = useCallback(() => {
+    clearCloseTimeout();
+
+    if (isInputEmpty) {
+      selectItem(null);
+      return;
+    }
+
+    if (selectingItemRef.current || pendingSelectionLabel !== null) {
+      closeSuggestions();
+      return;
+    }
+
+    closeTimeoutRef.current = window.setTimeout(() => {
+      resetToSelectedValue();
+    }, 150);
+  }, [
+    clearCloseTimeout,
+    closeSuggestions,
+    isInputEmpty,
+    pendingSelectionLabel,
+    resetToSelectedValue,
+    selectItem,
+  ]);
+
+  const handleChange = useCallback((nextValue: string) => {
+    selectingItemRef.current = false;
+    setPendingSelectionLabel(null);
+    setInputValue(nextValue);
+    setOpened(true);
+    setShowAllOnFocus(false);
+    setHighlightedIndex(normalizeSearchValue(nextValue).length === 0 ? -1 : 0);
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setOpened(true);
+        setShowAllOnFocus(false);
+        setHighlightedIndex((prev) =>
+          Math.min(prev + 1, filteredRows.length - 1)
+        );
+        return;
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setShowAllOnFocus(false);
+        setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+        return;
+      }
+
+      if (event.key === 'Enter') {
+        event.preventDefault();
+
+        if (isInputEmpty) {
+          selectItem(null);
+          return;
+        }
+
+        if (highlightedIndex >= 0 && filteredRows[highlightedIndex]) {
+          selectItem(filteredRows[highlightedIndex]);
+          return;
+        }
+
+        if (filteredRows.length === 1) {
+          selectItem(filteredRows[0]);
+          return;
+        }
+
+        resetToSelectedValue();
+        return;
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        resetToSelectedValue();
+      }
+    },
+    [filteredRows, highlightedIndex, isInputEmpty, resetToSelectedValue, selectItem]
+  );
+
+  const handleSuggestionsScroll = useCallback(
+    (event: React.UIEvent<HTMLDivElement>) => {
+      const container = event.currentTarget;
+      setScrollTop(container.scrollTop);
+
+      const isNearBottom =
+        container.scrollTop + container.clientHeight >=
+        container.scrollHeight - LOAD_MORE_THRESHOLD_PX;
+
+      if (isNearBottom && !isLoading && hasMore) {
+        loadRows(rows.length, false, requestCacheKey);
+      }
+    },
+    [hasMore, isLoading, loadRows, requestCacheKey, rows.length]
+  );
+
+  useEffect(() => {
+    if (
+      !opened ||
+      showAllOnFocus ||
+      !matchingQuery ||
+      isLoading ||
+      !hasMore ||
+      filteredRows.length > 0 ||
+      rows.length === 0 ||
+      rows.length >= MAX_AUTOFETCH_ROWS
+    ) {
+      return;
+    }
+
+    loadRows(rows.length, false, requestCacheKey);
+  }, [
+    filteredRows.length,
+    hasMore,
+    isLoading,
+    loadRows,
+    matchingQuery,
+    opened,
+    requestCacheKey,
+    rows.length,
+    showAllOnFocus,
+  ]);
+
+  return {
+    bottomSpacerHeight,
+    filteredRows,
+    handleBlur,
+    handleChange,
+    handleFocus,
+    handleKeyDown,
+    handleOpenAllItems,
+    handleSuggestionsScroll,
+    inputValue,
+    isLoading,
+    opened,
+    highlightedIndex,
+    resetToSelectedValue,
+    selectedLabel,
+    selectItem,
+    suggestionsContainerRef,
+    topSpacerHeight,
+    visibleRows,
+    visibleStartIndex,
+  };
+};

package/src/components/forms/index.ts

@@ -9,3 +9,4 @@ export * from './Form/styles';
 export * from './Form/Row';
 export * from './styles';
 export * from './NumberInput';
+export * from './SqlPrefixFilterCombobox/SqlPrefixFilterCombobox';