pixel-react 1.7.4 → 1.7.6

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

@@ -21,7 +21,7 @@ export interface ConditionalDropdownProps {
     /**
      * Function storing and updating the inputValue state
      */
-    setHashInputValue?: (value: dynamicObject | undefined) => void;
+    setHashInputValue?: (value: File | dynamicObject | null) => void;
     /**
      * List of variables
      */

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { DynamicObj } from '../CreateVariable/types';
 export interface RadioOption {
     label: string;
     value: string;
@@ -85,11 +86,11 @@ export interface FileDropzoneProps {
     /**
      *  Its the File Name of File Selected from Local File.
      **/
-    setSelectedFile?: (file: File | null) => void;
+    setSelectedFile?: (file: File | DynamicObj | null) => void;
     /**
      *  Its the File Name of File Selected from Local File.
      **/
-    selectedFile?: File | null;
+    selectedFile?: File | DynamicObj | null;
     /**
      *  Its the function which updates the Selected file from Local Directory.
      **/
@@ -106,6 +107,10 @@ export interface FileDropzoneProps {
      *  If isDisable is true not able to access the FileDropzone
      **/
     isDisable?: boolean;
+    /**
+    *  Its the boolean value setted when the replace is clicked for TestData radio option .
+    **/
+    setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
 }
 export interface FileState {
     accepted: File[];
@@ -154,11 +159,12 @@ export interface DroppableProps {
     selectedRadioOption?: Option;
     radioOptions?: RadioOption[];
     handleOptionChange?: (option: RadioOption) => void;
-    selectedFile?: File | null;
-    setSelectedFile?: (file: File | null) => void;
+    selectedFile?: File | DynamicObj | null;
+    setSelectedFile?: (file: File | DynamicObj | null) => void;
     handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     handleRemoveFile?: () => void;
     isDisable?: boolean;
+    setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
 }
 export interface FilePreviewProps {
     file: File;
@@ -172,4 +178,6 @@ export interface RadioFilePreviewProps {
     onFileRemoveClick?: () => void;
     onFileReplaceClick?: (file: File | null) => void;
     setSelectedFile?: (file: File | null) => void;
+    selectedRadioOption?: Option;
+    setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
 }

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/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;
@@ -1099,6 +1099,62 @@ type DonutChartProps = {
 
 declare const DonutChart: React__default.FC<DonutChartProps>;
 
+type DynamicObj = {
+    [key: string]: any;
+};
+interface CreateVariableProps {
+    /**
+     * Open Create variable Slider
+     */
+    isOpen: boolean;
+    /**
+     * Value for the variable name
+     */
+    variableName: string;
+    /**
+     * Value for the variable to be created
+     */
+    value: string;
+    /**
+     * List for the variable types
+     */
+    variableTypesList: DynamicObj[];
+    /**
+     * Selected variable type
+     */
+    selectedVariableType: DynamicObj;
+    /**
+     * Function to handle variable type change
+     * @param option
+     * @returns
+     */
+    onVariableTypeChange: (option: DynamicObj) => void;
+    /**
+     * Function to handle close
+     */
+    onClose?: () => void;
+    /**
+     * onChange of name
+     */
+    onNameChange: (value: string) => void;
+    /**
+     * onChange of value
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * Hide value
+     */
+    hideValue: boolean;
+    /**
+     * onChange for hide value
+     */
+    onHideChange: (value: boolean) => void;
+    /**
+     * Function to handle submit
+     */
+    handleSubmit: () => void;
+}
+
 interface RadioOption {
     label: string;
     value: string;
@@ -1185,11 +1241,11 @@ interface FileDropzoneProps {
     /**
      *  Its the File Name of File Selected from Local File.
      **/
-    setSelectedFile?: (file: File | null) => void;
+    setSelectedFile?: (file: File | DynamicObj | null) => void;
     /**
      *  Its the File Name of File Selected from Local File.
      **/
-    selectedFile?: File | null;
+    selectedFile?: File | DynamicObj | null;
     /**
      *  Its the function which updates the Selected file from Local Directory.
      **/
@@ -1206,6 +1262,10 @@ interface FileDropzoneProps {
      *  If isDisable is true not able to access the FileDropzone
      **/
     isDisable?: boolean;
+    /**
+    *  Its the boolean value setted when the replace is clicked for TestData radio option .
+    **/
+    setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
 }
 interface FileError {
     message: string;
@@ -1250,11 +1310,12 @@ interface DroppableProps {
     selectedRadioOption?: Option;
     radioOptions?: RadioOption[];
     handleOptionChange?: (option: RadioOption) => void;
-    selectedFile?: File | null;
-    setSelectedFile?: (file: File | null) => void;
+    selectedFile?: File | DynamicObj | null;
+    setSelectedFile?: (file: File | DynamicObj | null) => void;
     handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     handleRemoveFile?: () => void;
     isDisable?: boolean;
+    setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
 }
 interface FilePreviewProps {
     file: File;
@@ -2618,62 +2679,6 @@ interface fieldSetProps {
 
 declare const FieldSet: FC<fieldSetProps>;
 
-type DynamicObj = {
-    [key: string]: any;
-};
-interface CreateVariableProps {
-    /**
-     * Open Create variable Slider
-     */
-    isOpen: boolean;
-    /**
-     * Value for the variable name
-     */
-    variableName: string;
-    /**
-     * Value for the variable to be created
-     */
-    value: string;
-    /**
-     * List for the variable types
-     */
-    variableTypesList: DynamicObj[];
-    /**
-     * Selected variable type
-     */
-    selectedVariableType: DynamicObj;
-    /**
-     * Function to handle variable type change
-     * @param option
-     * @returns
-     */
-    onVariableTypeChange: (option: DynamicObj) => void;
-    /**
-     * Function to handle close
-     */
-    onClose?: () => void;
-    /**
-     * onChange of name
-     */
-    onNameChange: (value: string) => void;
-    /**
-     * onChange of value
-     */
-    onValueChange: (value: string) => void;
-    /**
-     * Hide value
-     */
-    hideValue: boolean;
-    /**
-     * onChange for hide value
-     */
-    onHideChange: (value: boolean) => void;
-    /**
-     * Function to handle submit
-     */
-    handleSubmit: () => void;
-}
-
 declare const CreateVariableSlider: FC<CreateVariableProps>;
 
 interface ColumnProps {
@@ -2928,7 +2933,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;
@@ -2964,7 +2970,7 @@ interface ConditionalDropdownProps {
     /**
      * Function storing and updating the inputValue state
      */
-    setHashInputValue?: (value: dynamicObject | undefined) => void;
+    setHashInputValue?: (value: File | dynamicObject | null) => void;
     /**
      * List of variables
      */

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,
@@ -4038,7 +4044,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}";
@@ -4122,13 +4128,17 @@ const RadioGroup = ({
 const RadioFilePreview = ({
   selectedFile,
   onFileRemoveClick,
-  onFileReplaceClick
+  onFileReplaceClick,
+  selectedRadioOption,
+  setShowDrawer
 }) => {
   const fileInputRef = 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];
@@ -4200,7 +4210,8 @@ const Dropzone = ({
   selectedFile,
   setSelectedFile,
   handleRemoveFile,
-  isDisable
+  isDisable,
+  setShowDrawer
 }) => {
   const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
   return jsx("div", {
@@ -4217,7 +4228,9 @@ const Dropzone = ({
       selectedFile: selectedFile.name,
       onFileRemoveClick: handleRemoveFile,
       onFileReplaceClick: setSelectedFile,
-      setSelectedFile: setSelectedFile
+      setSelectedFile: setSelectedFile,
+      selectedRadioOption: selectedRadioOption,
+      setShowDrawer: setShowDrawer
     }) : jsxs(Fragment, {
       children: [jsx("div", {
         className: "ff-file-dropzone-content__icon",
@@ -4372,7 +4385,8 @@ const FileDropzone = ({
   handleFileChange,
   handleRemoveFile,
   isApiResponseError = false,
-  isDisable = false
+  isDisable = false,
+  setShowDrawer
 }) => {
   const fileInputRef = useRef(null);
   const {
@@ -4446,7 +4460,8 @@ const FileDropzone = ({
       handleFileChange: handleFileChange,
       handleRemoveFile: handleRemoveFile,
       setSelectedFile: setSelectedFile,
-      isDisable: isDisable
+      isDisable: isDisable,
+      setShowDrawer: setShowDrawer
     }), isWebServiceFileDropZone && jsx("input", {
       ref: fileInputRef,
       type: "file",
@@ -23789,7 +23804,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) => {
@@ -24033,6 +24048,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",
@@ -31478,13 +31494,12 @@ const ColumnIndicator = ({
     });
   }, [onSelect, column, setContextMenu]);
   return 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,
@@ -31493,7 +31508,7 @@ const ColumnIndicator = ({
       onContextMenu: contextClick,
       tabIndex: 0
     }), jsx(Typography, {
-      fontWeight: 'medium',
+      fontWeight: "medium",
       children: label !== undefined ? label : columnIndexToLabel(column)
     }), jsx("div", {
       onMouseDown: onMouseDown,
@@ -31599,14 +31614,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,
@@ -32013,7 +32027,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}";
@@ -32205,6 +32219,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]);
@@ -32459,18 +32475,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);
+              }
+            })
           })]
         })
       })]
@@ -32541,18 +32561,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);
+              }
+            })
           })]
         })
       })