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.
Files changed (147) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/DownloadClient/type.d.ts +19 -27
  8. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  11. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  12. package/lib/components/MachineInputField/types.d.ts +1 -0
  13. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  14. package/lib/components/MenuOption/types.d.ts +2 -1
  15. package/lib/components/MiniModal/types.d.ts +1 -0
  16. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  17. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  18. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  19. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  20. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  21. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  22. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  23. package/lib/components/NLPInput/types.d.ts +80 -0
  24. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  25. package/lib/components/ProgressBar/index.d.ts +1 -0
  26. package/lib/components/ProgressBar/types.d.ts +12 -0
  27. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  28. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  29. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  30. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  31. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  32. package/lib/components/TableTree/TableTree.d.ts +2 -2
  33. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  34. package/lib/components/TableTree/types.d.ts +1 -1
  35. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  36. package/lib/index.d.ts +112 -59
  37. package/lib/index.esm.js +1251 -662
  38. package/lib/index.esm.js.map +1 -1
  39. package/lib/index.js +1252 -662
  40. package/lib/index.js.map +1 -1
  41. package/lib/tsconfig.tsbuildinfo +1 -1
  42. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  43. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  44. package/package.json +1 -1
  45. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  46. package/src/assets/Themes/BaseTheme.scss +20 -2
  47. package/src/assets/Themes/DarkTheme.scss +19 -2
  48. package/src/assets/icons/ai_search.svg +9 -0
  49. package/src/assets/icons/help_icon.svg +10 -0
  50. package/src/assets/icons/ios_icon.svg +11 -0
  51. package/src/assets/icons/plus_round_icon.svg +38 -0
  52. package/src/assets/icons/tick_icon.svg +2 -2
  53. package/src/assets/styles/_colors.scss +1 -1
  54. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  55. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  56. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  57. package/src/components/Charts/LineChart/types.ts +1 -0
  58. package/src/components/Checkbox/Checkbox.scss +3 -1
  59. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  60. package/src/components/Checkbox/Checkbox.tsx +3 -4
  61. package/src/components/Chip/Chip.scss +15 -5
  62. package/src/components/Chip/Chip.stories.tsx +10 -1
  63. package/src/components/Chip/Chip.tsx +5 -1
  64. package/src/components/Chip/types.ts +1 -1
  65. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  66. package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
  67. package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
  68. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  69. package/src/components/ConditionalDropdown/index.ts +1 -0
  70. package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
  71. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  72. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  73. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  74. package/src/components/DownloadClient/type.ts +32 -40
  75. package/src/components/EditTextField/EditTextField.scss +1 -1
  76. package/src/components/EditTextField/EditTextField.tsx +14 -20
  77. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  78. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  79. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  80. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  81. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  82. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  83. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  84. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  85. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  86. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  87. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  88. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  89. package/src/components/Excel/dataConversion.ts +43 -20
  90. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  91. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  92. package/src/components/Form/Forms.tsx +0 -2
  93. package/src/components/Icon/iconList.ts +9 -0
  94. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  95. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  96. package/src/components/LabelEditTextField/types.ts +1 -0
  97. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  98. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  99. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  100. package/src/components/MachineInputField/types.ts +2 -0
  101. package/src/components/MenuOption/MenuOption.scss +7 -7
  102. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  103. package/src/components/MenuOption/MenuOption.tsx +9 -13
  104. package/src/components/MenuOption/types.ts +3 -2
  105. package/src/components/MiniModal/MiniModal.scss +0 -1
  106. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  107. package/src/components/MiniModal/MiniModal.tsx +3 -1
  108. package/src/components/MiniModal/types.ts +1 -0
  109. package/src/components/MultiSelect/Dropdown.scss +3 -4
  110. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  111. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  112. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  113. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  114. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  115. package/src/components/NLPInput/NLPInput.scss +77 -21
  116. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  117. package/src/components/NLPInput/NlpInput.tsx +95 -59
  118. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  119. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  120. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  121. package/src/components/NLPInput/sampleData.ts +162 -0
  122. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  123. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  124. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  125. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  126. package/src/components/ProgressBar/index.ts +1 -0
  127. package/src/components/ProgressBar/types.ts +12 -0
  128. package/src/components/Search/Search.tsx +9 -1
  129. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  130. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  131. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  132. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  133. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  134. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  135. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  136. package/src/components/Table/Table.scss +1 -0
  137. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  138. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  139. package/src/components/TableTree/TableTree.tsx +27 -181
  140. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  141. package/src/components/TableTree/data.ts +45 -0
  142. package/src/components/TableTree/types.ts +4 -4
  143. package/src/hooks/useIntersectionObserver.tsx +56 -0
  144. package/src/index.ts +4 -2
  145. package/src/utils/functionCheck/functionCheck.ts +8 -0
  146. package/src/utils/getSequentialPayload/types.ts +1 -0
  147. package/src/components/AddVariables/index.ts +0 -1
@@ -1,5 +1,10 @@
1
- import { useReducer, useRef, useEffect, useMemo } from 'react';
2
- import { Option, SelectAction, SelectProps, SelectState } from './type';
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
- : // todo color need to be add in style guide
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: checkEmpty(selectedOption) ? '' : selectedOption?.projectId,
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: { optionsList, option: selectedOption.projectId },
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 = (e: React.ChangeEvent<HTMLInputElement>) => {
215
+ const onSelectInputChange = (
216
+ e: React.ChangeEvent<HTMLInputElement> | any
217
+ ) => {
178
218
  if (disabled) return;
179
- const { value } = e.target;
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: Option) => {
202
- if (!disabled) {
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-input', {
259
- 'ff-nlp-input-input--default': !isInputFocused,
260
- 'ff-nlp-input-input--active': applyActiveOptionClasses,
261
- 'ff-nlp-input-input--no-label': !showLabel,
262
- 'ff-nlp-input-input--error':
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-input--border-radius': !borderRadius,
265
- 'ff-nlp-input-input--disable': disabled,
266
- 'ff-nlp-input-input--no-border': !showBorder,
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={option}
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
- <Icon
302
- name="arrow_up"
303
- height={7}
304
- width={12}
305
- className={classNames('ff-nlp-input-arrow', {
306
- 'ff-nlp-input-arrow--down': isIconClick,
307
- 'ff-nlp-input-arrow--no-label': !showLabel,
308
- })}
309
- color={iconColor}
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
- {/* {showLabel && (
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, Option } from '../../type';
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: Option) => void;
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?: Option[];
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: 160px;
18
+ max-height: 256px;
14
19
  z-index: 100;
15
20
  position: absolute;
16
- min-width: 100px;
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(--ff-select-background-color);
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-wrapper1 {
28
- max-height: 160px;
31
+ .ff-nlp-options-primary-wrapper {
32
+ max-height: 240px;
29
33
  z-index: 100;
30
- min-width: auto;
34
+ min-width: 290px;
31
35
  box-sizing: border-box;
36
+ overflow: scroll;
37
+ scrollbar-width: none;
38
+ flex-grow: 1;
32
39
  }
33
- &::-webkit-scrollbar {
34
- width: 4px;
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% - 18px);
45
+ width: calc(100% - 10px);
50
46
  border: 1px solid transparent;
51
- border-radius: 4px;
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
- border-color: var(--ff-select-background-color);
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: 0px 8px;
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: 200px;
76
- height: 134px;
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
  }