pixel-react 1.8.1 → 1.8.2

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