pixel-react-excel-sheet 1.0.25 → 1.0.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react-excel-sheet",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/AppHeader/AppHeader.scss

@@ -36,7 +36,7 @@
           flex: 1 1 auto;
           overflow: hidden;
           transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;
-          max-width: 100px; /* Initial max-width */
+          max-width: 150px; /* Initial max-width */
           &:not(.ff-app-header-nav-bar-item--selected):hover::after {
             animation: oscillate-border-width 0.5s ease-in-out forwards;
           }
@@ -60,7 +60,7 @@
             background-color: var(--primary-icon-color);
             border-radius: 20px;
             flex-grow: 12; /* Increase size on hover */
-            max-width: 550px;
+            max-width: 700px;
             opacity: 1;
             .ff-app-header-nav-bar-item-label {
               box-shadow: 0px 4px 4px 0px #00000040 inset;

package/src/components/ConditionalDropdown/ConditionalDropdown.tsx

@@ -135,23 +135,22 @@ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
           />
         )}
       </div>
-      {showDropdown && (
-    isHash ? (
-      <OptionsDropdown
-        position="relative"
-        width={dropdownWidth}
-        filteredOptions={filteredOptions}
-        onSelectVariable={handleDropdownClick}
-      />
-    ) : (
-      <VariableDropdown
-        position="relative"
-        width={dropdownWidth}
-        optionsList={variableList}
-        onSelectVariable={handleDropdownClick}
-      />
-    )
-  )}
+      {showDropdown &&
+        (isHash ? (
+          <OptionsDropdown
+            position="relative"
+            width={dropdownWidth}
+            filteredOptions={filteredOptions}
+            onSelectVariable={handleDropdownClick}
+          />
+        ) : (
+          <VariableDropdown
+            position="absolute"
+            width={dropdownWidth}
+            optionsList={variableList}
+            onSelectVariable={handleDropdownClick}
+          />
+        ))}
     </div>
   );
 };

package/src/components/Drawer/Drawer.scss

@@ -99,7 +99,6 @@
           }
           .ff-custom-header {
             background-color: var(--drawer-footer-bg);
-            padding: 4px 8px;
             width: 100%;
           }
         }
@@ -132,7 +131,8 @@
       }
       .ff-custom-footer {
         background-color: var(--drawer-footer-bg);
-        padding: 4px 8px;
+        width: 100%;
+        border-radius: 0 0 8px 8px;
       }
     }
   }

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Drawer from './Drawer';
 import { useState } from 'react';

package/src/components/Drawer/Drawer.tsx

