@ogcio/design-system-react 1.12.3 → 1.13.0

package/dist/table/index.d.ts

@@ -0,0 +1,8 @@
+export { Caption } from './caption.js';
+export { TableBody } from './table-body.js';
+export { TableData, TableCell } from './table-data.js';
+export { TableFoot } from './table-foot.js';
+export { TableHead } from './table-head.js';
+export { TableHeader } from './table-header.js';
+export { TableRow } from './table-row.js';
+export { Table } from './table.js';

package/dist/table/index.js

@@ -0,0 +1,19 @@
+import { Caption as r } from "./caption.js";
+import { TableBody as t } from "./table-body.js";
+import { TableCell as p, TableData as b } from "./table-data.js";
+import { TableFoot as m } from "./table-foot.js";
+import { TableHead as T } from "./table-head.js";
+import { TableHeader as C } from "./table-header.js";
+import { TableRow as i } from "./table-row.js";
+import { Table as w } from "./table.js";
+export {
+  r as Caption,
+  w as Table,
+  t as TableBody,
+  p as TableCell,
+  b as TableData,
+  m as TableFoot,
+  T as TableHead,
+  C as TableHeader,
+  i as TableRow
+};

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

@@ -1,8 +1,22 @@
-import { TdHTMLAttributes } from 'react';
+import { TdHTMLAttributes, ReactNode } from 'react';
 import { TableAlign, VerticalAlign } from './table.js';
 interface TableDataProps extends TdHTMLAttributes<HTMLTableCellElement> {
     align?: TableAlign;
     valign?: VerticalAlign;
+    tableCellClassName?: string;
+    children: any;
 }
-export declare function TableData({ align, valign, className, children, ...props }: TableDataProps): import("react/jsx-runtime").JSX.Element;
+type TableCellProps = {
+    children: ReactNode;
+    className?: string;
+};
+type TableExpandIconProps = {
+    expanded?: boolean;
+    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 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;
 export {};

package/dist/table/table-data.js

@@ -1,35 +1,82 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cn as m } from "../cn.js";
-function c({
+"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({
   align: t = "left",
   valign: e = "middle",
-  className: i,
-  children: l,
-  ...n
+  className: r,
+  children: o,
+  tableCellClassName: i,
+  ...m
 }) {
-  const g = {
+  const a = {
     left: "gi-text-left",
     center: "gi-text-center",
     right: "gi-text-right"
-  }[t], o = {
+  }[t], s = {
     top: "gi-align-top",
     middle: "gi-align-middle",
     bottom: "gi-align-bottom"
-  }[e];
-  return /* @__PURE__ */ a(
+  }[e], l = d(null), [f, p] = g(!1);
+  return u(() => {
+    if (!l.current)
+      return;
+    const b = l.current.querySelectorAll("input, select, button");
+    p(b.length > 0);
+  }, []), /* @__PURE__ */ n(
     "td",
     {
-      className: m(
-        g,
-        o,
+      ref: l,
+      className: c(
+        a,
+        s,
         "gi-table-td",
-        i
+        r
       ),
-      ...n,
-      children: l
+      ...m,
+      children: f ? o : /* @__PURE__ */ n(x, { className: i, children: o })
     }
   );
 }
+const x = ({ children: t, className: e }) => /* @__PURE__ */ n("div", { className: c("gi-table-data-cell", e), children: t }), E = ({
+  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,
+    {
+      variant: "flat",
+      appearance: "dark",
+      size: {
+        sm: "medium",
+        md: "large",
+        lg: "extraLarge"
+      }[r],
+      icon: {
+        icon: t ? "keyboard_arrow_up" : "keyboard_arrow_down"
+      },
+      "aria-label": t ? "Collapse row" : "Expand row",
+      className: "gi-cursor-pointer",
+      onClick: (a) => {
+        a.preventDefault(), e();
+      }
+    }
+  ) });
+}, S = ({
+  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 }) });
 export {
-  c as TableData
+  x as TableCell,
+  C as TableData,
+  S as TableDataSlot,
+  E as TableExpandIcon
 };

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

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

package/dist/table/table-header.js

