pixel-react-excel-sheet 1.0.23 → 1.0.25

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

@@ -5,6 +5,7 @@ import * as Point from './point';
 import * as Actions from './actions';
 import useDispatch from './use-dispatch';
 import useSelector from './use-selector';
+import Typography from '../../../Typography';
 
 const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   column,
@@ -104,7 +105,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
 
   return (
     <th
-      style={{ minWidth: `${columnWidth}px`, position: 'relative' }}
+      style={{ minWidth: `${columnWidth}px`, position: 'sticky' }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
@@ -117,7 +118,9 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       onContextMenu={contextClick}
       tabIndex={0}>
       </div>
+      <Typography fontWeight='medium'>
       {label !== undefined ? label : columnIndexToLabel(column)}
+      </Typography>
       <div
         onMouseDown={onMouseDown}
         onClick={() => activate({ row: -1, column })}

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

@@ -16,16 +16,17 @@ const CornerIndicator: Types.CornerIndicatorComponent = ({
   }, [onSelect]);
   return (
     <th
-      className={classNames('ff-spreadsheet-header ff-spreadsheet-corner-header', {
-        'ff-spreadsheet-header--selected': selected,
-      })}
+      className={'ff-spreadsheet-corner-header'}
       onClick={handleClick}
       tabIndex={0}
     >
-      <Icon
-        variant={selected ? 'dark' : 'light'}
-        name="excel_corner_menu"
-      />
+      <div
+        className={classNames('corner-header', {
+          'ff-spreadsheet-header--selected': selected,
+        })}
+      >
+        <Icon variant={selected ? 'dark' : 'light'} name="excel_corner_menu" />
+      </div>
     </th>
   );
 };

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

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

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

@@ -5,6 +5,7 @@ import * as Point from './point';
 import * as Types from './types';
 import useDispatch from './use-dispatch';
 import useSelector from './use-selector';
+import Typography from '../../../Typography';
 
 const RowIndicator: Types.RowIndicatorComponent = ({
   row,
@@ -114,7 +115,9 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       onContextMenu={contextClick}
       tabIndex={0}
     >
-      {label !== undefined ? label : row + 1}
+      <Typography fontWeight="medium">
+        {label !== undefined ? label : row + 1}
+      </Typography>
       <div
         onMouseDown={onMouseDown}
         onClick={() => activate({ row, column: -1 })}

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

@@ -4,32 +4,31 @@
   display: flex;
   flex-direction: column;
 
-  .ff-excel-toolbar-container{
-    position: static;
+  .ff-excel-toolbar-container {
+    position: relative;
     top: 0;
-    background-color:var( --excel-toolbar-bg);
+    background-color: var(--excel-toolbar-bg);
     padding: 4px 8px;
     margin-bottom: 20px;
   }
 
-.ff-spreadsheet {
-  --background-color: var(--drawer-footer-bg);
-  --text-color: var(--text-color);
-  --readonly-text-color: var(--toggle-strip-active);
-  --outline-color: var(--toggle-strip-active);
-  --outline-background-color: var(--overlay-bg);
-  --border-color: var(--excel-sheet-border);
-  --header-background-color: var(--excel-header-bg);
-  --elevation: var(--brand-color);
+  .ff-spreadsheet {
+    --background-color: var(--drawer-footer-bg);
+    --text-color: var(--text-color);
+    --readonly-text-color: var(--toggle-strip-active);
+    --outline-color: var(--toggle-strip-active);
+    --outline-background-color: var(--overlay-bg);
+    --border-color: var(--excel-sheet-border);
+    --header-background-color: var(--excel-header-bg);
+    --elevation: var(--brand-color);
 
     position: relative;
     overflow: scroll;
+    left: 0;
+    top: 0;
     background: var(--background-color);
     color: var(--text-color);
     scrollbar-width: none;
-    &::-webkit-scrollbar {
-      height: 0px;
-    }
     display: inline-block;
   }
 
@@ -55,113 +54,126 @@
     }
     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;
-    font-weight: 500;
-    font-size: 12px;
-  }
+    .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{
-    padding-left: 20px; 
-    z-index: 1100;
-  }
+    .ff-spreadsheet-corner-header {
+      position: fixed;
+      z-index: 2000;
+    }
 
-  .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/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -228,9 +228,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               showLabel={false}
               optionZIndex={1000}
               onChange={(e) => {
-                console.log(e);
                 setSelectedFontFamily({ label: e.label, value: e.label });
-                setFontFamily(data, e.label);
+                setFontFamily(data, e.value);
               }}
               required={false}
               optionsList={fontFamily}

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import FileDropzone from './FileDropzone';
 import Toaster from '../Toast';
@@ -109,7 +109,6 @@ export const WithRadioButton: Story = {
       useState<RadioOption>();
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
-    const fileInputRef = useRef<HTMLInputElement | null>(null);
 
     const drawerArgs = {
       primaryButtonProps: {
@@ -126,12 +125,6 @@ export const WithRadioButton: Story = {
       },
     };
 
-    useEffect(() => {
-      if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
-        fileInputRef.current.click();
-      }
-    }, [selectedRadioOption]);
-
     const radioOptions: RadioOption[] = [
       { value: 'Test Data', label: 'Test Data' },
       { value: 'Local File', label: 'Local File' },
@@ -146,10 +139,11 @@ export const WithRadioButton: Story = {
     };
     const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files?.[0];
+      
       if (file) {
         setSelectedFile(file);
       }
-    };
+    };    
 
     const handleRemoveFile = () => {
       setSelectedFile(null);
@@ -191,15 +185,7 @@ export const WithRadioButton: Story = {
             toastMessage={'Max 5 files can be uploaded'}
           />
         )}
-        {selectedRadioOption?.value === 'Local File' ? (
-          <input
-            ref={fileInputRef}
-            type="file"
-            className='ff-input-ref'
-            onChange={handleFileChange}
-            accept="image/png, image/jpeg, application/x-zip-compressed, application/zip"
-          />
-        ) : (
+        {selectedRadioOption?.value === 'Local File' &&
           <Drawer
             {...drawerArgs}
             isOpen={showModal}
@@ -210,7 +196,7 @@ export const WithRadioButton: Story = {
           >
             <Typography>Upload TestData Files Here</Typography>
           </Drawer>
-        )}
+        }
       </>
     );
   },

package/src/components/FileDropzone/FileDropzone.tsx

@@ -3,7 +3,7 @@ import { FileDropzoneProps } from './types';
 import './FileDropzone.scss';
 import Icon from '../Icon';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import Dropzone from './Dropzone';
 import FilePreview from './FilePreview';
 import classNames from 'classnames';
@@ -39,6 +39,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   isApiResponseError = false,
   isDisable = false,
 }) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
   const {
     getRootProps,
     getInputProps,
@@ -77,6 +78,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
     [acceptedFiles, handleRemoveClick, handleReplaceClick]
   );
 
+  useEffect(() => {
+    if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [selectedRadioOption]);
+
   useEffect(() => {
     if (!checkEmpty(acceptedFiles) && setSelectedFile) {
       setSelectedFile(acceptedFiles[0] || null);
@@ -98,9 +105,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   );
 
   return (
-    <div className={classNames('ff-file-dropzone-wrapper',
-      {'ff-disable-file-dropzone-wrapper': isDisable,}
-    )} style={{ width: `${width}px` }}>
+    <div
+      className={classNames('ff-file-dropzone-wrapper', {
+        'ff-disable-file-dropzone-wrapper': isDisable,
+      })}
+      style={{ width: `${width}px` }}
+    >
       <Dropzone
         icon={icon}
         primaryLabel={primaryLabel}
@@ -123,6 +133,16 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
         isDisable={isDisable}
       />
 
+      {isWebServiceFileDropZone && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="ff-input-ref"
+          onChange={handleFileChange}
+          accept={accept.join(',')}
+        />
+      )}
+
       {isWebServiceFileDropZone ? null : (
         <div
           className={'ff-file-details-wrapper'}

package/src/components/Icon/iconList.ts

@@ -66,6 +66,7 @@ import TextColor from '../../assets/icons/text_color.svg?react';
 import FillColor from '../../assets/icons/fill_color.svg?react';
 import FormulaIcon from '../../assets/icons/formula_icon.svg?react';
 import ExcelCornerMenu from '../../assets/icons/excel_corner_menu.svg?react';
+import AutoSaveIcon from '../../assets/icons/auto_save_icon.svg?react';
 
 import ApkFileType from '../../assets/icons/apk_file_type.svg?react';
 import CsvFileType from '../../assets/icons/csv_file_type.svg?react';
@@ -318,6 +319,7 @@ Components['text_color'] = TextColor;
 Components['fill_color'] = FillColor;
 Components['formula_icon'] = FormulaIcon;
 Components['excel_corner_menu'] = ExcelCornerMenu;
+Components['auto_save_icon'] = AutoSaveIcon;
 Components['export'] = Export;
 Components['apk_file_type'] = ApkFileType;
 Components['csv_file_type'] = CsvFileType;

package/src/components/MachineInputField/MachineInputField.stories.tsx

@@ -15,10 +15,11 @@ type Story = StoryObj<typeof MachineInputField>;
 
 // Sample data for the MachineInputField
 const sampleOptions: MachineType[] = [
-  { label: 'Local Environment', type: 'Local' },
-  { label: '121.25.333.344.2', type: 'Google Chrome' },
-  { label: '17, iPhone 15 pro max', type: 'mac' },
-  { label: 'Samsung Galaxy S23', type: 'android' },
+  { label: 'Local Environment', type: 'local' },
+  { label: '10.100.233.23', type: 'windows' },
+  { label: '121.25.333.344.2', type: 'Browserstack' },
+  { label: 'iphone 17 pro max', type: 'mac' },
+  { label: 'samsung galaxy s23', type: 'android' },
 ];
 
 export const Primary: Story = {

package/src/components/MachineInputField/MachineInputField.tsx

@@ -7,18 +7,15 @@ import classNames from 'classnames';
 import { truncateText } from '../../utils/truncateText/truncateText';
 
 const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
-  (
-    {
-      width = '',
-      options = [],
-      runCount = 0,
-      className = '',
-      contentReverse = false,
-      onClick = () => {},
-      modalId = '',
-    },
-    ref
-  ) => {
+  ({
+    width = '',
+    options = [],
+    runCount = 0,
+    className = '',
+    contentReverse = false,
+    onClick = () => {},
+    modalId = '',
+  }) => {
     const getIcon: Record<MachineType['type'], string> = {
       Local: 'local',
       Browserstack: 'browserstack_icon',
@@ -33,15 +30,15 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
       'Internet Explorer': 'internet_explorer',
       Safari: 'safari_icon',
       Opera: 'opera',
+      windows: 'windows',
     };
 
     return (
       <div
-        ref={ref}
-        id={modalId}
+        ref={modalId}
         style={{ width: width }}
         className={classNames('ff-machine-input-field-wrapper', className)}
-        onClick={onClick}
+        onClick={() => onClick()}
       >
         <Typography
           as="span"

package/src/components/MachineInputField/types.ts

@@ -1,3 +1,4 @@
+
 export interface MachineType {
   type: string;
   label: string;

package/src/components/MultiSelect/Dropdown.tsx

@@ -10,6 +10,7 @@ import Checkbox from '../Checkbox';
 import Tooltip from '../Tooltip';
 import { truncateText } from '../../utils/truncateText/truncateText';
 import { getLabel, getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -21,11 +22,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       zIndex,
       withSelectButton,
       labelAccessor='label',
-      valueAccessor='value'
+      valueAccessor='value',
+      loadMoreOptions,
     },
     ref
   ) => {
-    const filteredOptions = options
+      const filteredOptions = options
       ? options.filter((option) =>
           getValue(option, valueAccessor)
             ?.toLowerCase()
@@ -70,6 +72,22 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
 
     const themeContext = useContext(ThemeContext);
     const currentTheme = themeContext?.currentTheme;
+
+    useIntersectionObserver(['ff-multiselect-pagination'], {
+      root: document.getElementById('ff-multiselect-options-wrapper'),
+      rootMargin: '0px',
+      threshold: 0.1,  
+      onIntersect: (entry, _observer) => {
+        if (entry.isIntersecting) {
+          if (loadMoreOptions) {
+            loadMoreOptions();
+          }
+
+    
+        }
+      },
+    });
+
     return (
       <div
         role="listbox"
@@ -87,6 +105,8 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
         <div
           className="ff-multiselect-options-wrapper"
           style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
+
+          id="ff-multiselect-options-wrapper"
         >
           {filteredOptions.length === 0 ? (
               <Typography textAlign='center' as='p' className='no-options'>
@@ -94,7 +114,8 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
               </Typography>
            
           ) : (
-            filteredOptions.map((info) => (
+            <>
+           { filteredOptions.map((info) => (
               <div
                 role="option"
                 className={`dropdown-option-container`}
@@ -127,7 +148,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                   }
                 />
               </div>
-            ))
+            ))}
+
+            <div id="ff-multiselect-pagination" >
+              </div>
+            </>
+
           )}
         </div>
         {withSelectButton && filteredOptions.length > 0 && (

package/src/components/MultiSelect/MultiSelect.tsx

@@ -78,6 +78,7 @@ const MultiSelect = ({
   labelAccessor = 'label',
   valueAccessor = 'value',
   withSelectButton = variant === 'machines' ? true : false,
+  loadMoreOptions = () => { },
   onEnter = () => { },
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -464,6 +465,7 @@ const MultiSelect = ({
                 withSelectButton={withSelectButton}
                 labelAccessor={labelAccessor}
                 valueAccessor={valueAccessor}
+                loadMoreOptions={loadMoreOptions}
               />,
               document.body
             )}