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.
Files changed (173) 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/CreateVariable/types.d.ts +2 -2
  8. package/lib/components/DownloadClient/type.d.ts +19 -27
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  12. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  13. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  14. package/lib/components/MachineInputField/types.d.ts +1 -0
  15. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  16. package/lib/components/MenuOption/types.d.ts +2 -1
  17. package/lib/components/MiniModal/types.d.ts +1 -0
  18. package/lib/components/Modal/types.d.ts +1 -1
  19. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  20. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  21. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  22. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  23. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  24. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  25. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  26. package/lib/components/NLPInput/types.d.ts +80 -0
  27. package/lib/components/PopUpModal/types.d.ts +2 -1
  28. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  29. package/lib/components/ProgressBar/index.d.ts +1 -0
  30. package/lib/components/ProgressBar/types.d.ts +12 -0
  31. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  32. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  33. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  34. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  35. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  36. package/lib/components/TableTree/TableTree.d.ts +2 -2
  37. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  38. package/lib/components/TableTree/types.d.ts +1 -1
  39. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  40. package/lib/index.d.ts +183 -65
  41. package/lib/index.esm.js +1281 -674
  42. package/lib/index.esm.js.map +1 -1
  43. package/lib/index.js +1282 -674
  44. package/lib/index.js.map +1 -1
  45. package/lib/tsconfig.tsbuildinfo +1 -1
  46. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  47. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  48. package/package.json +1 -1
  49. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  50. package/src/assets/Themes/BaseTheme.scss +20 -2
  51. package/src/assets/Themes/DarkTheme.scss +19 -2
  52. package/src/assets/icons/add_file.svg +4 -4
  53. package/src/assets/icons/ai_search.svg +9 -0
  54. package/src/assets/icons/authorization.svg +4 -4
  55. package/src/assets/icons/depends_on_script.svg +7 -7
  56. package/src/assets/icons/email_group.svg +3 -3
  57. package/src/assets/icons/help_icon.svg +10 -0
  58. package/src/assets/icons/import_icon.svg +4 -0
  59. package/src/assets/icons/ios_icon.svg +11 -0
  60. package/src/assets/icons/labels.svg +8 -8
  61. package/src/assets/icons/parameters.svg +3 -3
  62. package/src/assets/icons/plus_round_icon.svg +38 -0
  63. package/src/assets/icons/pre_post_condition.svg +8 -8
  64. package/src/assets/icons/program_element.svg +8 -8
  65. package/src/assets/icons/test_data.svg +5 -5
  66. package/src/assets/icons/test_data_set.svg +7 -7
  67. package/src/assets/icons/tick_icon.svg +2 -2
  68. package/src/assets/icons/variable_set.svg +5 -5
  69. package/src/assets/styles/_colors.scss +1 -1
  70. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  71. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  72. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  73. package/src/components/Charts/LineChart/types.ts +1 -0
  74. package/src/components/Checkbox/Checkbox.scss +3 -1
  75. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  76. package/src/components/Checkbox/Checkbox.tsx +3 -4
  77. package/src/components/Chip/Chip.scss +15 -5
  78. package/src/components/Chip/Chip.stories.tsx +10 -1
  79. package/src/components/Chip/Chip.tsx +5 -1
  80. package/src/components/Chip/types.ts +1 -1
  81. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  82. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
  83. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
  84. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  85. package/src/components/ConditionalDropdown/index.ts +1 -0
  86. package/src/components/ConditionalDropdown/types.ts +160 -0
  87. package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
  88. package/src/components/CreateVariable/types.ts +2 -2
  89. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  90. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  91. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  92. package/src/components/DownloadClient/type.ts +32 -40
  93. package/src/components/EditTextField/EditTextField.scss +1 -1
  94. package/src/components/EditTextField/EditTextField.tsx +14 -20
  95. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  96. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  97. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  98. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  99. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  100. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  101. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  102. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  103. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  104. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  105. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  106. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  107. package/src/components/Excel/dataConversion.ts +43 -20
  108. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  109. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  110. package/src/components/Form/Forms.tsx +0 -2
  111. package/src/components/Icon/iconList.ts +12 -0
  112. package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
  113. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  114. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  115. package/src/components/LabelEditTextField/types.ts +1 -0
  116. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  117. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  118. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  119. package/src/components/MachineInputField/types.ts +2 -0
  120. package/src/components/MenuOption/MenuOption.scss +7 -7
  121. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  122. package/src/components/MenuOption/MenuOption.tsx +9 -13
  123. package/src/components/MenuOption/types.ts +3 -2
  124. package/src/components/MiniModal/MiniModal.scss +0 -1
  125. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  126. package/src/components/MiniModal/MiniModal.tsx +3 -1
  127. package/src/components/MiniModal/types.ts +1 -0
  128. package/src/components/Modal/types.ts +1 -1
  129. package/src/components/MultiSelect/Dropdown.scss +3 -4
  130. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  131. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  132. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  133. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  134. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  135. package/src/components/NLPInput/NLPInput.scss +77 -21
  136. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  137. package/src/components/NLPInput/NlpInput.tsx +95 -59
  138. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  139. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  140. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  141. package/src/components/NLPInput/sampleData.ts +162 -0
  142. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  143. package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
  144. package/src/components/PopUpModal/PopUpModal.tsx +5 -4
  145. package/src/components/PopUpModal/types.ts +2 -1
  146. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  147. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  148. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  149. package/src/components/ProgressBar/index.ts +1 -0
  150. package/src/components/ProgressBar/types.ts +12 -0
  151. package/src/components/Search/Search.tsx +9 -1
  152. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  153. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  154. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  155. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  156. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  157. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  158. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  159. package/src/components/Table/Table.scss +1 -0
  160. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  161. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  162. package/src/components/TableTree/TableTree.tsx +27 -181
  163. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  164. package/src/components/TableTree/data.ts +45 -0
  165. package/src/components/TableTree/types.ts +4 -4
  166. package/src/hooks/useIntersectionObserver.tsx +56 -0
  167. package/src/index.ts +4 -3
  168. package/src/utils/functionCheck/functionCheck.ts +8 -0
  169. package/src/utils/getSequentialPayload/types.ts +1 -0
  170. package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
  171. package/src/components/AddVariables/AddVariables.tsx +0 -113
  172. package/src/components/AddVariables/index.ts +0 -1
  173. 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: 'text',
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: 'text',
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
- { label: <div style={{display:'flex', justifyContent:"center", alignItems:"center",gap:"8px"}}>hello <Icon name='edit'/></div>, value: 'opt1', icon: 'success' },
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: "top",
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
- <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
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
- <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
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
- <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
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='18px'
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 + 18,
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 - 7,
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 (menuRef?.current) {
158
- const rect = menuRef.current.getBoundingClientRect();
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 "react";
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 {
@@ -117,7 +117,6 @@
117
117
  background: var(--ff-mini-modal-border);
118
118
  position: relative;
119
119
  max-height: fit-content;
120
- padding: 4px;
121
120
  width: 100%;
122
121
  margin: 0 0 0 -5px;
123
122
  height: 100%;
@@ -55,7 +55,12 @@ const BasicModalComponent = () => {
55
55
  isOverlay: true,
56
56
  zIndexOverlay: 99,
57
57
  }}
58
- modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
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
- <div>{childContent}</div>
317
+ {childContent}
316
318
  {footerContent ? (
317
319
  <Typography as="footer">{footerContent}</Typography>
318
320
  ) : isIconModel ? (
@@ -7,6 +7,7 @@ interface ModalDimensions {
7
7
  boxShadow?: string;
8
8
  left?: number;
9
9
  top?: number;
10
+ padding?: number;
10
11
  }
11
12
  export interface MiniEditModalProps {
12
13
  /**
@@ -34,7 +34,7 @@ export interface ModalProps {
34
34
  /***Content to be displayed inside the modal */
35
35
  children: ReactNode;
36
36
  isFooterDisplayed: boolean;
37
- customWidth: string;
37
+ customWidth?: string;
38
38
  customHeight?: string;
39
39
  zIndex?: number;
40
40
  boxShadow?: string;
@@ -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
- @extend .fontMd;
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: 10px;
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
- const filteredOptions = options
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
- <div className="dropdown-option-container ">
93
- <p className="no-options">No Option</p>
94
- </div>
112
+ <Typography textAlign='center' as='p' className='no-options'>
113
+ No Result Found
114
+ </Typography>
115
+
95
116
  ) : (
96
- filteredOptions.map((info) => (
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 && (
@@ -203,6 +203,7 @@
203
203
  @include hovered-styles(var(--error-light));
204
204
  }
205
205
  &--disabled {
206
+ opacity: 0.5;
206
207
  pointer-events: none;
207
208
 
208
209
  border: 1px solid var(--multi-select-border);
@@ -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
  )}
@@ -41,7 +41,9 @@ interface MultiSelectProps {
41
41
 
42
42
  valueAccessor?: string;
43
43
 
44
- onEnter?:(newOption:string)=>void
44
+ onEnter?:(newOption:string)=>void;
45
+
46
+ loadMoreOptions?: () =>void;
45
47
  }
46
48
 
47
49
  export { Option, MultiSelectProps };
@@ -16,4 +16,6 @@ export interface DropdownProps {
16
16
  onSelect?: () => void;
17
17
  labelAccessor?: string;
18
18
  valueAccessor?: string;
19
+ loadMoreOptions?: () => void;
20
+
19
21
  }
@@ -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: $color;
19
+ color: var(--nlp-input-placeholder-color);
21
20
  }
22
-
23
21
  @if $border-color-arg {
24
- border-color: $border-color-arg;
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: 489px;
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: 100%;
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
- &-input {
110
- @extend .fontSm;
104
+ &-container {
111
105
  @include absolute-position(6px, auto, auto, auto);
112
106
  width: calc(100% - 38px);
113
- min-height: calc(100% - 8px);
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(--ff-nlp-input-text-hover-color);
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(--ff-nlp-input-text-color);
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(180deg) translateY(50%);
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
  }