pixel-react-excel-sheet 1.0.38 → 1.0.40

package/src/components/DatePicker/DatePicker.tsx

@@ -27,6 +27,8 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   error,
   helperText = '',
   dateOnly = false,
+  className,
+  zIndex = 10,
 }) => {
   const [timeValue, setTimeValue] = useState<string>('');
   const [selectedDate, setSelectedDate] = useState<Date | undefined>();
@@ -36,17 +38,21 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
     new Date()
   );
   const [view, setView] = useState<string>('days');
+
+  const selectedDateRef = useRef<Date | undefined>(undefined);
   const [startYear, setStartYear] = useState(() => {
     const currentYear =
       selectedMonth?.getFullYear() ?? new Date().getFullYear();
     return currentYear - (currentYear % 12); // Set to the first year in the 12-year range
   });
-  const [datePickerPosition, setDatePickerPosition] = useState<
-    'top' | 'bottom'
-  >('bottom');
+
   const pickerRef = useRef<HTMLDivElement>(null); // Ref to track the picker
   const containerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    selectedDateRef.current = selectedDate;
+  }, [selectedDate]);
+
   useEffect(() => {
     if (value) {
       setTimeValue(formatTimeStr(value));
@@ -79,30 +85,32 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
     const adjustPosition = () => {
       if (containerRef.current && pickerRef.current) {
         const relativeRect = containerRef.current.getBoundingClientRect();
-        const absoluteRect = pickerRef.current.getBoundingClientRect();
+        const pickerHeight = pickerRef.current.offsetHeight;
+        const spacing = 5; // spacing in pixels
 
         const spaceBelow = window.innerHeight - relativeRect.bottom;
         const spaceAbove = relativeRect.top;
 
-        // Check if there is more space above than below
-        if (
-          spaceBelow < absoluteRect.height &&
-          spaceAbove >= absoluteRect.height
-        ) {
-          setDatePickerPosition('top');
-        } else {
-          setDatePickerPosition('bottom');
+        let top = relativeRect.bottom + window.scrollY + spacing; // Default position to below
+        if (spaceBelow < pickerHeight && spaceAbove >= pickerHeight) {
+          top = relativeRect.top + window.scrollY - pickerHeight - spacing; // Place above
         }
+
+        // Horizontal position: align to container with optional adjustments
+        const left = relativeRect.left + window.scrollX;
+
+        pickerRef.current.style.top = `${top}px`;
+        pickerRef.current.style.left = `${left}px`;
       }
     };
 
-    // Initial check
+    // Initial adjustment
     adjustPosition();
 
-    // Adjust position on window resize
+    // Recalculate on resize
     window.addEventListener('resize', adjustPosition);
     return () => window.removeEventListener('resize', adjustPosition);
-  }, []);
+  }, [isPickerOpen]);
 
   const calendarStyle = {
     '--rdp-day-width': calendarWidth ? `${calendarWidth / 7 - 4}px` : undefined,
@@ -143,7 +151,8 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   };
 
   const handleSave = () => {
-    onChange(selectedDate);
+    console.log('selectedDate1', selectedDateRef.current);
+    onChange(selectedDateRef.current);
     resetAndCloseDatePicker();
   };
 
