pixel-react-excel-sheet 1.0.29 → 1.0.31

package/lib/components/Charts/BarChart/BarChart.d.ts

@@ -21,6 +21,7 @@ type BarChartProps = {
     backgroundColor?: string;
     legendPosition?: 'top' | 'bottom';
     legendGap?: number;
+    onSelectedBar?: (_label: string) => void;
 };
 declare const BarChart: React.FC<BarChartProps>;
 export default BarChart;

package/lib/components/MenuOption/types.d.ts

@@ -173,7 +173,7 @@ interface MenuOptionProps {
      * @optional
      */
     optionCardVariant?: 'primary';
-    targetRef?: React.RefObject<HTMLElement>;
+    targetRef?: string | React.RefObject<HTMLElement>;
 }
 interface OptionProps {
     /**

package/lib/components/PopUpModal/types.d.ts

@@ -5,7 +5,8 @@ export interface PopUpModalProps {
     titleMessage: string;
     subTitleMessage?: string;
     iconName: string;
-    modalMessage: string;
+    modalMessage: string | React.ReactNode;
+    secondaryMessage?: string | React.ReactNode;
     firstButtonLabel?: string;
     secondButtonLabel: string;
     buttonVariant: any;

package/lib/components/StatusCard/types.d.ts

@@ -2,9 +2,15 @@ export interface CardProps {
     /** The icon to display in the card */
     icon: string;
     /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
-    status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky';
+    status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
     /** The number displayed in the card */
     count: number | string;
     /** The description text displayed at the bottom of the card */
     text: string;
+    /** Inline Styling */
+    style?: React.CSSProperties;
+    /** toggle update */
+    handleToggleStatus?: (_status: boolean) => void;
+    /** call back */
+    onSelectedStatus?: (_status: string) => void;
 }

package/lib/index.d.ts

@@ -949,7 +949,7 @@ interface MenuOptionProps {
      * @optional
      */
     optionCardVariant?: 'primary';
-    targetRef?: React.RefObject<HTMLElement>;
+    targetRef?: string | React.RefObject<HTMLElement>;
 }
 
 declare const MenuOption: ({ labelName, iconName, tooltipTitle, tooltipPlacement, options, onClick, onOptionClick, iconButtonSize, iconButtonBorderRadius, iconSize, variant, zIndex, dropdownPlacement, optionCardVariant, targetRef, }: MenuOptionProps) => react_jsx_runtime.JSX.Element;
@@ -2471,11 +2471,17 @@ interface CardProps {
     /** The icon to display in the card */
     icon: string;
     /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
-    status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky';
+    status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
     /** The number displayed in the card */
     count: number | string;
     /** The description text displayed at the bottom of the card */
     text: string;
+    /** Inline Styling */
+    style?: React.CSSProperties;
+    /** toggle update */
+    handleToggleStatus?: (_status: boolean) => void;
+    /** call back */
+    onSelectedStatus?: (_status: string) => void;
 }
 
 declare const StatusCard: React__default.FC<CardProps>;
@@ -2822,6 +2828,7 @@ type BarChartProps = {
     backgroundColor?: string;
     legendPosition?: 'top' | 'bottom';
     legendGap?: number;
+    onSelectedBar?: (_label: string) => void;
 };
 declare const BarChart: React__default.FC<BarChartProps>;
 
