@ballistix.digital/react-components 0.6.0 → 0.7.0

package/dist/index.js

@@ -405,7 +405,7 @@ var styles$s = {
 };
 
 var BadgeElement = function (props) {
-    var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles;
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles, dataCy = props.dataCy;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$r.base);
         var keys = calculateNestedKeys(styles$r.base);
@@ -419,7 +419,7 @@ var BadgeElement = function (props) {
     if (isLoading) {
         return (jsxRuntime.jsx("span", { className: toClassName(styles.container, 'h-4 w-12 animate-pulse'), children: type === 'indicator' && (jsxRuntime.jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) })) }));
     }
-    return (jsxRuntime.jsxs("span", { className: styles.container, children: [type === 'indicator' && (jsxRuntime.jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxRuntime.jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Remove large option" }), xIcon] }))] }));
+    return (jsxRuntime.jsxs("span", { className: styles.container, "data-cy": dataCy, children: [type === 'indicator' && (jsxRuntime.jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxRuntime.jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Remove large option" }), xIcon] }))] }));
 };
 
 var base$o = {
@@ -530,7 +530,7 @@ var styles$r = {
 };
 
 var ButtonElement = function (props) {
-    var children = props.children, innerRef = props.innerRef, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, _b = props.type, type = _b === void 0 ? 'primary' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, _e = props.status, status = _e === void 0 ? 'idle' : _e, isDisabled = props.isDisabled, stylesOverrides = props.styles, onClick = props.onClick;
+    var children = props.children, innerRef = props.innerRef, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, dataCy = props.dataCy, _b = props.type, type = _b === void 0 ? 'primary' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, _e = props.status, status = _e === void 0 ? 'idle' : _e, isDisabled = props.isDisabled, stylesOverrides = props.styles, onClick = props.onClick;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$q.base);
         var keys = calculateNestedKeys(styles$q.base);
@@ -542,7 +542,7 @@ var ButtonElement = function (props) {
     var styles = handleGenerateStyle();
     return (jsxRuntime.jsxs("button", { type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: function (e) {
             onClick && onClick(e);
-        }, ref: innerRef, children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsxRuntime.jsx("div", { children: children })] })), status === 'error' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] })), status === 'success' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] }))] }));
+        }, ref: innerRef, "data-cy": dataCy, children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsxRuntime.jsx("div", { children: children })] })), status === 'error' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] })), status === 'success' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] }))] }));
 };
 
 var base$n = {
@@ -651,7 +651,7 @@ var styles$p = {
 };
 
 var Container$3 = function (props) {
-    var children = props.children, label = props.label, trigger = props.trigger, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
+    var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$o.base);
         var keys = calculateNestedKeys(styles$o.base);
@@ -662,7 +662,7 @@ var Container$3 = function (props) {
     };
     var styles = handleGenerateStyle();
     return (jsxRuntime.jsxs(react.Menu, { as: "div", className: toClassName(styles.container, !isEscapingOverflow && 'relative'), children: [jsxRuntime.jsxs("div", { children: [type === 'button' &&
-                        (!trigger ? (jsxRuntime.jsxs(react.Menu.Button, { className: styles.button, children: [label, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsxRuntime.jsx(react.Menu.Button, { children: trigger }))), type === 'compact' && (jsxRuntime.jsxs(react.Menu.Button, { className: styles.compact, children: [jsxRuntime.jsx("span", { className: "sr-only", children: label }), jsxRuntime.jsx(solid.EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsxRuntime.jsx(react.Transition, { as: React.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsxRuntime.jsx(react.Menu.Items, { className: styles.items, children: children }) })] }));
+                        (!trigger ? (jsxRuntime.jsxs(react.Menu.Button, { className: styles.button, "data-cy": dataCy, children: [label, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsxRuntime.jsx(react.Menu.Button, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxRuntime.jsxs(react.Menu.Button, { className: styles.compact, "data-cy": dataCy, children: [jsxRuntime.jsx("span", { className: "sr-only", children: label }), jsxRuntime.jsx(solid.EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsxRuntime.jsx(react.Transition, { as: React.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsxRuntime.jsx(react.Menu.Items, { className: styles.items, children: children }) })] }));
 };
 var DropdownElement = {
     Container: Container$3,
@@ -720,8 +720,10 @@ var InputGroupForm = function (props) {
     var styles = handleGenerateStyle();
     var invalidIcon = (jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
     var isClearable = !trailing && isValid && onClear && value !== '' && value;
+    var inputDataCy = "form-input-".concat(name);
+    var errorDataCy = "form-input-error-".concat(name);
     return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.body, children: [leading && jsxRuntime.jsx("div", { className: styles.leading, children: leading }), !htmlType ||
-                        (htmlType !== 'area' && (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: mask$1 && ref, name: name, id: name, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), htmlType === 'text' && isClearable && (jsxRuntime.jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsxRuntime.jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsxRuntime.jsx("textarea", { rows: rows, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && jsxRuntime.jsx("p", { className: styles.error, children: error })] })] }));
+                        (htmlType !== 'area' && (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: mask$1 && ref, name: name, id: name, "data-cy": inputDataCy, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), htmlType === 'text' && isClearable && (jsxRuntime.jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsxRuntime.jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsxRuntime.jsx("textarea", { rows: rows, name: name, id: name, "data-cy": inputDataCy, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
 };
 
 var base$k = {
@@ -1284,6 +1286,8 @@ var SelectMenuForm = function (props) {
     var _j = React.useState(true), isFocus = _j[0], setIsFocus = _j[1];
     var _k = React.useState(value !== null && value !== void 0 ? value : null), state = _k[0], setState = _k[1];
     var isValid = error === undefined;
+    var selectDataCy = "form-select-".concat(name);
+    var errorDataCy = "form-select-error-".concat(name);
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$h.base);
         var keys = calculateNestedKeys(styles$h.base);
@@ -1316,37 +1320,37 @@ var SelectMenuForm = function (props) {
     React.useEffect(function () {
         setState(value);
     }, [value]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx(Select, { primaryColor: "primary", 
-                        //
-                        placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (jsxRuntime.jsx("p", { className: styles.emptyState, children: (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.emptyState) !== null && _a !== void 0 ? _a : 'No results found' })), searchInputPlaceholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.searchInput, 
-                        //
-                        loading: isLoading, isDisabled: isDisabled, isClearable: isClearable, isMultiple: isMultiple, isSearchable: isSearchable, 
-                        //
-                        options: options, 
-                        //
-                        value: state, onChange: handleChange, onSearchInputChange: onSearchInputChange, 
-                        //
-                        classNames: {
-                            menuButton: function () {
-                                return toClassName(styles.input, state === null && '[&>*]:!text-gray-300 ', state === null &&
-                                    !isValid &&
-                                    isTouched &&
-                                    '[&>*]:!text-red-300');
-                            },
-                            menu: styles.menu,
-                            tagItem: function () { return styles.tagItem; },
-                            tagItemText: styles.tagItemText,
-                            tagItemIconContainer: styles.tagItemIconContainer,
-                            tagItemIcon: styles.tagItemIcon,
-                            list: styles.list,
-                            listItem: function () { return styles.listItem; },
-                            listDisabledItem: styles.listDisabledItem,
-                            listGroupLabel: styles.listGroupLabel,
-                            searchContainer: styles.searchContainer,
-                            searchBox: styles.searchBox,
-                            searchIcon: styles.searchIcon,
-                            closeIcon: styles.closeIcon,
-                        } }), !isSolo && (jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, children: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { "data-cy": selectDataCy, children: jsxRuntime.jsx(Select, { primaryColor: "primary", 
+                            //
+                            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (jsxRuntime.jsx("p", { className: styles.emptyState, children: (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.emptyState) !== null && _a !== void 0 ? _a : 'No results found' })), searchInputPlaceholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.searchInput, 
+                            //
+                            loading: isLoading, isDisabled: isDisabled, isClearable: isClearable, isMultiple: isMultiple, isSearchable: isSearchable, 
+                            //
+                            options: options, 
+                            //
+                            value: state, onChange: handleChange, onSearchInputChange: onSearchInputChange, 
+                            //
+                            classNames: {
+                                menuButton: function () {
+                                    return toClassName(styles.input, state === null && '[&>*]:!text-gray-300 ', state === null &&
+                                        !isValid &&
+                                        isTouched &&
+                                        '[&>*]:!text-red-300');
+                                },
+                                menu: styles.menu,
+                                tagItem: function () { return styles.tagItem; },
+                                tagItemText: styles.tagItemText,
+                                tagItemIconContainer: styles.tagItemIconContainer,
+                                tagItemIcon: styles.tagItemIcon,
+                                list: styles.list,
+                                listItem: function () { return styles.listItem; },
+                                listDisabledItem: styles.listDisabledItem,
+                                listGroupLabel: styles.listGroupLabel,
+                                searchContainer: styles.searchContainer,
+                                searchBox: styles.searchBox,
+                                searchIcon: styles.searchIcon,
+                                closeIcon: styles.closeIcon,
+                            } }) }), !isSolo && (jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
 };
 
 var PanelPaginationNavigation = function (props) {
@@ -1838,7 +1842,7 @@ var TableList2 = function (props) {
             setTableState(id, state);
         }
     }, [id, state]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.head, children: head && head(state) }), jsxRuntime.jsx("div", { className: styles.body.content, children: jsxRuntime.jsx("div", { className: styles.body.wrapper, children: jsxRuntime.jsx("div", { className: styles.body.styleWrapper, children: jsxRuntime.jsxs("div", { className: styles.body.tableWrapper, children: [jsxRuntime.jsxs("table", { className: styles.body.table.container, children: [jsxRuntime.jsx("thead", { className: styles.body.table.head.container, children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsxRuntime.jsx("tr", { children: headerGroup.headers.map(function (header) {
+    return (jsxRuntime.jsxs("div", { className: styles.container, "data-cy": "table-list-".concat(id), children: [jsxRuntime.jsx("div", { className: styles.head, children: head && head(state) }), jsxRuntime.jsx("div", { className: styles.body.content, children: jsxRuntime.jsx("div", { className: styles.body.wrapper, children: jsxRuntime.jsx("div", { className: styles.body.styleWrapper, children: jsxRuntime.jsxs("div", { className: styles.body.tableWrapper, children: [jsxRuntime.jsxs("table", { className: styles.body.table.container, children: [jsxRuntime.jsx("thead", { className: styles.body.table.head.container, children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsxRuntime.jsx("tr", { children: headerGroup.headers.map(function (header) {
                                                     // Default sort icon to show a user that the column is sortable
                                                     var SortIconElement = solid.ChevronUpDownIcon;
                                                     if (header.column.getIsSorted()) {
@@ -2314,7 +2318,7 @@ var styles$a = {
 };
 
 var ModalOverlay = function (props) {
-    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, onOpen = props.onOpen, onClose = props.onClose;
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, dataCy = props.dataCy, onOpen = props.onOpen, onClose = props.onClose;
     var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
     var options = React.useMemo(function () { return ({
         handleOpen: function () { return setIsOpen(true); },
@@ -2339,7 +2343,7 @@ var ModalOverlay = function (props) {
             onClose && onClose();
         }
     }, [isOpen, onClose]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsxRuntime.jsx("div", { className: styles.background.container }) }), jsxRuntime.jsx("div", { className: styles.layout.container, children: jsxRuntime.jsx("div", { className: styles.layout.content, children: jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsxRuntime.jsx(react.Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsxRuntime.jsx("div", { className: styles.background.container }) }), jsxRuntime.jsx("div", { className: styles.layout.container, "data-cy": dataCy, children: jsxRuntime.jsx("div", { className: styles.layout.content, children: jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsxRuntime.jsx(react.Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
 var base$7 = {
@@ -2674,6 +2678,8 @@ var DateMenuForm = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
+    var inputDataCy = "form-input-date-".concat(name);
+    var errorDataCy = "form-input-date-error-".concat(name);
     // Simulate onClear event.
     React.useEffect(function () {
         if (state.startDate === null && state.endDate === null) {
@@ -2681,13 +2687,13 @@ var DateMenuForm = function (props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [state]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, "data-cy": inputDataCy, children: [jsxRuntime.jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
                         //
                         value: state, 
                         //
                         onChange: handleValueChange, 
                         //
-                        inputClassName: styles.input, startWeekOn: startWeekOn }), !isSolo && (jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, children: typeof error === 'string'
+                        inputClassName: styles.input, startWeekOn: startWeekOn }), !isSolo && (jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: typeof error === 'string'
                                     ? error
                                     : (_a = error === null || error === void 0 ? void 0 : error.startDate) !== null && _a !== void 0 ? _a : error === null || error === void 0 ? void 0 : error.endDate }))] }))] })] }));
 };
@@ -2783,7 +2789,7 @@ var CheckboxInputGroupForm = function (props) {
     var styles = handleGenerateStyle();
     return (jsxRuntime.jsx(formik.FormikProvider, { value: form, children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("legend", { className: styles.sr, children: name }), jsxRuntime.jsx("div", { className: styles.list, children: jsxRuntime.jsx(formik.FieldArray, { name: name, render: function (_a) {
                             var remove = _a.remove, push = _a.push;
-                            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsxRuntime.jsxs("div", { className: styles.item.container, children: [jsxRuntime.jsx("div", { className: styles.item.head, children: jsxRuntime.jsx("input", { id: option.value, name: option.value, "aria-describedby": "".concat(option.value, "-description"), type: "checkbox", checked: values === null || values === void 0 ? void 0 : values.includes(option.value), className: styles.item.input, disabled: isDisabled, onChange: function (value) {
+                            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsxRuntime.jsxs("div", { className: styles.item.container, children: [jsxRuntime.jsx("div", { className: styles.item.head, children: jsxRuntime.jsx("input", { id: option.value, name: option.value, "data-cy": "form-".concat(name, "-checkbox-").concat(option.value), "aria-describedby": "".concat(option.value, "-description"), type: "checkbox", checked: values === null || values === void 0 ? void 0 : values.includes(option.value), className: styles.item.input, disabled: isDisabled, onChange: function (value) {
                                                     var isChecked = value.currentTarget.checked;
                                                     if (isChecked) {
                                                         push(option.value);