@@ -370,7 +379,7 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   };
 
   return (
-    <div className="ff-date-picker" ref={containerRef}>
+    <div className={`ff-date-picker ${className}`} ref={containerRef}>
       <div className="ff-datepicker-input-container">
         <div className="ff-input-with-icon ff-date-input-field">
           <Icon
@@ -423,8 +432,7 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
           className="ff-date-picker-container"
           ref={pickerRef}
           style={{
-            top: datePickerPosition === 'top' ? 'auto' : '110%',
-            bottom: datePickerPosition === 'top' ? '110%' : 'auto',
+            zIndex,
           }}
         >
           <div className="ff-calendar-container">

package/src/components/DatePicker/types.ts

@@ -63,6 +63,10 @@ export interface DatePickerProps {
    * Select only date .
    */
   dateOnly?: boolean;
+
+  className?: string;
+
+  zIndex?: number; 
 }
 
 export type DateValue = Date | undefined;

package/src/components/Drawer/Drawer.stories.tsx

@@ -143,7 +143,7 @@ export const Controlled: Story = {
         <Drawer
           {...defaultArgs}
           isOpen={showModal}
-          onCollapse={(value) => {}}
+          onCollapse={() => {}}
           onClose={() => setShowModal(false)}
           isFooterRequired={true}
           _isExpanded={false}

package/src/components/Drawer/Types.ts

@@ -158,6 +158,8 @@ export interface DrawerProps {
    * Custom overflow for the drawer
    */
   overflow?: string;
-  
-  onCollapse?:(value:boolean)=> void
+  /**
+   * Callback function returns a boolean value when the drawer is collapsed.
+   */
+  onCollapse?: (value: boolean) => void;
 }

package/src/components/Editor/Editor.scss

@@ -1,16 +1,13 @@
-/* Editor container to add padding and rounded corners */
-.monaco-editor {
-  border-radius: 6px;
-  border-top: 1px solid var(--ff-editor-border-color);
-  border-right: 1px dashed var(--ff-editor-border-color);
-  border-bottom: 1px dashed var(--ff-editor-border-color);
-  border-left: 1px solid var(--ff-editor-border-color);
+@mixin folding-icon-styles($color: var(--base-bg-color), $zIndex: 999999, $opacity: 1) {
+  color: $color !important;
+  fill: $color !important;
+  z-index: $zIndex !important;
+  opacity: $opacity !important;
 }
 
 /* Style for the line number gutter */
 .monaco-editor .margin {
   background-color: var(--ff-editor-gutter-color) !important;
-  width: 32px !important;
 }
 
 /* Style for the line numbers */
@@ -34,10 +31,6 @@
   width: 100% !important;
 }
 
-.monaco-scrollable-element {
-  left: 32px !important;
-}
-
 .monaco-editor .current-line-background {
   background-color: var(--ff-editor-line-bg) !important;
 }
@@ -46,11 +39,23 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  .ff-top-toolbar {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 10px;
+  .monaco-editor {
+    border-radius: 6px;
+    border-top: 1px solid var(--ff-editor-border-color);
+    border-right: 1px dashed var(--ff-editor-border-color);
+    border-bottom: 1px dashed var(--ff-editor-border-color);
+    border-left: 1px solid var(--ff-editor-border-color);
+  }
+  .monaco-editor .cldr.codicon.codicon-folding-collapsed,
+  .monaco-editor .cldr.codicon.codicon-folding-expanded,
+  .monaco-editor .cldr.codicon.codicon-folding-manual-collapsed,
+  .monaco-editor .cldr.codicon.codicon-folding-manual-expanded {
+   @include folding-icon-styles()
+  }
+  .monaco-editor .cldr.codicon.codicon-folding-expanded {
+   @include folding-icon-styles()
+  }
+  .cldr.codicon.codicon-folding-manual-collapsed {
+    @include folding-icon-styles()
   }
 }

package/src/components/Editor/Editor.tsx

@@ -218,8 +218,8 @@ const Editor = forwardRef<any, EditorProps>(
     return (
       <div style={{ width, height }} className="ff-editor-container">
         <MonacoEditor
-          height="90%"
-          width="100%"
+          height={height}
+          width={width}
           language={language}
           value={value}
           options={{

package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx

@@ -5,14 +5,17 @@ import { ContextMenuState } from '../ExcelFile/ExcelFileComponents/types';
 
 type ExcelContextMenuProps = {
   contextMenu: ContextMenuState;
-  position:{ x: number; y: number }
+  position: { x: number; y: number };
 };
 
-const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({ contextMenu,position}) => {
+const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({
+  contextMenu,
+  position,
+}) => {
   return (
     <div
       className="ff-excel-menu"
-      style={{ left:position.x, top:position.y }}
+      style={{ left: position.x, top: position.y }}
     >
       {contextMenu.options.map((option) => (
         <div

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

@@ -1,55 +1,59 @@
-.ff-excel-sheet {
+.ff-excel {
   position: relative;
-  top: 0;
-}
-
-.ff-excel-sheet-bar {
-  position: static;
-  max-width: 100%;
-  margin-left: 60px;
-  display: flex;
-  height: 36px;
-  align-items: center;
-  color: var(--brand2-color);
-  box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
 
-  .ff-excel-add-sheet-set {
+  .ff-excel-sheet {
     position: relative;
-    background-color: var(--tab-bg-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
     top: 0;
-    left: 0px;
-    height: 100%;
-
-    .ff-excel-add-sheet-icon {
-      padding: 8px 10px;
-    }
   }
 
-  .ff-excel-tab-container {
-    height: 36px;
+  .ff-excel-sheet-bar {
+    position: static;
+    max-width: 100%;
+    margin-left: 60px;
     display: flex;
-    overflow-x: auto;
+    height: 36px;
     align-items: center;
-    scrollbar-width: none;
-    
-    .ff-excel-tab-list {
-      margin-top: 2px;
-      padding: 10px 9px;
-      min-width: max-content;
-      cursor: pointer;
+    color: var(--brand2-color);
+    box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
+
+    .ff-excel-add-sheet-set {
+      position: relative;
+      background-color: var(--tab-bg-color);
       display: flex;
-      background-color: var(--hover-color);
-      &.active {
-        background-color: var(--excel-sheet-button-color);
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      top: 0;
+      left: 0px;
+      height: 100%;
+
+      .ff-excel-add-sheet-icon {
+        padding: 8px 10px;
       }
+    }
+
+    .ff-excel-tab-container {
+      height: 36px;
+      display: flex;
+      overflow-x: auto;
+      align-items: center;
+      scrollbar-width: none;
+
+      .ff-excel-tab-list {
+        margin-top: 2px;
+        padding: 10px 9px;
+        min-width: max-content;
+        cursor: pointer;
+        display: flex;
+        background-color: var(--hover-color);
+        &.active {
+          background-color: var(--excel-sheet-button-color);
+        }
 
-      &:focus {
-        outline: none;
-        text-decoration: none;
+        &:focus {
+          outline: none;
+          text-decoration: none;
+        }
       }
     }
   }

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

@@ -17,36 +17,36 @@ import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
 
 interface ExcelFileProps {
   /** The Excel data containing sheets and their content */
-  excelData: {
-    sheets: WorkSheet[];
-  };
-
-  heightType?: string;
+  excelData: WorkSheet[];
 
   /** Optional: Provide context menu options for actions like right-click */
   contextOption?: {
-    name: string;
-    title: React.ReactNode;
-    action: () => void;
-  }[];
+    open: boolean;
+    options: {
+      label: string;
+      value: string;
+      iconName: string;
+      action: () => void;
+    }[];
+  };
 
   /** Controls whether the toolbar is shown, disabled, or hidden */
   toolbar?: 'show' | 'disable' | 'hide';
 
   /** Callback function to save the Excel data */
   onSave?: (saveData: any) => void;
-  contextHeight?: number;
-  contextWidth?: number;
+  contextHeightPositioning?: number;
+  contextWidthPositioning?: number;
   /** Set your dynamic sheet Height*/
   sheetHeight?: string;
 }
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
+  contextOption,
   sheetHeight = '100%',
-  heightType = 'page',
-  contextHeight = 0,
-  contextWidth = 0,
+  contextHeightPositioning = 0,
+  contextWidthPositioning = 0,
   onSave = (saveData) => {
     saveData();
   },
@@ -128,49 +128,57 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
 
   useEffect(() => {
     const payload = excelData;
-    const sheetNames = payload.sheets.map((e) => e.sheetName);
-    setSheetNames(sheetNames);
-    if (sheetNames.length > 0) {
-      pageRef.current = sheetNames[0] ? sheetNames[0] : '';
-      setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
-    }
-    const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
-    payload.sheets.forEach((sheet) => {
-      const sheetName = sheet.sheetName;
-      const json = sheet.data;
-      const maxRows = Math.max(26, json.length + 2);
-      const maxCols = Math.max(
-        26,
-        Math.max(...json.map((row) => row.length)) + 2
-      );
-
-      let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
-        { length: maxRows },
-        () => Array.from({ length: maxCols }, () => EmptyRow)
-      );
-      json.forEach((row, rowIndex) => {
-        row.forEach((cell, colIndex) => {
-          if (rowIndex < maxRows && colIndex < maxCols) {
-            if (!spreadsheetData[rowIndex]) {
-              spreadsheetData[rowIndex] = [];
+    if (payload) {
+      const sheetNames = payload.map((e) => e.sheetName);
+      setSheetNames(sheetNames);
+
+      if (!checkEmpty(sheetNames.length)) {
+        pageRef.current = sheetNames[0] ? sheetNames[0] : ''; //Ternary is required, must use ''
+        setSelectedSheet({
+          name: sheetNames[0] ? sheetNames[0] : '', //Ternary is required, must use ''
+          index: 0,
+        });
+      }
+      const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
+      payload.forEach((sheet) => {
+        const sheetName = sheet.sheetName;
+        const json = sheet.data;
+        const maxRows = Math.max(26, json.length + 2);
+        const maxCols = Math.max(
+          26,
+          Math.max(...json.map((row) => row.length)) + 2
+        );
+
+        let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
+          { length: maxRows },
+          () => Array.from({ length: maxCols }, () => EmptyRow)
+        );
+
+        json.forEach((row, rowIndex) => {
+          row.forEach((cell, colIndex) => {
+            if (rowIndex < maxRows && colIndex < maxCols) {
+              if (!spreadsheetData[rowIndex]) {
+                spreadsheetData[rowIndex] = [];
+              }
+              spreadsheetData[rowIndex][colIndex] = {
+                value: checkVal(cell.value),
+                style: convertStyleToFrontend(cell?.styles), //TODO remove 's' for Style
+                type: true,
+              };
             }
-            spreadsheetData[rowIndex][colIndex] = {
-              value: checkVal(cell.value),
-              style: convertStyleToFrontend(cell?.style),
-              type: true,
-            };
-          }
+          });
         });
-      });
 
-      newWorksheetsData[sheetName] = spreadsheetData;
-    });
-    setWorksheetsData(newWorksheetsData);
-    const firstSheetName = Object.keys(newWorksheetsData)[0];
-    if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
-      setSelectedSheetData(newWorksheetsData[firstSheetName]);
+        newWorksheetsData[sheetName] = spreadsheetData;
+      });
+      setWorksheetsData(newWorksheetsData);
+      const firstSheetName = Object.keys(newWorksheetsData)[0];
+      if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
+        setSelectedSheetData(newWorksheetsData[firstSheetName]);
+      }
     }
-  }, []);
+  }, [excelData]);
+
   const handleSave = React.useCallback(
     (event: KeyboardEvent) => {
       if (event.ctrlKey && event.key === 's') {
@@ -237,7 +245,6 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       }),
     };
     onSave(savedData);
-    toast.success('File saved successfully!');
   };
 
   const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
@@ -422,10 +429,8 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
 
   React.useEffect(() => {
     document.addEventListener('click', handleClickOutside);
-    // document.addEventListener('contextmenu', handleClickOutside);
     return () => {
       document.removeEventListener('click', handleClickOutside);
-      // document.removeEventListener('contextmenu', handleClickOutside);
     };
   }, [handleClickOutside]);
 
@@ -449,22 +454,23 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       options: options,
     });
   };
+  const setContextPosition = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setPosition({
+      x: event.pageX + contextWidthPositioning,
+      y: event.pageY + contextHeightPositioning,
+    });
+  };
 
   return (
     <>
       {sheetNames.length > 0 && (
-        <div
-          style={{ position: 'relative' }}
-          onContextMenu={(event) => {
-            const xPosition = heightType === 'page' ? event.pageX : event.clientX;
-            const yPosition = heightType === 'page' ? event.pageY : event.clientY;
-            setPosition({ x: xPosition+contextWidth, y:yPosition+contextHeight});
-          }}
-        >
+        <div className="ff-excel" onContextMenu={setContextPosition}>
           <div ref={sheetRef} className="ff-excel-sheet">
             <Spreadsheet
               sheetHeight={sheetHeight}
               setContextMenu={setContextMenu}
+              contextOption={contextOption}
               data={selectedSheetData}
               onEvaluatedDataChange={onEvaluateChange}
             />

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

@@ -10,6 +10,17 @@ import * as Matrix from './matrix';
 
 type Props = {
   DataEditor: Types.DataEditorComponent;
+  setContextMenu:React.Dispatch<React.SetStateAction<ContextMenuState>>; 
+  contextOption?: {
+    open: boolean;
+    options: {
+      label: string;
+      value: string;
+      iconName: string;
+      action: () => void;
+    }[];
+  };
+
 };
 
 const ActiveCell: React.FC<Props> = (props) => {
@@ -53,7 +64,7 @@ const ActiveCell: React.FC<Props> = (props) => {
       width: (dimensionValue?.width ?? 0) + 1,
     };
     return dimensionValue;
-  });
+  });``
 
   const hidden = React.useMemo(
     () => !active || !dimensions,
@@ -126,6 +137,22 @@ const ActiveCell: React.FC<Props> = (props) => {
     }
   }, [activate, autoFill, active]);
 
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      
+      props.setContextMenu({
+        open:  props.contextOption?.open ?? false,
+        position: {
+          x: event.pageX - 450,
+          y: event.pageY - 260,
+        },
+        options: props.contextOption?.options || [], 
+      });
+    },
+    [props]
+  );
+  
   return hidden ? null : (
     <div
       ref={rootRef}
@@ -134,6 +161,7 @@ const ActiveCell: React.FC<Props> = (props) => {
         `ff-spreadsheet-active-cell--${mode}`
       )}
       style={dimensions}
+      onContextMenu={contextClick}
       onClick={mode === 'view' && !readOnly ? edit : undefined}
       tabIndex={0}
     >

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

@@ -22,7 +22,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   activate,
   setCellDimensions,
   setCellData,
-  setContextMenu,
 }): React.ReactElement => {
   const rootRef = React.useRef<HTMLTableCellElement | null>(null);
   const point = React.useMemo(
@@ -33,23 +32,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     [row, column]
   );
 
-  let options = [
-    {
-      label: 'Get data from Header',
-      value: 'Get data from Header',
-      iconName: 'success',
-      disable: false,
-      action: () => {},
-    },
-    {
-      label: 'Get Cell Value',
-      value: 'Get Cell Value',
-      iconName: 'success',
-      disable: false,
-      action: () => {},
-    },
-  ];
-
   const handleMouseDown = React.useCallback(
     (event: React.MouseEvent<HTMLTableCellElement>) => {
       if (mode === 'view') {
@@ -75,22 +57,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     [setCellDimensions, select, dragging, point]
   );
 
-  const contextClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-      select(point);
-      setContextMenu({
-        open: true,
-        position: {
-          x: event.pageX - 50,
-          y: event.pageY - 260,
-        },
-        options: options,
-      });
-    },
-    [setContextMenu, select, point]
-  );
-
   React.useEffect(() => {
     const root = rootRef.current;
     if (selected && root) {
@@ -104,7 +70,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   if (data && data.DataViewer) {
     // @ts-ignore
     DataViewer = data.DataViewer;
-  }
+  }  
 
   return (
     <td
@@ -115,12 +81,10 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
       })}
       onMouseEnter={handleMouseOver}
       onMouseDown={handleMouseDown}
-      onContextMenu={contextClick}
       tabIndex={0}
     >
       <DataViewer
         row={row}
-        setContextMenu={setContextMenu}
         column={column}
         cell={data}
         evaluatedCell={evaluatedData}