@ogcio/design-system-react 1.16.0 → 1.17.0

package/dist/autocomplete/use-autocomplete-controller.js

@@ -1,13 +1,14 @@
 import { l as F } from "../lodash-D1c5hFAM.js";
-import { useRef as g, useMemo as G, Children as h, useReducer as X, useEffect as A, isValidElement as C, cloneElement as Y } from "react";
-import { useScrollHighlightedItem as j } from "../hooks/use-scroll-highlighted-item.js";
+import { useRef as g, useMemo as G, Children as C, useReducer as X, useEffect as A, isValidElement as h } from "react";
+import { useScrollHighlightedItem as Y } from "../hooks/use-scroll-highlighted-item.js";
+import { safeCloneElement as j } from "../utils/utilities.js";
 import { AUTOCOMPLETE_ACTIONS as k } from "./types.js";
 const {
-  ON_RESET: R,
+  ON_RESET: x,
   ON_SELECT_ITEM: q,
   SET_INPUT_VALUE: P,
   SET_IS_OPEN: v,
-  SET_OPTIONS: T,
+  SET_OPTIONS: E,
   TOGGLE_CLEAR_BUTTON: U,
   SET_VALUE: w,
   SET_HIGHLIGHTED_INDEX: S,
@@ -18,7 +19,7 @@ const {
       return { ...e, isOpen: t.payload };
     case P:
       return { ...e, inputValue: t.payload };
-    case T:
+    case E:
       return {
         ...e,
         autocompleteOptions: t.payload || []
@@ -30,7 +31,7 @@ const {
         ...e,
         isClearButtonEnabled: t.payload || !!e.inputValue
       };
-    case R:
+    case x:
       return {
         ...e,
         value: "",
@@ -55,26 +56,26 @@ const {
   }
 }, J = (e) => {
   var n, p;
-  const t = ((n = e == null ? void 0 : e.type) == null ? void 0 : n.componentType) || ((p = e == null ? void 0 : e.props) == null ? void 0 : p.__mdxType);
-  return C(e) && (t === "AutocompleteItem" || t === "AutocompleteGroupItem");
-}, N = (e, t) => {
+  const t = ((n = e == null ? void 0 : e.type) == null ? void 0 : n.componentType) || ((p = e == null ? void 0 : e.props) == null ? void 0 : p.__type);
+  return h(e) && (t === "AutocompleteItem" || t === "AutocompleteGroupItem");
+}, B = (e, t) => {
   var s, a;
   const n = ((s = e.props.children) == null ? void 0 : s.toString().toLowerCase()) || "", p = (a = e.props.value) == null ? void 0 : a.toLowerCase(), l = t.toLowerCase();
   return n.includes(l) || p.includes(l);
-}, V = (e) => h.toArray(e).filter((t) => J(t)) || [], B = (e, t) => {
-  var p, l, s, a, E, d;
+}, V = (e) => C.toArray(e).filter((t) => J(t)) || [], R = (e, t) => {
+  var p, l, s, a, I, f;
   const n = V(e);
-  for (const c of n) {
-    const I = ((p = c.type) == null ? void 0 : p.componentType) || ((l = c.props) == null ? void 0 : l.__mdxType);
-    if (((s = c.props) == null ? void 0 : s.value) === t)
-      return ((a = c.props.children) == null ? void 0 : a.toString()) || "";
-    if (I === "AutocompleteGroupItem") {
-      const u = h.toArray(c.props.children).filter(
-        (y) => C(y)
+  for (const y of n) {
+    const T = ((p = y.type) == null ? void 0 : p.componentType) || ((l = y.props) == null ? void 0 : l.__type);
+    if (((s = y.props) == null ? void 0 : s.value) === t)
+      return ((a = y.props.children) == null ? void 0 : a.toString()) || "";
+    if (T === "AutocompleteGroupItem") {
+      const u = C.toArray(y.props.children).filter(
+        (c) => h(c)
       );
-      for (const y of u)
-        if (((E = y.props) == null ? void 0 : E.value) === t)
-          return ((d = y.props.children) == null ? void 0 : d.toString()) || "";
+      for (const c of u)
+        if (((I = c.props) == null ? void 0 : I.value) === t)
+          return ((f = c.props.children) == null ? void 0 : f.toString()) || "";
     }
   }
   return "";
@@ -83,10 +84,10 @@ const {
   return t != null && t.length && t.every(
     (p) => {
       var l;
-      return p.props.__mdxType === "AutocompleteGroupItem" || ((l = p.type) == null ? void 0 : l.componentType) === "AutocompleteGroupItem";
+      return p.props.__type === "AutocompleteGroupItem" || ((l = p.type) == null ? void 0 : l.componentType) === "AutocompleteGroupItem";
     }
   ) ? "AutocompleteGroupItem" : "AutocompleteItem";
-}, oe = ({
+}, pe = ({
   children: e,
   defaultValue: t = "",
   isOpen: n = !1,
@@ -94,43 +95,43 @@ const {
   onOpen: l,
   onClose: s,
   onChange: a,
-  value: E
+  value: I
 }) => {
-  const d = g(null), c = g(null), I = g(!1), u = G(
+  const f = g(null), y = g(null), T = g(!1), u = G(
     () => V(e || []),
     [e]
-  ), y = () => {
+  ), c = () => {
     var i;
-    return (i = d.current) == null ? void 0 : i.focus();
-  }, f = G(() => K(e), [e]), [r, o] = X(z, null, () => ({
+    return (i = f.current) == null ? void 0 : i.focus();
+  }, d = G(() => K(e), [e]), [r, o] = X(z, null, () => ({
     isOpen: !!n,
-    value: E,
+    value: I,
     inputValue: t,
     autocompleteOptions: u,
     isClearButtonEnabled: !1,
     highlightedIndex: -1,
-    optionType: f
+    optionType: d
   }));
-  j(c, r.highlightedIndex), A(() => {
-    o({ type: T, payload: u });
+  Y(y, r.highlightedIndex), A(() => {
+    o({ type: E, payload: u });
   }, [u]), A(() => {
-    o({ type: H, payload: f });
-  }, [f]), A(() => {
-    if (!I.current) {
-      I.current = !0;
+    o({ type: H, payload: d });
+  }, [d]), A(() => {
+    if (!T.current) {
+      T.current = !0;
       return;
     }
-    r.inputValue === "" && r.value === "" && y();
+    r.inputValue === "" && r.value === "" && c();
   }, [r.isClearButtonEnabled]), A(() => {
     if (r.isOpen)
-      l == null || l(), y(), o({ type: T, payload: u });
+      l == null || l(), c(), o({ type: E, payload: u });
     else {
       s == null || s();
-      const i = B(e, r.value);
+      const i = R(e, r.value);
       i && r.value ? (o({
         type: P,
         payload: i
-      }), o({ type: v, payload: !1 })) : p || (o({ type: R }), a == null || a("")), o({ type: U });
+      }), o({ type: v, payload: !1 })) : p || (o({ type: x }), a == null || a("")), o({ type: U });
     }
   }, [r.isOpen]);
   const M = G(
@@ -138,34 +139,34 @@ const {
       if (i) {
         const _ = u.map((m) => {
           var L, b;
-          const D = ((L = m.type) == null ? void 0 : L.componentType) || ((b = m.props) == null ? void 0 : b.__mdxType);
-          if (f === "AutocompleteGroupItem" && D === "AutocompleteGroupItem") {
-            const x = h.toArray(
+          const D = ((L = m.type) == null ? void 0 : L.componentType) || ((b = m.props) == null ? void 0 : b.__type);
+          if (d === "AutocompleteGroupItem" && D === "AutocompleteGroupItem") {
+            const N = C.toArray(
               m.props.children
-            ).filter((O) => C(O)).filter(
-              (O) => N(O, i)
+            ).filter((O) => h(O)).filter(
+              (O) => B(O, i)
             );
-            return x.length > 0 ? Y(m, { children: x }) : null;
-          } else if (f === "AutocompleteItem")
-            return N(m, i) ? m : null;
+            return N.length > 0 ? j(m, { children: N }) : null;
+          } else if (d === "AutocompleteItem")
+            return B(m, i) ? m : null;
           return null;
         }).filter(Boolean);
-        o({ type: T, payload: _ }), o({ type: S, payload: -1 }), (!r.isOpen && !r.value || (_ == null ? void 0 : _.length) === 0) && o({ type: v, payload: !0 });
+        o({ type: E, payload: _ }), o({ type: S, payload: -1 }), (!r.isOpen && !r.value || (_ == null ? void 0 : _.length) === 0) && o({ type: v, payload: !0 });
       } else
-        o({ type: w, payload: "" }), o({ type: T, payload: u }), o({ type: S, payload: -1 });
+        o({ type: w, payload: "" }), o({ type: E, payload: u }), o({ type: S, payload: -1 });
     }, 500),
     [u, r.isOpen, r.value, p]
   );
   return {
     state: r,
     dispatch: o,
-    inputRef: d,
-    listRef: c,
+    inputRef: f,
+    listRef: y,
     validChildren: u,
-    getOptionLabelByValue: B,
+    getOptionLabelByValue: R,
     debouncedFilter: M
   };
 };
 export {
-  oe as useAutocompleteController
+  pe as useAutocompleteController
 };

package/dist/breadcrumbs/breadcrumbs.js

@@ -1,38 +1,44 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { translate as o } from "../i18n/utility.js";
-import { Icon as l } from "../icon/icon.js";
-import { Link as t } from "../link/link.js";
-const p = () => /* @__PURE__ */ r("div", { "aria-hidden": "true", children: /* @__PURE__ */ r(l, { className: "gi-text-gray-700", icon: "more_horiz" }) }), c = ({
+import { translate as c } from "../i18n/utility.js";
+import { Icon as t } from "../icon/icon.js";
+import { Link as o } from "../link/link.js";
+const h = () => /* @__PURE__ */ r("div", { "aria-hidden": "true", children: /* @__PURE__ */ r(t, { className: "gi-text-gray-700", icon: "more_horiz" }) }), n = ({
   href: e,
   children: a,
-  asChild: i,
-  ...s
+  asChild: s,
+  ...i
 }) => /* @__PURE__ */ r(
-  t,
+  o,
   {
     noColor: !0,
-    asChild: i,
+    asChild: s,
     href: e,
     "aria-label": `${a} page`,
     size: "sm",
     className: "gi-breadcrumbs-link",
-    ...s,
+    ...i,
     children: a
   }
-), f = (e) => /* @__PURE__ */ r(c, { ...e, "aria-current": "page" }), g = ({ children: e, iconStart: a }) => /* @__PURE__ */ m(
-  "nav",
-  {
-    "aria-label": o("breadcrumbs.breadcrumbs", { defaultValue: "Breadcrumbs" }),
-    className: "gi-breadcrumbs",
-    children: [
-      a && /* @__PURE__ */ r(l, { "aria-label": "chevron-left", icon: "chevron_left", size: "sm" }),
-      /* @__PURE__ */ r("ol", { role: "list", children: Array.isArray(e) ? e.map((i, s) => /* @__PURE__ */ r("li", { role: "listitem", children: i }, `breadcrumb_item_${s}`)) : /* @__PURE__ */ r("li", { role: "listitem", children: e }) })
-    ]
-  }
-);
+), f = (e) => /* @__PURE__ */ r(n, { ...e, "aria-current": "page" }), b = () => /* @__PURE__ */ r("span", { className: "gi-breadcrumbs-separator", children: "/" }), B = ({ children: e, iconStart: a }) => {
+  const s = Array.isArray(e) ? e : [e];
+  return /* @__PURE__ */ r(
+    "nav",
+    {
+      "aria-label": c("breadcrumbs.breadcrumbs", { defaultValue: "Breadcrumbs" }),
+      className: "gi-breadcrumbs",
+      children: /* @__PURE__ */ m("ol", { role: "list", children: [
+        a && /* @__PURE__ */ r("li", { role: "listitem", className: "gi-pr-1", children: /* @__PURE__ */ r(t, { "aria-label": "chevron-left", icon: "chevron_left", size: "sm" }) }),
+        s.map((i, l) => /* @__PURE__ */ m("li", { role: "listitem", children: [
+          i,
+          l < s.length - 1 && /* @__PURE__ */ r(b, {})
+        ] }, `breadcrumb_item_${l}`))
+      ] })
+    }
+  );
+};
 export {
   f as BreadcrumbCurrentLink,
-  p as BreadcrumbEllipsis,
-  c as BreadcrumbLink,
-  g as Breadcrumbs
+  h as BreadcrumbEllipsis,
+  n as BreadcrumbLink,
+  B as Breadcrumbs
 };

package/dist/card/card-next.js

@@ -60,7 +60,7 @@ const D = ({ children: e }) => {
     var d, C;
     if (!f(t))
       return;
-    (((d = t == null ? void 0 : t.type) == null ? void 0 : d.componentType) || ((C = t.props) == null ? void 0 : C.__mdxType)) === "CardTag" ? n.push(t) : a.push(t);
+    (((d = t == null ? void 0 : t.type) == null ? void 0 : d.componentType) || ((C = t.props) == null ? void 0 : C.__type)) === "CardTag" ? n.push(t) : a.push(t);
   }), /* @__PURE__ */ r(o.Provider, { value: !0, children: /* @__PURE__ */ g("div", { className: "gi-card-header", children: [
     /* @__PURE__ */ r("div", { className: "gi-card-heading", children: a }),
     n

package/dist/data-table/data-table-footer.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface DataTableFooterTypeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+interface DataTableFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export type { DataTableFooterProps, DataTableFooterTypeProps };
+export declare const DataTableFooterStart: React.FC<DataTableFooterTypeProps>;
+export declare const DataTableFooterCenter: React.FC<DataTableFooterTypeProps>;
+export declare const DataTableFooterEnd: React.FC<DataTableFooterTypeProps>;
+export declare const DataTableFooter: React.FC<DataTableFooterProps>;

package/dist/data-table/data-table-footer.js

@@ -0,0 +1,66 @@
+import { jsx as s, jsxs as x } from "react/jsx-runtime";
+import l from "react";
+import { cn as i } from "../cn.js";
+const o = (e, t) => l.isValidElement(e) && e.type === t, r = (e, t, n) => e ? /* @__PURE__ */ s(
+  "div",
+  {
+    className: i(
+      t,
+      n,
+      e.props.className
+    ),
+    style: e.props.style,
+    children: e.props.children
+  }
+) : null, y = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ s("div", { ...t, children: e });
+y.displayName = "DataTableFooterStart";
+const F = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ s("div", { ...t, children: e });
+F.displayName = "DataTableFooterCenter";
+const T = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ s("div", { ...t, children: e });
+T.displayName = "DataTableFooterEnd";
+const E = ({
+  children: e,
+  className: t,
+  ...n
+}) => {
+  const D = l.useMemo(() => {
+    let f = null, u = null, b = null;
+    return l.Children.forEach(e, (a) => {
+      o(a, y) ? f = a : o(a, F) ? u = a : o(a, T) && (b = a);
+    }), { start: f, center: u, end: b };
+  }, [e]), { start: c, center: d, end: m } = D, p = !!!c && !!!d && !!m, g = "gi-grow gi-basis-0 gi-min-w-0", C = `${g} gi-text-center`, S = i("gi-min-w-0", {
+    "gi-basis-1/2 gi-text-right": !p
+  });
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      ...n,
+      className: i(
+        "gi-flex gi-flex-row gi-w-full gi-items-center gi-py-2",
+        p ? "gi-justify-end" : "gi-gap-2",
+        t
+      ),
+      children: [
+        r(c, g),
+        r(d, C),
+        r(m, S)
+      ]
+    }
+  );
+};
+E.displayName = "DataTableFooter";
+export {
+  E as DataTableFooter,
+  F as DataTableFooterCenter,
+  T as DataTableFooterEnd,
+  y as DataTableFooterStart
+};

package/dist/data-table/data-table-header.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+interface DataTableHeaderTypeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+interface DataTableHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    showHeader?: boolean;
+    showFilter?: boolean;
+}
+export declare const DataTableHeader: React.FC<DataTableHeaderProps>;
+export declare const DataTableHeaderSearch: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderActions: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilter: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterTitle: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterContent: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterContentTitle: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterActions: React.FC<DataTableHeaderTypeProps>;
+type DataTableHeaderFilterListProps = {
+    filters: {
+        id: string;
+        label: string;
+    }[];
+    onRemove?: (id: string) => void;
+    onClear?: () => void;
+    className?: string;
+};
+export declare const DataTableHeaderFilterList: React.FC<DataTableHeaderFilterListProps>;
+export {};

package/dist/data-table/data-table-header.js

@@ -0,0 +1,157 @@
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
+import p from "react";
+import { Button as A } from "../button/button.js";
+import { Chip as C } from "../chip/chip.js";
+import { cn as i } from "../cn.js";
+import { Heading as L } from "../heading/heading.js";
+import { translate as N } from "../i18n/utility.js";
+const s = (e, a) => p.isValidElement(e) && e.type === a, F = ({
+  children: e,
+  className: a,
+  showHeader: t = !0,
+  showFilter: d = !0,
+  ...c
+}) => {
+  const { search: n, filter: O, filterList: b, actions: P } = p.useMemo(() => {
+    let u = null, y = null, H = null, D = null;
+    return p.Children.forEach(e, (r) => {
+      s(r, m) ? u = r : s(r, f) ? y = r : s(r, T) ? H = r : s(r, g) && (D = r);
+    }), { search: u, filter: y, filterList: H, actions: D };
+  }, [e]);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ...c,
+      className: i(
+        "gi-flex gi-flex-wrap gi-items-center gi-w-full gi-gap-4 gi-mb-2",
+        a
+      ),
+      children: [
+        t && /* @__PURE__ */ o("div", { className: "gi-flex gi-flex-1 gi-gap-4 gi-items-center", children: [
+          n,
+          O,
+          P
+        ] }),
+        b && d && /* @__PURE__ */ l("div", { className: "gi-w-full", children: b })
+      ]
+    }
+  );
+}, m = ({
+  children: e,
+  className: a,
+  ...t
+}) => /* @__PURE__ */ l("div", { className: i("gi-flex gi-flex-1", a), ...t, children: e }), g = ({
+  children: e,
+  className: a,
+  ...t
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: i("gi-flex gi-items-center gi-ml-auto gi-gap-4", a),
+    ...t,
+    children: e
+  }
+), f = ({
+  children: e,
+  className: a,
+  ...t
+}) => /* @__PURE__ */ l("div", { className: i("gi-flex gi-items-center", a), ...t, children: e }), x = ({
+  children: e,
+  className: a,
+  ...t
+}) => /* @__PURE__ */ l("div", { className: i("gi-border-b gi-px-6 gi-py-4", a), ...t, children: /* @__PURE__ */ l(L, { as: "h6", children: e }) }), v = ({ children: e, className: a, ...t }) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: i("gi-flex gi-flex-col gi-gap-2 gi-px-6", a),
+    ...t,
+    children: e
+  }
+), h = ({ children: e, className: a, ...t }) => /* @__PURE__ */ l("div", { className: i("gi-py-2 gi-font-medium", a), ...t, children: e }), j = ({ children: e, className: a, ...t }) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: i("gi-flex gi-justify-end gi-gap-2 gi-p-6", a),
+    ...t,
+    children: e
+  }
+), T = ({ filters: e, onRemove: a, onClear: t, className: d, ...c }) => !e || e.length === 0 ? null : /* @__PURE__ */ o(
+  "div",
+  {
+    className: i("gi-flex gi-items-center gi-gap-2 gi-flex-wrap", d),
+    ...c,
+    children: [
+      /* @__PURE__ */ l("span", { className: "gi-text-sm", children: N("dataTableHeader.filtersApplied", {
+        length: e.length,
+        defaultValue: `Filters applied ${e.length}:`
+      }) }),
+      e.map((n) => /* @__PURE__ */ l(
+        C,
+        {
+          onClose: () => a == null ? void 0 : a(n.id),
+          label: n.label
+        },
+        n.id
+      )),
+      /* @__PURE__ */ l(
+        A,
+        {
+          appearance: "dark",
+          size: "medium",
+          variant: "flat",
+          onClick: () => {
+            t == null || t();
+          },
+          children: N("dataTableHeader.clearAllFilters", {
+            defaultValue: "Clear all filters"
+          })
+        }
+      )
+    ]
+  }
+);
+F.displayName = "DataTableHeader";
+m.displayName = "DataTableHeaderSearch";
+g.displayName = "DataTableHeaderActions";
+f.displayName = "DataTableHeaderFilter";
+T.displayName = "DataTableHeaderFilterList";
+x.displayName = "DataTableHeaderFilterTitle";
+v.displayName = "DataTableHeaderFilterContent";
+h.displayName = "DataTableHeaderFilterContentTitle";
+j.displayName = "DataTableHeaderFilterActions";
+Object.defineProperty(F, "componentType", {
+  value: "DataTableHeader"
+});
+Object.defineProperty(m, "componentType", {
+  value: "DataTableHeaderSearch"
+});
+Object.defineProperty(g, "componentType", {
+  value: "DataTableHeaderActions"
+});
+Object.defineProperty(f, "componentType", {
+  value: "DataTableHeaderFilter"
+});
+Object.defineProperty(T, "componentType", {
+  value: "DataTableHeaderFilterList"
+});
+Object.defineProperty(x, "componentType", {
+  value: "DataTableHeaderFilterTitle"
+});
+Object.defineProperty(v, "componentType", {
+  value: "DataTableHeaderFilterContent"
+});
+Object.defineProperty(h, "componentType", {
+  value: "DataTableHeaderFilterContentTitle"
+});
+Object.defineProperty(j, "componentType", {
+  value: "DataTableHeaderFilterActions"
+});
+export {
+  F as DataTableHeader,
+  g as DataTableHeaderActions,
+  f as DataTableHeaderFilter,
+  j as DataTableHeaderFilterActions,
+  v as DataTableHeaderFilterContent,
+  h as DataTableHeaderFilterContentTitle,
+  T as DataTableHeaderFilterList,
+  x as DataTableHeaderFilterTitle,
+  m as DataTableHeaderSearch
+};

package/dist/data-table/data-table-selected-rows.d.ts

@@ -0,0 +1,6 @@
+export type DataTableSelectedRowsBannerProps = {
+    selectedCount: number;
+    actions?: React.ReactNode;
+    className?: string;
+};
+export declare const DataTableSelectedRowsBanner: React.FC<DataTableSelectedRowsBannerProps>;

package/dist/data-table/data-table-selected-rows.js

@@ -0,0 +1,23 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { cn as g } from "../cn.js";
+import { translate as l } from "../i18n/utility.js";
+const o = ({ selectedCount: e, actions: t, className: a, ...s }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: g(
+      "gi-w-full gi-flex gi-items-center gi-justify-between gi-px-3 gi-py-2 gi-bg-gray-900 gi-rounded-md",
+      a
+    ),
+    ...s,
+    children: [
+      /* @__PURE__ */ i("span", { className: "gi-text-sm gi-font-medium gi-text-white", children: l("dataTable.selectedRows", {
+        count: e,
+        defaultValue: ` (${e} Row${e === 1 ? "" : "s"} selected)`
+      }) }),
+      /* @__PURE__ */ i("div", { className: "gi-flex gi-gap-4", children: t })
+    ]
+  }
+);
+export {
+  o as DataTableSelectedRowsBanner
+};

package/dist/{data-grid → data-table}/tanstack/tanstack-helpers.d.ts

@@ -1,4 +1,5 @@
 export type Person = {
+    id: string;
     firstName: string;
     lastName: string;
     email: string;