pixel-react 1.6.5 → 1.6.7

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 (253) hide show
  1. package/lib/1fb4472b34e4fe07.css +1 -0
  2. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
  3. package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
  4. package/lib/components/Accordion/Accordion.d.ts +1 -1
  5. package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
  6. package/lib/components/Accordion/types.d.ts +12 -0
  7. package/lib/components/AddButton/AddButton.d.ts +5 -0
  8. package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
  9. package/lib/components/AddButton/index.d.ts +1 -0
  10. package/lib/components/AddButton/types.d.ts +4 -0
  11. package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
  12. package/lib/components/AddVariables/AddVariables.d.ts +5 -0
  13. package/lib/components/AddVariables/index.d.ts +1 -0
  14. package/lib/components/AddVariables/types.d.ts +35 -0
  15. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
  16. package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
  17. package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
  18. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  19. package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
  20. package/lib/components/Button/Button.stories.d.ts +13 -0
  21. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
  22. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  23. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
  24. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  25. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  26. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  27. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  28. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
  29. package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
  30. package/lib/components/Checkbox/types.d.ts +4 -0
  31. package/lib/components/Chip/Chip.stories.d.ts +14 -0
  32. package/lib/components/Comment/Comments.d.ts +4 -0
  33. package/lib/components/Comment/comment/Comment.d.ts +11 -0
  34. package/lib/components/Comment/comment/useNode.d.ts +7 -0
  35. package/lib/components/Comment/index.d.ts +1 -0
  36. package/lib/components/Comment/type.d.ts +25 -0
  37. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
  38. package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
  39. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
  40. package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
  41. package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
  42. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  43. package/lib/components/Editor/constants.d.ts +1 -1
  44. package/lib/components/Editor/types.d.ts +10 -2
  45. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  46. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  47. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
  48. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
  49. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  50. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  51. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  52. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  53. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  54. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  55. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  56. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  57. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  58. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  59. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  60. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  61. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
  62. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  63. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
  64. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  65. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  66. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  67. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  68. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  69. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  70. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  71. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  72. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  73. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  74. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  75. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  76. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  77. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  78. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
  79. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  80. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  81. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
  82. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
  83. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  84. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
  85. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
  86. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  87. package/lib/components/ExcelFile/Types.d.ts +129 -0
  88. package/lib/components/ExcelFile/index.d.ts +1 -0
  89. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
  90. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  91. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
  92. package/lib/components/Form/Form.stories.d.ts +7 -0
  93. package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
  94. package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
  95. package/lib/components/Icon/Icon.stories.d.ts +8 -0
  96. package/lib/components/IconButton/IconButton.d.ts +1 -2
  97. package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
  98. package/lib/components/IconButton/types.d.ts +1 -1
  99. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  100. package/lib/components/Input/Input.d.ts +1 -1
  101. package/lib/components/Input/Input.stories.d.ts +9 -0
  102. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
  103. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
  104. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
  105. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
  106. package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
  107. package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
  108. package/lib/components/Modal/Modal.stories.d.ts +7 -0
  109. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
  110. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  111. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
  112. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  113. package/lib/components/Paper/Paper.stories.d.ts +11 -0
  114. package/lib/components/PhoneInput/PhoneInput.d.ts +6 -0
  115. package/lib/components/PhoneInput/index.d.ts +1 -0
  116. package/lib/components/PhoneInput/types.d.ts +10 -0
  117. package/lib/components/PopUpModal/types.d.ts +1 -0
  118. package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
  119. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
  120. package/lib/components/Search/Search.stories.d.ts +6 -0
  121. package/lib/components/Select/Select.stories.d.ts +14 -0
  122. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
  123. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
  124. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
  125. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
  126. package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
  127. package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
  128. package/lib/components/Table/Table.stories.d.ts +13 -0
  129. package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
  130. package/lib/components/TableWithAccordion/TableWithAccordion.d.ts +5 -0
  131. package/lib/components/TableWithAccordion/data.d.ts +8 -0
  132. package/lib/components/TableWithAccordion/index.d.ts +1 -0
  133. package/lib/components/TableWithAccordion/types.d.ts +67 -0
  134. package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
  135. package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
  136. package/lib/components/Toast/Toast.stories.d.ts +6 -0
  137. package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
  138. package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
  139. package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
  140. package/lib/components/Typography/Typography.stories.d.ts +10 -0
  141. package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
  142. package/lib/index.d.ts +186 -12
  143. package/lib/index.esm.js +2842 -385
  144. package/lib/index.esm.js.map +1 -1
  145. package/lib/index.js +2846 -384
  146. package/lib/index.js.map +1 -1
  147. package/lib/tsconfig.tsbuildinfo +1 -1
  148. package/lib/utils/checkDuplicates/checkDuplicates.d.ts +1 -0
  149. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
  150. package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
  151. package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
  152. package/lib/utils/debounce/debounce.stories.d.ts +6 -0
  153. package/lib/utils/ffID/ffID.stories.d.ts +6 -0
  154. package/lib/utils/find/findAndInsert.d.ts +7 -0
  155. package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
  156. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
  157. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  158. package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
  159. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  160. package/lib/utils/throttle/throttle.stories.d.ts +6 -0
  161. package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
  162. package/package.json +2 -1
  163. package/src/assets/Themes/BaseTheme.scss +9 -0
  164. package/src/assets/Themes/DarkTheme.scss +62 -41
  165. package/src/assets/icons/add_file.svg +4 -17
  166. package/src/assets/icons/add_variable.svg +11 -0
  167. package/src/assets/icons/approval_pending.svg +8 -8
  168. package/src/assets/icons/authorization.svg +4 -0
  169. package/src/assets/icons/capture_icon.svg +2 -5
  170. package/src/assets/icons/configuration.svg +3 -3
  171. package/src/assets/icons/defects.svg +8 -8
  172. package/src/assets/icons/depends_on_script.svg +7 -0
  173. package/src/assets/icons/element.svg +4 -4
  174. package/src/assets/icons/email_group.svg +3 -0
  175. package/src/assets/icons/executions_icon.svg +3 -0
  176. package/src/assets/icons/labels.svg +8 -0
  177. package/src/assets/icons/machine_disable_icon.svg +18 -0
  178. package/src/assets/icons/machine_enable_icon.svg +10 -0
  179. package/src/assets/icons/parameters.svg +3 -0
  180. package/src/assets/icons/pre_post_condition.svg +8 -0
  181. package/src/assets/icons/program_element.svg +8 -0
  182. package/src/assets/icons/project_element.svg +4 -4
  183. package/src/assets/icons/step_group.svg +10 -10
  184. package/src/assets/icons/suites_icon.svg +3 -0
  185. package/src/assets/icons/tap_icon.svg +3 -3
  186. package/src/assets/icons/test_data.svg +5 -0
  187. package/src/assets/icons/test_data_set.svg +7 -0
  188. package/src/assets/icons/variable.svg +3 -3
  189. package/src/assets/icons/variable_set.svg +5 -0
  190. package/src/assets/icons/web_service_icon.svg +3 -3
  191. package/src/components/Accordion/Accordion.stories.tsx +4 -0
  192. package/src/components/Accordion/Accordion.tsx +7 -1
  193. package/src/components/Accordion/types.ts +12 -0
  194. package/src/components/AddVariables/AddVariables.scss +14 -0
  195. package/src/components/AddVariables/AddVariables.stories.tsx +44 -0
  196. package/src/components/AddVariables/AddVariables.tsx +113 -0
  197. package/src/components/AddVariables/index.ts +1 -0
  198. package/src/components/AddVariables/types.ts +36 -0
  199. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
  200. package/src/components/AppHeader/AppHeader.scss +7 -1
  201. package/src/components/AppHeader/types.ts +8 -9
  202. package/src/components/Checkbox/Checkbox.scss +57 -0
  203. package/src/components/Checkbox/Checkbox.stories.tsx +91 -15
  204. package/src/components/Checkbox/Checkbox.tsx +4 -1
  205. package/src/components/Checkbox/types.ts +4 -0
  206. package/src/components/Comment/Comments.scss +166 -0
  207. package/src/components/Comment/Comments.stories.tsx +212 -0
  208. package/src/components/Comment/Comments.tsx +51 -0
  209. package/src/components/Comment/comment/Comment.tsx +206 -0
  210. package/src/components/Comment/comment/useNode.ts +51 -0
  211. package/src/components/Comment/index.ts +1 -0
  212. package/src/components/Comment/type.ts +36 -0
  213. package/src/components/Drawer/Drawer.scss +2 -1
  214. package/src/components/Editor/Editor.stories.tsx +2 -2
  215. package/src/components/Editor/Editor.tsx +4 -2
  216. package/src/components/Editor/VariableDropdown.scss +8 -2
  217. package/src/components/Editor/VariableDropdown.tsx +15 -7
  218. package/src/components/Editor/constants.ts +1 -1
  219. package/src/components/Editor/types.ts +12 -2
  220. package/src/components/FieldSet/FieldSet.scss +2 -1
  221. package/src/components/FieldSet/FieldSet.stories.tsx +2 -1
  222. package/src/components/Icon/iconList.ts +29 -2
  223. package/src/components/IconButton/IconButton.stories.tsx +1 -0
  224. package/src/components/IconButton/IconButton.tsx +5 -8
  225. package/src/components/IconButton/types.ts +2 -2
  226. package/src/components/IconRadioGroup/IconRadioGroup.scss +2 -1
  227. package/src/components/Input/Input.tsx +99 -88
  228. package/src/components/LabelEditTextField/LabelEditTextField.tsx +1 -1
  229. package/src/components/Modal/Modal.stories.tsx +2 -1
  230. package/src/components/MultiSelect/MultiSelect.scss +29 -0
  231. package/src/components/MultiSelect/MultiSelect.stories.tsx +19 -5
  232. package/src/components/MultiSelect/MultiSelect.tsx +29 -19
  233. package/src/components/PhoneInput/PhoneInput.d.ts +3 -0
  234. package/src/components/PhoneInput/PhoneInput.stories.tsx +95 -0
  235. package/src/components/PhoneInput/PhoneInput.tsx +90 -0
  236. package/src/components/PhoneInput/index.ts +1 -0
  237. package/src/components/PhoneInput/phoneInput.scss +3 -0
  238. package/src/components/PhoneInput/types.ts +10 -0
  239. package/src/components/PopUpModal/PopUpModal.stories.tsx +14 -13
  240. package/src/components/PopUpModal/PopUpModal.tsx +2 -1
  241. package/src/components/PopUpModal/types.ts +14 -13
  242. package/src/components/Select/Select.stories.tsx +2 -2
  243. package/src/components/TableWithAccordion/TableWithAccordion.scss +54 -0
  244. package/src/components/TableWithAccordion/TableWithAccordion.stories.tsx +94 -0
  245. package/src/components/TableWithAccordion/TableWithAccordion.tsx +174 -0
  246. package/src/components/TableWithAccordion/data.ts +37 -0
  247. package/src/components/TableWithAccordion/index.ts +1 -0
  248. package/src/components/TableWithAccordion/types.ts +70 -0
  249. package/src/components/Tabs/Tabs.scss +0 -1
  250. package/src/index.ts +12 -1
  251. package/src/utils/checkDuplicates/CheckDuplicates.stories.tsx +40 -0
  252. package/src/utils/checkDuplicates/checkDuplicates.ts +13 -0
  253. package/lib/components/TableTree/TableTree copy.d.ts +0 -25
