pixel-react-excel-sheet 1.0.15 → 1.0.16

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.16",
   "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/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"