pixel-react 1.6.9 → 1.7.1
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/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/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/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/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 +112 -59
- package/lib/index.esm.js +1251 -662
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1252 -662
- 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/ai_search.svg +9 -0
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/tick_icon.svg +2 -2
- 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/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
- package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
- 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 +9 -0
- 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/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/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 -2
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/index.ts +0 -1
@@ -1,5 +1,10 @@
|
|
1
|
-
import { useReducer, useRef, useEffect, useMemo } from 'react';
|
2
|
-
import {
|
1
|
+
import { useReducer, useRef, useEffect, useMemo, useState } from 'react';
|
2
|
+
import {
|
3
|
+
NlpRenderOption,
|
4
|
+
SelectAction,
|
5
|
+
SelectProps,
|
6
|
+
SelectState,
|
7
|
+
} from './types';
|
3
8
|
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
4
9
|
import { createPortal } from 'react-dom';
|
5
10
|
import classNames from 'classnames';
|
@@ -29,7 +34,6 @@ const nlpInputReducer = (
|
|
29
34
|
options: action.payload.optionsList,
|
30
35
|
option: action.payload.option,
|
31
36
|
|
32
|
-
// todo color need to be add in style guide
|
33
37
|
iconColor: 'var(--ff-nlp-input-default-color)',
|
34
38
|
isIconClick: false,
|
35
39
|
showOptions: false,
|
@@ -47,8 +51,7 @@ const nlpInputReducer = (
|
|
47
51
|
case 'MOUSE_LEAVE':
|
48
52
|
return state.isInputFocused
|
49
53
|
? state
|
50
|
-
:
|
51
|
-
{
|
54
|
+
: {
|
52
55
|
...state,
|
53
56
|
iconColor: 'var(--ff-nlp-input-default-color)',
|
54
57
|
isIconClick: false,
|
@@ -102,7 +105,14 @@ const nlpInputReducer = (
|
|
102
105
|
|
103
106
|
const NlpInput = ({
|
104
107
|
label = '',
|
108
|
+
leftIcon,
|
109
|
+
rightIcon,
|
110
|
+
rightIconColor,
|
105
111
|
showLabel = true,
|
112
|
+
onHelpIconClick = () => {},
|
113
|
+
aiIconClick = () => {},
|
114
|
+
webServiceClick = () => {},
|
115
|
+
containerWidth = '',
|
106
116
|
optionsList = [],
|
107
117
|
selectedOption = {
|
108
118
|
displayName: '',
|
@@ -118,17 +128,22 @@ const NlpInput = ({
|
|
118
128
|
borderRadius = true,
|
119
129
|
showBorder = true,
|
120
130
|
required = false,
|
131
|
+
value = '',
|
132
|
+
onSelect = () => {},
|
121
133
|
}: SelectProps) => {
|
122
134
|
const initialState: SelectState = useMemo(
|
123
135
|
() => ({
|
124
136
|
isInputFocused: false,
|
125
137
|
|
126
|
-
// todo color need to be added in style guide
|
127
138
|
iconColor: 'var(--ff-nlp-input-default-color)',
|
128
139
|
isIconClick: false,
|
129
140
|
showOptions: false,
|
130
141
|
options: optionsList,
|
131
|
-
option:
|
142
|
+
option:
|
143
|
+
checkEmpty(selectedOption) &&
|
144
|
+
typeof selectedOption?.displayName === 'string'
|
145
|
+
? selectedOption.displayName
|
146
|
+
: '',
|
132
147
|
dropdownPosition: { positionX: 0, positionY: 0, width: 0, fromBottom: 0 },
|
133
148
|
}),
|
134
149
|
[optionsList, selectedOption]
|
@@ -139,12 +154,29 @@ const NlpInput = ({
|
|
139
154
|
initialState
|
140
155
|
);
|
141
156
|
|
157
|
+
const [inputVal, setInputVal] = useState<NlpRenderOption>(selectedOption);
|
158
|
+
|
159
|
+
useEffect(() => {
|
160
|
+
const updatedDisplayName =
|
161
|
+
typeof selectedOption.displayName === 'string'
|
162
|
+
? selectedOption.displayName
|
163
|
+
: String(selectedOption.displayName ?? '');
|
164
|
+
|
165
|
+
if (updatedDisplayName !== inputVal.displayName) {
|
166
|
+
setInputVal({ ...selectedOption, displayName: updatedDisplayName });
|
167
|
+
}
|
168
|
+
}, [selectedOption]);
|
169
|
+
|
170
|
+
useEffect(() => {
|
171
|
+
if (value) {
|
172
|
+
handleSelectAction('FOCUS_INPUT');
|
173
|
+
}
|
174
|
+
}, [value]);
|
142
175
|
const DropDownRef = useRef<HTMLDivElement>(null);
|
143
176
|
const InputRef = useRef<HTMLInputElement>(null);
|
144
177
|
|
145
178
|
const {
|
146
179
|
isInputFocused,
|
147
|
-
iconColor,
|
148
180
|
isIconClick,
|
149
181
|
showOptions,
|
150
182
|
dropdownPosition,
|
@@ -166,7 +198,13 @@ const NlpInput = ({
|
|
166
198
|
if (actionType === 'SHOW_ERROR' || actionType === 'BLUR_INPUT') {
|
167
199
|
dispatch({
|
168
200
|
type: actionType,
|
169
|
-
payload: {
|
201
|
+
payload: {
|
202
|
+
optionsList,
|
203
|
+
option:
|
204
|
+
typeof selectedOption.displayName === 'string'
|
205
|
+
? selectedOption.displayName
|
206
|
+
: String(selectedOption.displayName ?? ''),
|
207
|
+
},
|
170
208
|
});
|
171
209
|
} else {
|
172
210
|
dispatch({ type: actionType });
|
@@ -174,18 +212,11 @@ const NlpInput = ({
|
|
174
212
|
}
|
175
213
|
};
|
176
214
|
|
177
|
-
const onSelectInputChange = (
|
215
|
+
const onSelectInputChange = (
|
216
|
+
e: React.ChangeEvent<HTMLInputElement> | any
|
217
|
+
) => {
|
178
218
|
if (disabled) return;
|
179
|
-
|
180
|
-
|
181
|
-
const filteredOptions = optionsList.filter((option) => {
|
182
|
-
return option.displayName
|
183
|
-
.toLowerCase()
|
184
|
-
.includes(value.toLowerCase().trim());
|
185
|
-
});
|
186
|
-
|
187
|
-
dispatch({ type: 'UPDATE_OPTION_LIST', payload: filteredOptions });
|
188
|
-
dispatch({ type: 'UPDATE_OPTION', payload: value });
|
219
|
+
onChange(e);
|
189
220
|
};
|
190
221
|
|
191
222
|
const onSelectBlur = () => {
|
@@ -198,14 +229,8 @@ const NlpInput = ({
|
|
198
229
|
}
|
199
230
|
};
|
200
231
|
|
201
|
-
const onSelectOptionSelector = (option:
|
202
|
-
|
203
|
-
onSelectBlur();
|
204
|
-
dispatch({ type: 'UPDATE_OPTION', payload: option.projectId });
|
205
|
-
if (onChange) {
|
206
|
-
onChange(option);
|
207
|
-
}
|
208
|
-
}
|
232
|
+
const onSelectOptionSelector = (option: NlpRenderOption) => {
|
233
|
+
onSelect(option);
|
209
234
|
};
|
210
235
|
|
211
236
|
const onSelectUpdatePosition = () => {
|
@@ -255,29 +280,40 @@ const NlpInput = ({
|
|
255
280
|
<div className="ff-nlp-input">
|
256
281
|
<input
|
257
282
|
type="text"
|
258
|
-
className={classNames('ff-nlp-input-
|
259
|
-
'ff-nlp-input-
|
260
|
-
'ff-nlp-input-
|
261
|
-
'ff-nlp-input-
|
262
|
-
'ff-nlp-input-
|
283
|
+
className={classNames('ff-nlp-input-container', {
|
284
|
+
'ff-nlp-input-container--default': !isInputFocused,
|
285
|
+
'ff-nlp-input-container--active': applyActiveOptionClasses,
|
286
|
+
'ff-nlp-input-container--no-label': !showLabel,
|
287
|
+
'ff-nlp-input-container--error':
|
263
288
|
errorMsg && !isInputFocused && !Boolean(option),
|
264
|
-
'ff-nlp-input-
|
265
|
-
'ff-nlp-input-
|
266
|
-
'ff-nlp-input-
|
289
|
+
'ff-nlp-input-container--border-radius': !borderRadius,
|
290
|
+
'ff-nlp-input-container--disable': disabled,
|
291
|
+
'ff-nlp-input-container--no-border': !showBorder,
|
267
292
|
})}
|
268
|
-
// inline css required due to multiple overlay scenarios are present
|
269
293
|
style={{ zIndex: optionZIndex }}
|
270
294
|
onFocus={() => handleSelectAction('FOCUS_INPUT')}
|
271
295
|
onMouseEnter={() => handleSelectAction('MOUSE_ENTER')}
|
272
296
|
onMouseLeave={() => handleSelectAction('MOUSE_LEAVE')}
|
273
297
|
onChange={onSelectInputChange}
|
274
|
-
value={
|
298
|
+
value={value}
|
275
299
|
disabled={disabled}
|
276
300
|
autoComplete="off"
|
277
301
|
spellCheck="false"
|
278
302
|
ref={InputRef}
|
279
303
|
/>
|
280
304
|
|
305
|
+
<div className="icon-container">
|
306
|
+
<Icon
|
307
|
+
name={leftIcon || 'ai_search'}
|
308
|
+
className="ff-nlp-help_icon"
|
309
|
+
width={16}
|
310
|
+
height={16}
|
311
|
+
onClick={aiIconClick}
|
312
|
+
/>
|
313
|
+
<Typography className="icon-label" fontSize={10}>
|
314
|
+
Search With Ai
|
315
|
+
</Typography>
|
316
|
+
</div>
|
281
317
|
{showLabel && (
|
282
318
|
<div
|
283
319
|
className={classNames('ff-nlp-input-label', {
|
@@ -294,20 +330,27 @@ const NlpInput = ({
|
|
294
330
|
*
|
295
331
|
</Typography>
|
296
332
|
)}
|
333
|
+
|
297
334
|
{label}
|
298
335
|
</div>
|
299
336
|
)}
|
300
337
|
|
301
|
-
<
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
'ff-nlp-input-arrow
|
308
|
-
|
309
|
-
|
310
|
-
|
338
|
+
<div className="help-icon-container">
|
339
|
+
<Icon
|
340
|
+
name={rightIcon || ''}
|
341
|
+
height={16}
|
342
|
+
width={16}
|
343
|
+
onClick={onHelpIconClick}
|
344
|
+
className={classNames('ff-nlp-input-arrow', {
|
345
|
+
'ff-nlp-input-arrow--down': !isIconClick,
|
346
|
+
'ff-nlp-input-arrow--no-label': !showLabel,
|
347
|
+
})}
|
348
|
+
color={rightIconColor}
|
349
|
+
/>
|
350
|
+
<Typography className="help-icon-label" fontSize={10}>
|
351
|
+
Help
|
352
|
+
</Typography>
|
353
|
+
</div>
|
311
354
|
<fieldset
|
312
355
|
className={classNames('ff-nlp-input-fieldset', {
|
313
356
|
'ff-nlp-input-fieldset--no-label': !showLabel,
|
@@ -319,7 +362,7 @@ const NlpInput = ({
|
|
319
362
|
'ff-nlp-input-fieldset--no-border': !showBorder,
|
320
363
|
})}
|
321
364
|
>
|
322
|
-
{
|
365
|
+
{showLabel && (
|
323
366
|
<legend
|
324
367
|
className={classNames('ff-nlp-input-legend', {
|
325
368
|
'ff-nlp-input-legend--default': !isInputFocused,
|
@@ -328,18 +371,9 @@ const NlpInput = ({
|
|
328
371
|
'ff-nlp-input-legend--error': errorMsg,
|
329
372
|
})}
|
330
373
|
>
|
331
|
-
{required && (
|
332
|
-
<Typography
|
333
|
-
fontSize={8}
|
334
|
-
color={'var(--$error-light)'}
|
335
|
-
className="ff-nlp-input-legend--required"
|
336
|
-
>
|
337
|
-
*
|
338
|
-
</Typography>
|
339
|
-
)}
|
340
374
|
{label}
|
341
375
|
</legend>
|
342
|
-
)}
|
376
|
+
)}
|
343
377
|
</fieldset>
|
344
378
|
</div>
|
345
379
|
|
@@ -363,6 +397,8 @@ const NlpInput = ({
|
|
363
397
|
options={options}
|
364
398
|
optionZIndex={optionZIndex}
|
365
399
|
inputRef={InputRef}
|
400
|
+
webServiceClick={webServiceClick}
|
401
|
+
containerWidth = {containerWidth}
|
366
402
|
/>,
|
367
403
|
document.body
|
368
404
|
)}
|
@@ -1,15 +1,17 @@
|
|
1
|
-
import { DrowdownPosition,
|
1
|
+
import { DrowdownPosition, NlpRenderOption } from '../../types';
|
2
2
|
|
3
3
|
export interface NlpDropDownListProps {
|
4
4
|
/*
|
5
5
|
* Callback function triggered on blur event
|
6
6
|
*/
|
7
7
|
onSelectBlur: () => void;
|
8
|
-
|
8
|
+
leftIcon?: string;
|
9
|
+
webServiceClick?: () => void;
|
10
|
+
containerWidth?:string | number,
|
9
11
|
/*
|
10
12
|
* Callback function triggered when an option is selected
|
11
13
|
*/
|
12
|
-
onSelectOptionSelector: (option:
|
14
|
+
onSelectOptionSelector: (option: NlpRenderOption) => void;
|
13
15
|
|
14
16
|
/*
|
15
17
|
* Position of the dropdown relative to the input
|
@@ -19,7 +21,7 @@ export interface NlpDropDownListProps {
|
|
19
21
|
/*
|
20
22
|
* List of options to display in the dropdown
|
21
23
|
*/
|
22
|
-
options?:
|
24
|
+
options?: NlpRenderOption[];
|
23
25
|
|
24
26
|
/*
|
25
27
|
* Optional z-index for controlling the dropdown's stacking order
|
@@ -7,57 +7,51 @@
|
|
7
7
|
bottom: $bottom;
|
8
8
|
left: $left;
|
9
9
|
}
|
10
|
-
|
10
|
+
.ff-nlp-option {
|
11
|
+
color: var(--nlp-option-color);
|
12
|
+
display: flex;
|
13
|
+
gap: 4px;
|
14
|
+
align-items: center;
|
15
|
+
}
|
11
16
|
.ff-nlp-dropdown-wrapper {
|
12
17
|
.ff-nlp-options-wrapper {
|
13
|
-
max-height:
|
18
|
+
max-height: 256px;
|
14
19
|
z-index: 100;
|
15
20
|
position: absolute;
|
16
|
-
|
17
|
-
border: 1px solid var(--ff-select-option-border-color);
|
21
|
+
border: 1px solid var(--nlp-border-color);
|
18
22
|
box-sizing: border-box;
|
19
23
|
margin-top: 4px;
|
20
24
|
border-radius: 4px;
|
21
|
-
background-color: var(--
|
22
|
-
box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
|
25
|
+
background-color: var(--primary-icon-color);
|
23
26
|
overflow: hidden auto;
|
24
27
|
display: flex;
|
25
28
|
justify-content: space-between;
|
29
|
+
overflow: hidden;
|
26
30
|
|
27
|
-
.ff-nlp-options-
|
28
|
-
max-height:
|
31
|
+
.ff-nlp-options-primary-wrapper {
|
32
|
+
max-height: 240px;
|
29
33
|
z-index: 100;
|
30
|
-
min-width:
|
34
|
+
min-width: 290px;
|
31
35
|
box-sizing: border-box;
|
36
|
+
overflow: scroll;
|
37
|
+
scrollbar-width: none;
|
38
|
+
flex-grow: 1;
|
32
39
|
}
|
33
|
-
|
34
|
-
|
35
|
-
height: 12px;
|
36
|
-
|
37
|
-
&-thumb {
|
38
|
-
background-color: var(--ff-select-scroll-thumb-color);
|
39
|
-
border-radius: 4px;
|
40
|
-
}
|
41
|
-
|
42
|
-
&-track {
|
43
|
-
background-color: transparent;
|
44
|
-
border-radius: 4px;
|
45
|
-
}
|
40
|
+
.ff-nlp-options-primary-wrapper::-webkit-scrollbar {
|
41
|
+
display: none;
|
46
42
|
}
|
47
43
|
|
48
44
|
.ff-nlp-option {
|
49
|
-
width: calc(100% -
|
45
|
+
width: calc(100% - 10px);
|
50
46
|
border: 1px solid transparent;
|
51
|
-
|
52
|
-
padding: 0px 8px;
|
47
|
+
padding: 0 4px;
|
53
48
|
overflow: hidden;
|
54
49
|
white-space: nowrap;
|
50
|
+
height: 32px;
|
55
51
|
text-overflow: ellipsis;
|
56
52
|
cursor: pointer;
|
57
|
-
|
58
53
|
&:hover {
|
59
|
-
|
60
|
-
background-color: var(--ff-select-option-hover-color);
|
54
|
+
background-color: var(--nlp-hover-color);
|
61
55
|
}
|
62
56
|
}
|
63
57
|
|
@@ -65,19 +59,76 @@
|
|
65
59
|
width: calc(100% - 16px);
|
66
60
|
margin: 0;
|
67
61
|
overflow: hidden;
|
68
|
-
padding:
|
62
|
+
padding: 0 8px;
|
69
63
|
white-space: nowrap;
|
70
64
|
text-overflow: ellipsis;
|
71
65
|
cursor: not-allowed;
|
72
66
|
}
|
73
67
|
}
|
74
|
-
.ff-nlp-data {
|
75
|
-
width:
|
76
|
-
height:
|
77
|
-
|
68
|
+
.ff-nlp-data-show {
|
69
|
+
width: 380px;
|
70
|
+
height: 235px;
|
78
71
|
border: 1px solid transparent;
|
79
|
-
border-radius: 5px;
|
80
|
-
box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
|
81
72
|
overflow: scroll;
|
73
|
+
scrollbar-width: none;
|
74
|
+
padding: 8px;
|
75
|
+
border: 1px solid var(--nlp-border-color);
|
76
|
+
position: relative;
|
77
|
+
border-radius: 4px;
|
78
|
+
}
|
79
|
+
.ff-nlp-data-hide {
|
80
|
+
display: none;
|
81
|
+
}
|
82
|
+
.nlp-categories {
|
83
|
+
padding: 0px 2px;
|
84
|
+
gap: 10px;
|
85
|
+
border-radius: 2px;
|
86
|
+
background: var(--nlp-background-color);
|
87
|
+
color: var(--nlp-color);
|
88
|
+
}
|
89
|
+
|
90
|
+
.ff-nlp-data-side-menu {
|
91
|
+
display: flex;
|
92
|
+
flex-direction: column;
|
93
|
+
row-gap: 8px;
|
94
|
+
color: var(--nlp-option-color);
|
95
|
+
}
|
96
|
+
.ff-nlp-data-show::-webkit-scrollbar {
|
97
|
+
display: none;
|
82
98
|
}
|
99
|
+
|
100
|
+
.nlp-details-header {
|
101
|
+
color: var(--status-skipped-text-color);
|
102
|
+
display: flex;
|
103
|
+
flex-direction: column;
|
104
|
+
}
|
105
|
+
.nlp-details {
|
106
|
+
color: var(--status-skipped-text-color);
|
107
|
+
}
|
108
|
+
.ff-nlp-options-wrapper-main {
|
109
|
+
display: flex;
|
110
|
+
flex-direction: column;
|
111
|
+
width: 302px;
|
112
|
+
justify-content: space-between;
|
113
|
+
flex-grow: 1;
|
114
|
+
}
|
115
|
+
}
|
116
|
+
.ff-nlp {
|
117
|
+
color: var(--nlp-color);
|
118
|
+
}
|
119
|
+
|
120
|
+
.ff-sg {
|
121
|
+
color: var(--nlp-step-group-color);
|
122
|
+
background-color: var(--nlp-step-group-background);
|
123
|
+
}
|
124
|
+
|
125
|
+
.ff-pe {
|
126
|
+
color: var(--nlp-pe-color);
|
127
|
+
background-color: var(--nlp-pe-background);
|
128
|
+
}
|
129
|
+
|
130
|
+
.ff-nlp-web-service-div {
|
131
|
+
display: flex;
|
132
|
+
justify-content: center;
|
133
|
+
align-items: center;
|
83
134
|
}
|