@ogcio/design-system-react 1.29.0 → 1.31.0

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

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

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 export type DataTableSelectedRowsBannerProps = {
     selectedCount: number;
     actions?: React.ReactNode;

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

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

package/dist/details/details.js

@@ -1,55 +1,75 @@
 "use client";
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { useRef as m, useState as u, useEffect as f } from "react";
-import { Icon as g } from "../icon/icon.js";
-const N = ({ label: n, name: d, children: o, ...c }) => {
-  const t = m(null), [e, i] = u(!1);
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { useRef as g, useState as u, useEffect as f } from "react";
+import { c as p } from "../index-CB-zPpNk.js";
+import { Icon as m } from "../icon/icon.js";
+const w = ({ label: n, name: l, children: d, ...c }) => {
+  const s = g(null), [e, a] = u(!1);
   return f(() => {
-    var a, r;
-    ((a = t.current) == null ? void 0 : a.open) !== e && i(((r = t.current) == null ? void 0 : r.open) ?? !1);
-  }, []), /* @__PURE__ */ l(
+    var i, r;
+    ((i = s.current) == null ? void 0 : i.open) !== e && a(((r = s.current) == null ? void 0 : r.open) ?? !1);
+  }, []), /* @__PURE__ */ t(
     "details",
     {
-      ref: t,
+      ref: s,
       onToggle: () => {
-        var a;
-        i(((a = t.current) == null ? void 0 : a.open) ?? !1);
+        var i;
+        a(((i = s.current) == null ? void 0 : i.open) ?? !1);
       },
       "data-testid": "govie-details",
-      className: "gi-details",
+      className: "gi-block gi-text-md gi-text-gray-950",
       "data-module": "gi-details",
-      name: d,
+      name: l,
       "aria-expanded": e ? "true" : "false",
       "aria-details": "details-content",
       ...c,
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ t(
           "summary",
           {
-            className: "gi-details-summary",
-            "data-testid": "govie-details-summary",
+            className: _(),
             role: "button",
+            "data-testid": "govie-details-summary",
             "aria-controls": "details-content",
             "aria-expanded": e ? "true" : "false",
             children: [
-              /* @__PURE__ */ s(g, { icon: e ? "keyboard_arrow_up" : "keyboard_arrow_down" }),
-              /* @__PURE__ */ s("span", { className: "gi-details-summary-text", children: n })
+              /* @__PURE__ */ o(m, { icon: e ? "keyboard_arrow_up" : "keyboard_arrow_down" }),
+              /* @__PURE__ */ o("span", { className: "gi-underline gi-underline-offset-[0.1rem]", children: n })
             ]
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "div",
           {
             id: "details-content",
-            className: "gi-details-text",
+            className: "gi-py-4 gi-pl-5 gi-border-l-[5px] gi-border-solid gi-border-l-gray-200",
             "aria-hidden": e ? "false" : "true",
-            children: o
+            children: d
           }
         )
       ]
     }
   );
-};
+}, _ = p({
+  base: [
+    "gi-flex",
+    "gi-items-center",
+    "gi-relative",
+    "gi-mb-1",
+    "gi-w-fit",
+    "gi-list-none",
+    "focus:gi-rounded-sm",
+    "focus-visible:gi-rounded-sm",
+    "focus:gi-shadow-[0_0_0_2px_var(--gieds-color-gray-950),0_0_0_5px_var(--gieds-color-yellow-400)]",
+    "focus-visible:gi-shadow-[0_0_0_2px_var(--gieds-color-gray-950),0_0_0_5px_var(--gieds-color-yellow-400)]",
+    "focus-visible:gi-outline-none",
+    "[&:focus>span]:gi-no-underline",
+    "[&:focus>span]:gi-select-none",
+    "[&:hover>span]:gi-underline-offset-[0.1rem]",
+    "[&:hover>span]:[text-decoration-thickness:max(3px)]",
+    "[&:hover>span]:[text-decoration-skip-ink:none]"
+  ]
+});
 export {
-  N as Details
+  w as Details
 };