@@ -87,7 +87,7 @@ export const Default3: Story = {
87
87
  };
88
88
  export const EmailGroup: Story = {
89
89
  render: () => {
90
- const [options,setOptions] = useState([
90
+ const [options, setOptions] = useState([
91
91
  {
92
92
  label: 'Sample1@gmail.com',
93
93
  value: 'sample1@gmail.com',
@@ -109,9 +109,9 @@ export const EmailGroup: Story = {
109
109
  ) => {
110
110
  setSelectedOptions(options);
111
111
  };
112
- const onEnter=(newOption:string)=>{
113
- setOptions(prev=>[...prev,{label:newOption,value:newOption}])
114
- setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
112
+ const onEnter = (newOption: string) => {
113
+ setOptions(prev => [...prev, { label: newOption, value: newOption }])
114
+ setSelectedOptions(prev => [...prev, { label: newOption, value: newOption }])
115
115
  }
116
116
  return (
117
117
  <MultiSelect
@@ -153,8 +153,21 @@ export const Controlled: Story = {
153
153
  { label: 'Kiwi', value: 'kiwi' },
154
154
  { label: 'Mango', value: 'mango' },
155
155
  { label: 'Orange', value: 'orange' },
156
- { label: 'Peach', value: 'peach' },
156
+ { label: 'Plum', value: 'plum' },
157
+ { label: 'Berry', value: 'berry' },
158
+ { label: 'Watermelon', value: 'watermelon' },
159
+ { label: 'Guava', value: 'guava' },
160
+ { label: 'Pineapple', value: 'pineapple' },
157
161
  { label: 'Strawberry', value: 'strawberry' },
162
+ { label: 'Pear', value: 'pear' },
163
+ { label: 'Peach', value: 'peach' },
164
+ { label: 'Lemon', value: 'lemon' },
165
+ { label: 'Papaya', value: 'papaya' },
166
+ { label: 'Apricot', value: 'apricot' },
167
+ { label: 'Raspberry', value: 'raspberry' },
168
+ { label: 'Pomegranate', value: 'pomegranate' },
169
+ { label: 'Cantaloupe', value: 'cantaloupe' },
170
+ { label: 'Lychee', value: 'lychee' }
158
171
  ]);
159
172
  }, []);
160
173
  return (
@@ -162,6 +175,7 @@ export const Controlled: Story = {
162
175
  label={'Fruits'}
163
176
  required
164
177
  options={options}
178
+ displayCount
165
179
  selectedOptions={selectedOptions}
166
180
  onChange={onChange}
167
181
  />
@@ -29,9 +29,8 @@ const ChipElement = ({
29
29
  return (
30
30
  <div className="ff-multiselect-chip">
31
31
  <span
32
- className={`ff-multiselect-chip-label ${
33
- disableChip && 'label-padding'
34
- }`}
32
+ className={`ff-multiselect-chip-label ${disableChip && 'label-padding'
33
+ }`}
35
34
  >
36
35
  <Tooltip
37
36
  placement="bottom"
@@ -59,26 +58,26 @@ const MultiSelect = ({
59
58
  options = [],
60
59
  type = 'text',
61
60
  selectedOptions = [],
62
- onChange = () => {},
61
+ onChange = () => { },
63
62
  acceptNewOption = false,
64
63
  zIndex = 100,
65
64
  label = '',
66
- onSearch = () => {},
65
+ onSearch = () => { },
67
66
  required = false,
68
67
  disabled = false,
69
68
  errorMessage = 'Fill this field',
70
- displayCount = false,
69
+ displayCount: initialDisplayCount = false,
71
70
  placeholderForSearching = 'Search',
72
71
  variant = 'default',
73
- onLabelPlusIconClick = () => {},
74
- onManageLabelsClick = () => {},
72
+ onLabelPlusIconClick = () => { },
73
+ onManageLabelsClick = () => { },
75
74
  className = '',
76
75
  highlightedMachine = '',
77
- onSelectButtonClick = () => {},
76
+ onSelectButtonClick = () => { },
78
77
  labelAccessor = '',
79
78
  valueAccessor = labelAccessor,
80
79
  withSelectButton = variant === 'machines' ? true : false,
81
- onEnter=()=>{}
80
+ onEnter = () => { },
82
81
  }: MultiSelectProps) => {
83
82
  const [isOpen, setIsOpen] = useState<boolean>(false);
84
83
  const [allOptions, setAllOptions] = useState(options);
@@ -88,6 +87,8 @@ const MultiSelect = ({
88
87
  useState<boolean>(false);
89
88
  const [inputError, setInputError] = useState<string>('');
90
89
  const [displayIcon, setDisplayIcon] = useState<boolean>(false);
90
+ const [displayCount, setDisplayCount] =
91
+ useState<boolean>(initialDisplayCount);
91
92
 
92
93
  const [dropdownPosition, setDropdownPosition] = useState<{
93
94
  top: number;
@@ -109,7 +110,7 @@ const MultiSelect = ({
109
110
 
110
111
  let isFieldSkipped = isSelectFocusedOnce && selectedOptions.length === 0;
111
112
 
112
- const maxVisibleChips = 2;
113
+ const maxVisibleChips = 12;
113
114
  const hiddenCount = selectedOptions.length - maxVisibleChips;
114
115
 
115
116
  const handleClick = () => {
@@ -132,7 +133,7 @@ const MultiSelect = ({
132
133
  inputRef.current?.focus();
133
134
  const updatedOptions = allOptions.map((option) =>
134
135
  getValue(option, valueAccessor) ===
135
- getValue(selectedOption, valueAccessor)
136
+ getValue(selectedOption, valueAccessor)
136
137
  ? { ...option, isChecked }
137
138
  : option
138
139
  );
@@ -169,7 +170,7 @@ const MultiSelect = ({
169
170
  return;
170
171
  }
171
172
  }
172
- onEnter?.(searchedKeyword)
173
+ onEnter?.(searchedKeyword);
173
174
  setSearchedKeyword('');
174
175
  setIsOpen(false);
175
176
  }
@@ -209,10 +210,16 @@ const MultiSelect = ({
209
210
  setDisplayIcon(false);
210
211
  }
211
212
  };
213
+
214
+ const handleHiddenChips = () => {
215
+ setIsOpen(false);
216
+ setDisplayCount(false);
217
+ };
212
218
  useEffect(() => {
213
219
  const rect = dropdownWrapper.current?.getBoundingClientRect();
214
220
  setDropdownPosition((prev) => ({ ...prev, width: rect?.width as number }));
215
221
  }, [displayIcon]);
222
+
216
223
  useEffect(() => {
217
224
  if (isOpen) {
218
225
  calculatePosition();
@@ -250,14 +257,14 @@ const MultiSelect = ({
250
257
  }, [isOpen]);
251
258
  useEffect(() => {
252
259
  if (!checkEmpty(options?.length)) {
253
- let initializeOptions=options;
254
- if(!checkEmpty(selectedOptions?.length)){
255
- initializeOptions = options.map((option) => ({
260
+ let initializeOptions = options;
261
+ if (!checkEmpty(selectedOptions?.length)) {
262
+ initializeOptions = options.map((option) => ({
256
263
  ...option,
257
264
  isChecked: selectedOptions.some(
258
265
  (selectedOption) =>
259
266
  getValue(selectedOption, valueAccessor) ===
260
- getValue(option, valueAccessor)
267
+ getValue(option, valueAccessor)
261
268
  ),
262
269
  }));
263
270
  }
@@ -392,7 +399,10 @@ const MultiSelect = ({
392
399
  )}
393
400
  </div>
394
401
  {hiddenCount > 0 && displayCount && (
395
- <div className="ff-multiselect-more-chip" onClick={toggleDropdown}>
402
+ <div
403
+ className="ff-multiselect-more-chip"
404
+ onClick={handleHiddenChips}
405
+ >
396
406
  <Typography
397
407
  fontSize={12}
398
408
  fontWeight="semi-bold"
@@ -431,7 +441,7 @@ const MultiSelect = ({
431
441
  className="error-text"
432
442
  />
433
443
  )}
434
- {displayIcon && variant==='labels' && (
444
+ {displayIcon && variant === 'labels' && (
435
445
  <Typography
436
446
  onClick={onManageLabelsClick}
437
447
  fontSize={8}
@@ -0,0 +1,3 @@
1
+ declare module 'react-phone-input-2' {
2
+ export * from 'react-phone-input-2';
3
+ }
@@ -0,0 +1,95 @@
1
+ import React, { useState } from 'react';
2
+ import { PhoneInputProps } from './types';
3
+ import PhoneInputField from './PhoneInput';
4
+
5
+ export default {
6
+ title: 'Components/PhoneInputComponent',
7
+ component: PhoneInputField,
8
+ };
9
+
10
+ const Template = ({
11
+ value,
12
+ country,
13
+ width,
14
+ onChange,
15
+ placeholder,
16
+ onFocus,
17
+ onBlur,
18
+ isValid,
19
+ }: PhoneInputProps) => {
20
+ const [phone, setPhone] = useState<string>(value || '');
21
+ const [valid, setValid] = useState(true);
22
+
23
+ const handlePhoneChange = (newPhone: string) => {
24
+ setPhone(newPhone);
25
+ const validPhoneNumberLength = country === 'IN' ? 10 : newPhone.length;
26
+ const phoneIsValid = newPhone.length === validPhoneNumberLength;
27
+ setValid(phoneIsValid);
28
+ onChange(newPhone);
29
+ };
30
+
31
+ return (
32
+ <PhoneInputField
33
+ value={phone}
34
+ country={country}
35
+ onChange={handlePhoneChange}
36
+ width={width}
37
+ placeholder={placeholder}
38
+ onFocus={onFocus}
39
+ onBlur={onBlur}
40
+ isValid={valid}
41
+ />
42
+ );
43
+ };
44
+
45
+ // Default story
46
+ export const Default = Template.bind({});
47
+ Default.args = {
48
+ country: 'IN',
49
+ value: '9134567890',
50
+ width: '400px',
51
+ placeholder: 'Enter phone number',
52
+ onChange: () => {},
53
+ onFocus: () => {},
54
+ onBlur: () => {},
55
+ isValid: true,
56
+ };
57
+
58
+ // Story with initial value
59
+ export const WithInitialValue = Template.bind({});
60
+ WithInitialValue.args = {
61
+ country: 'IN',
62
+ value: '9176543210',
63
+ width: '300px',
64
+ onChange: () => {},
65
+ placeholder: 'Enter phone number',
66
+ onFocus: () => {},
67
+ onBlur: () => {},
68
+ isValid: true,
69
+ };
70
+
71
+ // Story with a custom country
72
+ export const WithCustomCountry = Template.bind({});
73
+ WithCustomCountry.args = {
74
+ country: 'IN',
75
+ value: '9176543210',
76
+ width: '300px',
77
+ onChange: () => {},
78
+ placeholder: 'Enter phone number',
79
+ onFocus: () => {},
80
+ onBlur: () => {},
81
+ isValid: true,
82
+ };
83
+
84
+ // Story with empty value
85
+ export const EmptyValue = Template.bind({});
86
+ EmptyValue.args = {
87
+ country: 'IN',
88
+ value: '91',
89
+ width: '500px',
90
+ onChange: () => {},
91
+ placeholder: 'Enter phone number',
92
+ onFocus: () => {},
93
+ onBlur: () => {},
94
+ isValid: false,
95
+ };
@@ -0,0 +1,90 @@
1
+ import React, { useState, useEffect } from 'react';
2
+ import PhoneInput from 'react-phone-input-2';
3
+ import 'react-phone-input-2/lib/style.css';
4
+ import { PhoneInputProps } from './types';
5
+ import Typography from '../Typography';
6
+ import './PhoneInput.scss';
7
+
8
+ const PhoneInputField: React.FC<PhoneInputProps> = ({
9
+ country,
10
+ value,
11
+ onChange,
12
+ width = '100%',
13
+ placeholder = 'Enter phone number',
14
+ onFocus,
15
+ onBlur,
16
+ }) => {
17
+ const [phone, setPhone] = useState<string>(value);
18
+ const [isFocused, setIsFocused] = useState(false);
19
+ const [error, setError] = useState<string>('');
20
+
21
+ useEffect(() => {
22
+ if (value !== phone) {
23
+ setPhone(value);
24
+ }
25
+ }, [value]);
26
+
27
+ const handlePhoneChange = (phone: string) => {
28
+ const numericPhone = phone.replace(/[^0-9+]/g, '');
29
+ const countryCode = numericPhone.startsWith('+')
30
+ ? numericPhone.substring(0, 3)
31
+ : '';
32
+ let phoneNumber = numericPhone.replace(countryCode, '');
33
+
34
+ let validPhoneNumberLength = 10;
35
+ if (country === 'IN') {
36
+ if (phoneNumber.length < validPhoneNumberLength) {
37
+ setError('Phone number should be exactly 10 digits');
38
+ } else {
39
+ setError('');
40
+ }
41
+ }
42
+
43
+ if (phoneNumber.length <= validPhoneNumberLength) {
44
+ setPhone(numericPhone);
45
+ onChange(numericPhone);
46
+ }
47
+ };
48
+
49
+ const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
50
+ setIsFocused(true);
51
+ if (onFocus) onFocus(event);
52
+ };
53
+
54
+ const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
55
+ setIsFocused(false);
56
+ if (onBlur) onBlur(event);
57
+ };
58
+
59
+ return (
60
+ <div>
61
+ <PhoneInput
62
+ country={country}
63
+ value={phone}
64
+ onChange={handlePhoneChange}
65
+ inputStyle={{
66
+ width,
67
+ height: '32px',
68
+ border: isFocused
69
+ ? '1px solid var(--brand-color)'
70
+ : error
71
+ ? '1px solid var(--error_light)'
72
+ : '1px solid var(--default-color)',
73
+ borderRadius: '4px',
74
+ fontSize: '14px',
75
+ transition: 'border-color 0.3s ease',
76
+ }}
77
+ placeholder={placeholder}
78
+ onFocus={handleFocus}
79
+ onBlur={handleBlur}
80
+ />
81
+ {error && !isFocused && (
82
+ <Typography color={'var(--error_light)'} className="error">
83
+ {error}
84
+ </Typography>
85
+ )}
86
+ </div>
87
+ );
88
+ };
89
+
90
+ export default PhoneInputField;
@@ -0,0 +1 @@
1
+ export { default } from './PhoneInput';
@@ -0,0 +1,3 @@
1
+ .error {
2
+ margin-top: 5px;
3
+ }
@@ -0,0 +1,10 @@
1
+ export interface PhoneInputProps {
2
+ country: string;
3
+ value: string;
4
+ onChange: (phone: string) => void;
5
+ onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
6
+ onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
7
+ width?: string;
8
+ placeholder?: string;
9
+ isValid: any;
10
+ }
@@ -15,15 +15,16 @@ const meta: Meta<typeof PopUpModal> = {
15
15
  type Story = StoryObj<typeof PopUpModal>;
16
16
 
17
17
  const defaultArgs = {
18
- iconName:"license_warning",
19
- titleMessage:"Warning!",
20
- subTitleMessage:"Unsaved Changes.",
21
- modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
22
- footerMessage:"How do you want to proceed?",
23
- firstButtonLabel:"Cancel",
24
- secondButtonLabel:"Continue",
25
- buttonVariant:"warning",
26
- border:'1px solid var(--warning-modal-border-color)'
18
+ iconName: "license_warning",
19
+ titleMessage: "Warning!",
20
+ subTitleMessage: "Unsaved Changes.",
21
+ modalMessage: "Your web service data will be lost. Are you sure you want to exit?",
22
+ footerMessage: "How do you want to proceed?",
23
+ firstButtonLabel: "Cancel",
24
+ secondButtonLabel: "Continue",
25
+ buttonVariant: "warning",
26
+ border: '1px solid var(--warning-modal-border-color)',
27
+ colorForTitleMessage: 'var(--select-license-header-text-color)'
27
28
  }
28
29
 
29
30
  export const DefaultModal: Story = {
@@ -41,12 +42,12 @@ export const ControlledPopUp: Story = {
41
42
  render: () => {
42
43
  const [isOpen, setIsOpen] = useState(false);
43
44
  const handleContinue = () => {
44
- alert('Continued!');
45
- setIsOpen(false);
46
- };
45
+ alert('Continued!');
46
+ setIsOpen(false);
47
+ };
47
48
  return (
48
49
  <>
49
- <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
50
+ <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp' />
50
51
  <PopUpModal
51
52
  {...defaultArgs}
52
53
  isOpen={isOpen}
@@ -19,6 +19,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
19
19
  secondButtonLabel = 'Continue',
20
20
  buttonVariant = 'warning',
21
21
  border = '1px solid var(--warning-modal-border-color)',
22
+ colorForTitleMessage = 'var(--status-button-bg-warning)'
22
23
  }) => {
23
24
  return (
24
25
  <Modal
@@ -43,7 +44,7 @@ const PopUpModal: FC<PopUpModalProps> = ({
43
44
  >
44
45
  {' '}
45
46
  <Typography
46
- color="var(--status-button-bg-warning)"
47
+ color={`${colorForTitleMessage}`}
47
48
  fontSize={20}
48
49
  fontWeight="semi-bold"
49
50
  >
@@ -1,14 +1,15 @@
1
1
  export interface PopUpModalProps {
2
- isOpen: boolean;
3
- onClose: () => void;
4
- onContinue?: () => void;
5
- titleMessage:string,
6
- subTitleMessage?:string,
7
- iconName:string,
8
- modalMessage:string,
9
- footerMessage:string,
10
- firstButtonLabel?:string,
11
- secondButtonLabel:string,
12
- buttonVariant:any,
13
- border:string,
14
- }
2
+ isOpen: boolean;
3
+ onClose: () => void;
4
+ onContinue?: () => void;
5
+ titleMessage: string;
6
+ subTitleMessage?: string;
7
+ iconName: string;
8
+ modalMessage: string;
9
+ footerMessage: string;
10
+ firstButtonLabel?: string;
11
+ secondButtonLabel: string;
12
+ buttonVariant: any;
13
+ border: string;
14
+ colorForTitleMessage?: string;
15
+ }
@@ -1,9 +1,9 @@
1
+ import React, { useState } from 'react';
2
+
1
3
  import type { Meta, StoryObj } from '@storybook/react';
2
4
  import Select from './Select';
3
- import React,{ useState } from 'react';
4
5
  import { Option } from './types';
5
6
  import RadioGroup from '../RadioGroup';
6
- import React from 'react';
7
7
 
8
8
  const meta: Meta<typeof Select> = {
9
9
  title: 'Components/Select',
@@ -0,0 +1,54 @@
1
+ @use '../../assets/styles/fonts';
2
+ @use '../../assets/styles/colors';
3
+
4
+ .ff-accordion-table-container {
5
+ overflow-y: auto;
6
+ .ff-accordion-table {
7
+ width: 100%;
8
+ .ff-table-header,
9
+ .ff-table-cell {
10
+ text-align: left;
11
+ padding: 9px;
12
+ }
13
+ .ff-table-header {
14
+ color: var(--text-color);
15
+ border-bottom: 1px solid var(--slider-table-color);
16
+ }
17
+ .ff-table-body {
18
+ .ff-table-row:hover {
19
+ background-color: var(--hover-color);
20
+ }
21
+ }
22
+ &--primary-bg {
23
+ background-color: var(--table-with-accordion-header-primary-bg);
24
+ }
25
+ &--secondary-bg {
26
+ background-color: var(--secondary-bg);
27
+ }
28
+ &--default-bg {
29
+ background-color: var(--default-bg);
30
+ }
31
+ }
32
+ .ff-accordion-fixed-header {
33
+ position: sticky;
34
+ top: 0;
35
+ z-index: 99;
36
+ background-color: var(--file-details-bg);
37
+ }
38
+ .column-table-accordion {
39
+ width: 100%;
40
+ .accordion-header {
41
+ display: flex;
42
+ align-items: center;
43
+ .header-title {
44
+ padding: 8px;
45
+ }
46
+ .accordion-arrow {
47
+ img {
48
+ height: 30px;
49
+ width: 35px;
50
+ }
51
+ }
52
+ }
53
+ }
54
+ }
@@ -0,0 +1,94 @@
1
+ import { StoryObj, Meta } from '@storybook/react';
2
+ import TableWithAccordion from './TableWithAccordion';
3
+ import { sampleData } from './data';
4
+
5
+ const meta: Meta<typeof TableWithAccordion> = {
6
+ title: 'Components/TableWithAccordion',
7
+ component: TableWithAccordion,
8
+ parameters: {
9
+ layout: 'centered',
10
+ },
11
+ tags: ['autodocs'],
12
+ };
13
+
14
+ type Story = StoryObj<typeof TableWithAccordion>;
15
+ const defaultArgs = {
16
+ tableMeta: [],
17
+ tableData: [],
18
+ };
19
+
20
+ const emptyData: never[] = [];
21
+ const columnsData = [
22
+ {
23
+ header: 'Description',
24
+ accessor: 'desc',
25
+ width: 100,
26
+ },
27
+ {
28
+ header: 'SUITE NAME',
29
+ accessor: 'suiteName',
30
+ width: 100,
31
+ },
32
+ {
33
+ header: 'SUITE TYPE',
34
+ accessor: 'suiteName',
35
+ width: 100,
36
+ },
37
+ {
38
+ header: 'SUITE ACCESS',
39
+ accessor: 'suiteName',
40
+ width: 100,
41
+ },
42
+ {
43
+ header: 'Modified By',
44
+ accessor: 'modifiedBy',
45
+ width: 100,
46
+ },
47
+ ];
48
+
49
+ export const TableWithRowAccordion: Story = {
50
+ args: {
51
+ ...defaultArgs,
52
+ tableMeta: columnsData,
53
+ tableData: sampleData,
54
+ accordionType: 'row',
55
+ TableAccordionStateIconWidth:4,
56
+ TableAccordionStateIconHeight:8,
57
+ },
58
+ };
59
+ export const TableWithColumnAccordion: Story = {
60
+ args: {
61
+ ...defaultArgs,
62
+ tableMeta: columnsData,
63
+ tableData: sampleData,
64
+ accordionType: 'column',
65
+ TableAccordionStateIconWidth:4,
66
+ TableAccordionStateIconHeight:8,
67
+ },
68
+ };
69
+
70
+ export const EmtptyTableWithColumnAccordion: Story = {
71
+ args: {
72
+ ...defaultArgs,
73
+ tableMeta: columnsData,
74
+ tableData: emptyData,
75
+ accordionType: 'column',
76
+ TableAccordionStateIconWidth:4,
77
+ TableAccordionStateIconHeight:8,
78
+ },
79
+ };
80
+
81
+ export const AccordionTableWithFixedHeader: Story = {
82
+ args: {
83
+ ...defaultArgs,
84
+ tableMeta: columnsData,
85
+ tableData: sampleData,
86
+ accordionType: 'row',
87
+ height: '200px',
88
+ withFixedHeader: true,
89
+ TableAccordionStateIconWidth:4,
90
+ TableAccordionStateIconHeight:8,
91
+ },
92
+ };
93
+
94
+ export default meta;