@dmsi/wedgekit-react 0.0.140 → 0.0.142

package/dist/components/MenuOption.cjs

@@ -202,20 +202,23 @@ var Label = (_a) => {
     className,
     color,
     align,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "as",
     "padded",
     "className",
     "color",
     "align",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         typography.label,
         align === "left" && "text-left",
@@ -246,7 +249,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -256,13 +260,15 @@ var Paragraph = (_a) => {
     "addOverflow",
     "children",
     "as",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Element,
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: (0, import_clsx3.default)(
         typography.paragraph,
@@ -290,17 +296,20 @@ function Icon(_a) {
   var _b = _a, {
     name,
     size = 24,
-    variant = "outline"
+    variant = "outline",
+    testid
   } = _b, props = __objRest(_b, [
     "name",
     "size",
-    "variant"
+    "variant",
+    "testid"
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx4.default)(
         "icon",
         `icon-${size}`,
@@ -340,6 +349,7 @@ var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var MenuOption = ({
   id,
+  testid,
   children,
   disabled = false,
   variant = "normal",
@@ -413,6 +423,7 @@ var MenuOption = ({
       "div",
       __spreadProps(__spreadValues({
         id,
+        "data-testid": testid,
         ref: actualRef,
         className: (0, import_clsx5.default)(
           "flex items-center cursor-pointer w-full text-left relative outline-none",
@@ -481,6 +492,7 @@ var MenuOption = ({
       MenuOption,
       {
         id: id ? `${id}-back` : void 0,
+        testid: testid ? `${testid}-back` : void 0,
         onClick: () => {
           closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
         },

package/dist/components/MenuOption.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-VH3EJNVE.js";
+} from "../chunk-FFU6FB3K.js";
 import "../chunk-WNQ53SVY.js";
-import "../chunk-S5K22XTH.js";
-import "../chunk-VG4EPHJA.js";
-import "../chunk-IGQVA7SC.js";
+import "../chunk-JWCT72WR.js";
+import "../chunk-HVI3CL7Y.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/MobileDataGrid.cjs

@@ -71,17 +71,20 @@ function Icon(_a) {
   var _b = _a, {
     name,
     size = 24,
-    variant = "outline"
+    variant = "outline",
+    testid
   } = _b, props = __objRest(_b, [
     "name",
     "size",
-    "variant"
+    "variant",
+    "testid"
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx.default)(
         "icon",
         `icon-${size}`,
@@ -286,7 +289,8 @@ var Stack = (_a) => {
     id,
     noGap,
     marginTop,
-    marginBottom
+    marginBottom,
+    testid
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -322,14 +326,16 @@ var Stack = (_a) => {
     "id",
     "noGap",
     "marginTop",
-    "marginBottom"
+    "marginBottom",
+    "testid"
   ]);
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
@@ -408,7 +414,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -422,7 +429,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx4.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -510,6 +518,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -519,7 +528,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -533,12 +542,14 @@ function Theme({
   theme,
   children,
   id,
+  testid,
   ref
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: "contents",
       "data-theme": theme,
       ref: (e) => {
@@ -560,7 +571,8 @@ var Heading = (_a) => {
     color,
     align,
     variant = "heading1",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -568,7 +580,8 @@ var Heading = (_a) => {
     "color",
     "align",
     "variant",
-    "id"
+    "id",
+    "testid"
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
@@ -576,6 +589,7 @@ var Heading = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx5.default)(
         typography[variant],
         className,
@@ -612,7 +626,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -622,13 +637,15 @@ var Paragraph = (_a) => {
     "addOverflow",
     "children",
     "as",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Element,
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: (0, import_clsx6.default)(
         typography.paragraph,
@@ -658,12 +675,14 @@ function MobileDataGrid({
   getId,
   renderLink,
   renderChevron,
-  id
+  id,
+  testid
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx7.default)(
         "rounded",
         "overflow-hidden",
@@ -676,6 +695,7 @@ function MobileDataGrid({
           MobileDataGridHeader,
           {
             id: id ? `${id}-header` : void 0,
+            testid: testid ? `${testid}-header` : void 0,
             header
           }
         ),
@@ -683,6 +703,7 @@ function MobileDataGrid({
           MobileDataGridCard,
           {
             id: id ? `${id}-card-${getId(item)}` : void 0,
+            testid: testid ? `${testid}-card-${getId(item)}` : void 0,
             data: item,
             columns,
             renderLink,
@@ -694,8 +715,8 @@ function MobileDataGrid({
     }
   );
 }
-function MobileDataGridHeader({ header, id }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id, className: "sticky top-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+function MobileDataGridHeader({ header, id, testid }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id, "data-testid": testid, className: "sticky top-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Stack,
     {
       horizontal: true,
@@ -713,9 +734,10 @@ function MobileDataGridCard({
   columns,
   renderLink,
   renderChevron,
-  id
+  id,
+  testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id, "data-testid": testid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Stack, { sizing: "component", padding: true, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
         renderLink && renderLink(data),
@@ -724,6 +746,7 @@ function MobileDataGridCard({
             Button,
             {
               id: id ? `${id}-docs-button` : void 0,
+              testid: testid ? `${testid}-docs-button` : void 0,
               iconOnly: true,
               variant: "tertiary",
               onClick: () => console.log("Edit", data.id),
@@ -734,6 +757,7 @@ function MobileDataGridCard({
             Button,
             {
               id: id ? `${id}-swap-button` : void 0,
+              testid: testid ? `${testid}-swap-button` : void 0,
               iconOnly: true,
               variant: "tertiary",
               onClick: () => console.log("Edit", data.id),

package/dist/components/MobileDataGrid.js

@@ -1,21 +1,21 @@
 import {
   Theme
-} from "../chunk-6DONKNDT.js";
+} from "../chunk-EWGHVZL5.js";
 import {
   Heading3
-} from "../chunk-J6LETUNM.js";
+} from "../chunk-AZ7LVLOK.js";
 import {
   Stack
-} from "../chunk-EO3JJWFW.js";
+} from "../chunk-N6JVLYEE.js";
 import {
   Paragraph
-} from "../chunk-VG4EPHJA.js";
+} from "../chunk-HVI3CL7Y.js";
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 
@@ -29,12 +29,14 @@ function MobileDataGrid({
   getId,
   renderLink,
   renderChevron,
-  id
+  id,
+  testid
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       id,
+      "data-testid": testid,
       className: clsx(
         "rounded",
         "overflow-hidden",
@@ -47,6 +49,7 @@ function MobileDataGrid({
           MobileDataGridHeader,
           {
             id: id ? `${id}-header` : void 0,
+            testid: testid ? `${testid}-header` : void 0,
             header
           }
         ),
@@ -54,6 +57,7 @@ function MobileDataGrid({
           MobileDataGridCard,
           {
             id: id ? `${id}-card-${getId(item)}` : void 0,
+            testid: testid ? `${testid}-card-${getId(item)}` : void 0,
             data: item,
             columns,
             renderLink,
@@ -65,8 +69,8 @@ function MobileDataGrid({
     }
   );
 }
-function MobileDataGridHeader({ header, id }) {
-  return /* @__PURE__ */ jsx("div", { id, className: "sticky top-0", children: /* @__PURE__ */ jsx(Theme, { theme: "brand", children: /* @__PURE__ */ jsx(
+function MobileDataGridHeader({ header, id, testid }) {
+  return /* @__PURE__ */ jsx("div", { id, "data-testid": testid, className: "sticky top-0", children: /* @__PURE__ */ jsx(Theme, { theme: "brand", children: /* @__PURE__ */ jsx(
     Stack,
     {
       horizontal: true,
@@ -84,9 +88,10 @@ function MobileDataGridCard({
   columns,
   renderLink,
   renderChevron,
-  id
+  id,
+  testid
 }) {
-  return /* @__PURE__ */ jsxs("div", { id, children: [
+  return /* @__PURE__ */ jsxs("div", { id, "data-testid": testid, children: [
     /* @__PURE__ */ jsxs(Stack, { sizing: "component", padding: true, children: [
       /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
         renderLink && renderLink(data),
@@ -95,6 +100,7 @@ function MobileDataGridCard({
             Button,
             {
               id: id ? `${id}-docs-button` : void 0,
+              testid: testid ? `${testid}-docs-button` : void 0,
               iconOnly: true,
               variant: "tertiary",
               onClick: () => console.log("Edit", data.id),
@@ -105,6 +111,7 @@ function MobileDataGridCard({
             Button,
             {
               id: id ? `${id}-swap-button` : void 0,
+              testid: testid ? `${testid}-swap-button` : void 0,
               iconOnly: true,
               variant: "tertiary",
               onClick: () => console.log("Edit", data.id),

package/dist/components/Modal.cjs

@@ -205,7 +205,8 @@ var Heading = (_a) => {
     color,
     align,
     variant = "heading1",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -213,7 +214,8 @@ var Heading = (_a) => {
     "color",
     "align",
     "variant",
-    "id"
+    "id",
+    "testid"
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
@@ -221,6 +223,7 @@ var Heading = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,
@@ -261,7 +264,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -275,7 +279,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx3.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -363,6 +368,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -372,7 +378,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -387,17 +393,20 @@ function Icon(_a) {
   var _b = _a, {
     name,
     size = 24,
-    variant = "outline"
+    variant = "outline",
+    testid
   } = _b, props = __objRest(_b, [
     "name",
     "size",
-    "variant"
+    "variant",
+    "testid"
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx4.default)(
         "icon",
         `icon-${size}`,
@@ -420,12 +429,14 @@ var ModalHeader = ({
   hideCloseIcon,
   headerIcon,
   onClose,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx5.default)(
         "flex justify-between items-center",
         layoutPaddding,
@@ -434,12 +445,13 @@ var ModalHeader = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, as: "p", children: title })
+          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
         ] }),
         !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
@@ -458,12 +470,14 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
   children,
-  id
+  id,
+  testid
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx6.default)(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,
@@ -482,12 +496,14 @@ var ModalButtons = ({
   onClose,
   onContinue,
   customActions,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx7.default)(
         "border-t border-neutral-300 flex justify-end",
         layoutPaddding,
@@ -498,6 +514,7 @@ var ModalButtons = ({
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
             variant: "secondary",
             leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
@@ -509,6 +526,7 @@ var ModalButtons = ({
           Button,
           {
             id: id ? `${id}-continue-button` : void 0,
+            testid: testid ? `${testid}-continue-button` : void 0,
             variant: "primary",
             leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
@@ -531,12 +549,14 @@ var ModalScrim = ({
   children,
   onClick,
   ref,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx8.default)(
         "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
@@ -673,6 +693,7 @@ var sizes = {
 };
 var Modal = ({
   id,
+  testid,
   title,
   open = false,
   size = "small",
@@ -781,6 +802,7 @@ var Modal = ({
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
+        testid: testid ? `${testid}-scrim` : void 0,
         size,
         ref: bgRef,
         show: open,
@@ -789,6 +811,7 @@ var Modal = ({
           "div",
           {
             id,
+            "data-testid": testid,
             ref: modalRef,
             className: (0, import_clsx9.default)(
               "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
@@ -802,6 +825,7 @@ var Modal = ({
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
+                  testid: testid ? `${testid}-header` : void 0,
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
@@ -812,6 +836,7 @@ var Modal = ({
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
+                  testid: testid ? `${testid}-content` : void 0,
                   fixedHeightScrolling: computedFixedHeightScrolling,
                   children
                 }
@@ -820,6 +845,7 @@ var Modal = ({
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
+                  testid: testid ? `${testid}-buttons` : void 0,
                   onClose: handleClose,
                   onContinue,
                   customActions

package/dist/components/Modal.js

@@ -1,17 +1,17 @@
 "use client";
 import {
   Modal
-} from "../chunk-D2YP2BTN.js";
+} from "../chunk-5GOJRLQO.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-CG2NIXZE.js";
-import "../chunk-FWPJ73IK.js";
-import "../chunk-6UI5GABI.js";
-import "../chunk-4JLU7TAC.js";
-import "../chunk-J6LETUNM.js";
+import "../chunk-C4JGTH6G.js";
+import "../chunk-SYEJVSE4.js";
+import "../chunk-R7ELP5C5.js";
+import "../chunk-ZFOANBWG.js";
+import "../chunk-AZ7LVLOK.js";
 import "../chunk-WNQ53SVY.js";
 import "../chunk-4T7F5BZZ.js";
-import "../chunk-H6LXXGX6.js";
-import "../chunk-IGQVA7SC.js";
+import "../chunk-FKMKHLQH.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {