@ogcio/design-system-react 1.29.0 → 1.31.0

package/dist/chip/chip.js

@@ -1,37 +1,59 @@
 "use client";
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
 import { useId as l } from "react";
-import { cn as p } from "../cn.js";
-import { translate as c } from "../i18n/utility.js";
-import { Icon as s } from "../icon/icon.js";
-const m = ({ label: i, className: t, onClose: n = () => null }) => {
-  const o = `chip-description-${l()}`, a = (e) => {
-    ["Enter", " "].includes(e.key) && (e.preventDefault(), n(e));
+import { c as p } from "../index-CB-zPpNk.js";
+import { cn as g } from "../cn.js";
+import { translate as t } from "../i18n/utility.js";
+import { Icon as u } from "../icon/icon.js";
+const d = ({ label: i, className: c, onClose: r = () => null }) => {
+  const s = `chip-description-${l()}`, n = (e) => {
+    ["Enter", " "].includes(e.key) && (e.preventDefault(), r(e));
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: p(t, "gi-chip"),
-      "aria-label": c("chip.label", { label: i, defaultValue: `chip: ${i}` }),
-      "aria-describedby": o,
+      className: g(c, m()),
+      "aria-label": t("chip.label", { label: i, defaultValue: `chip: ${i}` }),
+      "aria-describedby": s,
       tabIndex: 0,
-      onKeyDown: a,
+      onKeyDown: n,
       children: [
-        /* @__PURE__ */ r("span", { id: o, children: i }),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ o("span", { id: s, children: i }),
+        /* @__PURE__ */ o(
           "div",
           {
             role: "button",
-            "aria-label": c("chip.removeChip", { defaultValue: "remove chip" }),
-            onClick: n,
-            children: /* @__PURE__ */ r(s, { icon: "close", size: "sm" })
+            "aria-label": t("chip.removeChip", { defaultValue: "remove chip" }),
+            onClick: r,
+            children: /* @__PURE__ */ o(u, { icon: "close", size: "sm" })
           }
         )
       ]
     }
   );
 };
-m.displayName = "Chip";
+d.displayName = "Chip";
+const m = p({
+  base: [
+    "gi-flex",
+    "gi-items-center",
+    "gi-gap-1",
+    "gi-pl-1.5",
+    "gi-pr-1",
+    "gi-py-0.5",
+    "gi-bg-gray-100",
+    "gi-w-fit",
+    "gi-rounded-sm",
+    "gi-cursor-default",
+    "gi-text-xs",
+    "hover:gi-bg-gray-200",
+    "focus:gi-bg-gray-200",
+    "focus:gi-outline",
+    "focus:gi-outline-gray-950",
+    "focus:gi-outline-2",
+    "focus:gi-shadow-[inset_0_0_0_1px_white,0_0_0_5px_var(--gieds-color-yellow-400)]"
+  ]
+});
 export {
-  m as Chip
+  d as Chip
 };

package/dist/combo-box/combo-box.js

@@ -1,17 +1,10 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as i } from "../cn.js";
-const e = ({
+import { jsx as r } from "react/jsx-runtime";
+import { cn as a } from "../cn.js";
+const x = ({
   children: o,
   className: t,
-  dataTestid: r
-}) => /* @__PURE__ */ m(
-  "div",
-  {
-    className: i("gi-combobox-container", t),
-    "data-testid": r,
-    children: o
-  }
-);
+  dataTestid: m
+}) => /* @__PURE__ */ r("div", { className: a("gi-max-w-[400px]", t), "data-testid": m, children: o });
 export {
-  e as Combobox
+  x as Combobox
 };

package/dist/combo-box/dropdown-item.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import { useState as u, useId as j, useEffect as q } from "react";
 import { Button as B } from "../button/button.js";
 import { cn as x } from "../cn.js";
@@ -11,33 +11,33 @@ import { InputText as O } from "../input-text/input-text.js";
 import { Paragraph as y } from "../paragraph/paragraph.js";
 import { Tag as A, TagTypeEnum as F } from "../tag/tag.js";
 import { slugify as P } from "../utilities.js";