package/dist/drawer/drawer.js

@@ -1,61 +1,64 @@
 "use client";
-import { jsx as r, jsxs as C, Fragment as D } from "react/jsx-runtime";
-import { useState as O, cloneElement as j } from "react";
+import { jsx as a, jsxs as x, Fragment as C } from "react/jsx-runtime";
+import { useState as D, cloneElement as O } from "react";
 import { cn as l } from "../cn.js";
-import { ModalBody as u, ModalFooter as h, ModalWrapper as k } from "../modal/modal.js";
-const v = ({
+import { ModalBody as u, ModalFooter as j, ModalWrapper as v } from "../modal/modal.js";
+const h = ({
   children: o,
   className: e,
-  ...a
-}) => /* @__PURE__ */ r(
-  k,
+  ...r
+}) => /* @__PURE__ */ a(
+  v,
   {
-    className: l("gi-drawer-container", e),
+    className: l("gi-flex gi-flex-col", e),
     closeButtonSize: "large",
-    ...a,
+    ...r,
     children: o
   }
-), x = ({
+), k = ({
   children: o,
   triggerButton: e,
-  startsOpen: a,
-  closeButtonLabel: d,
-  position: i = "right",
-  className: t
+  startsOpen: r,
+  closeButtonLabel: p,
+  position: t = "right",
+  className: f
 }) => {
-  const [f, n] = O(!!a), m = () => n(!0), w = () => n(!1), b = j(e, {
+  const [d, s] = D(!!r), m = () => s(!0), w = () => s(!1), b = O(e, {
     "data-testid": "drawer-trigger-button-container",
     onClick: (y) => {
-      var c, p;
-      const s = typeof ((c = e == null ? void 0 : e.props) == null ? void 0 : c.onClick) == "function" ? (p = e == null ? void 0 : e.props) == null ? void 0 : p.onClick : void 0;
-      s && s(y), m();
+      var c, i;
+      const n = typeof ((c = e == null ? void 0 : e.props) == null ? void 0 : c.onClick) == "function" ? (i = e == null ? void 0 : e.props) == null ? void 0 : i.onClick : void 0;
+      n && n(y), m();
     }
   });
-  return /* @__PURE__ */ C(D, { children: [
+  return /* @__PURE__ */ x(C, { children: [
     b,
-    /* @__PURE__ */ r(
-      v,
+    /* @__PURE__ */ a(
+      h,
       {
         children: o,
-        closeButtonLabel: d,
-        position: i,
-        className: t,
-        isOpen: f,
+        closeButtonLabel: p,
+        position: t,
+        className: f,
+        isOpen: d,
         onClose: w
       }
     )
   ] });
 };
-Object.defineProperty(x, "componentType", {
+Object.defineProperty(k, "componentType", {
   value: "Drawer",
   writable: !1,
   enumerable: !1
 });
-const F = ({ children: o, className: e }) => /* @__PURE__ */ r(
+const F = ({ children: o, className: e }) => /* @__PURE__ */ a(
   u,
   {
     includeModalClass: !1,
-    className: l("gi-drawer-body", e),
+    className: l(
+      "gi-px-6 gi-pt-1 gi-flex-1 gi-border-t-xs gi-border-gray-100 gi-overflow-y-auto",
+      e
+    ),
     children: o
   }
 );
@@ -67,16 +70,16 @@ Object.defineProperty(F, "componentType", {
 const M = ({
   children: o,
   className: e,
-  stacked: a
-}) => /* @__PURE__ */ r(h, { stacked: a, className: l("gi-drawer-footer", e), children: o });
+  stacked: r
+}) => /* @__PURE__ */ a(j, { stacked: r, className: l("gi-drawer-footer", e), children: o });
 Object.defineProperty(M, "componentType", {
   value: "DrawerFooter",
   writable: !1,
   enumerable: !1
 });
 export {
-  x as Drawer,
+  k as Drawer,
   F as DrawerBody,
   M as DrawerFooter,
-  v as DrawerWrapper
+  h as DrawerWrapper
 };