pixel-react-excel-sheet 1.0.31 → 1.0.33

package/src/components/DatePicker/DatePicker.scss

@@ -411,3 +411,313 @@
     }
   }
 }
+
+
+
+
+// Adding react day picker library node modules css here to get the css style available in platform 
+
+/* Variables declaration */
+/* prettier-ignore */
+.rdp-root {
+  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
+  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
+  --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
+
+  --rdp-day-font: inherit; /* The font used for the day cells. */
+  --rdp-day-height: 2.75rem; /* The height of the day cells. */
+  --rdp-day-width: 2.75rem; /* The width of the day cells. */
+  
+  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
+  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
+  --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
+  --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
+  
+  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
+  --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
+  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
+  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
+  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
+  
+  --rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
+  
+  --rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
+  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
+  
+  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
+  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
+  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
+  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
+  
+  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
+  --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
+  --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
+  --rdp-range_middle-color: inherit;/* The color of the range text. */
+  
+  --rdp-range_start-color: white; /* The color of the range text. */
+  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
+  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
+  
+  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
+  --rdp-range_end-color: white;/* The color of the range text. */
+  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
+  
+  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
+  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
+  --rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */
+  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
+  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
+  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
+  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
+
+  --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
+  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
+  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
+  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
+
+  --rdp-gradient-direction: 90deg;
+}
+
+.rdp-root[dir="rtl"] {
+  --rdp-gradient-direction: -90deg;
+}
+
+/* Root of the component. */
+.rdp-root {
+  position: relative; /* Required to position the navigation toolbar. */
+  box-sizing: border-box;
+}
+
+.rdp-root * {
+  box-sizing: border-box;
+}
+
+.rdp-day {
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  font: var(--rdp-day-font);
+  text-align: center;
+}
+
+.rdp-day_button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  width: var(--rdp-day_button-width);
+  height: var(--rdp-day_button-height);
+  border: var(--rdp-day_button-border);
+  border-radius: var(--rdp-day_button-border-radius);
+}
+
+.rdp-day_button:disabled {
+  cursor: revert;
+}
+
+.rdp-caption_label {
+  z-index: 1;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  white-space: nowrap;
+  border: 0;
+}
+
+.rdp-button_next,
+.rdp-button_previous {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  appearance: none;
+
+  width: var(--rdp-nav_button-width);
+  height: var(--rdp-nav_button-height);
+}
+
+.rdp-button_next:disabled,
+.rdp-button_previous:disabled {
+  cursor: revert;
+
+  opacity: var(--rdp-nav_button-disabled-opacity);
+}
+
+.rdp-chevron {
+  display: inline-block;
+  fill: var(--rdp-accent-color);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+  transform-origin: 50%;
+}
+
+.rdp-dropdowns {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rdp-dropdown-gap);
+}
+.rdp-dropdown {
+  z-index: 2;
+
+  /* Reset */
+  opacity: 0;
+  appearance: none;
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  border: none;
+  line-height: inherit;
+}
+
+.rdp-dropdown_root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-month_caption {
+  display: flex;
+  align-content: center;
+  height: var(--rdp-nav-height);
+  font: var(--rdp-month_caption-font);
+}
+
+.rdp-months {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rdp-months-gap);
+  max-width: fit-content;
+}
+
+.rdp-month_grid {
+  border-collapse: collapse;
+}
+
+.rdp-nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+
+  display: flex;
+  align-items: center;
+
+  height: var(--rdp-nav-height);
+}
+
+.rdp-weekday {
+  opacity: var(--rdp-weekday-opacity);
+  padding: var(--rdp-weekday-padding);
+  font: var(--rdp-weekday-font);
+  text-align: var(--rdp-weekday-text-align);
+  text-transform: var(--rdp-weekday-text-transform);
+}
+
+.rdp-week_number {
+  opacity: var(--rdp-week_number-opacity);
+  font: var(--rdp-week_number-font);
+  height: var(--rdp-week_number-height);
+  width: var(--rdp-week_number-width);
+  border: var(--rdp-week_number-border);
+  border-radius: var(--rdp-week_number-border-radius);
+  text-align: var(--rdp-weeknumber-text-align);
+}
+
+/* DAY MODIFIERS */
+.rdp-today:not(.rdp-outside) {
+  color: var(--rdp-today-color);
+}
+
+.rdp-selected {
+  font: var(--rdp-selected-font);
+}
+
+.rdp-selected .rdp-day_button {
+  border: var(--rdp-selected-border);
+}
+
+.rdp-outside {
+  opacity: var(--rdp-outside-opacity);
+}
+
+.rdp-disabled {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-hidden {
+  visibility: hidden;
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_start {
+  background: var(--rdp-range_start-background);
+}
+
+.rdp-range_start .rdp-day_button {
+  background-color: var(--rdp-range_start-date-background-color);
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_middle {
+  background-color: var(--rdp-range_middle-background-color);
+  font: var(--rdp-range_middle-font);
+}
+
+.rdp-range_middle .rdp-day_button {
+  border-color: transparent;
+  border: unset;
+  border-radius: unset;
+  color: var(--rdp-range_middle-color);
+}
+
+.rdp-range_end {
+  background: var(--rdp-range_end-background);
+  color: var(--rdp-range_end-color);
+}
+
+.rdp-range_end .rdp-day_button {
+  color: var(--rdp-range_start-color);
+  background-color: var(--rdp-range_end-date-background-color);
+}
+
+.rdp-range_start.rdp-range_end {
+  background: revert;
+}
+
+.rdp-focusable {
+  cursor: pointer;
+}
+
+

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -430,8 +430,8 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.pageX - 50,
-        y: event.pageY - 250,
+        x: event.pageX,
+        y: event.pageY,
       },
       options: options,
     });
