@dmsi/wedgekit-react 0.0.140 → 0.0.141

package/dist/{chunk-4OS6APPF.js → chunk-4LXG6QNT.js}

@@ -8,10 +8,11 @@ import {
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 function Card(props) {
-  const _a = props, { children, selected } = _a, rest = __objRest(_a, ["children", "selected"]);
+  const _a = props, { children, selected, testid } = _a, rest = __objRest(_a, ["children", "selected", "testid"]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({}, rest), {
+      "data-testid": testid,
       className: clsx(
         "rounded-sm p-desktop-layout-padding",
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",

package/dist/{chunk-KS4RDR6P.js → chunk-4NCDT5ZY.js}

@@ -1,21 +1,21 @@
 import {
   Menu
-} from "./chunk-37TJJQL3.js";
+} from "./chunk-YR7JUKYO.js";
 import {
   useSubMenuSystem
 } from "./chunk-5GUW4DUY.js";
 import {
   MenuOption
-} from "./chunk-VH3EJNVE.js";
+} from "./chunk-FFU6FB3K.js";
 import {
   Search
-} from "./chunk-OB3URVCR.js";
+} from "./chunk-PMBEIP24.js";
 import {
   CSS
 } from "./chunk-WVUIIBRR.js";
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   componentPadding,
   paddingUsingComponentGap
@@ -53,7 +53,8 @@ var DataGridCell = memo(
       error,
       warning,
       center,
-      width
+      width,
+      testid
     } = _b, props = __objRest(_b, [
       "id",
       "type",
@@ -69,7 +70,8 @@ var DataGridCell = memo(
       "error",
       "warning",
       "center",
-      "width"
+      "width",
+      "testid"
     ]);
     const Element = type === "header" ? "th" : "td";
     const timerRef = useRef(null);
@@ -140,6 +142,7 @@ var DataGridCell = memo(
       Element,
       __spreadProps(__spreadValues({
         id,
+        "data-testid": testid,
         className: clsx("flex h-10", !width && "flex-1"),
         style: { width }
       }, props), {
@@ -171,6 +174,7 @@ function DataCellHeader(_a) {
     setNodeRef,
     node,
     id,
+    testid,
     useMenuDefaultMinWidth
   } = _b, props = __objRest(_b, [
     "header",
@@ -178,6 +182,7 @@ function DataCellHeader(_a) {
     "setNodeRef",
     "node",
     "id",
+    "testid",
     "useMenuDefaultMinWidth"
   ]);
   var _a2;
@@ -223,6 +228,7 @@ function DataCellHeader(_a) {
     DataGridCell,
     __spreadProps(__spreadValues({
       id,
+      testid,
       ref: setNodeRef ? setNodeRef : ref,
       type: "header",
       component: "header",
@@ -236,6 +242,7 @@ function DataCellHeader(_a) {
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
+            testid: testid ? `${testid}-menu` : void 0,
             ref: menuRootRef,
             positionTo: node ? node : ref,
             show: showMenu,
@@ -246,14 +253,16 @@ function DataCellHeader(_a) {
               /* @__PURE__ */ jsx(
                 MenuOption,
                 __spreadProps(__spreadValues({
-                  id: id ? `${id}-filter-option` : void 0
+                  id: id ? `${id}-filter-option` : void 0,
+                  testid: testid ? `${testid}-filter-option` : void 0
                 }, subMenuListeners), {
                   subMenu: (_b2) => {
                     var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
                     return /* @__PURE__ */ jsxs(
                       Menu,
                       __spreadProps(__spreadValues({
-                        id: id ? `${id}-filter-submenu` : void 0
+                        id: id ? `${id}-filter-submenu` : void 0,
+                        testid: testid ? `${testid}-filter-submenu` : void 0
                       }, props2), {
                         show: isMenuActive(menuId, subMenuLevel),
                         ref: (el) => {
@@ -265,6 +274,7 @@ function DataCellHeader(_a) {
                             Search,
                             {
                               id: id ? `${id}-filter-search` : void 0,
+                              testid: testid ? `${testid}-filter-search` : void 0,
                               onChange: (event) => {
                                 setFilter(event.target.value);
                               },
@@ -280,6 +290,7 @@ function DataCellHeader(_a) {
                             MenuOption,
                             {
                               id: id ? `${id}-filter-contains` : void 0,
+                              testid: testid ? `${testid}-filter-contains` : void 0,
                               onClick: handleFilterFnChange,
                               before: menuOptionIcon("includesString"),
                               children: "Contains"
@@ -289,6 +300,7 @@ function DataCellHeader(_a) {
                             MenuOption,
                             {
                               id: id ? `${id}-filter-startswith` : void 0,
+                              testid: testid ? `${testid}-filter-startswith` : void 0,
                               onClick: handleFilterFnChange,
                               before: menuOptionIcon("startsWith"),
                               children: "Starts with"
@@ -298,6 +310,7 @@ function DataCellHeader(_a) {
                             MenuOption,
                             {
                               id: id ? `${id}-filter-endswith` : void 0,
+                              testid: testid ? `${testid}-filter-endswith` : void 0,
                               onClick: handleFilterFnChange,
                               before: menuOptionIcon("endsWith"),
                               children: "Ends with"

package/dist/{chunk-R5TLUWDD.js → chunk-4T3DRGLF.js}

@@ -5,10 +5,10 @@ import {
 } from "./chunk-5UH6QUFB.js";
 import {
   Label
-} from "./chunk-S5K22XTH.js";
+} from "./chunk-JWCT72WR.js";
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   baseTransition,
   componentGap,
@@ -33,6 +33,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var InputBase = (_a) => {
   var _b = _a, {
     id,
+    testid,
     before,
     after,
     type,
@@ -51,6 +52,7 @@ var InputBase = (_a) => {
     fullWidth = true
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "before",
     "after",
     "type",
@@ -115,6 +117,7 @@ var InputBase = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: inputId,
       ref: inputContainerRef,
       className: clsx(
@@ -167,6 +170,7 @@ var InputBase = (_a) => {
                   required
                 }, props), attributes), {
                   id: inputId,
+                  "data-testid": testid ? `${testid}-input` : void 0,
                   className: clsx(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -184,7 +188,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption && /* @__PURE__ */ jsx("div", { id: id ? `${id}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ jsx("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -199,7 +203,8 @@ var Input = (_a) => {
     onChange,
     onBlur,
     onClear,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -209,30 +214,30 @@ var Input = (_a) => {
     "onChange",
     "onBlur",
     "onClear",
-    "id"
+    "id",
+    "testid"
   ]);
   const [internalValue, setInternalValue] = useState("");
   const [displayValue, setDisplayValue] = useState("");
   useEffect(() => {
     var _a2;
     const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
-    if (variant === "currency") {
-      if (propValue === void 0 || propValue === "" || typeof propValue === "number" && isNaN(propValue)) {
-        setInternalValue("");
-        setDisplayValue("");
-      } else {
-        const numValue = typeof propValue === "string" ? parseFloat(propValue) : propValue;
-        if (!isNaN(numValue)) {
-          const formatted = numValue.toFixed(decimals != null ? decimals : 2);
-          setInternalValue(formatted);
-          setDisplayValue(formatCurrencyDisplay(formatted));
-        }
-      }
-    } else {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
+    setInternalValue(stringValue);
+    setDisplayValue(stringValue);
+  }, [propValue]);
+  useEffect(() => {
+    var _a2;
+    if (variant !== "currency") {
+      return;
     }
-  }, [propValue, decimals, variant]);
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    if (!stringValue) {
+      return;
+    }
+    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
+    setInternalValue(formatted);
+    setDisplayValue(formatCurrencyDisplay(formatted));
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -285,6 +290,7 @@ var Input = (_a) => {
           Icon,
           {
             id: id ? `${id}-clear-button` : void 0,
+            testid: testid ? `${testid}-clear-button` : void 0,
             name: "close",
             onClick: handleSearchReset,
             className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -316,14 +322,6 @@ var Input = (_a) => {
   };
   const handleChange = (e) => {
     const rawValue = e.target.value;
-    if (variant === "search") {
-      setInternalValue(rawValue);
-      setDisplayValue(rawValue);
-      if (typeof onChange === "function") {
-        onChange(e);
-      }
-      return;
-    }
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, "");
       if (raw === "") {
@@ -360,6 +358,9 @@ var Input = (_a) => {
     }
   };
   const handleBlur = (e) => {
+    if (!internalValue) {
+      return;
+    }
     if (variant === "currency") {
       const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
       setInternalValue(formatted);
@@ -384,7 +385,8 @@ var Input = (_a) => {
       before: getBeforeElement(),
       after: getAfterElement(),
       onChange: handleChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      testid
     })
   );
 };

package/dist/{chunk-QZGUMB7T.js → chunk-4VTOTNKJ.js}

@@ -14,6 +14,7 @@ import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Tooltip = ({
   id,
+  testid,
   message,
   position = "top",
   children,
@@ -80,6 +81,7 @@ var Tooltip = ({
     "div",
     {
       id,
+      "data-testid": testid,
       ref,
       className: "relative inline-grid grid-cols-[auto_1fr] items-center",
       onMouseEnter: handleMouseEnter,
@@ -91,6 +93,7 @@ var Tooltip = ({
             "div",
             {
               id: id ? `${id}-message` : void 0,
+              "data-testid": testid ? `${testid}-message` : void 0,
               ref: tooltipRef,
               style: {
                 position: "fixed",

package/dist/{chunk-Y4HUYAI5.js → chunk-56Y5DDG3.js}

@@ -1,9 +1,9 @@
 import {
   InputBase
-} from "./chunk-R5TLUWDD.js";
+} from "./chunk-4T3DRGLF.js";
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   __objRest,
   __spreadProps,
@@ -17,6 +17,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Select = (_a) => {
   var _b = _a, {
     id,
+    testid,
     label,
     error,
     children,
@@ -30,6 +31,7 @@ var Select = (_a) => {
     value
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "label",
     "error",
     "children",
@@ -59,6 +61,7 @@ var Select = (_a) => {
       InputBase,
       __spreadProps(__spreadValues({
         id,
+        testid,
         inputContainerRef,
         ref: inputRef,
         label,

package/dist/{chunk-D2YP2BTN.js → chunk-5GOJRLQO.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk-4RJKB7LC.js";
 import {
   ModalButtons
-} from "./chunk-CG2NIXZE.js";
+} from "./chunk-C4JGTH6G.js";
 import {
   ModalContent
-} from "./chunk-FWPJ73IK.js";
+} from "./chunk-SYEJVSE4.js";
 import {
   ModalHeader
-} from "./chunk-6UI5GABI.js";
+} from "./chunk-R7ELP5C5.js";
 import {
   ModalScrim
-} from "./chunk-4JLU7TAC.js";
+} from "./chunk-ZFOANBWG.js";
 import {
   useMatchesMobile
 } from "./chunk-WNQ53SVY.js";
@@ -85,6 +85,7 @@ var sizes = {
 };
 var Modal = ({
   id,
+  testid,
   title,
   open = false,
   size = "small",
@@ -193,6 +194,7 @@ var Modal = ({
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
+        testid: testid ? `${testid}-scrim` : void 0,
         size,
         ref: bgRef,
         show: open,
@@ -201,6 +203,7 @@ var Modal = ({
           "div",
           {
             id,
+            "data-testid": testid,
             ref: modalRef,
             className: clsx(
               "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
@@ -214,6 +217,7 @@ var Modal = ({
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
+                  testid: testid ? `${testid}-header` : void 0,
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
@@ -224,6 +228,7 @@ var Modal = ({
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
+                  testid: testid ? `${testid}-content` : void 0,
                   fixedHeightScrolling: computedFixedHeightScrolling,
                   children
                 }
@@ -232,6 +237,7 @@ var Modal = ({
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
+                  testid: testid ? `${testid}-buttons` : void 0,
                   onClose: handleClose,
                   onContinue,
                   customActions

package/dist/{chunk-J6LETUNM.js → chunk-AZ7LVLOK.js}

@@ -18,7 +18,8 @@ var Heading = (_a) => {
     color,
     align,
     variant = "heading1",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -26,7 +27,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;
@@ -34,6 +36,7 @@ var Heading = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: clsx(
         typography[variant],
         className,

package/dist/{chunk-TTO4PL7Y.js → chunk-BATIOCXB.js}

@@ -1,6 +1,6 @@
 import {
   Paragraph
-} from "./chunk-VG4EPHJA.js";
+} from "./chunk-HVI3CL7Y.js";
 import {
   baseTransition,
   componentGap
@@ -21,7 +21,8 @@ var Radio = (_a) => {
     disabled,
     checked,
     readOnly,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "label",
@@ -29,7 +30,8 @@ var Radio = (_a) => {
     "disabled",
     "checked",
     "readOnly",
-    "id"
+    "id",
+    "testid"
   ]);
   const radioId = id;
   const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
@@ -61,6 +63,7 @@ var Radio = (_a) => {
             "input",
             __spreadValues({
               id: radioId,
+              "data-testid": testid,
               type: "radio",
               className: "sr-only peer",
               disabled,
@@ -94,7 +97,7 @@ var Radio = (_a) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ jsx(Paragraph, { id: `${radioId}-label`, padded: true, color: paragraphColor, children: label })
+        label && /* @__PURE__ */ jsx(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
       ]
     }
   );

package/dist/{chunk-CG2NIXZE.js → chunk-C4JGTH6G.js}

@@ -1,9 +1,9 @@
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-FKMKHLQH.js";
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   layoutGroupGap,
   layoutPaddding
@@ -16,12 +16,14 @@ var ModalButtons = ({
   onClose,
   onContinue,
   customActions,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
       id,
+      "data-testid": testid,
       className: clsx(
         "border-t border-neutral-300 flex justify-end",
         layoutPaddding,
@@ -32,6 +34,7 @@ var ModalButtons = ({
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
             variant: "secondary",
             leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }),
             onClick: onClose,
@@ -43,6 +46,7 @@ var ModalButtons = ({
           Button,
           {
             id: id ? `${id}-continue-button` : void 0,
+            testid: testid ? `${testid}-continue-button` : void 0,
             variant: "primary",
             leftIcon: /* @__PURE__ */ jsx(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",

package/dist/{chunk-O4M2GISS.js → chunk-CYZL57LH.js}

@@ -18,7 +18,8 @@ var Subheader = (_a) => {
     align,
     color,
     tall,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -26,13 +27,15 @@ var Subheader = (_a) => {
     "align",
     "color",
     "tall",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ jsx(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: clsx(
         typography.subheader,
         className,

package/dist/{chunk-6HIALT5L.js → chunk-E7D24OHM.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   typography
 } from "./chunk-RDLEIAQU.js";
@@ -21,7 +21,8 @@ var Caption = (_a) => {
     style = "default",
     color,
     align,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -29,14 +30,16 @@ var Caption = (_a) => {
     "style",
     "color",
     "align",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
-  return /* @__PURE__ */ jsxs("div", { id, className: "flex gap-1", children: [
+  return /* @__PURE__ */ jsxs("div", { id, "data-testid": testid, className: "flex gap-1", children: [
     /* @__PURE__ */ jsx(
       WhichIcon,
       {
         id,
+        testid,
         style,
         size: 16,
         className: "mt-[3px] desktop:mt-0"
@@ -46,6 +49,7 @@ var Caption = (_a) => {
       Element,
       __spreadProps(__spreadValues({
         id: id ? `${id}-text` : void 0,
+        "data-testid": testid ? `${testid}-text` : void 0,
         className: clsx(
           typography.caption.replace("text-text-primary-normal", ""),
           (style === "default" || style === "info") && "text-text-secondary-normal",
@@ -70,13 +74,15 @@ var WhichIcon = ({
   style,
   size,
   className,
-  id
+  id,
+  testid
 }) => {
   if (style === "success") {
     return /* @__PURE__ */ jsx("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ jsx(
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "check_circle",
         size
@@ -88,6 +94,7 @@ var WhichIcon = ({
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "warning",
         size
@@ -99,6 +106,7 @@ var WhichIcon = ({
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "info",
         size
@@ -110,6 +118,7 @@ var WhichIcon = ({
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "info",
         size

package/dist/{chunk-3ZUSYRI7.js → chunk-EPQLWHCL.js}

@@ -1,9 +1,9 @@
 // src/components/HorizontalDivider.tsx
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-function HorizontalDivider({ id, hideOnMobile }) {
+function HorizontalDivider({ id, testid, hideOnMobile }) {
   const hideOnMobileStyle = clsx(hideOnMobile && "hidden desktop:block");
-  return /* @__PURE__ */ jsx("hr", { id, className: clsx("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
+  return /* @__PURE__ */ jsx("hr", { id, "data-testid": testid, className: clsx("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
 }
 
 export {

package/dist/{chunk-AY7ELVQY.js → chunk-EUXB3XKL.js}

@@ -18,7 +18,8 @@ var Display = (_a) => {
     color,
     align,
     variant = "display1",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -26,7 +27,8 @@ var Display = (_a) => {
     "color",
     "align",
     "variant",
-    "id"
+    "id",
+    "testid"
   ]);
   const defaultElement = variant === "display1" ? "h1" : "h2";
   const Element = as != null ? as : defaultElement;
@@ -34,6 +36,7 @@ var Display = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: clsx(
         typography[variant],
         className,