@@ -39,6 +39,7 @@ const Drawer: FC<DrawerProps> = ({
   height,
   width,
   right = 0,
+  overflow,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -88,7 +89,7 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
-        style={{ zIndex, top, height, width, right }}
+        style={{ zIndex, top, height, width, right, overflow }}
       >
         {showHeader && (
           <div

package/src/components/Drawer/Types.ts

@@ -154,4 +154,8 @@ export interface DrawerProps {
    * Position from right
    */
   right?: string | number;
+  /**
+   * Custom overflow for the drawer
+   */
+  overflow?: string;
 }

package/src/components/Editor/VariableDropdown.scss

@@ -10,6 +10,7 @@
   overflow-y: auto;
   &.absolute {
     position: absolute;
+    top: 34px;
   }
   &.relative {
     position: relative;

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

@@ -105,7 +105,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
 
   return (
     <th
-      style={{ minWidth: `${columnWidth}px`, position: 'sticky' }} //Dynamic value, Inline Styling required
+      style={{ minWidth: `${columnWidth}px`}} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
@@ -113,14 +113,11 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       onContextMenu={contextClick}
       tabIndex={0}
     >
-      <div      
-      onClick={handleClick}
-      onContextMenu={contextClick}
-      tabIndex={0}>
+      <div onClick={handleClick} onContextMenu={contextClick} tabIndex={0}>
+        <Typography fontWeight="medium">
+          {label !== undefined ? label : columnIndexToLabel(column)}
+        </Typography>
       </div>
-      <Typography fontWeight='medium'>
-      {label !== undefined ? label : columnIndexToLabel(column)}
-      </Typography>
       <div
         onMouseDown={onMouseDown}
         onClick={() => activate({ row: -1, column })}

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

@@ -1,5 +1,7 @@
 import * as Types from './types';
 
-const HeaderRow: Types.HeaderRowComponent = (props) => <tr style={{position:'relative',height:"34px"}} {...props} />;
+const HeaderRow: Types.HeaderRowComponent = (props) => (
+  <tr className="ff-spreadsheet-row-header" {...props} />
+);
 
 export default HeaderRow;

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

@@ -106,8 +106,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       style={{
         height: `${rowHeight}px`,
         minWidth: '60px',
-        position: 'relative',
-      }} //Dynamic value, Inline Styling required
+      }}
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
@@ -115,9 +114,12 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       onContextMenu={contextClick}
       tabIndex={0}
     >
-      <Typography fontWeight="medium">
-        {label !== undefined ? label : row + 1}
-      </Typography>
+      <div style={{ position: 'sticky', zIndex: 2000 }}>
+        <Typography fontWeight="medium">
+          {label !== undefined ? label : row + 1}
+        </Typography>
+      </div>
+
       <div
         onMouseDown={onMouseDown}
         onClick={() => activate({ row, column: -1 })}

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

@@ -24,8 +24,6 @@
 
     position: relative;
     overflow: scroll;
-    left: 0;
-    top: 0;
     background: var(--background-color);
     color: var(--text-color);
     scrollbar-width: none;
@@ -45,135 +43,135 @@
 
   .ff-spreadsheet-table {
     overflow: scroll;
-    top: 0;
-    left: 0;
-    margin: 0;
     position: relative;
     &::-webkit-scrollbar {
       height: 0px;
     }
     border-collapse: collapse;
     table-layout: fixed;
+  }
+  .ff-spreadsheet-cell {
+    outline: none;
+    position: relative;
+    z-index: 0;
+  }
 
-    .ff-spreadsheet-cell {
-      outline: none;
-      position: relative;
-      z-index: 0;
-    }
+  .ff-spreadsheet-active-cell .select_dot {
+    background-color: var(--elevation);
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    position: absolute;
+    bottom: -5px;
+    right: -5px;
+    cursor: crosshair;
+    z-index: 1000;
+  }
 
-    .ff-spreadsheet-active-cell .select_dot {
-      background-color: var(--elevation);
-      height: 10px;
-      width: 10px;
-      border-radius: 50%;
-      position: absolute;
-      bottom: -5px;
-      right: -5px;
-      cursor: crosshair;
-      z-index: 1000;
-    }
+  .ff-spreadsheet-cell--readonly {
+    color: var(--readonly-text-color);
+  }
 
-    .ff-spreadsheet-cell--readonly {
-      color: var(--readonly-text-color);
-    }
+  .ff-spreadsheet-cell,
+  .ff-spreadsheet-header {
+    border: 0.1px solid var(--border-color);
+    overflow: hidden;
+    word-break: keep-all;
+    white-space: nowrap;
+    text-align: left;
+    box-sizing: border-box;
+    user-select: none;
+  }
 
-    .ff-spreadsheet-cell,
-    .ff-spreadsheet-header {
-      border: 0.1px solid var(--border-color);
-      overflow: hidden;
-      word-break: keep-all;
-      white-space: nowrap;
-      text-align: left;
-      box-sizing: border-box;
-      user-select: none;
-    }
+  .ff-spreadsheet-header {
+    border: 0.1px solid var(--border-color);
+    background-color: var(--header-background-color);
+    color: var(--readonly-text-color);
+    text-align: center;
+    z-index: 1000;
+  }
 
-    .ff-spreadsheet-header {
-      border: 0.1px solid var(--border-color);
-      background-color: var(--header-background-color);
-      color: var(--readonly-text-color);
-      text-align: center;
-      z-index: 1000;
-      position: sticky;
-    }
+  .ff-spreadsheet-corner-header {
+    position: fixed;
+    z-index: 3000;
+  }
 
-    .ff-spreadsheet-corner-header {
-      position: fixed;
-      z-index: 2000;
-    }
+  .ff-spreadsheet-row-header {
+    // position: relative;
+    height: 34px;
+  }
 
-    .corner-header {
-      border: 0.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;
-      left: -1px;
-    }
+  .corner-header {
+    border: 0.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;
+    left: -1px;
+  }
 
-    .ff-spreadsheet-header--selected {
-      background: var(--brand-color);
-      color: var(--tooltip-text-color);
-    }
+  .ff-spreadsheet-header--selected {
+    background: var(--brand-color);
+    color: var(--tooltip-text-color);
+  }
 
-    .ff-spreadsheet-data-viewer,
-    .ff-spreadsheet-data-editor input {
-      padding: 4px;
-      box-sizing: border-box;
-    }
-    .ff-spreadsheet-header {
-      box-sizing: border-box;
-    }
+  .ff-spreadsheet-data-viewer,
+  .ff-spreadsheet-data-editor input {
+    padding: 4px;
+    box-sizing: border-box;
+  }
+  .ff-spreadsheet-header {
+    box-sizing: border-box;
+  }
 
-    .ff-spreadsheet-data-viewer--preserve-breaks {
-      white-space: pre-wrap;
-    }
+  .ff-spreadsheet-data-viewer--preserve-breaks {
+    white-space: pre-wrap;
+  }
 
-    .ff-spreadsheet-data-editor,
-    .ff-spreadsheet-data-editor input {
-      width: 100%;
-      height: 100%;
-    }
+  .ff-spreadsheet-data-editor,
+  .ff-spreadsheet-data-editor input {
+    width: 100%;
+    height: 100%;
+  }
 
-    .ff-spreadsheet-data-editor input {
-      font: inherit;
-      color: inherit;
-      background: none;
-      border: none;
-      outline: none;
-      margin: 0;
-    }
+  .ff-spreadsheet-data-editor input {
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: none;
+    outline: none;
+    margin: 0;
+  }
 
-    .ff-spreadsheet-data-viewer--boolean {
-      text-align: center;
-    }
+  .ff-spreadsheet-data-viewer--boolean {
+    text-align: center;
+  }
 
-    .ff-spreadsheet-floating-rect {
-      position: absolute;
-      pointer-events: none;
-      box-sizing: border-box;
-    }
+  .ff-spreadsheet-floating-rect {
+    position: absolute;
+    pointer-events: none;
+    box-sizing: border-box;
+  }
 
-    .ff-spreadsheet-floating-rect--hidden {
-      display: none;
-    }
+  .ff-spreadsheet-floating-rect--hidden {
+    display: none;
+  }
 
-    .ff-spreadsheet-floating-rect--selected {
-      background: var(--outline-background-color);
-      border: 2px var(--outline-color) solid;
-    }
+  .ff-spreadsheet-floating-rect--selected {
+    background: var(--outline-background-color);
+    border: 2px var(--outline-color) solid;
+  }
 
-    .ff-spreadsheet-floating-rect--dragging {
-      border: none;
-    }
+  .ff-spreadsheet-floating-rect--dragging {
+    border: none;
+  }
 
-    .ff-spreadsheet-floating-rect--copied {
-      border: 2px var(--outline-color) dashed;
-    }
+  .ff-spreadsheet-floating-rect--copied {
+    border: 2px var(--outline-color) dashed;
   }
 }

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

@@ -98,7 +98,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;
 };
 
@@ -446,23 +446,23 @@ 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-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}}
+          style={{ height: sheetHeight }}
           className={classNames('ff-spreadsheet', className)}
           onKeyDown={handleKeyDown}
           onMouseMove={handleMouseMove}

package/src/components/Icon/iconList.ts

@@ -82,7 +82,6 @@ import IpkFileType from '../../assets/icons/ipk_file_type.svg?react';
 import TxtFileType from '../../assets/icons/txt_file_type.svg?react';
 import GifFileType from '../../assets/icons/gif_file_type.svg?react';
 import JpgFileType from '../../assets/icons/jpg_file_type.svg?react';
-
 import InfoIcon from '../../assets/icons/info_icon.svg?react';
 import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
 import HideIcon from '../../assets/icons/hide_icon.svg?react';
@@ -421,7 +420,6 @@ Components['add_testcase'] = AddTestCaseIcon;
 Components['automation_testcase'] = AutomationTestCaseIcon;
 Components['manual_testcase'] = ManualTestCaseIcon;
 Components['back_icon'] = BackIcon;
-
 Components['sause_lab'] = SauseLabIcon;
 Components['local'] = LocalIcon;
 Components['internet_explorer'] = InternetExplorerIcon;