laif-ds 1.0.2-app-data-grid.82 → 1.0.2-app-data-grid.87

package/dist/components/ui/app-data-grid/parts/grid-filter-chips.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsxs as o, jsx as i, Fragment as N } from "react/jsx-runtime";
 import { designTokens as d } from "../../../design-tokens.js";
-import { DropdownMenu as R, DropdownMenuTrigger as A, DropdownMenuContent as E, DropdownMenuLabel as U, DropdownMenuItem as w, DropdownMenuSeparator as j } from "../../dropdown-menu.js";
+import { DropdownMenu as E, DropdownMenuTrigger as G, DropdownMenuContent as U, DropdownMenuLabel as j, DropdownMenuItem as w, DropdownMenuSeparator as P } from "../../dropdown-menu.js";
 import { cn as m } from "../../../../lib/utils.js";
-import { gridActiveFilterCount as G } from "../grid-filter-compile.js";
-import { gridBadgeOperatorLabel as O, GRID_VALUELESS_OPERATORS as T } from "../grid-filter-operators.js";
+import { gridActiveFilterCount as T } from "../grid-filter-compile.js";
+import { gridBadgeOperatorLabel as O, GRID_VALUELESS_OPERATORS as V } from "../grid-filter-operators.js";
 import { defaultGridI18n as a } from "../grid-i18n.js";
