pixel-react 1.7.4 → 1.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/lib/components/ConditionalDropdown/types.d.ts +1 -1
  2. package/lib/components/FileDropzone/types.d.ts +12 -4
  3. package/lib/components/MenuOption/types.d.ts +1 -1
  4. package/lib/components/PopUpModal/types.d.ts +2 -1
  5. package/lib/index.d.ts +69 -63
  6. package/lib/index.esm.js +70 -46
  7. package/lib/index.esm.js.map +1 -1
  8. package/lib/index.js +70 -46
  9. package/lib/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +4 -0
  12. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +1 -1
  13. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -1
  14. package/src/components/ConditionalDropdown/types.ts +1 -1
  15. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +8 -8
  16. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +1 -5
  17. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +4 -3
  18. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +35 -27
  19. package/src/components/FileDropzone/Dropzone.tsx +3 -0
  20. package/src/components/FileDropzone/FileDropzone.scss +18 -0
  21. package/src/components/FileDropzone/FileDropzone.stories.tsx +75 -7
  22. package/src/components/FileDropzone/FileDropzone.tsx +2 -0
  23. package/src/components/FileDropzone/RadioFilePreview.tsx +7 -3
  24. package/src/components/FileDropzone/types.ts +13 -4
  25. package/src/components/MenuOption/MenuOption.stories.tsx +2 -3
  26. package/src/components/MenuOption/MenuOption.tsx +9 -2
  27. package/src/components/MenuOption/types.ts +1 -1
  28. package/src/components/PopUpModal/types.ts +4 -3
  29. package/src/components/Search/Search.stories.tsx +1 -2
