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