pixel-react-excel-sheet 1.0.30 → 1.0.31

package/lib/index.js

@@ -3286,8 +3286,14 @@ const MenuOption = ({
     closeDropDown();
   };
   const calculateDims = () => {
-    if (targetRef?.current) {
-      const rect = targetRef.current.getBoundingClientRect();
+    let targetElement = null;
+    if (typeof targetRef === 'string') {
+      targetElement = document.getElementById(targetRef);
+    } else if (targetRef && targetRef.current) {
+      targetElement = targetRef.current;
+    }
+    if (targetElement) {
+      const rect = targetElement.getBoundingClientRect();
       setMenuPosition({
         top: rect.top + window.scrollY,
         left: rect.left + window.scrollX,
@@ -9797,9 +9803,7 @@ const Search = ({
   };
   const handleChange = data => {
     setSearchValue(data);
-    if (data === '') {
-      onSearch('');
-    }
+    onSearch(data);
   };
   return jsxRuntime.jsxs("div", {
     className: classNames('ff-search-container', {
@@ -23900,7 +23904,7 @@ const Paper = ({
   });
 };
 
-var css_248z$B = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n  flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n  flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg {\n  display: block;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: absolute;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: grid;\n  grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n  grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n  width: 100%;\n  min-width: 300px;\n  border-collapse: collapse;\n  text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n  font-weight: bold;\n  background-color: var(--tabs-bg-color);\n  color: var(--input-hover-border-color);\n  padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n  text-align: right;\n  padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n  width: 58px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 1rem;\n  min-width: 22px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  padding: 0.5rem;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n  padding-right: 22px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  display: flex;\n  align-items: baseline;\n  gap: 5px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  text-align: right;\n}";
+var css_248z$B = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n  flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n  flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg {\n  display: block;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: absolute;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: grid;\n  grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n  grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n  width: 100%;\n  min-width: 300px;\n  border-collapse: collapse;\n  text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-table-thead {\n  position: static;\n  top: auto;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n  font-weight: bold;\n  background-color: var(--tabs-bg-color);\n  color: var(--input-hover-border-color);\n  padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n  text-align: right;\n  padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n  width: 58px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 1rem;\n  min-width: 22px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  padding: 0.5rem;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n  padding-right: 22px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  display: flex;\n  align-items: baseline;\n  gap: 5px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  text-align: right;\n}";
 styleInject(css_248z$B);
 
 const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
@@ -24144,6 +24148,7 @@ const DashboardDonutChart = ({
           children: jsxRuntime.jsxs("table", {
             className: "ff-legend-table",
             children: [jsxRuntime.jsx("thead", {
+              className: 'ff-legend-table-thead',
               children: jsxRuntime.jsxs("tr", {
                 children: [jsxRuntime.jsx("th", {
                   className: "ff-table-header",
@@ -27343,7 +27348,8 @@ const Toastify = () => {
     isOpen: toastProps.isOpen,
     variant: toastProps.variant,
     toastTitle: toastProps.toastTitle,
-    toastMessage: toastProps.toastMessage
+    toastMessage: toastProps.toastMessage,
+    zIndex: 1000000000
   });
 };
 // Utility to trigger toast messages outside of the Toastify component
@@ -32313,6 +32319,8 @@ const ExcelToolBar = ({
     textAlign: 'center'
   };
   const [cellStyle, setCellStyle] = React.useState(cell?.style || basicStyle);
+  const underLineMenuRef = React.useRef(null);
+  const borderMenuRef = React.useRef(null);
   React.useEffect(() => {
     setCellStyle(cell?.style || basicStyle);
   }, [cell]);
@@ -32567,18 +32575,22 @@ const ExcelToolBar = ({
             disabled: toolbar === 'disable',
             onClick: () => setUnderlineType(data, underLine, true),
             name: getUnderlineIcon()
-          }), jsxRuntime.jsx(MenuOption, {
-            iconName: "arrow_down",
-            zIndex: 1000,
-            iconSize: 12,
-            options: underlineTypeIcon,
-            tooltipPlacement: "top",
-            variant: "light",
-            onOptionClick: e => {
-              let selectedValue = e.value;
-              setUnderlineType(data, selectedValue, true);
-              setUnderLine(selectedValue);
-            }
+          }), jsxRuntime.jsx("span", {
+            ref: underLineMenuRef,
+            children: jsxRuntime.jsx(MenuOption, {
+              targetRef: underLineMenuRef,
+              iconName: "arrow_down",
+              zIndex: 1000,
+              iconSize: 12,
+              options: underlineTypeIcon,
+              tooltipPlacement: "top",
+              variant: "light",
+              onOptionClick: e => {
+                let selectedValue = e.value;
+                setUnderlineType(data, selectedValue, true);
+                setUnderLine(selectedValue);
+              }
+            })
           })]
         })
       })]
@@ -32649,18 +32661,22 @@ const ExcelToolBar = ({
             disabled: toolbar === 'disable',
             onClick: () => setBorderType(data, border, 'black'),
             name: getBorderIcon()
-          }), jsxRuntime.jsx(MenuOption, {
-            iconName: "arrow_down",
-            iconSize: 12,
-            zIndex: 1000,
-            options: borderTypeIcon,
-            tooltipPlacement: "top",
-            variant: "light",
-            onOptionClick: e => {
-              let selectedValue = e.value;
-              setBorderType(data, selectedValue, 'black');
-              setBorder(selectedValue);
-            }
+          }), jsxRuntime.jsx("span", {
+            ref: borderMenuRef,
+            children: jsxRuntime.jsx(MenuOption, {
+              iconName: "arrow_down",
+              targetRef: borderMenuRef,
+              iconSize: 12,
+              zIndex: 1000,
+              options: borderTypeIcon,
+              tooltipPlacement: "top",
+              variant: "light",
+              onOptionClick: e => {
+                let selectedValue = e.value;
+                setBorderType(data, selectedValue, 'black');
+                setBorder(selectedValue);
+              }
+            })
           })]
         })
       })
@@ -33627,17 +33643,28 @@ const AttachImage = ({
   });
 };
 
-var css_248z$f = ".ff-card-container {\n  width: 120px;\n  height: 93px;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  overflow: hidden;\n  cursor: pointer;\n}\n.ff-card-container:hover.passed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n  border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n  width: 24px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: center;\n  border-right: 1px solid var(--border-color);\n  gap: 30px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n  transform: rotate(-90deg);\n  transform-origin: center;\n  display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n  background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n  background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n  background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n  background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n  background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-content {\n  flex: 1;\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n  margin-bottom: 4px;\n  color: inherit;\n}\n.ff-card-container.passed .ff-number {\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n  color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n  color: var(--ff-card-flaky-status-bg-color);\n}";
+var css_248z$f = ".ff-card-container {\n  height: 78px;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  overflow: hidden;\n  cursor: pointer;\n}\n.ff-card-container:hover.passed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n  border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n  width: 12%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: center;\n  border-right: 1px solid var(--border-color);\n  gap: 17px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n  transform: rotate(-90deg);\n  transform-origin: center;\n  display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n  background-color: var(--ff-card-passed-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n  background-color: var(--ff-card-failed-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n  background-color: var(--ff-card-warning-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n  background-color: var(--ff-card-skipped-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n  background-color: var(--ff-card-flaky-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container .ff-content {\n  flex: 1;\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n  margin-bottom: 4px;\n  color: inherit;\n}\n.ff-card-container.passed .ff-number {\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n  color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n  color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.toggled.passed .ff-status-bar {\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.toggled.failed .ff-status-bar {\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.toggled.warning .ff-status-bar {\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.toggled.skipped .ff-status-bar {\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.toggled.flaky .ff-status-bar {\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.toggled.passed .ff-content {\n  background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.toggled.failed .ff-content {\n  background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.toggled.warning .ff-content {\n  background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.toggled.skipped .ff-content {\n  background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.toggled.flaky .ff-content {\n  background-color: var(--ff-card-flaky-status-bg-color);\n}";
 styleInject(css_248z$f);
 
 const StatusCard = ({
   icon,
   status,
   count,
-  text
+  text,
+  style = {
+    width: '196.4px'
+  },
+  onSelectedStatus = _status => {}
 }) => {
+  const [isToggled, setIsToggled] = React.useState(false);
+  const handleSelectStatus = status => {
+    setIsToggled(true);
+    onSelectedStatus(status);
+  };
   return jsxRuntime.jsxs("div", {
-    className: `ff-card-container ${status.toLowerCase()}`,
+    className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
+    style: style,
+    onClick: () => handleSelectStatus(status),
     children: [jsxRuntime.jsxs("div", {
       className: "ff-status-bar",
       children: [jsxRuntime.jsx("div", {
@@ -33650,7 +33677,6 @@ const StatusCard = ({
       }), jsxRuntime.jsx(Typography, {
         fontWeight: "semi-bold",
         fontSize: "10px",
-        color: "var(--ff-status-card-text-color)",
         textAlign: "center",
         lineHeight: "15px",
         className: "ff-status-text",
@@ -33664,13 +33690,14 @@ const StatusCard = ({
         fontSize: "24px",
         className: "ff-number",
         lineHeight: "36px",
+        color: isToggled ? 'var(--base-bg-color)' : '',
         children: count
       }), jsxRuntime.jsx(Typography, {
         fontWeight: "regular",
         fontSize: "10px",
         className: "ff-text",
         lineHeight: "15px",
-        color: "var(--ff-card-status-text-color)",
+        color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
         children: text
       })]
     })]
@@ -39731,7 +39758,8 @@ const BarChart = ({
   icons = [],
   iconSize,
   legendPosition = 'bottom',
-  legendGap = 5
+  legendGap = 5,
+  onSelectedBar = _label => {}
 }) => {
   const [tooltip, setTooltip] = React.useState({
     visible: false,
@@ -39789,6 +39817,9 @@ const BarChart = ({
       borderColor: 'transparent'
     });
   };
+  const handleSelectLabel = label => {
+    onSelectedBar(label);
+  };
   return jsxRuntime.jsxs("div", {
     className: "ff-bar-chart-container",
     style: {
@@ -39863,7 +39894,8 @@ const BarChart = ({
               ry: barBorderRadius,
               onMouseEnter: e => handleMouseEnter(e, item.label, item.value, getBorderColor(index)),
               onMouseMove: handleMouseMove,
-              onMouseLeave: handleMouseLeave
+              onMouseLeave: handleMouseLeave,
+              onClick: () => handleSelectLabel(item.label)
             }), showXAxisLabels && jsxRuntime.jsx("text", {
               x: barX + barWidth / 2,
               y: height + topPadding + 15,