pixel-react 1.8.3 → 1.8.5

package/src/components/Drawer/Drawer.tsx

@@ -19,6 +19,7 @@ const Drawer: FC<DrawerProps> = ({
   leftSecondaryButtonProps = {},
   showEditButton = false,
   onEdit = () => {},
+  onCollapse = () => {},
   overlay = false,
   isFooterRequired = true,
   footerContent = null,
@@ -48,7 +49,10 @@ const Drawer: FC<DrawerProps> = ({
   handleEsc(onClose);
 
   const toggleExpand = () => {
-    setIsExpanded((prev) => !prev);
+    setIsExpanded((prev) => {
+      onCollapse(!prev);
+      return !prev;
+    });
   };
 
   const onCancel = () => {

package/src/components/Drawer/Types.ts

@@ -158,4 +158,8 @@ export interface DrawerProps {
    * Custom overflow for the drawer
    */
   overflow?: string;
+  /**
+   * 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.scss

@@ -1,5 +1,5 @@
 .ff-excel-menu {
-  position: absolute;
+  position: fixed;
   border: 1px solid var(--option-card-border-color);
   background: var(--option-card-bg-color);
   border-radius: 4px;

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

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

@@ -23,24 +23,32 @@ interface ExcelFileProps {
 
   /** 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;
-
+  contextHeightPositioning?: number;
+  contextWidthPositioning?: number;
   /** Set your dynamic sheet Height*/
   sheetHeight?: string;
 }
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
+  contextOption,
   sheetHeight = '100%',
+  contextHeightPositioning = 0,
+  contextWidthPositioning = 0,
   onSave = (saveData) => {
     saveData();
   },
@@ -84,6 +92,11 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     Matrix.Matrix<CellBase>
   >([[EmptyRow]]);
 
+  const [position, setPosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+
   const pageRef = useRef<string>('');
   const sheetRef = useRef<HTMLDivElement | null>(null);
 
@@ -226,7 +239,6 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       }),
     };
     onSave(savedData);
-    toast.success('File saved successfully!');
   };
 
   const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
@@ -430,21 +442,29 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.pageX - 200,
-        y: event.pageY - 250,
+        x: event.pageX,
+        y: event.pageY,
       },
       options: options,
     });
   };
+  const setContextPosition = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setPosition({
+      x: event.pageX + contextWidthPositioning,
+      y: event.pageY + contextHeightPositioning,
+    });
+  };
 
   return (
     <>
       {sheetNames.length > 0 && (
-        <>
+        <div className="ff-excel" onContextMenu={setContextPosition}>
           <div ref={sheetRef} className="ff-excel-sheet">
             <Spreadsheet
               sheetHeight={sheetHeight}
               setContextMenu={setContextMenu}
+              contextOption={contextOption}
               data={selectedSheetData}
               onEvaluatedDataChange={onEvaluateChange}
             />
@@ -501,9 +521,11 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
               ))}
             </div>
           </div>
-          {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
+          {contextMenu.open && (
+            <ExcelContextMenu contextMenu={contextMenu} position={position} />
+          )}
           <Toastify />
-        </>
+        </div>
       )}
     </>
   );

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) {
@@ -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}

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/DataViewer.tsx

@@ -10,54 +10,15 @@ export const FALSE_TEXT = 'FALSE';
 const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
   cell,
   evaluatedCell,
-  setContextMenu,//Todo
 }: Types.DataViewerProps<Cell>): React.ReactElement => {
-
   const value = getValue(cell, evaluatedCell);
 
-  const options = [
-    {
-      label: 'Dynamic Cell One',
-      value: 'Dynamic Cell One',
-      iconName: 'plus_icon',
-      action: () => {
-      },
-      disable: false,
-    },
-    {
-      label: 'Dynamic Cell Two',
-      value: 'Dynamic Cell Two',
-      iconName: 'plus_icon',
-      action: () => {
-      },
-      disable: false,
-    },
-  ];
-  
-  const contextClick = React.useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-
-      setContextMenu({
-        open: true,
-        position: {
-          x: event.pageX - 50,
-          y: event.pageY - 260,
-        },
-        options: options,
-      });
-    },
-    [ setContextMenu]
-  );
-
   return typeof value === 'boolean' ? (
-    <span
-      className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
+    <span className="ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean">
       {convertBooleanToText(value)}
     </span>
   ) : (
     <span
-    onContextMenu={contextClick}
       className={classNames('ff-spreadsheet-data-viewer', {
         'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value),
       })}

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

@@ -51,7 +51,7 @@
 
   .ff-spreadsheet-active-cell {
     position: absolute;
-    border: 1px solid var(--outline-color);
+    border: 2px solid var(--outline-color);
     box-sizing: border-box;
     z-index: 100;
   }
@@ -188,7 +188,7 @@
 
   .ff-spreadsheet-floating-rect--selected {
     background: var(--outline-background-color);
-    border: 1px var(--outline-color) solid;
+    border: 2px var(--outline-color) solid;
   }
 
   .ff-spreadsheet-floating-rect--dragging {
@@ -196,6 +196,6 @@
   }
 
   .ff-spreadsheet-floating-rect--copied {
-    border: 1px var(--outline-color) dashed;
+    border: 2px var(--outline-color) dashed;
   }
 }

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

@@ -101,6 +101,15 @@ export type Props<CellType extends Types.CellBase> = {
   setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
   /** Set your dynamic sheet Height*/
   sheetHeight: string;
+  contextOption?: {
+    open: boolean;
+    options: {
+      label: string;
+      value: string;
+      iconName: string;
+      action: () => void;
+    }[];
+  };
 };
 
 /**
@@ -123,6 +132,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     onSelect = () => {},
     onActivate = () => {},
     onEvaluatedDataChange = () => {},
+    contextOption,
   } = props;
   type State = Types.StoreState<CellType>;
 
@@ -440,7 +450,6 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 key={columnNumber}
                 row={rowNumber}
                 column={columnNumber}
-                setContextMenu={props.setContextMenu}
                 // @ts-ignore
                 DataViewer={DataViewer}
               />
@@ -468,6 +477,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const activeCellNode = React.useMemo(
     () => (
       <ActiveCell
+        contextOption={contextOption}
+        setContextMenu={props.setContextMenu}
         // @ts-ignore
         DataEditor={DataEditor}
       />

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts

@@ -190,10 +190,10 @@ export function applyBorderToCells(
     return currentData;
   }
 
-  const { start, end } = selectedRange;
-
   let updatedData = currentData;
 
+  const { start, end } = selectedRange;
+
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
       const currentCell = Matrix.get({ row, column: col }, updatedData);
@@ -229,6 +229,7 @@ export function applyBorderToCells(
             borderRight: `2px solid ${color}`,
           };
           break;
+
         case 'border-left':
           updatedCell.style = {
             ...currentCell.style,

package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts

@@ -116,8 +116,6 @@ export type CellComponentProps<Cell extends CellBase = CellBase> = {
   setCellDimensions: (point: Point, dimensions: Dimensions) => void;
   /** Set data of the cell */
   setCellData: (cell: Cell) => void;
-
-  setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
 };
 
 /** Type of the Spreadsheet Cell component */
@@ -134,7 +132,6 @@ export type DataViewerProps<Cell extends CellBase = CellBase> =
   DataComponentProps<Cell> & {
     /** Set data of the cell */
     setCellData: (cell: Cell) => void;
-    setContextMenu: React.Dispatch<React.SetStateAction<ContextMenuState>>;
     evaluatedCell: Cell | undefined;
   };