@@ -2921,7 +2928,8 @@ interface PopUpModalProps {
     titleMessage: string;
     subTitleMessage?: string;
     iconName: string;
-    modalMessage: string;
+    modalMessage: string | React.ReactNode;
+    secondaryMessage?: string | React.ReactNode;
     firstButtonLabel?: string;
     secondButtonLabel: string;
     buttonVariant: any;

package/lib/index.esm.js

@@ -3266,8 +3266,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,
@@ -9777,9 +9783,7 @@ const Search = ({
   };
   const handleChange = data => {
     setSearchValue(data);
-    if (data === '') {
-      onSearch('');
-    }
+    onSearch(data);
   };
   return jsxs("div", {
     className: classNames('ff-search-container', {
@@ -23880,7 +23884,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) => {
@@ -24124,6 +24128,7 @@ const DashboardDonutChart = ({
           children: jsxs("table", {
             className: "ff-legend-table",
             children: [jsx("thead", {
+              className: 'ff-legend-table-thead',
               children: jsxs("tr", {
                 children: [jsx("th", {
                   className: "ff-table-header",
@@ -27323,7 +27328,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
@@ -31568,16 +31574,23 @@ const ColumnIndicator = ({
     });
   }, [onSelect, column, setContextMenu]);
   return jsxs("th", {
-    style: {
-      minWidth: `${columnWidth}px`
-    },
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
     }),
+    style: {
+      minWidth: `${columnWidth}px`
+    },
     onClick: handleClick,
     onContextMenu: contextClick,
     tabIndex: 0,
-    children: [label !== undefined ? label : columnIndexToLabel(column), jsx("div", {
+    children: [jsx("div", {
+      onClick: handleClick,
+      onContextMenu: contextClick,
+      tabIndex: 0
+    }), jsx(Typography, {
+      fontWeight: "medium",
+      children: label !== undefined ? label : columnIndexToLabel(column)
+    }), jsx("div", {
       onMouseDown: onMouseDown,
       onClick: () => activate$1({
         row: -1,
@@ -31593,32 +31606,7 @@ const ColumnIndicator = ({
         cursor: 'ew-resize'
       }
     })]
-  })
-  // <th
-  //   style={{ minWidth: `${columnWidth}px`}} //Dynamic value, Inline Styling required
-  //   className={classNames('ff-spreadsheet-header', {
-  //     'ff-spreadsheet-header--selected': selected,
-  //   })}
-  //   onClick={handleClick}
-  //   onContextMenu={contextClick}
-  //   tabIndex={0}
-  // >
-  //   {label !== undefined ? label : columnIndexToLabel(column)}
-  //   <div
-  //     onMouseDown={onMouseDown}
-  //     onClick={() => activate({ row: -1, column })}
-  //     style={{
-  //       zIndex: 'inherit',
-  //       width: '2px',
-  //       position: 'absolute',
-  //       right: 0,
-  //       top: 0,
-  //       height: '100%',
-  //       cursor: 'ew-resize',
-  //     }}
-  //   />
-  // </th>
-  ;
+  });
 };
 const enhance$2 = ColumnIndicatorComponent => {
   return function ColumnIndicatorWrapper(props) {
@@ -31706,14 +31694,13 @@ const RowIndicator = ({
     });
   }, [onSelect, row, setContextMenu]);
   return jsxs("th", {
-    style: {
-      height: `${rowHeight}px`,
-      minWidth: '60px',
-      position: 'relative'
-    },
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
     }),
+    style: {
+      height: `${rowHeight}px`,
+      minWidth: '60px'
+    },
     onClick: handleClick,
     onContextMenu: contextClick,
     tabIndex: 0,
@@ -32120,7 +32107,7 @@ const Copied = () => {
   });
 };
 
-var css_248z$n = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\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 {\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-excel {\n  display: flex;\n  flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n  position: relative;\n  top: 0;\n  background-color: var(--excel-toolbar-bg);\n  padding: 4px 8px;\n  margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n  --background-color: var(--drawer-footer-bg);\n  --text-color: var(--text-color);\n  --readonly-text-color: var(--toggle-strip-active);\n  --outline-color: var(--toggle-strip-active);\n  --outline-background-color: var(--overlay-bg);\n  --border-color: var(--excel-sheet-border);\n  --header-background-color: var(--excel-header-bg);\n  --elevation: var(--brand-color);\n  position: relative;\n  overflow: scroll;\n  background: var(--background-color);\n  color: var(--text-color);\n  scrollbar-width: none;\n  display: inline-block;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n  overflow: scroll;\n  top: 0;\n  left: 0;\n  margin: 0;\n  position: relative;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n  outline: none;\n  position: relative;\n  z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n  background-color: var(--elevation);\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  position: absolute;\n  bottom: -5px;\n  right: -5px;\n  cursor: crosshair;\n  z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n  color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  background-color: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n  z-index: 1000;\n  position: sticky;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n  position: fixed;\n  z-index: 2000;\n}\n.ff-excel .ff-spreadsheet-row-header {\n  height: 34px;\n}\n.ff-excel .corner-header {\n  border: 0.1px solid var(--border-color);\n  background-color: var(--header-background-color);\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1100;\n  top: -1px;\n  width: 60px;\n  height: 34px;\n  left: -1px;\n}\n.ff-excel .ff-spreadsheet-header--selected {\n  background: var(--brand-color);\n  color: var(--tooltip-text-color);\n}\n.ff-excel .ff-spreadsheet-data-viewer,\n.ff-excel .ff-spreadsheet-data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-header {\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n.ff-excel .ff-spreadsheet-data-editor,\n.ff-excel .ff-spreadsheet-data-editor input {\n  width: 100%;\n  height: 100%;\n}\n.ff-excel .ff-spreadsheet-data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n.ff-excel .ff-spreadsheet-data-viewer--boolean {\n  text-align: center;\n}\n.ff-excel .ff-spreadsheet-floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-floating-rect--hidden {\n  display: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n.ff-excel .ff-spreadsheet-floating-rect--dragging {\n  border: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}";
+var css_248z$n = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\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 {\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-excel {\n  display: flex;\n  flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n  position: relative;\n  top: 0;\n  background-color: var(--excel-toolbar-bg);\n  padding: 4px 8px;\n  margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n  --background-color: var(--drawer-footer-bg);\n  --text-color: var(--text-color);\n  --readonly-text-color: var(--toggle-strip-active);\n  --outline-color: var(--toggle-strip-active);\n  --outline-background-color: var(--overlay-bg);\n  --border-color: var(--excel-sheet-border);\n  --header-background-color: var(--excel-header-bg);\n  --elevation: var(--brand-color);\n  position: relative;\n  overflow: scroll;\n  background: var(--background-color);\n  color: var(--text-color);\n  scrollbar-width: none;\n  display: inline-block;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n  overflow: scroll;\n  top: 0;\n  left: 0;\n  margin: 0;\n  position: relative;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n  outline: none;\n  position: relative;\n  z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n  background-color: var(--elevation);\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  position: absolute;\n  bottom: -5px;\n  right: -5px;\n  cursor: crosshair;\n  z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n  color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  background-color: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n  z-index: 1000;\n  position: sticky;\n  top: 0;\n  left: 0;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n  position: fixed;\n  z-index: 3000;\n}\n.ff-excel .ff-spreadsheet-row-header {\n  height: 34px;\n}\n.ff-excel .corner-header {\n  border: 1px solid var(--border-color);\n  background-color: var(--header-background-color);\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1100;\n  top: -1px;\n  width: 60px;\n  height: 34px;\n  left: -1px;\n}\n.ff-excel .ff-spreadsheet-header--selected {\n  background: var(--brand-color);\n  color: var(--tooltip-text-color);\n}\n.ff-excel .ff-spreadsheet-data-viewer,\n.ff-excel .ff-spreadsheet-data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-header {\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n.ff-excel .ff-spreadsheet-data-editor,\n.ff-excel .ff-spreadsheet-data-editor input {\n  width: 100%;\n  height: 100%;\n}\n.ff-excel .ff-spreadsheet-data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n.ff-excel .ff-spreadsheet-data-viewer--boolean {\n  text-align: center;\n}\n.ff-excel .ff-spreadsheet-floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-floating-rect--hidden {\n  display: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n.ff-excel .ff-spreadsheet-floating-rect--dragging {\n  border: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}";
 styleInject(css_248z$n);
 
 var css_248z$m = ".ff-excel-toolbar {\n  display: flex;\n  height: 32px;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n  width: 1px;\n  height: 24px;\n  background-color: var(--excel-toolbar-divider);\n  margin: 0 24px;\n  border-radius: 1px;\n  z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n  width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n  width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n  width: 100px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n  display: flex;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n  width: 88px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n  display: flex;\n  align-items: center;\n  width: 36px;\n  height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n  display: flex;\n  align-items: center;\n}";
@@ -32312,6 +32299,8 @@ const ExcelToolBar = ({
     textAlign: 'center'
   };
   const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
+  const underLineMenuRef = useRef(null);
+  const borderMenuRef = useRef(null);
   useEffect(() => {
     setCellStyle(cell?.style || basicStyle);
   }, [cell]);
@@ -32566,18 +32555,22 @@ const ExcelToolBar = ({
             disabled: toolbar === 'disable',
             onClick: () => setUnderlineType(data, underLine, true),
             name: getUnderlineIcon()
-          }), 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);
-            }
+          }), jsx("span", {
+            ref: underLineMenuRef,
+            children: 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);
+              }
+            })
           })]
         })
       })]
@@ -32648,18 +32641,22 @@ const ExcelToolBar = ({
             disabled: toolbar === 'disable',
             onClick: () => setBorderType(data, border, 'black'),
             name: getBorderIcon()
-          }), 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);
-            }
+          }), jsx("span", {
+            ref: borderMenuRef,
+            children: 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);
+              }
+            })
           })]
         })
       })