-import V from "../../../../node_modules/lucide-react/dist/esm/icons/plus.js";
-const z = new Set(T), S = (r, l) => r.value === void 0 || z.has(r.operator) ? "" : typeof r.value == "boolean" ? r.value ? l.booleanOperators.true : l.booleanOperators.false : Array.isArray(r.value) ? r.value.map((f) => r.listOptions?.find((n) => n.value === f)?.label ?? String(f)).join(", ") : r.listOptions?.find((t) => t.value === r.value)?.label ?? String(r.value), B = (r, l) => {
+import { useGridPortalContainer as z } from "./grid-portal-container.js";
+import B from "../../../../node_modules/lucide-react/dist/esm/icons/plus.js";
+const _ = new Set(V), S = (r, l) => r.value === void 0 || _.has(r.operator) ? "" : typeof r.value == "boolean" ? r.value ? l.booleanOperators.true : l.booleanOperators.false : Array.isArray(r.value) ? r.value.map((f) => r.listOptions?.find((n) => n.value === f)?.label ?? String(f)).join(", ") : r.listOptions?.find((t) => t.value === r.value)?.label ?? String(r.value), q = (r, l) => {
   if (r.kind === "custom") return r.customLabel ?? r.columnLabel;
   const c = S(r, l), t = O(r, l);
   return `${r.columnLabel} ${t}${c ? `: ${c}` : ""}`;
-}, X = ({
+}, er = ({
   badges: r,
   onRemove: l,
   onClearAll: c,
@@ -21,10 +22,11 @@ const z = new Set(T), S = (r, l) => r.value === void 0 || z.has(r.operator) ? ""
   i18n: n = a,
   className: $
 }) => {
-  const p = t?.filterCount ?? G(r), s = n.filters, g = n.pagination, C = t?.filterCountIsSingular ?? p === 1 ? s.filterOne ?? a.filters.filterOne : s.filterMany ?? a.filters.filterMany, I = t?.totalIsSingular ? g.rowOne ?? a.pagination.rowOne : g.rows;
+  const p = t?.filterCount ?? T(r), { anchorRef: C, container: I } = z(), s = n.filters, g = n.pagination, F = t?.filterCountIsSingular ?? p === 1 ? s.filterOne ?? a.filters.filterOne : s.filterMany ?? a.filters.filterMany, y = t?.totalIsSingular ? g.rowOne ?? a.pagination.rowOne : g.rows;
   return /* @__PURE__ */ o(
     "div",
     {
+      ref: C,
       "data-grid-filter-chips": "",
       "data-grid-filter-count": p,
       role: "list",
@@ -32,7 +34,7 @@ const z = new Set(T), S = (r, l) => r.value === void 0 || z.has(r.operator) ? ""
       className: m("flex flex-wrap items-center gap-1", $),
       children: [
         r.map((e) => {
-          const u = e.kind === "custom", L = u ? "" : S(e, n), F = u ? "" : O(e, n), b = s.conditionOn ?? a.filters.conditionOn, v = e.customLabel ?? e.columnLabel, y = B(e, n), M = u ? v : `${b} ${e.columnLabel}: ${F}${L ? ` ${L}` : ""}`, D = u ? v : `${b} ${e.columnLabel}`, k = `${s.removeFilterNamed ?? a.filters.removeFilterNamed} ${v}`;
+          const u = e.kind === "custom", L = u ? "" : S(e, n), M = u ? "" : O(e, n), b = s.conditionOn ?? a.filters.conditionOn, v = e.customLabel ?? e.columnLabel, D = q(e, n), R = u ? v : `${b} ${e.columnLabel}: ${M}${L ? ` ${L}` : ""}`, k = u ? v : `${b} ${e.columnLabel}`, A = `${s.removeFilterNamed ?? a.filters.removeFilterNamed} ${v}`;
           return (
             /*
                         UN FILTRO APPLICATO È UN UNICO BERSAGLIO — P7, criterio 4.
@@ -74,13 +76,13 @@ const z = new Set(T), S = (r, l) => r.value === void 0 || z.has(r.operator) ? ""
                 "data-grid-filter-chip": e.columnId,
                 className: "inline-flex items-center gap-1",
                 children: [
-                  /* @__PURE__ */ o(R, { modal: !1, children: [
+                  /* @__PURE__ */ o(E, { modal: !1, children: [
                     /* @__PURE__ */ i(
-                      A,
+                      G,
                       {
                         "data-grid-filter-chip-trigger": e.columnId,
                         "data-grid-filter-chip-operator": e.operator,
-                        "aria-label": M,
+                        "aria-label": R,
                         className: m(
                           d.focusRing,
                           // Stessa correzione della toolbar di P6, stessa ragione:
@@ -98,45 +100,53 @@ const z = new Set(T), S = (r, l) => r.value === void 0 || z.has(r.operator) ? ""
                           // risolve al colore del fondo (adg-r24).
                           "border-d-border bg-d-accent text-d-foreground h-11 cursor-pointer rounded-md"
                         ),
-                        children: /* @__PURE__ */ i("span", { "data-grid-filter-chip-label": "", children: y })
+                        children: /* @__PURE__ */ i("span", { "data-grid-filter-chip-label": "", children: D })
                       }
                     ),
-                    /* @__PURE__ */ o(E, { align: "start", className: "min-w-52", children: [
-                      /* @__PURE__ */ i(U, { children: D }),
-                      /* @__PURE__ */ i(
-                        w,
-                        {
-                          "data-grid-filter-chip-edit": e.columnId,
-                          disabled: h === void 0,
-                          onSelect: () => {
-                            const x = h;
-                            x !== void 0 && requestAnimationFrame(() => x(e.id));
-                          },
-                          className: "h-11",
-                          children: s.editValue ?? a.filters.editValue
-                        }
-                      ),
-                      !u && /* @__PURE__ */ o(N, { children: [
-                        /* @__PURE__ */ i(j, {}),
-                        /* @__PURE__ */ i(
-                          w,
-                          {
-                            variant: "destructive",
-                            "data-grid-filter-chip-remove": e.columnId,
-                            onSelect: () => l(e.id),
-                            className: "h-11",
-                            children: s.removeFilter ?? a.filters.removeFilter
-                          }
-                        )
-                      ] })
-                    ] })
+                    /* @__PURE__ */ o(
+                      U,
+                      {
+                        align: "start",
+                        container: I,
+                        className: "min-w-52",
+                        children: [
+                          /* @__PURE__ */ i(j, { children: k }),
+                          /* @__PURE__ */ i(
+                            w,
+                            {
+                              "data-grid-filter-chip-edit": e.columnId,
+                              disabled: h === void 0,
+                              onSelect: () => {
+                                const x = h;
+                                x !== void 0 && requestAnimationFrame(() => x(e.id));
+                              },
+                              className: "h-11",
+                              children: s.editValue ?? a.filters.editValue
+                            }
+                          ),
+                          !u && /* @__PURE__ */ o(N, { children: [
+                            /* @__PURE__ */ i(P, {}),
+                            /* @__PURE__ */ i(
+                              w,
+                              {
+                                variant: "destructive",
+                                "data-grid-filter-chip-remove": e.columnId,
+                                onSelect: () => l(e.id),
+                                className: "h-11",
+                                children: s.removeFilter ?? a.filters.removeFilter
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    )
                   ] }),
                   u && /* @__PURE__ */ i(
                     "button",
                     {
                       type: "button",
                       "data-grid-filter-chip-remove-button": e.columnId,
-                      "aria-label": k,
+                      "aria-label": A,
                       onClick: () => l(e.id),
                       className: m(
                         d.focusRing,
@@ -171,7 +181,7 @@ const z = new Set(T), S = (r, l) => r.value === void 0 || z.has(r.operator) ? ""
               "border-d-border text-d-foreground cursor-pointer rounded-md border-dashed"
             ),
             children: [
-              /* @__PURE__ */ i(V, { className: "size-3", "aria-hidden": "true" }),
+              /* @__PURE__ */ i(B, { className: "size-3", "aria-hidden": "true" }),
               s.addFilter
             ]
           }
@@ -187,14 +197,14 @@ const z = new Set(T), S = (r, l) => r.value === void 0 || z.has(r.operator) ? ""
               /* @__PURE__ */ o("span", { "data-grid-filter-scope-rows": "", children: [
                 t.totalLabel,
                 " ",
-                I
+                y
               ] }),
               p > 0 && /* @__PURE__ */ o(N, { children: [
                 /* @__PURE__ */ i("span", { "aria-hidden": "true", className: "px-1", children: "·" }),
                 /* @__PURE__ */ o("span", { "data-grid-filter-scope-filters": "", children: [
                   t.filterCountLabel,
                   " ",
-                  C
+                  F
                 ] })
               ] })
             ]
@@ -219,6 +229,6 @@ const z = new Set(T), S = (r, l) => r.value === void 0 || z.has(r.operator) ? ""
   );
 };
 export {
-  X as GridFilterChips,
-  B as gridBadgeFullLabel
+  er as GridFilterChips,
+  q as gridBadgeFullLabel
 };

package/dist/components/ui/app-data-grid/parts/grid-filter-editor.js

@@ -1,33 +1,34 @@
 "use client";
-import { jsx as i, jsxs as j } from "react/jsx-runtime";
+import { jsx as i, jsxs as O } from "react/jsx-runtime";
 import "react";
 import { designTokens as g } from "../../../design-tokens.js";
 import { AppSelect as x } from "../../app-select.js";
-import { DatePicker as E } from "../../date-picker.js";
-import { Icon as O } from "../../icon.js";
+import { DatePicker as R } from "../../date-picker.js";
+import { Icon as V } from "../../icon.js";
 import { cn as o } from "../../../../lib/utils.js";
-import { getGridFilterValueArity as R, isGridFilterValueEmpty as V } from "../grid-filter-operators.js";
+import { getGridFilterValueArity as H, isGridFilterValueEmpty as I } from "../grid-filter-operators.js";
 import { defaultGridI18n as T } from "../grid-i18n.js";
-const H = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "", I = (e) => {
+import { useGridPortalContainer as X } from "./grid-portal-container.js";
+const Y = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "", q = (e) => {
   if (typeof e != "string" || e === "") return;
-  const n = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e);
-  if (n !== null) {
-    const [, l, u, p] = n, c = new Date(Number(l), Number(u) - 1, Number(p));
+  const d = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e);
+  if (d !== null) {
+    const [, l, u, p] = d, c = new Date(Number(l), Number(u) - 1, Number(p));
     return Number.isNaN(c.getTime()) ? void 0 : c;
   }
   const t = new Date(e);
   return Number.isNaN(t.getTime()) ? void 0 : t;
-}, m = (e) => String(e).padStart(2, "0"), X = (e, n) => {
+}, m = (e) => String(e).padStart(2, "0"), B = (e, d) => {
   if (e === void 0) return "";
   const t = `${e.getFullYear()}-${m(e.getMonth() + 1)}-${m(
     e.getDate()
   )}`;
-  return n ? `${t}T${m(e.getHours())}:${m(e.getMinutes())}:${m(
+  return d ? `${t}T${m(e.getHours())}:${m(e.getMinutes())}:${m(
     e.getSeconds()
   )}` : t;
-}, _ = ({
+}, re = ({
   control: e,
-  operator: n,
+  operator: d,
   value: t,
   onValueChange: l,
   name: u,
@@ -36,12 +37,12 @@ const H = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "",
   size: k = "sm",
   fullWidth: s = !1,
   onClear: w,
-  i18n: d = T,
-  className: C
+  i18n: n = T,
+  className: D
 }) => {
-  const N = R(e.filterType, n);
-  if (N === "none") return null;
-  const a = k === "touch", f = !a, v = `${d.filters.value}: ${p}`, D = !V(t), F = e.editor === "date" || e.editor === "datetime", A = e.editor === "multiSelect", b = w !== void 0 && D && !F && !A, z = o(
+  const { anchorRef: F, container: N } = X(), v = H(e.filterType, d);
+  if (v === "none") return null;
+  const a = k === "touch", f = !a, $ = `${n.filters.value}: ${p}`, A = !I(t), G = e.editor === "date" || e.editor === "datetime", P = e.editor === "multiSelect", b = w !== void 0 && A && !G && !P, z = o(
     g.focusRing,
     g.radius.default,
     "border-d-border bg-d-background text-d-foreground min-w-0 border px-2",
@@ -53,15 +54,16 @@ const H = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "",
     // il bottone quei 32px sarebbero un buco che nessuno occupa, e con un valore
     // lungo il testo si accorcerebbe per far posto a niente.
     b && "pr-8"
-  ), $ = o(a && "h-11", f && "h-8"), G = a ? "lg" : "sm", S = {
+  ), S = o(a && "h-11", f && "h-8"), M = a ? "lg" : "sm", C = {
     "data-grid-filter-editor-control": u,
     ...c === void 0 ? {} : { "data-grid-filter-row-value": c }
-  }, P = "block w-full", h = {
-    "aria-label": v,
-    placeholder: d.filters.value,
+  }, j = "block w-full", h = {
+    "aria-label": $,
+    placeholder: n.filters.value,
     searchable: !0,
-    searchPlaceholder: d.filters.searchPlaceholder,
-    emptyPlaceholder: d.notFoundMessage,
+    searchPlaceholder: n.filters.searchPlaceholder,
+    emptyPlaceholder: n.notFoundMessage,
+    portalContainer: N,
     size: a ? "lg" : "sm",
     // ⚠️ L'ALTEZZA «touch» ARRIVA DA QUI E NON DA `size`: il gradino più alto
     // del primitivo è `lg`, cioè 40px, e il criterio 4 del compositore pretende
@@ -70,14 +72,14 @@ const H = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "",
     // questa adozione NON ha richiesto di toccare `app-select.tsx`.
     className: o("w-full", a && "h-11")
   }, y = (r) => ({
-    ...S,
+    ...C,
     // Zero scelte su un editor a lista è una dichiarazione INCOMPLETA della
     // colonna (`normalizeOptions(undefined)` restituisce `[]`, non `undefined`):
     // si marca, non si ripiega su un campo di testo — che rimetterebbe in piedi
     // il difetto del criterio 1.
     "data-grid-filter-editor-empty": r ? "" : void 0,
-    className: P
-  }), M = (() => {
+    className: j
+  }), E = (() => {
     switch (e.editor) {
       case "text":
       case "number":
@@ -85,13 +87,13 @@ const H = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "",
           "input",
           {
             type: e.editor === "number" ? "number" : "text",
-            ...S,
-            "aria-label": v,
-            value: H(t),
+            ...C,
+            "aria-label": $,
+            value: Y(t),
             onChange: (r) => l(
               e.editor !== "number" ? r.target.value : r.target.value === "" ? void 0 : Number(r.target.value)
             ),
-            className: o(z, $)
+            className: o(z, S)
           }
         );
       case "boolean":
@@ -101,8 +103,8 @@ const H = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "",
             ...h,
             multiple: !1,
             options: [
-              { value: "true", label: d.booleanOperators.true },
-              { value: "false", label: d.booleanOperators.false }
+              { value: "true", label: n.booleanOperators.true },
+              { value: "false", label: n.booleanOperators.false }
             ],
             value: t === !0 ? "true" : t === !1 ? "false" : void 0,
             onValueChange: (r) => l(r === void 0 ? void 0 : r === "true")
@@ -111,17 +113,18 @@ const H = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "",
       case "date":
       case "datetime":
         return /* @__PURE__ */ i(
-          E,
+          R,
           {
             "data-testid": u,
             showTime: e.editor === "datetime",
-            size: G,
-            value: I(t),
-            onChange: (r) => l(X(r, e.editor === "datetime")),
+            size: M,
+            value: q(t),
+            onChange: (r) => l(B(r, e.editor === "datetime")),
             clearable: !0,
+            portalContainer: N,
             wrpClassName: o(s && "w-full"),
             className: o(
-              $,
+              S,
               a && !s && "w-40",
               f && !s && "w-32",
               s && "w-full"
@@ -158,34 +161,35 @@ const H = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "",
       }
     }
   })();
-  return /* @__PURE__ */ j(
+  return /* @__PURE__ */ O(
     "span",
     {
+      ref: F,
       "data-grid-filter-editor": u,
       "data-grid-filter-editor-kind": e.editor,
       "data-grid-filter-editor-type": e.filterType,
-      "data-grid-filter-editor-arity": N,
+      "data-grid-filter-editor-arity": v,
       className: o(
         "inline-flex items-stretch",
         s && "flex w-full",
         b && "relative",
-        C
+        D
       ),
       children: [
-        M,
+        E,
         b && /* @__PURE__ */ i(
           "button",
           {
             type: "button",
             "data-grid-filter-clear": u,
-            "aria-label": `${d.filters.removeFilterNamed ?? T.filters.removeFilterNamed}: ${p}`,
+            "aria-label": `${n.filters.removeFilterNamed ?? T.filters.removeFilterNamed}: ${p}`,
             onClick: w,
             className: o(
               g.focusRing,
               g.radius.default,
               "text-d-muted-foreground hover:text-d-foreground absolute top-1/2 right-1 flex size-6 -translate-y-1/2 cursor-pointer items-center justify-center"
             ),
-            children: /* @__PURE__ */ i(O, { name: "X", size: "xs", "aria-hidden": "true" })
+            children: /* @__PURE__ */ i(V, { name: "X", size: "xs", "aria-hidden": "true" })
           }
         )
       ]
@@ -193,5 +197,5 @@ const H = (e) => typeof e == "string" || typeof e == "number" ? String(e) : "",
   );
 };
 export {
-  _ as GridFilterValueEditor
+  re as GridFilterValueEditor
 };