@wallarm-org/design-system 3.4.1-rc-fix-data-display-category.3 → 4.0.0

package/dist/components/Chat/Chat.js

@@ -5,7 +5,7 @@ import { TestIdProvider } from "../../utils/testId.js";
 import { BlurBackground } from "../AnimatedBackground/blur/index.js";
 import { chatBackgroundVariants, chatVariants } from "./classes.js";
 const Chat = (t0)=>{
-    const $ = c(21);
+    const $ = c(22);
     let children;
     let className;
     let props;
@@ -37,10 +37,11 @@ const Chat = (t0)=>{
         $[8] = t2;
     } else t2 = $[8];
     let t3;
-    if ($[9] !== background) {
+    if ($[9] !== background || $[10] !== testId) {
         t3 = "none" !== background && /*#__PURE__*/ jsx("div", {
             "aria-hidden": true,
             "data-slot": "chat-background",
+            "data-testid": testId && `${testId}--background`,
             className: chatBackgroundVariants({
                 background
             }),
@@ -50,20 +51,21 @@ const Chat = (t0)=>{
             })
         });
         $[9] = background;
-        $[10] = t3;
-    } else t3 = $[10];
+        $[10] = testId;
+        $[11] = t3;
+    } else t3 = $[11];
     let t4;
-    if ($[11] !== children || $[12] !== testId) {
+    if ($[12] !== children || $[13] !== testId) {
         t4 = /*#__PURE__*/ jsx(TestIdProvider, {
             value: testId,
             children: children
         });
-        $[11] = children;
-        $[12] = testId;
-        $[13] = t4;
-    } else t4 = $[13];
+        $[12] = children;
+        $[13] = testId;
+        $[14] = t4;
+    } else t4 = $[14];
     let t5;
-    if ($[14] !== props || $[15] !== ref || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== testId) {
+    if ($[15] !== props || $[16] !== ref || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== testId) {
         t5 = /*#__PURE__*/ jsxs("section", {
             "aria-label": "Wally chat",
             ...props,
@@ -76,14 +78,14 @@ const Chat = (t0)=>{
                 t4
             ]
         });
-        $[14] = props;
-        $[15] = ref;
-        $[16] = t2;
-        $[17] = t3;
-        $[18] = t4;
-        $[19] = testId;
-        $[20] = t5;
-    } else t5 = $[20];
+        $[15] = props;
+        $[16] = ref;
+        $[17] = t2;
+        $[18] = t3;
+        $[19] = t4;
+        $[20] = testId;
+        $[21] = t5;
+    } else t5 = $[21];
     return t5;
 };
 Chat.displayName = "Chat";

package/dist/components/Chat/ChatTrigger.js

