@addev-be/ui 3.3.3 → 3.4.0

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/dist/services/index.d.ts

@@ -8,6 +8,7 @@ export * from './requests/tracking';
 export * from './requests/users';
 export * from './requests/userProfiles';
 export * from './types/auth';
+export * from './types/audit';
 export * from './types/base';
 export * from './types/generic';
 export * from './types/tracking';

package/dist/services/types/audit.d.ts

@@ -0,0 +1,13 @@
+export type AuditLogSqlRow = {
+    Id: string;
+    CreatedAt: string;
+    Action: string;
+    EntityType: string;
+    EntityId: string | null;
+    RequestHandler: string | null;
+    Username: string | null;
+    DisplayName: string | null;
+    Success: boolean;
+    Message: string | null;
+    MetadataJson: string | null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "3.3.3",
+  "version": "3.4.0",
   "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.4.0",
     "@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"
   }
 }