pixel-react-excel-sheet 1.0.31 → 1.0.33

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -7,6 +7,7 @@ import Icon from '../Icon';
 import Tooltip from '../Tooltip';
 import Input from '../Input/Input';
 import Select from '../Select/Select';
+import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
 
 const getErrorMessage = (
   inputValue: string,
@@ -21,7 +22,7 @@ const getErrorMessage = (
   } else if (inputValue.length < 3) {
     return 'Please enter at least 3 characters.';
   } else if (customErrorCondition) {
-    return customError ?? '';
+    return customError ?? 'Custom error occurred';
   }
   return '';
 };
@@ -35,6 +36,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   customErrorCondition,
   cancelIcon,
   variant = 'textField',
+  onInputChange,
   dropdownData = [],
   // width,
   height,
@@ -44,17 +46,19 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   tooltip,
 }) => {
   const [isEditing, setIsEditing] = useState(isOpen ?? false);
-  const [inputValue, setInputValue] = useState(text);
+  const [inputValue, setInputValue] = useState(text ?? '');
   const [dropdownValue, setDropdownValue] = useState(
     dropdownData[0]?.value ?? ''
   );
   const [showError, setShowError] = useState('');
+  const [disabled, isDisabled] = useState(true);
   const [isTextFieldModified, setIsTextFieldModified] = useState(false);
   const isThrowingError = showError && isEditing ? true : false;
 
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
+  const cancelRef = useRef<HTMLDivElement | null>(null);
   const [clickTimeout, setClickTimeout] = useState<number | null>(null);
+  const handleEsc = useEscapeKey('Escape');
   useEffect(() => {
     return () => {
       if (clickTimeout) {
@@ -87,14 +91,16 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
     setClickTimeout(timeout);
   };
   const handleConfirm = () => {
-    const errorMessage = getErrorMessage(
-      inputValue,
-      text,
-      customError,
-      customErrorCondition
-    );
+    let errorMessage = '';
+    if (inputValue.length === 0 || inputValue.trim().length === 0) {
+      errorMessage = 'Please type any text.';
+    } else if (inputValue.length < 3) {
+      errorMessage = 'Please enter at least 3 characters.';
+    } else if (customErrorCondition) {
+      errorMessage = customError ?? 'Invalid input.';
+    }
 
-    if (errorMessage && isEditing) {
+    if (errorMessage) {
       setShowError(errorMessage);
     } else {
       setIsEditing(false);
@@ -104,7 +110,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   };
 
   const handleCancel = () => {
-    setInputValue(text);
+    setInputValue(text ?? '');
     setDropdownValue(dropdownData[0]?.value ?? '');
     setIsEditing(false);
     setShowError('');
@@ -112,18 +118,33 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   };
 
   const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-    setIsTextFieldModified(true);
-    setShowError('');
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    isDisabled(false);
+    if (newValue.length === 0 || newValue.trim().length === 0) {
+      setShowError('Please type any text.');
+    } else if (newValue.length < 3) {
+      setShowError('Please enter at least 3 characters.');
+    } else if (customErrorCondition) {
+      setShowError(customError ?? 'Invalid input.');
+    } else {
+      setShowError('');
+    }
+
+    setIsTextFieldModified(newValue !== text);
+
+    if (onInputChange) {
+      onInputChange(newValue);
+    }
   };
 
   const handleBlur = (e: MouseEvent) => {
     if (
       containerRef.current &&
       !containerRef.current.contains(e.target as Node) &&
-      cancelRef.current !== e.target // Exclude clicks on cancel icon
+      cancelRef.current !== e.target
     ) {
-      const errorMessage = getErrorMessage(inputValue, text, customError);
+      const errorMessage = getErrorMessage(inputValue, text ?? '', customError);
 
       if (errorMessage && isEditing) {
         setShowError(errorMessage);
@@ -140,7 +161,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
       document.removeEventListener('click', handleBlur);
     };
   }, [inputValue]);
-
+  handleEsc(handleCancel);
   return (
     <div className="ff-label-edit-text-field" ref={containerRef}>
       {isEditing ? (
@@ -195,7 +216,10 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
                 height={20}
                 width={20}
                 name={confirmIcon.name}
-                className="confirm-icon"
+                disabled={disabled}
+                className={`${
+                  disabled ? 'disabled-confirm-icon' : 'confirm-icon'
+                }`}
                 onClick={handleConfirm}
               />
             )}

package/src/components/LabelEditTextField/types.ts

@@ -16,7 +16,7 @@ export interface LabelEditTextFieldTypes {
   /** Label text displayed above the input field. */
   label?: string;
   /** Initial text displayed in the input field. */
-  text: string;
+  text?: string;
   /** Text to be highlighted within the displayed text, if provided. */
   highlightText?: string;
   /** Custom error message to be displayed, if applicable. */
@@ -40,6 +40,8 @@ export interface LabelEditTextFieldTypes {
   customErrorCondition?: boolean;
   placeholder?: string;
   onClick?: () => void;
+  /** Function called when every input character got changed */
+  onInputChange?: (newInputValue: string) => void;
   tooltip?: {
     tooltipTitle?: string;
     tooltipPlacement?: string;

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 = 'local' }) => (
+          <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/NLPInput/components/NlpDropDown/NlpDropdown.scss

@@ -16,7 +16,7 @@
 .ff-nlp-dropdown-wrapper {
   .ff-nlp-options-wrapper {
     max-height: 256px;
-    z-index: 100;
+    z-index: 999;
     position: absolute;
     border: 1px solid var(--nlp-border-color);
     box-sizing: border-box;

package/src/components/ScriptSwitchButton/ScriptSwitchButton.scss

@@ -0,0 +1,33 @@
+/* Container Styling */
+.ff-script-switch-container {
+  display: flex;
+  background-color: var(--base-bg-color);
+  height: 24px;
+  width: 48px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  align-items: center;
+  justify-content: center;
+
+  /* Button Styling */
+  .ff-script-switch-button {
+    padding: 0.1px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    outline: none;
+    transition: all 0.3s ease;
+
+    /* Button Hover Effect */
+    &:hover {
+      background-color: var(--hover-color);
+      color: var(--brand-color);
+    }
+  }
+
+  /* Active Button */
+  .ff-script-switch-button.active {
+    background-color: var(--ff-line-number-bg);
+    color: var(--base-bg-color);
+  }
+}

package/src/components/ScriptSwitchButton/ScriptSwitchButton.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import ScriptSwitchButton from './ScriptSwitchButton';
+
+const meta: Meta<typeof ScriptSwitchButton> = {
+  title: 'Components/ScriptSwitchButton',
+  component: ScriptSwitchButton,
+  tags: ['autodocs'],
+  argTypes: {
+    selected: {
+      control: { type: 'radio' },
+      options: ['Automation', 'Manual'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ScriptSwitchButton>;
+
+export const Default: Story = {
+  args: {
+    selected: 'Automation',
+    tabList: ['Automation', 'Manual'],
+    handleClick: () => {},
+  },
+};
+
+export const Switch: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string>('Automation');
+    const handleChange = (selectedSwitch: string) => {
+      if (selectedSwitch.includes('Automation')) {
+        !selectedSwitch.includes('Add') && setSelected(selectedSwitch);
+      } else {
+        !selectedSwitch.includes('Add') && setSelected(selectedSwitch);
+      }
+    };
+
+    return (
+      <ScriptSwitchButton
+        selected={selected}
+        tabList={['Automation', 'Manual']}
+        handleClick={handleChange}
+      />
+    );
+  },
+};

package/src/components/ScriptSwitchButton/ScriptSwitchButton.tsx

@@ -0,0 +1,65 @@
+import React, { type JSX } from 'react';
+import './ScriptSwitchButton.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+
+interface ScriptSwitchButtonProps {
+  handleClick: (selected: string) => void;
+  selected: string;
+  tabList: Array<'Automation' | 'Manual'>;
+}
+
+const ScriptSwitchButton: React.FC<ScriptSwitchButtonProps> = ({
+  selected = 'text',
+  handleClick,
+  tabList, //  ['Automation' , 'Manual']
+}): JSX.Element => {
+  const isAutomation = tabList?.includes('Automation');
+  const isManual = tabList?.includes('Manual');
+
+  return (
+    <div className="ff-script-switch-container">
+      <Tooltip
+        title={isAutomation ? 'Automation' : 'Add Automation'}
+        zIndex={1000}
+      >
+        <div
+          className={`ff-script-switch-button ${
+            selected === 'Automation' ? 'active' : ''
+          }`}
+          onClick={() =>
+            handleClick(isAutomation ? 'Automation' : 'Add Automation')
+          }
+        >
+          <Icon
+            name={isAutomation ? 'automation_testcase' : 'add_testcase'}
+            color={
+              selected === 'Automation'
+                ? 'var(--primary-button-text-color)'
+                : 'var(--description-text)'
+            }
+          />
+        </div>
+      </Tooltip>
+      <Tooltip title={isManual ? 'Manual' : 'Add Manual'} zIndex={1000}>
+        <div
+          className={`ff-script-switch-button ${
+            selected === 'Manual' ? 'active' : ''
+          }`}
+          onClick={() => handleClick(isManual ? 'Manual' : 'Add Manual')}
+        >
+          <Icon
+            name={isManual ? 'manual_testcase' : 'add_testcase'}
+            color={
+              selected === 'Manual'
+                ? 'var(--primary-button-text-color)'
+                : 'var(--description-text)'
+            }
+          />
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ScriptSwitchButton;

package/src/components/ScriptSwitchButton/index.ts

@@ -0,0 +1 @@
+export { default } from './ScriptSwitchButton';

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

@@ -228,10 +228,10 @@ const Select: FC<SelectProps> = ({
             as="span"
             className={classNames('ff-select-labels', {
               'ff-select-labels__icon': showIcon,
-              'ff-select-labels__active': searchedOption,
+              'ff-select-labels__active': searchedText,
             })}
-            fontSize={searchedOption || showDropdownOptions ? 8 : 12}
-            lineHeight={searchedOption || showDropdownOptions ? '8px' : '12px'}
+            fontSize={searchedText || showDropdownOptions ? 10 : 12}
+            lineHeight={searchedText || showDropdownOptions ? '10px' : '12px'}
             required={required}
           >
             {label}
@@ -264,7 +264,7 @@ const Select: FC<SelectProps> = ({
                 onSelectBlur={onSelectBlur}
                 onSelectOptionSelector={onSelectOptionSelector}
                 heightFromTop={height}
-                selectedOption={searchedOption}
+                selectedOption={searchedText}
                 showIcon={showIcon}
               />,
               document.body

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/StatusCard/StatusCard.scss

@@ -68,8 +68,9 @@
   }
 
   .ff-content {
+    height: 100%;
     flex: 1;
-    padding: 8px;
+    padding: 0px 8px;
     display: flex;
     flex-direction: column;
     justify-content: center;

package/src/components/StatusCard/StatusCard.stories.tsx

@@ -1,6 +1,8 @@
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Card from './StatusCard';
 import { CardProps } from './types';
+import StatusCard from './StatusCard';
 
 const meta: Meta<typeof Card> = {
   title: 'Components/Card',
@@ -18,7 +20,7 @@ export const Passed: Story = {
     status: 'Passed',
     count: 66,
     text: 'Scripts were passed all the time.',
-    style:{width:'200px'},
+    style: { width: '200px' },
   },
 };
 
@@ -57,3 +59,59 @@ export const Flaky: Story = {
     text: 'Scripts were flaky in their behavior.',
   },
 };
+
+export const AllCards: Story = {
+  render: () => {
+    const [toggledCard, setToggledCard] = useState<number | null>(null);
+
+    const data = [
+      {
+        name: 'Passed',
+        count: 6,
+        text: 'Scripts were Passed all the time',
+      },
+      {
+        name: 'Failed',
+        count: 6,
+        text: 'Scripts were Failed all the time',
+      },
+      {
+        name: 'Warning',
+        count: 6,
+        text: 'Scripts were Warning all the time',
+      },
+      {
+        name: 'Skipped',
+        count: 6,
+        text: 'Scripts were Skip all the time',
+      },
+      {
+        name: 'Flaky',
+        count: 6,
+        text: 'Scripts were Flaky all the time',
+      },
+    ];
+
+    const onHandleStatus = (status: string, index: number) => {
+      setToggledCard(index);
+      console.log(`Selected status: ${status}`);
+    };
+
+    return (
+      <div style={{ display: 'flex', gap: '8px' }}>
+        {data.map((row, index) => (
+          <div key={index}>
+            <StatusCard
+              count={row?.count}
+              icon={`${row.name.toLowerCase()}_status_icon`}
+              status={row?.name as any}
+              text={row.text}
+              onSelectedStatus={(status) => onHandleStatus(status, index)}
+              resetToggle={toggledCard !== index}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/StatusCard/StatusCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './StatusCard.scss';
 import { CardProps } from './types';
 import Typography from '../Typography';
@@ -10,6 +10,7 @@ const StatusCard: React.FC<CardProps> = ({
   count,
   text,
   style = { width: '196.4px' },
+  resetToggle,
   onSelectedStatus = (_status) => {},
 }) => {
   const [isToggled, setIsToggled] = useState<boolean>(false);
@@ -18,10 +19,17 @@ const StatusCard: React.FC<CardProps> = ({
     setIsToggled(true);
     onSelectedStatus(status);
   };
+
+  useEffect(() => {
+    if (resetToggle) {
+      setIsToggled(false);
+    }
+  }, [resetToggle]);
+
   return (
     <div
       className={`ff-card-container ${status.toLowerCase()} ${
-        isToggled ? 'toggled' : ''
+        isToggled ? `toggled` : ''
       }`}
       style={style}
       onClick={() => handleSelectStatus(status)}