@ogcio/design-system-react 1.15.2 → 1.16.0

package/dist/table/table-pagination.js

@@ -1,35 +1,36 @@
-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"
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import { cn as m } from "../cn.js";
+import { translate as s } from "../i18n/utility.js";
+import { IconButton as n } 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"
 }) => {
-  const c = () => {
-    i > 1 && n(i - 1);
-  }, d = () => {
-    i < a && n(i + 1);
+  const d = () => {
+    a > 1 && e(a - 1);
+  }, p = () => {
+    a < l && e(a + 1);
   };
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: f(
+      className: m(
         {
-          "gi-justify-first": s === "start",
-          "gi-justify-center": s === "center",
-          "gi-justify-end": s === "end"
+          "gi-justify-first": t === "start",
+          "gi-justify-center": t === "center",
+          "gi-justify-end": t === "end"
         },
         "gi-table-pagination"
       ),
       children: [
-        /* @__PURE__ */ l(
-          o,
+        /* @__PURE__ */ i(
+          n,
           {
-            disabled: i === 1,
-            onClick: () => n(1),
+            disabled: a === 1,
+            onClick: () => e(1),
             appearance: "dark",
             variant: "flat",
             className: "gi-mr-4",
@@ -38,11 +39,11 @@ const v = ({
             }
           }
         ),
-        /* @__PURE__ */ l(
-          o,
+        /* @__PURE__ */ i(
+          n,
           {
-            disabled: i === 1,
-            onClick: c,
+            disabled: a === 1,
+            onClick: d,
             appearance: "dark",
             variant: "flat",
             className: "gi-mr-2",
@@ -51,21 +52,37 @@ const v = ({
             }
           }
         ),
-        /* @__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,
+        /* @__PURE__ */ o(
+          "div",
           {
-            onClick: d,
-            disabled: i === a,
+            className: "gi-table-pagination-label gi-space-x-2",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ i("span", { children: s("table.pagination.page", {
+                defaultValue: "Page"
+              }) }),
+              /* @__PURE__ */ i(
+                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))
+                }
+              ),
+              /* @__PURE__ */ i("span", { children: s("table.pagination.ofTotal", {
+                totalPages: l,
+                defaultValue: `of ${l}`
+              }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          n,
+          {
+            onClick: p,
+            disabled: a === l,
             appearance: "dark",
             variant: "flat",
             className: "gi-ml-2",
@@ -74,11 +91,11 @@ const v = ({
             }
           }
         ),
-        /* @__PURE__ */ l(
-          o,
+        /* @__PURE__ */ i(
+          n,
           {
-            disabled: i === a,
-            onClick: () => n(a),
+            disabled: a === l,
+            onClick: () => e(l),
             appearance: "dark",
             variant: "flat",
             className: "gi-ml-4",
@@ -92,6 +109,6 @@ const v = ({
   );
 };
 export {
-  v as TablePagination,
-  v as default
+  j as TablePagination,
+  j as default
 };

package/dist/table/table.js

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

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

@@ -19,6 +19,7 @@ export declare const TextInput: import('react').ForwardRefExoticComponent<import
     halfFluid?: boolean;
     clearButtonEnabled?: boolean;
     containerProps?: any;
+    dataTestId?: string;
 } & import('react').RefAttributes<HTMLInputElement>>;
 /** @deprecated Use InputTextProps instead */
 export type TextInputProps = InputTextProps;

package/dist/textarea/textarea.js

@@ -1,73 +1,76 @@
 "use client";
-import { jsxs as u, Fragment as j, jsx as e } from "react/jsx-runtime";
-import { forwardRef as y, useRef as z, useState as g, useImperativeHandle as A, useEffect as H } from "react";
-import { cn as v } from "../cn.js";
-import { HintText as O } from "../hint-text/hint-text.js";
-import { translate as F } from "../i18n/utility.js";
-import { Icon as L } from "../icon/icon.js";
-import { IconButton as Y } from "../icon-button/icon-button.js";
-const $ = y(
+import { jsxs as g, Fragment as j, jsx as e } from "react/jsx-runtime";
+import { forwardRef as z, useRef as A, useState as v, useImperativeHandle as H, useEffect as O } from "react";
+import { cn as h } from "../cn.js";
+import { HintText as F } from "../hint-text/hint-text.js";
+import { translate as L } from "../i18n/utility.js";
+import { Icon as Y } from "../icon/icon.js";
+import { IconButton as $ } from "../icon-button/icon-button.js";
+const q = z(
   ({
-    value: o,
-    rows: h = 4,
-    cols: p = 100,
-    autoComplete: x = "on",
+    value: d,
+    rows: p = 4,
+    cols: x = 100,
+    autoComplete: b = "on",
     maxChars: t,
     halfFluid: N = !1,
     iconStart: i,
-    className: b,
-    clearButtonEnabled: d,
+    className: R,
+    clearButtonEnabled: u,
     onChange: a,
-    ...r
-  }, R) => {
-    const n = z(null), [m, V] = g(
+    name: r,
+    ...l
+  }, V) => {
+    const n = A(null), [f, I] = v(
       t
     );
-    A(R, () => n.current);
-    const [I, f] = g(""), l = o !== void 0, s = l ? String(o) : I;
-    H(() => {
-      t !== void 0 && V(t - s.length);
-    }, [s, t]);
-    const k = (c) => {
-      const T = c.target.value;
-      l || f(T), a && a(c);
+    H(V, () => n.current);
+    const [T, m] = v(""), s = d !== void 0, c = s ? String(d) : T;
+    O(() => {
+      t !== void 0 && I(t - c.length);
+    }, [c, t]);
+    const k = (o) => {
+      const y = o.target.value;
+      s || m(y), a && a(o);
     }, w = () => {
-      n.current && (l || f(""), a && a({
-        target: {
-          value: ""
-        }
+      n.current && (s || m(""), a && a({
+        target: { name: r, value: "" },
+        currentTarget: { name: r, value: "" },
+        type: "change",
+        bubbles: !0
       }), n.current.focus());
     };
-    return /* @__PURE__ */ u(j, { children: [
-      /* @__PURE__ */ e("div", { className: "gi-textarea-container", children: /* @__PURE__ */ u(
+    return /* @__PURE__ */ g(j, { children: [
+      /* @__PURE__ */ e("div", { className: "gi-textarea-container", children: /* @__PURE__ */ g(
         "div",
         {
-          className: v("gi-textarea-inner", {
+          className: h("gi-textarea-inner", {
             "gi-input-half-width": N
           }),
           children: [
-            i && /* @__PURE__ */ e("div", { className: "gi-text-area-icon-start", children: /* @__PURE__ */ e(L, { icon: i, size: "md", disabled: r.disabled }) }),
+            i && /* @__PURE__ */ e("div", { className: "gi-text-area-icon-start", children: /* @__PURE__ */ e(Y, { icon: i, size: "md", disabled: l.disabled }) }),
             /* @__PURE__ */ e(
               "textarea",
               {
-                rows: h,
-                cols: p,
-                autoComplete: x,
-                className: v(b, "gi-textarea"),
+                name: r,
+                rows: p,
+                cols: x,
+                autoComplete: b,
+                className: h(R, "gi-textarea"),
                 ref: n,
                 "data-icon-start": !!i,
-                "data-clear-enabled": d,
+                "data-clear-enabled": u,
                 maxLength: t,
-                value: s,
+                value: c,
                 onChange: k,
-                ...r
+                ...l
               }
             ),
-            d ? /* @__PURE__ */ e("div", { className: "gi-text-area-end-element", children: /* @__PURE__ */ e(
-              Y,
+            u ? /* @__PURE__ */ e("div", { className: "gi-text-area-end-element", children: /* @__PURE__ */ e(
+              $,
               {
                 type: "button",
-                disabled: r.disabled,
+                disabled: l.disabled,
                 icon: {
                   icon: "close"
                 },
@@ -81,18 +84,18 @@ const $ = y(
         }
       ) }),
       t && /* @__PURE__ */ e("div", { className: "gi-textarea-remaining-chars", children: /* @__PURE__ */ e(
-        O,
+        F,
         {
-          text: F("textarea.remainingChars", {
-            remainingChars: m,
-            defaultValue: `You have ${m} characters remaining`
+          text: L("textarea.remainingChars", {
+            remainingChars: f,
+            defaultValue: `You have ${f} characters remaining`
           })
         }
       ) })
     ] });
   }
 );
-$.displayName = "TextArea";
+q.displayName = "TextArea";
 export {
-  $ as TextArea
+  q as TextArea
 };

package/dist/toast/toast.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as o, Fragment as v } from "react/jsx-runtime";
+import { jsx as o, Fragment as y } from "react/jsx-runtime";
 import { useState as i, useEffect as m } from "react";
 import { createPortal as h } from "react-dom";
 import { cn as T } from "../cn.js";
@@ -7,13 +7,10 @@ import { translate as $ } from "../i18n/utility.js";
 import { Toast as w } from "./ds-toast.js";
 const b = [
   { x: "left", y: "top" },
-  { x: "left", y: "center" },
   { x: "left", y: "bottom" },
   { x: "center", y: "top" },
-  { x: "center", y: "center" },
   { x: "center", y: "bottom" },
   { x: "right", y: "top" },
-  { x: "right", y: "center" },
   { x: "right", y: "bottom" }
 ], u = {
   isMounted: !1
@@ -31,7 +28,7 @@ const b = [
         t
       ), u.isMounted = !1;
     };
-  }, []), l ? /* @__PURE__ */ o(v, { children: b.map((t) => {
+  }, []), l ? /* @__PURE__ */ o(y, { children: b.map((t) => {
     const d = e.filter(
       (a) => {
         var s, n;
@@ -84,18 +81,18 @@ const b = [
   animation: a = "fadeinup",
   slotAction: s
 }) => {
-  const [n, x] = i(!0), [y, g] = i(!1);
+  const [n, g] = i(!0), [v, x] = i(!1);
   m(() => {
     setTimeout(() => {
       f();
     }, d);
   }, []), m(() => {
     n || setTimeout(() => {
-      g(!0);
+      x(!0);
     }, 300);
   }, [n]);
-  const f = () => x(!1);
-  return y ? null : /* @__PURE__ */ o(
+  const f = () => g(!1);
+  return v ? null : /* @__PURE__ */ o(
     "div",
     {
       "data-testid": `${r}-${e || "info"}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogcio/design-system-react",
-  "version": "1.15.2",
+  "version": "1.16.0",
   "description": "The GOV IE design system React components.",
   "type": "module",
   "main": "dist/index.js",
@@ -51,8 +51,8 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "@ogcio/design-system-eslint-config": "1.2.6",
-    "@ogcio/design-system-tailwind": "1.13.3",
     "@ogcio/design-system-prettier-config": "1.0.6",
+    "@ogcio/design-system-tailwind": "1.14.0",
     "@ogcio/theme-doete": "1.0.0",
     "@ogcio/theme-govie": "1.7.0"
   },
@@ -70,6 +70,7 @@
     "storybook:build": "storybook build --stats-json",
     "storybook:test": "vitest --project=storybook",
     "storybook:coverage": "vitest --project=storybook --coverage",
-    "percy": "pnpm storybook:build && percy storybook ./storybook-static --config percy.yaml"
+    "percy": "pnpm storybook:build && percy storybook ./storybook-static --config percy.yaml",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
   }
 }