@ogcio/design-system-react 1.17.1 → 1.18.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogcio/design-system-react",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "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.2",
+    "@ogcio/design-system-tailwind": "1.15.0",
     "@ogcio/theme-doete": "1.0.0",
-    "@ogcio/theme-govie": "1.7.0"
+    "@ogcio/theme-govie": "1.7.1"
   },
   "scripts": {
     "format": "prettier 'src/**/*.{ts,tsx}' --write",