pixel-react-excel-sheet 1.0.31 → 1.0.32

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/Search/Search.tsx

@@ -57,7 +57,9 @@ const Search = ({
   };
   const handleChange = (data: string) => {
     setSearchValue(data);
-    onSearch(data);
+    if (data === '') {
+      onSearch('');
+    }
   };
 
   return (

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 {

package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx

@@ -72,12 +72,6 @@ const Branches = ({
       machineInfo: { osVersion, iconName },
       deviceInfo,
     } = machineInstance as ExecutionContext;
-    // Helper to handle device info safely
-    const getDeviceOption = (platform: string, defaultType: string = '', index = 0) =>
-      deviceInfo?.[index]?.platform?.toLowerCase().includes(platform ?? '')
-        ? defaultType
-        : undefined;
-
     const getEnvironment = (environment: string = '') => {
       if (environment.toLowerCase().includes('browserstack'))
         return 'Browserstack';
@@ -110,11 +104,11 @@ const Branches = ({
     const mobileOptions = [
       {
         label: deviceInfo?.[0]?.name,
-        type: getDeviceOption('android', 'android_icon', 0),
+        type: 'android',
       },
       {
         label: deviceInfo?.[1]?.name,
-        type: getDeviceOption('ios', 'mac_icon', 1),
+        type: 'mac',
       },
     ];
 

package/src/components/TextArea/Textarea.tsx

@@ -17,6 +17,7 @@ const Textarea = ({
   onChange,
   onBlur,
   onFocus,
+  onPaste,
   rows = 4,
   cols = 40,
   resize = false,
@@ -65,6 +66,7 @@ const Textarea = ({
         onChange={onChange}
         onBlur={onBlur}
         onFocus={onFocus}
+        onPaste={onPaste}
         required={required}
         rows={rows}
         cols={cols}

package/src/components/TextArea/Types.ts

@@ -49,6 +49,9 @@ export interface TextareaProps {
   onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
 
   onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+
+  onPaste?: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+  
   /**
    * id to select the textarea field uniquely
    */

package/src/components/ThemeProvider/types.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme';
+export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme' | 'ff-blue-theme';
 
 export interface ThemeContextType {
   currentTheme: Theme;

package/src/utils/validateFile/validateFile.stories.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import {
+  validateFileExtension,
+  validateZipFileExtension,
+} from './validateFile';
+
+export default {
+  title: 'Utils/validateFile',
+};
+
+const allowedFileTypes = {
+  '.txt': 'text/plain',
+  '.zip': 'application/zip',
+  '.jpg': 'image/jpeg',
+};
+
+export const ValidateFileExtension = () => {
+  const [result, setResult] = useState<string | boolean>('');
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isValid = validateFileExtension(event, allowedFileTypes);
+    setResult(isValid ? 'Valid file type' : 'Invalid file type');
+  };
+
+  return (
+    <div>
+      <h3>Validate File Extension</h3>
+      <input type="file" onChange={handleFileChange} />
+      <p>Result: {result.toString()}</p>
+    </div>
+  );
+};
+
+export const ValidateZipFileExtension = () => {
+  const [result, setResult] = useState<string | boolean>('');
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isValid = validateZipFileExtension(event);
+    setResult(isValid ? 'Valid ZIP file' : 'Invalid ZIP file');
+  };
+
+  return (
+    <div>
+      <h3>Validate ZIP File Extension</h3>
+      <input type="file" onChange={handleFileChange} />
+      <p>Result: {result.toString()}</p>
+    </div>
+  );
+};

package/src/utils/validateFile/validateFile.ts

@@ -0,0 +1,39 @@
+export const validateFileExtension = (
+  file: File | React.ChangeEvent<HTMLInputElement>,
+  allowedFileTypes: Record<string, string>
+) => {
+  const selectedFile =
+    (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
+    (file as File);
+  const fileExtension =
+    '.' + selectedFile?.name?.split('.')?.pop()?.toLowerCase();
+  const fileType = selectedFile?.type;
+  if (
+    ['.ipa', '.y4m', '.yml', '.md', '.pem', '.properties'].includes(
+      fileExtension
+    ) &&
+    Object.keys(allowedFileTypes)?.includes(fileExtension)
+  ) {
+    return true;
+  }
+  return (
+    allowedFileTypes[fileExtension] &&
+    fileType === allowedFileTypes[fileExtension]
+  );
+};
+
+export const validateZipFileExtension = (
+  file: File | React.ChangeEvent<HTMLInputElement>
+) => {
+  const selectedFile =
+    (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
+    (file as File);
+  // List of valid MIME types
+  const validMimeTypes = ['application/zip', 'application/x-zip-compressed'];
+  // Validating the file extension and MIME type
+  return (
+    selectedFile &&
+    validMimeTypes?.includes(selectedFile?.type) &&
+    selectedFile?.name?.toLowerCase()?.endsWith('.zip')
+  );
+};

package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss

@@ -1,51 +0,0 @@
-.ff-connecting-datalist-modal-header-wrapper,
-.ff-connecting-modal-child-wrapper {
-  width: 534px;
-  padding: 0 4px;
-}
-
-.ff-connecting-datalist-modal-header-wrapper {
-  border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
-  margin-bottom: 4px;
-}
-
-.ff-connecting-modal-child-wrapper {
-  .ff-branch-select-input-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .ff-select-browser {
-      width: 263px;
-    }
-
-    .ff-branch-input-wrapper {
-      display: flex;
-      align-items: flex-end;
-      height: 38px;
-
-      .ff-input-browser {
-        width: 245px;
-      }
-    }
-  }
-}
-
-.ff-connecting-modal-footer-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 8px;
-  margin-top: 8px;
-  border-top: 1px solid var(--ff-connecting-branch-modal-border);
-
-  .ff-branch-toggle-wrapper,
-  .ff-datalist-button-wrapper {
-    display: flex;
-    gap: 8px;
-  }
-
-  .ff-branch-toggle-wrapper {
-    gap: 4px;
-  }
-}