pixel-react 1.6.9 → 1.7.1

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 (147) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/DownloadClient/type.d.ts +19 -27
  8. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  11. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  12. package/lib/components/MachineInputField/types.d.ts +1 -0
  13. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  14. package/lib/components/MenuOption/types.d.ts +2 -1
  15. package/lib/components/MiniModal/types.d.ts +1 -0
  16. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  17. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  18. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  19. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  20. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  21. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  22. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  23. package/lib/components/NLPInput/types.d.ts +80 -0
  24. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  25. package/lib/components/ProgressBar/index.d.ts +1 -0
  26. package/lib/components/ProgressBar/types.d.ts +12 -0
  27. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  28. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  29. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  30. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  31. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  32. package/lib/components/TableTree/TableTree.d.ts +2 -2
  33. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  34. package/lib/components/TableTree/types.d.ts +1 -1
  35. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  36. package/lib/index.d.ts +112 -59
  37. package/lib/index.esm.js +1251 -662
  38. package/lib/index.esm.js.map +1 -1
  39. package/lib/index.js +1252 -662
  40. package/lib/index.js.map +1 -1
  41. package/lib/tsconfig.tsbuildinfo +1 -1
  42. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  43. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  44. package/package.json +1 -1
  45. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  46. package/src/assets/Themes/BaseTheme.scss +20 -2
  47. package/src/assets/Themes/DarkTheme.scss +19 -2
  48. package/src/assets/icons/ai_search.svg +9 -0
  49. package/src/assets/icons/help_icon.svg +10 -0
  50. package/src/assets/icons/ios_icon.svg +11 -0
  51. package/src/assets/icons/plus_round_icon.svg +38 -0
  52. package/src/assets/icons/tick_icon.svg +2 -2
  53. package/src/assets/styles/_colors.scss +1 -1
  54. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  55. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  56. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  57. package/src/components/Charts/LineChart/types.ts +1 -0
  58. package/src/components/Checkbox/Checkbox.scss +3 -1
  59. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  60. package/src/components/Checkbox/Checkbox.tsx +3 -4
  61. package/src/components/Chip/Chip.scss +15 -5
  62. package/src/components/Chip/Chip.stories.tsx +10 -1
  63. package/src/components/Chip/Chip.tsx +5 -1
  64. package/src/components/Chip/types.ts +1 -1
  65. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  66. package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
  67. package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
  68. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  69. package/src/components/ConditionalDropdown/index.ts +1 -0
  70. package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
  71. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  72. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  73. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  74. package/src/components/DownloadClient/type.ts +32 -40
  75. package/src/components/EditTextField/EditTextField.scss +1 -1
  76. package/src/components/EditTextField/EditTextField.tsx +14 -20
  77. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  78. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  79. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  80. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  81. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  82. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  83. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  84. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  85. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  86. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  87. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  88. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  89. package/src/components/Excel/dataConversion.ts +43 -20
  90. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  91. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  92. package/src/components/Form/Forms.tsx +0 -2
  93. package/src/components/Icon/iconList.ts +9 -0
  94. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  95. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  96. package/src/components/LabelEditTextField/types.ts +1 -0
  97. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  98. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  99. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  100. package/src/components/MachineInputField/types.ts +2 -0
  101. package/src/components/MenuOption/MenuOption.scss +7 -7
  102. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  103. package/src/components/MenuOption/MenuOption.tsx +9 -13
  104. package/src/components/MenuOption/types.ts +3 -2
  105. package/src/components/MiniModal/MiniModal.scss +0 -1
  106. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  107. package/src/components/MiniModal/MiniModal.tsx +3 -1
  108. package/src/components/MiniModal/types.ts +1 -0
  109. package/src/components/MultiSelect/Dropdown.scss +3 -4
  110. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  111. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  112. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  113. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  114. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  115. package/src/components/NLPInput/NLPInput.scss +77 -21
  116. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  117. package/src/components/NLPInput/NlpInput.tsx +95 -59
  118. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  119. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  120. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  121. package/src/components/NLPInput/sampleData.ts +162 -0
  122. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  123. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  124. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  125. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  126. package/src/components/ProgressBar/index.ts +1 -0
  127. package/src/components/ProgressBar/types.ts +12 -0
  128. package/src/components/Search/Search.tsx +9 -1
  129. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  130. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  131. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  132. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  133. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  134. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  135. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  136. package/src/components/Table/Table.scss +1 -0
  137. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  138. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  139. package/src/components/TableTree/TableTree.tsx +27 -181
  140. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  141. package/src/components/TableTree/data.ts +45 -0
  142. package/src/components/TableTree/types.ts +4 -4
  143. package/src/hooks/useIntersectionObserver.tsx +56 -0
  144. package/src/index.ts +4 -2
  145. package/src/utils/functionCheck/functionCheck.ts +8 -0
  146. package/src/utils/getSequentialPayload/types.ts +1 -0
  147. package/src/components/AddVariables/index.ts +0 -1