@@ -440,7 +440,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   return (
     <>
       {sheetNames.length > 0 && (
-        <>
+        <div style={{position:"relative"}}>
           <div ref={sheetRef} className="ff-excel-sheet">
             <Spreadsheet
               sheetHeight={sheetHeight}
@@ -503,7 +503,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
           </div>
           {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
           <Toastify />
-        </>
+        </div>
       )}
     </>
   );

package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx

@@ -20,6 +20,10 @@ const ActiveCell: React.FC<Props> = (props) => {
       dispatch(Actions.setCellData(active, data)),
     [dispatch]
   );
+  const activate = React.useCallback(
+    (point: Point.Point) => dispatch(Actions.activate(point)),
+    [dispatch]
+  );
   const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]);
   const autoFill = React.useCallback(
     (value: boolean) => dispatch(Actions.autoFill(value)),
@@ -38,11 +42,19 @@ const ActiveCell: React.FC<Props> = (props) => {
   const cell = useSelector((state) =>
     state.active ? Matrix.get(state.active, state.model.data) : undefined
   );
-  const dimensions = useSelector((state) =>
-    active
+  const dimensions = useSelector((state) => {
+    let dimensionValue = active
       ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
-      : undefined
-  );
+      : undefined;
+    dimensionValue = {
+      top: dimensionValue?.top ?? 0,
+      height: (dimensionValue?.height ?? 0) + 1,
+      left: dimensionValue?.left ?? 0,
+      width: (dimensionValue?.width ?? 0) + 1,
+    };
+    return dimensionValue;
+  });
+
   const hidden = React.useMemo(
     () => !active || !dimensions,
     [active, dimensions]
@@ -108,8 +120,11 @@ const ActiveCell: React.FC<Props> = (props) => {
   const readOnly = cell && cell.readOnly;
 
   const handleMouseDown = React.useCallback(() => {
-    mode === 'view' ? autoFill(true) : autoFill(false);
-  }, [mode, autoFill]);
+    if (active) {
+      autoFill(true);
+      activate(active);
+    }
+  }, [activate, autoFill, active]);
 
   return hidden ? null : (
     <div
@@ -132,10 +147,7 @@ const ActiveCell: React.FC<Props> = (props) => {
           exitEditMode={view}
         />
       )}
-      <div
-        onMouseDown={handleMouseDown}
-        className="select_dot"
-      ></div>
+      <div onMouseDown={handleMouseDown} className="select_dot"></div>
     </div>
   );
 };

package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx

@@ -94,8 +94,8 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       setContextMenu({
         open: true,
         position: {
-          x: event.pageX - 50,
-          y: event.pageY - 260,
+          x: event.pageX,
+          y: event.pageY,
         },
         options: options,
       });

package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx

