@ogcio/design-system-react 1.17.2 → 1.18.1

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

@@ -1,9 +1,11 @@
 import { TdHTMLAttributes, ReactNode } from 'react';
 import { TableAlign, VerticalAlign } from './table.js';
+type TableDataSize = 'xs-fixed' | 'sm-fixed' | 'md-fixed' | 'lg-flex' | 'fluid';
 interface TableDataProps extends TdHTMLAttributes<HTMLTableCellElement> {
     align?: TableAlign;
     valign?: VerticalAlign;
     tableCellClassName?: string;
+    size?: TableDataSize;
     children: any;
 }
 type TableCellProps = {
@@ -15,7 +17,7 @@ type TableExpandIconProps = {
     onClick: any;
 };
 type TableDataSlotProps = Omit<TableDataProps, 'align' | 'valign'>;
-export declare function TableData({ align, valign, className, children, tableCellClassName, ...props }: TableDataProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableData({ align, valign, size, className, children, tableCellClassName, ...props }: TableDataProps): import("react/jsx-runtime").JSX.Element;
 export declare const TableCell: ({ children, className }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableExpandIcon: ({ expanded, onClick, }: TableExpandIconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableDataSlot: ({ children, className, ...props }: TableDataSlotProps) => import("react/jsx-runtime").JSX.Element;

package/dist/table/table-data.js

@@ -1,56 +1,58 @@
 "use client";
 import { jsx as n } from "react/jsx-runtime";
-import { useRef as d, useState as g, useEffect as u } from "react";
-import { cn as c } from "../cn.js";
-import { IconButton as w } from "../icon-button/icon-button.js";
-function C({
+import { useRef as g, useState as u, useEffect as f } from "react";
+import { cn as m } from "../cn.js";
+import { IconButton as v } from "../icon-button/icon-button.js";
+function S({
   align: t = "left",
   valign: e = "middle",
-  className: r,
+  size: l,
+  className: s,
   children: o,
-  tableCellClassName: i,
-  ...m
+  tableCellClassName: d,
+  ...a
 }) {
-  const a = {
+  const r = {
     left: "gi-text-left",
     center: "gi-text-center",
     right: "gi-text-right"
-  }[t], s = {
+  }[t], i = {
     top: "gi-align-top",
     middle: "gi-align-middle",
     bottom: "gi-align-bottom"
-  }[e], l = d(null), [f, p] = g(!1);
-  return u(() => {
-    if (!l.current)
+  }[e], p = l ? `gi-table-td-${l}` : void 0, c = g(null), [b, w] = u(!1);
+  return f(() => {
+    if (!c.current)
       return;
-    const b = l.current.querySelectorAll("input, select, button");
-    p(b.length > 0);
+    const x = c.current.querySelectorAll("input, select, button");
+    w(x.length > 0);
   }, []), /* @__PURE__ */ n(
     "td",
     {
-      ref: l,
-      className: c(
+      ref: c,
+      className: m(
         "gi-table-td",
-        a,
-        s,
-        r
+        p,
+        r,
+        i,
+        s
       ),
-      ...m,
-      children: f ? o : /* @__PURE__ */ n(x, { className: i, children: o })
+      ...a,
+      children: b ? o : /* @__PURE__ */ n(z, { className: d, children: o })
     }
   );
 }
-const x = ({ children: t, className: e }) => /* @__PURE__ */ n("div", { className: c("gi-table-data-cell", e), children: t }), E = ({
+const z = ({ children: t, className: e }) => /* @__PURE__ */ n("div", { className: m("gi-table-data-cell", e), children: t }), k = ({
   expanded: t,
   onClick: e
 }) => {
-  const [r, o] = g("md"), i = d(null);
-  return u(() => {
-    var l;
-    const a = (l = i.current) == null ? void 0 : l.closest(".gi-table"), s = a == null ? void 0 : a.getAttribute("data-row-size");
-    s && o(s);
-  }, []), /* @__PURE__ */ n("div", { ref: i, className: "gi-table-expand-icon-container", children: /* @__PURE__ */ n(
-    w,
+  const [l, s] = u("md"), o = g(null);
+  return f(() => {
+    var i;
+    const a = (i = o.current) == null ? void 0 : i.closest(".gi-table"), r = a == null ? void 0 : a.getAttribute("data-row-size");
+    r && s(r);
+  }, []), /* @__PURE__ */ n("div", { ref: o, className: "gi-table-expand-icon-container", children: /* @__PURE__ */ n(
+    v,
     {
       variant: "flat",
       appearance: "dark",
@@ -58,7 +60,7 @@ const x = ({ children: t, className: e }) => /* @__PURE__ */ n("div", { classNam
         sm: "medium",
         md: "large",
         lg: "extraLarge"
-      }[r],
+      }[l],
       icon: {
         icon: t ? "keyboard_arrow_up" : "keyboard_arrow_down"
       },
@@ -69,14 +71,14 @@ const x = ({ children: t, className: e }) => /* @__PURE__ */ n("div", { classNam
       }
     }
   ) });
-}, S = ({
+}, T = ({
   children: t,
   className: e,
-  ...r
-}) => /* @__PURE__ */ n("td", { className: "gi-table-td", ...r, children: /* @__PURE__ */ n("div", { className: c("gi-table-data-slot-container", e), children: t }) });
+  ...l
+}) => /* @__PURE__ */ n("td", { className: "gi-table-td", ...l, children: /* @__PURE__ */ n("div", { className: m("gi-table-data-slot-container", e), children: t }) });
 export {
-  x as TableCell,
-  C as TableData,
-  S as TableDataSlot,
-  E as TableExpandIcon
+  z as TableCell,
+  S as TableData,
+  T as TableDataSlot,
+  k as TableExpandIcon
 };

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

@@ -1,11 +1,13 @@
 import { ThHTMLAttributes } from 'react';
 import { TableAlign, VerticalAlign } from './table.js';
 type SortedType = 'asc' | 'desc' | false;
+export type TableHeaderSize = 'xs-fixed' | 'sm-fixed' | 'md-fixed' | 'lg-flex' | 'fluid';
 interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
     align?: TableAlign;
     valign?: VerticalAlign;
     sorted?: SortedType;
     onSort?: (event: React.MouseEvent) => void;
+    size?: TableHeaderSize;
 }
-export declare function TableHeader({ align, valign, className, sorted, onSort, children, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader({ align, valign, className, sorted, onSort, children, size, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/table/table-header.js

@@ -1,69 +1,71 @@
 "use client";
-import { jsx as o, jsxs as x } from "react/jsx-runtime";
-import { Children as y } from "react";
-import { cn as d } from "../cn.js";
-import { Icon as m } from "../icon/icon.js";
-const b = (e, r) => e ? r ? /* @__PURE__ */ o(
-  m,
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import { Children as C } from "react";
+import { cn as m } from "../cn.js";
+import { Icon as u } from "../icon/icon.js";
+const j = (e, r) => e ? r ? /* @__PURE__ */ o(
+  u,
   {
     inline: !0,
     icon: r === "asc" ? "arrow_upward" : "arrow_downward",
     size: "sm"
   }
-) : /* @__PURE__ */ o(m, { inline: !0, icon: "swap_vert", size: "sm" }) : null;
-function K({
+) : /* @__PURE__ */ o(u, { inline: !0, icon: "swap_vert", size: "sm" }) : null;
+function _({
   align: e = "left",
   valign: r = "middle",
-  className: u,
+  className: h,
   sorted: a = !1,
   onSort: i,
   children: l,
-  ...h
+  size: c,
+  ...p
 }) {
-  const t = typeof l == "string", c = {
+  const t = typeof l == "string", g = {
     left: "gi-text-left",
     center: "gi-text-center",
     right: "gi-text-right"
-  }[e], p = {
+  }[e], w = {
     top: "gi-align-top",
     middle: "gi-align-middle",
     bottom: "gi-align-bottom"
-  }[r], g = (n) => {
+  }[r], x = c ? `gi-table-th-${c}` : void 0, f = (n) => {
     i && t && (n.preventDefault(), i(n));
-  }, f = (n) => {
-    n.key === "Enter" && g(n);
-  }, w = y.count(l) > 0;
+  }, d = (n) => {
+    n.key === "Enter" && f(n);
+  }, y = C.count(l) > 0;
   let s;
-  return a && t ? s = "button" : w || (s = "cell"), /* @__PURE__ */ o(
+  return a && t ? s = "button" : y || (s = "cell"), /* @__PURE__ */ o(
     "th",
     {
-      className: d(
-        c,
-        p,
+      className: m(
+        g,
+        w,
         "gi-table-th",
-        u,
+        x,
+        h,
         { "gi-w-12": !t }
       ),
       role: s,
       "data-sorted": !!i,
       "data-header-string": t,
       tabIndex: i && t ? 0 : -1,
-      onKeyDown: f,
-      ...h,
-      children: /* @__PURE__ */ x(
+      onKeyDown: d,
+      ...p,
+      children: /* @__PURE__ */ b(
         "div",
         {
-          className: d(c, {
+          className: m(g, {
             "gi-flex gi-gap-1 gi-h-full gi-items-center": t,
             "gi-justify-center": e === "center",
             "gi-justify-start": e === "left",
             "gi-justify-end": e === "right"
           }),
-          onClick: g,
-          onKeyDown: f,
+          onClick: f,
+          onKeyDown: d,
           children: [
             l,
-            !!i && b(t, a)
+            !!i && j(t, a)
           ]
         }
       )
@@ -71,5 +73,5 @@ function K({
   );
 }
 export {
-  K as TableHeader
+  _ as TableHeader
 };

package/dist/table/table-pagination.js

@@ -1,36 +1,36 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { cn as m } from "../cn.js";
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { cn as p } from "../cn.js";
 import { translate as s } from "../i18n/utility.js";
-import { IconButton as n } from "../icon-button/icon-button.js";
+import { IconButton as t } from "../icon-button/icon-button.js";
 import { SelectNative as f, SelectItem as v } from "../select/select-native.js";
 const j = ({
-  currentPage: a,
-  totalPages: l,
-  onPageChange: e,
-  align: t = "end"
+  currentPage: i,
+  totalPages: e,
+  onPageChange: l,
+  align: n = "end"
 }) => {
   const d = () => {
-    a > 1 && e(a - 1);
-  }, p = () => {
-    a < l && e(a + 1);
+    i > 1 && l(i - 1);
+  }, m = () => {
+    i < e && l(i + 1);
   };
   return /* @__PURE__ */ o(
     "div",
     {
-      className: m(
+      className: p(
         {
-          "gi-justify-first": t === "start",
-          "gi-justify-center": t === "center",
-          "gi-justify-end": t === "end"
+          "gi-justify-first": n === "start",
+          "gi-justify-center": n === "center",
+          "gi-justify-end": n === "end"
         },
         "gi-table-pagination"
       ),
       children: [
-        /* @__PURE__ */ i(
-          n,
+        /* @__PURE__ */ a(
+          t,
           {
-            disabled: a === 1,
-            onClick: () => e(1),
+            disabled: i === 1,
+            onClick: () => l(1),
             appearance: "dark",
             variant: "flat",
             className: "gi-mr-2",
@@ -39,10 +39,10 @@ const j = ({
             }
           }
         ),
-        /* @__PURE__ */ i(
-          n,
+        /* @__PURE__ */ a(
+          t,
           {
-            disabled: a === 1,
+            disabled: i === 1,
             onClick: d,
             appearance: "dark",
             variant: "flat",
@@ -58,31 +58,31 @@ const j = ({
             className: "gi-table-pagination-label gi-space-x-2",
             "aria-live": "polite",
             children: [
-              /* @__PURE__ */ i("span", { children: s("table.pagination.page", {
+              /* @__PURE__ */ a("span", { children: s("table.pagination.page", {
                 defaultValue: "Page"
               }) }),
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ a(
                 f,
                 {
                   "aria-label": "Select page",
-                  value: a,
-                  className: "!gi-min-w-12",
-                  onChange: (r) => e(Number(r.target.value)),
-                  children: Array.from({ length: l }, (r, c) => /* @__PURE__ */ i(v, { value: c + 1, children: c + 1 }, c + 1))
+                  value: i,
+                  className: "!gi-min-w-12 !gi-border-color-border-system-neutral-interactive-muted",
+                  onChange: (c) => l(Number(c.target.value)),
+                  children: Array.from({ length: e }, (c, r) => /* @__PURE__ */ a(v, { value: r + 1, children: r + 1 }, r + 1))
                 }
               ),
-              /* @__PURE__ */ i("span", { children: s("table.pagination.ofTotal", {
-                totalPages: l,
-                defaultValue: `of ${l}`
+              /* @__PURE__ */ a("span", { children: s("table.pagination.ofTotal", {
+                totalPages: e,
+                defaultValue: `of ${e}`
               }) })
             ]
           }
         ),
-        /* @__PURE__ */ i(
-          n,
+        /* @__PURE__ */ a(
+          t,
           {
-            onClick: p,
-            disabled: a === l,
+            onClick: m,
+            disabled: i === e,
             appearance: "dark",
             variant: "flat",
             className: "gi-ml-2",
@@ -91,11 +91,11 @@ const j = ({
             }
           }
         ),
-        /* @__PURE__ */ i(
-          n,
+        /* @__PURE__ */ a(
+          t,
           {
-            disabled: a === l,
-            onClick: () => e(l),
+            disabled: i === e,
+            onClick: () => l(e),
             appearance: "dark",
             variant: "flat",
             className: "gi-ml-2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogcio/design-system-react",
-  "version": "1.17.2",
+  "version": "1.18.1",
   "description": "The GOV IE design system React components.",
   "type": "module",
   "main": "dist/index.js",
@@ -52,9 +52,9 @@
     "react-dom": "19.0.0",
     "@ogcio/design-system-eslint-config": "1.2.6",
     "@ogcio/design-system-prettier-config": "1.0.6",
-    "@ogcio/design-system-tailwind": "1.14.3",
     "@ogcio/theme-doete": "1.0.0",
-    "@ogcio/theme-govie": "1.7.0"
+    "@ogcio/design-system-tailwind": "1.15.1",
+    "@ogcio/theme-govie": "1.7.1"
   },
   "scripts": {
     "format": "prettier 'src/**/*.{ts,tsx}' --write",