pixel-react-excel-sheet 1.0.15 → 1.0.17

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.15",
+  "version": "1.0.17",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

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

@@ -7,7 +7,7 @@
   min-height: 32px;
   min-width: 111px;
   white-space: nowrap;
-  z-index: 200;
+  z-index: 2000;
 
   .ff-excel-menu-options {
     color: var(--text-color);

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

@@ -430,8 +430,8 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.pageX - 50,
-        y: event.pageY - 350,
+        x: event.pageX - 0,
+        y: event.pageY - 50,
       },
       options: options,
     });

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

@@ -103,6 +103,31 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   );
 
   return (
+    // <th
+    //   style={{ minWidth: `${columnWidth}px`, position: 'relative' }} //Dynamic value, Inline Styling required
+    //   className={classNames('ff-spreadsheet-header', {
+    //     'ff-spreadsheet-header--selected': selected,
+    //   })}
+    //   onClick={handleClick}
+    //   onContextMenu={contextClick}
+    //   tabIndex={0}
+    // >
+    //   {label !== undefined ? label : columnIndexToLabel(column)}
+    //   <div
+    //     onMouseDown={onMouseDown}
+    //     onClick={() => activate({ row: -1, column })}
+    //     style={{
+    //       zIndex: 'inherit',
+    //       width: '2px',
+    //       position: 'absolute',
+    //       right: 0,
+    //       top: 0,
+    //       height: '100%',
+    //       cursor: 'ew-resize',
+    //     }}
+    //   />
+    // </th>
+
     <th
       style={{ minWidth: `${columnWidth}px`, position: 'relative' }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {

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

@@ -16,8 +16,7 @@ const CornerIndicator: Types.CornerIndicatorComponent = ({
   }, [onSelect]);
   return (
     <th
-    style={{zIndex:'200'}}
-      className={classNames('ff-spreadsheet-header', {
+      className={classNames('ff-spreadsheet-header ff-spreadsheet-corner-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
       onClick={handleClick}

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

@@ -102,7 +102,11 @@ const RowIndicator: Types.RowIndicatorComponent = ({
 
   return (
     <th
-      style={{ height: `${rowHeight}px` ,minWidth:'60px' ,position:'relative' }} //Dynamic value, Inline Styling required
+      style={{
+        height: `${rowHeight}px`,
+        minWidth: '60px',
+        // position: 'relative',
+      }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}

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

@@ -91,11 +91,15 @@
     background-color: var(--header-background-color);
     color: var(--readonly-text-color);
     text-align: center;
-    z-index: 100;
+    z-index: 1000;
     font-weight: 500;
     font-size: 12px;
   }
 
+  .ff-spreadsheet-corner-header{
+    z-index: 1100;
+  }
+
   .corner_indicator {
     padding-left: 20px;
   }

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -91,7 +91,14 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
     value: string;
   }>({
     label: 'Times New Roman',
-    value: '"Times New Roman"',
+    value: 'Times New Roman',
+  });
+  const [selectedFontSize, setSelectedFontSize] = useState<{
+    label: string;
+    value: string;
+  }>({
+    label: '11',
+    value: '11',
   });
   const [colorContainer, setColorPicker] = useState<ColorContainer>({
     color: 'var(--error-light)',
@@ -219,9 +226,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <div className="ff-excel-toolbar-font-family">
             <Select
               showLabel={false}
-              optionZIndex={10000}
+              optionZIndex={1000}
               onChange={(e) => {
-                setSelectedFontFamily({ label: e.label, value: e.value });
+                console.log(e);
+                setSelectedFontFamily({ label: e.label, value: e.label });
                 setFontFamily(data, e.label);
               }}
               required={false}
@@ -234,14 +242,14 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <div className="ff-excel-toolbar-font-size">
             <Select
               showLabel={false}
-              optionZIndex={5000}
+              optionZIndex={1000}
               required={false}
-              onChange={(e) => setFontSize(data, e.value)}
-              optionsList={fontSize}
-              selectedOption={{
-                label: '11',
-                value: '11',
+              onChange={(e) => {
+                setSelectedFontSize({ label: e.label, value: e.value });
+                setFontSize(data, e.value);
               }}
+              optionsList={fontSize}
+              selectedOption={selectedFontSize}
             />
           </div>
         </Tooltip>
@@ -310,7 +318,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             />
             <MenuOption
               iconName="arrow_down"
-              zIndex={2000}
+              zIndex={1000}
               iconSize={12}
               options={underlineTypeIcon}
               tooltipPlacement="top"
@@ -387,7 +395,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             <MenuOption
               iconName="arrow_down"
               iconSize={12}
-              zIndex={5000}
+              zIndex={1000}
               options={borderTypeIcon}
               tooltipPlacement="top"
               variant="light"