pixel-react-excel-sheet 1.0.23 → 1.0.24

package/lib/utils/getSequentialPayload/types.d.ts

@@ -2,6 +2,7 @@ export interface OperatingSystemInfo {
     osName: string;
     osVersion: string;
     hostName: string;
+    iconName: string;
 }
 export interface RunLevelExecutionDataSet {
     peVariableSetId: string;

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

package/src/assets/Themes/BaseTheme.scss

@@ -268,8 +268,8 @@ $base-theme: (
   excel-toolbar-bg: #D4B0E426,
   excel-header-bg: #f4ecf8,
   excel-toolbar-divider: #57575733,
-
   excel-sheet-header-background-color: #f3f0f5,
+
   icon-hover-color: #f7ecf8,
   ff-search-icon-hover-color: #f7ecf8,
   ff-search-filed-bg-color: #ffffff,

package/src/assets/Themes/DarkTheme.scss

@@ -249,7 +249,9 @@ $dark-theme: (
   excel-sheet-button-color: #e9b5ff,
   excel-sheet-border:#cfd1e271,
   excel-toolbar-bg: #D4B0E426,
+  excel-header-bg: #f4ecf8,
   excel-toolbar-divider: #57575733,
+  excel-sheet-header-background-color: #f3f0f5,
 
   icon-hover-color: #f7ecf8,
   ff-editor-border-color: #f0e7f4,

package/src/assets/icons/auto_save_icon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7198 9.48632C18.5588 7.81594 17.7814 6.26541 16.5392 5.13714C15.297 4.00888 13.679 3.38379 12.0009 3.38379C10.3228 3.38379 8.70484 4.00888 7.46263 5.13714C6.22041 6.26541 5.44301 7.81594 5.28204 9.48632C3.91685 9.76252 2.70269 10.5354 1.87459 11.6553C1.04649 12.7753 0.663354 14.1626 0.79935 15.5488C0.935346 16.935 1.5808 18.2215 2.61077 19.1591C3.64073 20.0968 4.98195 20.619 6.37479 20.6246H17.6248C19.0178 20.6195 20.3594 20.0977 21.3898 19.1602C22.4202 18.2228 23.066 16.9363 23.2023 15.5499C23.3386 14.1636 22.9556 12.776 22.1275 11.6558C21.2994 10.5356 20.0852 9.76257 18.7198 9.48632ZM17.6248 19.1246H6.37479C5.31667 19.1122 4.30377 18.6937 3.54555 17.9555C2.78732 17.2174 2.34177 16.2161 2.30103 15.1587C2.26029 14.1013 2.62747 13.0686 3.32664 12.2743C4.02582 11.48 5.00351 10.9848 6.05754 10.8911C6.2477 10.8726 6.42409 10.7837 6.55215 10.6419C6.6802 10.5001 6.75069 10.3156 6.74979 10.1246C6.74609 9.43513 6.87823 8.75171 7.13866 8.11334C7.39908 7.47497 7.78269 6.89414 8.26759 6.40402C9.24688 5.41418 10.5793 4.8539 11.9717 4.84644C13.364 4.83898 14.7024 5.38495 15.6922 6.36424C16.6821 7.34354 17.2423 8.67593 17.2498 10.0683V10.1433C17.2492 10.3327 17.3204 10.5153 17.4489 10.6545C17.5775 10.7936 17.7539 10.8789 17.9428 10.8933C18.9927 10.9922 19.9649 11.4894 20.6595 12.2829C21.3542 13.0763 21.7186 14.1056 21.6779 15.1594C21.6372 16.2132 21.1944 17.2113 20.4406 17.9488C19.6868 18.6862 18.6792 19.107 17.6248 19.1246Z" fill="currentColor"/>
+<path d="M14.8443 11.4693L10.8746 15.4391L9.15482 13.7193C9.01337 13.5827 8.82392 13.5071 8.62727 13.5088C8.43062 13.5105 8.24251 13.5894 8.10346 13.7285C7.9644 13.8675 7.88553 14.0556 7.88382 14.2523C7.88211 14.4489 7.9577 14.6384 8.09432 14.7798L10.3443 17.0298C10.485 17.1704 10.6757 17.2494 10.8746 17.2494C11.0734 17.2494 11.2642 17.1704 11.4048 17.0298L15.9048 12.5298C16.0414 12.3884 16.117 12.1989 16.1153 12.0023C16.1136 11.8056 16.0347 11.6175 15.8957 11.4785C15.7566 11.3394 15.5685 11.2605 15.3719 11.2588C15.1752 11.2571 14.9858 11.3327 14.8443 11.4693Z" fill="currentColor"/>
+</svg>

package/src/components/Charts/LineChart/LineChart.stories.tsx

@@ -38,14 +38,14 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
           },
           {
             date: '29 Oct',
-            totalMemory: 800,
+            totalMemory: 100,
           },
           {
-            date: '30 Oct',
+            date: '3 Nov',
             totalMemory: 10.12,
           },
           {
-            date: '31 Oct',
+            date: '23 Nov',
             totalMemory: 10.1,
           },
         ],
@@ -60,6 +60,7 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
     xAxisColor: '#D9D9D9',
     yAxisColor: '#252C37',
     numberSize: '10px',
+    proportionalSpacing :false,
   },
   render: (args) => (
     <div className="linechart-container">
@@ -153,6 +154,8 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
     yAxisColor: '#252C37',
     yAxisLabelColor: '#252C37',
     textSize: '12px',
+    proportionalSpacing :false,
+
   },
   render: (args) => (
     <div className="linechart-container">
@@ -246,6 +249,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
     yAxisLabelColor: '#252C37',
     textSize: '12px',
     fontWeight: 'semi-bold',
+    proportionalSpacing :false,
   },
   render: (args) => (
     <div className="linechart-container">

package/src/components/Charts/LineChart/LineChart.tsx

@@ -25,6 +25,7 @@ const LineChart: React.FC<LineChartProps> = ({
   textSize,
   fontWeight,
   numberSize,
+  proportionalSpacing,
 }) => {
   const margin = 40;
   const xMax = width - margin * 2;
@@ -36,6 +37,7 @@ const LineChart: React.FC<LineChartProps> = ({
   const xKey = isDefaultLineChart ? 'date' : 'date';
   const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
   const xScale = (x: string) => {
+  if (proportionalSpacing) {
     const date = new Date(x);
     const time = date.getTime();
     const minDate = new Date(
@@ -49,7 +51,14 @@ const LineChart: React.FC<LineChartProps> = ({
       ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
       xMax
     );
-  };
+  } else {
+    const index = data[0].data.findIndex((point: any) => point[xKey] === x);
+    if (index === -1) return 0;
+    const totalPoints = data[0].data.length;
+    return (index / (totalPoints - 1)) * xMax;
+  }
+};
+
 
   const yScale = (y: number) => yMax - (y * yMax) / 1024;
 

package/src/components/Charts/LineChart/types.ts

@@ -26,4 +26,5 @@ export interface LineChartProps {
   textSize?: string | number;
   fontWeight?: string | number;
   numberSize?: string | number;
+  proportionalSpacing?: boolean;
 }

package/src/components/ConditionalDropdown/ConditionalDropdown.tsx

@@ -21,7 +21,7 @@ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
   dataFiles = [],
   ...props
 }) => {
-  const [inputValue, setInputValue] = useState<string>('');
+  const [inputValue, setInputValue] = useState<string>(value);
   const [showDropdown, setShowDropdown] = useState<boolean>(false);
   const [cursorPosition, setCursorPosition] = useState<number | null>(null);
   const [showCreateVariableIcon, setShowCreateVariableIcon] =

package/src/components/DownloadClient/DownloadClient.scss

@@ -1,80 +1,67 @@
-@use '../../assets/styles/colors' as *;
-@use '../../assets/styles/fonts';
 @use '../../assets/styles/mixins' as *;
 
-.ff-download-client-overlay {
-  width: 378px;
-  height: 217px;  
+.ff-download-client-wrapper {
   position: absolute;
-  @include center-content;
-  z-index: 9999;
+  height: 181px;
+  width: 368px;
+  border: 1px solid var(--download-client-border-color);
+  border-radius: 4px;
+  box-shadow: 0px 0px 8px 0px
+    var(--download-client-icon-container-box-shadow-color);
 
-  .ff-download-client-container {
-    width: 370px;
+  .ff-download-client-header-wrapper {
+    position: relative;
     @include center-content;
-    flex-direction: column;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--download-client-border-color);
-    margin-left: 5px;
+    justify-content: space-between;
+    background-color: var(--download-client-header-bg-color);
 
-    .ff-download-client-header {
-      width: 100%;
-      @include center-content;
-      justify-content: space-between;
-      padding: 7px 4px;
-      margin-bottom: 8px;
-      border-radius: 4px 4px 0 0;
-      background-color: var(--download-client-header-bg-color);
-      box-sizing: border-box;
+    .ff-download-client-hollow-triangle {
+      position: absolute;
+      height: 8px;
+      width: 8px;
+      border: 1px solid var(--download-client-border-color);
+      top: -6px;
+      right: 64px;
+      z-index: -1;
+      border-radius: 2px;
+      transform: rotate(45deg);
+    }
 
-      .ff-header-arrow {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 10px;
-        right: 70px;
-        width: 10px;
-        height: 10px;
-        background-color: var(--download-client-icon-container-bg-color) ;
-        transform: translateY(-50%) rotate(-45deg);
-        z-index: -999;
-        border: 1px solid var(--download-client-header-bg-color); 
-      }
+    .ff-download-client-header-text {
+      margin-left: 4px;
+    }
 
+    .ff-download-client-close-icon {
+      cursor: pointer;
+      margin-right: 10px;
     }
+  }
 
-    .ff-download-client-content {
-      width: 100%;
-      @include center-content;
-      flex-direction: column;
-      padding-left: 8px;
-      padding-right: 24px;
-      gap: 8px;
-      margin-bottom: 8px;
-      color: var(--popup-text-color);
-      .ff-download-install,
-      .ff-choose-os {
-        padding: 4px 0;
-      }
+  .ff-download-client-content-text {
+    width: calc(100% - 16px);
+    height: 132px;
+    background-color: #fff;
+    padding: 8px;
+
+    .ff-download-client-description-text {
+      margin-bottom: 8px
     }
 
-    .ff-download-client-actions {
-      width: 240px;
+  }
+
+  .ff-download-client-os-wrapper {
+    @include center-content;
+    gap: 24px;
+
+    .ff-os-version-wrapper {
       @include center-content;
-      gap: 12px;
-      margin-bottom: 17px;
-      .ff-icons-container {
-        @include center-content;
-        width: 64px;
-        height: 64px;
-        border-radius: 8px;
-        border: 1px solid var(--download-client-icon-container-border-color);
-        background-color: var(--download-client-icon-container-bg-color);
-        cursor: pointer;
-        box-shadow: 0px 0px 10px 0px
-          var(--download-client-icon-container-box-shadow-color);
-      }
+      height: 64px;
+      width: 64px;
+      cursor: pointer;
+      border-radius: 8px;
+      border: 1px solid var(--download-client-icon-container-border-color);
+      box-shadow: 0px 0px 10px 0px
+        var(--download-client-icon-container-box-shadow-color);
     }
   }
 }

package/src/components/DownloadClient/DownloadClient.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import DownloadClient from './DownloadClient';
+import './DownloadClient.scss';
 
 const meta: Meta<typeof DownloadClient> = {
   title: 'Components/DownloadClient',
@@ -14,12 +15,11 @@ type Story = StoryObj<typeof DownloadClient>;
 
 export const Default: Story = {
   args: {
-    onClose: () =>{},
-    onClickWindows: () =>{},
-    onClickLinux: () =>{},
-    onClickMac: () =>{},
-    top: '100px',  
-    left: '50px',
+    onClose: () => {},
+    top: '50%',
+    left: '50%',
+    className: 'ff-download-client-stories',
+    onClick: () => {},
   },
 };
 

package/src/components/DownloadClient/DownloadClient.tsx

@@ -6,17 +6,13 @@ import { DownloadClientProps } from './type';
 
 const DownloadClient: React.FC<DownloadClientProps> = ({
   onClose,
-  onClickWindows,
-  onClickLinux,
-  onClickMac,
-  top = '10px',
-  left = '10px',
+  top = '100px',
+  left = '0px',
+  className,
+  description = 'Download and Install the fireflink client to run the script',
+  onClick = () => {},
+  optionZIndex = 10000001,
 }) => {
-  const title = 'Download Client';
-  const description =
-    'Download and Install the fireflink client to run the script';
-  const chooseOSText = 'Choose OS';
-
   useEffect(() => {
     const handleCloseDownloadClient = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -29,49 +25,62 @@ const DownloadClient: React.FC<DownloadClientProps> = ({
     };
   }, [onClose]);
 
+  const osVersion = ['windows', 'mac_icon', 'linux'];
+
   return (
-    <div className="ff-download-client-overlay" style={{ top, left }}>
-      <div className="ff-download-client-container">
-        <div className="ff-download-client-header">
-          <div className="ff-header-arrow"></div>
-          <Typography
-            color="var(--table-header-text-color)"
-            fontWeight="semi-bold"
-          >
-            {title}
-          </Typography>
-          <div onClick={onClose}>
-            <Icon name="close" width={12} height={12} />
-          </div>
-        </div>
-        <div className="ff-download-client-content">
-          <div className="ff-download-install">
-            <Typography
-              fontWeight="semi-bold"
-              color="var(--download-client-content-text-color)"
-            >
-              {description}
-            </Typography>
-          </div>
-          <div className="ff-choose-os">
-            <Typography
-              fontWeight="semi-bold"
-              color="var(--download-client-choose-os-text-color)"
+    <div
+      className={`ff-download-client-wrapper ${className}`}
+      style={{ top: top, left: left, zIndex: optionZIndex }}
+    >
+      <div className="ff-download-client-header-wrapper">
+        <div className="ff-download-client-hollow-triangle"></div>
+        <Typography
+          fontWeight="semi-bold"
+          lineHeight="32px"
+          className="ff-download-client-header-text"
+        >
+          Download client
+        </Typography>
+        <Icon
+          name="close"
+          color="var(--brand-color)"
+          className="ff-download-client-close-icon"
+          height={12}
+          width={12}
+        />
+      </div>
+
+      <div className="ff-download-client-content-text">
+        <Typography
+          as="div"
+          color="var(--download-client-content-text-color)"
+          fontWeight="semi-bold"
+          textAlign="center"
+          lineHeight="26px"
+        >
+          {description}
+        </Typography>
+        <Typography
+          as="div"
+          className="ff-download-client-description-text"
+          textAlign="center"
+          fontWeight="medium"
+          lineHeight='26px'
+        >
+          Choose OS to Download
+        </Typography>
+
+        <div className="ff-download-client-os-wrapper">
+          {osVersion.map((os) => (
+            <div
+              className="ff-os-version-wrapper"
+              onClick={() => {
+                onClick(os === 'mac_icon' ? 'mac' : os);
+              }}
             >
-              {chooseOSText}
-            </Typography>
-          </div>
-        </div>
-        <div className="ff-download-client-actions">
-          <div className="ff-icons-container" onClick={onClickWindows}>
-            <Icon name="windows" width={32} height={38} />
-          </div>
-          <div className="ff-icons-container" onClick={onClickLinux}>
-            <Icon name="linux" width={32} height={38} />
-          </div>
-          <div className="ff-icons-container" onClick={onClickMac}>
-            <Icon name="mac_icon" width={32} height={38} />
-          </div>
+              <Icon name={os} height={36} width={36} />
+            </div>
+          ))}
         </div>
       </div>
     </div>

package/src/components/DownloadClient/type.ts

@@ -1,41 +1,33 @@
 export interface DownloadClientProps {
-    /**
-     * Title of the popup.
-     */
-    title: string;
-  
-    /**
-     * Description or body text of the popup.
-     */
-    description: string;
-  
-    /**
-     * Callback for when the "Cancel" icon is clicked.
-     */
-    onCancel: () => void;
-  
-    /**
-     * Callback for when the "Download for Windows" icon is clicked.
-     */
-    onDownloadWindows: () => void;
-  
-    /**
-     * Callback for when the "Download for macOS" icon is clicked.
-     */
-    onDownloadMac: () => void;
-  
-    /**
-     * Optional flag to control whether to display icons for download actions instead of buttons.
-     * Defaults to `false` for buttons.
-     */
-    showIcons?: boolean;
-  }
-  
-export interface DownloadClientProps {
-    onClose?: () => void;
-    onClickWindows: () => void;
-    onClickLinux: () => void;
-    onClickMac: () => void;
-    top?: string;
-    left?: string;
-  }  
+  /**
+   * Close dialog function to close the modal dialog
+   **/
+  onClose: () => void;
+
+  /**
+   * distance between modal dialog and parent from top
+   **/
+  top?: string;
+
+  /**
+   * distance between modal dialog and parent from left
+   **/
+  left?: string;
+
+  /**
+   * To be used custom properties for the modal dialog through className
+   **/
+  className?: string;
+
+  /**
+   * Description of the dialog box
+   **/
+  description?: string;
+
+  /**
+   * Download button function
+   **/
+  onClick?: (os: string) => void;
+
+  optionZIndex?: number;
+}

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

@@ -1,63 +1,56 @@
+.ff-excel-sheet {
+  position: relative;
+  top: 0;
+}
 
-  .ff-excel-book {
-    // position: relative;
-    z-index: 1000;
+.ff-excel-sheet-bar {
+  position: static;
+  max-width: 100%;
+  margin-left: 60px;
+  display: flex;
+  height: 36px;
+  align-items: center;
+  color: var(--brand2-color);
+  box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
 
-    .ff-excel-sheet {
-      position: static;
-      top: 0;
+  .ff-excel-add-sheet-set {
+    position: relative;
+    background-color: var(--tab-bg-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    top: 0;
+    left: 0px;
+    height: 100%;
+
+    .ff-excel-add-sheet-icon {
+      padding: 8px 10px;
     }
+  }
 
-    .ff-excel-sheet-bar {
-      position: static;
-      max-width: 100%;
-      margin-left: 60px;
+  .ff-excel-tab-container {
+    height: 36px;
+    display: flex;
+    overflow-x: auto;
+    align-items: center;
+    scrollbar-width: none;
+    
+    .ff-excel-tab-list {
+      margin-top: 2px;
+      padding: 10px 9px;
+      min-width: max-content;
+      cursor: pointer;
       display: flex;
-      height: 36px;
-      align-items: center;
-      color: var(--brand2-color);
-      box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
-
-      .ff-excel-add-sheet-icon {
-        position: fixed;
-        margin-top: 4px;
-        padding: 0px 6px;
+      background-color: var(--hover-color);
+      &.active {
+        background-color: var(--excel-sheet-button-color);
       }
-      
-      .ff-excel-tab-container {
-        padding-left: 40px;
-        height: 36px;
-        display: flex;
-        overflow-x: auto;
-        align-items: center;
-        scrollbar-width: none;
-        scrollbar-color: var(--hover-color) transparent;
-        &::-webkit-scrollbar-track {
-          background-color: transparent;
-        }
-        &::-webkit-scrollbar-thumb {
-          border-radius: 5px;
-        }
-        &::-webkit-scrollbar {
-          height: 0px;
-        }
-        .ff-excel-tab-list {
-          margin-top: 2px;
-          padding: 10px 9px;
-          min-width: max-content;
-          cursor: pointer;
-          display: flex;
-          background-color: var(--hover-color);
-          &.active {
-            background-color: var(--excel-sheet-button-color);
-          }
 
-          &:focus {
-            outline: none;
-            text-decoration: none;
-          }
-        }
+      &:focus {
+        outline: none;
+        text-decoration: none;
       }
     }
   }
-
+}

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

@@ -430,8 +430,8 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.pageX - 0,
-        y: event.pageY - 50,
+        x: event.pageX - 50,
+        y: event.pageY - 250,
       },
       options: options,
     });
@@ -440,8 +440,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   return (
     <>
       {sheetNames.length > 0 && (
-        <div className="ff-excel-book">
-          {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
+        <>
           <div ref={sheetRef} className="ff-excel-sheet">
             <Spreadsheet
               sheetHeight={sheetHeight}
@@ -451,10 +450,10 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             />
           </div>
           <div className="ff-excel-sheet-bar">
-            <div className="ff-excel-add-sheet-icon">
+            <div className="ff-excel-add-sheet-set">
               <Tooltip title="Add Sheet" placement="top">
                 <Icon
-                  className="cursor-pointer ml-1"
+                  className="ff-excel-add-sheet-icon"
                   hoverEffect={true}
                   onClick={() => {
                     handleAddSheet();
@@ -502,8 +501,9 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
               ))}
             </div>
           </div>
+          {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
           <Toastify />
-        </div>
+        </>
       )}
     </>
   );