@@ -6,7 +6,7 @@ import { Button } from "../Button/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
 import { WallyIcon } from "../WallyIcon/index.js";
 const ChatTrigger = (t0)=>{
-    const $ = c(22);
+    const $ = c(24);
     let id;
     let ref;
     let rest;
@@ -39,16 +39,19 @@ const ChatTrigger = (t0)=>{
         $[6] = triggerId;
         $[7] = t2;
     } else t2 = $[7];
-    let t3;
-    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-        t3 = /*#__PURE__*/ jsx(WallyIcon, {
-            size: "md"
+    const t3 = testId && `${testId}--icon`;
+    let t4;
+    if ($[8] !== t3) {
+        t4 = /*#__PURE__*/ jsx(WallyIcon, {
+            size: "md",
+            "data-testid": t3
         });
         $[8] = t3;
-    } else t3 = $[8];
-    let t4;
-    if ($[9] !== label || $[10] !== ref || $[11] !== rest || $[12] !== testId || $[13] !== triggerId) {
-        t4 = /*#__PURE__*/ jsx(TooltipTrigger, {
+        $[9] = t4;
+    } else t4 = $[9];
+    let t5;
+    if ($[10] !== label || $[11] !== ref || $[12] !== rest || $[13] !== t4 || $[14] !== testId || $[15] !== triggerId) {
+        t5 = /*#__PURE__*/ jsx(TooltipTrigger, {
             asChild: true,
             children: /*#__PURE__*/ jsx(Button, {
                 variant: "ghost",
@@ -61,41 +64,42 @@ const ChatTrigger = (t0)=>{
                 ref: ref,
                 "data-slot": "chat-trigger",
                 "data-testid": testId,
-                children: t3
+                children: t4
             })
         });
-        $[9] = label;
-        $[10] = ref;
-        $[11] = rest;
-        $[12] = testId;
-        $[13] = triggerId;
-        $[14] = t4;
-    } else t4 = $[14];
-    let t5;
-    if ($[15] !== label) {
-        t5 = /*#__PURE__*/ jsx(TooltipContent, {
-            children: label
-        });
-        $[15] = label;
+        $[10] = label;
+        $[11] = ref;
+        $[12] = rest;
+        $[13] = t4;
+        $[14] = testId;
+        $[15] = triggerId;
         $[16] = t5;
     } else t5 = $[16];
     let t6;
-    if ($[17] !== t2 || $[18] !== t4 || $[19] !== t5 || $[20] !== testId) {
-        t6 = /*#__PURE__*/ jsxs(Tooltip, {
+    if ($[17] !== label) {
+        t6 = /*#__PURE__*/ jsx(TooltipContent, {
+            children: label
+        });
+        $[17] = label;
+        $[18] = t6;
+    } else t6 = $[18];
+    let t7;
+    if ($[19] !== t2 || $[20] !== t5 || $[21] !== t6 || $[22] !== testId) {
+        t7 = /*#__PURE__*/ jsxs(Tooltip, {
             ids: t2,
             "data-testid": testId,
             children: [
-                t4,
-                t5
+                t5,
+                t6
             ]
         });
-        $[17] = t2;
-        $[18] = t4;
-        $[19] = t5;
-        $[20] = testId;
+        $[19] = t2;
+        $[20] = t5;
         $[21] = t6;
-    } else t6 = $[21];
-    return t6;
+        $[22] = testId;
+        $[23] = t7;
+    } else t7 = $[23];
+    return t7;
 };
 ChatTrigger.displayName = "ChatTrigger";
 export { ChatTrigger };

package/dist/components/DateInput/internal/DateInputInternal.js

@@ -3,6 +3,7 @@ import { c } from "react/compiler-runtime";
 import { useRef, useState } from "react";
 import { CalendarDateTime, getLocalTimeZone, now } from "@internationalized/date";
 import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
 import { InputGroup, InputGroupAddon } from "../../InputGroup/index.js";
 import { TemporalClear, TemporalPlaceholder, TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../../TemporalCore/index.js";
 function anchorTimeToToday(timeValue) {
@@ -10,7 +11,7 @@ function anchorTimeToToday(timeValue) {
     return new CalendarDateTime(t.year, t.month, t.day, timeValue.hour, timeValue.minute, 0);
 }
 const DateInputInternal = (t0)=>{
-    const $ = c(78);
+    const $ = c(79);
     let IconComponent;
     let disabled;
     let error;
@@ -52,6 +53,7 @@ const DateInputInternal = (t0)=>{
         state = $[11];
         timeStep = $[12];
     }
+    const testId = useTestId("input-group");
     const dropdownRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -269,9 +271,10 @@ const DateInputInternal = (t0)=>{
         $[72] = t24;
     } else t24 = $[72];
     let t25;
-    if ($[73] !== size || $[74] !== t11 || $[75] !== t23 || $[76] !== t24) {
+    if ($[73] !== size || $[74] !== t11 || $[75] !== t23 || $[76] !== t24 || $[77] !== testId) {
         t25 = /*#__PURE__*/ jsxs(InputGroup, {
             size: size,
+            "data-testid": testId,
             children: [
                 t11,
                 t23,
@@ -282,8 +285,9 @@ const DateInputInternal = (t0)=>{
         $[74] = t11;
         $[75] = t23;
         $[76] = t24;
-        $[77] = t25;
-    } else t25 = $[77];
+        $[77] = testId;
+        $[78] = t25;
+    } else t25 = $[78];
     return t25;
 };
 DateInputInternal.displayName = "DateInputInternal";

package/dist/components/DateRangeInput/DateRangeInputInternal.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useState } from "react";
 import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
 import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
 import { TemporalClear, TemporalPlaceholder } from "../TemporalCore/index.js";
 import { useDateRangeContext } from "./DateRangeContext/index.js";
@@ -9,8 +10,9 @@ import { DateRangeGroup } from "./DateRangeGroup.js";
 import { DateRangeSegmentGroup } from "./DateRangeSegmentGroup.js";
 import { DateRangeSeparator } from "./DateRangeSeparator.js";
 const DateRangeInputInternal = ()=>{
-    const $ = c(39);
+    const $ = c(40);
     const { icon: IconComponent, state, startFieldProps, startRef, endFieldProps, endRef, disabled, readOnly, placeholder, size } = useDateRangeContext();
+    const testId = useTestId("input-group");
     const [startHasValue, setStartHasValue] = useState(false);
     const [endHasValue, setEndHasValue] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
@@ -151,13 +153,14 @@ const DateRangeInputInternal = ()=>{
         $[33] = t15;
     } else t15 = $[33];
     let t16;
-    if ($[34] !== size || $[35] !== t14 || $[36] !== t15 || $[37] !== t4) {
+    if ($[34] !== size || $[35] !== t14 || $[36] !== t15 || $[37] !== t4 || $[38] !== testId) {
         t16 = /*#__PURE__*/ jsx("div", {
             className: t3,
             onFocusCapture: handleFocusCapture,
             onBlurCapture: handleBlurCapture,
             children: /*#__PURE__*/ jsxs(InputGroup, {
                 size: size,
+                "data-testid": testId,
                 children: [
                     t4,
                     t14,
@@ -169,8 +172,9 @@ const DateRangeInputInternal = ()=>{
         $[35] = t14;
         $[36] = t15;
         $[37] = t4;
-        $[38] = t16;
-    } else t16 = $[38];
+        $[38] = testId;
+        $[39] = t16;
+    } else t16 = $[39];
     return t16;
 };
 DateRangeInputInternal.displayName = "DateRangeInputInternal";

package/dist/components/DateRangeInput/DateRangeSeparator.js

@@ -1,19 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
 const DateRangeSeparator = ()=>{
-    const $ = c(1);
+    const $ = c(3);
+    const testId = useTestId("separator");
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = /*#__PURE__*/ jsx("span", {
+        t0 = cn("text-sm text-text-secondary select-none");
+        $[0] = t0;
+    } else t0 = $[0];
+    let t1;
+    if ($[1] !== testId) {
+        t1 = /*#__PURE__*/ jsx("span", {
             "data-slot": "date-range-separator",
-            className: cn("text-sm text-text-secondary select-none"),
+            "data-testid": testId,
+            className: t0,
             "aria-hidden": "true",
             children: "→"
         });
-        $[0] = t0;
-    } else t0 = $[0];
-    return t0;
+        $[1] = testId;
+        $[2] = t1;
+    } else t1 = $[2];
+    return t1;
 };
 DateRangeSeparator.displayName = "DateRangeSeparator";
 export { DateRangeSeparator };

package/dist/components/FileUpload/FileUploadItemReplaceTrigger.js

@@ -9,7 +9,7 @@ import { useFileUploadRootContext } from "./FileUploadContext.js";
 import { useRequiredFileUploadItemContext } from "./FileUploadItemContext.js";
 import { checkFile, isSameFile } from "./lib/index.js";
 const FileUploadItemReplaceTrigger = (t0)=>{
-    const $ = c(40);
+    const $ = c(41);
     let ariaLabel;
     let children;
     let disabled;
@@ -37,6 +37,7 @@ const FileUploadItemReplaceTrigger = (t0)=>{
     const item = useRequiredFileUploadItemContext("FileUploadItemReplaceTrigger");
     const inputRef = useRef(null);
     const testId = useTestId("item-replace-trigger", testIdProp);
+    const inputTestId = useTestId("item-replace-input");
     if (!root || root.readOnly || item.loading) return null;
     const current = item.file;
     if (!root.single && !(current instanceof File)) return null;
@@ -155,7 +156,7 @@ const FileUploadItemReplaceTrigger = (t0)=>{
         $[32] = t10;
     } else t10 = $[32];
     let t11;
-    if ($[33] !== handleReplace || $[34] !== root.accept || $[35] !== root.single) {
+    if ($[33] !== handleReplace || $[34] !== inputTestId || $[35] !== root.accept || $[36] !== root.single) {
         t11 = root.single ? null : /*#__PURE__*/ jsx("input", {
             ref: inputRef,
             type: "file",
@@ -164,25 +165,27 @@ const FileUploadItemReplaceTrigger = (t0)=>{
             tabIndex: -1,
             "aria-hidden": true,
             "data-slot": "file-upload-item-replace-input",
+            "data-testid": inputTestId,
             onChange: handleReplace
         });
         $[33] = handleReplace;
-        $[34] = root.accept;
-        $[35] = root.single;
-        $[36] = t11;
-    } else t11 = $[36];
+        $[34] = inputTestId;
+        $[35] = root.accept;
+        $[36] = root.single;
+        $[37] = t11;
+    } else t11 = $[37];
     let t12;
-    if ($[37] !== t10 || $[38] !== t11) {
+    if ($[38] !== t10 || $[39] !== t11) {
         t12 = /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 t10,
                 t11
             ]
         });
-        $[37] = t10;
-        $[38] = t11;
-        $[39] = t12;
-    } else t12 = $[39];
+        $[38] = t10;
+        $[39] = t11;
+        $[40] = t12;
+    } else t12 = $[40];
     return t12;
 };
 FileUploadItemReplaceTrigger.displayName = "FileUploadItemReplaceTrigger";

package/dist/components/FilterCascade/FilterCascadeLevel.js

@@ -149,22 +149,30 @@ const FilterCascadeLevel = (t0)=>{
 };
 FilterCascadeLevel.displayName = "FilterCascadeLevel";
 const LevelLoading = ()=>{
-    const $ = c(1);
+    const $ = c(3);
+    const testId = useTestId("level-loading");
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = /*#__PURE__*/ jsx("div", {
+        t0 = [
+            64,
+            48,
+            56
+        ].map(_temp);
+        $[0] = t0;
+    } else t0 = $[0];
+    let t1;
+    if ($[1] !== testId) {
+        t1 = /*#__PURE__*/ jsx("div", {
             "aria-busy": true,
             "data-slot": "filter-cascade-level-loading",
+            "data-testid": testId,
             className: "flex flex-col gap-1",
-            children: [
-                64,
-                48,
-                56
-            ].map(_temp)
+            children: t0
         });
-        $[0] = t0;
-    } else t0 = $[0];
-    return t0;
+        $[1] = testId;
+        $[2] = t1;
+    } else t1 = $[2];
+    return t1;
 };
 const FilterCascadeItems = (t0)=>{
     const $ = c(8);

package/dist/components/FilterInput/FilterInput.d.ts

@@ -1,6 +1,7 @@
 import type { FC, HTMLAttributes } from 'react';
+import { type TestableProps } from '../../utils/testId.js';
 import type { ExprNode, FieldGroup, FieldMetadata } from './types.js';
-export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'>, TestableProps {
     /**
      * Filter-field configurations driving the autocomplete. A few names are
      * **reserved** and auto-wired with design-system helpers — DS-supplied