-const oo = ({
+const ee = ({
   children: c,
   noSearch: h,
   options: p,
   value: v,
-  defaultValue: k = [],
+  defaultValue: C = [],
   onChange: g,
   onSearch: l
 }) => {
-  const [m, C] = u(!1), [d, $] = u(""), [I, _] = u(!1), [T, V] = u(k), r = c ? `${P(`${c}-${j()}`)}` : "", w = v !== void 0, t = w ? v : T, z = () => [
+  const [m, k] = u(!1), [d, $] = u(""), [I, _] = u(!1), [T, V] = u(C), r = c ? `${P(`${c}-${j()}`)}` : "", w = v !== void 0, t = w ? v : T, z = () => [
     ...globalThis.window.document.querySelectorAll(
       `div.gi-combobox-checkbox.gi-combobox-key-${r}`
     )
   ];
   q(() => {
-    var a, i;
-    let o = 0;
-    const e = z();
-    for (const b of e) {
-      const f = (a = b.querySelector("label")) == null ? void 0 : a.textContent;
-      (i = f == null ? void 0 : f.toLowerCase()) != null && i.includes(d.toLowerCase()) ? b.style.display = "flex" : (b.style.display = "none", o++);
+    var s, i;
+    let e = 0;
+    const o = z();
+    for (const b of o) {
+      const f = (s = b.querySelector("label")) == null ? void 0 : s.textContent;
+      (i = f == null ? void 0 : f.toLowerCase()) != null && i.includes(d.toLowerCase()) ? b.style.display = "flex" : (b.style.display = "none", e++);
     }
-    _(o === p.length);
+    _(e === p.length);
   }, [d, p.length]);
-  const R = (o, e) => {
-    const a = e ? [...t || [], o] : (t || []).filter((i) => i !== o);
-    w || V(a), g == null || g(a);
+  const R = (e, o) => {
+    const s = o ? [...t || [], e] : (t || []).filter((i) => i !== e);
+    w || V(s), g == null || g(s);
   };
   return /* @__PURE__ */ n(
     "div",
@@ -52,18 +52,18 @@ const oo = ({
             variant: "flat",
             appearance: "dark",
             size: "large",
-            onClick: (o) => {
-              o.preventDefault(), C(!m);
+            onClick: (e) => {
+              e.preventDefault(), k(!m);
             },
             className: x("gi-combobox-toggle", {
               "gi-combobox-toggle-open": m
             }),
             children: [
               /* @__PURE__ */ n("div", { className: "gi-combobox-toggle-content", children: [
-                /* @__PURE__ */ s(y, { size: "md", children: c }),
-                (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ s(A, { type: F.Counter, text: t.length.toString() })
+                /* @__PURE__ */ a(y, { size: "md", children: c }),
+                (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ a(A, { type: F.Counter, text: t.length.toString() })
               ] }),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ a(
                 D,
                 {
                   className: x({ "gi-rotate-180": m }),
@@ -80,19 +80,19 @@ const oo = ({
             id: `${r}-search`,
             children: [
               !h && /* @__PURE__ */ n("div", { className: "gi-combobox-search", children: [
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ a(
                   O,
                   {
                     placeholder: N("dropdownItem.search", { defaultValue: "Search" }),
                     className: "gi-combobox-search-input",
                     value: d,
-                    onChange: (o) => {
-                      const e = o.target.value;
-                      $(e), l == null || l(e);
+                    onChange: (e) => {
+                      const o = e.target.value;
+                      $(o), l == null || l(o);
                     }
                   }
                 ),
-                d && /* @__PURE__ */ s(
+                d && /* @__PURE__ */ a(
                   E,
                   {
                     variant: "flat",
@@ -102,9 +102,8 @@ const oo = ({
                     onClick: () => {
                       l == null || l(""), $("");
                     },
-                    icon: {
-                      icon: "close"
-                    }
+                    icon: { icon: "close" },
+                    "aria-label": "Clear input"
                   }
                 )
               ] }),
@@ -115,29 +114,29 @@ const oo = ({
                     "gi-h-64": !h
                   }),
                   children: [
-                    I && /* @__PURE__ */ s(y, { className: "gi-combobox-checkbox-paragraph", children: N("dropdownItem.noResultFound", {
+                    I && /* @__PURE__ */ a(y, { className: "gi-combobox-checkbox-paragraph", children: N("dropdownItem.noResultFound", {
                       defaultValue: "No results found."
                     }) }),
-                    p.map((o, e) => {
-                      const a = t == null ? void 0 : t.includes(o.value);
-                      return /* @__PURE__ */ s(
+                    p.map((e, o) => {
+                      const s = t == null ? void 0 : t.includes(e.value);
+                      return /* @__PURE__ */ a(
                         "div",
                         {
                           className: `gi-combobox-checkbox gi-combobox-key-${r}`,
-                          children: /* @__PURE__ */ s(
+                          children: /* @__PURE__ */ a(
                             L,
                             {
-                              onChange: (i) => R(o.value, i.target.checked),
-                              checked: a,
-                              id: `${e}_${r}_${o.value}`,
-                              label: o.label,
-                              name: `${e}_${o.label}_${r}`,
-                              value: o.value,
+                              onChange: (i) => R(e.value, i.target.checked),
+                              checked: s,
+                              id: `${o}_${r}_${e.value}`,
+                              label: e.label,
+                              name: `${o}_${e.label}_${r}`,
+                              value: e.value,
                               size: "sm"
                             }
                           )
                         },
-                        `${e}_${r}_${o.value}`
+                        `${o}_${r}_${e.value}`
                       );
                     })
                   ]
@@ -151,5 +150,5 @@ const oo = ({
   );
 };
 export {
-  oo as DropdownItem
+  ee as DropdownItem
 };

package/dist/cookie-banner/cookie-banner.js

@@ -1,31 +1,39 @@
 "use client";
-import { jsx as e, Fragment as s, jsxs as o } from "react/jsx-runtime";
-import { Container as c } from "../container/container.js";
-const m = ({
-  showConsent: a = !0,
-  children: d,
-  accept: i,
-  reject: n,
-  cookieLink: r,
-  dataTestid: t
-}) => /* @__PURE__ */ e(s, { children: a && /* @__PURE__ */ e(
+import { jsx as i, Fragment as s, jsxs as t } from "react/jsx-runtime";
+import { Container as d } from "../container/container.js";
+const b = ({
+  showConsent: o = !0,
+  children: a,
+  accept: e,
+  reject: r,
+  cookieLink: n,
+  dataTestid: l
+}) => /* @__PURE__ */ i(s, { children: o && /* @__PURE__ */ i(
   "div",
   {
-    className: "gi-cookie-banner-container",
+    className: "gi-bg-gray-100",
     role: "dialog",
     "aria-labelledby": "cookie-banner-title",
     "aria-describedby": "cookie-banner-description",
-    "data-testid": t,
-    children: /* @__PURE__ */ e("div", { className: "gi-py-5", children: /* @__PURE__ */ o(c, { children: [
-      /* @__PURE__ */ e("div", { id: "cookie-banner-description", children: d }),
-      /* @__PURE__ */ o("div", { className: "gi-cookie-banner-buttons", children: [
-        i && i,
-        n && n,
-        r && r
-      ] })
+    "data-testid": l,
+    children: /* @__PURE__ */ i("div", { className: "gi-py-5", children: /* @__PURE__ */ t(d, { children: [
+      /* @__PURE__ */ i("div", { id: "cookie-banner-description", children: a }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: `
+                  gi-flex gi-gap-4 gi-items-center gi-flex-col xs:gi-flex-row gi-my-4 
+                  [&_button]:gi-w-full [&_button]:gi-justify-center [&_button]:xs:gi-w-auto`,
+          children: [
+            e && e,
+            r && r,
+            n && n
+          ]
+        }
+      )
     ] }) })
   }
 ) });
 export {
-  m as CookieBanner
+  b as CookieBanner
 };

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

@@ -1,66 +1,72 @@
-import { jsx as a, jsxs as E } from "react/jsx-runtime";
-import i from "react";
-import { cn as o } from "../cn.js";
-const r = (e, t) => i.isValidElement(e) && e.type === t, l = (e, t, s) => e ? /* @__PURE__ */ a(
-  "div",
-  {
-    className: o(
-      t,
-      s,
-      e.props.className
-    ),
-    style: e.props.style,
-    children: e.props.children
-  }
-) : null, T = ({
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import c from "react";
+import { c as x } from "../index-CB-zPpNk.js";
+import { cn as i } from "../cn.js";
+const b = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ a("div", { ...t, children: e });
-T.displayName = "DataTableFooterStart";
-const h = ({
+}) => /* @__PURE__ */ o("div", { ...t, children: e });
+b.displayName = "DataTableFooterStart";
+const S = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ a("div", { ...t, children: e });
-h.displayName = "DataTableFooterCenter";
-const D = ({
+}) => /* @__PURE__ */ o("div", { ...t, children: e });
+S.displayName = "DataTableFooterCenter";
+const y = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ a("div", { ...t, children: e });
-D.displayName = "DataTableFooterEnd";
-const v = ({
+}) => /* @__PURE__ */ o("div", { ...t, children: e });
+y.displayName = "DataTableFooterEnd";
+const C = ({
   children: e,
   className: t,
-  standalone: s = !1,
-  ...c
+  standalone: F = !1,
+  ...d
 }) => {
-  const S = i.useMemo(() => {
-    let g = null, y = null, F = null;
-    return i.Children.forEach(e, (n) => {
-      r(n, T) ? g = n : r(n, h) ? y = n : r(n, D) && (F = n);
-    }), { start: g, center: y, end: F };
-  }, [e]), { start: d, center: p, end: m } = S, f = !!!d && !!!p && !!m, b = "gi-data-table-footer-base", C = `${b} gi-text-center`, N = o("gi-min-w-0", {
-    "gi-basis-1/2 gi-text-right": !f
-  }), u = /* @__PURE__ */ E(
+  const h = c.useMemo(() => {
+    let n = null, r = null, u = null;
+    return c.Children.forEach(e, (a) => {
+      l(a, b) ? n = a : l(a, S) ? r = a : l(a, y) && (u = a);
+    }), { start: n, center: r, end: u };
+  }, [e]), { start: f, center: g, end: m } = h, D = !!!f && !!!g && !!m, { footer: T, baseSection: w, centerSection: E, endSection: N } = j({
+    onlyEnd: D
+  }), s = (n, r) => n ? /* @__PURE__ */ o(
     "div",
     {
-      className: o(
-        "gi-data-table-footer",
-        f ? "gi-justify-end" : "gi-gap-2",
-        t
-      ),
-      children: [
-        l(d, b),
-        l(p, C),
-        l(m, N)
-      ]
+      className: i(r, n.props.className),
+      style: n.props.style,
+      children: n.props.children
     }
-  );
-  return s ? /* @__PURE__ */ a("div", { ...c, className: o("gi-w-full gi-p-2", t), children: u }) : /* @__PURE__ */ a("tfoot", { ...c, children: /* @__PURE__ */ a("tr", { children: /* @__PURE__ */ a("td", { colSpan: 999, className: "gi-p-2", children: u }) }) });
+  ) : null, p = /* @__PURE__ */ v("div", { className: i(T(), t), children: [
+    s(f, w()),
+    s(g, E()),
+    s(m, N())
+  ] });
+  return F ? /* @__PURE__ */ o("div", { ...d, className: i("gi-w-full gi-p-2", t), children: p }) : /* @__PURE__ */ o("tfoot", { ...d, children: /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o("td", { colSpan: 999, className: "gi-p-2", children: p }) }) });
 };
-v.displayName = "DataTableFooter";
+C.displayName = "DataTableFooter";
+const j = x({
+  slots: {
+    footer: "gi-flex gi-flex-row gi-w-full gi-items-center",
+    baseSection: "gi-grow gi-basis-0 gi-min-w-0",
+    centerSection: "gi-grow gi-basis-0 gi-min-w-0 gi-text-center",
+    endSection: "gi-min-w-0"
+  },
+  variants: {
+    onlyEnd: {
+      true: {
+        footer: "gi-justify-end"
+      },
+      false: {
+        footer: "gi-gap-2",
+        endSection: "gi-basis-1/2 gi-text-right"
+      }
+    }
+  }
+}), l = (e, t) => c.isValidElement(e) && e.type === t;
 export {
-  v as DataTableFooter,
-  h as DataTableFooterCenter,
-  D as DataTableFooterEnd,
-  T as DataTableFooterStart
+  C as DataTableFooter,
+  S as DataTableFooterCenter,
+  y as DataTableFooterEnd,
+  b as DataTableFooterStart
 };

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

@@ -7,13 +7,6 @@ interface DataTableHeaderProps extends HTMLAttributes<HTMLDivElement> {
     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 DataTableHeaderFilterContent: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderFilterContentTitle: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderFilterActions: React.FC<DataTableHeaderTypeProps>;
 type DataTableHeaderFilterListProps = {
     filters: {
         id: string;
@@ -23,5 +16,12 @@ type DataTableHeaderFilterListProps = {
     onClear?: () => void;
     className?: string;
 };
+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 DataTableHeaderFilterContent: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterContentTitle: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterActions: React.FC<DataTableHeaderTypeProps>;
 export declare const DataTableHeaderFilterList: React.FC<DataTableHeaderFilterListProps>;
 export {};