pixel-react-excel-sheet 1.0.29 → 1.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  2. package/lib/components/MenuOption/types.d.ts +1 -1
  3. package/lib/components/PopUpModal/types.d.ts +2 -1
  4. package/lib/components/StatusCard/types.d.ts +7 -1
  5. package/lib/index.d.ts +11 -3
  6. package/lib/index.esm.js +87 -74
  7. package/lib/index.esm.js.map +1 -1
  8. package/lib/index.js +87 -74
  9. package/lib/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -0
  12. package/src/components/Charts/BarChart/BarChart.tsx +7 -0
  13. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +4 -0
  14. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +1 -1
  15. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +10 -27
  16. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +1 -5
  17. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +4 -3
  18. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +35 -27
  19. package/src/components/MenuOption/MenuOption.stories.tsx +2 -3
  20. package/src/components/MenuOption/MenuOption.tsx +9 -2
  21. package/src/components/MenuOption/types.ts +1 -1
  22. package/src/components/PopUpModal/types.ts +4 -3
  23. package/src/components/Search/Search.stories.tsx +1 -2
  24. package/src/components/Search/Search.tsx +1 -3
  25. package/src/components/StatusCard/StatusCard.scss +47 -4
  26. package/src/components/StatusCard/StatusCard.stories.tsx +1 -0
  27. package/src/components/StatusCard/StatusCard.tsx +28 -5
  28. package/src/components/StatusCard/types.ts +15 -10
  29. package/src/components/Toastify/Toastify.tsx +1 -0