@@ -21,7 +21,7 @@ export interface ConditionalDropdownProps {
21
21
  /**
22
22
  * Function storing and updating the inputValue state
23
23
  */
24
- setHashInputValue?: (value: dynamicObject | undefined) => void;
24
+ setHashInputValue?: (value: File | dynamicObject | null) => void;
25
25
  /**
26
26
  * List of variables
27
27
  */
@@ -1,4 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
+ import { DynamicObj } from '../CreateVariable/types';
2
3
  export interface RadioOption {
3
4
  label: string;
4
5
  value: string;
@@ -85,11 +86,11 @@ export interface FileDropzoneProps {
85
86
  /**
86
87
  * Its the File Name of File Selected from Local File.
87
88
  **/
88
- setSelectedFile?: (file: File | null) => void;
89
+ setSelectedFile?: (file: File | DynamicObj | null) => void;
89
90
  /**
90
91
  * Its the File Name of File Selected from Local File.
91
92
  **/
92
- selectedFile?: File | null;
93
+ selectedFile?: File | DynamicObj | null;
93
94
  /**
94
95
  * Its the function which updates the Selected file from Local Directory.
95
96
  **/
@@ -106,6 +107,10 @@ export interface FileDropzoneProps {
106
107
  * If isDisable is true not able to access the FileDropzone
107
108
  **/
108
109
  isDisable?: boolean;
110
+ /**
111
+ * Its the boolean value setted when the replace is clicked for TestData radio option .
112
+ **/
113
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
109
114
  }
110
115
  export interface FileState {
111
116
  accepted: File[];
@@ -154,11 +159,12 @@ export interface DroppableProps {
154
159
  selectedRadioOption?: Option;
155
160
  radioOptions?: RadioOption[];
156
161
  handleOptionChange?: (option: RadioOption) => void;
157
- selectedFile?: File | null;
158
- setSelectedFile?: (file: File | null) => void;
162
+ selectedFile?: File | DynamicObj | null;
163
+ setSelectedFile?: (file: File | DynamicObj | null) => void;
159
164
  handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
160
165
  handleRemoveFile?: () => void;
161
166
  isDisable?: boolean;
167
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
162
168
  }
163
169
  export interface FilePreviewProps {
164
170
  file: File;
@@ -172,4 +178,6 @@ export interface RadioFilePreviewProps {
172
178
  onFileRemoveClick?: () => void;
173
179
  onFileReplaceClick?: (file: File | null) => void;
174
180
  setSelectedFile?: (file: File | null) => void;
181
+ selectedRadioOption?: Option;
182
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
175
183
  }
@@ -173,7 +173,7 @@ interface MenuOptionProps {
173
173
  * @optional
174
174
  */
175
175
  optionCardVariant?: 'primary';
176
- targetRef?: React.RefObject<HTMLElement>;
176
+ targetRef?: string | React.RefObject<HTMLElement>;
177
177
  }
178
178
  interface OptionProps {
179
179
  /**
@@ -5,7 +5,8 @@ export interface PopUpModalProps {
5
5
  titleMessage: string;
6
6
  subTitleMessage?: string;
7
7
  iconName: string;
8
- modalMessage: string;
8
+ modalMessage: string | React.ReactNode;
9
+ secondaryMessage?: string | React.ReactNode;
9
10
  firstButtonLabel?: string;
10
11
  secondButtonLabel: string;
11
12
  buttonVariant: any;
package/lib/index.d.ts CHANGED
@@ -949,7 +949,7 @@ interface MenuOptionProps {
949
949
  * @optional
950
950
  */
951
951
  optionCardVariant?: 'primary';
952
- targetRef?: React.RefObject<HTMLElement>;
952
+ targetRef?: string | React.RefObject<HTMLElement>;
953
953
  }
954
954
 
955
955
  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 = {
1099
1099
 
1100
1100
  declare const DonutChart: React__default.FC<DonutChartProps>;
1101
1101
 
1102
+ type DynamicObj = {
1103
+ [key: string]: any;
1104
+ };
1105
+ interface CreateVariableProps {
1106
+ /**
1107
+ * Open Create variable Slider
1108
+ */
1109
+ isOpen: boolean;
1110
+ /**
1111
+ * Value for the variable name
1112
+ */
1113
+ variableName: string;
1114
+ /**
1115
+ * Value for the variable to be created
1116
+ */
1117
+ value: string;
1118
+ /**
1119
+ * List for the variable types
1120
+ */
1121
+ variableTypesList: DynamicObj[];
1122
+ /**
1123
+ * Selected variable type
1124
+ */
1125
+ selectedVariableType: DynamicObj;
1126
+ /**
1127
+ * Function to handle variable type change
1128
+ * @param option
1129
+ * @returns
1130
+ */
1131
+ onVariableTypeChange: (option: DynamicObj) => void;
1132
+ /**
1133
+ * Function to handle close
1134
+ */
1135
+ onClose?: () => void;
1136
+ /**
1137
+ * onChange of name
1138
+ */
1139
+ onNameChange: (value: string) => void;
1140
+ /**
1141
+ * onChange of value
1142
+ */
1143
+ onValueChange: (value: string) => void;
1144
+ /**
1145
+ * Hide value
1146
+ */
1147
+ hideValue: boolean;
1148
+ /**
1149
+ * onChange for hide value
1150
+ */
1151
+ onHideChange: (value: boolean) => void;
1152
+ /**
1153
+ * Function to handle submit
1154
+ */
1155
+ handleSubmit: () => void;
1156
+ }
1157
+
1102
1158
  interface RadioOption {
1103
1159
  label: string;
1104
1160
  value: string;
@@ -1185,11 +1241,11 @@ interface FileDropzoneProps {
1185
1241
  /**
1186
1242
  * Its the File Name of File Selected from Local File.
1187
1243
  **/
1188
- setSelectedFile?: (file: File | null) => void;
1244
+ setSelectedFile?: (file: File | DynamicObj | null) => void;
1189
1245
  /**
1190
1246
  * Its the File Name of File Selected from Local File.
1191
1247
  **/
1192
- selectedFile?: File | null;
1248
+ selectedFile?: File | DynamicObj | null;
1193
1249
  /**
1194
1250
  * Its the function which updates the Selected file from Local Directory.
1195
1251
  **/
@@ -1206,6 +1262,10 @@ interface FileDropzoneProps {
1206
1262
  * If isDisable is true not able to access the FileDropzone
1207
1263
  **/
1208
1264
  isDisable?: boolean;
1265
+ /**
1266
+ * Its the boolean value setted when the replace is clicked for TestData radio option .
1267
+ **/
1268
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
1209
1269
  }
1210
1270
  interface FileError {
1211
1271
  message: string;
@@ -1250,11 +1310,12 @@ interface DroppableProps {
1250
1310
  selectedRadioOption?: Option;
1251
1311
  radioOptions?: RadioOption[];
1252
1312
  handleOptionChange?: (option: RadioOption) => void;
1253
- selectedFile?: File | null;
1254
- setSelectedFile?: (file: File | null) => void;
1313
+ selectedFile?: File | DynamicObj | null;
1314
+ setSelectedFile?: (file: File | DynamicObj | null) => void;
1255
1315
  handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
1256
1316
  handleRemoveFile?: () => void;
1257
1317
  isDisable?: boolean;
1318
+ setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
1258
1319
  }
1259
1320
  interface FilePreviewProps {
1260
1321
  file: File;
@@ -2618,62 +2679,6 @@ interface fieldSetProps {
2618
2679
 
2619
2680
  declare const FieldSet: FC<fieldSetProps>;
2620
2681
 
2621
- type DynamicObj = {
2622
- [key: string]: any;
2623
- };
2624
- interface CreateVariableProps {
2625
- /**
2626
- * Open Create variable Slider
2627
- */
2628
- isOpen: boolean;
2629
- /**
2630
- * Value for the variable name
2631
- */
2632
- variableName: string;
2633
- /**
2634
- * Value for the variable to be created
2635
- */
2636
- value: string;
2637
- /**
2638
- * List for the variable types
2639
- */
2640
- variableTypesList: DynamicObj[];
2641
- /**
2642
- * Selected variable type
2643
- */
2644
- selectedVariableType: DynamicObj;
2645
- /**
2646
- * Function to handle variable type change
2647
- * @param option
2648
- * @returns
2649
- */
2650
- onVariableTypeChange: (option: DynamicObj) => void;
2651
- /**
2652
- * Function to handle close
2653
- */
2654
- onClose?: () => void;
2655
- /**
2656
- * onChange of name
2657
- */
2658
- onNameChange: (value: string) => void;
2659
- /**
2660
- * onChange of value
2661
- */
2662
- onValueChange: (value: string) => void;
2663
- /**
2664
- * Hide value
2665
- */
2666
- hideValue: boolean;
2667
- /**
2668
- * onChange for hide value
2669
- */
2670
- onHideChange: (value: boolean) => void;
2671
- /**
2672
- * Function to handle submit
2673
- */
2674
- handleSubmit: () => void;
2675
- }
2676
-
2677
2682
  declare const CreateVariableSlider: FC<CreateVariableProps>;
2678
2683
 
2679
2684
  interface ColumnProps {
@@ -2928,7 +2933,8 @@ interface PopUpModalProps {
2928
2933
  titleMessage: string;
2929
2934
  subTitleMessage?: string;
2930
2935
  iconName: string;
2931
- modalMessage: string;
2936
+ modalMessage: string | React.ReactNode;
2937
+ secondaryMessage?: string | React.ReactNode;
2932
2938
  firstButtonLabel?: string;
2933
2939
  secondButtonLabel: string;
2934
2940
  buttonVariant: any;
@@ -2964,7 +2970,7 @@ interface ConditionalDropdownProps {
2964
2970
  /**
2965
2971
  * Function storing and updating the inputValue state
2966
2972
  */
2967
- setHashInputValue?: (value: dynamicObject | undefined) => void;
2973
+ setHashInputValue?: (value: File | dynamicObject | null) => void;
2968
2974
  /**
2969
2975
  * List of variables
2970
2976
  */
package/lib/index.esm.js CHANGED
@@ -3266,8 +3266,14 @@ const MenuOption = ({
3266
3266
  closeDropDown();
3267
3267
  };
3268
3268
  const calculateDims = () => {
3269
- if (targetRef?.current) {
3270
- const rect = targetRef.current.getBoundingClientRect();
3269
+ let targetElement = null;
3270
+ if (typeof targetRef === 'string') {
3271
+ targetElement = document.getElementById(targetRef);
3272
+ } else if (targetRef && targetRef.current) {
3273
+ targetElement = targetRef.current;
3274
+ }
3275
+ if (targetElement) {
3276
+ const rect = targetElement.getBoundingClientRect();
3271
3277
  setMenuPosition({
3272
3278
  top: rect.top + window.scrollY,
3273
3279
  left: rect.left + window.scrollX,
@@ -4038,7 +4044,7 @@ const useFileDropzone = options => {
4038
4044
  };
4039
4045
  };
4040
4046
 
4041
- 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}";
4047
+ 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}";
4042
4048
  styleInject(css_248z$S);
4043
4049
 
4044
4050
  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 = ({
4122
4128
  const RadioFilePreview = ({
4123
4129
  selectedFile,
4124
4130
  onFileRemoveClick,
4125
- onFileReplaceClick
4131
+ onFileReplaceClick,
4132
+ selectedRadioOption,
4133
+ setShowDrawer
4126
4134
  }) => {
4127
4135
  const fileInputRef = useRef(null);
4128
4136
  const handleReplaceClick = () => {
4129
- if (fileInputRef.current) {
4130
- fileInputRef.current.click();
4137
+ if (selectedRadioOption?.value === 'Test Data') {
4138
+ setShowDrawer?.(true);
4139
+ return;
4131
4140
  }
4141
+ fileInputRef.current?.click();
4132
4142
  };
4133
4143
  const handleFileChange = event => {
4134
4144
  const file = event.target.files?.[0];
@@ -4200,7 +4210,8 @@ const Dropzone = ({
4200
4210
  selectedFile,
4201
4211
  setSelectedFile,
4202
4212
  handleRemoveFile,
4203
- isDisable
4213
+ isDisable,
4214
+ setShowDrawer
4204
4215
  }) => {
4205
4216
  const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
4206
4217
  return jsx("div", {
@@ -4217,7 +4228,9 @@ const Dropzone = ({
4217
4228
  selectedFile: selectedFile.name,
4218
4229
  onFileRemoveClick: handleRemoveFile,
4219
4230
  onFileReplaceClick: setSelectedFile,
4220
- setSelectedFile: setSelectedFile
4231
+ setSelectedFile: setSelectedFile,
4232
+ selectedRadioOption: selectedRadioOption,
4233
+ setShowDrawer: setShowDrawer
4221
4234
  }) : jsxs(Fragment, {
4222
4235
  children: [jsx("div", {
4223
4236
  className: "ff-file-dropzone-content__icon",
@@ -4372,7 +4385,8 @@ const FileDropzone = ({
4372
4385
  handleFileChange,
4373
4386
  handleRemoveFile,
4374
4387
  isApiResponseError = false,
4375
- isDisable = false
4388
+ isDisable = false,
4389
+ setShowDrawer
4376
4390
  }) => {
4377
4391
  const fileInputRef = useRef(null);
4378
4392
  const {
@@ -4446,7 +4460,8 @@ const FileDropzone = ({
4446
4460
  handleFileChange: handleFileChange,
4447
4461
  handleRemoveFile: handleRemoveFile,
4448
4462
  setSelectedFile: setSelectedFile,
4449
- isDisable: isDisable
4463
+ isDisable: isDisable,
4464
+ setShowDrawer: setShowDrawer
4450
4465
  }), isWebServiceFileDropZone && jsx("input", {
4451
4466
  ref: fileInputRef,
4452
4467
  type: "file",
@@ -23789,7 +23804,7 @@ const Paper = ({
23789
23804
  });
23790
23805
  };
23791
23806
 
23792
- 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}";
23807
+ 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}";
23793
23808
  styleInject(css_248z$B);
23794
23809
 
23795
23810
  const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
@@ -24033,6 +24048,7 @@ const DashboardDonutChart = ({
24033
24048
  children: jsxs("table", {
24034
24049
  className: "ff-legend-table",
24035
24050
  children: [jsx("thead", {
24051
+ className: 'ff-legend-table-thead',
24036
24052
  children: jsxs("tr", {
24037
24053
  children: [jsx("th", {
24038
24054
  className: "ff-table-header",
@@ -31478,13 +31494,12 @@ const ColumnIndicator = ({
31478
31494
  });
31479
31495
  }, [onSelect, column, setContextMenu]);
31480
31496
  return jsxs("th", {
31481
- style: {
31482
- minWidth: `${columnWidth}px`,
31483
- position: 'sticky'
31484
- },
31485
31497
  className: classNames('ff-spreadsheet-header', {
31486
31498
  'ff-spreadsheet-header--selected': selected
31487
31499
  }),
31500
+ style: {
31501
+ minWidth: `${columnWidth}px`
31502
+ },
31488
31503
  onClick: handleClick,
31489
31504
  onContextMenu: contextClick,
31490
31505
  tabIndex: 0,
@@ -31493,7 +31508,7 @@ const ColumnIndicator = ({
31493
31508
  onContextMenu: contextClick,
31494
31509
  tabIndex: 0
31495
31510
  }), jsx(Typography, {
31496
- fontWeight: 'medium',
31511
+ fontWeight: "medium",
31497
31512
  children: label !== undefined ? label : columnIndexToLabel(column)
31498
31513
  }), jsx("div", {
31499
31514
  onMouseDown: onMouseDown,
@@ -31599,14 +31614,13 @@ const RowIndicator = ({
31599
31614
  });
31600
31615
  }, [onSelect, row, setContextMenu]);
31601
31616
  return jsxs("th", {
31602
- style: {
31603
- height: `${rowHeight}px`,
31604
- minWidth: '60px',
31605
- position: 'relative'
31606
- },
31607
31617
  className: classNames('ff-spreadsheet-header', {
31608
31618
  'ff-spreadsheet-header--selected': selected
31609
31619
  }),
31620
+ style: {
31621
+ height: `${rowHeight}px`,
31622
+ minWidth: '60px'
31623
+ },
31610
31624
  onClick: handleClick,
31611
31625
  onContextMenu: contextClick,
31612
31626
  tabIndex: 0,
@@ -32013,7 +32027,7 @@ const Copied = () => {
32013
32027
  });
32014
32028
  };
32015
32029
 
32016
- 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}";
32030
+ 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}";
32017
32031
  styleInject(css_248z$n);
32018
32032
 
32019
32033
  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 = ({
32205
32219
  textAlign: 'center'
32206
32220
  };
32207
32221
  const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
32222
+ const underLineMenuRef = useRef(null);
32223
+ const borderMenuRef = useRef(null);
32208
32224
  useEffect(() => {
32209
32225
  setCellStyle(cell?.style || basicStyle);
32210
32226
  }, [cell]);
@@ -32459,18 +32475,22 @@ const ExcelToolBar = ({
32459
32475
  disabled: toolbar === 'disable',
32460
32476
  onClick: () => setUnderlineType(data, underLine, true),
32461
32477
  name: getUnderlineIcon()
32462
- }), jsx(MenuOption, {
32463
- iconName: "arrow_down",
32464
- zIndex: 1000,
32465
- iconSize: 12,
32466
- options: underlineTypeIcon,
32467
- tooltipPlacement: "top",
32468
- variant: "light",
32469
- onOptionClick: e => {
32470
- let selectedValue = e.value;
32471
- setUnderlineType(data, selectedValue, true);
32472
- setUnderLine(selectedValue);
32473
- }
32478
+ }), jsx("span", {
32479
+ ref: underLineMenuRef,
32480
+ children: jsx(MenuOption, {
32481
+ targetRef: underLineMenuRef,
32482
+ iconName: "arrow_down",
32483
+ zIndex: 1000,
32484
+ iconSize: 12,
32485
+ options: underlineTypeIcon,
32486
+ tooltipPlacement: "top",
32487
+ variant: "light",
32488
+ onOptionClick: e => {
32489
+ let selectedValue = e.value;
32490
+ setUnderlineType(data, selectedValue, true);
32491
+ setUnderLine(selectedValue);
32492
+ }
32493
+ })
32474
32494
  })]
32475
32495
  })
32476
32496
  })]
@@ -32541,18 +32561,22 @@ const ExcelToolBar = ({
32541
32561
  disabled: toolbar === 'disable',
32542
32562
  onClick: () => setBorderType(data, border, 'black'),
32543
32563
  name: getBorderIcon()
32544
- }), jsx(MenuOption, {
32545
- iconName: "arrow_down",
32546
- iconSize: 12,
32547
- zIndex: 1000,
32548
- options: borderTypeIcon,
32549
- tooltipPlacement: "top",
32550
- variant: "light",
32551
- onOptionClick: e => {
32552
- let selectedValue = e.value;
32553
- setBorderType(data, selectedValue, 'black');
32554
- setBorder(selectedValue);
32555
- }
32564
+ }), jsx("span", {
32565
+ ref: borderMenuRef,
32566
+ children: jsx(MenuOption, {
32567
+ iconName: "arrow_down",
32568
+ targetRef: borderMenuRef,
32569
+ iconSize: 12,
32570
+ zIndex: 1000,
32571
+ options: borderTypeIcon,
32572
+ tooltipPlacement: "top",
32573
+ variant: "light",
32574
+ onOptionClick: e => {
32575
+ let selectedValue = e.value;
32576
+ setBorderType(data, selectedValue, 'black');
32577
+ setBorder(selectedValue);
32578
+ }
32579
+ })
32556
32580
  })]
32557
32581
  })
32558
32582
  })