@@ -1,6 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import classnames from 'classnames';
3
3
  import * as Types from './types';
4
+ import useSelector from './use-selector';
5
+ import { getCellDimensions } from './util';
4
6
 
5
7
  export type Props = {
6
8
  variant?: string;
@@ -15,7 +17,30 @@ const FloatingRect: React.FC<Props> = ({
15
17
  hidden,
16
18
  variant,
17
19
  }) => {
20
+ const active = useSelector((state) => state.active);
21
+ const autoFill = useSelector((state) => state.autoFill);
22
+ const FixedVal = useSelector((state) =>
23
+ active
24
+ ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
25
+ : undefined
26
+ );
27
+
18
28
  const { width, height, top, left } = dimensions || {};
29
+
30
+ let sampleHeight = FixedVal?.height ?? 0;
31
+ let sampleWidth = FixedVal?.width ?? 0;
32
+ let adjustedWidth = width;
33
+ let adjustedHeight = height;
34
+ if (autoFill.open && width && height && FixedVal) {
35
+ if (width - sampleWidth > height - sampleHeight) {
36
+ adjustedWidth = width;
37
+ adjustedHeight = FixedVal.height;
38
+ } else {
39
+ adjustedHeight = height;
40
+ adjustedWidth = FixedVal.width;
41
+ }
42
+ }
43
+
19
44
  return (
20
45
  <div
21
46
  className={classnames('ff-spreadsheet-floating-rect', {
@@ -23,7 +48,7 @@ const FloatingRect: React.FC<Props> = ({
23
48
  'ff-spreadsheet-floating-rect--dragging': dragging,
24
49
  'ff-spreadsheet-floating-rect--hidden': hidden,
25
50
  })}
26
- style={{ width, height, top, left }}
51
+ style={{ width: adjustedWidth, height: adjustedHeight, top, left }}
27
52
  />
28
53
  );
29
54
  };
@@ -11,7 +11,7 @@
11
11
  --readonly-text-color: var(--toggle-strip-active);
12
12
  --outline-color: var(--toggle-strip-active);
13
13
  --outline-background-color: var(--overlay-bg);
14
- --border-color: var(--toggle-strip-color);
14
+ --border-color: var(--excel-sheet-border);
15
15
  --header-background-color: var(--pop-up-background-blur);
16
16
  --elevation: var(--brand-color);
17
17
 
@@ -50,16 +50,16 @@
50
50
  z-index: 0;
51
51
  }
52
52
 
53
- .ff-spreadsheet-active-cell .Selection_dot {
53
+ .ff-spreadsheet-active-cell .select_dot {
54
54
  background-color: var(--elevation);
55
- height: 7px;
56
- width: 7px;
55
+ height: 10px;
56
+ width: 10px;
57
57
  border-radius: 50%;
58
58
  position: absolute;
59
- right: -3px;
60
- z-index: 10;
61
- bottom: -3px;
59
+ bottom: -5px;
60
+ right: -5px;
62
61
  cursor: crosshair;
62
+ z-index: 1000;
63
63
  }
64
64
 
65
65
  .ff-spreadsheet-cell--readonly {
@@ -46,11 +46,23 @@ export const DELETE_ROW = 'DELETE_ROW';
46
46
  export const DELETE_COLUMN = 'DELETE_COLUMN';
47
47
  export const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
48
48
  export const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
49
+ export const SET_AUTO_FILL = 'SET_AUTO_FILL';
49
50
 
50
51
  export type BaseAction<T extends string> = {
51
52
  type: T;
52
53
  };
53
54
 
55
+ export type SetAutoFill = BaseAction<typeof SET_AUTO_FILL> & {
56
+ payload: { autofill: boolean };
57
+ };
58
+
59
+ export function autoFill(autofill: boolean): SetAutoFill {
60
+ return {
61
+ type: SET_AUTO_FILL,
62
+ payload: { autofill },
63
+ };
64
+ }
65
+
54
66
  export type SetRowHeight = BaseAction<typeof SET_ROW_HEIGHT> & {
55
67
  payload: { row: number; height: number };
56
68
  };
@@ -545,4 +557,5 @@ export type Action =
545
557
  | DeleteColumn
546
558
  | SetRowHeight
547
559
  | SetColumnPosition
560
+ | SetAutoFill
548
561
  | BlurAction;
@@ -26,6 +26,8 @@ import {
26
26
  blur,
27
27
  clear,
28
28
  commit,
29
+ dragEndAutoFill,
30
+ dragEndFormatePainter,
29
31
  edit,
30
32
  getKeyDownHandler,
31
33
  isActiveReadOnly,
@@ -41,6 +43,7 @@ export const INITIAL_STATE: Types.StoreState = {
41
43
  lastChanged: null,
42
44
  hasPasted: false,
43
45
  cut: false,
46
+ autoFill: { open: false, cellValue: { value: '', style: {} } },
44
47
  dragging: false,
45
48
  model: new Model(createFormulaParser, []),
46
49
  selected: new EmptySelection(),
@@ -56,6 +59,23 @@ export default function reducer(
56
59
  action: Actions.Action
57
60
  ): Types.StoreState {
58
61
  switch (action.type) {
62
+ case Actions.SET_AUTO_FILL: {
63
+ const { autofill } = action.payload;
64
+ const activeCell = state.active;
65
+ let currentCell: Types.CellBase<any> = { value: '', style: {} };
66
+ if (activeCell) {
67
+ currentCell =
68
+ Matrix.get(
69
+ { row: activeCell.row, column: activeCell.column },
70
+ state.model.data
71
+ ) || currentCell;
72
+ }
73
+ return {
74
+ ...state,
75
+ autoFill: { open: autofill, cellValue: currentCell },
76
+ };
77
+ }
78
+
59
79
  case Actions.ADD_ROW_TOP: {
60
80
  let { selectedRow, selectedColumn, model } = state;
61
81
  if (checkEmpty(selectedRow)) {
@@ -610,41 +630,48 @@ export default function reducer(
610
630
 
611
631
  case Actions.DRAG_END: {
612
632
  const selectedRange = state.selected.toRange(state.model.data);
613
- let currentData = state.model.data;
614
-
615
- if (!state.formattedStyle.open || !selectedRange) {
633
+ const activeCell = state.active;
634
+ let updatedData = state.model.data;
635
+ if (state.formattedStyle.open) {
636
+ updatedData = dragEndFormatePainter(
637
+ state.model.data,
638
+ selectedRange as PointRange,
639
+ state.formattedStyle
640
+ );
641
+ }
642
+ if (state.autoFill.open) {
643
+ updatedData = dragEndAutoFill(
644
+ state.model.data,
645
+ selectedRange as PointRange,
646
+ state.autoFill.cellValue,
647
+ activeCell
648
+ );
649
+ let { start, end } = selectedRange as PointRange;
650
+ const rowCount = start.row - end.row;
651
+ const columnCount = start.column - end.column;
652
+ let startPoint = { row: 0, column: 0 };
653
+ let endPoint = { row: 0, column: 0 };
654
+
655
+ if (rowCount > columnCount) {
656
+ startPoint = { row: activeCell?.row ?? 0, column: start.column };
657
+ endPoint = { row: activeCell?.row ?? 0, column: end.column };
658
+ } else {
659
+ startPoint = { row: start.row, column: activeCell?.column ?? 0 };
660
+ endPoint = { row: end.row, column: activeCell?.column ?? 0 };
661
+ }
616
662
  return {
617
663
  ...state,
618
664
  dragging: false,
665
+ autoFill: { open: false, cellValue: { value: '', style: {} } },
619
666
  formattedStyle: { open: false, style: undefined },
667
+ model: new Model(state.model.createFormulaParser, updatedData),
668
+ selected: new RangeSelection(new PointRange(startPoint, endPoint)),
620
669
  };
621
670
  }
622
-
623
- const { start, end } = selectedRange;
624
-
625
- let updatedData = currentData;
626
-
627
- for (let row = start.row; row <= end.row; row++) {
628
- for (let col = start.column; col <= end.column; col++) {
629
- const currentCell = Matrix.get({ row, column: col }, updatedData);
630
- if (!currentCell) {
631
- continue;
632
- }
633
- const updatedCell = {
634
- ...currentCell,
635
- style: state.formattedStyle.style,
636
- };
637
-
638
- updatedData = Matrix.set(
639
- { row, column: col },
640
- updatedCell,
641
- updatedData
642
- );
643
- }
644
- }
645
671
  return {
646
672
  ...state,
647
673
  dragging: false,
674
+ autoFill: { open: false, cellValue: { value: '', style: {} } },
648
675
  formattedStyle: { open: false, style: undefined },
649
676
  model: new Model(state.model.createFormulaParser, updatedData),
650
677
  };
@@ -12,7 +12,7 @@ import {
12
12
 
13
13
  export function applyBoldToCells(
14
14
  currentData: Matrix.Matrix<Types.CellBase<any>>,
15
- selectedRange: PointRange,
15
+ selectedRange: PointRange
16
16
  ): Matrix.Matrix<Types.CellBase<any>> {
17
17
  if (!selectedRange) {
18
18
  return currentData;
@@ -217,10 +217,10 @@ export function applyBorderToCells(
217
217
  case 'border-none':
218
218
  updatedCell.style = {
219
219
  ...currentCell.style,
220
- borderRight: `1px solid var(--toggle-strip-color)`,
221
- borderLeft: `1px solid var(--toggle-strip-color)`,
222
- borderTop: `1px solid var(--toggle-strip-color)`,
223
- borderBottom: `1px solid var(--toggle-strip-color)`,
220
+ borderRight: `1px solid var(--excel-sheet-border)`,
221
+ borderLeft: `1px solid var(--excel-sheet-border)`,
222
+ borderTop: `1px solid var(--excel-sheet-border)`,
223
+ borderBottom: `1px solid var(--excel-sheet-border)`,
224
224
  };
225
225
  break;
226
226
  case 'border-right':
@@ -333,8 +333,7 @@ export function applyUnderlineToCells(
333
333
  ...currentCell,
334
334
  style: {
335
335
  ...currentCell.style,
336
- textDecoration: 'none',
337
- textDecorationStyle: 'solid' as TextDecorationStyle,
336
+ textDecoration: 'none solid',
338
337
  },
339
338
  };
340
339
  } else {
@@ -342,11 +341,8 @@ export function applyUnderlineToCells(
342
341
  ...currentCell,
343
342
  style: {
344
343
  ...currentCell.style,
345
- textDecoration: value === 'double_border' ? 'underline' : value,
346
- textDecorationStyle:
347
- value === 'double_border'
348
- ? 'double'
349
- : ('none' as TextDecorationStyle),
344
+ textDecoration:
345
+ value === 'double_border' ? 'underline double' : value,
350
346
  },
351
347
  };
352
348
  }
@@ -480,6 +476,79 @@ export function applyFormatePainter(
480
476
  return undefined;
481
477
  }
482
478
 
479
+ export function dragEndFormatePainter(
480
+ currentData: Matrix.Matrix<Types.CellBase<any>>,
481
+ selectedRange: PointRange | null,
482
+ formattedStyle: Types.formattedStyle
483
+ ): Matrix.Matrix<Types.CellBase<any>> {
484
+ if (!selectedRange || !formattedStyle.open) {
485
+ return currentData;
486
+ }
487
+
488
+ const { start, end } = selectedRange;
489
+ let updatedData = currentData;
490
+
491
+ for (let row = start.row; row <= end.row; row++) {
492
+ for (let col = start.column; col <= end.column; col++) {
493
+ const currentCell = Matrix.get({ row, column: col }, updatedData);
494
+ if (!currentCell) {
495
+ continue;
496
+ }
497
+ const updatedCell = {
498
+ ...currentCell,
499
+ style: formattedStyle.style,
500
+ };
501
+ updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
502
+ }
503
+ }
504
+ return updatedData;
505
+ }
506
+
507
+ export function dragEndAutoFill(
508
+ currentData: Matrix.Matrix<Types.CellBase<any>>,
509
+ selectedRange: PointRange | null,
510
+ cellValue: Types.CellBase,
511
+ activeCell: Point.Point | null
512
+ ): Matrix.Matrix<Types.CellBase<any>> {
513
+ if (!selectedRange) {
514
+ return currentData;
515
+ }
516
+ const { start, end } = selectedRange;
517
+ const rowCount = start.row - end.row;
518
+ const columnCount = start.column - end.column;
519
+ let startPoint = { row: 0, column: 0 };
520
+ let endPoint = { row: 0, column: 0 };
521
+
522
+ if (rowCount > columnCount) {
523
+ startPoint = { row: activeCell?.row ?? 0, column: start.column };
524
+ endPoint = { row: activeCell?.row ?? 0, column: end.column };
525
+ } else {
526
+ startPoint = { row: start.row, column: activeCell?.column ?? 0 };
527
+ endPoint = { row: end.row, column: activeCell?.column ?? 0 };
528
+ }
529
+
530
+ let updatedData = currentData;
531
+
532
+ for (let row = startPoint.row; row <= endPoint.row; row++) {
533
+ for (let col = startPoint.column; col <= endPoint.column; col++) {
534
+ const currentCell = Matrix.get({ row, column: col }, updatedData);
535
+
536
+ if (!currentCell) {
537
+ continue;
538
+ }
539
+
540
+ const updatedCell = {
541
+ ...currentCell,
542
+ style: cellValue.style,
543
+ value: cellValue.value,
544
+ };
545
+
546
+ updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
547
+ }
548
+ }
549
+ return updatedData;
550
+ }
551
+
483
552
  export function edit(state: Types.StoreState): Types.StoreState {
484
553
  if (isActiveReadOnly(state)) {
485
554
  return state;
@@ -567,8 +636,6 @@ function convertPtToPx(pt: number): string {
567
636
 
568
637
  // Key Bindings
569
638
 
570
- type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
571
-
572
639
  type TextAlign = 'left' | 'center' | 'right';
573
640
 
574
641
  export type KeyDownHandler = (
@@ -55,19 +55,30 @@ export type StoreState<Cell extends CellBase = CellBase> = {
55
55
  copied: PointRange | null;
56
56
  hasPasted: boolean;
57
57
  cut: boolean;
58
+ autoFill: { open: boolean; cellValue: Cell };
58
59
  active: Point | null;
59
60
  mode: Mode;
60
- rowDimensions: Record<number, Pick<Dimensions, 'height' | 'top'> | undefined>;
61
- columnDimensions: Record<
62
- number,
63
- Pick<Dimensions, 'width' | 'left'> | undefined
64
- >;
61
+ rowDimensions: rowDimensions;
62
+ columnDimensions: columnDimensions;
65
63
  dragging: boolean;
66
64
  lastChanged: Point | null;
67
65
  lastCommit: null | CellChange<Cell>[];
68
66
  selectedRow: null | number;
69
67
  selectedColumn: null | number;
70
- formattedStyle: { open: boolean; style: undefined | React.CSSProperties };
68
+ formattedStyle: formattedStyle;
69
+ };
70
+
71
+ export type rowDimensions = Record<
72
+ number,
73
+ Pick<Dimensions, 'height' | 'top'> | undefined
74
+ >;
75
+ export type columnDimensions = Record<
76
+ number,
77
+ Pick<Dimensions, 'width' | 'left'> | undefined
78
+ >;
79
+ export type formattedStyle = {
80
+ open: boolean;
81
+ style: undefined | React.CSSProperties;
71
82
  };
72
83
 
73
84
  export type CellChange<Cell extends CellBase = CellBase> = {
@@ -115,10 +115,10 @@ export const Default: Story = {
115
115
  backgroundColor: 'C6E7FF', // Sample data from backend without #
116
116
  borderColor: 'F2F2F2', // Sample data from backend without #
117
117
  border: {
118
- top: 'NONE',
119
- bottom: 'NONE',
120
- left: 'NONE',
121
- right: 'NONE',
118
+ top: 'THIN',
119
+ bottom: 'THIN',
120
+ left: 'THIN',
121
+ right: 'THIN',
122
122
  },
123
123
  alignment: {
124
124
  horizontal: 'GENERAL',
@@ -51,22 +51,27 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
51
51
  const data = useSelector((state) => state.model.data);
52
52
  const formattedStyle = useSelector((state) => state.formattedStyle.open);
53
53
 
54
- const [cellStyle, setCellStyle] = useState(
55
- cell?.style || {
56
- color: 'var(--text-color)',
57
- backgroundColor: 'var(--drawer-footer-bg)',
58
- borderColor: 'var(--toggle-strip-color)',
59
- }
60
- );
54
+ // Default style to Excel
55
+ const basicStyle: React.CSSProperties = {
56
+ color: 'var(--input-hover-border-color)',
57
+ backgroundColor: 'var(--drawer-footer-bg)',
58
+ borderColor: 'var(--excel-sheet-border)',
59
+ textDecoration: 'none solid',
60
+ borderRight: `1px solid var(--excel-sheet-border)`,
61
+ borderLeft: `1px solid var(--excel-sheet-border)`,
62
+ borderTop: `1px solid var(--excel-sheet-border)`,
63
+ borderBottom: `1px solid var(--excel-sheet-border)`,
64
+ fontSize: '15px',
65
+ fontWeight: 'normal',
66
+ fontStyle: 'normal',
67
+ fontFamily: 'Times New Roman',
68
+ textAlign: 'center',
69
+ };
70
+
71
+ const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
61
72
 
62
73
  useEffect(() => {
63
- setCellStyle(
64
- cell?.style || {
65
- color: 'var(--text-color)',
66
- backgroundColor: 'var(--drawer-footer-bg)',
67
- borderColor: 'var(--toggle-strip-color)',
68
- }
69
- );
74
+ setCellStyle(cell?.style || basicStyle);
70
75
  }, [cell]);
71
76
 
72
77
  useEffect(() => {
@@ -79,8 +84,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
79
84
  }, [cell]);
80
85
 
81
86
  const styleBackend = convertStyleToBackend(cellStyle);
82
-
83
-
84
87
  const [border, setBorder] = useState<string>('border-none');
85
88
  const [underLine, setUnderLine] = useState<string>('underline');
86
89
  const [selectedFontFamily, setSelectedFontFamily] = useState<{
@@ -93,7 +96,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
93
96
  const [colorContainer, setColorPicker] = useState<ColorContainer>({
94
97
  color: 'var(--error-light)',
95
98
  backgroundColor: 'var(--error-light)',
96
- borderColor: 'var(--text-color)',
99
+ borderColor: 'var(--input-hover-border-color)',
97
100
  });
98
101
 
99
102
  const borderTypeIcon = [
@@ -124,6 +127,18 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
124
127
  label: 'Arial',
125
128
  value: 'Arial',
126
129
  },
130
+ {
131
+ label: 'fantasy',
132
+ value: 'fantasy',
133
+ },
134
+ {
135
+ label: 'cursive',
136
+ value: 'cursive',
137
+ },
138
+ {
139
+ label: 'Poppins',
140
+ value: 'Poppins',
141
+ },
127
142
  {
128
143
  label: 'Courier New',
129
144
  value: '"Courier New"',
@@ -283,7 +298,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
283
298
  <Tooltip placement="top" title={'Underline Type'}>
284
299
  <div className="ff-excel-toolbar-icon-underline">
285
300
  <Icon
286
- variant={cellStyle.textDecoration===underLine?'dark' : 'light'}
301
+ variant={
302
+ cellStyle.textDecoration === underLine ? 'dark' : 'light'
303
+ }
287
304
  hoverEffect
288
305
  disabled={toolbar === 'disable'}
289
306
  onClick={() => setUnderlineType(data, underLine, true)}
@@ -308,7 +325,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
308
325
  <div className="ff-excel-toolbar-icon">
309
326
  <Tooltip placement="top" title={'Format Painter'}>
310
327
  <Icon
311
- variant={formattedStyle?'dark':'light'}
328
+ variant={formattedStyle ? 'dark' : 'light'}
312
329
  hoverEffect
313
330
  disabled={toolbar === 'disable'}
314
331
  onClick={() => {
@@ -54,7 +54,7 @@ const getTextAlignmentBack = (
54
54
 
55
55
  export const getTextDecorationBack = (
56
56
  textDecoration: string
57
- ): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
57
+ ): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
58
58
  switch (textDecoration.toLowerCase()) {
59
59
  case 'solid':
60
60
  return 'solid';
@@ -74,6 +74,40 @@ export const getTextDecorationBack = (
74
74
  export function convertStyleToFrontend(
75
75
  backendStyle: BackendStyle
76
76
  ): React.CSSProperties {
77
+
78
+ const { border } = backendStyle;
79
+
80
+ let borderTop = '';
81
+ let borderRight = '';
82
+ let borderBottom = '';
83
+ let borderLeft = '';
84
+
85
+ if (border.top !== 'NONE') {
86
+ borderTop =
87
+ border.top === 'THIN'
88
+ ? '2px solid var(--input-hover-border-color)'
89
+ : '1px solid var(--excel-sheet-border)';
90
+ }
91
+ if (border.right !== 'NONE') {
92
+ borderRight =
93
+ border.right === 'THIN'
94
+ ? '2px solid var(--input-hover-border-color)'
95
+ : '1px solid var(--excel-sheet-border)';
96
+ }
97
+ if (border.bottom !== 'NONE') {
98
+ borderBottom =
99
+ border.bottom === 'THIN'
100
+ ? '2px solid var(--input-hover-border-color)'
101
+ : '1px solid var(--excel-sheet-border)';
102
+ }
103
+ if (border.left !== 'NONE') {
104
+ borderLeft =
105
+ border.left === 'THIN'
106
+ ? '2px solid var(--input-hover-border-color)'
107
+ : '1px solid var(--excel-sheet-border)';
108
+ }
109
+
110
+ // Return the converted styles
77
111
  return {
78
112
  fontSize: `${backendStyle.size}px`,
79
113
  fontFamily: backendStyle.name,
@@ -81,24 +115,13 @@ export function convertStyleToFrontend(
81
115
  backgroundColor: `#${backendStyle.backgroundColor}`,
82
116
  fontWeight: backendStyle.bold ? 'bold' : 'normal',
83
117
  fontStyle: backendStyle.italic ? 'italic' : 'normal',
84
- textDecoration: backendStyle.underline ? 'underline' : 'value',
85
- textDecorationStyle: getTextDecoration(backendStyle.underline),
86
- borderTop:
87
- backendStyle.border.top === 'NONE'
88
- ? 'none'
89
- : `1px solid ${backendStyle.borderColor}`,
90
- borderRight:
91
- backendStyle.border.right === 'NONE'
92
- ? 'none'
93
- : `1px solid ${backendStyle.borderColor}`,
94
- borderBottom:
95
- backendStyle.border.bottom === 'NONE'
96
- ? 'none'
97
- : `1px solid ${backendStyle.borderColor}`,
98
- borderLeft:
99
- backendStyle.border.left === 'NONE'
100
- ? 'none'
101
- : `1px solid ${backendStyle.borderColor}`,
118
+ textDecoration: backendStyle.underline
119
+ ? `underline ${getTextDecoration(backendStyle.underline)}`
120
+ : 'none',
121
+ borderTop: borderTop,
122
+ borderRight: borderRight,
123
+ borderBottom: borderBottom,
124
+ borderLeft: borderLeft,
102
125
  textAlign: getTextAlignment(backendStyle.alignment.horizontal),
103
126
  };
104
127
  }
@@ -133,7 +156,7 @@ export const convertStyleToBackend = (
133
156
  size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
134
157
  bold: frontendStyle.fontWeight === 'bold',
135
158
  italic: frontendStyle.fontStyle === 'italic',
136
- underline:"solid",
159
+ underline: 'solid',
137
160
  color: frontendStyle.color?.replace('#', '') || '000000',
138
161
  backgroundColor:
139
162
  frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useRef } from 'react';
1
+ import React from 'react';
2
2
  import { StoryObj, Meta } from '@storybook/react';
3
3
  import FileDropzone from './FileDropzone';
4
4
  import Toaster from '../Toast';
@@ -109,7 +109,6 @@ export const WithRadioButton: Story = {
109
109
  useState<RadioOption>();
110
110
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
111
111
 
112
- const fileInputRef = useRef<HTMLInputElement | null>(null);
113
112
 
114
113
  const drawerArgs = {
115
114
  primaryButtonProps: {
@@ -126,12 +125,6 @@ export const WithRadioButton: Story = {
126
125
  },
127
126
  };
128
127
 
129
- useEffect(() => {
130
- if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
131
- fileInputRef.current.click();
132
- }
133
- }, [selectedRadioOption]);
134
-
135
128
  const radioOptions: RadioOption[] = [
136
129
  { value: 'Test Data', label: 'Test Data' },
137
130
  { value: 'Local File', label: 'Local File' },
@@ -146,10 +139,11 @@ export const WithRadioButton: Story = {
146
139
  };
147
140
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
148
141
  const file = event.target.files?.[0];
142
+
149
143
  if (file) {
150
144
  setSelectedFile(file);
151
145
  }
152
- };
146
+ };
153
147
 
154
148
  const handleRemoveFile = () => {
155
149
  setSelectedFile(null);
@@ -191,15 +185,7 @@ export const WithRadioButton: Story = {
191
185
  toastMessage={'Max 5 files can be uploaded'}
192
186
  />
193
187
  )}
194
- {selectedRadioOption?.value === 'Local File' ? (
195
- <input
196
- ref={fileInputRef}
197
- type="file"
198
- className='ff-input-ref'
199
- onChange={handleFileChange}
200
- accept="image/png, image/jpeg, application/x-zip-compressed, application/zip"
201
- />
202
- ) : (
188
+ {selectedRadioOption?.value === 'Local File' &&
203
189
  <Drawer
204
190
  {...drawerArgs}
205
191
  isOpen={showModal}
@@ -210,7 +196,7 @@ export const WithRadioButton: Story = {
210
196
  >
211
197
  <Typography>Upload TestData Files Here</Typography>
212
198
  </Drawer>
213
- )}
199
+ }
214
200
  </>
215
201
  );
216
202
  },