pixel-react 1.6.5 → 1.6.6

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 (726) hide show
  1. package/.prettierrc.js +13 -13
  2. package/.storybook/main.ts +26 -26
  3. package/.storybook/preview-head.html +2 -2
  4. package/.storybook/preview.ts +26 -26
  5. package/.yarnrc.yml +1 -1
  6. package/README.md +75 -75
  7. package/index.scss +4 -4
  8. package/lib/components/AddVariables/AddVariables.d.ts +5 -0
  9. package/lib/components/AddVariables/index.d.ts +1 -0
  10. package/lib/components/AddVariables/types.d.ts +35 -0
  11. package/lib/components/Checkbox/types.d.ts +4 -0
  12. package/lib/components/Editor/constants.d.ts +1 -1
  13. package/lib/components/Editor/types.d.ts +10 -2
  14. package/lib/components/Input/Input.d.ts +1 -1
  15. package/lib/index.d.ts +56 -4
  16. package/lib/index.esm.js +519 -494
  17. package/lib/index.esm.js.map +1 -1
  18. package/lib/index.js +520 -493
  19. package/lib/index.js.map +1 -1
  20. package/lib/tsconfig.tsbuildinfo +1 -1
  21. package/lib/utils/checkDuplicates/checkDuplicates.d.ts +1 -0
  22. package/package.json +80 -80
  23. package/rollup.config.mjs +67 -67
  24. package/src/StyleGuide/ColorPalette/ColorPalette.scss +62 -62
  25. package/src/StyleGuide/ColorPalette/ColorPalette.stories.tsx +16 -16
  26. package/src/StyleGuide/ColorPalette/ColorPalette.tsx +67 -67
  27. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +279 -279
  28. package/src/StyleGuide/ColorPalette/index.ts +1 -1
  29. package/src/StyleGuide/ColorPalette/types.ts +19 -19
  30. package/src/StyleGuide/Typography/Typography.scss +99 -99
  31. package/src/StyleGuide/Typography/Typography.stories.tsx +16 -16
  32. package/src/StyleGuide/Typography/Typography.tsx +60 -60
  33. package/src/StyleGuide/Typography/TypographyList.ts +3 -3
  34. package/src/StyleGuide/Typography/types.ts +9 -9
  35. package/src/assets/Themes/BaseTheme.scss +270 -270
  36. package/src/assets/Themes/DarkTheme.scss +264 -264
  37. package/src/assets/Themes/Theme.scss +16 -16
  38. package/src/assets/icons/Arrow.svg +4 -4
  39. package/src/assets/icons/Header_preset.svg +18 -18
  40. package/src/assets/icons/accordion_header_icon.svg +10 -10
  41. package/src/assets/icons/active_license_icon.svg +3 -3
  42. package/src/assets/icons/add_archive.svg +9 -9
  43. package/src/assets/icons/add_file.svg +16 -16
  44. package/src/assets/icons/add_label_icon.svg +3 -3
  45. package/src/assets/icons/add_locator.svg +4 -4
  46. package/src/assets/icons/add_testcase.svg +3 -3
  47. package/src/assets/icons/add_user.svg +9 -9
  48. package/src/assets/icons/add_variable.svg +11 -0
  49. package/src/assets/icons/add_variable_icon.svg +4 -4
  50. package/src/assets/icons/alert.svg +17 -17
  51. package/src/assets/icons/all_borders.svg +3 -3
  52. package/src/assets/icons/all_projects.svg +3 -3
  53. package/src/assets/icons/android.svg +9 -9
  54. package/src/assets/icons/android_icon.svg +6 -6
  55. package/src/assets/icons/apk_file_type.svg +4 -4
  56. package/src/assets/icons/app_switch.svg +11 -11
  57. package/src/assets/icons/approval_pending.svg +8 -8
  58. package/src/assets/icons/arrow_down.svg +3 -3
  59. package/src/assets/icons/arrow_right.svg +4 -4
  60. package/src/assets/icons/arrow_up.svg +3 -3
  61. package/src/assets/icons/arrows_down_icon.svg +3 -3
  62. package/src/assets/icons/arrows_right_icon.svg +10 -10
  63. package/src/assets/icons/arrows_top_icon.svg +3 -3
  64. package/src/assets/icons/attachment_icon.svg +3 -3
  65. package/src/assets/icons/authorization_icon.svg +4 -4
  66. package/src/assets/icons/automation_testcase.svg +4 -4
  67. package/src/assets/icons/back_icon.svg +3 -3
  68. package/src/assets/icons/backward.svg +10 -10
  69. package/src/assets/icons/backward_icon.svg +3 -3
  70. package/src/assets/icons/beautify_icon.svg +3 -3
  71. package/src/assets/icons/bold.svg +3 -3
  72. package/src/assets/icons/border_bottom.svg +3 -3
  73. package/src/assets/icons/border_left.svg +3 -3
  74. package/src/assets/icons/border_right.svg +3 -3
  75. package/src/assets/icons/border_top.svg +3 -3
  76. package/src/assets/icons/browser_stack.svg +9 -9
  77. package/src/assets/icons/browserstack_icon.svg +24 -24
  78. package/src/assets/icons/calendar_icon.svg +9 -9
  79. package/src/assets/icons/capture_icon.svg +3 -6
  80. package/src/assets/icons/check_mark.svg +3 -3
  81. package/src/assets/icons/chrome.svg +12 -12
  82. package/src/assets/icons/client_profile.svg +4 -4
  83. package/src/assets/icons/clock_icon.svg +11 -11
  84. package/src/assets/icons/clone_icon.svg +3 -3
  85. package/src/assets/icons/close_pill.svg +3 -3
  86. package/src/assets/icons/cloud_server_host_icon.svg +3 -3
  87. package/src/assets/icons/collapse-icon.svg +6 -6
  88. package/src/assets/icons/compressed_file_type.svg +4 -4
  89. package/src/assets/icons/configuration.svg +3 -3
  90. package/src/assets/icons/continue_without_sign.svg +3 -3
  91. package/src/assets/icons/copy-icon.svg +3 -3
  92. package/src/assets/icons/csv_file_type.svg +4 -4
  93. package/src/assets/icons/dashboard_icon.svg +31 -31
  94. package/src/assets/icons/dashboard_mobile_icon.svg +47 -47
  95. package/src/assets/icons/dashboard_web_icon.svg +9 -9
  96. package/src/assets/icons/data_provider.svg +8 -8
  97. package/src/assets/icons/dataset_list.svg +3 -3
  98. package/src/assets/icons/defects.svg +8 -8
  99. package/src/assets/icons/delete.svg +3 -3
  100. package/src/assets/icons/delete_info.svg +17 -17
  101. package/src/assets/icons/details.svg +3 -3
  102. package/src/assets/icons/double_underline.svg +5 -5
  103. package/src/assets/icons/download-icon.svg +3 -3
  104. package/src/assets/icons/download_file_icon.svg +3 -3
  105. package/src/assets/icons/download_icon.svg +4 -4
  106. package/src/assets/icons/drag_icon.svg +4 -4
  107. package/src/assets/icons/drawer_maximize.svg +6 -6
  108. package/src/assets/icons/dropzone_icon.svg +18 -18
  109. package/src/assets/icons/edge.svg +30 -30
  110. package/src/assets/icons/edit_icon.svg +5 -5
  111. package/src/assets/icons/element.svg +4 -4
  112. package/src/assets/icons/error.svg +17 -17
  113. package/src/assets/icons/excel_corner_menu.svg +3 -3
  114. package/src/assets/icons/expand-icon.svg +6 -6
  115. package/src/assets/icons/export.svg +4 -4
  116. package/src/assets/icons/export_collection_icon.svg +13 -13
  117. package/src/assets/icons/eye_closed.svg +3 -3
  118. package/src/assets/icons/eye_open_icon.svg +3 -3
  119. package/src/assets/icons/failed_status_icon.svg +12 -12
  120. package/src/assets/icons/file.svg +11 -11
  121. package/src/assets/icons/fill_color.svg +7 -7
  122. package/src/assets/icons/filter.svg +4 -4
  123. package/src/assets/icons/fire_fox.svg +106 -106
  124. package/src/assets/icons/fireflink_finder_logo.svg +7 -7
  125. package/src/assets/icons/fireflink_icon.svg +4 -4
  126. package/src/assets/icons/fireflink_logo.svg +13 -13
  127. package/src/assets/icons/fireflink_platform.svg +4 -4
  128. package/src/assets/icons/firefox.svg +84 -84
  129. package/src/assets/icons/flaky_status_icon.svg +12 -12
  130. package/src/assets/icons/formate_painter.svg +5 -5
  131. package/src/assets/icons/formula_icon.svg +3 -3
  132. package/src/assets/icons/forward.svg +3 -3
  133. package/src/assets/icons/forward_icon.svg +3 -3
  134. package/src/assets/icons/full_access_icon.svg +4 -4
  135. package/src/assets/icons/gif_file_type.svg +4 -4
  136. package/src/assets/icons/global_variable_icon.svg +4 -4
  137. package/src/assets/icons/hamburger_menu.svg +3 -3
  138. package/src/assets/icons/hide_access_icon.svg +3 -3
  139. package/src/assets/icons/hide_icon.svg +9 -9
  140. package/src/assets/icons/history_icon.svg +19 -19
  141. package/src/assets/icons/html_file_type.svg +4 -4
  142. package/src/assets/icons/impactList.svg +6 -6
  143. package/src/assets/icons/import.svg +4 -4
  144. package/src/assets/icons/info.svg +17 -17
  145. package/src/assets/icons/info_icon.svg +5 -5
  146. package/src/assets/icons/info_user.svg +5 -5
  147. package/src/assets/icons/internet_explorer.svg +3 -3
  148. package/src/assets/icons/ipk_file_type.svg +4 -4
  149. package/src/assets/icons/italic.svg +3 -3
  150. package/src/assets/icons/jira.svg +3 -3
  151. package/src/assets/icons/jpg_file_type.svg +4 -4
  152. package/src/assets/icons/json_file_type.svg +4 -4
  153. package/src/assets/icons/label_icon.svg +8 -8
  154. package/src/assets/icons/label_plus.svg +3 -3
  155. package/src/assets/icons/lambda_icon.svg +3 -3
  156. package/src/assets/icons/left_arrow_icon.svg +3 -3
  157. package/src/assets/icons/license_expired.svg +20 -20
  158. package/src/assets/icons/license_info.svg +28 -28
  159. package/src/assets/icons/license_warning.svg +10 -10
  160. package/src/assets/icons/link_expired.svg +186 -186
  161. package/src/assets/icons/linked_defects.svg +11 -11
  162. package/src/assets/icons/linux.svg +42 -42
  163. package/src/assets/icons/local.svg +3 -3
  164. package/src/assets/icons/local_variable_icon.svg +4 -4
  165. package/src/assets/icons/logo.svg +17 -17
  166. package/src/assets/icons/mac.svg +9 -9
  167. package/src/assets/icons/manage_apps.svg +3 -3
  168. package/src/assets/icons/manual_locator.svg +7 -7
  169. package/src/assets/icons/manual_testcase.svg +3 -3
  170. package/src/assets/icons/maximize_icon.svg +5 -5
  171. package/src/assets/icons/maximize_script.svg +12 -12
  172. package/src/assets/icons/maximize_tree.svg +3 -3
  173. package/src/assets/icons/minimize_script.svg +5 -5
  174. package/src/assets/icons/mobile_icon.svg +3 -3
  175. package/src/assets/icons/moon_stars.svg +10 -10
  176. package/src/assets/icons/more.svg +10 -10
  177. package/src/assets/icons/move_icon.svg +5 -5
  178. package/src/assets/icons/ms_dynamic.svg +4 -4
  179. package/src/assets/icons/ms_dynamic_icon.svg +15 -15
  180. package/src/assets/icons/nlp_help_icon.svg +3 -3
  181. package/src/assets/icons/no_access_icon.svg +4 -4
  182. package/src/assets/icons/no_border.svg +3 -3
  183. package/src/assets/icons/no_data.svg +13 -13
  184. package/src/assets/icons/no_license_found.svg +22 -22
  185. package/src/assets/icons/notification_icon.svg +3 -3
  186. package/src/assets/icons/opera.svg +9 -9
  187. package/src/assets/icons/passed_status_icon.svg +12 -12
  188. package/src/assets/icons/pdf_file_type.svg +4 -4
  189. package/src/assets/icons/plus_icon.svg +11 -11
  190. package/src/assets/icons/plus_user_icon.svg +3 -3
  191. package/src/assets/icons/png_file_type.svg +4 -4
  192. package/src/assets/icons/project_element.svg +4 -4
  193. package/src/assets/icons/project_env_variable_icon.svg +4 -4
  194. package/src/assets/icons/project_status_icon.svg +10 -10
  195. package/src/assets/icons/quick_run_setting_icon.svg +5 -5
  196. package/src/assets/icons/refresh-icon.svg +4 -4
  197. package/src/assets/icons/refresh_icon.svg +4 -4
  198. package/src/assets/icons/reload.svg +3 -3
  199. package/src/assets/icons/remove.svg +11 -11
  200. package/src/assets/icons/remove_user.svg +3 -3
  201. package/src/assets/icons/replace.svg +11 -11
  202. package/src/assets/icons/replace_file.svg +13 -13
  203. package/src/assets/icons/replace_icon.svg +6 -6
  204. package/src/assets/icons/reset-link.svg +52 -52
  205. package/src/assets/icons/right_arrow_icon.svg +4 -4
  206. package/src/assets/icons/rotate_icon.svg +10 -10
  207. package/src/assets/icons/run_automation_scripts_icon.svg +33 -33
  208. package/src/assets/icons/run_icon.svg +26 -26
  209. package/src/assets/icons/run_manual_testcase_icon.svg +4 -4
  210. package/src/assets/icons/safari.svg +93 -93
  211. package/src/assets/icons/safari_icon.svg +12 -12
  212. package/src/assets/icons/sales_force.svg +7 -7
  213. package/src/assets/icons/salesforce_icon.svg +14 -14
  214. package/src/assets/icons/sample_template_first.svg +29 -29
  215. package/src/assets/icons/sample_template_second.svg +47 -47
  216. package/src/assets/icons/sause_lab.svg +3 -3
  217. package/src/assets/icons/save_as_step.svg +3 -3
  218. package/src/assets/icons/search.svg +3 -3
  219. package/src/assets/icons/send_step.svg +4 -4
  220. package/src/assets/icons/skipped_status_icon.svg +12 -12
  221. package/src/assets/icons/standard_template.svg +30 -30
  222. package/src/assets/icons/step_group.svg +10 -10
  223. package/src/assets/icons/strike_through.svg +3 -3
  224. package/src/assets/icons/success.svg +17 -17
  225. package/src/assets/icons/sun_icon.svg +10 -10
  226. package/src/assets/icons/swipe_icon.svg +9 -9
  227. package/src/assets/icons/switch_license_icon.svg +123 -123
  228. package/src/assets/icons/system_warning.svg +61 -61
  229. package/src/assets/icons/tap_icon.svg +4 -4
  230. package/src/assets/icons/text_align_center.svg +3 -3
  231. package/src/assets/icons/text_align_left.svg +3 -3
  232. package/src/assets/icons/text_align_right.svg +3 -3
  233. package/src/assets/icons/text_color.svg +3 -3
  234. package/src/assets/icons/tick_icon.svg +4 -4
  235. package/src/assets/icons/toast_close.svg +3 -3
  236. package/src/assets/icons/txt_file_type.svg +4 -4
  237. package/src/assets/icons/underline.svg +4 -4
  238. package/src/assets/icons/update_icon.svg +3 -3
  239. package/src/assets/icons/user_password_lock.svg +220 -220
  240. package/src/assets/icons/user_profile.svg +3 -3
  241. package/src/assets/icons/user_warning.svg +235 -235
  242. package/src/assets/icons/user_with_system.svg +637 -637
  243. package/src/assets/icons/variable.svg +3 -3
  244. package/src/assets/icons/variable_icon.svg +4 -4
  245. package/src/assets/icons/vertical_separator.svg +3 -3
  246. package/src/assets/icons/view_access_icon.svg +4 -4
  247. package/src/assets/icons/view_icon.svg +3 -3
  248. package/src/assets/icons/warning.svg +17 -17
  249. package/src/assets/icons/warning_status_icon.svg +12 -12
  250. package/src/assets/icons/web&mobile_icon.svg +3 -3
  251. package/src/assets/icons/web_icon.svg +3 -3
  252. package/src/assets/icons/web_mobile_icon.svg +29 -29
  253. package/src/assets/icons/web_service_icon.svg +3 -3
  254. package/src/assets/icons/web_services_icon.svg +30 -30
  255. package/src/assets/icons/window_maximize.svg +4 -4
  256. package/src/assets/icons/window_minimize.svg +3 -3
  257. package/src/assets/icons/windows.svg +10 -10
  258. package/src/assets/icons/wrong_mark.svg +3 -3
  259. package/src/assets/icons/wswb_delete_icon.svg +3 -3
  260. package/src/assets/icons/wswb_plus_icon.svg +4 -4
  261. package/src/assets/icons/xls_file_type.svg +4 -4
  262. package/src/assets/icons/xlsx_file_type.svg +4 -4
  263. package/src/assets/icons/xml_file_type.svg +4 -4
  264. package/src/assets/styles/_colors.scss +151 -151
  265. package/src/assets/styles/_fonts.scss +45 -45
  266. package/src/assets/styles/_mixins.scss +21 -21
  267. package/src/assets/utils/functionUtils.ts +96 -96
  268. package/src/components/Accordion/Accordion.scss +46 -46
  269. package/src/components/Accordion/Accordion.stories.tsx +31 -31
  270. package/src/components/Accordion/Accordion.tsx +62 -62
  271. package/src/components/Accordion/index.ts +1 -1
  272. package/src/components/Accordion/types.ts +28 -28
  273. package/src/components/AddResourceButton/AddButton.scss +36 -36
  274. package/src/components/AddResourceButton/AddButton.stories.tsx +126 -126
  275. package/src/components/AddResourceButton/AddButton.tsx +121 -121
  276. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +161 -161
  277. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +38 -38
  278. package/src/components/AddResourceButton/index.ts +1 -1
  279. package/src/components/AddResourceButton/type.ts +92 -92
  280. package/src/components/AddVariables/AddVariables.scss +14 -0
  281. package/src/components/AddVariables/AddVariables.stories.tsx +44 -0
  282. package/src/components/AddVariables/AddVariables.tsx +113 -0
  283. package/src/components/AddVariables/index.ts +1 -0
  284. package/src/components/AddVariables/types.ts +36 -0
  285. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +189 -189
  286. package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx +117 -117
  287. package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +152 -152
  288. package/src/components/AllProjectsDropdown/types.ts +12 -12
  289. package/src/components/AppHeader/AppHeader.scss +182 -176
  290. package/src/components/AppHeader/AppHeader.stories.tsx +425 -425
  291. package/src/components/AppHeader/AppHeader.tsx +198 -198
  292. package/src/components/AppHeader/index.ts +1 -1
  293. package/src/components/AppHeader/types.ts +52 -53
  294. package/src/components/AttachImage/AttachImage.scss +76 -76
  295. package/src/components/AttachImage/AttachImage.stories.tsx +24 -24
  296. package/src/components/AttachImage/AttachImage.tsx +60 -60
  297. package/src/components/AttachImage/index.ts +2 -2
  298. package/src/components/AttachImage/types.ts +26 -26
  299. package/src/components/AttachmentButton/AttachmentButton.scss +9 -9
  300. package/src/components/AttachmentButton/AttachmentButton.stories.tsx +81 -81
  301. package/src/components/AttachmentButton/AttachmentButton.tsx +129 -129
  302. package/src/components/AttachmentButton/types.ts +13 -13
  303. package/src/components/Avatar/Avatar.scss +27 -27
  304. package/src/components/Avatar/Avatar.stories.tsx +76 -76
  305. package/src/components/Avatar/Avatar.tsx +41 -41
  306. package/src/components/Avatar/types.ts +35 -35
  307. package/src/components/Button/Button.scss +155 -155
  308. package/src/components/Button/Button.stories.tsx +81 -81
  309. package/src/components/Button/Button.tsx +73 -73
  310. package/src/components/Button/index.ts +1 -1
  311. package/src/components/Button/types.ts +69 -69
  312. package/src/components/Charts/BarChart/BarChart.scss +66 -66
  313. package/src/components/Charts/BarChart/BarChart.stories.tsx +67 -67
  314. package/src/components/Charts/BarChart/BarChart.tsx +328 -328
  315. package/src/components/Charts/BarChart/types.ts +12 -12
  316. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +157 -157
  317. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +54 -54
  318. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +502 -502
  319. package/src/components/Charts/DashboardDonutChart/types.ts +52 -52
  320. package/src/components/Charts/DonutChart/DonutChart.scss +76 -76
  321. package/src/components/Charts/DonutChart/DonutChart.stories.tsx +30 -30
  322. package/src/components/Charts/DonutChart/DonutChart.tsx +246 -246
  323. package/src/components/Charts/DonutChart/index.ts +1 -1
  324. package/src/components/Charts/DonutChart/type.ts +23 -23
  325. package/src/components/Charts/IconRadialChart/IconRadialChart.scss +25 -25
  326. package/src/components/Charts/IconRadialChart/IconRadialChart.stories.tsx +51 -51
  327. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +173 -173
  328. package/src/components/Charts/IconRadialChart/types.ts +28 -28
  329. package/src/components/Charts/LineChart/LineChart.scss +88 -88
  330. package/src/components/Charts/LineChart/LineChart.stories.tsx +255 -255
  331. package/src/components/Charts/LineChart/LineChart.tsx +282 -282
  332. package/src/components/Charts/LineChart/index.ts +1 -1
  333. package/src/components/Charts/LineChart/types.ts +29 -29
  334. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +86 -86
  335. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +116 -116
  336. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +292 -292
  337. package/src/components/Charts/MultiRadialChart/index.ts +1 -1
  338. package/src/components/Charts/MultiRadialChart/types.ts +25 -25
  339. package/src/components/Charts/PieChart/PieChart.scss +41 -41
  340. package/src/components/Charts/PieChart/PieChart.stories.tsx +46 -46
  341. package/src/components/Charts/PieChart/PieChart.tsx +192 -192
  342. package/src/components/Charts/PieChart/index.ts +1 -1
  343. package/src/components/Charts/PieChart/types.ts +28 -28
  344. package/src/components/Charts/RadialChart/RadialChart.scss +16 -16
  345. package/src/components/Charts/RadialChart/RadialChart.stories.tsx +36 -36
  346. package/src/components/Charts/RadialChart/RadialChart.tsx +180 -180
  347. package/src/components/Charts/RadialChart/index.ts +1 -1
  348. package/src/components/Charts/RadialChart/types.ts +32 -32
  349. package/src/components/Checkbox/Checkbox.scss +146 -89
  350. package/src/components/Checkbox/Checkbox.stories.tsx +123 -47
  351. package/src/components/Checkbox/Checkbox.tsx +58 -55
  352. package/src/components/Checkbox/types.ts +34 -30
  353. package/src/components/Chip/Chip.scss +85 -85
  354. package/src/components/Chip/Chip.stories.tsx +116 -116
  355. package/src/components/Chip/Chip.tsx +35 -35
  356. package/src/components/Chip/index.ts +1 -1
  357. package/src/components/Chip/types.ts +19 -19
  358. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +128 -128
  359. package/src/components/ConnectingBranch/ConnectingBranch.scss +233 -233
  360. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +21 -21
  361. package/src/components/ConnectingBranch/ConnectingBranch.tsx +182 -182
  362. package/src/components/ConnectingBranch/data.ts +137 -137
  363. package/src/components/ConnectingBranch/index.ts +1 -1
  364. package/src/components/ConnectingBranch/types.ts +21 -21
  365. package/src/components/CreateVariable/CreateVariableSlider.scss +18 -18
  366. package/src/components/CreateVariable/CreateVariableSlider.stories.tsx +66 -66
  367. package/src/components/CreateVariable/CreateVariableSlider.tsx +95 -95
  368. package/src/components/CreateVariable/index.ts +1 -1
  369. package/src/components/CreateVariable/types.ts +58 -58
  370. package/src/components/DatePicker/DatePicker.scss +402 -402
  371. package/src/components/DatePicker/DatePicker.stories.tsx +174 -174
  372. package/src/components/DatePicker/DatePicker.tsx +451 -451
  373. package/src/components/DatePicker/Timepicker.tsx +372 -372
  374. package/src/components/DatePicker/types.ts +105 -105
  375. package/src/components/DownloadClient/DownloadClient.scss +80 -80
  376. package/src/components/DownloadClient/DownloadClient.stories.tsx +26 -26
  377. package/src/components/DownloadClient/DownloadClient.tsx +81 -81
  378. package/src/components/DownloadClient/type.ts +40 -40
  379. package/src/components/DragAndDrop/DragAndDrop.d.ts +5 -5
  380. package/src/components/DragAndDrop/DragAndDrop.stories.tsx +25 -25
  381. package/src/components/DragAndDrop/DragAndDrop.ts +7 -7
  382. package/src/components/DragAndDrop/DragAndDropList.scss +69 -69
  383. package/src/components/DragAndDrop/DragAndDropList.tsx +151 -151
  384. package/src/components/Drawer/Drawer.scss +138 -138
  385. package/src/components/Drawer/Drawer.stories.tsx +155 -155
  386. package/src/components/Drawer/Drawer.tsx +232 -232
  387. package/src/components/Drawer/Types.ts +157 -157
  388. package/src/components/EditTextField/EditTextField.scss +97 -97
  389. package/src/components/EditTextField/EditTextField.stories.tsx +127 -127
  390. package/src/components/EditTextField/EditTextField.tsx +181 -181
  391. package/src/components/EditTextField/index.ts +1 -1
  392. package/src/components/EditTextField/types.ts +55 -55
  393. package/src/components/Editor/Editor.scss +56 -56
  394. package/src/components/Editor/Editor.stories.tsx +54 -54
  395. package/src/components/Editor/Editor.tsx +250 -248
  396. package/src/components/Editor/VariableDropdown.scss +27 -21
  397. package/src/components/Editor/VariableDropdown.tsx +57 -49
  398. package/src/components/Editor/constants.ts +180 -180
  399. package/src/components/Editor/types.ts +89 -79
  400. package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +15 -15
  401. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +43 -43
  402. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +27 -27
  403. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +42 -42
  404. package/src/components/Excel/ExcelFile/ExcelFile.scss +68 -68
  405. package/src/components/Excel/ExcelFile/ExcelFile.tsx +491 -491
  406. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +131 -131
  407. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +238 -238
  408. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +168 -168
  409. package/src/components/Excel/ExcelFile/ExcelFileComponents/Copied.tsx +25 -25
  410. package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +56 -56
  411. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +37 -37
  412. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +85 -85
  413. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +31 -31
  414. package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx +5 -5
  415. package/src/components/Excel/ExcelFile/ExcelFileComponents/Row.tsx +5 -5
  416. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +154 -154
  417. package/src/components/Excel/ExcelFile/ExcelFileComponents/Selected.tsx +32 -32
  418. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +146 -146
  419. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +479 -479
  420. package/src/components/Excel/ExcelFile/ExcelFileComponents/Table.tsx +19 -19
  421. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +548 -548
  422. package/src/components/Excel/ExcelFile/ExcelFileComponents/areModelsEqual.ts +18 -18
  423. package/src/components/Excel/ExcelFile/ExcelFileComponents/context.ts +12 -12
  424. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/engine.ts +153 -153
  425. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/formula.ts +31 -31
  426. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/index.ts +2 -2
  427. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-graph.ts +152 -152
  428. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-hash.ts +10 -10
  429. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-set.ts +69 -69
  430. package/src/components/Excel/ExcelFile/ExcelFileComponents/index.ts +49 -49
  431. package/src/components/Excel/ExcelFile/ExcelFileComponents/matrix.ts +382 -382
  432. package/src/components/Excel/ExcelFile/ExcelFileComponents/point-range.ts +82 -82
  433. package/src/components/Excel/ExcelFile/ExcelFileComponents/point.ts +15 -15
  434. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +673 -673
  435. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +819 -819
  436. package/src/components/Excel/ExcelFile/ExcelFileComponents/selection.ts +257 -257
  437. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +255 -255
  438. package/src/components/Excel/ExcelFile/ExcelFileComponents/typings/fast-formula-parser.d.ts +58 -58
  439. package/src/components/Excel/ExcelFile/ExcelFileComponents/use-dispatch.ts +8 -8
  440. package/src/components/Excel/ExcelFile/ExcelFileComponents/use-selector.ts +9 -9
  441. package/src/components/Excel/ExcelFile/ExcelFileComponents/util.ts +172 -172
  442. package/src/components/Excel/ExcelFile.stories.tsx +167 -167
  443. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +96 -96
  444. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +397 -397
  445. package/src/components/Excel/Types.ts +196 -196
  446. package/src/components/Excel/dataConversion.ts +173 -173
  447. package/src/components/Excel/index.ts +1 -1
  448. package/src/components/ExpandableMenu/ExpandableMenu.scss +110 -110
  449. package/src/components/ExpandableMenu/ExpandableMenu.stories.tsx +67 -67
  450. package/src/components/ExpandableMenu/ExpandableMenu.tsx +101 -101
  451. package/src/components/ExpandableMenu/index.ts +1 -1
  452. package/src/components/ExpandableMenu/types.ts +34 -34
  453. package/src/components/FF_Captcha/Recaptcha.scss +10 -10
  454. package/src/components/FF_Captcha/Recaptcha.tsx +40 -40
  455. package/src/components/FF_Captcha/captcha.stories.tsx +40 -40
  456. package/src/components/FF_Captcha/types.ts +22 -22
  457. package/src/components/FieldSet/FieldSet.scss +9 -9
  458. package/src/components/FieldSet/FieldSet.stories.tsx +103 -103
  459. package/src/components/FieldSet/FieldSet.tsx +29 -29
  460. package/src/components/FieldSet/index.ts +1 -1
  461. package/src/components/FieldSet/types.ts +8 -8
  462. package/src/components/FileDropzone/Dropzone.tsx +57 -57
  463. package/src/components/FileDropzone/FileDropzone.scss +135 -135
  464. package/src/components/FileDropzone/FileDropzone.stories.tsx +98 -98
  465. package/src/components/FileDropzone/FileDropzone.tsx +111 -111
  466. package/src/components/FileDropzone/FilePreview.tsx +77 -77
  467. package/src/components/FileDropzone/index.ts +1 -1
  468. package/src/components/FileDropzone/types.ts +126 -126
  469. package/src/components/Form/Form.d.ts +2 -2
  470. package/src/components/Form/Form.scss +158 -158
  471. package/src/components/Form/Form.stories.tsx +508 -508
  472. package/src/components/Form/Form.ts +2 -2
  473. package/src/components/Form/Forms.tsx +41 -41
  474. package/src/components/Form/validation.json +29 -29
  475. package/src/components/GridLayout/GridLayout.scss +69 -69
  476. package/src/components/GridLayout/GridLayout.stories.tsx +90 -90
  477. package/src/components/GridLayout/GridLayout.tsx +39 -39
  478. package/src/components/GridLayout/GridLayoutStory.scss +25 -25
  479. package/src/components/GridLayout/types.ts +84 -84
  480. package/src/components/HighlightText/HighlightText.scss +3 -3
  481. package/src/components/HighlightText/HighlightText.stories.tsx +22 -22
  482. package/src/components/HighlightText/HighlightText.tsx +33 -33
  483. package/src/components/HighlightText/index.ts +1 -1
  484. package/src/components/HighlightText/types.ts +4 -4
  485. package/src/components/Icon/Icon.stories.tsx +65 -65
  486. package/src/components/Icon/Icon.tsx +88 -88
  487. package/src/components/Icon/Icons.scss +50 -50
  488. package/src/components/Icon/iconList.ts +464 -462
  489. package/src/components/Icon/index.ts +1 -1
  490. package/src/components/Icon/types.ts +14 -14
  491. package/src/components/IconButton/IconButton.scss +54 -54
  492. package/src/components/IconButton/IconButton.stories.tsx +33 -33
  493. package/src/components/IconButton/IconButton.tsx +36 -36
  494. package/src/components/IconButton/index.ts +1 -1
  495. package/src/components/IconButton/types.ts +6 -6
  496. package/src/components/IconRadioGroup/IconRadioGroup.scss +63 -63
  497. package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx +108 -108
  498. package/src/components/IconRadioGroup/IconRadioGroup.tsx +73 -73
  499. package/src/components/IconRadioGroup/index.ts +1 -1
  500. package/src/components/IconRadioGroup/type.ts +49 -49
  501. package/src/components/Input/Input.scss +159 -159
  502. package/src/components/Input/Input.stories.tsx +141 -141
  503. package/src/components/Input/Input.tsx +114 -103
  504. package/src/components/Input/types.ts +85 -85
  505. package/src/components/InputWithDropdown/InputWithDropdown.scss +213 -213
  506. package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx +169 -169
  507. package/src/components/InputWithDropdown/InputWithDropdown.tsx +122 -122
  508. package/src/components/InputWithDropdown/index.ts +1 -1
  509. package/src/components/InputWithDropdown/types.ts +113 -113
  510. package/src/components/LabelEditTextField/LabelEditTextField.scss +86 -86
  511. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +192 -192
  512. package/src/components/LabelEditTextField/LabelEditTextField.tsx +246 -246
  513. package/src/components/LabelEditTextField/index.ts +1 -1
  514. package/src/components/LabelEditTextField/types.ts +46 -46
  515. package/src/components/LazyLoad/LazyLoad.d.ts +3 -3
  516. package/src/components/LazyLoad/LazyLoad.stories.tsx +33 -33
  517. package/src/components/LazyLoad/LazyLoad.ts +2 -2
  518. package/src/components/LazyLoad/LazyLoading.tsx +19 -19
  519. package/src/components/LazyLoad/index.ts +1 -1
  520. package/src/components/MachineInputField/MachineInputField.scss +59 -59
  521. package/src/components/MachineInputField/MachineInputField.stories.tsx +32 -32
  522. package/src/components/MachineInputField/MachineInputField.tsx +87 -87
  523. package/src/components/MachineInputField/index.ts +1 -1
  524. package/src/components/MachineInputField/types.ts +13 -13
  525. package/src/components/MenuOption/MenuOption.scss +97 -97
  526. package/src/components/MenuOption/MenuOption.stories.tsx +157 -157
  527. package/src/components/MenuOption/MenuOption.tsx +219 -219
  528. package/src/components/MenuOption/types.ts +228 -228
  529. package/src/components/MiniModal/MiniModal.scss +170 -170
  530. package/src/components/MiniModal/MiniModal.stories.tsx +735 -735
  531. package/src/components/MiniModal/MiniModal.tsx +344 -344
  532. package/src/components/MiniModal/index.ts +1 -1
  533. package/src/components/MiniModal/types.ts +123 -123
  534. package/src/components/Modal/Modal.stories.tsx +70 -69
  535. package/src/components/Modal/Modal.tsx +100 -100
  536. package/src/components/Modal/index.tsx +1 -1
  537. package/src/components/Modal/modal.scss +51 -51
  538. package/src/components/Modal/types.ts +43 -43
  539. package/src/components/ModulesChip/ModuleChip.scss +20 -20
  540. package/src/components/ModulesChip/ModuleChip.stories.tsx +41 -41
  541. package/src/components/ModulesChip/ModuleChip.tsx +31 -31
  542. package/src/components/ModulesChip/types.ts +14 -14
  543. package/src/components/MultiSelect/Dropdown.scss +78 -78
  544. package/src/components/MultiSelect/Dropdown.tsx +135 -135
  545. package/src/components/MultiSelect/MultiSelect.scss +217 -217
  546. package/src/components/MultiSelect/MultiSelect.stories.tsx +273 -273
  547. package/src/components/MultiSelect/MultiSelect.tsx +472 -472
  548. package/src/components/MultiSelect/MultiSelectTypes.ts +47 -47
  549. package/src/components/MultiSelect/dropdownTypes.ts +19 -19
  550. package/src/components/MultiSelect/index.ts +1 -1
  551. package/src/components/NLPInput/NLPInput.scss +246 -246
  552. package/src/components/NLPInput/NlpInput.stories.tsx +136 -136
  553. package/src/components/NLPInput/NlpInput.tsx +374 -374
  554. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +60 -60
  555. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +83 -83
  556. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +180 -180
  557. package/src/components/NLPInput/index.ts +1 -1
  558. package/src/components/NLPInput/type.tsx +124 -124
  559. package/src/components/Paper/Paper.scss +13 -13
  560. package/src/components/Paper/Paper.stories.tsx +77 -77
  561. package/src/components/Paper/Paper.tsx +14 -14
  562. package/src/components/Paper/types.ts +19 -19
  563. package/src/components/PopUpModal/PopUpModal.scss +36 -36
  564. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -61
  565. package/src/components/PopUpModal/PopUpModal.tsx +85 -85
  566. package/src/components/PopUpModal/types.ts +13 -13
  567. package/src/components/RadioButton/RadioButton.scss +106 -106
  568. package/src/components/RadioButton/RadioButton.stories.tsx +43 -43
  569. package/src/components/RadioButton/RadioButton.tsx +41 -41
  570. package/src/components/RadioButton/index.ts +1 -1
  571. package/src/components/RadioButton/radioButtonTypes.tsx +62 -62
  572. package/src/components/RadioGroup/RadioGroup.scss +11 -11
  573. package/src/components/RadioGroup/RadioGroup.stories.tsx +150 -150
  574. package/src/components/RadioGroup/RadioGroup.tsx +49 -49
  575. package/src/components/RadioGroup/index.ts +1 -1
  576. package/src/components/RadioGroup/radioGroupTypes.tsx +96 -96
  577. package/src/components/Search/Search.scss +103 -103
  578. package/src/components/Search/Search.stories.tsx +26 -26
  579. package/src/components/Search/Search.tsx +127 -127
  580. package/src/components/Search/index.ts +1 -1
  581. package/src/components/Search/types.ts +15 -15
  582. package/src/components/Select/Select.scss +213 -213
  583. package/src/components/Select/Select.stories.tsx +355 -355
  584. package/src/components/Select/Select.tsx +278 -278
  585. package/src/components/Select/components/Dropdown.scss +61 -61
  586. package/src/components/Select/components/Dropdown.tsx +140 -140
  587. package/src/components/Select/components/types.ts +24 -24
  588. package/src/components/Select/index.ts +1 -1
  589. package/src/components/Select/types.ts +134 -134
  590. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +128 -128
  591. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +56 -56
  592. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +167 -167
  593. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +51 -51
  594. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +107 -107
  595. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +5 -5
  596. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +190 -190
  597. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +236 -236
  598. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +25 -25
  599. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.scss +3 -3
  600. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +68 -68
  601. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +17 -17
  602. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +31 -31
  603. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +85 -85
  604. package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +4 -4
  605. package/src/components/SequentialConnectingBranch/index.ts +1 -1
  606. package/src/components/SequentialConnectingBranch/types.ts +60 -60
  607. package/src/components/StateDropdown/StateDropdown.stories.tsx +104 -104
  608. package/src/components/StateDropdown/StateDropdown.tsx +245 -245
  609. package/src/components/StateDropdown/StateDropdownTypes.tsx +27 -27
  610. package/src/components/StatusButton/StatusButton.scss +90 -90
  611. package/src/components/StatusButton/StatusButton.stories.tsx +91 -91
  612. package/src/components/StatusButton/StatusButton.tsx +46 -46
  613. package/src/components/StatusButton/index.ts +1 -1
  614. package/src/components/StatusButton/types.ts +45 -45
  615. package/src/components/StatusCard/StatusCard.scss +94 -94
  616. package/src/components/StatusCard/StatusCard.stories.tsx +58 -58
  617. package/src/components/StatusCard/StatusCard.tsx +49 -49
  618. package/src/components/StatusCard/index.ts +1 -1
  619. package/src/components/StatusCard/types.ts +10 -10
  620. package/src/components/Table/Table.scss +116 -116
  621. package/src/components/Table/Table.stories.tsx +373 -373
  622. package/src/components/Table/Table.tsx +178 -178
  623. package/src/components/Table/Types.ts +124 -124
  624. package/src/components/Table/index.ts +1 -1
  625. package/src/components/TableTree/Components/TableBody.tsx +35 -35
  626. package/src/components/TableTree/Components/TableCell.tsx +59 -59
  627. package/src/components/TableTree/Components/TableHead.tsx +39 -39
  628. package/src/components/TableTree/Components/TableRow.tsx +37 -37
  629. package/src/components/TableTree/TableTree.scss +205 -205
  630. package/src/components/TableTree/TableTree.stories.tsx +179 -179
  631. package/src/components/TableTree/TableTree.tsx +245 -245
  632. package/src/components/TableTree/TableTreeStories.scss +22 -22
  633. package/src/components/TableTree/Utils/getAllChildIds.ts +12 -12
  634. package/src/components/TableTree/data.ts +322 -322
  635. package/src/components/TableTree/index.ts +1 -1
  636. package/src/components/TableTree/types.ts +68 -68
  637. package/src/components/Tabs/Tabs.scss +79 -79
  638. package/src/components/Tabs/Tabs.stories.tsx +133 -133
  639. package/src/components/Tabs/Tabs.tsx +61 -61
  640. package/src/components/Tabs/index.ts +1 -1
  641. package/src/components/Tabs/types.ts +48 -48
  642. package/src/components/TextArea/Textarea.scss +144 -144
  643. package/src/components/TextArea/Textarea.stories.tsx +92 -92
  644. package/src/components/TextArea/Textarea.tsx +84 -84
  645. package/src/components/TextArea/Types.ts +82 -82
  646. package/src/components/TextArea/index.tsx +1 -1
  647. package/src/components/ThemeProvider/ThemeProvider.tsx +27 -27
  648. package/src/components/ThemeProvider/index.ts +1 -1
  649. package/src/components/ThemeProvider/types.ts +14 -14
  650. package/src/components/Toast/Toast.scss +121 -121
  651. package/src/components/Toast/Toast.stories.tsx +144 -144
  652. package/src/components/Toast/Toast.tsx +117 -117
  653. package/src/components/Toast/index.ts +1 -1
  654. package/src/components/Toast/types.ts +27 -27
  655. package/src/components/Toastify/Toastify.stories.tsx +71 -71
  656. package/src/components/Toastify/Toastify.tsx +94 -94
  657. package/src/components/Toastify/index.ts +1 -1
  658. package/src/components/Toastify/types.ts +9 -9
  659. package/src/components/Toggle/Toggle.scss +133 -133
  660. package/src/components/Toggle/Toggle.stories.tsx +132 -132
  661. package/src/components/Toggle/Toggle.tsx +96 -96
  662. package/src/components/Toggle/index.ts +1 -1
  663. package/src/components/Toggle/types.ts +43 -43
  664. package/src/components/ToggleSwitch/ToggleSwitch.scss +58 -58
  665. package/src/components/ToggleSwitch/ToggleSwitch.stories.tsx +52 -52
  666. package/src/components/ToggleSwitch/ToggleSwitch.tsx +30 -30
  667. package/src/components/ToggleSwitch/index.ts +1 -1
  668. package/src/components/Tooltip/Tooltip.scss +27 -27
  669. package/src/components/Tooltip/Tooltip.stories.tsx +98 -98
  670. package/src/components/Tooltip/Tooltip.tsx +194 -194
  671. package/src/components/Tooltip/index.ts +1 -1
  672. package/src/components/Tooltip/types.ts +66 -66
  673. package/src/components/Typography/Typography.scss +25 -25
  674. package/src/components/Typography/Typography.stories.tsx +59 -59
  675. package/src/components/Typography/Typography.tsx +41 -41
  676. package/src/components/Typography/index.ts +1 -1
  677. package/src/components/Typography/types.ts +57 -57
  678. package/src/components/VariableInput/VariableInput.scss +127 -127
  679. package/src/components/VariableInput/VariableInput.stories.tsx +32 -32
  680. package/src/components/VariableInput/VariableInput.tsx +352 -352
  681. package/src/components/VariableInput/types.ts +56 -56
  682. package/src/hooks/keyboardevents/useEscKeyEvent.tsx +30 -30
  683. package/src/hooks/useClickOutside.tsx +30 -30
  684. package/src/hooks/useFileDropzone.tsx +274 -274
  685. package/src/hooks/usePortalPosition.tsx +53 -53
  686. package/src/hooks/useTheme.tsx +13 -13
  687. package/src/index.ts +193 -189
  688. package/src/utils/TableCell/TableCell.ts +16 -16
  689. package/src/utils/capitalize/capitalize.stories.tsx +44 -44
  690. package/src/utils/capitalize/capitalize.tsx +4 -4
  691. package/src/utils/checkDuplicates/CheckDuplicates.stories.tsx +40 -0
  692. package/src/utils/checkDuplicates/checkDuplicates.ts +13 -0
  693. package/src/utils/checkEmpty/checkEmpty.stories.tsx +34 -34
  694. package/src/utils/checkEmpty/checkEmpty.ts +24 -24
  695. package/src/utils/compareArrays/compareArrays.stories.tsx +62 -62
  696. package/src/utils/compareArrays/compareArrays.ts +31 -31
  697. package/src/utils/compareObjects/compareObjects.stories.tsx +51 -51
  698. package/src/utils/compareObjects/compareObjects.ts +53 -53
  699. package/src/utils/debounce/debounce.stories.tsx +81 -81
  700. package/src/utils/debounce/debounce.ts +28 -28
  701. package/src/utils/downloadFile/saveFileFromBlob.stories.tsx +62 -62
  702. package/src/utils/downloadFile/saveFileFromBlob.ts +40 -40
  703. package/src/utils/ffID/ffID.stories.tsx +35 -35
  704. package/src/utils/ffID/ffid.ts +7 -7
  705. package/src/utils/findAndInsert/findAndInsert.stories.tsx +119 -119
  706. package/src/utils/findAndInsert/findAndInsert.ts +49 -49
  707. package/src/utils/getEncryptedData/getEncryptedData.stories.tsx +55 -55
  708. package/src/utils/getEncryptedData/getEncryptedData.ts +8 -8
  709. package/src/utils/getExtension/getExtension.stories.tsx +23 -23
  710. package/src/utils/getExtension/getExtension.ts +28 -28
  711. package/src/utils/getSelectOptionValue/getSelectOptionValue.ts +31 -31
  712. package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +72 -72
  713. package/src/utils/getSequentialPayload/getSequentialPayload.ts +16 -16
  714. package/src/utils/getSequentialPayload/types.ts +32 -32
  715. package/src/utils/throttle/throttle.stories.tsx +100 -100
  716. package/src/utils/throttle/throttle.ts +33 -33
  717. package/src/utils/truncateText/truncateText.stories.tsx +37 -37
  718. package/src/utils/truncateText/truncateText.ts +4 -4
  719. package/tsconfig.json +55 -55
  720. package/vite.config.js +14 -14
  721. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  722. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  723. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  724. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  725. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  726. package/lib/components/TableTree/TableTree copy.d.ts +0 -25
