pixel-react 1.8.3 → 1.8.5

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 (193) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/1fb4472b34e4fe07.css +1 -0
  3. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
  4. package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
  5. package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
  6. package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
  7. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
  8. package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
  9. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  10. package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
  11. package/lib/components/Button/Button.stories.d.ts +13 -0
  12. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  13. package/lib/components/Charts/DashboardDonutChart/types.d.ts +3 -0
  14. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
  15. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  16. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  17. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
  18. package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
  19. package/lib/components/Chip/Chip.stories.d.ts +14 -0
  20. package/lib/components/ConditionalDropdown/types.d.ts +4 -0
  21. package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
  22. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
  23. package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
  24. package/lib/components/Drawer/Types.d.ts +4 -0
  25. package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +4 -0
  26. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +10 -4
  27. package/lib/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.d.ts +10 -0
  28. package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
  29. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +9 -0
  30. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +0 -2
  31. package/lib/components/Excel/Types.d.ts +14 -10
  32. package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +8 -0
  33. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  34. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  35. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  36. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  37. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  38. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  39. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  40. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  41. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  42. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  43. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  44. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  45. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
  46. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  47. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
  48. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  49. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  50. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  51. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  52. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  53. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  54. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  55. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  56. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  57. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  58. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  59. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  60. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  61. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  62. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
  63. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  64. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  65. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
  66. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
  67. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  68. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
  69. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
  70. package/lib/components/ExcelFile/Types.d.ts +129 -0
  71. package/lib/components/ExcelFile/index.d.ts +1 -0
  72. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
  73. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  74. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
  75. package/lib/components/Form/Form.stories.d.ts +7 -0
  76. package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
  77. package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
  78. package/lib/components/Icon/Icon.stories.d.ts +8 -0
  79. package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
  80. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  81. package/lib/components/Input/Input.stories.d.ts +9 -0
  82. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
  83. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +11 -0
  84. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
  85. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
  86. package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
  87. package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
  88. package/lib/components/Modal/Modal.stories.d.ts +7 -0
  89. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
  90. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +10 -0
  91. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  92. package/lib/components/Paper/Paper.stories.d.ts +11 -0
  93. package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
  94. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
  95. package/lib/components/Search/Search.stories.d.ts +6 -0
  96. package/lib/components/Select/Select.stories.d.ts +13 -0
  97. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
  98. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
  99. package/lib/components/Select/components/types.d.ts +3 -2
  100. package/lib/components/Select/types.d.ts +10 -2
  101. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
  102. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
  103. package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
  104. package/lib/components/Table/Table.stories.d.ts +13 -0
  105. package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
  106. package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
  107. package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
  108. package/lib/components/Toast/Toast.stories.d.ts +6 -0
  109. package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
  110. package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
  111. package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
  112. package/lib/components/Typography/Typography.stories.d.ts +10 -0
  113. package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
  114. package/lib/index.d.ts +47 -6
  115. package/lib/index.esm.js +5088 -2119
  116. package/lib/index.esm.js.map +1 -1
  117. package/lib/index.js +5097 -2118
  118. package/lib/index.js.map +1 -1
  119. package/lib/tsconfig.tsbuildinfo +1 -1
  120. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
  121. package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
  122. package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
  123. package/lib/utils/debounce/debounce.stories.d.ts +6 -0
  124. package/lib/utils/ffID/ffID.stories.d.ts +6 -0
  125. package/lib/utils/find/findAndInsert.d.ts +7 -0
  126. package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
  127. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
  128. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  129. package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
  130. package/lib/utils/keyBoardActionUtil/UseKeyboardActions.d.ts +2 -0
  131. package/lib/utils/keyBoardActionUtil/types.d.ts +4 -0
  132. package/lib/utils/throttle/throttle.stories.d.ts +6 -0
  133. package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
  134. package/lib/validations/regex.d.ts +5 -1
  135. package/package.json +6 -1
  136. package/src/assets/Themes/BaseTheme.scss +1 -0
  137. package/src/assets/Themes/DarkTheme.scss +1 -1
  138. package/src/assets/icons/external_user.svg +13 -0
  139. package/src/assets/icons/group_user.svg +12 -0
  140. package/src/assets/icons/single_user.svg +12 -0
  141. package/src/assets/icons/unfollow_icon.svg +3 -0
  142. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +38 -6
  143. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +10 -4
  144. package/src/components/Charts/DashboardDonutChart/types.ts +4 -1
  145. package/src/components/Charts/LineChart/LineChart.stories.tsx +27 -88
  146. package/src/components/Charts/LineChart/LineChart.tsx +138 -42
  147. package/src/components/Charts/LineChart/types.ts +1 -0
  148. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +3 -3
  149. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +47 -43
  150. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -0
  151. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +2 -1
  152. package/src/components/ConditionalDropdown/types.ts +4 -0
  153. package/src/components/Drawer/Drawer.stories.tsx +1 -0
  154. package/src/components/Drawer/Drawer.tsx +5 -1
  155. package/src/components/Drawer/Types.ts +4 -0
  156. package/src/components/Editor/Editor.scss +23 -18
  157. package/src/components/Editor/Editor.tsx +2 -2
  158. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +1 -1
  159. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +6 -2
  160. package/src/components/Excel/ExcelFile/ExcelFile.scss +45 -41
  161. package/src/components/Excel/ExcelFile/ExcelFile.tsx +33 -11
  162. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +29 -1
  163. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +0 -36
  164. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +2 -2
  165. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +1 -40
  166. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +2 -2
  167. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +3 -3
  168. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +12 -1
  169. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +3 -2
  170. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +0 -3
  171. package/src/components/Excel/ExcelFile.stories.tsx +20 -28
  172. package/src/components/Excel/Types.ts +17 -15
  173. package/src/components/Icon/iconList.ts +8 -0
  174. package/src/components/Modal/Modal.stories.tsx +7 -0
  175. package/src/components/Modal/Modal.tsx +17 -20
  176. package/src/components/Select/Select.stories.tsx +85 -0
  177. package/src/components/Select/Select.tsx +10 -2
  178. package/src/components/Select/components/Dropdown.tsx +23 -15
  179. package/src/components/Select/components/types.ts +3 -2
  180. package/src/components/Select/types.ts +12 -2
  181. package/src/index.ts +20 -0
  182. package/src/utils/keyBoardActionUtil/UseKeyboardAction.stories.tsx +53 -0
  183. package/src/utils/keyBoardActionUtil/UseKeyboardActions.tsx +20 -0
  184. package/src/utils/keyBoardActionUtil/types.ts +4 -0
  185. package/src/validations/regex.stories.tsx +24 -0
  186. package/src/validations/regex.ts +15 -0
  187. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  188. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  189. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  190. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  191. package/lib/components/TableTree/TableTree copy.d.ts +0 -25
  192. package/src/assets/images/photo.png +0 -0
  193. /package/lib/components/{Excel → ExcelFile}/ContextMenu/ContextMenu.d.ts +0 -0