@@ -1,35 +1,75 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as a } from "../cn.js";
-function c({
-  align: t = "left",
-  valign: e = "middle",
-  className: i,
+"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,
+  {
+    inline: !0,
+    icon: r === "asc" ? "arrow_upward" : "arrow_downward",
+    size: "sm"
+  }
+) : /* @__PURE__ */ o(m, { inline: !0, icon: "swap_vert", size: "sm" }) : null;
+function K({
+  align: e = "left",
+  valign: r = "middle",
+  className: u,
+  sorted: a = !1,
+  onSort: i,
   children: l,
-  ...n
+  ...h
 }) {
-  const g = {
+  const t = typeof l == "string", c = {
     left: "gi-text-left",
     center: "gi-text-center",
     right: "gi-text-right"
-  }[t], o = {
+  }[e], p = {
     top: "gi-align-top",
     middle: "gi-align-middle",
     bottom: "gi-align-bottom"
-  }[e];
-  return /* @__PURE__ */ r(
+  }[r], g = (n) => {
+    i && t && (n.preventDefault(), i(n));
+  }, f = (n) => {
+    n.key === "Enter" && g(n);
+  }, w = y.count(l) > 0;
+  let s;
+  return a && t ? s = "button" : w || (s = "cell"), /* @__PURE__ */ o(
     "th",
     {
-      className: a(
-        g,
-        o,
+      className: d(
+        c,
+        p,
         "gi-table-th",
-        i
+        u,
+        { "gi-w-12": !t }
       ),
-      ...n,
-      children: l
+      role: s,
+      "data-sorted": !!i,
+      "data-header-string": t,
+      tabIndex: i && t ? 0 : -1,
+      onKeyDown: f,
+      ...h,
+      children: /* @__PURE__ */ x(
+        "div",
+        {
+          className: d(c, {
+            "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,
+          children: [
+            l,
+            !!i && b(t, a)
+          ]
+        }
+      )
     }
   );
 }
 export {
-  c as TableHeader
+  K as TableHeader
 };

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

@@ -0,0 +1,8 @@
+export type TablePaginationProps = {
+    align?: 'start' | 'center' | 'end';
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+};
+export declare const TablePagination: React.FC<TablePaginationProps>;
+export default TablePagination;

package/dist/table/table-pagination.js

@@ -0,0 +1,97 @@
+import { jsxs as t, jsx as l } from "react/jsx-runtime";
+import { cn as f } from "../cn.js";
+import { translate as e } from "../i18n/utility.js";
+import { IconButton as o } from "../icon-button/icon-button.js";
+const v = ({
+  currentPage: i,
+  totalPages: a,
+  onPageChange: n,
+  align: s = "end"
+}) => {
+  const c = () => {
+    i > 1 && n(i - 1);
+  }, d = () => {
+    i < a && n(i + 1);
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: f(
+        {
+          "gi-justify-first": s === "start",
+          "gi-justify-center": s === "center",
+          "gi-justify-end": s === "end"
+        },
+        "gi-table-pagination"
+      ),
+      children: [
+        /* @__PURE__ */ l(
+          o,
+          {
+            disabled: i === 1,
+            onClick: () => n(1),
+            appearance: "dark",
+            variant: "flat",
+            className: "gi-mr-4",
+            icon: {
+              icon: "first_page"
+            }
+          }
+        ),
+        /* @__PURE__ */ l(
+          o,
+          {
+            disabled: i === 1,
+            onClick: c,
+            appearance: "dark",
+            variant: "flat",
+            className: "gi-mr-2",
+            icon: {
+              icon: "chevron_left"
+            }
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "gi-table-pagination-label", "aria-live": "polite", children: [
+          /* @__PURE__ */ l("span", { className: "gi-font-bold", children: e("table.pagination.page", {
+            currentPage: i,
+            defaultValue: `Page ${i} `
+          }) }),
+          e("table.pagination.ofTotal", {
+            totalPages: a,
+            defaultValue: `of ${a}`
+          })
+        ] }),
+        /* @__PURE__ */ l(
+          o,
+          {
+            onClick: d,
+            disabled: i === a,
+            appearance: "dark",
+            variant: "flat",
+            className: "gi-ml-2",
+            icon: {
+              icon: "chevron_right"
+            }
+          }
+        ),
+        /* @__PURE__ */ l(
+          o,
+          {
+            disabled: i === a,
+            onClick: () => n(a),
+            appearance: "dark",
+            variant: "flat",
+            className: "gi-ml-4",
+            icon: {
+              icon: "last_page"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  v as TablePagination,
+  v as default
+};

package/dist/table/table-row.js

@@ -1,10 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-function n({
-  children: r,
-  ...o
+import { jsx as a } from "react/jsx-runtime";
+import { cn as e } from "../cn.js";
+function c({
+  children: t,
+  ...r
 }) {
-  return /* @__PURE__ */ t("tr", { ...o, children: r });
+  return /* @__PURE__ */ a("tr", { className: e(r.className, "gi-table-tr"), ...r, children: t });
 }
 export {
-  n as TableRow
+  c as TableRow
 };

package/dist/table/table.d.ts

@@ -20,6 +20,9 @@ declare const tableVariants: import('tailwind-variants').TVReturnType<{
 }, undefined, "gi-table", TVConfig<V, EV>, unknown, unknown, undefined>>;
 export type TableProps = VariantProps<typeof tableVariants> & {
     dataTestid?: string;
+    rowSize?: 'sm' | 'md' | 'lg';
+    stripped?: boolean;
+    noBorder?: boolean;
 } & React.TableHTMLAttributes<HTMLTableElement>;
-export declare function Table({ layout, dataTestid, children, ...props }: React.PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ layout, rowSize, stripped, noBorder, dataTestid, children, className, ...props }: React.PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/table/table.js

@@ -1,7 +1,7 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as l } from "../index-DNkhmzZp.js";
-import { cn as r } from "../cn.js";
-const b = l({
+import { jsx as d } from "react/jsx-runtime";
+import { c as b } from "../index-CB-zPpNk.js";
+import { cn as f } from "../cn.js";
+const m = b({
   base: "gi-table",
   variants: {
     layout: {
@@ -10,24 +10,31 @@ const b = l({
     }
   }
 });
-function u({
+function g({
   layout: t = "auto",
-  dataTestid: a,
-  children: e,
-  ...o
+  rowSize: a = "md",
+  stripped: e = !1,
+  noBorder: o = !1,
+  dataTestid: r,
+  children: s,
+  className: i,
+  ...l
 }) {
-  const s = b({ layout: t });
-  return /* @__PURE__ */ i(
+  const n = m({ layout: t });
+  return /* @__PURE__ */ d(
     "table",
     {
-      className: r(s),
+      className: f(n, i),
       role: "table",
-      "data-testid": a,
-      ...o,
-      children: e
+      "data-testid": r,
+      "data-row-size": a,
+      "data-stripped": e.toString(),
+      "data-no-border": o.toString(),
+      ...l,
+      children: s
     }
   );
 }
 export {
-  u as Table
+  g as Table
 };

package/dist/text-input/text-input.d.ts

@@ -18,6 +18,7 @@ export declare const TextInput: import('react').ForwardRefExoticComponent<import
     type?: "text" | "date" | "datetime-local" | "email" | "month" | "number" | "password" | "tel" | "time" | "url" | "week" | "search";
     halfFluid?: boolean;
     clearButtonEnabled?: boolean;
+    containerProps?: any;
 } & import('react').RefAttributes<HTMLInputElement>>;
 /** @deprecated Use InputTextProps instead */
 export type TextInputProps = InputTextProps;

package/dist/textarea/textarea.js

@@ -9,24 +9,24 @@ import { IconButton as O } from "../icon-button/icon-button.js";
 const E = R(
   ({
     value: i,
-    rows: f = 4,
-    cols: g = 100,
+    rows: g = 4,
+    cols: f = 100,
     autoComplete: h = "on",
     maxChars: t,
-    halfFluid: x = !1,
+    halfFluid: v = !1,
     iconStart: c,
-    className: v,
-    clearButtonEnabled: l,
+    className: x,
+    clearButtonEnabled: s,
     ...a
   }, N) => {
-    const e = j(null), [s, C] = m(
+    const e = j(null), [o, C] = m(
       t
     );
     p(N, () => e.current);
-    const [I, V] = m(""), o = typeof i == "string" ? i : I;
+    const [I, V] = m(""), l = typeof i == "string" ? i : I;
     y(() => {
-      t !== void 0 && C(t - o.length);
-    }, [o, t]);
+      t !== void 0 && C(t - l.length);
+    }, [l, t]);
     const b = (r) => {
       const T = r.target.value;
       i === void 0 && V(T), a.onChange && a.onChange(r);
@@ -45,26 +45,27 @@ const E = R(
         "div",
         {
           className: u("gi-textarea-inner", {
-            "gi-input-half-width": x
+            "gi-input-half-width": v
           }),
           children: [
             c && /* @__PURE__ */ n("div", { className: "gi-text-area-icon-start", children: /* @__PURE__ */ n(H, { icon: c, size: "md", disabled: a.disabled }) }),
             /* @__PURE__ */ n(
               "textarea",
               {
-                rows: f,
-                cols: g,
+                rows: g,
+                cols: f,
                 autoComplete: h,
-                className: u(v, "gi-textarea"),
+                className: u(x, "gi-textarea"),
                 ref: e,
                 "data-icon-start": !!c,
-                "data-clear-enabled": l,
+                "data-clear-enabled": s,
                 maxLength: t,
+                value: l,
                 onChange: b,
                 ...a
               }
             ),
-            l ? /* @__PURE__ */ n("div", { className: "gi-text-area-end-element", children: /* @__PURE__ */ n(
+            s ? /* @__PURE__ */ n("div", { className: "gi-text-area-end-element", children: /* @__PURE__ */ n(
               O,
               {
                 disabled: a.disabled,
@@ -84,8 +85,8 @@ const E = R(
         z,
         {
           text: A("textarea.remainingChars", {
-            remainingChars: s,
-            defaultValue: `You have ${s} characters remaining`
+            remainingChars: o,
+            defaultValue: `You have ${o} characters remaining`
           })
         }
       ) })

package/dist/toast/ds-toast.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import { c as u } from "../index-DNkhmzZp.js";
+import { c as u } from "../index-CB-zPpNk.js";
 import { Icon as p } from "../icon/icon.js";
 import { IconButton as v } from "../icon-button/icon-button.js";
 import { Link as w } from "../link/link.js";

package/dist/tooltip/tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as b, jsx as g } from "react/jsx-runtime";
 import { useState as c, useId as h, useCallback as d, useEffect as v } from "react";
-import { c as y } from "../index-DNkhmzZp.js";
+import { c as y } from "../index-CB-zPpNk.js";
 const T = ["top", "bottom", "left", "right"], E = y({
   base: "gi-tooltip",
   variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogcio/design-system-react",
-  "version": "1.12.3",
+  "version": "1.13.0",
   "description": "The GOV IE design system React components.",
   "type": "module",
   "main": "dist/index.js",
@@ -50,11 +50,11 @@
     "postcss-import": "^16.1.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "@ogcio/design-system-eslint-config": "1.2.5",
-    "@ogcio/design-system-prettier-config": "1.0.5",
-    "@ogcio/design-system-tailwind": "1.11.0",
+    "@ogcio/design-system-eslint-config": "1.2.6",
+    "@ogcio/design-system-prettier-config": "1.0.6",
+    "@ogcio/design-system-tailwind": "1.12.0",
     "@ogcio/theme-doete": "1.0.0",
-    "@ogcio/theme-govie": "1.5.3"
+    "@ogcio/theme-govie": "1.6.0"
   },
   "scripts": {
     "format": "prettier 'src/**/*.{ts,tsx}' --write",

package/dist/index-ntYL1VRC.js

@@ -1,64 +0,0 @@
-import * as i from "react";
-import { jsx as c, Fragment as d } from "react/jsx-runtime";
-function p(e, r) {
-  if (typeof e == "function")
-    return e(r);
-  e != null && (e.current = r);
-}
-function m(...e) {
-  return (r) => {
-    let n = !1;
-    const l = e.map((t) => {
-      const o = p(t, r);
-      return !n && typeof o == "function" && (n = !0), o;
-    });
-    if (n)
-      return () => {
-        for (let t = 0; t < l.length; t++) {
-          const o = l[t];
-          typeof o == "function" ? o() : p(e[t], null);
-        }
-      };
-  };
-}
-var y = i.forwardRef((e, r) => {
-  const { children: n, ...l } = e, t = i.Children.toArray(n), o = t.find(h);
-  if (o) {
-    const s = o.props.children, a = t.map((u) => u === o ? i.Children.count(s) > 1 ? i.Children.only(null) : i.isValidElement(s) ? s.props.children : null : u);
-    return /* @__PURE__ */ c(f, { ...l, ref: r, children: i.isValidElement(s) ? i.cloneElement(s, void 0, a) : null });
-  }
-  return /* @__PURE__ */ c(f, { ...l, ref: r, children: n });
-});
-y.displayName = "Slot";
-var f = i.forwardRef((e, r) => {
-  const { children: n, ...l } = e;
-  if (i.isValidElement(n)) {
-    const t = R(n), o = C(l, n.props);
-    return n.type !== i.Fragment && (o.ref = r ? m(r, t) : t), i.cloneElement(n, o);
-  }
-  return i.Children.count(n) > 1 ? i.Children.only(null) : null;
-});
-f.displayName = "SlotClone";
-var g = ({ children: e }) => /* @__PURE__ */ c(d, { children: e });
-function h(e) {
-  return i.isValidElement(e) && e.type === g;
-}
-function C(e, r) {
-  const n = { ...r };
-  for (const l in r) {
-    const t = e[l], o = r[l];
-    /^on[A-Z]/.test(l) ? t && o ? n[l] = (...a) => {
-      o(...a), t(...a);
-    } : t && (n[l] = t) : l === "style" ? n[l] = { ...t, ...o } : l === "className" && (n[l] = [t, o].filter(Boolean).join(" "));
-  }
-  return { ...e, ...n };
-}
-function R(e) {
-  var l, t;
-  let r = (l = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : l.get, n = r && "isReactWarning" in r && r.isReactWarning;
-  return n ? e.ref : (r = (t = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : t.get, n = r && "isReactWarning" in r && r.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
-}
-export {
-  g as S,
-  y as a
-};