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

package/dist/components/FilterInput/FilterInput.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
 import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
 import { FilterInputProvider, useFilterInputContextValue } from "./FilterInputContext/index.js";
 import { FilterInputErrors, parseFilterInputErrors } from "./FilterInputErrors/index.js";
 import { FilterInputField } from "./FilterInputField/index.js";
@@ -9,7 +10,7 @@ import { FilterInputMenu } from "./FilterInputMenu/FilterInputMenu.js";
 import { useFilterInputAutocomplete, useFilterInputExpression, useFilterInputSelection } from "./hooks/index.js";
 import { applyKnownFieldHelpers } from "./lib/applyKnownFieldHelpers.js";
 const FilterInput = (t0)=>{
-    const $ = c(97);
+    const $ = c(102);
     let className;
     let externalErrors;
     let fieldGroups;
@@ -20,9 +21,10 @@ const FilterInput = (t0)=>{
     let t2;
     let t3;
     let t4;
+    let testId;
     let value;
     if ($[0] !== t0) {
-        ({ fields: t1, fieldGroups, value, onChange, placeholder: t2, error: t3, externalErrors, onErrorsChange, showKeyboardHint: t4, className, ...props } = t0);
+        ({ fields: t1, fieldGroups, value, onChange, placeholder: t2, error: t3, externalErrors, onErrorsChange, showKeyboardHint: t4, className, "data-testid": testId, ...props } = t0);
         $[0] = t0;
         $[1] = className;
         $[2] = externalErrors;
@@ -34,7 +36,8 @@ const FilterInput = (t0)=>{
         $[8] = t2;
         $[9] = t3;
         $[10] = t4;
-        $[11] = value;
+        $[11] = testId;
+        $[12] = value;
     } else {
         className = $[1];
         externalErrors = $[2];
@@ -46,14 +49,15 @@ const FilterInput = (t0)=>{
         t2 = $[8];
         t3 = $[9];
         t4 = $[10];
-        value = $[11];
+        testId = $[11];
+        value = $[12];
     }
     let t5;
-    if ($[12] !== t1) {
+    if ($[13] !== t1) {
         t5 = void 0 === t1 ? [] : t1;
-        $[12] = t1;
-        $[13] = t5;
-    } else t5 = $[13];
+        $[13] = t1;
+        $[14] = t5;
+    } else t5 = $[14];
     const rawFields = t5;
     const placeholder = void 0 === t2 ? "Type to filter..." : t2;
     const error = void 0 === t3 ? false : t3;
@@ -62,29 +66,29 @@ const FilterInput = (t0)=>{
     const containerRef = useRef(null);
     const buildingChipRef = useRef(null);
     let t6;
-    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
         t6 = new Map();
-        $[14] = t6;
-    } else t6 = $[14];
+        $[15] = t6;
+    } else t6 = $[15];
     const chipRegistryRef = useRef(t6);
     let t7;
-    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
         t7 = (id, el)=>{
             if (el) chipRegistryRef.current.set(id, el);
             else chipRegistryRef.current.delete(id);
         };
-        $[15] = t7;
-    } else t7 = $[15];
+        $[16] = t7;
+    } else t7 = $[16];
     const registerChipRef = t7;
     let t8;
-    if ($[16] !== rawFields) {
+    if ($[17] !== rawFields) {
         t8 = applyKnownFieldHelpers(rawFields);
-        $[16] = rawFields;
-        $[17] = t8;
-    } else t8 = $[17];
+        $[17] = rawFields;
+        $[18] = t8;
+    } else t8 = $[18];
     const fields = t8;
     let t9;
-    if ($[18] !== error || $[19] !== externalErrors || $[20] !== fields || $[21] !== onChange || $[22] !== value) {
+    if ($[19] !== error || $[20] !== externalErrors || $[21] !== fields || $[22] !== onChange || $[23] !== value) {
         t9 = {
             fields,
             value,
@@ -92,16 +96,16 @@ const FilterInput = (t0)=>{
             error,
             externalErrors
         };
-        $[18] = error;
-        $[19] = externalErrors;
-        $[20] = fields;
-        $[21] = onChange;
-        $[22] = value;
-        $[23] = t9;
-    } else t9 = $[23];
+        $[19] = error;
+        $[20] = externalErrors;
+        $[21] = fields;
+        $[22] = onChange;
+        $[23] = value;
+        $[24] = t9;
+    } else t9 = $[24];
     const { conditions, connectors, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, replaceExpression, setConnectorValue } = useFilterInputExpression(t9);
     let t10;
-    if ($[24] !== chips || $[25] !== clearAll || $[26] !== conditions || $[27] !== fields || $[28] !== removeCondition || $[29] !== removeConditionAtIndex || $[30] !== setConnectorValue || $[31] !== upsertCondition) {
+    if ($[25] !== chips || $[26] !== clearAll || $[27] !== conditions || $[28] !== fields || $[29] !== removeCondition || $[30] !== removeConditionAtIndex || $[31] !== setConnectorValue || $[32] !== upsertCondition) {
         t10 = {
             fields,
             conditions,
@@ -115,19 +119,19 @@ const FilterInput = (t0)=>{
             buildingChipRef,
             inputRef
         };
-        $[24] = chips;
-        $[25] = clearAll;
-        $[26] = conditions;
-        $[27] = fields;
-        $[28] = removeCondition;
-        $[29] = removeConditionAtIndex;
-        $[30] = setConnectorValue;
-        $[31] = upsertCondition;
-        $[32] = t10;
-    } else t10 = $[32];
+        $[25] = chips;
+        $[26] = clearAll;
+        $[27] = conditions;
+        $[28] = fields;
+        $[29] = removeCondition;
+        $[30] = removeConditionAtIndex;
+        $[31] = setConnectorValue;
+        $[32] = upsertCondition;
+        $[33] = t10;
+    } else t10 = $[33];
     const autocomplete = useFilterInputAutocomplete(t10);
     let t11;
-    if ($[33] !== autocomplete.closeAutocompleteMenu || $[34] !== autocomplete.resetAutocompleteState || $[35] !== autocomplete.setInputText || $[36] !== clearAll || $[37] !== conditions || $[38] !== connectors || $[39] !== fields || $[40] !== replaceExpression) {
+    if ($[34] !== autocomplete.closeAutocompleteMenu || $[35] !== autocomplete.resetAutocompleteState || $[36] !== autocomplete.setInputText || $[37] !== clearAll || $[38] !== conditions || $[39] !== connectors || $[40] !== fields || $[41] !== replaceExpression) {
         t11 = {
             conditions,
             connectors,
@@ -141,19 +145,19 @@ const FilterInput = (t0)=>{
             replaceExpression,
             resetAutocompleteState: autocomplete.resetAutocompleteState
         };
-        $[33] = autocomplete.closeAutocompleteMenu;
-        $[34] = autocomplete.resetAutocompleteState;
-        $[35] = autocomplete.setInputText;
-        $[36] = clearAll;
-        $[37] = conditions;
-        $[38] = connectors;
-        $[39] = fields;
-        $[40] = replaceExpression;
-        $[41] = t11;
-    } else t11 = $[41];
+        $[34] = autocomplete.closeAutocompleteMenu;
+        $[35] = autocomplete.resetAutocompleteState;
+        $[36] = autocomplete.setInputText;
+        $[37] = clearAll;
+        $[38] = conditions;
+        $[39] = connectors;
+        $[40] = fields;
+        $[41] = replaceExpression;
+        $[42] = t11;
+    } else t11 = $[42];
     const { allSelected, pasteError, clearSelection, dismissPasteError, handleMouseDown, handleKeyDown, handleCopy, handlePaste, retryParse } = useFilterInputSelection(t11);
     let t12;
-    if ($[42] !== autocomplete || $[43] !== chips || $[44] !== error || $[45] !== placeholder || $[46] !== showKeyboardHint) {
+    if ($[43] !== autocomplete || $[44] !== chips || $[45] !== error || $[46] !== placeholder || $[47] !== showKeyboardHint) {
         t12 = {
             chips,
             autocomplete,
@@ -164,73 +168,73 @@ const FilterInput = (t0)=>{
             showKeyboardHint,
             registerChipRef
         };
-        $[42] = autocomplete;
-        $[43] = chips;
-        $[44] = error;
-        $[45] = placeholder;
-        $[46] = showKeyboardHint;
-        $[47] = t12;
-    } else t12 = $[47];
+        $[43] = autocomplete;
+        $[44] = chips;
+        $[45] = error;
+        $[46] = placeholder;
+        $[47] = showKeyboardHint;
+        $[48] = t12;
+    } else t12 = $[48];
     const contextValue = useFilterInputContextValue(t12);
     let t13;
-    if ($[48] !== dismissPasteError || $[49] !== pasteError) {
+    if ($[49] !== dismissPasteError || $[50] !== pasteError) {
         t13 = ()=>{
             if (pasteError) dismissPasteError();
         };
-        $[48] = dismissPasteError;
-        $[49] = pasteError;
-        $[50] = t13;
-    } else t13 = $[50];
+        $[49] = dismissPasteError;
+        $[50] = pasteError;
+        $[51] = t13;
+    } else t13 = $[51];
     let t14;
-    if ($[51] !== conditions.length) {
+    if ($[52] !== conditions.length) {
         t14 = [
             conditions.length
         ];
-        $[51] = conditions.length;
-        $[52] = t14;
-    } else t14 = $[52];
+        $[52] = conditions.length;
+        $[53] = t14;
+    } else t14 = $[53];
     useEffect(t13, t14);
     let t15;
-    if ($[53] !== autocomplete.inputText || $[54] !== pasteError || $[55] !== retryParse) {
+    if ($[54] !== autocomplete.inputText || $[55] !== pasteError || $[56] !== retryParse) {
         t15 = ()=>{
             if (pasteError) retryParse(autocomplete.inputText);
         };
-        $[53] = autocomplete.inputText;
-        $[54] = pasteError;
-        $[55] = retryParse;
-        $[56] = t15;
-    } else t15 = $[56];
+        $[54] = autocomplete.inputText;
+        $[55] = pasteError;
+        $[56] = retryParse;
+        $[57] = t15;
+    } else t15 = $[57];
     let t16;
-    if ($[57] !== autocomplete.inputText) {
+    if ($[58] !== autocomplete.inputText) {
         t16 = [
             autocomplete.inputText
         ];
-        $[57] = autocomplete.inputText;
-        $[58] = t16;
-    } else t16 = $[58];
+        $[58] = autocomplete.inputText;
+        $[59] = t16;
+    } else t16 = $[59];
     useEffect(t15, t16);
     let t17;
-    if ($[59] !== conditions || $[60] !== fields) {
+    if ($[60] !== conditions || $[61] !== fields) {
         t17 = parseFilterInputErrors(conditions, fields);
-        $[59] = conditions;
-        $[60] = fields;
-        $[61] = t17;
-    } else t17 = $[61];
+        $[60] = conditions;
+        $[61] = fields;
+        $[62] = t17;
+    } else t17 = $[62];
     const fieldErrors = t17;
     let t18;
-    if ($[62] !== fieldErrors || $[63] !== pasteError) {
+    if ($[63] !== fieldErrors || $[64] !== pasteError) {
         t18 = pasteError ? [
             pasteError,
             ...fieldErrors
         ] : fieldErrors;
-        $[62] = fieldErrors;
-        $[63] = pasteError;
-        $[64] = t18;
-    } else t18 = $[64];
+        $[63] = fieldErrors;
+        $[64] = pasteError;
+        $[65] = t18;
+    } else t18 = $[65];
     const errors = t18;
     let t19;
     let t20;
-    if ($[65] !== errors || $[66] !== onErrorsChange) {
+    if ($[66] !== errors || $[67] !== onErrorsChange) {
         t19 = ()=>{
             onErrorsChange?.(errors);
         };
@@ -238,72 +242,88 @@ const FilterInput = (t0)=>{
             errors,
             onErrorsChange
         ];
-        $[65] = errors;
-        $[66] = onErrorsChange;
-        $[67] = t19;
-        $[68] = t20;
+        $[66] = errors;
+        $[67] = onErrorsChange;
+        $[68] = t19;
+        $[69] = t20;
     } else {
-        t19 = $[67];
-        t20 = $[68];
+        t19 = $[68];
+        t20 = $[69];
     }
     useEffect(t19, t20);
     let t21;
-    if ($[69] !== className) {
+    if ($[70] !== className) {
         t21 = cn("group/filter-input relative flex w-full flex-col gap-4", className);
-        $[69] = className;
-        $[70] = t21;
-    } else t21 = $[70];
+        $[70] = className;
+        $[71] = t21;
+    } else t21 = $[71];
     const t22 = autocomplete.handleFocus;
     const t23 = allSelected ? clearSelection : void 0;
     let t24;
-    if ($[71] !== allSelected) {
+    if ($[72] !== allSelected) {
         t24 = allSelected && {
             "data-selected-all": ""
         };
-        $[71] = allSelected;
-        $[72] = t24;
-    } else t24 = $[72];
+        $[72] = allSelected;
+        $[73] = t24;
+    } else t24 = $[73];
     let t25;
-    if ($[73] !== props) {
+    if ($[74] !== props || $[75] !== testId) {
         t25 = /*#__PURE__*/ jsx(FilterInputField, {
-            ...props
+            ...props,
+            "data-testid": testId
         });
-        $[73] = props;
-        $[74] = t25;
-    } else t25 = $[74];
+        $[74] = props;
+        $[75] = testId;
+        $[76] = t25;
+    } else t25 = $[76];
     let t26;
-    if ($[75] !== contextValue || $[76] !== t25) {
+    if ($[77] !== contextValue || $[78] !== t25) {
         t26 = /*#__PURE__*/ jsx(FilterInputProvider, {
             value: contextValue,
             children: t25
         });
-        $[75] = contextValue;
-        $[76] = t25;
-        $[77] = t26;
-    } else t26 = $[77];
+        $[77] = contextValue;
+        $[78] = t25;
+        $[79] = t26;
+    } else t26 = $[79];
     let t27;
-    if ($[78] !== autocomplete || $[79] !== fieldGroups || $[80] !== fields) {
+    if ($[80] !== autocomplete || $[81] !== fieldGroups || $[82] !== fields) {
         t27 = /*#__PURE__*/ jsx(FilterInputMenu, {
             fields: fields,
             fieldGroups: fieldGroups,
             autocomplete: autocomplete
         });
-        $[78] = autocomplete;
-        $[79] = fieldGroups;
-        $[80] = fields;
-        $[81] = t27;
-    } else t27 = $[81];
+        $[80] = autocomplete;
+        $[81] = fieldGroups;
+        $[82] = fields;
+        $[83] = t27;
+    } else t27 = $[83];
     let t28;
-    if ($[82] !== errors) {
-        t28 = /*#__PURE__*/ jsx(FilterInputErrors, {
-            errors: errors
+    if ($[84] !== t26 || $[85] !== t27 || $[86] !== testId) {
+        t28 = /*#__PURE__*/ jsxs(TestIdProvider, {
+            value: testId,
+            children: [
+                t26,
+                t27
+            ]
         });
-        $[82] = errors;
-        $[83] = t28;
-    } else t28 = $[83];
+        $[84] = t26;
+        $[85] = t27;
+        $[86] = testId;
+        $[87] = t28;
+    } else t28 = $[87];
     let t29;
-    if ($[84] !== autocomplete.handleBlur || $[85] !== handleCopy || $[86] !== handleKeyDown || $[87] !== handleMouseDown || $[88] !== handlePaste || $[89] !== t21 || $[90] !== t22 || $[91] !== t23 || $[92] !== t24 || $[93] !== t26 || $[94] !== t27 || $[95] !== t28) {
-        t29 = /*#__PURE__*/ jsxs("div", {
+    if ($[88] !== errors) {
+        t29 = /*#__PURE__*/ jsx(FilterInputErrors, {
+            errors: errors
+        });
+        $[88] = errors;
+        $[89] = t29;
+    } else t29 = $[89];
+    let t30;
+    if ($[90] !== autocomplete.handleBlur || $[91] !== handleCopy || $[92] !== handleKeyDown || $[93] !== handleMouseDown || $[94] !== handlePaste || $[95] !== t21 || $[96] !== t22 || $[97] !== t23 || $[98] !== t24 || $[99] !== t28 || $[100] !== t29) {
+        t30 = /*#__PURE__*/ jsxs("div", {
             ref: containerRef,
             className: t21,
             tabIndex: -1,
@@ -316,26 +336,24 @@ const FilterInput = (t0)=>{
             onPaste: handlePaste,
             ...t24,
             children: [
-                t26,
-                t27,
-                t28
+                t28,
+                t29
             ]
         });
-        $[84] = autocomplete.handleBlur;
-        $[85] = handleCopy;
-        $[86] = handleKeyDown;
-        $[87] = handleMouseDown;
-        $[88] = handlePaste;
-        $[89] = t21;
-        $[90] = t22;
-        $[91] = t23;
-        $[92] = t24;
-        $[93] = t26;
-        $[94] = t27;
-        $[95] = t28;
-        $[96] = t29;
-    } else t29 = $[96];
-    return t29;
+        $[90] = autocomplete.handleBlur;
+        $[91] = handleCopy;
+        $[92] = handleKeyDown;
+        $[93] = handleMouseDown;
+        $[94] = handlePaste;
+        $[95] = t21;
+        $[96] = t22;
+        $[97] = t23;
+        $[98] = t24;
+        $[99] = t28;
+        $[100] = t29;
+        $[101] = t30;
+    } else t30 = $[101];
+    return t30;
 };
 FilterInput.displayName = "FilterInput";
 export { FilterInput };

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

@@ -1,10 +1,11 @@
 import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../../../utils/testId.js';
 import type { ChipErrorSegment, FilterInputChipData } from '../../types.js';
 import { type SegmentVariant } from './segmentVariant.js';
 export type ChipSegment = SegmentVariant;
 /** Editable segments of the paired (second) triplet. The paired attribute is fixed. */
 export type PairSegment = Extract<SegmentVariant, 'operator' | 'value'>;
-export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, TestableProps {
     ref?: Ref<HTMLDivElement>;
     chipId?: string;
     attribute: string;