package/lib/index.js CHANGED
@@ -3286,8 +3286,14 @@ const MenuOption = ({
3286
3286
  closeDropDown();
3287
3287
  };
3288
3288
  const calculateDims = () => {
3289
- if (targetRef?.current) {
3290
- const rect = targetRef.current.getBoundingClientRect();
3289
+ let targetElement = null;
3290
+ if (typeof targetRef === 'string') {
3291
+ targetElement = document.getElementById(targetRef);
3292
+ } else if (targetRef && targetRef.current) {
3293
+ targetElement = targetRef.current;
3294
+ }
3295
+ if (targetElement) {
3296
+ const rect = targetElement.getBoundingClientRect();
3291
3297
  setMenuPosition({
3292
3298
  top: rect.top + window.scrollY,
3293
3299
  left: rect.left + window.scrollX,
@@ -9797,9 +9803,7 @@ const Search = ({
9797
9803
  };
9798
9804
  const handleChange = data => {
9799
9805
  setSearchValue(data);
9800
- if (data === '') {
9801
- onSearch('');
9802
- }
9806
+ onSearch(data);
9803
9807
  };
9804
9808
  return jsxRuntime.jsxs("div", {
9805
9809
  className: classNames('ff-search-container', {
@@ -23900,7 +23904,7 @@ const Paper = ({
23900
23904
  });
23901
23905
  };
23902
23906
 
23903
- 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}";
23907
+ 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}";
23904
23908
  styleInject(css_248z$B);
23905
23909
 
23906
23910
  const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
@@ -24144,6 +24148,7 @@ const DashboardDonutChart = ({
24144
24148
  children: jsxRuntime.jsxs("table", {
24145
24149
  className: "ff-legend-table",
24146
24150
  children: [jsxRuntime.jsx("thead", {
24151
+ className: 'ff-legend-table-thead',
24147
24152
  children: jsxRuntime.jsxs("tr", {
24148
24153
  children: [jsxRuntime.jsx("th", {
24149
24154
  className: "ff-table-header",
@@ -27343,7 +27348,8 @@ const Toastify = () => {
27343
27348
  isOpen: toastProps.isOpen,
27344
27349
  variant: toastProps.variant,
27345
27350
  toastTitle: toastProps.toastTitle,
27346
- toastMessage: toastProps.toastMessage
27351
+ toastMessage: toastProps.toastMessage,
27352
+ zIndex: 1000000000
27347
27353
  });
27348
27354
  };
27349
27355
  // Utility to trigger toast messages outside of the Toastify component
@@ -31588,16 +31594,23 @@ const ColumnIndicator = ({
31588
31594
  });
31589
31595
  }, [onSelect, column, setContextMenu]);
31590
31596
  return jsxRuntime.jsxs("th", {
31591
- style: {
31592
- minWidth: `${columnWidth}px`
31593
- },
31594
31597
  className: classNames('ff-spreadsheet-header', {
31595
31598
  'ff-spreadsheet-header--selected': selected
31596
31599
  }),
31600
+ style: {
31601
+ minWidth: `${columnWidth}px`
31602
+ },
31597
31603
  onClick: handleClick,
31598
31604
  onContextMenu: contextClick,
31599
31605
  tabIndex: 0,
31600
- children: [label !== undefined ? label : columnIndexToLabel(column), jsxRuntime.jsx("div", {
31606
+ children: [jsxRuntime.jsx("div", {
31607
+ onClick: handleClick,
31608
+ onContextMenu: contextClick,
31609
+ tabIndex: 0
31610
+ }), jsxRuntime.jsx(Typography, {
31611
+ fontWeight: "medium",
31612
+ children: label !== undefined ? label : columnIndexToLabel(column)
31613
+ }), jsxRuntime.jsx("div", {
31601
31614
  onMouseDown: onMouseDown,
31602
31615
  onClick: () => activate$1({
31603
31616
  row: -1,
@@ -31613,32 +31626,7 @@ const ColumnIndicator = ({
31613
31626
  cursor: 'ew-resize'
31614
31627
  }
31615
31628
  })]
31616
- })
31617
- // <th
31618
- // style={{ minWidth: `${columnWidth}px`}} //Dynamic value, Inline Styling required
31619
- // className={classNames('ff-spreadsheet-header', {
31620
- // 'ff-spreadsheet-header--selected': selected,
31621
- // })}
31622
- // onClick={handleClick}
31623
- // onContextMenu={contextClick}
31624
- // tabIndex={0}
31625
- // >
31626
- // {label !== undefined ? label : columnIndexToLabel(column)}
31627
- // <div
31628
- // onMouseDown={onMouseDown}
31629
- // onClick={() => activate({ row: -1, column })}
31630
- // style={{
31631
- // zIndex: 'inherit',
31632
- // width: '2px',
31633
- // position: 'absolute',
31634
- // right: 0,
31635
- // top: 0,
31636
- // height: '100%',
31637
- // cursor: 'ew-resize',
31638
- // }}
31639
- // />
31640
- // </th>
31641
- ;
31629
+ });
31642
31630
  };
31643
31631
  const enhance$2 = ColumnIndicatorComponent => {
31644
31632
  return function ColumnIndicatorWrapper(props) {
@@ -31726,14 +31714,13 @@ const RowIndicator = ({
31726
31714
  });
31727
31715
  }, [onSelect, row, setContextMenu]);
31728
31716
  return jsxRuntime.jsxs("th", {
31729
- style: {
31730
- height: `${rowHeight}px`,
31731
- minWidth: '60px',
31732
- position: 'relative'
31733
- },
31734
31717
  className: classNames('ff-spreadsheet-header', {
31735
31718
  'ff-spreadsheet-header--selected': selected
31736
31719
  }),
31720
+ style: {
31721
+ height: `${rowHeight}px`,
31722
+ minWidth: '60px'
31723
+ },
31737
31724
  onClick: handleClick,
31738
31725
  onContextMenu: contextClick,
31739
31726
  tabIndex: 0,
@@ -32140,7 +32127,7 @@ const Copied = () => {
32140
32127
  });
32141
32128
  };
32142
32129
 
32143
- 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}";
32130
+ 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}";
32144
32131
  styleInject(css_248z$n);
32145
32132
 
32146
32133
  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}";
@@ -32332,6 +32319,8 @@ const ExcelToolBar = ({
32332
32319
  textAlign: 'center'
32333
32320
  };
32334
32321
  const [cellStyle, setCellStyle] = React.useState(cell?.style || basicStyle);
32322
+ const underLineMenuRef = React.useRef(null);
32323
+ const borderMenuRef = React.useRef(null);
32335
32324
  React.useEffect(() => {
32336
32325
  setCellStyle(cell?.style || basicStyle);
32337
32326
  }, [cell]);
@@ -32586,18 +32575,22 @@ const ExcelToolBar = ({
32586
32575
  disabled: toolbar === 'disable',
32587
32576
  onClick: () => setUnderlineType(data, underLine, true),
32588
32577
  name: getUnderlineIcon()
32589
- }), jsxRuntime.jsx(MenuOption, {
32590
- iconName: "arrow_down",
32591
- zIndex: 1000,
32592
- iconSize: 12,
32593
- options: underlineTypeIcon,
32594
- tooltipPlacement: "top",
32595
- variant: "light",
32596
- onOptionClick: e => {
32597
- let selectedValue = e.value;
32598
- setUnderlineType(data, selectedValue, true);
32599
- setUnderLine(selectedValue);
32600
- }
32578
+ }), jsxRuntime.jsx("span", {
32579
+ ref: underLineMenuRef,
32580
+ children: jsxRuntime.jsx(MenuOption, {
32581
+ targetRef: underLineMenuRef,
32582
+ iconName: "arrow_down",
32583
+ zIndex: 1000,
32584
+ iconSize: 12,
32585
+ options: underlineTypeIcon,
32586
+ tooltipPlacement: "top",
32587
+ variant: "light",
32588
+ onOptionClick: e => {
32589
+ let selectedValue = e.value;
32590
+ setUnderlineType(data, selectedValue, true);
32591
+ setUnderLine(selectedValue);
32592
+ }
32593
+ })
32601
32594
  })]
32602
32595
  })
32603
32596
  })]
@@ -32668,18 +32661,22 @@ const ExcelToolBar = ({
32668
32661
  disabled: toolbar === 'disable',
32669
32662
  onClick: () => setBorderType(data, border, 'black'),
32670
32663
  name: getBorderIcon()
32671
- }), jsxRuntime.jsx(MenuOption, {
32672
- iconName: "arrow_down",
32673
- iconSize: 12,
32674
- zIndex: 1000,
32675
- options: borderTypeIcon,
32676
- tooltipPlacement: "top",
32677
- variant: "light",
32678
- onOptionClick: e => {
32679
- let selectedValue = e.value;
32680
- setBorderType(data, selectedValue, 'black');
32681
- setBorder(selectedValue);
32682
- }
32664
+ }), jsxRuntime.jsx("span", {
32665
+ ref: borderMenuRef,
32666
+ children: jsxRuntime.jsx(MenuOption, {
32667
+ iconName: "arrow_down",
32668
+ targetRef: borderMenuRef,
32669
+ iconSize: 12,
32670
+ zIndex: 1000,
32671
+ options: borderTypeIcon,
32672
+ tooltipPlacement: "top",
32673
+ variant: "light",
32674
+ onOptionClick: e => {
32675
+ let selectedValue = e.value;
32676
+ setBorderType(data, selectedValue, 'black');
32677
+ setBorder(selectedValue);
32678
+ }
32679
+ })
32683
32680
  })]
32684
32681
  })
32685
32682
  })
@@ -33646,17 +33643,28 @@ const AttachImage = ({
33646
33643
  });
33647
33644
  };
33648
33645
 
33649
- 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}";
33646
+ 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}";
33650
33647
  styleInject(css_248z$f);
33651
33648
 
33652
33649
  const StatusCard = ({
33653
33650
  icon,
33654
33651
  status,
33655
33652
  count,
33656
- text
33653
+ text,
33654
+ style = {
33655
+ width: '196.4px'
33656
+ },
33657
+ onSelectedStatus = _status => {}
33657
33658
  }) => {
33659
+ const [isToggled, setIsToggled] = React.useState(false);
33660
+ const handleSelectStatus = status => {
33661
+ setIsToggled(true);
33662
+ onSelectedStatus(status);
33663
+ };
33658
33664
  return jsxRuntime.jsxs("div", {
33659
- className: `ff-card-container ${status.toLowerCase()}`,
33665
+ className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
33666
+ style: style,
33667
+ onClick: () => handleSelectStatus(status),
33660
33668
  children: [jsxRuntime.jsxs("div", {
33661
33669
  className: "ff-status-bar",
33662
33670
  children: [jsxRuntime.jsx("div", {
@@ -33669,7 +33677,6 @@ const StatusCard = ({
33669
33677
  }), jsxRuntime.jsx(Typography, {
33670
33678
  fontWeight: "semi-bold",
33671
33679
  fontSize: "10px",
33672
- color: "var(--ff-status-card-text-color)",
33673
33680
  textAlign: "center",
33674
33681
  lineHeight: "15px",
33675
33682
  className: "ff-status-text",
@@ -33683,13 +33690,14 @@ const StatusCard = ({
33683
33690
  fontSize: "24px",
33684
33691
  className: "ff-number",
33685
33692
  lineHeight: "36px",
33693
+ color: isToggled ? 'var(--base-bg-color)' : '',
33686
33694
  children: count
33687
33695
  }), jsxRuntime.jsx(Typography, {
33688
33696
  fontWeight: "regular",
33689
33697
  fontSize: "10px",
33690
33698
  className: "ff-text",
33691
33699
  lineHeight: "15px",
33692
- color: "var(--ff-card-status-text-color)",
33700
+ color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
33693
33701
  children: text
33694
33702
  })]
33695
33703
  })]
@@ -39750,7 +39758,8 @@ const BarChart = ({
39750
39758
  icons = [],
39751
39759
  iconSize,
39752
39760
  legendPosition = 'bottom',
39753
- legendGap = 5
39761
+ legendGap = 5,
39762
+ onSelectedBar = _label => {}
39754
39763
  }) => {
39755
39764
  const [tooltip, setTooltip] = React.useState({
39756
39765
  visible: false,
@@ -39808,6 +39817,9 @@ const BarChart = ({
39808
39817
  borderColor: 'transparent'
39809
39818
  });
39810
39819
  };
39820
+ const handleSelectLabel = label => {
39821
+ onSelectedBar(label);
39822
+ };
39811
39823
  return jsxRuntime.jsxs("div", {
39812
39824
  className: "ff-bar-chart-container",
39813
39825
  style: {
@@ -39882,7 +39894,8 @@ const BarChart = ({
39882
39894
  ry: barBorderRadius,
39883
39895
  onMouseEnter: e => handleMouseEnter(e, item.label, item.value, getBorderColor(index)),
39884
39896
  onMouseMove: handleMouseMove,
39885
- onMouseLeave: handleMouseLeave
39897
+ onMouseLeave: handleMouseLeave,
39898
+ onClick: () => handleSelectLabel(item.label)
39886
39899
  }), showXAxisLabels && jsxRuntime.jsx("text", {
39887
39900
  x: barX + barWidth / 2,
39888
39901
  y: height + topPadding + 15,