@@ -19,6 +19,7 @@ const Drawer: FC<DrawerProps> = ({
19
19
  leftSecondaryButtonProps = {},
20
20
  showEditButton = false,
21
21
  onEdit = () => {},
22
+ onCollapse = () => {},
22
23
  overlay = false,
23
24
  isFooterRequired = true,
24
25
  footerContent = null,
@@ -48,7 +49,10 @@ const Drawer: FC<DrawerProps> = ({
48
49
  handleEsc(onClose);
49
50
 
50
51
  const toggleExpand = () => {
51
- setIsExpanded((prev) => !prev);
52
+ setIsExpanded((prev) => {
53
+ onCollapse(!prev);
54
+ return !prev;
55
+ });
52
56
  };
53
57
 
54
58
  const onCancel = () => {
@@ -158,4 +158,8 @@ export interface DrawerProps {
158
158
  * Custom overflow for the drawer
159
159
  */
160
160
  overflow?: string;
161
+ /**
162
+ * Callback function returns a boolean value when the drawer is collapsed.
163
+ */
164
+ onCollapse?: (value: boolean) => void;
161
165
  }
@@ -1,16 +1,13 @@
1
- /* Editor container to add padding and rounded corners */
2
- .monaco-editor {
3
- border-radius: 6px;
4
- border-top: 1px solid var(--ff-editor-border-color);
5
- border-right: 1px dashed var(--ff-editor-border-color);
6
- border-bottom: 1px dashed var(--ff-editor-border-color);
7
- border-left: 1px solid var(--ff-editor-border-color);
1
+ @mixin folding-icon-styles($color: var(--base-bg-color), $zIndex: 999999, $opacity: 1) {
2
+ color: $color !important;
3
+ fill: $color !important;
4
+ z-index: $zIndex !important;
5
+ opacity: $opacity !important;
8
6
  }
9
7
 
10
8
  /* Style for the line number gutter */
11
9
  .monaco-editor .margin {
12
10
  background-color: var(--ff-editor-gutter-color) !important;
13
- width: 32px !important;
14
11
  }
15
12
 
16
13
  /* Style for the line numbers */
@@ -34,10 +31,6 @@
34
31
  width: 100% !important;
35
32
  }
36
33
 
37
- .monaco-scrollable-element {
38
- left: 32px !important;
39
- }
40
-
41
34
  .monaco-editor .current-line-background {
42
35
  background-color: var(--ff-editor-line-bg) !important;
43
36
  }
@@ -46,11 +39,23 @@
46
39
  display: flex;
47
40
  flex-direction: column;
48
41
  gap: 10px;
49
- .ff-top-toolbar {
50
- width: 100%;
51
- display: flex;
52
- align-items: center;
53
- justify-content: flex-end;
54
- gap: 10px;
42
+ .monaco-editor {
43
+ border-radius: 6px;
44
+ border-top: 1px solid var(--ff-editor-border-color);
45
+ border-right: 1px dashed var(--ff-editor-border-color);
46
+ border-bottom: 1px dashed var(--ff-editor-border-color);
47
+ border-left: 1px solid var(--ff-editor-border-color);
48
+ }
49
+ .monaco-editor .cldr.codicon.codicon-folding-collapsed,
50
+ .monaco-editor .cldr.codicon.codicon-folding-expanded,
51
+ .monaco-editor .cldr.codicon.codicon-folding-manual-collapsed,
52
+ .monaco-editor .cldr.codicon.codicon-folding-manual-expanded {
53
+ @include folding-icon-styles()
54
+ }
55
+ .monaco-editor .cldr.codicon.codicon-folding-expanded {
56
+ @include folding-icon-styles()
57
+ }
58
+ .cldr.codicon.codicon-folding-manual-collapsed {
59
+ @include folding-icon-styles()
55
60
  }
56
61
  }
@@ -218,8 +218,8 @@ const Editor = forwardRef<any, EditorProps>(
218
218
  return (
219
219
  <div style={{ width, height }} className="ff-editor-container">
220
220
  <MonacoEditor
221
- height="90%"
222
- width="100%"
221
+ height={height}
222
+ width={width}
223
223
  language={language}
224
224
  value={value}
225
225
  options={{
@@ -1,5 +1,5 @@
1
1
  .ff-excel-menu {
2
- position: absolute;
2
+ position: fixed;
3
3
  border: 1px solid var(--option-card-border-color);
4
4
  background: var(--option-card-bg-color);
5
5
  border-radius: 4px;
@@ -5,13 +5,17 @@ import { ContextMenuState } from '../ExcelFile/ExcelFileComponents/types';
5
5
 
6
6
  type ExcelContextMenuProps = {
7
7
  contextMenu: ContextMenuState;
8
+ position: { x: number; y: number };
8
9
  };
9
10
 
10
- const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({ contextMenu }) => {
11
+ const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({
12
+ contextMenu,
13
+ position,
14
+ }) => {
11
15
  return (
12
16
  <div
13
17
  className="ff-excel-menu"
14
- style={{ left: contextMenu.position.x, top: contextMenu.position.y }}
18
+ style={{ left: position.x, top: position.y }}
15
19
  >
16
20
  {contextMenu.options.map((option) => (
17
21
  <div
@@ -1,55 +1,59 @@
1
- .ff-excel-sheet {
1
+ .ff-excel {
2
2
  position: relative;
3
- top: 0;
4
- }
5
-
6
- .ff-excel-sheet-bar {
7
- position: static;
8
- max-width: 100%;
9
- margin-left: 60px;
10
- display: flex;
11
- height: 36px;
12
- align-items: center;
13
- color: var(--brand2-color);
14
- box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
15
3
 
16
- .ff-excel-add-sheet-set {
4
+ .ff-excel-sheet {
17
5
  position: relative;
18
- background-color: var(--tab-bg-color);
19
- display: flex;
20
- align-items: center;
21
- justify-content: center;
22
- width: 40px;
23
6
  top: 0;
24
- left: 0px;
25
- height: 100%;
26
-
27
- .ff-excel-add-sheet-icon {
28
- padding: 8px 10px;
29
- }
30
7
  }
31
8
 
32
- .ff-excel-tab-container {
33
- height: 36px;
9
+ .ff-excel-sheet-bar {
10
+ position: static;
11
+ max-width: 100%;
12
+ margin-left: 60px;
34
13
  display: flex;
35
- overflow-x: auto;
14
+ height: 36px;
36
15
  align-items: center;
37
- scrollbar-width: none;
38
-
39
- .ff-excel-tab-list {
40
- margin-top: 2px;
41
- padding: 10px 9px;
42
- min-width: max-content;
43
- cursor: pointer;
16
+ color: var(--brand2-color);
17
+ box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
18
+
19
+ .ff-excel-add-sheet-set {
20
+ position: relative;
21
+ background-color: var(--tab-bg-color);
44
22
  display: flex;
45
- background-color: var(--hover-color);
46
- &.active {
47
- background-color: var(--excel-sheet-button-color);
23
+ align-items: center;
24
+ justify-content: center;
25
+ width: 40px;
26
+ top: 0;
27
+ left: 0px;
28
+ height: 100%;
29
+
30
+ .ff-excel-add-sheet-icon {
31
+ padding: 8px 10px;
48
32
  }
33
+ }
34
+
35
+ .ff-excel-tab-container {
36
+ height: 36px;
37
+ display: flex;
38
+ overflow-x: auto;
39
+ align-items: center;
40
+ scrollbar-width: none;
41
+
42
+ .ff-excel-tab-list {
43
+ margin-top: 2px;
44
+ padding: 10px 9px;
45
+ min-width: max-content;
46
+ cursor: pointer;
47
+ display: flex;
48
+ background-color: var(--hover-color);
49
+ &.active {
50
+ background-color: var(--excel-sheet-button-color);
51
+ }
49
52
 
50
- &:focus {
51
- outline: none;
52
- text-decoration: none;
53
+ &:focus {
54
+ outline: none;
55
+ text-decoration: none;
56
+ }
53
57
  }
54
58
  }
55
59
  }
@@ -23,24 +23,32 @@ interface ExcelFileProps {
23
23
 
24
24
  /** Optional: Provide context menu options for actions like right-click */
25
25
  contextOption?: {
26
- name: string;
27
- title: React.ReactNode;
28
- action: () => void;
29
- }[];
26
+ open: boolean;
27
+ options: {
28
+ label: string;
29
+ value: string;
30
+ iconName: string;
31
+ action: () => void;
32
+ }[];
33
+ };
30
34
 
31
35
  /** Controls whether the toolbar is shown, disabled, or hidden */
32
36
  toolbar?: 'show' | 'disable' | 'hide';
33
37
 
34
38
  /** Callback function to save the Excel data */
35
39
  onSave?: (saveData: any) => void;
36
-
40
+ contextHeightPositioning?: number;
41
+ contextWidthPositioning?: number;
37
42
  /** Set your dynamic sheet Height*/
38
43
  sheetHeight?: string;
39
44
  }
40
45
 
41
46
  const ExcelFile: React.FC<ExcelFileProps> = ({
42
47
  excelData,
48
+ contextOption,
43
49
  sheetHeight = '100%',
50
+ contextHeightPositioning = 0,
51
+ contextWidthPositioning = 0,
44
52
  onSave = (saveData) => {
45
53
  saveData();
46
54
  },
@@ -84,6 +92,11 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
84
92
  Matrix.Matrix<CellBase>
85
93
  >([[EmptyRow]]);
86
94
 
95
+ const [position, setPosition] = useState<{ x: number; y: number }>({
96
+ x: 0,
97
+ y: 0,
98
+ });
99
+
87
100
  const pageRef = useRef<string>('');
88
101
  const sheetRef = useRef<HTMLDivElement | null>(null);
89
102
 
@@ -226,7 +239,6 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
226
239
  }),
227
240
  };
228
241
  onSave(savedData);
229
- toast.success('File saved successfully!');
230
242
  };
231
243
 
232
244
  const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
@@ -430,21 +442,29 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
430
442
  setContextMenu({
431
443
  open: true,
432
444
  position: {
433
- x: event.pageX - 200,
434
- y: event.pageY - 250,
445
+ x: event.pageX,
446
+ y: event.pageY,
435
447
  },
436
448
  options: options,
437
449
  });
438
450
  };
451
+ const setContextPosition = (event: React.MouseEvent) => {
452
+ event.preventDefault();
453
+ setPosition({
454
+ x: event.pageX + contextWidthPositioning,
455
+ y: event.pageY + contextHeightPositioning,
456
+ });
457
+ };
439
458
 
440
459
  return (
441
460
  <>
442
461
  {sheetNames.length > 0 && (
443
- <>
462
+ <div className="ff-excel" onContextMenu={setContextPosition}>
444
463
  <div ref={sheetRef} className="ff-excel-sheet">
445
464
  <Spreadsheet
446
465
  sheetHeight={sheetHeight}
447
466
  setContextMenu={setContextMenu}
467
+ contextOption={contextOption}
448
468
  data={selectedSheetData}
449
469
  onEvaluatedDataChange={onEvaluateChange}
450
470
  />
@@ -501,9 +521,11 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
501
521
  ))}
502
522
  </div>
503
523
  </div>
504
- {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
524
+ {contextMenu.open && (
525
+ <ExcelContextMenu contextMenu={contextMenu} position={position} />
526
+ )}
505
527
  <Toastify />
506
- </>
528
+ </div>
507
529
  )}
508
530
  </>
509
531
  );
@@ -10,6 +10,17 @@ import * as Matrix from './matrix';
10
10
 
11
11
  type Props = {
12
12
  DataEditor: Types.DataEditorComponent;
13
+ setContextMenu:React.Dispatch<React.SetStateAction<ContextMenuState>>;
14
+ contextOption?: {
15
+ open: boolean;
16
+ options: {
17
+ label: string;
18
+ value: string;
19
+ iconName: string;
20
+ action: () => void;
21
+ }[];
22
+ };
23
+
13
24
  };
14
25
 
15
26
  const ActiveCell: React.FC<Props> = (props) => {
@@ -53,7 +64,7 @@ const ActiveCell: React.FC<Props> = (props) => {
53
64
  width: (dimensionValue?.width ?? 0) + 1,
54
65
  };
55
66
  return dimensionValue;
56
- });
67
+ });``
57
68
 
58
69
  const hidden = React.useMemo(
59
70
  () => !active || !dimensions,
@@ -126,6 +137,22 @@ const ActiveCell: React.FC<Props> = (props) => {
126
137
  }
127
138
  }, [activate, autoFill, active]);
128
139
 
140
+ const contextClick = React.useCallback(
141
+ (event: React.MouseEvent) => {
142
+ event.preventDefault();
143
+
144
+ props.setContextMenu({
145
+ open: props.contextOption?.open ?? false,
146
+ position: {
147
+ x: event.pageX - 450,
148
+ y: event.pageY - 260,
149
+ },
150
+ options: props.contextOption?.options || [],
151
+ });
152
+ },
153
+ [props]
154
+ );
155
+
129
156
  return hidden ? null : (
130
157
  <div
131
158
  ref={rootRef}
@@ -134,6 +161,7 @@ const ActiveCell: React.FC<Props> = (props) => {
134
161
  `ff-spreadsheet-active-cell--${mode}`
135
162
  )}
136
163
  style={dimensions}
164
+ onContextMenu={contextClick}
137
165
  onClick={mode === 'view' && !readOnly ? edit : undefined}
138
166
  tabIndex={0}
139
167
  >
@@ -22,7 +22,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
22
22
  activate,
23
23
  setCellDimensions,
24
24
  setCellData,
25
- setContextMenu,
26
25
  }): React.ReactElement => {
27
26
  const rootRef = React.useRef<HTMLTableCellElement | null>(null);
28
27
  const point = React.useMemo(
@@ -33,23 +32,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
33
32
  [row, column]
34
33
  );
35
34
 
36
- let options = [
37
- {
38
- label: 'Get data from Header',
39
- value: 'Get data from Header',
40
- iconName: 'success',
41
- disable: false,
42
- action: () => {},
43
- },
44
- {
45
- label: 'Get Cell Value',
46
- value: 'Get Cell Value',
47
- iconName: 'success',
48
- disable: false,
49
- action: () => {},
50
- },
51
- ];
52
-
53
35
  const handleMouseDown = React.useCallback(
54
36
  (event: React.MouseEvent<HTMLTableCellElement>) => {
55
37
  if (mode === 'view') {
@@ -75,22 +57,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
75
57
  [setCellDimensions, select, dragging, point]
76
58
  );
77
59
 
78
- const contextClick = React.useCallback(
79
- (event: React.MouseEvent) => {
80
- event.preventDefault();
81
- select(point);
82
- setContextMenu({
83
- open: true,
84
- position: {
85
- x: event.pageX - 50,
86
- y: event.pageY - 260,
87
- },
88
- options: options,
89
- });
90
- },
91
- [setContextMenu, select, point]
92
- );
93
-
94
60
  React.useEffect(() => {
95
61
  const root = rootRef.current;
96
62
  if (selected && root) {
@@ -115,12 +81,10 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
115
81
  })}
116
82
  onMouseEnter={handleMouseOver}
117
83
  onMouseDown={handleMouseDown}
118
- onContextMenu={contextClick}
119
84
  tabIndex={0}
120
85
  >
121
86
  <DataViewer
122
87
  row={row}
123
- setContextMenu={setContextMenu}
124
88
  column={column}
125
89
  cell={data}
126
90
  evaluatedCell={evaluatedData}
@@ -94,8 +94,8 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
94
94
  setContextMenu({
95
95
  open: true,
96
96
  position: {
97
- x: event.pageX - 50,
98
- y: event.pageY - 260,
97
+ x: event.pageX,
98
+ y: event.pageY,
99
99
  },
100
100
  options: options,
101
101
  });
@@ -10,54 +10,15 @@ export const FALSE_TEXT = 'FALSE';
10
10
  const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
11
11
  cell,
12
12
  evaluatedCell,
13
- setContextMenu,//Todo
14
13
  }: Types.DataViewerProps<Cell>): React.ReactElement => {
15
-
16
14
  const value = getValue(cell, evaluatedCell);
17
15
 
18
- const options = [
19
- {
20
- label: 'Dynamic Cell One',
21
- value: 'Dynamic Cell One',
22
- iconName: 'plus_icon',
23
- action: () => {
24
- },
25
- disable: false,
26
- },
27
- {
28
- label: 'Dynamic Cell Two',
29
- value: 'Dynamic Cell Two',
30
- iconName: 'plus_icon',
31
- action: () => {
32
- },
33
- disable: false,
34
- },
35
- ];
36
-
37
- const contextClick = React.useCallback(
38
- (event: React.MouseEvent) => {
39
- event.preventDefault();
40
-
41
- setContextMenu({
42
- open: true,
43
- position: {
44
- x: event.pageX - 50,
45
- y: event.pageY - 260,
46
- },
47
- options: options,
48
- });
49
- },
50
- [ setContextMenu]
51
- );
52
-
53
16
  return typeof value === 'boolean' ? (
54
- <span
55
- className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
17
+ <span className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
56
18
  {convertBooleanToText(value)}
57
19
  </span>
58
20
  ) : (
59
21
  <span
60
- onContextMenu={contextClick}
61
22
  className={classNames('ff-spreadsheet-data-viewer', {
62
23
  'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value),
63
24
  })}
@@ -92,8 +92,8 @@ const RowIndicator: Types.RowIndicatorComponent = ({
92
92
  setContextMenu({
93
93
  open: true,
94
94
  position: {
95
- x: event.pageX - 50,
96
- y: event.pageY - 260,
95
+ x: event.pageX ,
96
+ y: event.pageY ,
97
97
  },
98
98
  options: options,
99
99
  });
@@ -51,7 +51,7 @@
51
51
 
52
52
  .ff-spreadsheet-active-cell {
53
53
  position: absolute;
54
- border: 1px solid var(--outline-color);
54
+ border: 2px solid var(--outline-color);
55
55
  box-sizing: border-box;
56
56
  z-index: 100;
57
57
  }
@@ -188,7 +188,7 @@
188
188
 
189
189
  .ff-spreadsheet-floating-rect--selected {
190
190
  background: var(--outline-background-color);
191
- border: 1px var(--outline-color) solid;
191
+ border: 2px var(--outline-color) solid;
192
192
  }
193
193
 
194
194
  .ff-spreadsheet-floating-rect--dragging {
@@ -196,6 +196,6 @@
196
196
  }
197
197
 
198
198
  .ff-spreadsheet-floating-rect--copied {
199
- border: 1px var(--outline-color) dashed;
199
+ border: 2px var(--outline-color) dashed;
200
200
  }
201
201
  }
@@ -101,6 +101,15 @@ export type Props<CellType extends Types.CellBase> = {
101
101
  setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
102
102
  /** Set your dynamic sheet Height*/
103
103
  sheetHeight: string;
104
+ contextOption?: {
105
+ open: boolean;
106
+ options: {
107
+ label: string;
108
+ value: string;
109
+ iconName: string;
110
+ action: () => void;
111
+ }[];
112
+ };
104
113
  };
105
114
 
106
115
  /**
@@ -123,6 +132,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
123
132
  onSelect = () => {},
124
133
  onActivate = () => {},
125
134
  onEvaluatedDataChange = () => {},
135
+ contextOption,
126
136
  } = props;
127
137
  type State = Types.StoreState<CellType>;
128
138
 
@@ -440,7 +450,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
440
450
  key={columnNumber}
441
451
  row={rowNumber}
442
452
  column={columnNumber}
443
- setContextMenu={props.setContextMenu}
444
453
  // @ts-ignore
445
454
  DataViewer={DataViewer}
446
455
  />
@@ -468,6 +477,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
468
477
  const activeCellNode = React.useMemo(
469
478
  () => (
470
479
  <ActiveCell
480
+ contextOption={contextOption}
481
+ setContextMenu={props.setContextMenu}
471
482
  // @ts-ignore
472
483
  DataEditor={DataEditor}
473
484
  />
@@ -190,10 +190,10 @@ export function applyBorderToCells(
190
190
  return currentData;
191
191
  }
192
192
 
193
- const { start, end } = selectedRange;
194
-
195
193
  let updatedData = currentData;
196
194
 
195
+ const { start, end } = selectedRange;
196
+
197
197
  for (let row = start.row; row <= end.row; row++) {
198
198
  for (let col = start.column; col <= end.column; col++) {
199
199
  const currentCell = Matrix.get({ row, column: col }, updatedData);
@@ -229,6 +229,7 @@ export function applyBorderToCells(
229
229
  borderRight: `2px solid ${color}`,
230
230
  };
231
231
  break;
232
+
232
233
  case 'border-left':
233
234
  updatedCell.style = {
234
235
  ...currentCell.style,
@@ -116,8 +116,6 @@ export type CellComponentProps<Cell extends CellBase = CellBase> = {
116
116
  setCellDimensions: (point: Point, dimensions: Dimensions) => void;
117
117
  /** Set data of the cell */
118
118
  setCellData: (cell: Cell) => void;
119
-
120
- setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
121
119
  };
122
120
 
123
121
  /** Type of the Spreadsheet Cell component */
@@ -134,7 +132,6 @@ export type DataViewerProps<Cell extends CellBase = CellBase> =
134
132
  DataComponentProps<Cell> & {
135
133
  /** Set data of the cell */
136
134
  setCellData: (cell: Cell) => void;
137
- setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
138
135
  evaluatedCell: Cell | undefined;
139
136
  };
140
137