@@ -22,7 +22,10 @@ const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
   const value = cell?.value ?? '';
 
   return (
-    <div className="ff-spreadsheet-data-editor">
+    <div
+      className="ff-spreadsheet-data-editor"
+      style={{ ...cell?.style, border: 'none' }} //Inline Styling needed for border:none
+    >
       <input
         ref={inputRef}
         type="text"

package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx

@@ -48,7 +48,12 @@ const FloatingRect: React.FC<Props> = ({
         'ff-spreadsheet-floating-rect--dragging': dragging,
         'ff-spreadsheet-floating-rect--hidden': hidden,
       })}
-      style={{ width: adjustedWidth, height: adjustedHeight, top, left }}
+      style={{
+        width: (adjustedWidth ?? 0) + 1,
+        height: (adjustedHeight ?? 0) + 1,
+        top,
+        left,
+      }}
     />
   );
 };

package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx

@@ -92,8 +92,8 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       setContextMenu({
         open: true,
         position: {
-          x: event.pageX - 50,
-          y: event.pageY - 260,
+          x: event.pageX ,
+          y: event.pageY ,
         },
         options: options,
       });

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss

@@ -3,6 +3,7 @@
 .ff-excel {
   display: flex;
   flex-direction: column;
+  height: 100%;
 
   .ff-excel-toolbar-container {
     position: relative;
@@ -12,7 +13,7 @@
     margin-bottom: 20px;
   }
 
-  .ff-spreadsheet {
+  .ff-excel-spreadsheet {
     --background-color: var(--drawer-footer-bg);
     --text-color: var(--text-color);
     --readonly-text-color: var(--toggle-strip-active);
@@ -30,10 +31,29 @@
     display: inline-block;
   }
 
+  .ff-excel-header-hider {
+    position: absolute;
+    background-color: var(--excel-header-border);
+    z-index: 500;
+    left: -1px;
+    top: 59px;
+  }
+
+  .ff-excel-header-column-hider {
+    height: 34px;
+    width: 100%;
+  }
+
+  .ff-excel-header-row-hider {
+    bottom: 0px;
+    width: 60px;
+  }
+
   .ff-spreadsheet-active-cell {
     position: absolute;
-    border: 2px solid var(--outline-color);
+    border: 1px solid var(--outline-color);
     box-sizing: border-box;
+    z-index: 100;
   }
 
   .ff-spreadsheet-active-cell--edit {
@@ -87,7 +107,6 @@
   }
 
   .ff-spreadsheet-header {
-    border: 0.1px solid var(--border-color);
     background-color: var(--header-background-color);
     color: var(--readonly-text-color);
     text-align: center;
@@ -99,7 +118,8 @@
 
   .ff-spreadsheet-corner-header {
     position: fixed;
-    z-index: 3000;
+    z-index: 2000;
+    border: 2px solid var(--border-color);
   }
 
   .ff-spreadsheet-row-header {
@@ -107,16 +127,15 @@
   }
 
   .corner-header {
-    border: 1px solid var(--border-color);
     background-color: var(--header-background-color);
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1100;
-    top: -1px;
-    width: 60px;
-    height: 34px;
+    z-index: 1500;
+    top: -2px;
+    width: 58px;
+    height: 32px;
     left: -1px;
   }
 
@@ -169,7 +188,7 @@
 
   .ff-spreadsheet-floating-rect--selected {
     background: var(--outline-background-color);
-    border: 2px var(--outline-color) solid;
+    border: 1px var(--outline-color) solid;
   }
 
   .ff-spreadsheet-floating-rect--dragging {
@@ -177,6 +196,6 @@
   }
 
   .ff-spreadsheet-floating-rect--copied {
-    border: 2px var(--outline-color) dashed;
+    border: 1px var(--outline-color) dashed;
   }
 }

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx

@@ -15,6 +15,7 @@ import {
   calculateSpreadsheetSize,
   getCSV,
   shouldHandleClipboardEvent,
+  isFocusedWithin,
 } from './util';
 
 import DefaultTable from './Table';
@@ -98,7 +99,7 @@ export type Props<CellType extends Types.CellBase> = {
   /** Callback called when the Spreadsheet's evaluated data changes. */
   onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
   setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
-    /** Set your dynamic sheet Height*/
+  /** Set your dynamic sheet Height*/
   sheetHeight: string;
 };
 
@@ -119,6 +120,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     HeaderRow = DefaultHeaderRow,
     DataEditor = DefaultDataEditor,
     DataViewer = DefaultDataViewer,
+    onSelect = () => {},
+    onActivate = () => {},
     onEvaluatedDataChange = () => {},
   } = props;
   type State = Types.StoreState<CellType>;
@@ -162,6 +165,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const copy = useAction(Actions.copy);
   const paste = useAction(Actions.paste);
   const onKeyDownAction = useAction(Actions.keyDown);
+  const onKeyPress = useAction(Actions.keyPress);
   const onDragStart = useAction(Actions.dragStart);
   const onDragEnd = useAction(Actions.dragEnd);
   const setData = useAction(Actions.setData);
@@ -183,6 +187,23 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const deleteRow = useAction(Actions.deleteRow);
   const deleteColumn = useAction(Actions.deleteColumn);
 
+  // Track active
+  const prevActiveRef = React.useRef<Point.Point | null>(state.active);
+  React.useEffect(() => {
+    if (state.active !== prevActiveRef.current) {
+      if (state.active) {
+        onActivate(state.active);
+      } else {
+        const root = rootRef.current;
+        if (root && isFocusedWithin(root) && document.activeElement) {
+          (document.activeElement as HTMLElement).blur();
+        }
+      }
+    }
+
+    prevActiveRef.current = state.active;
+  }, [onActivate, state.active]);
+
   const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
     state.model.evaluatedData
   );
