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.
- package/lib/components/ConditionalDropdown/types.d.ts +1 -1
- package/lib/components/FileDropzone/types.d.ts +12 -4
- package/lib/components/MenuOption/types.d.ts +1 -1
- package/lib/components/PopUpModal/types.d.ts +2 -1
- package/lib/index.d.ts +69 -63
- package/lib/index.esm.js +70 -46
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +70 -46
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +4 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +1 -1
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -1
- package/src/components/ConditionalDropdown/types.ts +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +8 -8
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +1 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +4 -3
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +35 -27
- package/src/components/FileDropzone/Dropzone.tsx +3 -0
- package/src/components/FileDropzone/FileDropzone.scss +18 -0
- package/src/components/FileDropzone/FileDropzone.stories.tsx +75 -7
- package/src/components/FileDropzone/FileDropzone.tsx +2 -0
- package/src/components/FileDropzone/RadioFilePreview.tsx +7 -3
- package/src/components/FileDropzone/types.ts +13 -4
- package/src/components/MenuOption/MenuOption.stories.tsx +2 -3
- package/src/components/MenuOption/MenuOption.tsx +9 -2
- package/src/components/MenuOption/types.ts +1 -1
- package/src/components/PopUpModal/types.ts +4 -3
- 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 |
|
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
|
}
|
@@ -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 |
|
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
|
-
|
3270
|
-
|
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 (
|
4130
|
-
|
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:
|
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:
|
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(
|
32463
|
-
|
32464
|
-
|
32465
|
-
|
32466
|
-
|
32467
|
-
|
32468
|
-
|
32469
|
-
|
32470
|
-
|
32471
|
-
|
32472
|
-
|
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(
|
32545
|
-
|
32546
|
-
|
32547
|
-
|
32548
|
-
|
32549
|
-
|
32550
|
-
|
32551
|
-
|
32552
|
-
|
32553
|
-
|
32554
|
-
|
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
|
})
|