@dmsi/wedgekit-react 0.0.139 → 0.0.141

package/dist/components/DateInput.cjs

@@ -205,20 +205,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",
@@ -243,17 +246,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}`,
@@ -306,6 +312,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
+    testid,
     before,
     after,
     type,
@@ -324,6 +331,7 @@ var InputBase = (_a) => {
     fullWidth = true
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "before",
     "after",
     "type",
@@ -388,6 +396,7 @@ var InputBase = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx4.default)(
@@ -440,6 +449,7 @@ var InputBase = (_a) => {
                   required
                 }, props), attributes), {
                   id: inputId,
+                  "data-testid": testid ? `${testid}-input` : void 0,
                   className: (0, import_clsx4.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",
@@ -457,7 +467,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -472,7 +482,8 @@ var Input = (_a) => {
     onChange,
     onBlur,
     onClear,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -482,30 +493,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), {
@@ -558,6 +569,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"
@@ -589,14 +601,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 === "") {
@@ -633,6 +637,9 @@ var Input = (_a) => {
     }
   };
   const handleBlur = (e) => {
+    if (!internalValue) {
+      return;
+    }
     if (variant === "currency") {
       const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
       setInternalValue(formatted);
@@ -657,7 +664,8 @@ var Input = (_a) => {
       before: getBeforeElement(),
       after: getAfterElement(),
       onChange: handleChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      testid
     })
   );
 };
@@ -705,7 +713,8 @@ function DateCell(_a) {
     onMouseLeave,
     cellPadding = "",
     isRangeDisabled = false,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "date",
     "isInMonth",
@@ -720,12 +729,14 @@ function DateCell(_a) {
     "onMouseLeave",
     "cellPadding",
     "isRangeDisabled",
-    "id"
+    "id",
+    "testid"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
       id,
+      "data-testid": testid,
       className: (0, import_clsx5.default)(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
@@ -772,7 +783,8 @@ function CalendarRange({
   mode = "double",
   cardStyle = false,
   disableRange = false,
-  id
+  id,
+  testid
 }) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const parseDate = (d) => {
@@ -865,6 +877,7 @@ function CalendarRange({
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx5.default)(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
@@ -905,6 +918,7 @@ function CalendarRange({
                             "button",
                             {
                               id: id ? `${id}-prev-month-button` : void 0,
+                              "data-testid": testid ? `${testid}-prev-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx5.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -923,6 +937,7 @@ function CalendarRange({
                             "button",
                             {
                               id: id ? `${id}-next-month-button` : void 0,
+                              "data-testid": testid ? `${testid}-next-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx5.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -966,6 +981,7 @@ function CalendarRange({
                         DateCell,
                         {
                           id: id ? `${id}-date-${date.toString()}` : void 0,
+                          testid: testid ? `${testid}-date-${date.toString()}` : void 0,
                           date,
                           isInMonth: !!isInMonth,
                           isToday: !!isToday,
@@ -1143,6 +1159,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var DateInput = (_a) => {
   var _b = _a, {
     id,
+    testid,
     value,
     onChange,
     placeholder = "MM/DD/YYYY",
@@ -1151,6 +1168,7 @@ var DateInput = (_a) => {
     label
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "value",
     "onChange",
     "placeholder",
@@ -1300,6 +1318,7 @@ var DateInput = (_a) => {
       InputBase,
       __spreadProps(__spreadValues({
         id,
+        testid,
         ref: (el) => {
           triggerRef.current = el;
         }
@@ -1334,6 +1353,7 @@ var DateInput = (_a) => {
             CalendarRange,
             {
               id: id ? `${id}-calendar` : void 0,
+              testid: testid ? `${testid}-calendar` : void 0,
               from,
               to: to || from,
               onChange: handleDateChange,

package/dist/components/DateInput.js

@@ -10,15 +10,15 @@ import {
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-R5TLUWDD.js";
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-S5K22XTH.js";
+import "../chunk-JWCT72WR.js";
 import {
   CalendarRange
-} from "../chunk-PCCJ7L3N.js";
+} from "../chunk-NMVSRA5Y.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import {
   __objRest,
@@ -33,6 +33,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var DateInput = (_a) => {
   var _b = _a, {
     id,
+    testid,
     value,
     onChange,
     placeholder = "MM/DD/YYYY",
@@ -41,6 +42,7 @@ var DateInput = (_a) => {
     label
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "value",
     "onChange",
     "placeholder",
@@ -190,6 +192,7 @@ var DateInput = (_a) => {
       InputBase,
       __spreadProps(__spreadValues({
         id,
+        testid,
         ref: (el) => {
           triggerRef.current = el;
         }
@@ -224,6 +227,7 @@ var DateInput = (_a) => {
             CalendarRange,
             {
               id: id ? `${id}-calendar` : void 0,
+              testid: testid ? `${testid}-calendar` : void 0,
               from,
               to: to || from,
               onChange: handleDateChange,

package/dist/components/DateRangeInput.cjs

@@ -205,20 +205,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",
@@ -243,17 +246,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}`,
@@ -306,6 +312,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
+    testid,
     before,
     after,
     type,
@@ -324,6 +331,7 @@ var InputBase = (_a) => {
     fullWidth = true
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "before",
     "after",
     "type",
@@ -388,6 +396,7 @@ var InputBase = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx4.default)(
@@ -440,6 +449,7 @@ var InputBase = (_a) => {
                   required
                 }, props), attributes), {
                   id: inputId,
+                  "data-testid": testid ? `${testid}-input` : void 0,
                   className: (0, import_clsx4.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",
@@ -457,7 +467,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -472,7 +482,8 @@ var Input = (_a) => {
     onChange,
     onBlur,
     onClear,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -482,30 +493,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), {
@@ -558,6 +569,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"
@@ -589,14 +601,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 === "") {
@@ -633,6 +637,9 @@ var Input = (_a) => {
     }
   };
   const handleBlur = (e) => {
+    if (!internalValue) {
+      return;
+    }
     if (variant === "currency") {
       const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
       setInternalValue(formatted);
@@ -657,7 +664,8 @@ var Input = (_a) => {
       before: getBeforeElement(),
       after: getAfterElement(),
       onChange: handleChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      testid
     })
   );
 };
@@ -705,7 +713,8 @@ function DateCell(_a) {
     onMouseLeave,
     cellPadding = "",
     isRangeDisabled = false,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "date",
     "isInMonth",
@@ -720,12 +729,14 @@ function DateCell(_a) {
     "onMouseLeave",
     "cellPadding",
     "isRangeDisabled",
-    "id"
+    "id",
+    "testid"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
       id,
+      "data-testid": testid,
       className: (0, import_clsx5.default)(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
@@ -772,7 +783,8 @@ function CalendarRange({
   mode = "double",
   cardStyle = false,
   disableRange = false,
-  id
+  id,
+  testid
 }) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const parseDate = (d) => {
@@ -865,6 +877,7 @@ function CalendarRange({
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx5.default)(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
@@ -905,6 +918,7 @@ function CalendarRange({
                             "button",
                             {
                               id: id ? `${id}-prev-month-button` : void 0,
+                              "data-testid": testid ? `${testid}-prev-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx5.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -923,6 +937,7 @@ function CalendarRange({
                             "button",
                             {
                               id: id ? `${id}-next-month-button` : void 0,
+                              "data-testid": testid ? `${testid}-next-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx5.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -966,6 +981,7 @@ function CalendarRange({
                         DateCell,
                         {
                           id: id ? `${id}-date-${date.toString()}` : void 0,
+                          testid: testid ? `${testid}-date-${date.toString()}` : void 0,
                           date,
                           isInMonth: !!isInMonth,
                           isToday: !!isToday,
@@ -1151,6 +1167,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var DateRangeInput = (_a) => {
   var _b = _a, {
     id,
+    testid,
     value,
     onChange,
     placeholder = "MM/DD/YYYY - MM/DD/YYYY",
@@ -1161,6 +1178,7 @@ var DateRangeInput = (_a) => {
     label
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "value",
     "onChange",
     "placeholder",
@@ -1566,6 +1584,7 @@ var DateRangeInput = (_a) => {
       InputBase,
       __spreadProps(__spreadValues({
         id,
+        testid,
         ref: (el) => {
           triggerRef.current = el;
         }
@@ -1600,6 +1619,7 @@ var DateRangeInput = (_a) => {
             CalendarRange,
             {
               id: id ? `${id}-calendar` : void 0,
+              testid: testid ? `${testid}-calendar` : void 0,
               from,
               to,
               onChange: handleRangeChange,

package/dist/components/DateRangeInput.js

@@ -11,15 +11,15 @@ import {
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-R5TLUWDD.js";
+} from "../chunk-4T3DRGLF.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-S5K22XTH.js";
+import "../chunk-JWCT72WR.js";
 import {
   CalendarRange
-} from "../chunk-PCCJ7L3N.js";
+} from "../chunk-NMVSRA5Y.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import {
   __objRest,
@@ -34,6 +34,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var DateRangeInput = (_a) => {
   var _b = _a, {
     id,
+    testid,
     value,
     onChange,
     placeholder = "MM/DD/YYYY - MM/DD/YYYY",
@@ -44,6 +45,7 @@ var DateRangeInput = (_a) => {
     label
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "value",
     "onChange",
     "placeholder",
@@ -449,6 +451,7 @@ var DateRangeInput = (_a) => {
       InputBase,
       __spreadProps(__spreadValues({
         id,
+        testid,
         ref: (el) => {
           triggerRef.current = el;
         }
@@ -483,6 +486,7 @@ var DateRangeInput = (_a) => {
             CalendarRange,
             {
               id: id ? `${id}-calendar` : void 0,
+              testid: testid ? `${testid}-calendar` : void 0,
               from,
               to,
               onChange: handleRangeChange,

package/dist/components/Display.cjs

@@ -202,7 +202,8 @@ var Display = (_a) => {
     color,
     align,
     variant = "display1",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -210,7 +211,8 @@ var Display = (_a) => {
     "color",
     "align",
     "variant",
-    "id"
+    "id",
+    "testid"
   ]);
   const defaultElement = variant === "display1" ? "h1" : "h2";
   const Element = as != null ? as : defaultElement;
@@ -218,6 +220,7 @@ var Display = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,