@@ -1,479 +1,479 @@
1
- import * as React from 'react';
2
- import classNames from 'classnames';
3
- import * as Types from './types';
4
- import * as Actions from './actions';
5
- import * as Matrix from './matrix';
6
- import * as Point from './point';
7
- import { Selection } from './selection';
8
- import reducer, { INITIAL_STATE } from './reducer';
9
- import context from './context';
10
- import { Model, createFormulaParser } from './engine';
11
- import {
12
- range,
13
- readTextFromClipboard,
14
- writeTextToClipboard,
15
- calculateSpreadsheetSize,
16
- getCSV,
17
- shouldHandleClipboardEvent,
18
- } from './util';
19
-
20
- import DefaultTable from './Table';
21
- import DefaultRow from './Row';
22
- import DefaultHeaderRow from './HeaderRow';
23
- import DefaultCornerIndicator, {
24
- enhance as enhanceCornerIndicator,
25
- } from './CornerIndicator';
26
- import DefaultColumnIndicator, {
27
- enhance as enhanceColumnIndicator,
28
- } from './ColumnIndicator';
29
- import DefaultRowIndicator, {
30
- enhance as enhanceRowIndicator,
31
- } from './RowIndicator';
32
- import { Cell as DefaultCell, enhance as enhanceCell } from './Cell';
33
- import DefaultDataViewer from './DataViewer';
34
- import DefaultDataEditor from './DataEditor';
35
- import ActiveCell from './ActiveCell';
36
- import Selected from './Selected';
37
- import Copied from './Copied';
38
- import './Spreadsheet.scss';
39
- import ExcelToolBar from '../../ExcelToolBar/ExcelToolBar';
40
- import { hasKeyDownHandler } from './reducerFunctions';
41
-
42
- /** The Spreadsheet component props */
43
- export type Props<CellType extends Types.CellBase> = {
44
- /** The spreadsheet's data */
45
- data: Matrix.Matrix<CellType>;
46
- /** Class name to be added to the spreadsheet's root element */
47
- className?: string;
48
-
49
- createFormulaParser?: Types.CreateFormulaParser;
50
- /**
51
- * Labels to use in column indicators.
52
- * @defaultValue alphabetical labels.
53
- */
54
- columnLabels?: string[];
55
- /**
56
- * Labels to use in row indicators.
57
- * @defaultValue row index labels.
58
- */
59
- rowLabels?: string[];
60
- /**
61
- * If set to true, hides the row indicators of the spreadsheet.
62
- * @defaultValue `false`.
63
- */
64
- hideRowIndicators?: boolean;
65
- /**
66
- * If set to true, hides the column indicators of the spreadsheet.
67
- * @defaultValue `false`.
68
- */
69
- hideColumnIndicators?: boolean;
70
- /** The selected cells in the worksheet. */
71
- selected?: Selection;
72
- // Custom Components
73
- /** Component rendered above each column. */
74
- ColumnIndicator?: Types.ColumnIndicatorComponent;
75
- /** Component rendered in the corner of row and column indicators. */
76
- CornerIndicator?: Types.CornerIndicatorComponent;
77
- /** Component rendered next to each row. */
78
- RowIndicator?: Types.RowIndicatorComponent;
79
- /** The Spreadsheet's table component. */
80
- Table?: Types.TableComponent;
81
- /** The Spreadsheet's row component. */
82
- Row?: Types.RowComponent;
83
- /** The spreadsheet's header row component */
84
- HeaderRow?: Types.HeaderRowComponent;
85
- /** The Spreadsheet's cell component. */
86
- Cell?: Types.CellComponent<CellType>;
87
- /** Component rendered for cells in view mode. */
88
- DataViewer?: Types.DataViewerComponent<CellType>;
89
- /** Component rendered for cells in edit mode. */
90
- DataEditor?: Types.DataEditorComponent<CellType>;
91
- // Handlers
92
- /** Callback called on key down inside the spreadsheet. */
93
- onKeyDown?: (event: React.KeyboardEvent) => void;
94
- /** Callback called when the Spreadsheet's selection changes. */
95
- onSelect?: (selected: Selection) => void;
96
- /** Callback called when Spreadsheet's active cell changes. */
97
- onActivate?: (active: Point.Point) => void;
98
- /** Callback called when the Spreadsheet's evaluated data changes. */
99
- onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
100
- setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
101
- };
102
-
103
- /**
104
- * The Spreadsheet component
105
- */
106
- const Spreadsheet = <CellType extends Types.CellBase>(
107
- props: Props<CellType>
108
- ): React.ReactElement => {
109
- const {
110
- className,
111
- columnLabels,
112
- rowLabels,
113
- onKeyDown,
114
- Table = DefaultTable,
115
- Row = DefaultRow,
116
- HeaderRow = DefaultHeaderRow,
117
- DataEditor = DefaultDataEditor,
118
- DataViewer = DefaultDataViewer,
119
- onEvaluatedDataChange = () => {},
120
- } = props;
121
- type State = Types.StoreState<CellType>;
122
-
123
- const initialState = React.useMemo(() => {
124
- const createParser = (props.createFormulaParser ||
125
- createFormulaParser) as Types.CreateFormulaParser;
126
- const model = new Model(createParser, props.data);
127
- return {
128
- ...INITIAL_STATE,
129
- model,
130
- selected: props.selected || INITIAL_STATE.selected,
131
- } as State;
132
- }, [props.createFormulaParser, props.data, props.selected]);
133
-
134
- const reducerElements = React.useReducer(
135
- reducer as unknown as React.Reducer<State, Actions.Action>,
136
- initialState
137
- );
138
- const [state, dispatch] = reducerElements;
139
-
140
- const size = React.useMemo(() => {
141
- return calculateSpreadsheetSize(state.model.data, rowLabels, columnLabels);
142
- }, [state.model.data, rowLabels, columnLabels]);
143
-
144
- const mode = state.mode;
145
-
146
- const rootRef = React.useRef<HTMLDivElement>(null);
147
-
148
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
149
- const useAction = <T extends (...args: any[]) => Actions.Action>(
150
- action: T
151
- ) => {
152
- return React.useCallback(
153
- (...args: Parameters<T>) => dispatch(action(...args)),
154
- [action]
155
- );
156
- };
157
-
158
- const cut = useAction(Actions.cut);
159
- const copy = useAction(Actions.copy);
160
- const paste = useAction(Actions.paste);
161
- const onKeyDownAction = useAction(Actions.keyDown);
162
- const onDragStart = useAction(Actions.dragStart);
163
- const onDragEnd = useAction(Actions.dragEnd);
164
- const setData = useAction(Actions.setData);
165
- const setCreateFormulaParser = useAction(Actions.setCreateFormulaParser);
166
- const setSelection = useAction(Actions.setSelection);
167
- const onBold = useAction(Actions.bold);
168
- const onItalic = useAction(Actions.italic);
169
- const setUnderlineType = useAction(Actions.underlineType);
170
- const setTextAlign = useAction(Actions.textAlign);
171
- const setFontSize = useAction(Actions.fontSize);
172
- const setFontFamily = useAction(Actions.fontFamily);
173
- const setBorderType = useAction(Actions.borderType);
174
- const setColor = useAction(Actions.color);
175
- const setBackgroundColor = useAction(Actions.backgroundStyle);
176
- const setFormatePainter = useAction(Actions.formatePainter);
177
-
178
- const addRowTop = useAction(Actions.addRowTop);
179
- const addColumnLeft = useAction(Actions.addColumnLeft);
180
- const deleteRow = useAction(Actions.deleteRow);
181
- const deleteColumn = useAction(Actions.deleteColumn);
182
-
183
- const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
184
- state.model.evaluatedData
185
- );
186
- React.useEffect(() => {
187
- if (state?.model?.evaluatedData !== prevEvaluatedDataRef?.current) {
188
- onEvaluatedDataChange(state?.model?.evaluatedData);
189
- }
190
-
191
- prevEvaluatedDataRef.current = state.model.evaluatedData;
192
- }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
193
-
194
- // Update selection when props.selected changes
195
- const prevSelectedPropRef = React.useRef<Selection | undefined>(
196
- props.selected
197
- );
198
- React.useEffect(() => {
199
- if (
200
- props.selected &&
201
- prevSelectedPropRef.current &&
202
- !props.selected.equals(prevSelectedPropRef.current)
203
- ) {
204
- setSelection(props.selected);
205
- }
206
- prevSelectedPropRef.current = props.selected;
207
- }, [props.selected, setSelection]);
208
-
209
- // Update data when props.data changes
210
- let prevDataPropRef = React.useRef<Matrix.Matrix<CellType> | undefined>(
211
- props.data
212
- );
213
- React.useEffect(() => {
214
- if (props.data !== prevDataPropRef.current) {
215
- setData(props.data);
216
- }
217
- prevDataPropRef.current = props.data;
218
- }, [props.data, setData]);
219
-
220
- const prevCreateFormulaParserPropRef = React.useRef<
221
- Types.CreateFormulaParser | undefined
222
- >(props.createFormulaParser);
223
- React.useEffect(() => {
224
- if (
225
- props.createFormulaParser !== prevCreateFormulaParserPropRef.current &&
226
- props.createFormulaParser
227
- )
228
- setCreateFormulaParser(props.createFormulaParser);
229
- prevCreateFormulaParserPropRef.current = props.createFormulaParser;
230
- }, [props.createFormulaParser, setCreateFormulaParser]);
231
-
232
- const writeDataToClipboard = React.useCallback(
233
- (event: ClipboardEvent): void => {
234
- const { model, selected } = state;
235
- const { data } = model;
236
- const range = selected.toRange(data);
237
- if (range) {
238
- const selectedData = Matrix.slice(range.start, range.end, data);
239
- const csv = getCSV(selectedData);
240
- writeTextToClipboard(event, csv);
241
- }
242
- },
243
- [state]
244
- );
245
-
246
- const handleCut = React.useCallback(
247
- (event: ClipboardEvent) => {
248
- if (shouldHandleClipboardEvent(rootRef.current, mode)) {
249
- event.preventDefault();
250
- event.stopPropagation();
251
- writeDataToClipboard(event);
252
- cut();
253
- }
254
- },
255
- [mode, writeDataToClipboard, cut]
256
- );
257
-
258
- const handleCopy = React.useCallback(
259
- (event: ClipboardEvent) => {
260
- if (shouldHandleClipboardEvent(rootRef.current, mode)) {
261
- event.preventDefault();
262
- event.stopPropagation();
263
- writeDataToClipboard(event);
264
- copy();
265
- }
266
- },
267
- [mode, writeDataToClipboard, copy]
268
- );
269
-
270
- const handlePaste = React.useCallback(
271
- (event: ClipboardEvent) => {
272
- if (shouldHandleClipboardEvent(rootRef.current, mode)) {
273
- event.preventDefault();
274
- event.stopPropagation();
275
- if (event.clipboardData) {
276
- const text = readTextFromClipboard(event);
277
- paste(text);
278
- }
279
- }
280
- },
281
- [mode, paste]
282
- );
283
-
284
- const handleKeyDown = React.useCallback(
285
- (event: React.KeyboardEvent) => {
286
- event.persist();
287
- if (onKeyDown) {
288
- onKeyDown(event);
289
- }
290
- if (!event.defaultPrevented) {
291
- if (hasKeyDownHandler(state, event)) {
292
- event.nativeEvent.preventDefault();
293
- }
294
- onKeyDownAction(event);
295
- }
296
- },
297
- [state, onKeyDown, onKeyDownAction]
298
- );
299
-
300
- const handleMouseUp = React.useCallback(() => {
301
- onDragEnd();
302
- document.removeEventListener('mouseup', handleMouseUp);
303
- }, [onDragEnd]);
304
-
305
- const handleMouseMove = React.useCallback(
306
- (event: React.MouseEvent) => {
307
- if (!state.dragging && event.buttons === 1) {
308
- onDragStart();
309
- document.addEventListener('mouseup', handleMouseUp);
310
- }
311
- },
312
- [state, onDragStart, handleMouseUp]
313
- );
314
-
315
- const Cell = React.useMemo(() => {
316
- // @ts-ignore
317
- return enhanceCell(props.Cell || DefaultCell);
318
- }, [props.Cell]);
319
-
320
- const CornerIndicator = React.useMemo(
321
- () =>
322
- enhanceCornerIndicator(props.CornerIndicator || DefaultCornerIndicator),
323
- [props.CornerIndicator]
324
- );
325
-
326
- const RowIndicator = React.useMemo(
327
- () => enhanceRowIndicator(props.RowIndicator || DefaultRowIndicator),
328
- [props.RowIndicator]
329
- );
330
-
331
- const ColumnIndicator = React.useMemo(
332
- () =>
333
- enhanceColumnIndicator(props.ColumnIndicator || DefaultColumnIndicator),
334
- [props.ColumnIndicator]
335
- );
336
-
337
- React.useEffect(() => {
338
- document.addEventListener('cut', handleCut);
339
- document.addEventListener('copy', handleCopy);
340
- document.addEventListener('paste', handlePaste);
341
-
342
- return () => {
343
- document.removeEventListener('cut', handleCut);
344
- document.removeEventListener('copy', handleCopy);
345
- document.removeEventListener('paste', handlePaste);
346
- };
347
- }, [handleCut, handleCopy, handlePaste]);
348
-
349
- const tableNode = React.useMemo(
350
- () => (
351
- <Table columns={size.columns}>
352
- <HeaderRow>
353
- {<CornerIndicator />}
354
- {range(size.columns).map((columnNumber) =>
355
- columnLabels ? (
356
- <ColumnIndicator
357
- key={columnNumber}
358
- column={columnNumber}
359
- setContextMenu={props.setContextMenu}
360
- label={
361
- columnNumber in columnLabels
362
- ? columnLabels[columnNumber]
363
- : null
364
- }
365
- deleteColumn={deleteColumn}
366
- addColumnLeft={addColumnLeft}
367
- data={props.data}
368
- />
369
- ) : (
370
- <ColumnIndicator
371
- key={columnNumber}
372
- column={columnNumber}
373
- setContextMenu={props.setContextMenu}
374
- deleteColumn={deleteColumn}
375
- addColumnLeft={addColumnLeft}
376
- data={props.data}
377
- />
378
- )
379
- )}
380
- </HeaderRow>
381
- {range(size.rows).map((rowNumber) => (
382
- <Row key={rowNumber} row={rowNumber}>
383
- {rowLabels ? (
384
- <RowIndicator
385
- key={rowNumber}
386
- label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
387
- row={rowNumber}
388
- addRowTop={addRowTop}
389
- setContextMenu={props.setContextMenu}
390
- deleteRow={deleteRow}
391
- data={props.data}
392
- />
393
- ) : (
394
- <RowIndicator
395
- key={rowNumber}
396
- row={rowNumber}
397
- addRowTop={addRowTop}
398
- setContextMenu={props.setContextMenu}
399
- deleteRow={deleteRow}
400
- data={props.data}
401
- />
402
- )}
403
- {range(size.columns).map((columnNumber) => (
404
- <Cell
405
- key={columnNumber}
406
- row={rowNumber}
407
- column={columnNumber}
408
- setContextMenu={props.setContextMenu}
409
- // @ts-ignore
410
- DataViewer={DataViewer}
411
- />
412
- ))}
413
- </Row>
414
- ))}
415
- </Table>
416
- ),
417
- [
418
- Table,
419
- size.rows,
420
- size.columns,
421
- Row,
422
- HeaderRow,
423
- CornerIndicator,
424
- columnLabels,
425
- ColumnIndicator,
426
- rowLabels,
427
- RowIndicator,
428
- Cell,
429
- DataViewer,
430
- ]
431
- );
432
-
433
- const activeCellNode = React.useMemo(
434
- () => (
435
- <ActiveCell
436
- // @ts-ignore
437
- DataEditor={DataEditor}
438
- />
439
- ),
440
- [DataEditor]
441
- );
442
-
443
- const rootNode = React.useMemo(
444
- () => (
445
- <div className="ff-excel">
446
- <ExcelToolBar
447
- onBold={onBold}
448
- onItalic={onItalic}
449
- setUnderlineType={setUnderlineType}
450
- setColor={setColor}
451
- setBorderType={setBorderType}
452
- setFontSize={setFontSize}
453
- setFontFamily={setFontFamily}
454
- setTextAlign={setTextAlign}
455
- setBackgroundColor={setBackgroundColor}
456
- setFormatePainter={setFormatePainter}
457
- />
458
- <div
459
- ref={rootRef}
460
- className={classNames('ff-spreadsheet', className)}
461
- onKeyDown={handleKeyDown}
462
- onMouseMove={handleMouseMove}
463
- >
464
- {tableNode}
465
- {activeCellNode}
466
- <Selected />
467
- <Copied />
468
- </div>
469
- </div>
470
- ),
471
- [className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]
472
- );
473
-
474
- return (
475
- <context.Provider value={reducerElements}>{rootNode}</context.Provider>
476
- );
477
- };
478
-
479
- export default Spreadsheet;
1
+ import * as React from 'react';
2
+ import classNames from 'classnames';
3
+ import * as Types from './types';
4
+ import * as Actions from './actions';
5
+ import * as Matrix from './matrix';
6
+ import * as Point from './point';
7
+ import { Selection } from './selection';
8
+ import reducer, { INITIAL_STATE } from './reducer';
9
+ import context from './context';
10
+ import { Model, createFormulaParser } from './engine';
11
+ import {
12
+ range,
13
+ readTextFromClipboard,
14
+ writeTextToClipboard,
15
+ calculateSpreadsheetSize,
16
+ getCSV,
17
+ shouldHandleClipboardEvent,
18
+ } from './util';
19
+
20
+ import DefaultTable from './Table';
21
+ import DefaultRow from './Row';
22
+ import DefaultHeaderRow from './HeaderRow';
23
+ import DefaultCornerIndicator, {
24
+ enhance as enhanceCornerIndicator,
25
+ } from './CornerIndicator';
26
+ import DefaultColumnIndicator, {
27
+ enhance as enhanceColumnIndicator,
28
+ } from './ColumnIndicator';
29
+ import DefaultRowIndicator, {
30
+ enhance as enhanceRowIndicator,
31
+ } from './RowIndicator';
32
+ import { Cell as DefaultCell, enhance as enhanceCell } from './Cell';
33
+ import DefaultDataViewer from './DataViewer';
34
+ import DefaultDataEditor from './DataEditor';
35
+ import ActiveCell from './ActiveCell';
36
+ import Selected from './Selected';
37
+ import Copied from './Copied';
38
+ import './Spreadsheet.scss';
39
+ import ExcelToolBar from '../../ExcelToolBar/ExcelToolBar';
40
+ import { hasKeyDownHandler } from './reducerFunctions';
41
+
42
+ /** The Spreadsheet component props */
43
+ export type Props<CellType extends Types.CellBase> = {
44
+ /** The spreadsheet's data */
45
+ data: Matrix.Matrix<CellType>;
46
+ /** Class name to be added to the spreadsheet's root element */
47
+ className?: string;
48
+
49
+ createFormulaParser?: Types.CreateFormulaParser;
50
+ /**
51
+ * Labels to use in column indicators.
52
+ * @defaultValue alphabetical labels.
53
+ */
54
+ columnLabels?: string[];
55
+ /**
56
+ * Labels to use in row indicators.
57
+ * @defaultValue row index labels.
58
+ */
59
+ rowLabels?: string[];
60
+ /**
61
+ * If set to true, hides the row indicators of the spreadsheet.
62
+ * @defaultValue `false`.
63
+ */
64
+ hideRowIndicators?: boolean;
65
+ /**
66
+ * If set to true, hides the column indicators of the spreadsheet.
67
+ * @defaultValue `false`.
68
+ */
69
+ hideColumnIndicators?: boolean;
70
+ /** The selected cells in the worksheet. */
71
+ selected?: Selection;
72
+ // Custom Components
73
+ /** Component rendered above each column. */
74
+ ColumnIndicator?: Types.ColumnIndicatorComponent;
75
+ /** Component rendered in the corner of row and column indicators. */
76
+ CornerIndicator?: Types.CornerIndicatorComponent;
77
+ /** Component rendered next to each row. */
78
+ RowIndicator?: Types.RowIndicatorComponent;
79
+ /** The Spreadsheet's table component. */
80
+ Table?: Types.TableComponent;
81
+ /** The Spreadsheet's row component. */
82
+ Row?: Types.RowComponent;
83
+ /** The spreadsheet's header row component */
84
+ HeaderRow?: Types.HeaderRowComponent;
85
+ /** The Spreadsheet's cell component. */
86
+ Cell?: Types.CellComponent<CellType>;
87
+ /** Component rendered for cells in view mode. */
88
+ DataViewer?: Types.DataViewerComponent<CellType>;
89
+ /** Component rendered for cells in edit mode. */
90
+ DataEditor?: Types.DataEditorComponent<CellType>;
91
+ // Handlers
92
+ /** Callback called on key down inside the spreadsheet. */
93
+ onKeyDown?: (event: React.KeyboardEvent) => void;
94
+ /** Callback called when the Spreadsheet's selection changes. */
95
+ onSelect?: (selected: Selection) => void;
96
+ /** Callback called when Spreadsheet's active cell changes. */
97
+ onActivate?: (active: Point.Point) => void;
98
+ /** Callback called when the Spreadsheet's evaluated data changes. */
99
+ onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
100
+ setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
101
+ };
102
+
103
+ /**
104
+ * The Spreadsheet component
105
+ */
106
+ const Spreadsheet = <CellType extends Types.CellBase>(
107
+ props: Props<CellType>
108
+ ): React.ReactElement => {
109
+ const {
110
+ className,
111
+ columnLabels,
112
+ rowLabels,
113
+ onKeyDown,
114
+ Table = DefaultTable,
115
+ Row = DefaultRow,
116
+ HeaderRow = DefaultHeaderRow,
117
+ DataEditor = DefaultDataEditor,
118
+ DataViewer = DefaultDataViewer,
119
+ onEvaluatedDataChange = () => {},
120
+ } = props;
121
+ type State = Types.StoreState<CellType>;
122
+
123
+ const initialState = React.useMemo(() => {
124
+ const createParser = (props.createFormulaParser ||
125
+ createFormulaParser) as Types.CreateFormulaParser;
126
+ const model = new Model(createParser, props.data);
127
+ return {
128
+ ...INITIAL_STATE,
129
+ model,
130
+ selected: props.selected || INITIAL_STATE.selected,
131
+ } as State;
132
+ }, [props.createFormulaParser, props.data, props.selected]);
133
+
134
+ const reducerElements = React.useReducer(
135
+ reducer as unknown as React.Reducer<State, Actions.Action>,
136
+ initialState
137
+ );
138
+ const [state, dispatch] = reducerElements;
139
+
140
+ const size = React.useMemo(() => {
141
+ return calculateSpreadsheetSize(state.model.data, rowLabels, columnLabels);
142
+ }, [state.model.data, rowLabels, columnLabels]);
143
+
144
+ const mode = state.mode;
145
+
146
+ const rootRef = React.useRef<HTMLDivElement>(null);
147
+
148
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
149
+ const useAction = <T extends (...args: any[]) => Actions.Action>(
150
+ action: T
151
+ ) => {
152
+ return React.useCallback(
153
+ (...args: Parameters<T>) => dispatch(action(...args)),
154
+ [action]
155
+ );
156
+ };
157
+
158
+ const cut = useAction(Actions.cut);
159
+ const copy = useAction(Actions.copy);
160
+ const paste = useAction(Actions.paste);
161
+ const onKeyDownAction = useAction(Actions.keyDown);
162
+ const onDragStart = useAction(Actions.dragStart);
163
+ const onDragEnd = useAction(Actions.dragEnd);
164
+ const setData = useAction(Actions.setData);
165
+ const setCreateFormulaParser = useAction(Actions.setCreateFormulaParser);
166
+ const setSelection = useAction(Actions.setSelection);
167
+ const onBold = useAction(Actions.bold);
168
+ const onItalic = useAction(Actions.italic);
169
+ const setUnderlineType = useAction(Actions.underlineType);
170
+ const setTextAlign = useAction(Actions.textAlign);
171
+ const setFontSize = useAction(Actions.fontSize);
172
+ const setFontFamily = useAction(Actions.fontFamily);
173
+ const setBorderType = useAction(Actions.borderType);
174
+ const setColor = useAction(Actions.color);
175
+ const setBackgroundColor = useAction(Actions.backgroundStyle);
176
+ const setFormatePainter = useAction(Actions.formatePainter);
177
+
178
+ const addRowTop = useAction(Actions.addRowTop);
179
+ const addColumnLeft = useAction(Actions.addColumnLeft);
180
+ const deleteRow = useAction(Actions.deleteRow);
181
+ const deleteColumn = useAction(Actions.deleteColumn);
182
+
183
+ const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
184
+ state.model.evaluatedData
185
+ );
186
+ React.useEffect(() => {
187
+ if (state?.model?.evaluatedData !== prevEvaluatedDataRef?.current) {
188
+ onEvaluatedDataChange(state?.model?.evaluatedData);
189
+ }
190
+
191
+ prevEvaluatedDataRef.current = state.model.evaluatedData;
192
+ }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
193
+
194
+ // Update selection when props.selected changes
195
+ const prevSelectedPropRef = React.useRef<Selection | undefined>(
196
+ props.selected
197
+ );
198
+ React.useEffect(() => {
199
+ if (
200
+ props.selected &&
201
+ prevSelectedPropRef.current &&
202
+ !props.selected.equals(prevSelectedPropRef.current)
203
+ ) {
204
+ setSelection(props.selected);
205
+ }
206
+ prevSelectedPropRef.current = props.selected;
207
+ }, [props.selected, setSelection]);
208
+
209
+ // Update data when props.data changes
210
+ let prevDataPropRef = React.useRef<Matrix.Matrix<CellType> | undefined>(
211
+ props.data
212
+ );
213
+ React.useEffect(() => {
214
+ if (props.data !== prevDataPropRef.current) {
215
+ setData(props.data);
216
+ }
217
+ prevDataPropRef.current = props.data;
218
+ }, [props.data, setData]);
219
+
220
+ const prevCreateFormulaParserPropRef = React.useRef<
221
+ Types.CreateFormulaParser | undefined
222
+ >(props.createFormulaParser);
223
+ React.useEffect(() => {
224
+ if (
225
+ props.createFormulaParser !== prevCreateFormulaParserPropRef.current &&
226
+ props.createFormulaParser
227
+ )
228
+ setCreateFormulaParser(props.createFormulaParser);
229
+ prevCreateFormulaParserPropRef.current = props.createFormulaParser;
230
+ }, [props.createFormulaParser, setCreateFormulaParser]);
231
+
232
+ const writeDataToClipboard = React.useCallback(
233
+ (event: ClipboardEvent): void => {
234
+ const { model, selected } = state;
235
+ const { data } = model;
236
+ const range = selected.toRange(data);
237
+ if (range) {
238
+ const selectedData = Matrix.slice(range.start, range.end, data);
239
+ const csv = getCSV(selectedData);
240
+ writeTextToClipboard(event, csv);
241
+ }
242
+ },
243
+ [state]
244
+ );
245
+
246
+ const handleCut = React.useCallback(
247
+ (event: ClipboardEvent) => {
248
+ if (shouldHandleClipboardEvent(rootRef.current, mode)) {
249
+ event.preventDefault();
250
+ event.stopPropagation();
251
+ writeDataToClipboard(event);
252
+ cut();
253
+ }
254
+ },
255
+ [mode, writeDataToClipboard, cut]
256
+ );
257
+
258
+ const handleCopy = React.useCallback(
259
+ (event: ClipboardEvent) => {
260
+ if (shouldHandleClipboardEvent(rootRef.current, mode)) {
261
+ event.preventDefault();
262
+ event.stopPropagation();
263
+ writeDataToClipboard(event);
264
+ copy();
265
+ }
266
+ },
267
+ [mode, writeDataToClipboard, copy]
268
+ );
269
+
270
+ const handlePaste = React.useCallback(
271
+ (event: ClipboardEvent) => {
272
+ if (shouldHandleClipboardEvent(rootRef.current, mode)) {
273
+ event.preventDefault();
274
+ event.stopPropagation();
275
+ if (event.clipboardData) {
276
+ const text = readTextFromClipboard(event);
277
+ paste(text);
278
+ }
279
+ }
280
+ },
281
+ [mode, paste]
282
+ );
283
+
284
+ const handleKeyDown = React.useCallback(
285
+ (event: React.KeyboardEvent) => {
286
+ event.persist();
287
+ if (onKeyDown) {
288
+ onKeyDown(event);
289
+ }
290
+ if (!event.defaultPrevented) {
291
+ if (hasKeyDownHandler(state, event)) {
292
+ event.nativeEvent.preventDefault();
293
+ }
294
+ onKeyDownAction(event);
295
+ }
296
+ },
297
+ [state, onKeyDown, onKeyDownAction]
298
+ );
299
+
300
+ const handleMouseUp = React.useCallback(() => {
301
+ onDragEnd();
302
+ document.removeEventListener('mouseup', handleMouseUp);
303
+ }, [onDragEnd]);
304
+
305
+ const handleMouseMove = React.useCallback(
306
+ (event: React.MouseEvent) => {
307
+ if (!state.dragging && event.buttons === 1) {
308
+ onDragStart();
309
+ document.addEventListener('mouseup', handleMouseUp);
310
+ }
311
+ },
312
+ [state, onDragStart, handleMouseUp]
313
+ );
314
+
315
+ const Cell = React.useMemo(() => {
316
+ // @ts-ignore
317
+ return enhanceCell(props.Cell || DefaultCell);
318
+ }, [props.Cell]);
319
+
320
+ const CornerIndicator = React.useMemo(
321
+ () =>
322
+ enhanceCornerIndicator(props.CornerIndicator || DefaultCornerIndicator),
323
+ [props.CornerIndicator]
324
+ );
325
+
326
+ const RowIndicator = React.useMemo(
327
+ () => enhanceRowIndicator(props.RowIndicator || DefaultRowIndicator),
328
+ [props.RowIndicator]
329
+ );
330
+
331
+ const ColumnIndicator = React.useMemo(
332
+ () =>
333
+ enhanceColumnIndicator(props.ColumnIndicator || DefaultColumnIndicator),
334
+ [props.ColumnIndicator]
335
+ );
336
+
337
+ React.useEffect(() => {
338
+ document.addEventListener('cut', handleCut);
339
+ document.addEventListener('copy', handleCopy);
340
+ document.addEventListener('paste', handlePaste);
341
+
342
+ return () => {
343
+ document.removeEventListener('cut', handleCut);
344
+ document.removeEventListener('copy', handleCopy);
345
+ document.removeEventListener('paste', handlePaste);
346
+ };
347
+ }, [handleCut, handleCopy, handlePaste]);
348
+
349
+ const tableNode = React.useMemo(
350
+ () => (
351
+ <Table columns={size.columns}>
352
+ <HeaderRow>
353
+ {<CornerIndicator />}
354
+ {range(size.columns).map((columnNumber) =>
355
+ columnLabels ? (
356
+ <ColumnIndicator
357
+ key={columnNumber}
358
+ column={columnNumber}
359
+ setContextMenu={props.setContextMenu}
360
+ label={
361
+ columnNumber in columnLabels
362
+ ? columnLabels[columnNumber]
363
+ : null
364
+ }
365
+ deleteColumn={deleteColumn}
366
+ addColumnLeft={addColumnLeft}
367
+ data={props.data}
368
+ />
369
+ ) : (
370
+ <ColumnIndicator
371
+ key={columnNumber}
372
+ column={columnNumber}
373
+ setContextMenu={props.setContextMenu}
374
+ deleteColumn={deleteColumn}
375
+ addColumnLeft={addColumnLeft}
376
+ data={props.data}
377
+ />
378
+ )
379
+ )}
380
+ </HeaderRow>
381
+ {range(size.rows).map((rowNumber) => (
382
+ <Row key={rowNumber} row={rowNumber}>
383
+ {rowLabels ? (
384
+ <RowIndicator
385
+ key={rowNumber}
386
+ label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
387
+ row={rowNumber}
388
+ addRowTop={addRowTop}
389
+ setContextMenu={props.setContextMenu}
390
+ deleteRow={deleteRow}
391
+ data={props.data}
392
+ />
393
+ ) : (
394
+ <RowIndicator
395
+ key={rowNumber}
396
+ row={rowNumber}
397
+ addRowTop={addRowTop}
398
+ setContextMenu={props.setContextMenu}
399
+ deleteRow={deleteRow}
400
+ data={props.data}
401
+ />
402
+ )}
403
+ {range(size.columns).map((columnNumber) => (
404
+ <Cell
405
+ key={columnNumber}
406
+ row={rowNumber}
407
+ column={columnNumber}
408
+ setContextMenu={props.setContextMenu}
409
+ // @ts-ignore
410
+ DataViewer={DataViewer}
411
+ />
412
+ ))}
413
+ </Row>
414
+ ))}
415
+ </Table>
416
+ ),
417
+ [
418
+ Table,
419
+ size.rows,
420
+ size.columns,
421
+ Row,
422
+ HeaderRow,
423
+ CornerIndicator,
424
+ columnLabels,
425
+ ColumnIndicator,
426
+ rowLabels,
427
+ RowIndicator,
428
+ Cell,
429
+ DataViewer,
430
+ ]
431
+ );
432
+
433
+ const activeCellNode = React.useMemo(
434
+ () => (
435
+ <ActiveCell
436
+ // @ts-ignore
437
+ DataEditor={DataEditor}
438
+ />
439
+ ),
440
+ [DataEditor]
441
+ );
442
+
443
+ const rootNode = React.useMemo(
444
+ () => (
445
+ <div className="ff-excel">
446
+ <ExcelToolBar
447
+ onBold={onBold}
448
+ onItalic={onItalic}
449
+ setUnderlineType={setUnderlineType}
450
+ setColor={setColor}
451
+ setBorderType={setBorderType}
452
+ setFontSize={setFontSize}
453
+ setFontFamily={setFontFamily}
454
+ setTextAlign={setTextAlign}
455
+ setBackgroundColor={setBackgroundColor}
456
+ setFormatePainter={setFormatePainter}
457
+ />
458
+ <div
459
+ ref={rootRef}
460
+ className={classNames('ff-spreadsheet', className)}
461
+ onKeyDown={handleKeyDown}
462
+ onMouseMove={handleMouseMove}
463
+ >
464
+ {tableNode}
465
+ {activeCellNode}
466
+ <Selected />
467
+ <Copied />
468
+ </div>
469
+ </div>
470
+ ),
471
+ [className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]
472
+ );
473
+
474
+ return (
475
+ <context.Provider value={reducerElements}>{rootNode}</context.Provider>
476
+ );
477
+ };
478
+
479
+ export default Spreadsheet;