pixel-react-excel-sheet 1.0.30 → 1.0.32

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import './ExcelToolBar.scss';
 import MenuOption from '../../MenuOption';
 import Tooltip from '../../Tooltip';
@@ -69,6 +69,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   };
 
   const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
+  const underLineMenuRef = useRef<HTMLSpanElement>(null);
+  const borderMenuRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
     setCellStyle(cell?.style || basicStyle);
@@ -121,8 +123,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       value: 'double_border',
       label: 'Double Underline',
       icon: 'double_underline',
-    },
-    { value: 'line-through', label: 'Strikethrough', icon: 'strike_through' },
+    }
   ];
 
   const fontFamily = [
@@ -315,19 +316,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               onClick={() => setUnderlineType(data, underLine, true)}
               name={getUnderlineIcon()}
             />
-            <MenuOption
-              iconName="arrow_down"
-              zIndex={1000}
-              iconSize={12}
-              options={underlineTypeIcon}
-              tooltipPlacement="top"
-              variant="light"
-              onOptionClick={(e) => {
-                let selectedValue = e.value as string;
-                setUnderlineType(data, selectedValue, true);
-                setUnderLine(selectedValue);
-              }}
-            />
+            <span ref={underLineMenuRef}>
+              <MenuOption
+                targetRef={underLineMenuRef}
+                iconName="arrow_down"
+                zIndex={1000}
+                iconSize={12}
+                options={underlineTypeIcon}
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  let selectedValue = e.value as string;
+                  setUnderlineType(data, selectedValue, true);
+                  setUnderLine(selectedValue);
+                }}
+              />
+            </span>
           </div>
         </Tooltip>
       </div>
@@ -391,24 +395,29 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               onClick={() => setBorderType(data, border, 'black')}
               name={getBorderIcon()}
             />
-            <MenuOption
-              iconName="arrow_down"
-              iconSize={12}
-              zIndex={1000}
-              options={borderTypeIcon}
-              tooltipPlacement="top"
-              variant="light"
-              onOptionClick={(e) => {
-                let selectedValue = e.value as string;
-                setBorderType(data, selectedValue, 'black');
-                setBorder(selectedValue);
-              }}
-            />
+            <span ref={borderMenuRef}>
+              <MenuOption
+                iconName="arrow_down"
+                targetRef={borderMenuRef}
+                iconSize={12}
+                zIndex={1000}
+                options={borderTypeIcon}
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  let selectedValue = e.value as string;
+                  setBorderType(data, selectedValue, 'black');
+                  setBorder(selectedValue);
+                }}
+              />
+            </span>
           </div>
         </Tooltip>
       </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-menu">
+
+  
+      {/* <div className="ff-excel-toolbar-divider"></div>  TODO */}
+      {/* <div className="ff-excel-toolbar-menu"> 
         <Tooltip placement="top" title={'Formula'}>
           <Icon
             hoverEffect
@@ -417,7 +426,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             name="formula_icon"
           />
         </Tooltip>
-      </div>
+      </div>  TODO */}
     </div>
   );
 };

package/src/components/FileDropzone/Dropzone.tsx

