@ogcio/design-system-react 1.16.0 → 1.17.1

package/dist/accordion/accordion-item.js

@@ -33,7 +33,6 @@ const I = h({
         onKeyDown: (x) => {
           x.key === "Enter" && !e && a(!o);
         },
-        "aria-expanded": o,
         tabIndex: 0,
         className: "gi-accordion",
         children: /* @__PURE__ */ d(

package/dist/alert/alert.d.ts

@@ -82,8 +82,9 @@ type AlertProps = {
     children?: ReactNode;
     dismissible?: boolean;
     dataTestid?: string;
+    className?: string;
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function Alert({ title, children, variant, dismissible, onClose, dataTestid, }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+declare function Alert({ title, children, variant, dismissible, onClose, dataTestid, className, }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
 export { Alert, alertVariants };
 export type { AlertProps };

package/dist/alert/alert.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useState as D } from "react";
-import { c as h } from "../index-CB-zPpNk.js";
-import { cn as v } from "../cn.js";
-import { translate as k } from "../i18n/utility.js";
-import { Icon as w } from "../icon/icon.js";
-import { IconButton as N } from "../icon-button/icon-button.js";
-const V = h({
+import { useState as h } from "react";
+import { c as v } from "../index-CB-zPpNk.js";
+import { cn as k } from "../cn.js";
+import { translate as w } from "../i18n/utility.js";
+import { Icon as N } from "../icon/icon.js";
+import { IconButton as V } from "../icon-button/icon-button.js";
+const x = v({
   slots: {
     base: "gi-alert-base",
     baseDismissible: "gi-alert-base-dismissible",
@@ -30,16 +30,16 @@ const V = h({
       },
       warning: {
         base: "gi-alert-warning",
-        baseDismissible: "gi-alert-success"
+        baseDismissible: "gi-alert-warning"
       }
     }
   },
   defaultVariants: {
     variant: "info"
   }
-}), x = ({ variant: e }) => {
+}), I = ({ variant: i }) => {
   let s;
-  switch (e) {
+  switch (i) {
     case "warning": {
       s = "warning";
       break;
@@ -57,50 +57,51 @@ const V = h({
   }
   return s;
 };
-function _({
-  title: e,
+function q({
+  title: i,
   children: s,
-  variant: i = "info",
+  variant: a = "info",
   dismissible: t,
-  onClose: a,
-  dataTestid: l
+  onClose: e,
+  dataTestid: l,
+  className: c
 }) {
-  const [c, o] = D(!1), { base: m, heading: d, container: b, dismiss: g, baseDismissible: f } = V({
-    variant: i
-  }), u = t ? f : m;
-  return c ? null : /* @__PURE__ */ n(
+  const [o, m] = h(!1), { base: d, heading: g, container: b, dismiss: f, baseDismissible: u } = x({
+    variant: a
+  }), p = t ? u : d;
+  return o ? null : /* @__PURE__ */ n(
     "div",
     {
-      className: v(u(), "gi-not-prose"),
+      className: k(p(), c, "gi-not-prose"),
       "data-testid": l,
       role: "alert",
       "aria-live": "assertive",
       children: [
         /* @__PURE__ */ r(
-          w,
+          N,
           {
-            icon: x({ variant: i }),
+            icon: I({ variant: a }),
             ariaHidden: !0,
             className: "gi-alert-icon",
-            "data-variant": i
+            "data-variant": a
           }
         ),
         /* @__PURE__ */ n("div", { className: b(), children: [
-          /* @__PURE__ */ r("p", { className: d(), children: e }),
+          /* @__PURE__ */ r("p", { className: g(), children: i }),
           s
         ] }),
         t && /* @__PURE__ */ r(
-          N,
+          V,
           {
-            onClick: (p) => {
-              o(!0), a == null || a(p);
+            onClick: (D) => {
+              m(!0), e == null || e(D);
             },
-            className: g(),
+            className: f(),
             size: "small",
             appearance: "dark",
             variant: "flat",
             icon: { icon: "close" },
-            "aria-label": k("alert.dismissAlert", {
+            "aria-label": w("alert.dismissAlert", {
               defaultValue: "Dismiss alert"
             })
           }
@@ -110,6 +111,6 @@ function _({
   );
 }
 export {
-  _ as Alert,
-  V as alertVariants
+  q as Alert,
+  x as alertVariants
 };

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 {};