@@ -33626,17 +33623,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] = useState(false);
+  const handleSelectStatus = status => {
+    setIsToggled(true);
+    onSelectedStatus(status);
+  };
   return jsxs("div", {
-    className: `ff-card-container ${status.toLowerCase()}`,
+    className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
+    style: style,
+    onClick: () => handleSelectStatus(status),
     children: [jsxs("div", {
       className: "ff-status-bar",
       children: [jsx("div", {
@@ -33649,7 +33657,6 @@ const StatusCard = ({
       }), jsx(Typography, {
         fontWeight: "semi-bold",
         fontSize: "10px",
-        color: "var(--ff-status-card-text-color)",
         textAlign: "center",
         lineHeight: "15px",
         className: "ff-status-text",
@@ -33663,13 +33670,14 @@ const StatusCard = ({
         fontSize: "24px",
         className: "ff-number",
         lineHeight: "36px",
+        color: isToggled ? 'var(--base-bg-color)' : '',
         children: count
       }), 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
       })]
     })]
@@ -39730,7 +39738,8 @@ const BarChart = ({
   icons = [],
   iconSize,
   legendPosition = 'bottom',
-  legendGap = 5
+  legendGap = 5,
+  onSelectedBar = _label => {}
 }) => {
   const [tooltip, setTooltip] = useState({
     visible: false,
@@ -39788,6 +39797,9 @@ const BarChart = ({
       borderColor: 'transparent'
     });
   };
+  const handleSelectLabel = label => {
+    onSelectedBar(label);
+  };
   return jsxs("div", {
     className: "ff-bar-chart-container",
     style: {
@@ -39862,7 +39874,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 && jsx("text", {
               x: barX + barWidth / 2,
               y: height + topPadding + 15,