@@ -24,6 +24,7 @@ const Dropzone: FC<DroppableProps> = ({
   setSelectedFile,
   handleRemoveFile,
   isDisable,
+  setShowDrawer,
 }) => {
   const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
   return (
@@ -42,6 +43,8 @@ const Dropzone: FC<DroppableProps> = ({
           onFileRemoveClick={handleRemoveFile}
           onFileReplaceClick={setSelectedFile}
           setSelectedFile={setSelectedFile}
+          selectedRadioOption={selectedRadioOption}
+          setShowDrawer={setShowDrawer}
         />
       ) : (
         <>

package/src/components/FileDropzone/FileDropzone.scss

@@ -4,6 +4,12 @@
   gap: $gap;
 }
 
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @mixin center {
   display: grid;
   place-items: center;
@@ -160,4 +166,16 @@
 .ff-disable-file-dropzone-wrapper {
   opacity: 0.5;
   cursor: not-allowed;
+}
+.footer_basic_button {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  @include flex-center;
+  justify-content: flex-end;
+  gap: 16px;
+  border-top: 1px solid var(--border-color);
+  padding: 4px 8px;
+  background-color: var(--primary-icon-color);
 }

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

@@ -5,8 +5,10 @@ import Toaster from '../Toast';
 import { useState } from 'react';
 import { RadioOption } from './types';
 import Drawer from '../Drawer/Drawer';
-import Typography from '../Typography';
+import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
 import './FileDropzone.scss';
+import { DynamicObj } from '../CreateVariable/types';
+import Button from '../Button';
 
 const meta: Meta<typeof FileDropzone> = {
   title: 'Components/FileDropzone',
@@ -107,8 +109,12 @@ export const WithRadioButton: Story = {
 
     const [selectedRadioOption, setSelectedRadioOption] =
       useState<RadioOption>();
-    const [selectedFile, setSelectedFile] = useState<File | null>(null);
-
+    const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
+      null
+    );
+    const [testDataSelectedFile, setTestDataSelectedFile] = useState<
+      DynamicObj | File | null
+    >(null);
 
     const drawerArgs = {
       primaryButtonProps: {
@@ -156,6 +162,42 @@ export const WithRadioButton: Story = {
       }, 2000);
     };
 
+    const testData = [
+      {
+        _id: '1',
+        name: 'File1.txt',
+        actualPath: '/documents/File1.txt',
+        searchKey: 'file1',
+        parentId: 'root',
+      },
+      {
+        _id: '2',
+        name: 'File2.doc',
+        actualPath: '/documents/File2.doc',
+        searchKey: 'file2',
+        parentId: 'root',
+      },
+      {
+        _id: '3',
+        name: 'Image1.png',
+        actualPath: '/images/Image1.png',
+        searchKey: 'image1',
+        parentId: 'folder1',
+      },
+      {
+        _id: '4',
+        name: 'Presentation.ppt',
+        actualPath: '/presentations/Presentation.ppt',
+        searchKey: 'presentation',
+        parentId: 'folder2',
+      },
+    ];
+
+    const handleSaveButton = () => {
+      setSelectedFile(testDataSelectedFile);
+      setShowModal(false);
+    };
+
     return (
       <>
         <FileDropzone
@@ -176,6 +218,7 @@ export const WithRadioButton: Story = {
           selectedFile={selectedFile}
           handleFileChange={handleFileChange}
           handleRemoveFile={handleRemoveFile}
+          setShowDrawer={setShowModal}
         />
         {showToaster && (
           <Toaster
@@ -185,18 +228,43 @@ export const WithRadioButton: Story = {
             toastMessage={'Max 5 files can be uploaded'}
           />
         )}
-        {selectedRadioOption?.value === 'Local File' &&
+        {selectedRadioOption?.value === 'Test Data' && (
           <Drawer
             {...drawerArgs}
             isOpen={showModal}
             onClose={() => setShowModal(false)}
-            isFooterRequired={true}
+            isFooterRequired={false}
             _isExpanded={false}
             size="small"
+            
           >
-            <Typography>Upload TestData Files Here</Typography>
+            <ConditionalDropdown
+              label="Select Path Using #"
+              placeholder="Enter # to search files"
+              isHash
+              dataFiles={testData}
+              dropdownWidth="auto"
+              setHashInputValue={setTestDataSelectedFile}
+            />
+            <div className="footer_basic_button">
+              <Button
+                type="button"
+                variant="secondary"
+                size="small"
+                onClick={() => setShowModal(false)}
+                label={'Cancel'}
+              />
+
+              <Button
+                type={'button'}
+                variant="primary"
+                size="small"
+                label={'Save'}
+                onClick={handleSaveButton}
+              />
+            </div>
           </Drawer>
-        }
+        )}
       </>
     );
   },

package/src/components/FileDropzone/FileDropzone.tsx

@@ -38,6 +38,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   handleRemoveFile,
   isApiResponseError = false,
   isDisable = false,
+  setShowDrawer,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const {
@@ -131,6 +132,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
         handleRemoveFile={handleRemoveFile}
         setSelectedFile={setSelectedFile}
         isDisable={isDisable}
+        setShowDrawer={setShowDrawer}
       />
 
       {isWebServiceFileDropZone && (

package/src/components/FileDropzone/RadioFilePreview.tsx

@@ -8,14 +8,18 @@ import { useRef } from 'react';
 const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
   selectedFile,
   onFileRemoveClick,
-  onFileReplaceClick
+  onFileReplaceClick,
+  selectedRadioOption,
+  setShowDrawer,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const handleReplaceClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
+    if (selectedRadioOption?.value === 'Test Data') {
+      setShowDrawer?.(true);
+      return;
     }
+    fileInputRef.current?.click();
   };
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {

package/src/components/FileDropzone/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { DynamicObj } from '../CreateVariable/types';
 export interface RadioOption {
   label: string;
   value: string;
@@ -93,12 +94,12 @@ export interface FileDropzoneProps {
   /**
    *  Its the File Name of File Selected from Local File.
    **/
-  setSelectedFile?: (file: File | null) => void;
+  setSelectedFile?: (file: File | DynamicObj | null) => void;
 
   /**
    *  Its the File Name of File Selected from Local File.
    **/
-  selectedFile?: File | null;
+  selectedFile?: File | DynamicObj | null;
 
   /**
    *  Its the function which updates the Selected file from Local Directory.
@@ -120,6 +121,11 @@ export interface FileDropzoneProps {
    **/
   isDisable?: boolean;
 
+   /**
+   *  Its the boolean value setted when the replace is clicked for TestData radio option .
+   **/
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
+
 }
 export interface FileState {
   accepted: File[];
@@ -176,11 +182,12 @@ export interface DroppableProps {
   selectedRadioOption?: Option, 
   radioOptions?: RadioOption[],
   handleOptionChange?: (option: RadioOption)=> void,
-  selectedFile?: File | null,
-  setSelectedFile?: (file: File | null) => void;
+  selectedFile?: File | DynamicObj | null,
+  setSelectedFile?: (file: File | DynamicObj | null) => void;
   handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   handleRemoveFile?: () => void;
   isDisable?: boolean;
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
 }
 
 export interface FilePreviewProps {
@@ -196,4 +203,6 @@ export interface RadioFilePreviewProps {
   onFileRemoveClick?: () => void;
   onFileReplaceClick?: (file: File | null) => void;
   setSelectedFile?: (file: File | null) => void;
+  selectedRadioOption?: Option,
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void
 }

package/src/components/Icon/iconList.ts

@@ -45,7 +45,7 @@ import ManualLocator from '../../assets/icons/manual_locator.svg?react';
 import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
 import DeleteIcon from '../../assets/icons/delete.svg?react';
 import DetailsIcon from '../../assets/icons/details.svg?react';
-import ImpactListIcon from '../../assets/icons/impactList.svg?react';
+import ImpactListIcon from '../../assets/icons/impact_list.svg?react';
 import Export from '../../assets/icons/export.svg?react';
 import FormatePainter from '../../assets/icons/formate_painter.svg?react';
 import Bold from '../../assets/icons/bold.svg?react';
@@ -295,7 +295,7 @@ Components['run_icon'] = RunIcon;
 Components['license'] = LicenseIcon;
 Components['delete'] = DeleteIcon;
 Components['details'] = DetailsIcon;
-Components['impactList'] = ImpactListIcon;
+Components['impact_list'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
 Components['add_variable_icon'] = AddVariable;
 Components['replace_file'] = ReplaceFile;

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -18,7 +18,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
       error,
       helperText,
       optionsList,
-      selectedOption,
+      selectedOption = { label: '', value: '' },
       autoComplete = 'off',
       onDropdownChangeHandler = () => {},
       onInputChangeHandler,

package/src/components/MachineInputField/MachineInputField.tsx

@@ -1,4 +1,3 @@
-import { forwardRef } from 'react';
 import './MachineInputField.scss';
 import Typography from '../Typography';
 import Icon from '../Icon';
@@ -6,81 +5,79 @@ import { MachineInputFieldProps, MachineType } from './types';
 import classNames from 'classnames';
 import { truncateText } from '../../utils/truncateText/truncateText';
 
-const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
-  ({
-    width = '',
-    options = [],
-    runCount = 0,
-    className = '',
-    contentReverse = false,
-    onClick = () => {},
-    modalId = '',
-  }) => {
-    const getIcon: Record<MachineType['type'], string> = {
-      Local: 'local',
-      Browserstack: 'browserstack_icon',
-      SauceLabs: 'sause_lab',
-      LambdaTest: 'lambda_icon',
-      mac: 'mac_icon',
-      android: 'android_icon',
-      linux: 'linux',
-      'Google Chrome': 'chrome_icon',
-      'Mozilla Firefox': 'fire_fox',
-      'Microsoft Edge': 'edge',
-      'Internet Explorer': 'internet_explorer',
-      Safari: 'safari_icon',
-      Opera: 'opera',
-      windows: 'windows',
-    };
+const MachineInputField = ({
+  width = '',
+  options = [],
+  runCount = 0,
+  className = '',
+  contentReverse = false,
+  onClick = () => {},
+  modalId = '',
+}: MachineInputFieldProps) => {
+  const getIcon: Record<MachineType['type'], string> = {
+    local: 'local',
+    browserstack: 'browserstack_icon',
+    sauceLabs: 'sause_lab',
+    lambdaTest: 'lambda_icon',
+    mac: 'mac_icon',
+    android: 'android_icon',
+    linux: 'linux',
+    'google chrome': 'chrome_icon',
+    'mozilla firefox': 'fire_fox',
+    'microsoft edge': 'edge',
+    'internet explorer': 'internet_explorer',
+    safari: 'safari_icon',
+    opera: 'opera',
+    windows: 'windows',
+  };
 
-    return (
-      <div
-        ref={modalId}
-        style={{ width: width }}
-        className={classNames('ff-machine-input-field-wrapper', className)}
-        onClick={() => onClick()}
+  return (
+    <div
+      id={modalId}
+      style={{ width: width }}
+      className={classNames('ff-machine-input-field-wrapper', className)}
+      onClick={() => onClick()}
+    >
+      <Typography
+        as="span"
+        color="var(--ff-machine-input-field-text-color)"
+        fontSize={8}
+        textAlign="center"
+        className="ff-machine-input-label"
       >
-        <Typography
-          as="span"
-          color="var(--ff-machine-input-field-text-color)"
-          fontSize={8}
-          textAlign="center"
-          className="ff-machine-input-label"
-        >
-          Run {runCount}
-        </Typography>
+        Run {runCount}
+      </Typography>
 
-        <div
-          className={classNames('ff-machine-input-field', {
-            'ff-machine-input-field-reverse': contentReverse,
-          })}
-        >
-          {options.map(({ label, type }) => (
-            <div
-              key={type}
-              className={classNames('ff-machine-icon-text-wrapper', {
-                'ff-machine-icon-text-wrapper-reverse': contentReverse,
+      <div
+        className={classNames('ff-machine-input-field', {
+          'ff-machine-input-field-reverse': contentReverse,
+        })}
+      >
+        {options.map(({ label, type }) => (
+          <div
+            key={type}
+            className={classNames('ff-machine-icon-text-wrapper', {
+              'ff-machine-icon-text-wrapper-reverse': contentReverse,
+            })}
+          >
+            <Icon
+              name={getIcon[type.toLowerCase()] || 'local'}
+              className="ff-machine-icon"
+            />
+            <Typography
+              className={classNames('ff-machine-text', {
+                'ff-machine-text-reverse': contentReverse,
               })}
+              color="var(--ff-machine-input-field-text-color)"
             >
-              <Icon
-                name={getIcon[type] || 'local'}
-                className="ff-machine-icon"
-              />
-              <Typography
-                className={classNames('ff-machine-text', {
-                  'ff-machine-text-reverse': contentReverse,
-                })}
-                color="var(--ff-machine-input-field-text-color)"
-              >
-                {truncateText(label, 15)}
-              </Typography>
-            </div>
-          ))}
-        </div>
+              {truncateText(label, 15)}
+            </Typography>
+          </div>
+        ))}
       </div>
-    );
-  }
-);
+    </div>
+  );
+};
 
 MachineInputField.displayName = 'MachineInputField';
 

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -135,13 +135,12 @@ export const MenuOptionBottom: Story = {
     dropdownPlacement: 'down',
   },
   render: (args) => {
-    const moreRef = useRef<HTMLDivElement>(null);
     return (
-      <div ref={moreRef}>
+      <div id="more">
         <MenuOption
           {...args}
           options={options}
-          targetRef={moreRef}
+          targetRef={'more'}
           onOptionClick={handleOptionClick}
         />
       </div>

package/src/components/MenuOption/MenuOption.tsx

@@ -153,9 +153,15 @@ const MenuOption = ({
   };
 
   const calculateDims = () => {
-    if (targetRef?.current) {
-      const rect = targetRef.current.getBoundingClientRect();
+    let targetElement: HTMLElement | null = null;
+    if (typeof targetRef === 'string') {
+      targetElement = document.getElementById(targetRef);
+    } else if (targetRef && targetRef.current) {
+      targetElement = targetRef.current;
+    }
 
+    if (targetElement) {
+      const rect = targetElement.getBoundingClientRect();
       setMenuPosition({
         top: rect.top + window.scrollY,
         left: rect.left + window.scrollX,
@@ -164,6 +170,7 @@ const MenuOption = ({
       });
     }
   };
+
   return (
     <div className="ff-menu-option-container" ref={menuRef}>
       <Tooltip title={tooltipTitle} placement={tooltipPlacement}>

package/src/components/MenuOption/types.ts

@@ -208,7 +208,7 @@ interface MenuOptionProps {
    * @optional
    */
   optionCardVariant?: 'primary';
-  targetRef?: React.RefObject<HTMLElement>;
+  targetRef?: string | React.RefObject<HTMLElement>;
 }
 
 interface OptionProps {

package/src/components/PopUpModal/types.ts

@@ -5,12 +5,13 @@ export interface PopUpModalProps {
   titleMessage: string;
   subTitleMessage?: string;
   iconName: string;
-  modalMessage: string;
+  modalMessage: string | React.ReactNode;
+  secondaryMessage?: string | React.ReactNode;
   firstButtonLabel?: string;
   secondButtonLabel: string;
   buttonVariant: any;
   border: string;
-    popupWidth?:string,
+  popupWidth?: string;
   colorForTitleMessage?: string;
-  footerContent?:React.ReactNode;
+  footerContent?: React.ReactNode;
 }

package/src/components/Search/Search.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Search from './Search';
-import React,{ useState } from 'react';
+import React, { useState } from 'react';
 const meta: Meta<typeof Search> = {
   title: 'Components/Search',
   component: Search,
@@ -17,7 +17,6 @@ export const Default: Story = {
     const [searchValue, setSearchValue] = useState('');
 
     const handleSearch = (value: string) => {
-      alert(`Searching for: ${value}`);
       setSearchValue(value);
     };
 

package/src/components/Select/types.ts

@@ -17,7 +17,7 @@ export interface SelectProps {
   /*
    * Selected option for the select dropdown
    */
-  selectedOption?: Option;
+  selectedOption: Option;
 
   /*
    * onChange callback function for handling selected option changes

package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss

@@ -74,6 +74,7 @@
 
   .ff-connecting-text {
     margin-right: 8px;
+    cursor: pointer;
   }
 
   .ff-connecting-delete-icon {