pixel-react-excel-sheet 1.0.24 → 1.0.26

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.24",
+  "version": "1.0.26",
   "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: 'relative' }} //Dynamic value, Inline Styling required
+      style={{ minWidth: `${columnWidth}px`, position: 'sticky' }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}

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

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

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

@@ -102,36 +102,37 @@ const RowIndicator: Types.RowIndicatorComponent = ({
   );
 
   return (
-    <th
-      style={{
-        height: `${rowHeight}px`,
-        minWidth: '60px',
-        position: 'relative',
-      }} //Dynamic value, Inline Styling required
-      className={classNames('ff-spreadsheet-header', {
-        'ff-spreadsheet-header--selected': selected,
-      })}
-      onClick={handleClick}
-      onContextMenu={contextClick}
-      tabIndex={0}
-    >
-      <Typography fontWeight="medium">
-        {label !== undefined ? label : row + 1}
-      </Typography>
-      <div
-        onMouseDown={onMouseDown}
-        onClick={() => activate({ row, column: -1 })}
-        style={{
-          zIndex: 'inherit',
-          height: '2px',
-          position: 'absolute',
-          right: 0,
-          bottom: 0,
-          width: '100%',
-          cursor: 'ns-resize',
-        }}
-      />
-    </th>
+<th
+  style={{
+    height: `${rowHeight}px`,
+    minWidth: '60px',
+  }}
+  className={classNames('ff-spreadsheet-header', {
+    'ff-spreadsheet-header--selected': selected,
+  })}
+  onClick={handleClick}
+  onContextMenu={contextClick}
+  tabIndex={0}
+>
+    <Typography fontWeight="medium">
+      {label !== undefined ? label : row + 1}
+    </Typography>
+
+  <div
+    onMouseDown={onMouseDown}
+    onClick={() => activate({ row, column: -1 })}
+    style={{
+      zIndex: 'inherit',
+      height: '2px',
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      width: '100%',
+      cursor: 'ns-resize',
+    }}
+  />
+</th>
+
   );
 };
 

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;
@@ -54,125 +52,130 @@
     }
     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;
+    position: sticky;
+  }
 
-    .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: 2000;
+  }
 
-    .ff-spreadsheet-corner-header {
-      position: fixed;
-      z-index: 2000;
-    }
-    .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: 59px;
-      height: 27px;
-      left: -1px;
-    }
+  .ff-spreadsheet-row-header {
+    // position: relative;
+    height: 34px;
+  }
 
-    .ff-spreadsheet-header--selected {
-      background: var(--brand-color);
-      color: var(--tooltip-text-color);
-    }
+  .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-data-viewer,
-    .ff-spreadsheet-data-editor input {
-      padding: 4px;
-      box-sizing: border-box;
-    }
-    .ff-spreadsheet-header {
-      box-sizing: border-box;
-    }
+  .ff-spreadsheet-header--selected {
+    background: var(--brand-color);
+    color: var(--tooltip-text-color);
+  }
 
-    .ff-spreadsheet-data-viewer--preserve-breaks {
-      white-space: pre-wrap;
-    }
+  .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-editor,
-    .ff-spreadsheet-data-editor input {
-      width: 100%;
-      height: 100%;
-    }
+  .ff-spreadsheet-data-viewer--preserve-breaks {
+    white-space: pre-wrap;
+  }
 
-    .ff-spreadsheet-data-editor input {
-      font: inherit;
-      color: inherit;
-      background: none;
-      border: none;
-      outline: none;
-      margin: 0;
-    }
+  .ff-spreadsheet-data-editor,
+  .ff-spreadsheet-data-editor input {
+    width: 100%;
+    height: 100%;
+  }
 
-    .ff-spreadsheet-data-viewer--boolean {
-      text-align: center;
-    }
+  .ff-spreadsheet-data-editor input {
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: none;
+    outline: none;
+    margin: 0;
+  }
 
-    .ff-spreadsheet-floating-rect {
-      position: absolute;
-      pointer-events: none;
-      box-sizing: border-box;
-    }
+  .ff-spreadsheet-data-viewer--boolean {
+    text-align: center;
+  }
 
-    .ff-spreadsheet-floating-rect--hidden {
-      display: none;
-    }
+  .ff-spreadsheet-floating-rect {
+    position: absolute;
+    pointer-events: none;
+    box-sizing: border-box;
+  }
 
-    .ff-spreadsheet-floating-rect--selected {
-      background: var(--outline-background-color);
-      border: 2px var(--outline-color) solid;
-    }
+  .ff-spreadsheet-floating-rect--hidden {
+    display: none;
+  }
 
-    .ff-spreadsheet-floating-rect--dragging {
-      border: none;
-    }
+  .ff-spreadsheet-floating-rect--selected {
+    background: var(--outline-background-color);
+    border: 2px var(--outline-color) solid;
+  }
 
-    .ff-spreadsheet-floating-rect--copied {
-      border: 2px var(--outline-color) dashed;
-    }
+  .ff-spreadsheet-floating-rect--dragging {
+    border: none;
+  }
+
+  .ff-spreadsheet-floating-rect--copied {
+    border: 2px var(--outline-color) dashed;
   }
 }

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;