pixel-react 1.5.6 → 1.5.8
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/.storybook/main.ts +7 -1
- package/lib/components/Charts/LineChart/types.d.ts +3 -0
- package/lib/components/LabelEditTextField/types.d.ts +5 -0
- package/lib/components/MiniModal/types.d.ts +9 -0
- package/lib/index.d.ts +17 -0
- package/lib/index.esm.js +169 -95
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +169 -95
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/info_user.svg +5 -0
- package/src/assets/icons/license_info.svg +12 -12
- package/src/components/Charts/LineChart/LineChart.scss +8 -7
- package/src/components/Charts/LineChart/LineChart.stories.tsx +170 -51
- package/src/components/Charts/LineChart/LineChart.tsx +30 -27
- package/src/components/Charts/LineChart/types.ts +22 -20
- package/src/components/EditTextField/EditTextField.stories.tsx +1 -1
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -0
- package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +11 -15
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +44 -13
- package/src/components/LabelEditTextField/types.ts +5 -0
- package/src/components/MiniModal/MiniModal.scss +9 -5
- package/src/components/MiniModal/MiniModal.stories.tsx +28 -1
- package/src/components/MiniModal/MiniModal.tsx +110 -74
- package/src/components/MiniModal/types.ts +9 -0
- package/src/components/MultiSelect/MultiSelect.stories.tsx +1 -1
- package/src/components/MultiSelect/MultiSelect.tsx +11 -8
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react';
|
2
2
|
import { LineChartProps } from './types';
|
3
3
|
import './LineChart.scss';
|
4
|
+
import Typography from '../../Typography';
|
4
5
|
|
5
6
|
interface HoverState {
|
6
7
|
cursorX: number | null;
|
@@ -21,6 +22,9 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
21
22
|
xAxisColor,
|
22
23
|
yAxisColor,
|
23
24
|
yAxisLabelColor,
|
25
|
+
textSize,
|
26
|
+
fontWeight,
|
27
|
+
numberSize,
|
24
28
|
}) => {
|
25
29
|
const margin = 40;
|
26
30
|
const xMax = width - margin * 2;
|
@@ -29,29 +33,25 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
29
33
|
const isDefaultLineChart =
|
30
34
|
data[0]?.data[0]?.hasOwnProperty('date') &&
|
31
35
|
data[0]?.data[0]?.hasOwnProperty('totalMemory');
|
32
|
-
const xKey = isDefaultLineChart ? 'date' : 'date';
|
33
|
-
const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
|
34
|
-
|
35
|
-
const allZero = data.every((line) =>
|
36
|
-
line.data.every((d: { [key: string]: any }) => d[yKey] === 0)
|
37
|
-
);
|
38
|
-
|
39
|
-
const yMaxExtended = allZero
|
40
|
-
? 4
|
41
|
-
: Math.max(
|
42
|
-
...data.flatMap((line) =>
|
43
|
-
line.data.map((d: { [key: string]: any }) => d[yKey])
|
44
|
-
)
|
45
|
-
) + 3;
|
46
|
-
|
36
|
+
const xKey = isDefaultLineChart ? 'date' : 'date';
|
37
|
+
const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
|
47
38
|
const xScale = (x: string) => {
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
39
|
+
const date = new Date(x);
|
40
|
+
const time = date.getTime();
|
41
|
+
const minDate = new Date(
|
42
|
+
Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
|
43
|
+
);
|
44
|
+
const maxDate = new Date(
|
45
|
+
Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
|
46
|
+
);
|
47
|
+
|
48
|
+
return (
|
49
|
+
((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
|
50
|
+
xMax
|
51
|
+
);
|
52
52
|
};
|
53
53
|
|
54
|
-
const yScale = (y: number) => yMax - (y * yMax) /
|
54
|
+
const yScale = (y: number) => yMax - (y * yMax) / 1024;
|
55
55
|
|
56
56
|
const generateLinePath = (lineData: { [key: string]: any }[]) =>
|
57
57
|
lineData.reduce((path, point, i) => {
|
@@ -127,11 +127,11 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
127
127
|
currentXValue: null,
|
128
128
|
});
|
129
129
|
|
130
|
-
const xTickInterval = Math.floor(data[0].data.length /
|
130
|
+
const xTickInterval = Math.floor(data[0].data.length / 4);
|
131
131
|
|
132
132
|
return (
|
133
133
|
<div className="ff-line-chart-text">
|
134
|
-
<
|
134
|
+
<Typography className="ff-line-chart-text1" fontSize={textSize} fontWeight="semi-bold">{yAxisLabel}</Typography>
|
135
135
|
<svg
|
136
136
|
width={width}
|
137
137
|
height={height}
|
@@ -155,6 +155,7 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
155
155
|
textAnchor="middle"
|
156
156
|
fill={yAxisLabelColor}
|
157
157
|
className="ff-line-chart-x-axis-label"
|
158
|
+
style={{fontSize:textSize , fontWeight:fontWeight}}
|
158
159
|
>
|
159
160
|
{xAxisLabel}
|
160
161
|
</text>
|
@@ -185,7 +186,7 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
185
186
|
r={5}
|
186
187
|
fill="white"
|
187
188
|
stroke={line.color}
|
188
|
-
strokeWidth={
|
189
|
+
strokeWidth={lineChartWidth}
|
189
190
|
style={{ transition: 'cx 0.1s, cy 0.1s' }}
|
190
191
|
/>
|
191
192
|
<line
|
@@ -212,23 +213,25 @@ const LineChart: React.FC<LineChartProps> = ({
|
|
212
213
|
textAnchor="middle"
|
213
214
|
fill={yAxisColor}
|
214
215
|
className="ff--line-chart-x-line-data"
|
216
|
+
style={{ fontSize:numberSize}}
|
215
217
|
>
|
216
218
|
{point[xKey] != null ? String(point[xKey]) : ''}
|
217
219
|
</text>
|
218
220
|
))}
|
219
221
|
|
220
222
|
{Array.from({ length: 6 }).map((_, i) => {
|
221
|
-
const
|
223
|
+
const yValueInGB = i * 0.2;
|
222
224
|
return (
|
223
225
|
<text
|
224
|
-
key={
|
226
|
+
key={yValueInGB}
|
225
227
|
x={-15}
|
226
|
-
y={yScale(
|
228
|
+
y={yScale(yValueInGB * 1024)}
|
227
229
|
textAnchor="middle"
|
228
230
|
fill={yAxisValueColor}
|
229
231
|
className="ff-line-chart-y-axis-text"
|
232
|
+
style={{ fontSize:numberSize}}
|
230
233
|
>
|
231
|
-
{
|
234
|
+
{yValueInGB.toFixed(1)}
|
232
235
|
</text>
|
233
236
|
);
|
234
237
|
})}
|
@@ -1,27 +1,29 @@
|
|
1
1
|
export interface LineChartDataPoint {
|
2
|
-
|
3
|
-
|
4
|
-
|
2
|
+
point: any;
|
3
|
+
x: string;
|
4
|
+
y: number;
|
5
5
|
}
|
6
6
|
|
7
7
|
export interface Line {
|
8
|
-
|
9
|
-
|
10
|
-
|
8
|
+
show: boolean;
|
9
|
+
color: string;
|
10
|
+
data: LineChartDataPoint[];
|
11
11
|
}
|
12
12
|
|
13
13
|
export interface LineChartProps {
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
14
|
+
data: any[];
|
15
|
+
width: number;
|
16
|
+
height: number;
|
17
|
+
axisColor: string;
|
18
|
+
isStatusVariant?: boolean;
|
19
|
+
lineChartWidth?: number;
|
20
|
+
yAxisLabel?: string;
|
21
|
+
xAxisLabel?: string;
|
22
|
+
yAxisValueColor?: string;
|
23
|
+
xAxisColor?: string;
|
24
|
+
yAxisColor?: string;
|
25
|
+
yAxisLabelColor?: string;
|
26
|
+
textSize?: string | number;
|
27
|
+
fontWeight?: string | number;
|
28
|
+
numberSize?: string | number;
|
29
|
+
}
|
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import EditTextField from './EditTextField';
|
3
3
|
import '../../assets/styles/_colors.scss';
|
4
4
|
import './EditTextField.scss';
|
5
|
-
import { useState } from 'react';
|
5
|
+
import React, { useState } from 'react';
|
6
6
|
|
7
7
|
const meta: Meta<typeof EditTextField> = {
|
8
8
|
title: 'Components/EditTextField',
|
@@ -220,6 +220,7 @@ import AddUser from '../../assets/icons/add_user.svg?react';
|
|
220
220
|
import RemoveUser from '../../assets/icons/remove_user.svg?react';
|
221
221
|
import AddToArchive from '../../assets/icons/add_archive.svg?react';
|
222
222
|
import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
|
223
|
+
import InfoUser from '../../assets/icons/info_user.svg?react';
|
223
224
|
|
224
225
|
Components['success'] = ToastSuccessIcon;
|
225
226
|
Components['alert'] = Alert;
|
@@ -436,5 +437,6 @@ Components['add_user'] = AddUser;
|
|
436
437
|
Components['add_to_archive'] = AddToArchive;
|
437
438
|
Components['remove_user'] = RemoveUser;
|
438
439
|
Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
|
440
|
+
Components['info_user'] = InfoUser;
|
439
441
|
|
440
442
|
export default Components;
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import React from 'react';
|
1
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
3
|
import LabelEditTextField from './LabelEditTextField';
|
3
4
|
import '../../assets/styles/_colors.scss';
|
@@ -17,7 +18,7 @@ export const textField: Story = {
|
|
17
18
|
render: () => {
|
18
19
|
const handleConfirmAction = (inputValue: string) => {
|
19
20
|
//DEMO: we are getting that value from LabelEditTextField
|
20
|
-
|
21
|
+
return inputValue;
|
21
22
|
};
|
22
23
|
return (
|
23
24
|
<LabelEditTextField
|
@@ -31,9 +32,13 @@ export const textField: Story = {
|
|
31
32
|
name: 'close',
|
32
33
|
onClick: () => {},
|
33
34
|
}}
|
34
|
-
width="300px"
|
35
35
|
height="22px"
|
36
36
|
confirmAction={handleConfirmAction}
|
37
|
+
onClick={() => {}}
|
38
|
+
tooltip={{
|
39
|
+
tooltipTitle: 'text',
|
40
|
+
tooltipPlacement: 'bottom',
|
41
|
+
}}
|
37
42
|
/>
|
38
43
|
);
|
39
44
|
},
|
@@ -42,7 +47,7 @@ export const textFieldWithOutLabel: Story = {
|
|
42
47
|
render: () => {
|
43
48
|
const handleConfirmAction = (inputValue: string) => {
|
44
49
|
//DEMO: we are getting that value from LabelEditTextField
|
45
|
-
|
50
|
+
return inputValue;
|
46
51
|
};
|
47
52
|
return (
|
48
53
|
<LabelEditTextField
|
@@ -66,7 +71,7 @@ export const openTextFieldWithOutLabel: Story = {
|
|
66
71
|
render: () => {
|
67
72
|
const handleConfirmAction = (inputValue: string) => {
|
68
73
|
//DEMO: we are getting that value from LabelEditTextField
|
69
|
-
|
74
|
+
return inputValue;
|
70
75
|
};
|
71
76
|
return (
|
72
77
|
<LabelEditTextField
|
@@ -91,11 +96,7 @@ export const textFieldWithDropdown: Story = {
|
|
91
96
|
render: () => {
|
92
97
|
const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
|
93
98
|
//DEMO: we are getting that value from LabelEditTextField
|
94
|
-
|
95
|
-
'Confirmed input value and dropdown value:',
|
96
|
-
inputValue,
|
97
|
-
dropdownValue
|
98
|
-
);
|
99
|
+
return { inputValue, dropdownValue };
|
99
100
|
};
|
100
101
|
return (
|
101
102
|
<LabelEditTextField
|
@@ -125,12 +126,7 @@ export const textFieldWithHighlight: Story = {
|
|
125
126
|
render: () => {
|
126
127
|
const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
|
127
128
|
//DEMO: we are getting that value from LabelEditTextField
|
128
|
-
|
129
|
-
console.log(
|
130
|
-
'Confirmed input value and dropdown value:',
|
131
|
-
inputValue,
|
132
|
-
dropdownValue
|
133
|
-
);
|
129
|
+
return { inputValue, dropdownValue };
|
134
130
|
};
|
135
131
|
return (
|
136
132
|
<LabelEditTextField
|
@@ -4,6 +4,7 @@ import { LabelEditTextFieldTypes } from './types';
|
|
4
4
|
import Typography from '../Typography';
|
5
5
|
import HighlightText from '../HighlightText';
|
6
6
|
import Icon from '../Icon';
|
7
|
+
import Tooltip from '../Tooltip';
|
7
8
|
|
8
9
|
const getErrorMessage = (
|
9
10
|
inputValue: string,
|
@@ -32,10 +33,12 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
32
33
|
cancelIcon,
|
33
34
|
variant = 'textField',
|
34
35
|
dropdownData = [],
|
35
|
-
width
|
36
|
+
width,
|
36
37
|
height = '22px',
|
37
38
|
isOpen = false,
|
38
39
|
confirmAction,
|
40
|
+
onClick,
|
41
|
+
tooltip,
|
39
42
|
}) => {
|
40
43
|
const [isEditing, setIsEditing] = useState(isOpen ?? false);
|
41
44
|
const [inputValue, setInputValue] = useState(text);
|
@@ -47,12 +50,38 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
47
50
|
const [isDropdownModified, setIsDropdownModified] = useState(false);
|
48
51
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
49
52
|
const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
|
50
|
-
|
53
|
+
const [clickTimeout, setClickTimeout] = useState<number | null>(null);
|
54
|
+
useEffect(() => {
|
55
|
+
return () => {
|
56
|
+
if (clickTimeout) {
|
57
|
+
clearTimeout(clickTimeout);
|
58
|
+
}
|
59
|
+
};
|
60
|
+
}, [clickTimeout]);
|
51
61
|
const handleDoubleClick = () => {
|
62
|
+
if (clickTimeout) {
|
63
|
+
clearTimeout(clickTimeout);
|
64
|
+
setClickTimeout(null);
|
65
|
+
}
|
52
66
|
setIsEditing(true);
|
53
67
|
setShowError('');
|
54
68
|
};
|
69
|
+
const handleSingleClick = () => {
|
70
|
+
if (onClick) onClick();
|
71
|
+
};
|
72
|
+
const handleClick = () => {
|
73
|
+
if (clickTimeout) {
|
74
|
+
clearTimeout(clickTimeout);
|
75
|
+
setClickTimeout(null);
|
76
|
+
}
|
55
77
|
|
78
|
+
const timeout = window.setTimeout(() => {
|
79
|
+
handleSingleClick();
|
80
|
+
setClickTimeout(null);
|
81
|
+
}, 1000);
|
82
|
+
|
83
|
+
setClickTimeout(timeout);
|
84
|
+
};
|
56
85
|
const handleConfirm = () => {
|
57
86
|
const errorMessage = getErrorMessage(
|
58
87
|
inputValue,
|
@@ -116,11 +145,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
116
145
|
}, [inputValue]);
|
117
146
|
|
118
147
|
return (
|
119
|
-
<div
|
120
|
-
className="ff-label-edit-text-field"
|
121
|
-
ref={containerRef}
|
122
|
-
style={{ width }}
|
123
|
-
>
|
148
|
+
<div className="ff-label-edit-text-field" ref={containerRef}>
|
124
149
|
{isEditing ? (
|
125
150
|
<div className="ff-label-text-field">
|
126
151
|
{variant === 'textFieldWithDropdown' ? (
|
@@ -195,13 +220,19 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
|
|
195
220
|
</div>
|
196
221
|
</div>
|
197
222
|
) : (
|
198
|
-
<
|
199
|
-
|
200
|
-
|
201
|
-
role="button"
|
223
|
+
<Tooltip
|
224
|
+
title={tooltip?.tooltipTitle ? tooltip?.tooltipTitle : ''}
|
225
|
+
placement={'bottom'}
|
202
226
|
>
|
203
|
-
<
|
204
|
-
|
227
|
+
<span
|
228
|
+
className="display-text"
|
229
|
+
onDoubleClick={handleDoubleClick}
|
230
|
+
role="button"
|
231
|
+
onClick={handleClick}
|
232
|
+
>
|
233
|
+
<HighlightText text={inputValue} highlight={highlightText} />
|
234
|
+
</span>
|
235
|
+
</Tooltip>
|
205
236
|
)}
|
206
237
|
{showError && isEditing && (
|
207
238
|
<Typography as="p" fontSize={8} className="error-text">
|
@@ -8,6 +8,12 @@
|
|
8
8
|
top: $top;
|
9
9
|
left: $left;
|
10
10
|
}
|
11
|
+
.ff-mini-modal-overlay {
|
12
|
+
position: fixed;
|
13
|
+
inset: 0;
|
14
|
+
width: 100vw;
|
15
|
+
height: 100vh;
|
16
|
+
}
|
11
17
|
.ff-mini-edit-modal-container {
|
12
18
|
width: fit-content;
|
13
19
|
padding: 0;
|
@@ -17,9 +23,7 @@
|
|
17
23
|
visibility: visible;
|
18
24
|
}
|
19
25
|
&.animatedModal {
|
20
|
-
animation:
|
21
|
-
slideDown 0.5s ease,
|
22
|
-
opacity 0.5s ease;
|
26
|
+
animation: slideDown 0.5s ease, opacity 0.5s ease;
|
23
27
|
}
|
24
28
|
|
25
29
|
.popover-arrow {
|
@@ -91,7 +95,7 @@
|
|
91
95
|
position: absolute;
|
92
96
|
top: -34px;
|
93
97
|
border-radius: 7px 7px 0 0;
|
94
|
-
|
98
|
+
|
95
99
|
&::before,
|
96
100
|
&::after {
|
97
101
|
position: absolute;
|
@@ -121,7 +125,7 @@
|
|
121
125
|
width: 100%;
|
122
126
|
margin: 0 0 0 -5px;
|
123
127
|
height: 100%;
|
124
|
-
|
128
|
+
|
125
129
|
&.mini-edit-modal-wrapper-shadow {
|
126
130
|
box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
|
127
131
|
}
|
@@ -51,6 +51,10 @@ const BasicModalComponent = () => {
|
|
51
51
|
{currentModal === 1 && (
|
52
52
|
<MiniModal
|
53
53
|
anchorRef="112233"
|
54
|
+
overlay={{
|
55
|
+
isOverlay: true,
|
56
|
+
zIndexOverlay: 99,
|
57
|
+
}}
|
54
58
|
modalProperties={{ width: 300, height: 180 }}
|
55
59
|
headerProps={
|
56
60
|
<>
|
@@ -263,7 +267,12 @@ export const CustomModalWithArrow = () => {
|
|
263
267
|
{currentModal === 1 && (
|
264
268
|
<MiniModal
|
265
269
|
anchorRef="1a2b"
|
270
|
+
overlay={{
|
271
|
+
isOverlay: true,
|
272
|
+
zIndexOverlay: 99,
|
273
|
+
}}
|
266
274
|
modalProperties={{ width: 300, height: 250 }}
|
275
|
+
arrowZIndex={1000}
|
267
276
|
headerProps={
|
268
277
|
<>
|
269
278
|
<Typography as="p">Modal 1</Typography>
|
@@ -287,6 +296,7 @@ export const CustomModalWithArrow = () => {
|
|
287
296
|
text: 'Cancel',
|
288
297
|
onClick: handleCancel,
|
289
298
|
}}
|
299
|
+
outSideClick={handleCancel}
|
290
300
|
proceedButtonProps={{
|
291
301
|
text: 'Proceed',
|
292
302
|
onClick: () => {},
|
@@ -326,6 +336,7 @@ export const CustomModalWithArrow = () => {
|
|
326
336
|
text: 'Cancel',
|
327
337
|
onClick: handleCancel,
|
328
338
|
}}
|
339
|
+
outSideClick={handleCancel}
|
329
340
|
proceedButtonProps={{
|
330
341
|
text: 'Proceed',
|
331
342
|
onClick: () => {},
|
@@ -368,6 +379,7 @@ export const CustomModalWithArrow = () => {
|
|
368
379
|
text: 'Cancel',
|
369
380
|
onClick: handleCancel,
|
370
381
|
}}
|
382
|
+
outSideClick={handleCancel}
|
371
383
|
proceedButtonProps={{
|
372
384
|
text: 'Proceed',
|
373
385
|
onClick: () => {},
|
@@ -408,6 +420,7 @@ export const CustomModalWithArrow = () => {
|
|
408
420
|
text: 'Cancel',
|
409
421
|
onClick: handleCancel,
|
410
422
|
}}
|
423
|
+
outSideClick={handleCancel}
|
411
424
|
proceedButtonProps={{
|
412
425
|
text: 'Proceed',
|
413
426
|
onClick: () => {},
|
@@ -451,6 +464,7 @@ export const CustomModalWithArrow = () => {
|
|
451
464
|
<button onClick={handleCancel}>Cancel</button>
|
452
465
|
</>
|
453
466
|
}
|
467
|
+
outSideClick={handleCancel}
|
454
468
|
cancelButtonProps={{
|
455
469
|
text: 'Cancel',
|
456
470
|
onClick: handleCancel,
|
@@ -492,6 +506,11 @@ export const CustomModalWithWrapper = () => {
|
|
492
506
|
{currentModal === 1 && (
|
493
507
|
<MiniModal
|
494
508
|
anchorRef={btnRef1}
|
509
|
+
overlay={{
|
510
|
+
isOverlay: true,
|
511
|
+
zIndexOverlay: 99,
|
512
|
+
backgroundColorOverlay: 'var(--pop-up-background-blur)',
|
513
|
+
}}
|
495
514
|
modalProperties={{ width: 487, height: 180 }}
|
496
515
|
headerProps={
|
497
516
|
<>
|
@@ -506,6 +525,7 @@ export const CustomModalWithWrapper = () => {
|
|
506
525
|
</Typography>
|
507
526
|
</>
|
508
527
|
}
|
528
|
+
outSideClick={handleCancel}
|
509
529
|
cancelButtonProps={{
|
510
530
|
text: 'Cancel',
|
511
531
|
onClick: handleCancel,
|
@@ -551,6 +571,7 @@ export const CustomModalWithWrapper = () => {
|
|
551
571
|
text: 'Export',
|
552
572
|
onClick: () => {},
|
553
573
|
}}
|
574
|
+
outSideClick={handleCancel}
|
554
575
|
isWrapped={true}
|
555
576
|
isAnimated={false}
|
556
577
|
firstAnchorRef={btnRef1}
|
@@ -575,8 +596,9 @@ export const CustomModalWithWrapper = () => {
|
|
575
596
|
height: 210,
|
576
597
|
borderRadius: 0,
|
577
598
|
zIndex: 3,
|
599
|
+
boxShadow: 'none',
|
578
600
|
}}
|
579
|
-
wrapperProperties={{ width: 30, zIndex: 4 }}
|
601
|
+
wrapperProperties={{ width: 30, zIndex: 4, boxShadow: 'none' }}
|
580
602
|
headerProps={
|
581
603
|
<>
|
582
604
|
<Typography as="p">Delete Selected Scripts</Typography>
|
@@ -600,6 +622,7 @@ export const CustomModalWithWrapper = () => {
|
|
600
622
|
}}
|
601
623
|
isWrapped={true}
|
602
624
|
isAnimated={true}
|
625
|
+
outSideClick={handleCancel}
|
603
626
|
firstAnchorRef={btnRef1}
|
604
627
|
anchorRefLeftNum={225}
|
605
628
|
anchorLeftDistanceForWrapper={170}
|
@@ -630,6 +653,10 @@ export const normalModalFollowedByIcon = () => {
|
|
630
653
|
<MiniModal
|
631
654
|
anchorRef={iconRef1}
|
632
655
|
modalProperties={{ width: 168, height: 108 }}
|
656
|
+
overlay={{
|
657
|
+
isOverlay: true,
|
658
|
+
zIndexOverlay: 99,
|
659
|
+
}}
|
633
660
|
childContent={
|
634
661
|
<>
|
635
662
|
<Typography as="p">
|