@dmsi/wedgekit-react 0.0.139 → 0.0.141

package/dist/components/Display.js

@@ -2,7 +2,7 @@ import {
   Display,
   Display1,
   Display2
-} from "../chunk-AY7ELVQY.js";
+} from "../chunk-EUXB3XKL.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/FilterGroup.cjs

@@ -204,20 +204,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",
@@ -245,17 +248,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_runtime2.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx3.default)(
         "icon",
         `icon-${size}`,
@@ -283,7 +289,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -293,13 +300,15 @@ var Paragraph = (_a) => {
     "addOverflow",
     "children",
     "as",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Element,
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: (0, import_clsx4.default)(
         typography.paragraph,
@@ -332,7 +341,8 @@ var Checkbox = (_a) => {
     onChange,
     indeterminate,
     paragraphClassName,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -342,7 +352,8 @@ var Checkbox = (_a) => {
     "onChange",
     "indeterminate",
     "paragraphClassName",
-    "id"
+    "id",
+    "testid"
   ]);
   const selected = indeterminate || checked;
   const normalClassName = (0, import_clsx5.default)(
@@ -371,6 +382,7 @@ var Checkbox = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: id ? `${id}-input` : void 0,
       className: (0, import_clsx5.default)(
         "flex items-center",
@@ -384,6 +396,7 @@ var Checkbox = (_a) => {
             "input",
             __spreadValues({
               id: id ? `${id}-input` : void 0,
+              "data-testid": testid ? `${testid}-input` : void 0,
               type: "checkbox",
               className: "sr-only peer",
               disabled,
@@ -415,6 +428,7 @@ var Checkbox = (_a) => {
           Paragraph,
           {
             id: id ? `${id}-label` : void 0,
+            testid: testid ? `${testid}-label` : void 0,
             as: "span",
             padded: true,
             className: (0, import_clsx5.default)(
@@ -458,7 +472,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -472,7 +487,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx6.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -560,6 +576,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -569,7 +586,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -582,6 +599,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var OptionPill = (_a) => {
   var _b = _a, {
     id,
+    testid,
     selected = false,
     onClick,
     onRemove,
@@ -591,6 +609,7 @@ var OptionPill = (_a) => {
     className
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "selected",
     "onClick",
     "onRemove",
@@ -622,6 +641,7 @@ var OptionPill = (_a) => {
     "div",
     __spreadProps(__spreadValues(__spreadValues({
       id,
+      "data-testid": testid,
       onClick: handleOnClick
     }, props), additionalAttributes), {
       className: (0, import_clsx7.default)(
@@ -639,6 +659,7 @@ var OptionPill = (_a) => {
           Label,
           {
             id: id ? `${id}-label` : void 0,
+            testid: testid ? `${testid}-label` : void 0,
             padded: true,
             className: componentPaddingYUsingComponentGap,
             children
@@ -648,6 +669,7 @@ var OptionPill = (_a) => {
           Button,
           {
             id: id ? `${id}-remove-button` : void 0,
+            testid: testid ? `${testid}-remove-button` : void 0,
             onClick: handleOnRemove,
             disabled,
             className: (0, import_clsx7.default)(
@@ -693,7 +715,8 @@ var Link = (_a) => {
     color,
     paddedY,
     align,
-    underline = false
+    underline = false,
+    testid
   } = _b, props = __objRest(_b, [
     "as",
     "className",
@@ -703,7 +726,8 @@ var Link = (_a) => {
     "color",
     "paddedY",
     "align",
-    "underline"
+    "underline",
+    "testid"
   ]);
   const Component = as;
   const primaryStateStyles = variant === "primary" && !disabled && (0, import_clsx8.default)(
@@ -751,7 +775,8 @@ var Link = (_a) => {
         color: color ? `var(--color-${color})` : void 0
       }),
       "aria-disabled": disabled,
-      tabIndex: disabled ? -1 : void 0
+      tabIndex: disabled ? -1 : void 0,
+      "data-testid": testid
     })
   );
 };
@@ -802,6 +827,7 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
+    testid,
     before,
     after,
     type,
@@ -820,6 +846,7 @@ var InputBase = (_a) => {
     fullWidth = true
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "before",
     "after",
     "type",
@@ -884,6 +911,7 @@ var InputBase = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx9.default)(
@@ -936,6 +964,7 @@ var InputBase = (_a) => {
                   required
                 }, props), attributes), {
                   id: inputId,
+                  "data-testid": testid ? `${testid}-input` : void 0,
                   className: (0, import_clsx9.default)(
                     "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",
@@ -953,7 +982,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -968,7 +997,8 @@ var Input = (_a) => {
     onChange,
     onBlur,
     onClear,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -978,30 +1008,30 @@ var Input = (_a) => {
     "onChange",
     "onBlur",
     "onClear",
-    "id"
+    "id",
+    "testid"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
   (0, import_react.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]);
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    if (variant !== "currency") {
+      return;
+    }
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    if (!stringValue) {
+      return;
     }
-  }, [propValue, decimals, variant]);
+    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
+    setInternalValue(formatted);
+    setDisplayValue(formatCurrencyDisplay(formatted));
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -1054,6 +1084,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"
@@ -1085,14 +1116,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 === "") {
@@ -1129,6 +1152,9 @@ var Input = (_a) => {
     }
   };
   const handleBlur = (e) => {
+    if (!internalValue) {
+      return;
+    }
     if (variant === "currency") {
       const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
       setInternalValue(formatted);
@@ -1153,7 +1179,8 @@ var Input = (_a) => {
       before: getBeforeElement(),
       after: getAfterElement(),
       onChange: handleChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      testid
     })
   );
 };
@@ -1186,6 +1213,7 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
 var Search = (_a) => {
   var _b = _a, {
     id,
+    testid,
     label,
     error,
     children,
@@ -1196,6 +1224,7 @@ var Search = (_a) => {
     removeRoundness
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "label",
     "error",
     "children",
@@ -1225,6 +1254,7 @@ var Search = (_a) => {
       Input,
       __spreadValues({
         id,
+        testid,
         variant: "search",
         inputContainerRef,
         ref: inputRef,
@@ -1280,6 +1310,7 @@ var Search = (_a) => {
     ),
     renderMenu ? renderMenu({
       id: id ? `${id}-menu` : void 0,
+      testid: testid ? `${testid}-menu` : void 0,
       positionTo: inputContainerRef,
       show,
       setShow,
@@ -1296,6 +1327,7 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var FilterGroup = (_a) => {
   var _b = _a, {
     id,
+    testid,
     label,
     type = "link",
     open = false,
@@ -1308,6 +1340,7 @@ var FilterGroup = (_a) => {
     onSearchChange
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "label",
     "type",
     "open",
@@ -1333,7 +1366,8 @@ var FilterGroup = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: (0, import_clsx10.default)(
         "border-b border-border-primary-normal",
@@ -1367,6 +1401,7 @@ var FilterGroup = (_a) => {
                 Link,
                 {
                   id: id ? `${id}-clear-all` : void 0,
+                  testid: testid ? `${testid}-clear-all` : void 0,
                   className: (0, import_clsx10.default)("block", componentPaddingY),
                   onClick: handleClearAll,
                   children: "Clear All"
@@ -1399,6 +1434,7 @@ var FilterGroup = (_a) => {
                     Search,
                     {
                       id: id ? `${id}-search` : void 0,
+                      testid: testid ? `${testid}-search` : void 0,
                       style: { marginBottom: "2px" },
                       onChange: onSearchChange,
                       value: searchValue
@@ -1409,6 +1445,7 @@ var FilterGroup = (_a) => {
                     Link,
                     {
                       id: id ? `${id}-show-more` : void 0,
+                      testid: testid ? `${testid}-show-more` : void 0,
                       className: (0, import_clsx10.default)("block", "!items-start", componentPaddingY),
                       onClick: handleOnShowMore,
                       children: "Show More"
@@ -1440,11 +1477,13 @@ var FilterGroup = (_a) => {
 var FilterGroupItem = (_a) => {
   var _b = _a, {
     id,
+    testid,
     type = "link",
     children,
     onClick
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "type",
     "children",
     "onClick"
@@ -1453,6 +1492,7 @@ var FilterGroupItem = (_a) => {
     "div",
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       onClick: handleClick
     }, props), {
       className: (0, import_clsx10.default)(
@@ -1463,6 +1503,7 @@ var FilterGroupItem = (_a) => {
         FilterGroupItemChildComponent,
         __spreadProps(__spreadValues({}, props), {
           id: id ? `${id}-child` : void 0,
+          "data-testid": testid ? `${testid}-child` : void 0,
           type,
           count: props.count,
           children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center justify-between w-full", children: [

package/dist/components/FilterGroup.js

@@ -1,26 +1,26 @@
 "use client";
 import {
   OptionPill
-} from "../chunk-QNQ5K7NW.js";
+} from "../chunk-LM5MKBPM.js";
 import {
   Checkbox
-} from "../chunk-WT5XXW6G.js";
+} from "../chunk-WFQEE2OO.js";
 import {
   Search
-} from "../chunk-OB3URVCR.js";
-import "../chunk-R5TLUWDD.js";
+} from "../chunk-PMBEIP24.js";
+import "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Label
-} from "../chunk-S5K22XTH.js";
-import "../chunk-VG4EPHJA.js";
+} from "../chunk-JWCT72WR.js";
+import "../chunk-HVI3CL7Y.js";
 import {
   Link
-} from "../chunk-AOELEEUS.js";
-import "../chunk-H6LXXGX6.js";
+} from "../chunk-I6GEUF6Y.js";
+import "../chunk-FKMKHLQH.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import {
   baseTransition,
   componentGap,
@@ -42,6 +42,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var FilterGroup = (_a) => {
   var _b = _a, {
     id,
+    testid,
     label,
     type = "link",
     open = false,
@@ -54,6 +55,7 @@ var FilterGroup = (_a) => {
     onSearchChange
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "label",
     "type",
     "open",
@@ -79,7 +81,8 @@ var FilterGroup = (_a) => {
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: clsx(
         "border-b border-border-primary-normal",
@@ -113,6 +116,7 @@ var FilterGroup = (_a) => {
                 Link,
                 {
                   id: id ? `${id}-clear-all` : void 0,
+                  testid: testid ? `${testid}-clear-all` : void 0,
                   className: clsx("block", componentPaddingY),
                   onClick: handleClearAll,
                   children: "Clear All"
@@ -145,6 +149,7 @@ var FilterGroup = (_a) => {
                     Search,
                     {
                       id: id ? `${id}-search` : void 0,
+                      testid: testid ? `${testid}-search` : void 0,
                       style: { marginBottom: "2px" },
                       onChange: onSearchChange,
                       value: searchValue
@@ -155,6 +160,7 @@ var FilterGroup = (_a) => {
                     Link,
                     {
                       id: id ? `${id}-show-more` : void 0,
+                      testid: testid ? `${testid}-show-more` : void 0,
                       className: clsx("block", "!items-start", componentPaddingY),
                       onClick: handleOnShowMore,
                       children: "Show More"
@@ -186,11 +192,13 @@ var FilterGroup = (_a) => {
 var FilterGroupItem = (_a) => {
   var _b = _a, {
     id,
+    testid,
     type = "link",
     children,
     onClick
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "type",
     "children",
     "onClick"
@@ -199,6 +207,7 @@ var FilterGroupItem = (_a) => {
     "div",
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       onClick: handleClick
     }, props), {
       className: clsx(
@@ -209,6 +218,7 @@ var FilterGroupItem = (_a) => {
         FilterGroupItemChildComponent,
         __spreadProps(__spreadValues({}, props), {
           id: id ? `${id}-child` : void 0,
+          "data-testid": testid ? `${testid}-child` : void 0,
           type,
           count: props.count,
           children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between w-full", children: [

package/dist/components/FullViewportBox.cjs

@@ -26,12 +26,14 @@ module.exports = __toCommonJS(FullViewportBox_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 function FullViewportLayout({
   children,
-  id
+  id,
+  testid
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: "flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal",
       children
     }

package/dist/components/FullViewportBox.js

@@ -4,12 +4,14 @@ import "../chunk-ORMEWXMH.js";
 import { jsx } from "react/jsx-runtime";
 function FullViewportLayout({
   children,
-  id
+  id,
+  testid
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       id,
+      "data-testid": testid,
       className: "flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal",
       children
     }

package/dist/components/Grid.cjs

@@ -98,13 +98,15 @@ var Grid = ({
   padding,
   hasSideMenu = false,
   columns,
-  id
+  id,
+  testid
 }) => {
   const childCount = import_react.Children.count(children);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx.default)(
         padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
         padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",

package/dist/components/Grid.js

@@ -66,13 +66,15 @@ var Grid = ({
   padding,
   hasSideMenu = false,
   columns,
-  id
+  id,
+  testid
 }) => {
   const childCount = Children.count(children);
   return /* @__PURE__ */ jsx(
     "div",
     {
       id,
+      "data-testid": testid,
       className: clsx(
         padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
         padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",

package/dist/components/Heading.cjs

@@ -203,7 +203,8 @@ var Heading = (_a) => {
     color,
     align,
     variant = "heading1",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -211,7 +212,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;
@@ -219,6 +221,7 @@ var Heading = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,

package/dist/components/Heading.js

@@ -3,7 +3,7 @@ import {
   Heading1,
   Heading2,
   Heading3
-} from "../chunk-J6LETUNM.js";
+} from "../chunk-AZ7LVLOK.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {