pixel-react-excel-sheet 1.0.38 → 1.0.39

package/src/components/SequentialConnectingBranch/types.ts

@@ -8,7 +8,10 @@ export interface SequentialConnectingBranchProps {
   machineOptionsList?: Option[];
   onHandleSelect?: (option: Option) => void;
   onAddBrowserInstance?: (modalId: string) => void;
-  onUpdateAddBrowserInstance: (modalId: string, machineInstance: ExecutionContext) => void;
+  onUpdateAddBrowserInstance: (
+    modalId: string,
+    machineInstance: ExecutionContext
+  ) => void;
   onDeleteBrowserInstance?: (id: string, runCount: number) => void;
   onAddRunBrowserInstance?: (machineInstanceId: string) => void;
   onDeleteMachineInstance?: () => void;
@@ -23,6 +26,7 @@ export interface SequentialConnectingBranchProps {
   addInstanceLabel?: string;
   scriptType?: string;
   projectType?: string;
+  readOnly?: boolean;
 }
 
 // Type for machine information

package/src/components/TableTree/Components/TableCell.tsx

@@ -15,7 +15,7 @@ const renderSpaces = (
       <span
         key={i}
         className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
-          isLast && i === level-1 ? 'last-node' : ''
+          isLast && i === level - 1 ? 'last-node' : ''
         }`}
       />
     ))}
@@ -51,7 +51,7 @@ const TableCell = React.memo(
           {col.isTree && select === 'checkbox' && (
             <Checkbox
               checked={selected.includes(node.id)}
-              onChange={() => onCheckBoxChange('checkbox', node)}
+              onChange={(e) => onCheckBoxChange(e, node)}
             />
           )}
           {col.isTree && select === 'radio' && (
@@ -59,7 +59,7 @@ const TableCell = React.memo(
               name={node.title}
               checked={selected.includes(node.id)}
               value={node.id}
-              onChange={() => onCheckBoxChange('radio', node)}
+              onChange={(e) => onCheckBoxChange(e, node)}
             />
           )}
           {prepareData(node, col)}

package/src/components/TableTree/TableTree.scss

@@ -199,13 +199,6 @@
   transition: transform 0.3s ease;
 }
 
-tr:after {
-  content: ' ';
-  display: block;
-  visibility: hidden;
-  clear: both;
-}
-
 .tree-table-space-container {
   display: inline-flex;
   // flex-direction: row-reverse;

package/src/components/TableTree/TableTree.tsx

@@ -4,7 +4,6 @@ import { TreeTableProps } from './types';
 import TableHead from './Components/TableHead';
 import TableBody from './Components/TableBody';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
-import getAllChildIds from './Utils/getAllChildIds';
 import functionCheck from '../../utils/functionCheck/functionCheck';
 
 const TreeTable: React.FC<TreeTableProps> = ({
@@ -41,28 +40,10 @@ const TreeTable: React.FC<TreeTableProps> = ({
   );
 
   const handleCheckBoxChange = useCallback(
-    (type: string, node: any) => {
-      const nodeId = node.id;
-
-      if (type === 'radio') {
-        onChange?.('true', [nodeId]);
-      } else {
-        let updatedSelected = [...selected];
-
-        if (!updatedSelected.includes(nodeId)) {
-          const childIds = getAllChildIds(nodeId, treeData);
-          updatedSelected = [...new Set([...updatedSelected, ...childIds])]; // Add children
-        } else {
-          const childIds = getAllChildIds(nodeId, treeData);
-          updatedSelected = updatedSelected.filter(
-            (id) => !childIds.includes(id)
-          );
-        }
-
-        onChange?.('true', updatedSelected);
-      }
+    (e: any, node: any) => {
+      onChange?.(e, node);
     },
-    [selected, treeData, onChange]
+    [onChange]
   );
 
   const handleRowClick = useCallback(

package/src/components/TableTree/types.ts

@@ -15,7 +15,7 @@ export interface TableCellProps {
   level: number;
   selected: string[];
   select: string | null;
-  onCheckBoxChange: (type: string, node: any) => void;
+  onCheckBoxChange: (e: any, node: string[] | any) => void;
   onToggleExpand: (node: any) => void;
   parentSiblings: boolean[];
   isLast: boolean | undefined;
@@ -32,7 +32,7 @@ export interface TableBodyProps {
   select: string | null;
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: any) => void;
-  onCheckBoxChange: (type: string, node: any) => void;
+  onCheckBoxChange: (e: any, node: string[] | any) => void;
 }
 
 export interface TableRowProps {
@@ -43,7 +43,7 @@ export interface TableRowProps {
   select: string | null;
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: any) => void;
-  onCheckBoxChange: (type: string, node: any) => void;
+  onCheckBoxChange: (e: any, node: string[] | any) => void;
   parentSiblings: boolean[];
   isLast: boolean | undefined;
 }
@@ -65,7 +65,7 @@ export interface TreeTableProps {
   columnsData: Column[];
   selected?: string[];
   select?: 'radio' | 'checkbox' | 'none';
-  onChange?: (e: any, node: string[]) => void;
+  onChange?: (e: any, node: string[] | any) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
   onExpand?: (_isExpanded: boolean, node: string) => void;
   loadMore?: (_direction?: string) => void;

package/src/components/Tabs/Tabs.scss

@@ -13,6 +13,7 @@
 
       .ff-tab-button {
         &--default {
+          position: relative;
           border: none;
           background: none;
           padding: 0 4px;
@@ -129,4 +130,22 @@
   .ff-tab-content {
     width: inherit;
   }
+  .ff-defaultStatus {
+    position: absolute;
+    top: 2px;
+    right: 0px;
+    width: 6px;
+    height: 6px;
+    background-color: transparent;
+    border-radius: 50%;
+
+    &.ff-successStatus {
+      background-color: var(--confirm-tick-icon-color);
+      box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);
+    }
+    &.ff-dangerStatus {
+      background-color: var(--delete-text-color);
+      box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);
+    }
+  }
 }

package/src/components/Tabs/Tabs.tsx

@@ -58,6 +58,15 @@ const Tabs = ({
                 'ff-tab-bar--active': activeTabId === tab.id,
               })}
             ></div>
+            <span
+              className={`ff-defaultStatus ${
+                tab.status === 'success'
+                  ? 'ff-successStatus'
+                  : tab.status === 'error'
+                  ? 'ff-dangerStatus'
+                  : ''
+              }`}
+            ></span>
           </button>
         ))}
       </div>

package/src/components/Tabs/types.ts

@@ -27,6 +27,7 @@ export interface TabsProps {
     component?: JSX.Element;
     disabled?: boolean;
     count?: number | string;
+    status?: 'success' | 'error' | 'transparent';
   }[];
   /**
    * Defines the styling variant of the tabs.

package/src/index.ts

@@ -74,6 +74,7 @@ import ProgressBar from './components/ProgressBar';
 import ChooseFile from './components/ChooseFile/ChooseFile';
 import ScriptSwitchButton from './components/ScriptSwitchButton';
 
+import MobileSkin from './components/MobileSkin';
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
 import {
@@ -97,11 +98,13 @@ import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob';
 import { capitalize } from './utils/capitalize/capitalize';
 import Comments from './components/Comment/Comments';
 import useFileDropzone from './hooks/useFileDropzone';
+import useClickOutside from './hooks/useClickOutside';
 import PopUpModal from './components/PopUpModal/PopUpModal';
 import FormatString from './utils/FormatString/FormatString';
 import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
 import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
 import PhoneInputField from './components/PhoneInput';
+import { useKeyboardActions } from './utils/keyBoardActionUtil/UseKeyboardActions';
 import {
   EMAIL_REGEX,
   URL_REGEX,
@@ -115,6 +118,7 @@ import {
   ALPHABET_ONLY_REGEX,
   NUMBERS_ONLY_REGEX,
   ALPHANUMERIC_REGEX,
+  ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
   DATE_REGEX,
   TIME_REGEX,
   FILE_EXTENSION_REGEX,
@@ -148,6 +152,15 @@ import {
   CURRENCY_GENERIC_REGEX,
   LINKEDIN_PROFILE_REGEX,
   TWITTER_HANDLE_REGEX,
+  UNIT_REGEX,
+  NUMBER_REGEX,
+  MEMORY_VALIDATION_REGEX,
+  STEP_GROUP_NAME_REGEX,
+  NLP_DESCRIPTION_REGEX,
+  FILE_NAME_REGEX,
+  ELEMENTS_TRAILING_SPACE_REGEX,
+  ELEMENTS_WHITE_SPACE_REGEX,
+  PARAMETER_ALPHANUMERIC_REGEX,
 } from './validations/regex';
 
 export {
@@ -235,6 +248,7 @@ export {
   ProgressBar,
   ChooseFile,
   ScriptSwitchButton,
+  MobileSkin,
 
   // utils exports
   checkEmpty,
@@ -252,8 +266,11 @@ export {
   saveFileFromBlob,
   capitalize,
   useFileDropzone,
+  useClickOutside,
   FormatString,
   hasDuplicateFile,
+  useKeyboardActions,
+  
   EMAIL_REGEX,
   URL_REGEX,
   PHONE_REGEX,
@@ -266,6 +283,7 @@ export {
   ALPHABET_ONLY_REGEX,
   NUMBERS_ONLY_REGEX,
   ALPHANUMERIC_REGEX,
+  ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
   DATE_REGEX,
   TIME_REGEX,
   FILE_EXTENSION_REGEX,
@@ -299,4 +317,13 @@ export {
   CURRENCY_GENERIC_REGEX,
   LINKEDIN_PROFILE_REGEX,
   TWITTER_HANDLE_REGEX,
+  UNIT_REGEX,
+  NUMBER_REGEX,
+  MEMORY_VALIDATION_REGEX,
+  STEP_GROUP_NAME_REGEX,
+  NLP_DESCRIPTION_REGEX,
+  FILE_NAME_REGEX,
+  ELEMENTS_TRAILING_SPACE_REGEX,
+  ELEMENTS_WHITE_SPACE_REGEX,
+  PARAMETER_ALPHANUMERIC_REGEX,
 };

package/src/utils/formData/ConvertFormDataToObject.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { convertFormDataToObject } from './ConvertFormDataToObject';
+
+export default {
+  title: 'Utils/convertFormDataToObject',
+  component: convertFormDataToObject,
+};
+
+export const Default = () => {
+  const formData = new FormData();
+  formData.append('username', 'Md Imran');
+  formData.append('email', 'im@xyz.com');
+  formData.append('age', '23');
+
+  const result = convertFormDataToObject(formData);
+
+  return (
+    <div>
+      <h3>Test convertFormDataToObject</h3>
+      <pre>
+        Convertion to an Array to show existing FormData:
+        {JSON.stringify(Array.from(formData.entries()), null, 2)}
+      </pre>
+      <pre>Result: {JSON.stringify(result, null, 2)}</pre>
+    </div>
+  );
+};

package/src/utils/formData/ConvertFormDataToObject.ts

@@ -0,0 +1,14 @@
+export const convertFormDataToObject = (formData: FormData): Record<string, any> => {
+  const obj: Record<string, any> = {};
+  formData.forEach((value, key) => {
+    if (obj[key]) {
+      // If the key already exists, convert it to an array
+      obj[key] = Array.isArray(obj[key])
+        ? [...obj[key], value]
+        : [obj[key], value];
+    } else {
+      obj[key] = value;
+    }
+  });
+  return obj;
+};

package/src/utils/getExtension/getExtension.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { getExtension } from './getExtension';
 
 export default {

package/src/utils/keyBoardActionUtil/UseKeyboardAction.stories.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useKeyboardActions } from './UseKeyboardActions';
+
+// A demonstration component to showcase the `useKeyboardAction` utility
+const UseKeyboardActionComponent: React.FC = () => {
+  const [message, setMessage] = useState<string>(
+    'Press Escape or Enter to see actions.'
+  );
+
+  // Registering keyboard actions using the `useKeyboardAction` utility
+  useKeyboardActions([
+    {
+      key: 'Escape',
+      action: () => setMessage('Escape key was pressed.'),
+    },
+    {
+      key: 'Enter',
+      action: () => setMessage('Enter key was pressed.'),
+    },
+    {
+      key: 'ArrowUp',
+      action: () => setMessage('ArrowUp key was pressed.'),
+    },
+  ]);
+
+  return (
+    <div
+      style={{ textAlign: 'center', padding: '20px', border: '1px solid #ddd' }}
+    >
+      <h3>Keyboard Action Utility</h3>
+      <p>{message}</p>
+      <p>Try pressing Escape, Enter, or ArrowUp keys.</p>
+    </div>
+  );
+};
+
+// Meta configuration for the story
+const meta: Meta<typeof UseKeyboardActionComponent> = {
+  title: 'Utils/UseKeyboardAction',
+  component: UseKeyboardActionComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UseKeyboardActionComponent>;
+
+// Default story for the component
+export const Primary: Story = {};

package/src/utils/keyBoardActionUtil/UseKeyboardActions.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { KeyboardAction } from "./types";
+
+export const useKeyboardActions = (actions: KeyboardAction[]) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      actions.forEach(({ key, action }) => {
+        if (event.key === key) {
+          action();
+        }
+      });
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [actions]);
+};

package/src/utils/keyBoardActionUtil/types.ts

@@ -0,0 +1,4 @@
+export type KeyboardAction = {
+  key: string;
+  action: () => void;
+};

package/src/validations/regex.stories.tsx

@@ -13,6 +13,7 @@ import {
   ALPHABET_ONLY_REGEX,
   NUMBERS_ONLY_REGEX,
   ALPHANUMERIC_REGEX,
+  ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
   DATE_REGEX,
   TIME_REGEX,
   FILE_EXTENSION_REGEX,
@@ -46,6 +47,15 @@ import {
   CURRENCY_GENERIC_REGEX,
   LINKEDIN_PROFILE_REGEX,
   TWITTER_HANDLE_REGEX,
+  NUMBER_REGEX,
+  UNIT_REGEX,
+  MEMORY_VALIDATION_REGEX,
+  STEP_GROUP_NAME_REGEX,
+  NLP_DESCRIPTION_REGEX,
+  FILE_NAME_REGEX,
+  ELEMENTS_TRAILING_SPACE_REGEX,
+  ELEMENTS_WHITE_SPACE_REGEX,
+  PARAMETER_ALPHANUMERIC_REGEX,
 } from './regex';
 
 export default {
@@ -119,6 +129,12 @@ export const Playground = () => {
       regex: ALPHANUMERIC_REGEX,
       description: 'Validates alphanumeric values (e.g. abc123)',
     },
+    
+    {
+      name: 'ALPHANUMERIC_WITH_ROUND_BRACES_REGEX',
+      regex: ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
+      description: 'Validates alphanumeric values with Underscore and RoundBraces Inclusive (e.g. abc123()_)',
+    },
     {
       name: 'DATE_REGEX',
       regex: DATE_REGEX,
@@ -287,8 +303,55 @@ export const Playground = () => {
       regex: TWITTER_HANDLE_REGEX,
       description: 'Validates Twitter handle (e.g. @username)',
     },
+    {
+      name: 'NUMBER_REGEX',
+      regex: NUMBER_REGEX,
+      description: 'Validates a number (integer or float)',
+    },
+    {
+      name: 'UNIT_REGEX',
+      regex: UNIT_REGEX,
+      description: 'Validates a string of letters (unit)',
+    },
+    {
+      name: 'MEMORY_VALIDATION_REGEX',
+      regex: MEMORY_VALIDATION_REGEX,
+      description: 'Regular expression to match a number with an optional unit (GB, MB, or KB)',
+},{
+      name: 'STEP_GROUP_NAME_REGEX',
+      regex: STEP_GROUP_NAME_REGEX,
+      description:
+        'Step group name accept only ( ,) ,-,_ special characters(e.g,step-group_one(test))',
+    },
+    {
+      name: 'NLP_DESCRIPTION_REGEX',
+      regex: NLP_DESCRIPTION_REGEX,
+      description:
+        'NLP Description should allow _ and $ only (e.g ,$nlpName_test)',
+    },
+    {
+      name: 'FILE_NAME_REGEX',
+      regex: FILE_NAME_REGEX,
+      description: `It should include a valid file extension (e.g.,'.txt', '.jpg') without special characters like '@' or multiple dots after the extension.`,
+    },
+    {
+      name: 'ELEMENTS_TRAILING_SPACE_REGEX',
+      regex: ELEMENTS_TRAILING_SPACE_REGEX,
+      description: `Element Name should not have space in the initial and end.`,
+    },
+    {
+      name: 'ELEMENTS_WHITE_SPACE_REGEX',
+      regex: ELEMENTS_WHITE_SPACE_REGEX,
+      description: `Elements name should not have only white space.`,
+    },
+    {
+      name: 'PARAMETER_ALPHANUMERIC_REGEX,',
+      regex: PARAMETER_ALPHANUMERIC_REGEX,
+      description: `Parameter name should be alphanumeric.`,
+    },
   ];
 
+
   const validateInput = () => {
     const validator = validators.find(
       (validator) => validator.name === selectedRegex

package/src/validations/regex.ts

@@ -38,6 +38,9 @@ const NUMBERS_ONLY_REGEX = /^\d+$/;
 // Alphanumeric Validation
 const ALPHANUMERIC_REGEX = /^[A-Za-z0-9]+$/;
 
+//Alphanumeric Validation With Round Braces and Underscore Inclusive (Used to validate Manual and Automation Script Names )
+const ALPHANUMERIC_WITH_ROUND_BRACES_REGEX = /^[a-zA-Z0-9-_() ]*$/;
+
 // Date Validation (YYYY-MM-DD)
 const DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/;
 
@@ -145,6 +148,27 @@ const LINKEDIN_PROFILE_REGEX =
 // Twitter Handle Validation
 const TWITTER_HANDLE_REGEX = /^@?([a-zA-Z0-9_]{1,15})$/;
 
+//Match a number (integer or float)
+const NUMBER_REGEX = /([0-9\.]+)/;
+
+//Match a string of letters (unit)
+const UNIT_REGEX = /[a-zA-Z]+/;
+
+//Regular expression to match a number with an optional unit (GB, MB, or KB)
+const MEMORY_VALIDATION_REGEX = /^(\d+\.?\d*)\s*(GB|MB|KB)?$/i;
+const STEP_GROUP_NAME_REGEX = /^[a-zA-Z0-9()\-_ ]+$/;
+
+const NLP_DESCRIPTION_REGEX = /^[a-zA-Z0-9_$\s]*$/;
+
+const FILE_NAME_REGEX = /\.([^.@]+)$/;
+
+const ELEMENTS_TRAILING_SPACE_REGEX = /^\S.*\S$/;
+
+const ELEMENTS_WHITE_SPACE_REGEX = /.*\S.*/;
+
+const PARAMETER_ALPHANUMERIC_REGEX =
+  /^[-_A-Za-z0-9 ]*$|^[-_A-Za-z0-9 ][A-Za-z0-9 ]*[-_A-Za-z-_]$/;
+
 export {
   EMAIL_REGEX,
   URL_REGEX,
@@ -158,6 +182,7 @@ export {
   ALPHABET_ONLY_REGEX,
   NUMBERS_ONLY_REGEX,
   ALPHANUMERIC_REGEX,
+  ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
   DATE_REGEX,
   TIME_REGEX,
   FILE_EXTENSION_REGEX,
@@ -191,4 +216,13 @@ export {
   CURRENCY_GENERIC_REGEX,
   LINKEDIN_PROFILE_REGEX,
   TWITTER_HANDLE_REGEX,
+  UNIT_REGEX,
+  NUMBER_REGEX,
+  MEMORY_VALIDATION_REGEX,
+  STEP_GROUP_NAME_REGEX,
+  NLP_DESCRIPTION_REGEX,
+  FILE_NAME_REGEX,
+  ELEMENTS_TRAILING_SPACE_REGEX,
+  ELEMENTS_WHITE_SPACE_REGEX,
+  PARAMETER_ALPHANUMERIC_REGEX,
 };