@ogcio/design-system-react 1.17.2 → 1.18.1

package/dist/button-group/button-group.d.ts

@@ -1,22 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
-import { ButtonAppearance, ButtonSize } from '../button/types.js';
-type ButtonGroupItemProps = PropsWithChildren<{
-    value: string;
-    role?: string;
-    'aria-checked'?: boolean;
-    'aria-label'?: string;
-}>;
+import { FC } from 'react';
+import { ButtonGroupItemProps, ButtonGroupProps } from './types.js';
 export declare const ButtonGroupItem: FC<ButtonGroupItemProps>;
-type ButtonGroupProps = PropsWithChildren<{
-    name: string;
-    size?: ButtonSize;
-    appearance?: ButtonAppearance;
-    onChange?: (value: string) => void;
-    defaultValue?: string;
-    value?: string;
-    role?: string;
-    'aria-labelledby'?: string;
-    'aria-describedby'?: string;
-}>;
 export declare const ButtonGroup: FC<ButtonGroupProps>;
-export {};

package/dist/button-group/button-group.js

@@ -1,92 +1,98 @@
 "use client";
-import { jsx as f } from "react/jsx-runtime";
-import { createContext as x, useState as B, useEffect as G, useContext as V } from "react";
-import { Button as k } from "../button/button.js";
-import { useDomId as S } from "../hooks/use-dom-id.js";
-const I = x(
+import { jsx as y } from "react/jsx-runtime";
+import { createContext as G, useState as V, useEffect as k, useContext as S } from "react";
+import { Button as w } from "../button/button.js";
+import { cn as E } from "../cn.js";
+import { useDomId as $ } from "../hooks/use-dom-id.js";
+const x = G(
   void 0
-), v = ({
+), P = ({
   value: r,
   children: d,
   role: s,
   "aria-checked": e,
-  "aria-label": a
+  "aria-label": a,
+  ...t
 }) => {
-  const t = V(I);
-  if (!t)
+  const c = S(x);
+  if (!c)
     throw new Error("ButtonGroupItem must be used within a ButtonGroup");
   const {
     selectedValue: n,
     setSelectedValue: l,
     size: u,
     onChange: o,
-    groupId: p,
-    appearance: i
-  } = t, c = n === r, m = () => {
+    groupId: m,
+    appearance: p
+  } = c, i = n === r, b = () => {
     l(r), o == null || o(r);
-  }, b = `${p}-${r}`;
-  return /* @__PURE__ */ f(
-    k,
+  }, f = `${m}-${r}`;
+  return /* @__PURE__ */ y(
+    w,
     {
-      variant: c ? "primary" : "secondary",
+      variant: i ? "primary" : "secondary",
       size: u,
-      appearance: i,
-      onClick: m,
-      id: b,
+      appearance: p,
+      onClick: b,
+      id: f,
       role: s || "radio",
-      "aria-checked": e === void 0 ? c : e,
+      "aria-checked": e === void 0 ? i : e,
       "aria-label": a,
       type: "button",
+      ...t,
       children: d
     }
   );
-}, z = ({
+}, q = ({
   name: r,
   size: d = "medium",
   appearance: s = "dark",
   onChange: e,
   defaultValue: a,
   value: t,
-  children: n,
-  role: l,
-  "aria-labelledby": u,
-  "aria-describedby": o
+  children: c,
+  role: n,
+  "aria-labelledby": l,
+  "aria-describedby": u,
+  className: o,
+  ...m
 }) => {
-  const [p, i] = B(
+  const [p, i] = V(
     a
-  ), c = t === void 0 ? p : t;
-  G(() => {
+  ), b = t === void 0 ? p : t;
+  k(() => {
     t !== void 0 && i(t);
   }, [t]);
-  const m = (y) => {
-    t === void 0 && i(y), e == null || e(y);
-  }, b = S();
-  return /* @__PURE__ */ f(
-    I.Provider,
+  const f = (I) => {
+    t === void 0 && i(I), e == null || e(I);
+  }, B = $();
+  return /* @__PURE__ */ y(
+    x.Provider,
     {
       value: {
-        selectedValue: c,
-        setSelectedValue: m,
+        selectedValue: b,
+        setSelectedValue: f,
         name: r,
         size: d,
         onChange: e,
-        groupId: b,
-        appearance: s
+        groupId: B,
+        appearance: s,
+        ...m
       },
-      children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ y(
         "div",
         {
-          className: "gi-btn-group",
-          role: l || "radiogroup",
-          "aria-labelledby": u,
-          "aria-describedby": o,
-          children: n
+          className: E("gi-btn-group", o),
+          role: n || "radiogroup",
+          "aria-labelledby": l,
+          "aria-describedby": u,
+          children: c
         }
       )
     }
   );
 };
 export {
-  z as ButtonGroup,
-  v as ButtonGroupItem
+  q as ButtonGroup,
+  P as ButtonGroupItem
 };

package/dist/button-group/types.d.ts

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+import { ButtonAppearance, ButtonSize } from '../button/types.js';
+export type ButtonGroupProps = PropsWithChildren<{
+    name: string;
+    size?: ButtonSize;
+    appearance?: ButtonAppearance;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+    value?: string;
+    role?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    className?: string;
+}>;
+export type ButtonGroupItemProps = PropsWithChildren<{
+    value: string;
+    role?: string;
+    'aria-checked'?: boolean;
+    'aria-label'?: string;
+}>;
+export type ButtonGroupContextType = {
+    selectedValue?: string;
+    setSelectedValue: (value: string) => void;
+    name: string;
+    size: ButtonSize;
+    appearance?: ButtonAppearance;
+    onChange?: (value: string) => void;
+    groupId: string;
+};

package/dist/button-group/types.js

@@ -0,0 +1 @@
+

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

@@ -2,8 +2,9 @@ import { default as React } from 'react';
 interface DataTableFooterTypeProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
-interface DataTableFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTableFooterProps extends React.HTMLAttributes<HTMLDivElement | HTMLTableSectionElement> {
     children?: React.ReactNode;
+    standalone?: boolean;
 }
 export type { DataTableFooterProps, DataTableFooterTypeProps };
 export declare const DataTableFooterStart: React.FC<DataTableFooterTypeProps>;

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

@@ -1,66 +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(
+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: i(
+    className: o(
       t,
-      n,
+      s,
       e.props.className
     ),
     style: e.props.style,
     children: e.props.children
   }
-) : null, y = ({
+) : null, T = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ s("div", { ...t, children: e });
-y.displayName = "DataTableFooterStart";
-const F = ({
+}) => /* @__PURE__ */ a("div", { ...t, children: e });
+T.displayName = "DataTableFooterStart";
+const h = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ s("div", { ...t, children: e });
-F.displayName = "DataTableFooterCenter";
-const T = ({
+}) => /* @__PURE__ */ a("div", { ...t, children: e });
+h.displayName = "DataTableFooterCenter";
+const D = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ s("div", { ...t, children: e });
-T.displayName = "DataTableFooterEnd";
-const E = ({
+}) => /* @__PURE__ */ a("div", { ...t, children: e });
+D.displayName = "DataTableFooterEnd";
+const v = ({
   children: e,
   className: t,
-  ...n
+  standalone: s = !1,
+  ...c
 }) => {
-  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(
+  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(
     "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",
+      className: o(
+        "gi-data-table-footer",
+        f ? "gi-justify-end" : "gi-gap-2",
         t
       ),
       children: [
-        r(c, g),
-        r(d, C),
-        r(m, S)
+        l(d, b),
+        l(p, C),
+        l(m, N)
       ]
     }
   );
+  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 }) }) });
 };
-E.displayName = "DataTableFooter";
+v.displayName = "DataTableFooter";
 export {
-  E as DataTableFooter,
-  F as DataTableFooterCenter,
-  T as DataTableFooterEnd,
-  y as DataTableFooterStart
+  v as DataTableFooter,
+  h as DataTableFooterCenter,
+  D as DataTableFooterEnd,
+  T as DataTableFooterStart
 };

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

@@ -1,8 +1,8 @@
-import { default as React } from 'react';
-interface DataTableHeaderTypeProps extends React.HTMLAttributes<HTMLDivElement> {
+import { default as React, HTMLAttributes } from 'react';
+interface DataTableHeaderTypeProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
-interface DataTableHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTableHeaderProps extends HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     showHeader?: boolean;
     showFilter?: boolean;

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

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

package/dist/header/components/header-menu.d.ts

@@ -9,5 +9,4 @@ type MenuItemAccordionProps = {
 };
 export declare const MenuItemAccordion: ({ index, item }: MenuItemAccordionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MobileHeaderMenuItems: ({ items, secondaryLinks, }: MobileHeaderMenuProps) => import("react/jsx-runtime").JSX.Element;
-declare function HeaderMenu({ ...props }: MobileHeaderMenuProps): import("react/jsx-runtime").JSX.Element;
-export default HeaderMenu;
+export {};