pixel-react 1.6.8 → 1.7.0
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/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/index.d.ts +1 -0
- package/lib/components/ConditionalDropdown/types.d.ts +145 -0
- package/lib/components/CreateVariable/types.d.ts +2 -2
- package/lib/components/DownloadClient/type.d.ts +19 -27
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
- package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- package/lib/components/LabelEditTextField/types.d.ts +1 -0
- package/lib/components/MachineInputField/types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +2 -1
- package/lib/components/MiniModal/types.d.ts +1 -0
- package/lib/components/Modal/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.d.ts +2 -2
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
- package/lib/components/NLPInput/sampleData.d.ts +104 -0
- package/lib/components/NLPInput/types.d.ts +80 -0
- package/lib/components/PopUpModal/types.d.ts +2 -1
- package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
- package/lib/components/ProgressBar/index.d.ts +1 -0
- package/lib/components/ProgressBar/types.d.ts +12 -0
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +1 -1
- package/lib/hooks/useIntersectionObserver.d.ts +9 -0
- package/lib/index.d.ts +183 -65
- package/lib/index.esm.js +1281 -674
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1282 -674
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
- package/lib/utils/getSequentialPayload/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
- package/src/assets/Themes/BaseTheme.scss +20 -2
- package/src/assets/Themes/DarkTheme.scss +19 -2
- package/src/assets/icons/add_file.svg +4 -4
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/authorization.svg +4 -4
- package/src/assets/icons/depends_on_script.svg +7 -7
- package/src/assets/icons/email_group.svg +3 -3
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/import_icon.svg +4 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/labels.svg +8 -8
- package/src/assets/icons/parameters.svg +3 -3
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/pre_post_condition.svg +8 -8
- package/src/assets/icons/program_element.svg +8 -8
- package/src/assets/icons/test_data.svg +5 -5
- package/src/assets/icons/test_data_set.svg +7 -7
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/icons/variable_set.svg +5 -5
- package/src/assets/styles/_colors.scss +1 -1
- package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
- package/src/components/Charts/LineChart/LineChart.tsx +10 -1
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Checkbox/Checkbox.scss +3 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
- package/src/components/Checkbox/Checkbox.tsx +3 -4
- package/src/components/Chip/Chip.scss +15 -5
- package/src/components/Chip/Chip.stories.tsx +10 -1
- package/src/components/Chip/Chip.tsx +5 -1
- package/src/components/Chip/types.ts +1 -1
- package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/ConditionalDropdown/types.ts +160 -0
- package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
- package/src/components/CreateVariable/types.ts +2 -2
- package/src/components/DownloadClient/DownloadClient.scss +51 -64
- package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
- package/src/components/DownloadClient/DownloadClient.tsx +60 -51
- package/src/components/DownloadClient/type.ts +32 -40
- package/src/components/EditTextField/EditTextField.scss +1 -1
- package/src/components/EditTextField/EditTextField.tsx +14 -20
- package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
- package/src/components/Excel/ExcelFile.stories.tsx +4 -4
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
- package/src/components/Excel/dataConversion.ts +43 -20
- package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
- package/src/components/FileDropzone/FileDropzone.tsx +24 -4
- package/src/components/Form/Forms.tsx +0 -2
- package/src/components/Icon/iconList.ts +12 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
- package/src/components/LabelEditTextField/types.ts +1 -0
- package/src/components/MachineInputField/MachineInputField.scss +1 -5
- package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
- package/src/components/MachineInputField/MachineInputField.tsx +14 -14
- package/src/components/MachineInputField/types.ts +2 -0
- package/src/components/MenuOption/MenuOption.scss +7 -7
- package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
- package/src/components/MenuOption/MenuOption.tsx +9 -13
- package/src/components/MenuOption/types.ts +3 -2
- package/src/components/MiniModal/MiniModal.scss +0 -1
- package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
- package/src/components/MiniModal/MiniModal.tsx +3 -1
- package/src/components/MiniModal/types.ts +1 -0
- package/src/components/Modal/types.ts +1 -1
- package/src/components/MultiSelect/Dropdown.scss +3 -4
- package/src/components/MultiSelect/Dropdown.tsx +34 -7
- package/src/components/MultiSelect/MultiSelect.scss +1 -0
- package/src/components/MultiSelect/MultiSelect.tsx +3 -0
- package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
- package/src/components/MultiSelect/dropdownTypes.ts +2 -0
- package/src/components/NLPInput/NLPInput.scss +77 -21
- package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
- package/src/components/NLPInput/NlpInput.tsx +95 -59
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
- package/src/components/NLPInput/sampleData.ts +162 -0
- package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
- package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
- package/src/components/PopUpModal/PopUpModal.tsx +5 -4
- package/src/components/PopUpModal/types.ts +2 -1
- package/src/components/ProgressBar/ProgressBar.scss +46 -0
- package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
- package/src/components/ProgressBar/ProgressBar.tsx +61 -0
- package/src/components/ProgressBar/index.ts +1 -0
- package/src/components/ProgressBar/types.ts +12 -0
- package/src/components/Search/Search.tsx +9 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/types.ts +7 -5
- package/src/components/Table/Table.scss +1 -0
- package/src/components/TableTree/Components/TableBody.tsx +3 -1
- package/src/components/TableTree/TableTree.stories.tsx +4 -7
- package/src/components/TableTree/TableTree.tsx +27 -181
- package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
- package/src/components/TableTree/data.ts +45 -0
- package/src/components/TableTree/types.ts +4 -4
- package/src/hooks/useIntersectionObserver.tsx +56 -0
- package/src/index.ts +4 -3
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
- package/src/components/AddVariables/AddVariables.tsx +0 -113
- package/src/components/AddVariables/index.ts +0 -1
- package/src/components/AddVariables/types.ts +0 -36
@@ -1,7 +1,7 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import MenuOption from './MenuOption';
|
3
3
|
import './MenuOption.scss';
|
4
|
-
import React, { ReactNode } from 'react';
|
4
|
+
import React, { ReactNode, useRef } from 'react';
|
5
5
|
import Icon from '../Icon';
|
6
6
|
|
7
7
|
const meta: Meta<typeof MenuOption> = {
|
@@ -29,16 +29,16 @@ const meta: Meta<typeof MenuOption> = {
|
|
29
29
|
},
|
30
30
|
tooltipPlacement: {
|
31
31
|
control: {
|
32
|
-
type: '
|
33
|
-
options: ['top', 'down', 'left', 'right'],
|
32
|
+
type: 'select',
|
33
|
+
options: ['top', 'down', 'left', 'right'],
|
34
34
|
},
|
35
35
|
description: 'Placement of the tooltip relative to the button.',
|
36
36
|
defaultValue: 'top',
|
37
37
|
},
|
38
38
|
dropdownPlacement: {
|
39
39
|
control: {
|
40
|
-
type: '
|
41
|
-
options: ['top', 'down', 'left', 'right'],
|
40
|
+
type: 'select',
|
41
|
+
options: ['top', 'down', 'left', 'right'],
|
42
42
|
},
|
43
43
|
description: 'Placement of the dropdown menu relative to the button.',
|
44
44
|
defaultValue: 'down',
|
@@ -49,7 +49,15 @@ const meta: Meta<typeof MenuOption> = {
|
|
49
49
|
type Story = StoryObj<typeof MenuOption>;
|
50
50
|
|
51
51
|
const options = [
|
52
|
-
{
|
52
|
+
{
|
53
|
+
label: (
|
54
|
+
<div>
|
55
|
+
hello <Icon name="edit" />
|
56
|
+
</div>
|
57
|
+
),
|
58
|
+
value: 'opt1',
|
59
|
+
icon: 'success',
|
60
|
+
},
|
53
61
|
{ label: 'Option 2', value: 'opt2', icon: 'success' },
|
54
62
|
{
|
55
63
|
label: 'Delete',
|
@@ -59,21 +67,31 @@ const options = [
|
|
59
67
|
},
|
60
68
|
];
|
61
69
|
|
62
|
-
const handleOptionClick = (option: { label: string|ReactNode }) => {
|
70
|
+
const handleOptionClick = (option: { label: string | ReactNode }) => {
|
63
71
|
alert(`Option clicked: ${option.label}`);
|
64
72
|
};
|
65
73
|
|
66
|
-
|
67
74
|
export const ControlledMenuOption: Story = {
|
68
75
|
args: {
|
69
76
|
iconName: 'more',
|
70
77
|
labelName: 'Controlled Menu',
|
71
78
|
tooltipTitle: 'Select an option',
|
72
|
-
dropdownPlacement:
|
79
|
+
dropdownPlacement: 'top',
|
80
|
+
},
|
81
|
+
render: (args) => {
|
82
|
+
const moreRef = useRef<HTMLDivElement>(null);
|
83
|
+
return (
|
84
|
+
<div ref={moreRef}>
|
85
|
+
<MenuOption
|
86
|
+
{...args}
|
87
|
+
options={options}
|
88
|
+
targetRef={moreRef} // Make sure targetRef is passed properly here
|
89
|
+
onOptionClick={handleOptionClick}
|
90
|
+
dropdownPlacement="left" // Dropdown placement for testing
|
91
|
+
/>
|
92
|
+
</div>
|
93
|
+
);
|
73
94
|
},
|
74
|
-
render: (args) => (
|
75
|
-
<MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
|
76
|
-
),
|
77
95
|
parameters: {
|
78
96
|
docs: {
|
79
97
|
description: {
|
@@ -84,15 +102,24 @@ export const ControlledMenuOption: Story = {
|
|
84
102
|
},
|
85
103
|
};
|
86
104
|
|
87
|
-
|
88
105
|
export const MenuOptionTop: Story = {
|
89
106
|
args: {
|
90
107
|
...ControlledMenuOption.args,
|
91
108
|
dropdownPlacement: 'top',
|
92
109
|
},
|
93
|
-
render: (args) =>
|
94
|
-
|
95
|
-
|
110
|
+
render: (args) => {
|
111
|
+
const moreRef = useRef<HTMLDivElement>(null);
|
112
|
+
return (
|
113
|
+
<div ref={moreRef}>
|
114
|
+
<MenuOption
|
115
|
+
{...args}
|
116
|
+
options={options}
|
117
|
+
targetRef={moreRef}
|
118
|
+
onOptionClick={handleOptionClick}
|
119
|
+
/>
|
120
|
+
</div>
|
121
|
+
);
|
122
|
+
},
|
96
123
|
parameters: {
|
97
124
|
docs: {
|
98
125
|
description: {
|
@@ -102,15 +129,24 @@ export const MenuOptionTop: Story = {
|
|
102
129
|
},
|
103
130
|
};
|
104
131
|
|
105
|
-
|
106
132
|
export const MenuOptionBottom: Story = {
|
107
133
|
args: {
|
108
134
|
...ControlledMenuOption.args,
|
109
135
|
dropdownPlacement: 'down',
|
110
136
|
},
|
111
|
-
render: (args) =>
|
112
|
-
|
113
|
-
|
137
|
+
render: (args) => {
|
138
|
+
const moreRef = useRef<HTMLDivElement>(null);
|
139
|
+
return (
|
140
|
+
<div ref={moreRef}>
|
141
|
+
<MenuOption
|
142
|
+
{...args}
|
143
|
+
options={options}
|
144
|
+
targetRef={moreRef}
|
145
|
+
onOptionClick={handleOptionClick}
|
146
|
+
/>
|
147
|
+
</div>
|
148
|
+
);
|
149
|
+
},
|
114
150
|
parameters: {
|
115
151
|
docs: {
|
116
152
|
description: {
|
@@ -120,15 +156,24 @@ export const MenuOptionBottom: Story = {
|
|
120
156
|
},
|
121
157
|
};
|
122
158
|
|
123
|
-
|
124
159
|
export const MenuOptionLeft: Story = {
|
125
160
|
args: {
|
126
161
|
...ControlledMenuOption.args,
|
127
162
|
dropdownPlacement: 'left',
|
128
163
|
},
|
129
|
-
render: (args) =>
|
130
|
-
|
131
|
-
|
164
|
+
render: (args) => {
|
165
|
+
const moreRef = useRef<HTMLDivElement>(null);
|
166
|
+
return (
|
167
|
+
<div ref={moreRef}>
|
168
|
+
<MenuOption
|
169
|
+
{...args}
|
170
|
+
options={options}
|
171
|
+
targetRef={moreRef}
|
172
|
+
onOptionClick={handleOptionClick}
|
173
|
+
/>
|
174
|
+
</div>
|
175
|
+
);
|
176
|
+
},
|
132
177
|
parameters: {
|
133
178
|
docs: {
|
134
179
|
description: {
|
@@ -141,11 +186,21 @@ export const MenuOptionLeft: Story = {
|
|
141
186
|
export const MenuOptionRight: Story = {
|
142
187
|
args: {
|
143
188
|
...ControlledMenuOption.args,
|
144
|
-
dropdownPlacement: 'right',
|
189
|
+
dropdownPlacement: 'right', // Proper dropdown placement
|
190
|
+
},
|
191
|
+
render: (args) => {
|
192
|
+
const moreRef = useRef<HTMLDivElement>(null);
|
193
|
+
return (
|
194
|
+
<div ref={moreRef}>
|
195
|
+
<MenuOption
|
196
|
+
{...args}
|
197
|
+
options={options}
|
198
|
+
targetRef={moreRef} // Properly pass ref to targetRef
|
199
|
+
onOptionClick={handleOptionClick}
|
200
|
+
/>
|
201
|
+
</div>
|
202
|
+
);
|
145
203
|
},
|
146
|
-
render: (args) => (
|
147
|
-
<MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
|
148
|
-
),
|
149
204
|
parameters: {
|
150
205
|
docs: {
|
151
206
|
description: {
|
@@ -31,7 +31,7 @@ const Option = ({ option, onClick }: OptionProps) => (
|
|
31
31
|
)}
|
32
32
|
<Typography
|
33
33
|
as="label"
|
34
|
-
lineHeight=
|
34
|
+
lineHeight="18px"
|
35
35
|
color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
|
36
36
|
>
|
37
37
|
{option.label}
|
@@ -74,13 +74,13 @@ const OptionCard = ({
|
|
74
74
|
};
|
75
75
|
case 'down':
|
76
76
|
return {
|
77
|
-
top: menuPosition.top +
|
77
|
+
top: menuPosition.top + 20,
|
78
78
|
left: menuPosition.left - 4,
|
79
79
|
};
|
80
80
|
case 'left':
|
81
81
|
return {
|
82
82
|
top: menuPosition.top - 4,
|
83
|
-
left: menuPosition.left - optionsWidth -
|
83
|
+
left: menuPosition.left - optionsWidth - 8,
|
84
84
|
};
|
85
85
|
case 'right':
|
86
86
|
return {
|
@@ -127,7 +127,8 @@ const MenuOption = ({
|
|
127
127
|
variant = 'light',
|
128
128
|
zIndex = 99,
|
129
129
|
dropdownPlacement = 'down',
|
130
|
-
optionCardVariant
|
130
|
+
optionCardVariant,
|
131
|
+
targetRef,
|
131
132
|
}: MenuOptionProps) => {
|
132
133
|
const [isClicked, setIsClicked] = useState(false);
|
133
134
|
const menuRef = useRef<HTMLDivElement>(null);
|
@@ -136,8 +137,6 @@ const MenuOption = ({
|
|
136
137
|
left: 0,
|
137
138
|
height: 0,
|
138
139
|
right: 0,
|
139
|
-
rightSpaceAvailable: 0,
|
140
|
-
bottomSpaceAvailable: 0,
|
141
140
|
});
|
142
141
|
|
143
142
|
const closeDropDown = () => setIsClicked(false);
|
@@ -154,20 +153,17 @@ const MenuOption = ({
|
|
154
153
|
};
|
155
154
|
|
156
155
|
const calculateDims = () => {
|
157
|
-
if (
|
158
|
-
const rect =
|
156
|
+
if (targetRef?.current) {
|
157
|
+
const rect = targetRef.current.getBoundingClientRect();
|
159
158
|
|
160
159
|
setMenuPosition({
|
161
|
-
top: rect.top,
|
162
|
-
left: rect.left,
|
160
|
+
top: rect.top + window.scrollY,
|
161
|
+
left: rect.left + window.scrollX,
|
163
162
|
height: rect.height,
|
164
163
|
right: rect.right,
|
165
|
-
rightSpaceAvailable: document.body.clientWidth - rect.right,
|
166
|
-
bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
|
167
164
|
});
|
168
165
|
}
|
169
166
|
};
|
170
|
-
|
171
167
|
return (
|
172
168
|
<div className="ff-menu-option-container" ref={menuRef}>
|
173
169
|
<Tooltip title={tooltipTitle} placement={tooltipPlacement}>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { ReactNode } from
|
1
|
+
import { ReactNode } from 'react';
|
2
2
|
|
3
3
|
interface OptionClick {
|
4
4
|
/**
|
@@ -6,7 +6,7 @@ interface OptionClick {
|
|
6
6
|
* @type {string}
|
7
7
|
* @required
|
8
8
|
*/
|
9
|
-
label: string |ReactNode;
|
9
|
+
label: string | ReactNode;
|
10
10
|
|
11
11
|
/**
|
12
12
|
* The value(s) associated with the option, which can be a single string or an array of strings.
|
@@ -208,6 +208,7 @@ interface MenuOptionProps {
|
|
208
208
|
* @optional
|
209
209
|
*/
|
210
210
|
optionCardVariant?: 'primary';
|
211
|
+
targetRef?: React.RefObject<HTMLElement>;
|
211
212
|
}
|
212
213
|
|
213
214
|
interface OptionProps {
|
@@ -55,7 +55,12 @@ const BasicModalComponent = () => {
|
|
55
55
|
isOverlay: true,
|
56
56
|
zIndexOverlay: 99,
|
57
57
|
}}
|
58
|
-
modalProperties={{
|
58
|
+
modalProperties={{
|
59
|
+
width: 300,
|
60
|
+
height: 180,
|
61
|
+
left: 180,
|
62
|
+
top: 250,
|
63
|
+
}}
|
59
64
|
headerProps={
|
60
65
|
<>
|
61
66
|
<Typography as="p">Modal 1</Typography>
|
@@ -52,6 +52,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
52
52
|
boxShadow: modalBoxShadow,
|
53
53
|
left: modalLeft,
|
54
54
|
top: modalTop,
|
55
|
+
padding: modalPadding,
|
55
56
|
} = modalProperties || {};
|
56
57
|
|
57
58
|
const {
|
@@ -300,6 +301,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
300
301
|
modalBoxShadow ??
|
301
302
|
'0px 4px 8px var(--ff-mini-modal-arrow-shadow)'
|
302
303
|
}`,
|
304
|
+
padding: `${modalPadding ?? 4}px`,
|
303
305
|
}}
|
304
306
|
>
|
305
307
|
{headerProps ? (
|
@@ -312,7 +314,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
312
314
|
<hr />
|
313
315
|
</Typography>
|
314
316
|
)}
|
315
|
-
|
317
|
+
{childContent}
|
316
318
|
{footerContent ? (
|
317
319
|
<Typography as="footer">{footerContent}</Typography>
|
318
320
|
) : isIconModel ? (
|
@@ -10,11 +10,11 @@
|
|
10
10
|
box-sizing: border-box;
|
11
11
|
margin-block: 4px;
|
12
12
|
max-height: 160px;
|
13
|
-
|
14
13
|
.ff-multiselect-options-wrapper {
|
15
14
|
max-height: 128px;
|
16
15
|
overflow-y: auto;
|
17
16
|
border-radius: 2px;
|
17
|
+
overflow-x: hidden;
|
18
18
|
&::-webkit-scrollbar {
|
19
19
|
width: 4px;
|
20
20
|
height: 40px;
|
@@ -37,11 +37,10 @@
|
|
37
37
|
}
|
38
38
|
|
39
39
|
.no-options {
|
40
|
-
|
41
|
-
color: var(--pop-up-background-blur);
|
40
|
+
color: var(--ff-select-text-color);
|
42
41
|
text-align: center;
|
43
42
|
margin: 0;
|
44
|
-
padding:
|
43
|
+
padding: 7px;
|
45
44
|
line-height: 12px;
|
46
45
|
}
|
47
46
|
.dropdown-option-container {
|
@@ -10,6 +10,7 @@ import Checkbox from '../Checkbox';
|
|
10
10
|
import Tooltip from '../Tooltip';
|
11
11
|
import { truncateText } from '../../utils/truncateText/truncateText';
|
12
12
|
import { getLabel, getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
|
13
|
+
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
|
13
14
|
|
14
15
|
const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
|
15
16
|
(
|
@@ -21,11 +22,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
|
|
21
22
|
zIndex,
|
22
23
|
withSelectButton,
|
23
24
|
labelAccessor='label',
|
24
|
-
valueAccessor='value'
|
25
|
+
valueAccessor='value',
|
26
|
+
loadMoreOptions,
|
25
27
|
},
|
26
28
|
ref
|
27
29
|
) => {
|
28
|
-
|
30
|
+
const filteredOptions = options
|
29
31
|
? options.filter((option) =>
|
30
32
|
getValue(option, valueAccessor)
|
31
33
|
?.toLowerCase()
|
@@ -70,6 +72,22 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
|
|
70
72
|
|
71
73
|
const themeContext = useContext(ThemeContext);
|
72
74
|
const currentTheme = themeContext?.currentTheme;
|
75
|
+
|
76
|
+
useIntersectionObserver(['ff-multiselect-pagination'], {
|
77
|
+
root: document.getElementById('ff-multiselect-options-wrapper'),
|
78
|
+
rootMargin: '0px',
|
79
|
+
threshold: 0.1,
|
80
|
+
onIntersect: (entry, _observer) => {
|
81
|
+
if (entry.isIntersecting) {
|
82
|
+
if (loadMoreOptions) {
|
83
|
+
loadMoreOptions();
|
84
|
+
}
|
85
|
+
|
86
|
+
|
87
|
+
}
|
88
|
+
},
|
89
|
+
});
|
90
|
+
|
73
91
|
return (
|
74
92
|
<div
|
75
93
|
role="listbox"
|
@@ -87,13 +105,17 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
|
|
87
105
|
<div
|
88
106
|
className="ff-multiselect-options-wrapper"
|
89
107
|
style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
|
108
|
+
|
109
|
+
id="ff-multiselect-options-wrapper"
|
90
110
|
>
|
91
111
|
{filteredOptions.length === 0 ? (
|
92
|
-
|
93
|
-
|
94
|
-
|
112
|
+
<Typography textAlign='center' as='p' className='no-options'>
|
113
|
+
No Result Found
|
114
|
+
</Typography>
|
115
|
+
|
95
116
|
) : (
|
96
|
-
|
117
|
+
<>
|
118
|
+
{ filteredOptions.map((info) => (
|
97
119
|
<div
|
98
120
|
role="option"
|
99
121
|
className={`dropdown-option-container`}
|
@@ -126,7 +148,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
|
|
126
148
|
}
|
127
149
|
/>
|
128
150
|
</div>
|
129
|
-
))
|
151
|
+
))}
|
152
|
+
|
153
|
+
<div id="ff-multiselect-pagination" >
|
154
|
+
</div>
|
155
|
+
</>
|
156
|
+
|
130
157
|
)}
|
131
158
|
</div>
|
132
159
|
{withSelectButton && filteredOptions.length > 0 && (
|
@@ -78,6 +78,7 @@ const MultiSelect = ({
|
|
78
78
|
labelAccessor = 'label',
|
79
79
|
valueAccessor = 'value',
|
80
80
|
withSelectButton = variant === 'machines' ? true : false,
|
81
|
+
loadMoreOptions = () => { },
|
81
82
|
onEnter = () => { },
|
82
83
|
}: MultiSelectProps) => {
|
83
84
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
@@ -463,6 +464,8 @@ const MultiSelect = ({
|
|
463
464
|
zIndex={zIndex}
|
464
465
|
withSelectButton={withSelectButton}
|
465
466
|
labelAccessor={labelAccessor}
|
467
|
+
valueAccessor={valueAccessor}
|
468
|
+
loadMoreOptions={loadMoreOptions}
|
466
469
|
/>,
|
467
470
|
document.body
|
468
471
|
)}
|
@@ -15,13 +15,11 @@
|
|
15
15
|
|
16
16
|
@mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
|
17
17
|
opacity: $opacity;
|
18
|
-
|
19
18
|
@if $color {
|
20
|
-
color:
|
19
|
+
color: var(--nlp-input-placeholder-color);
|
21
20
|
}
|
22
|
-
|
23
21
|
@if $border-color-arg {
|
24
|
-
border-color:
|
22
|
+
border-color: var(--nlp-border-color);
|
25
23
|
}
|
26
24
|
}
|
27
25
|
|
@@ -29,22 +27,20 @@
|
|
29
27
|
position: relative;
|
30
28
|
|
31
29
|
.ff-nlp-input {
|
32
|
-
@extend .fontSm;
|
33
30
|
margin: 0;
|
34
31
|
padding: 0;
|
35
32
|
box-sizing: border-box;
|
36
33
|
min-height: 32px;
|
37
|
-
min-width:
|
34
|
+
min-width: 482px;
|
38
35
|
display: flex;
|
39
36
|
align-items: end;
|
40
37
|
position: relative;
|
41
|
-
|
42
38
|
&-fieldset {
|
43
39
|
margin: 0;
|
44
40
|
padding: 25px 0px 0px 8px;
|
45
41
|
border: 1px solid transparent;
|
46
42
|
box-sizing: border-box;
|
47
|
-
height:
|
43
|
+
height: 32px;
|
48
44
|
width: 100%;
|
49
45
|
border-radius: 4px;
|
50
46
|
display: block;
|
@@ -81,7 +77,6 @@
|
|
81
77
|
@extend .font-size-8;
|
82
78
|
padding: 0 2px;
|
83
79
|
letter-spacing: 0.5px;
|
84
|
-
|
85
80
|
&--default {
|
86
81
|
@include transition-all(0.3s);
|
87
82
|
opacity: 0;
|
@@ -106,11 +101,10 @@
|
|
106
101
|
}
|
107
102
|
}
|
108
103
|
|
109
|
-
&-
|
110
|
-
@extend .fontSm;
|
104
|
+
&-container {
|
111
105
|
@include absolute-position(6px, auto, auto, auto);
|
112
106
|
width: calc(100% - 38px);
|
113
|
-
|
107
|
+
height: 32px;
|
114
108
|
padding: 0 28px 0 8px;
|
115
109
|
border-radius: 4px;
|
116
110
|
border: 1px solid transparent;
|
@@ -118,10 +112,12 @@
|
|
118
112
|
background: transparent;
|
119
113
|
outline: none;
|
120
114
|
color: var(--ff-nlp-input-text-color);
|
115
|
+
text-indent: 22px;
|
121
116
|
|
122
117
|
&:hover {
|
123
118
|
~ .ff-nlp-input-label {
|
124
|
-
color: var(--
|
119
|
+
color: var(--nlp-input-placeholder-color);
|
120
|
+
padding-left: 26px;
|
125
121
|
}
|
126
122
|
}
|
127
123
|
|
@@ -133,7 +129,7 @@
|
|
133
129
|
@include opacity-style(1, null, var(--ff-nlp-input-border-color));
|
134
130
|
|
135
131
|
&:hover {
|
136
|
-
border-color: var(--
|
132
|
+
border-color: var(--nlp-input-placeholder-color);
|
137
133
|
|
138
134
|
~ .ff-nlp-input-fieldset--option {
|
139
135
|
border-color: var(--ff-nlp-input-text-color);
|
@@ -208,7 +204,6 @@
|
|
208
204
|
}
|
209
205
|
|
210
206
|
&--active {
|
211
|
-
@extend .font-size-8;
|
212
207
|
@include transition-all;
|
213
208
|
opacity: 0;
|
214
209
|
transform: translateY(-150%);
|
@@ -225,17 +220,12 @@
|
|
225
220
|
top: 60%;
|
226
221
|
height: 100%;
|
227
222
|
right: 10px;
|
228
|
-
transform: rotateX(
|
223
|
+
transform: rotateX(0deg) translateY(-50%);
|
229
224
|
cursor: pointer;
|
230
225
|
|
231
226
|
&--no-label {
|
232
227
|
top: 50%;
|
233
228
|
}
|
234
|
-
|
235
|
-
&--down {
|
236
|
-
transform: rotateX(0deg) translateY(-50%);
|
237
|
-
z-index: 101;
|
238
|
-
}
|
239
229
|
}
|
240
230
|
}
|
241
231
|
|
@@ -243,4 +233,70 @@
|
|
243
233
|
@include absolute-position(auto, auto, -14px, 12px);
|
244
234
|
white-space: nowrap;
|
245
235
|
}
|
236
|
+
.ff-nlp-input-label {
|
237
|
+
display: flex;
|
238
|
+
align-items: center;
|
239
|
+
padding-left: 26px;
|
240
|
+
gap: 4px;
|
241
|
+
}
|
242
|
+
.ff-nlp-help_icon {
|
243
|
+
position: absolute;
|
244
|
+
bottom: 2px;
|
245
|
+
left: 8px;
|
246
|
+
width: 30px;
|
247
|
+
height: 30px;
|
248
|
+
z-index: 100;
|
249
|
+
cursor: pointer;
|
250
|
+
}
|
251
|
+
}
|
252
|
+
.ff-nlp-input-arrow {
|
253
|
+
z-index: 111;
|
254
|
+
}
|
255
|
+
.icon-container {
|
256
|
+
position: relative;
|
257
|
+
display: inline-block;
|
258
|
+
}
|
259
|
+
|
260
|
+
.icon-label {
|
261
|
+
position: absolute;
|
262
|
+
bottom: 100%;
|
263
|
+
left: 50%;
|
264
|
+
transform: translateX(-55%);
|
265
|
+
transform: translateY(-145%);
|
266
|
+
margin-bottom: 5px;
|
267
|
+
visibility: hidden;
|
268
|
+
opacity: 0;
|
269
|
+
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
|
270
|
+
background-color: var(--tooltip-bg-color);
|
271
|
+
color: var(--tooltip-text-color);
|
272
|
+
padding: 2px 5px;
|
273
|
+
border-radius: 3px;
|
274
|
+
white-space: nowrap;
|
275
|
+
}
|
276
|
+
|
277
|
+
.icon-container:hover .icon-label {
|
278
|
+
visibility: visible;
|
279
|
+
opacity: 1;
|
280
|
+
transition-delay: 0s;
|
281
|
+
}
|
282
|
+
|
283
|
+
.help-icon-label {
|
284
|
+
position: absolute;
|
285
|
+
bottom: 80%;
|
286
|
+
left: 96%;
|
287
|
+
transform: translateX(-50%);
|
288
|
+
margin-bottom: 5px;
|
289
|
+
visibility: hidden;
|
290
|
+
opacity: 0;
|
291
|
+
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
|
292
|
+
background-color: var(--tooltip-bg-color);
|
293
|
+
color: var(--tooltip-text-color);
|
294
|
+
padding: 2px 5px;
|
295
|
+
border-radius: 3px;
|
296
|
+
white-space: nowrap;
|
297
|
+
}
|
298
|
+
.help-icon-container:hover .help-icon-label {
|
299
|
+
visibility: visible;
|
300
|
+
opacity: 1;
|
301
|
+
transition-delay: 0s;
|
246
302
|
}
|