pixel-react 1.4.3 → 1.4.4

package/src/assets/icons/xml_file_type.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4273 4.75176L10.7936 0.117383C10.7467 0.0705078 10.6833 0.0439453 10.617 0.0439453H5.36828C4.14672 0.0439453 3.15297 1.03801 3.15297 2.25957V6.64426H1.20859C0.832969 6.64426 0.527344 6.94988 0.527344 7.32551V11.2418C0.527344 11.6174 0.832969 11.923 1.20859 11.923H3.15297V13.8283C3.15297 15.0499 4.14672 16.0439 5.36828 16.0439H13.2852C14.5067 16.0439 15.5005 15.0499 15.5005 13.8283V4.92863C15.5005 4.86238 15.4742 4.79863 15.4273 4.75176ZM15.0008 13.8283C15.0008 14.7746 14.2311 15.5443 13.2852 15.5443H5.36828C4.42234 15.5443 3.65266 14.7746 3.65266 13.8283V11.923H11.8836C12.2592 11.923 12.5648 11.6174 12.5648 11.2418V7.32551C12.5648 6.94988 12.2592 6.64426 11.8836 6.64426H3.65266V2.25957C3.65266 1.31332 4.42234 0.543633 5.36828 0.543633H10.367V4.42801C10.367 4.84176 10.7033 5.17832 11.1164 5.17832H15.0008V13.8283Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.59742 9.91949L4.35242 11.0945H5.15742L4.04242 9.35949L5.13742 7.60449H4.34742L3.66742 8.77449L2.91242 7.60449H2.10742L3.22242 9.33449L2.12242 11.0945H2.91242L3.59742 9.91949ZM9.49516 11.0945V7.60449H8.70516L7.59516 10.1995L6.48516 7.60449H5.69016V11.0945H6.39016V8.82449L7.33016 11.0945H7.86016L8.79516 8.82449V11.0945H9.49516ZM12.0372 10.5395H10.8872V7.60449H10.1872V11.0945H12.0372V10.5395Z" fill="white"/>
+</svg>

package/src/components/AddResourceButton/AddButton.tsx