@@ -194,6 +215,17 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     prevEvaluatedDataRef.current = state.model.evaluatedData;
   }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
 
+  const prevSelectedRef = React.useRef<Selection>(state.selected);
+  React.useEffect(() => {
+    if (!state.selected.equals(prevSelectedRef.current)) {
+      if (!props.selected || !state.selected.equals(props.selected)) {
+        onSelect(state.selected);
+      }
+    }
+
+    prevSelectedRef.current = state.selected;
+  }, [state.selected, onSelect, props.selected]);
+
   // Update selection when props.selected changes
   const prevSelectedPropRef = React.useRef<Selection | undefined>(
     props.selected
@@ -446,25 +478,32 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const rootNode = React.useMemo(
     () => (
       <div className="ff-excel">
-      <div className="ff-excel-toolbar-container">
-        <ExcelToolBar
-          onBold={onBold}
-          onItalic={onItalic}
-          setUnderlineType={setUnderlineType}
-          setColor={setColor}
-          setBorderType={setBorderType}
-          setFontSize={setFontSize}
-          setFontFamily={setFontFamily}
-          setTextAlign={setTextAlign}
-          setBackgroundColor={setBackgroundColor}
-          setFormatePainter={setFormatePainter}
-        />
-      </div>
+        <div className="ff-excel-header-hider ff-excel-header-column-hider"></div>
+        <div className="ff-excel-header-hider ff-excel-header-row-hider"></div>
+        <div className="ff-excel-toolbar-container">
+          <ExcelToolBar
+            onBold={onBold}
+            onItalic={onItalic}
+            setUnderlineType={setUnderlineType}
+            setColor={setColor}
+            setBorderType={setBorderType}
+            setFontSize={setFontSize}
+            setFontFamily={setFontFamily}
+            setTextAlign={setTextAlign}
+            setBackgroundColor={setBackgroundColor}
+            setFormatePainter={setFormatePainter}
+          />
+        </div>
         <div
           ref={rootRef}
-          style={{height:sheetHeight}}
-          className={classNames('ff-spreadsheet', className)}
-          onKeyDown={handleKeyDown}
+          style={{ height: sheetHeight }}
+          className={classNames('ff-excel-spreadsheet', className)}
+          onKeyPress={(e) => {
+            onKeyPress(e);
+          }}
+          onKeyDown={(e) => {
+            handleKeyDown(e);
+          }}
           onMouseMove={handleMouseMove}
         >
           {tableNode}
@@ -474,7 +513,14 @@ const Spreadsheet = <CellType extends Types.CellBase>(
         </div>
       </div>
     ),
-    [className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]
+    [
+      className,
+      onKeyPress,
+      handleKeyDown,
+      handleMouseMove,
+      tableNode,
+      activeCellNode,
+    ]
   );
 
   return (