pixel-react 1.8.3 → 1.8.4

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