@@ -102,13 +102,13 @@ const AddButton = ({
             {directionalArrow.map(
               ({ direction, menuOptions }: DirectionalArrow, index: number) => (
                 <ArrowsButton
-                  key={index}
-                  direction={direction}
-                  onArrowClick={() => handleArrowClick(direction)}
-                  menuOptions={menuOptions}
-                  isActive={activeArrow === direction}
-                  variant={variant}
-                />
+                key={index}
+                direction={direction as 'top' | 'right' | 'down'}
+                onArrowClick={() => handleArrowClick(direction)}
+                menuOptions={menuOptions}
+                isActive={activeArrow === direction}
+                variant={variant}
+              />
               )
             )}
           </div>,

package/src/components/AddResourceButton/type.ts

@@ -53,7 +53,7 @@ export interface AddResourceButtonProps {
  * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
  */
 export interface DirectionalArrowButtonProps {
-  direction: string | 'top' | 'right' | 'down';
+  direction: 'top' | 'right' | 'down';
   menuOptions: {
     label: string;
     value: string | string[];

package/src/components/AttachmentButton/AttachmentButton.scss

@@ -2,8 +2,8 @@
   display: none;
 }
 .ff-attachment-files {
-  padding: 9px;
   display: flex;
   align-items: center;
   gap: 4px;
+  line-height: 15px;
 }

package/src/components/AttachmentButton/AttachmentButton.stories.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import AttachmentButton from './AttachmentButton';
+import React from 'react';
 
 const meta: Meta<typeof AttachmentButton> = {
   title: 'Components/AttachmentButton',

package/src/components/Button/Button.scss

@@ -3,7 +3,7 @@
 
 .ff-button {
   width: auto;
-  background-color: $primary-button-text-color;
+  background-color: var(--primary-button-text-color);
   border-radius: 4px;
   padding: 4px 8px;
   text-align: center;
@@ -37,18 +37,20 @@
       border-radius: 4px;
       padding: 0.6px;
 
-      background: $primary-button-border;
-      mask: linear-gradient($primary-button-text-color 0 0) content-box,
-        linear-gradient($primary-button-text-color 0 0);
+      background: var(--primary-button-border);
+      mask:
+        linear-gradient(var(--primary-button-text-color) 0 0) content-box,
+        linear-gradient(var(--primary-button-text-color) 0 0);
       mask-composite: exclude;
-      -webkit-mask: linear-gradient($primary-button-text-color 0 0) content-box,
-        linear-gradient($primary-button-text-color 0 0);
+      -webkit-mask:
+        linear-gradient(var(--primary-button-text-color) 0 0) content-box,
+        linear-gradient(var(--primary-button-text-color) 0 0);
       -webkit-mask-composite: destination-out;
       z-index: -1;
     }
 
     &:hover {
-      background: $primary-button-hover;
+      background: var(--primary-button-hover);
     }
 
     &:disabled {
@@ -69,27 +71,27 @@
   }
 
   &--primary {
-    background: $primary-button-color;
+    background: var(--primary-button-color);
 
     &:before {
-      background: $primary-button-border;
+      background: var(--primary-button-border);
     }
 
     &:hover {
-      background: $primary-button-hover;
+      background: var(--primary-button-hover);
     }
   }
 
   &--delete {
-    background: $delete-button-color;
-    color: $primary-button-text-color;
+    background: var(--delete-button-color);
+    color: var(--primary-button-text-color);
 
     &:before {
-      background: $delete-button-border;
+      background: var(--delete-button-border);
     }
 
     &:hover {
-      background: $delete-button-hover;
+      background: var(--delete-button-hover);
     }
   }
   &--warning {
@@ -99,20 +101,20 @@
 
   &--secondary {
     &:before {
-      background: $primary-button-border;
+      background: var(--primary-button-border);
     }
 
     &:hover {
-      background: $secondary-button-hover;
+      background: var(--secondary-button-hover);
     }
   }
 
   &--tertiary {
     border: none;
-    background: $tertiary-button-color;
+    background: var(--tertiary-button-color);
 
     &:hover {
-      background: $tertiary-button-hover;
+      background: var(--tertiary-button-hover);
     }
 
     &:disabled {
@@ -140,12 +142,12 @@
   }
 
   &-primary--text {
-    color: $primary-button-text-color;
+    color: var(--primary-button-text-color);
   }
 
   &-secondary--text,
   &-tertiary--text {
-    background: $secondary-button-color-text;
+    background: var(--secondary-button-color-text);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;

package/src/components/Button/Button.tsx

@@ -4,6 +4,7 @@ import '../../assets/styles/_colors.scss';
 import Icon from '../Icon';
 import { ButtonProps } from './types';
 import classNames from 'classnames';
+import Typography from '../Typography';
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
@@ -56,7 +57,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {iconPosition === 'left' && renderIcon()}
-        <div className={classNames(`ff-button-${variant}--text`)}>{label}</div>
+        <Typography
+          fontSize={10}
+          fontWeight="semi-bold"
+          className={classNames(`ff-button-${variant}--text`)}
+        >
+          {label}
+        </Typography>
         {iconPosition === 'right' && renderIcon()}
         {children}
       </button>

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx

@@ -141,7 +141,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <Typography
-                  fontSize={22}
+                  fontSize={20}
                   fontWeight="semi-bold"
                   className="ff-legend-value"
                   color={
@@ -152,7 +152,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                 >
                   {item.value} {showUnit && unit?.toUpperCase()}
                 </Typography>
-                <Typography fontSize={12} className="ff-legend-key">
+                <Typography fontSize={10} className="ff-legend-key">
                   {item.key}
                 </Typography>
               </div>

package/src/components/Drawer/Drawer.scss

@@ -6,6 +6,7 @@
     inset: 0;
     background-color: var(--drawer-title-color);
     opacity: 0.5;
+    z-index: 999;
   }
 
   .child-drawer-overlay {
@@ -17,7 +18,7 @@
     position: fixed;
     right: 0;
     bottom: 0;
-    top: 80px;
+    top: 87px;
     min-width: 450px;
     background-color: var(--primary-button-text-color);
     z-index: 999;
@@ -87,8 +88,6 @@
 
           .ff-expand-collapse-button {
             cursor: pointer;
-            height: 24px;
-            width: 24px;
             background-color: var(--button-bg-color);
             outline: none;
             border: none;
@@ -122,6 +121,8 @@
       justify-content: space-between;
       border-top: 1px solid var(--drawer-footer-border);
       z-index: 1000;
+      background-color: var(--base-bg-color);
+      transform: translateY(3px);
 
       .button-container {
         display: flex;

package/src/components/Drawer/Drawer.tsx

@@ -35,8 +35,9 @@ const Drawer: FC<DrawerProps> = ({
   rightTertiaryButtonProps = {},
   zIndex = 999,
   secondLayerZIndex = false,
+  top,
 }: DrawerProps) => {
-  const [isExpanded, setIsExpanded] = useState(_isExpanded);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const handleEsc = useEscapeKey('Escape');
 
@@ -84,7 +85,7 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
-        style={{ zIndex }}
+        style={{ zIndex, top }}
       >
         {showHeader && (
           <div
@@ -112,27 +113,22 @@ const Drawer: FC<DrawerProps> = ({
                       onClick={toggleExpand}
                     >
                       <Icon
-                        name={isExpanded ? 'logo' : 'logo'}
+                        name={isExpanded ? 'maximize_icon' : 'minimize_script'}
                         height={16}
                         width={16}
                       />
                     </button>
                   )}
-                  {isBackButtonVisible && (
-                    <button
-                      className="ff-expand-collapse-button"
-                      onClick={onClose}
-                    >
-                      {backButtonIcon || (
-                        <Icon
-                          name="error"
-                          height={16}
-                          width={16}
-                          hoverEffect={false}
-                        />
-                      )}
-                    </button>
-                  )}
+                  {isBackButtonVisible &&
+                    (backButtonIcon || (
+                      <Icon
+                        name="back_icon"
+                        height={16}
+                        width={16}
+                        hoverEffect
+                        onClick={onClose}
+                      />
+                    ))}
                   {title && <div className="ff-drawer-title">{title}</div>}
                 </div>
                 {_isCloseModalButtonVisible && (

package/src/components/Drawer/Types.ts

@@ -137,4 +137,8 @@ export interface DrawerProps {
    * Custom z-index for the secondary drawer
    */
   secondLayerZIndex?: boolean;
+  /**
+   * Custom top for the drawer
+   */
+  top?: string;
 }

package/src/components/Editor/Editor.tsx

@@ -41,16 +41,6 @@ const Editor: React.FC<EditorProps> = ({
   const [dropdownPosition, setDropdownPosition] =
     useState<dropdownPositionType>({ top: 0, left: 0 });
 
-  const editorOptions = {
-    lineNumbers: 'on',
-    wordWrap: 'on',
-    autoClosingBrackets: 'always',
-    scrollBeyondLastLine: false,
-    readOnly,
-    fontFamily: 'font-poppins',
-    theme,
-  };
-
   const handleEditorDidMount: OnMount = (editor: any) => {
     editorRef.current = editor;
 
@@ -187,7 +177,15 @@ const Editor: React.FC<EditorProps> = ({
         width="100%"
         language={contentType}
         value={value}
-        options={editorOptions}
+        options={{
+          lineNumbers: 'on',
+          wordWrap: 'on',
+          autoClosingBrackets: 'always',
+          scrollBeyondLastLine: false,
+          readOnly,
+          fontFamily: 'font-poppins',
+          theme,
+        }}
         onMount={handleEditorDidMount}
         onChange={(newValue, event) => handleChange(newValue, event)}
       />

package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss

@@ -0,0 +1,39 @@
+@use '../../../assets/styles/fonts';
+
+
+.ff-option-card {
+    position: absolute;
+    border: 1px solid var(--option-card-border-color);
+    background: var(--option-card-bg-color);
+    border-radius: 4px;
+    margin: 2px;
+    min-height: 32px;
+    min-width: 111px;
+    white-space: nowrap;
+    z-index: 100;
+
+    .ff-options {
+      @extend .fontSm;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      line-height: 16px;
+      gap: 8px;
+      &:hover {
+        background-color: var(--hover-color);
+      }
+      label {
+        cursor: pointer;
+      }
+    }
+
+    .ff-disable-option {
+      opacity: 0.5;
+      cursor: no-drop;
+      label {
+        cursor: no-drop;
+      }
+    }
+  }

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

@@ -0,0 +1,51 @@
+import Icon from '../../Icon';
+import './ExcelContextMenu.scss';
+import Typography from '../../Typography';
+import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
+import {
+  CellBase,
+  ContextMenuState,
+} from '../ExcelFile/ExcelFileComponents/types';
+
+type ExcelContextMenuProps = {
+  data: Matrix.Matrix<CellBase>;
+  contextMenu: ContextMenuState;
+  addRowTop: (data: Matrix.Matrix<CellBase>) => void;
+  addColumnLeft: (data: Matrix.Matrix<CellBase>) => void;
+  deleteRow: (data: Matrix.Matrix<CellBase>) => void;
+  deleteColumn: (data: Matrix.Matrix<CellBase>) => void;
+};
+
+const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({ contextMenu }) => {
+  return (
+    <div
+      className="ff-option-card"
+      style={{ left: contextMenu.position.x, top: contextMenu.position.y }}
+    >
+      {contextMenu.options.map((option) => (
+        <div
+          className={'ff-options'}
+          onClick={() => {
+            option.action();
+          }}
+        >
+          {option.iconName && (
+            <Icon
+              name={option.iconName}
+              height={16}
+              width={16}
+              color={
+                option.label.includes('Delete')
+                  ? 'var(--label-edit-error-text)'
+                  : 'var(--brand-color)'
+              }
+            />
+          )}
+          <Typography as="label">{option.label}</Typography>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ExcelContextMenu;

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

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { CellBase } from './ExcelFileComponents/index';
+import Spreadsheet, { CellBase } from './ExcelFileComponents/index';
 import * as Matrix from './ExcelFileComponents/matrix';
 import './ExcelFile.scss';
 import { Col, Row } from '../../GridLayout/GridLayout';
@@ -71,7 +71,6 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       pageRef.current = sheetNames[0] ? sheetNames[0] : '';
       setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
     }
-    onSave()
     const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
     payload.sheets.forEach((sheet) => {
       const sheetName = sheet.sheetName;
@@ -110,10 +109,10 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     }
   }, []);
 
-  // const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
-  //   setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
-  //   onSave()
-  // };
+  const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
+    setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
+    onSave()
+  };
 
   const [editingSheet, setEditingSheet] = useState<number | null>(null);
 
@@ -245,10 +244,10 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       {sheetNames.length > 0 && (
         <div className="excel-book">
           <div ref={sheetRef} className="excel-sheet">
-            {/* <Spreadsheet
+            <Spreadsheet
               data={selectedSheetData}
               onEvaluatedDataChange={onEvaluateChange}
-            /> */}
+            />
           </div>
           <Row className="sheet-bar">
             <Col size={0} className="add-sheet-icon">

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

@@ -22,6 +22,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   activate,
   setCellDimensions,
   setCellData,
+  setContextMenu,
 }): React.ReactElement => {
   const [isDotDragging, setIsDotDragging] = React.useState(false);
   const [first, setFirst] = React.useState(true);
@@ -34,6 +35,23 @@ 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') {
@@ -84,6 +102,22 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     [setCellDimensions, select, dragging, point, isDotDragging]
   );
 
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      select(point);
+      setContextMenu({
+        open: true,
+        position: {
+          x: event.clientX,
+          y: event.clientY - 50,
+        },
+        options: options,
+      });
+    },
+    [setContextMenu]
+  );
+
   React.useEffect(() => {
     const root = rootRef.current;
     if (selected && root) {
@@ -108,6 +142,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
       })}
       onMouseEnter={handleMouseOver}
       onMouseDown={handleMouseDown}
+      onContextMenu={contextClick}
       tabIndex={0}
     >
       <DataViewer

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

@@ -11,15 +11,37 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   label,
   selected,
   onSelect,
+  setContextMenu,
+  deleteColumn,
+  addColumnLeft,
+  data,
 }) => {
   const dispatch = useDispatch();
   const [width, setWidth] = React.useState(100);
+  let options = [
+    {
+      label: 'Add Column',
+      value: 'Add Column',
+      iconName: 'plus_icon',
+      action: () => {
+        addColumnLeft(data);
+      },
+      disable: false,
+    },
+    {
+      label: 'Delete Column',
+      value: 'Delete Column',
+      iconName: 'delete',
+      action: () => {
+        deleteColumn(data);
+      },
+      disable: false,
+    },
+  ];
 
-  // Function to handle the start of the resize (mouse down)
   const onMouseDown = (e: React.MouseEvent) => {
     const startX = e.clientX;
 
-    // Function to handle mouse movement (resize)
     const onMouseMove = (moveEvent: MouseEvent) => {
       const newWidth = width + (moveEvent.clientX - startX);
       setWidth(newWidth);
@@ -31,7 +53,6 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
         'ff-spreadsheet-active-cell'
       );
 
-      // If the element exists, update its height
       if (
         selectedAllRow instanceof HTMLElement &&
         selectedSingleRow instanceof HTMLElement
@@ -41,13 +62,11 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       }
     };
 
-    // Function to stop the resizing (mouse up)
     const onMouseUp = () => {
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
     };
 
-    // Add event listeners for mouse move and mouse up
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
   };
@@ -57,7 +76,6 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
     [dispatch]
   );
 
-  // Handle column header click
   const handleClick = React.useCallback(
     (event: React.MouseEvent) => {
       onSelect(column, event.shiftKey);
@@ -65,13 +83,32 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
     [onSelect, column]
   );
 
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+
+      onSelect(column, event.shiftKey);
+
+      setContextMenu({
+        open: true,
+        position: {
+          x: event.clientX,
+          y: event.clientY - 50,
+        },
+        options: options,
+      });
+    },
+    [onSelect, column, setContextMenu]
+  );
+
   return (
     <th
-      style={{ minWidth: `${width}px`, position: 'relative' }} // Use dynamic width
+      style={{ minWidth: `${width}px`, position: 'relative' }}
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
       onClick={handleClick}
+      onContextMenu={contextClick}
       tabIndex={0}
     >
       {label !== undefined ? label : columnIndexToLabel(column)}

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

@@ -5,6 +5,7 @@ import { EntireWorksheetSelection } from './selection';
 import * as Types from './types';
 import useDispatch from './use-dispatch';
 import useSelector from './use-selector';
+import Icon from '../../../Icon';
 
 const CornerIndicator: Types.CornerIndicatorComponent = ({
   selected,
@@ -20,7 +21,13 @@ const CornerIndicator: Types.CornerIndicatorComponent = ({
       })}
       onClick={handleClick}
       tabIndex={0}
-    />
+    >
+      <Icon
+        variant={selected ? 'dark' : 'light'}
+        className="corner_indicator"
+        name="excel_corner_menu"
+      />
+    </th>
   );
 };