pixel-react 1.7.4 → 1.7.6

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,
@@ -4058,7 +4064,7 @@ const useFileDropzone = options => {
   };
 };
 
-var css_248z$S = ".ff-file-dropzone-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n  padding: 16px 0;\n  border-radius: 8px;\n  background: var(--file-dropzone-default-color);\n  border: 1px dashed var(--brand-color);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  gap: 8px;\n  transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone .ff-radio-group-wrapper {\n  position: relative;\n  bottom: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n  background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-file {\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-container {\n  display: grid;\n  place-items: center;\n  padding: 16px 0 40px 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n  height: 80px;\n  width: 80px;\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n  margin: 0 auto;\n  position: relative;\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__webservice-file {\n  padding: 4px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  max-height: 300px;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  padding: 2px;\n  -ms-overflow-style: none;\n  scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px;\n  border-radius: 4px;\n  background-color: var(--file-details-bg);\n  box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n  overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 87%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n  display: grid;\n  place-items: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  justify-content: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: block;\n  color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n  height: 24px;\n  width: 24px;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n}\n\n.ff-webservice-file-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.ff-webservice-file-wrapper .ff-webservice-file-name {\n  position: relative;\n  bottom: 2px;\n}\n\n.ff-input-ref {\n  display: none;\n}\n\n.ff-disable-file-dropzone-wrapper {\n  opacity: 0.5;\n  cursor: not-allowed;\n}";
+var css_248z$S = ".ff-file-dropzone-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n  padding: 16px 0;\n  border-radius: 8px;\n  background: var(--file-dropzone-default-color);\n  border: 1px dashed var(--brand-color);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  gap: 8px;\n  transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone .ff-radio-group-wrapper {\n  position: relative;\n  bottom: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n  background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-file {\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-container {\n  display: grid;\n  place-items: center;\n  padding: 16px 0 40px 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n  height: 80px;\n  width: 80px;\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n  margin: 0 auto;\n  position: relative;\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__webservice-file {\n  padding: 4px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  max-height: 300px;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  padding: 2px;\n  -ms-overflow-style: none;\n  scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px;\n  border-radius: 4px;\n  background-color: var(--file-details-bg);\n  box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n  overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 87%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n  display: grid;\n  place-items: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  justify-content: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: block;\n  color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n  height: 24px;\n  width: 24px;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n}\n\n.ff-webservice-file-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.ff-webservice-file-wrapper .ff-webservice-file-name {\n  position: relative;\n  bottom: 2px;\n}\n\n.ff-input-ref {\n  display: none;\n}\n\n.ff-disable-file-dropzone-wrapper {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.footer_basic_button {\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  justify-content: flex-end;\n  gap: 16px;\n  border-top: 1px solid var(--border-color);\n  padding: 4px 8px;\n  background-color: var(--primary-icon-color);\n}";
 styleInject(css_248z$S);
 
 var css_248z$R = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\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-radio-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n  position: relative;\n  color: var(--text-color);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n  display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n  box-sizing: content-box;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid var(--radio-button-border);\n  position: relative;\n  margin-right: 8px;\n  transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n  content: \"\";\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #fbfdff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 4px solid #f7edff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n  border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n  border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n  background: var(--brand-color);\n  height: 12px;\n  width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n  border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n  background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n  border: 4px solid var(--radio-button-hover);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n  border-color: var(--brand-color);\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n  background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n  cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n  opacity: 0.5;\n}";
@@ -4142,13 +4148,17 @@ const RadioGroup = ({
 const RadioFilePreview = ({
   selectedFile,
   onFileRemoveClick,
-  onFileReplaceClick
+  onFileReplaceClick,
+  selectedRadioOption,
+  setShowDrawer
 }) => {
   const fileInputRef = React.useRef(null);
   const handleReplaceClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
+    if (selectedRadioOption?.value === 'Test Data') {
+      setShowDrawer?.(true);
+      return;
     }
+    fileInputRef.current?.click();
   };
   const handleFileChange = event => {
     const file = event.target.files?.[0];
@@ -4220,7 +4230,8 @@ const Dropzone = ({
   selectedFile,
   setSelectedFile,
   handleRemoveFile,
-  isDisable
+  isDisable,
+  setShowDrawer
 }) => {
   const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
   return jsxRuntime.jsx("div", {
@@ -4237,7 +4248,9 @@ const Dropzone = ({
       selectedFile: selectedFile.name,
       onFileRemoveClick: handleRemoveFile,
       onFileReplaceClick: setSelectedFile,
-      setSelectedFile: setSelectedFile
+      setSelectedFile: setSelectedFile,
+      selectedRadioOption: selectedRadioOption,
+      setShowDrawer: setShowDrawer
     }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx("div", {
         className: "ff-file-dropzone-content__icon",
@@ -4392,7 +4405,8 @@ const FileDropzone = ({
   handleFileChange,
   handleRemoveFile,
   isApiResponseError = false,
-  isDisable = false
+  isDisable = false,
+  setShowDrawer
 }) => {
   const fileInputRef = React.useRef(null);
   const {
@@ -4466,7 +4480,8 @@ const FileDropzone = ({
       handleFileChange: handleFileChange,
       handleRemoveFile: handleRemoveFile,
       setSelectedFile: setSelectedFile,
-      isDisable: isDisable
+      isDisable: isDisable,
+      setShowDrawer: setShowDrawer
     }), isWebServiceFileDropZone && jsxRuntime.jsx("input", {
       ref: fileInputRef,
       type: "file",
@@ -23809,7 +23824,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) => {
@@ -24053,6 +24068,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",
@@ -31498,13 +31514,12 @@ const ColumnIndicator = ({
     });
   }, [onSelect, column, setContextMenu]);
   return jsxRuntime.jsxs("th", {
-    style: {
-      minWidth: `${columnWidth}px`,
-      position: 'sticky'
-    },
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
     }),
+    style: {
+      minWidth: `${columnWidth}px`
+    },
     onClick: handleClick,
     onContextMenu: contextClick,
     tabIndex: 0,
@@ -31513,7 +31528,7 @@ const ColumnIndicator = ({
       onContextMenu: contextClick,
       tabIndex: 0
     }), jsxRuntime.jsx(Typography, {
-      fontWeight: 'medium',
+      fontWeight: "medium",
       children: label !== undefined ? label : columnIndexToLabel(column)
     }), jsxRuntime.jsx("div", {
       onMouseDown: onMouseDown,
@@ -31619,14 +31634,13 @@ const RowIndicator = ({
     });
   }, [onSelect, row, setContextMenu]);
   return jsxRuntime.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,
@@ -32033,7 +32047,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}";
@@ -32225,6 +32239,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]);
@@ -32479,18 +32495,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);
+              }
+            })
           })]
         })
       })]
@@ -32561,18 +32581,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);
+              }
+            })
           })]
         })
       })