pixel-react-excel-sheet 1.0.32 → 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

@@ -53,7 +53,7 @@ const MachineInputField = ({
           'ff-machine-input-field-reverse': contentReverse,
         })}
       >
-        {options.map(({ label, type }) => (
+        {options.map(({ label, type = 'local' }) => (
           <div
             key={type}
             className={classNames('ff-machine-icon-text-wrapper', {
@@ -61,7 +61,7 @@ const MachineInputField = ({
             })}
           >
             <Icon
-              name={getIcon[type.toLowerCase()] || 'local'}
+              name={getIcon[type?.toLowerCase()] || 'local'}
               className="ff-machine-icon"
             />
             <Typography

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/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/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)}

package/src/components/StatusCard/types.ts

@@ -11,6 +11,8 @@ export interface CardProps {
   style?: React.CSSProperties;
   /** toggle update */
   handleToggleStatus?: (_status: boolean) => void;
+  /** make Card Select false */
+  resetToggle?: boolean;
   /** call back */
   onSelectedStatus?: (_status: string) => void;
 }

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

@@ -12,23 +12,27 @@ const TableBody = React.memo(
     onToggleExpand,
     onCheckBoxChange,
   }: TableBodyProps) => (
-    <tbody>
+    <tbody className='ff-table-tree-body'>
       <tr id="ff-table-tree-first-node" />
-      {flattenedTreeData?.map(({ node, level }) => {
-        return (
-          <TableRow
-            key={node.id}
-            node={node}
-            level={level}
-            columnsData={columnsData}
-            selected={selected}
-            select={select}
-            onRowClick={onRowClick}
-            onToggleExpand={onToggleExpand}
-            onCheckBoxChange={onCheckBoxChange}
-          />
-        );
-      })}
+      {flattenedTreeData?.map(
+        ({ node, level, parentSiblings = [], isLast = false }) => {
+          return (
+            <TableRow
+              key={node.id}
+              node={node}
+              level={level}
+              columnsData={columnsData}
+              selected={selected}
+              select={select}
+              onRowClick={onRowClick}
+              onToggleExpand={onToggleExpand}
+              onCheckBoxChange={onCheckBoxChange}
+              parentSiblings={parentSiblings}
+              isLast={isLast}
+            />
+          );
+        }
+      )}
       <tr id="ff-table-tree-last-node" />
     </tbody>
   )

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

@@ -5,10 +5,22 @@ import { TableCellProps } from '../types';
 import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
 import React from 'react';
 
-const renderSpaces = (level: number) =>
-  Array.from({ length: level }).map((_, i) => (
-    <span key={i} className="tree-table-space-block" />
-  ));
+const renderSpaces = (
+  level: number,
+  parentSiblings: boolean[],
+  isLast?: boolean | undefined
+) => (
+  <div className="tree-table-space-container">
+    {parentSiblings.reverse().map((line, i) => (
+      <span
+        key={i}
+        className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
+          isLast && i === level-1 ? 'last-node' : ''
+        }`}
+      />
+    ))}
+  </div>
+);
 
 const TableCell = React.memo(
   ({
@@ -19,36 +31,40 @@ const TableCell = React.memo(
     select,
     onCheckBoxChange,
     onToggleExpand,
+    parentSiblings,
+    isLast,
   }: TableCellProps) => (
     <td>
-      {col.isTree && renderSpaces(level + 1)}
-      {col.isTree && (
-        <span
-          className={`tree-table-space-block last-block  ${
-            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
-          } ${node.folder ? '' : 'no-folder'}`}
-          onClick={() => onToggleExpand(node)}
-        >
-          {node.folder && <Arrow />}
-        </span>
-      )}
-      <span className="tree-table-td-content">
-        {col.isTree && select === 'checkbox' && (
-          <Checkbox
-            checked={selected.includes(node.id)}
-            onChange={() => onCheckBoxChange('checkbox', node)}
-          />
+      {col.isTree && renderSpaces(level + 1, parentSiblings, isLast)}
+      <div className="tree-title-container">
+        {col.isTree && (
+          <span
+            className={`tree-table-space-block last-block  ${
+              node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
+            } ${node.folder ? '' : 'no-folder'}`}
+            onClick={() => onToggleExpand(node)}
+          >
+            {node.folder && <Arrow />}
+          </span>
         )}
-        {col.isTree && select === 'radio' && (
-          <RadioButton
-            name={node.title}
-            checked={selected.includes(node.id)}
-            value={node.id}
-            onChange={() => onCheckBoxChange('radio', node)}
-          />
-        )}
-        {prepareData(node, col)}
-      </span>
+        <span className="tree-table-td-content">
+          {col.isTree && select === 'checkbox' && (
+            <Checkbox
+              checked={selected.includes(node.id)}
+              onChange={() => onCheckBoxChange('checkbox', node)}
+            />
+          )}
+          {col.isTree && select === 'radio' && (
+            <RadioButton
+              name={node.title}
+              checked={selected.includes(node.id)}
+              value={node.id}
+              onChange={() => onCheckBoxChange('radio', node)}
+            />
+          )}
+          {prepareData(node, col)}
+        </span>
+      </div>
       {col.actions && (
         <div className="table-tree-row-action">{col.actions(node)}</div>
       )}

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

@@ -12,6 +12,8 @@ const TableRow = React.memo(
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
+    parentSiblings,
+    isLast,
   }: TableRowProps) => (
     <tr
       data-level={level}
@@ -28,6 +30,8 @@ const TableRow = React.memo(
           select={select}
           onCheckBoxChange={onCheckBoxChange}
           onToggleExpand={onToggleExpand}
+          parentSiblings={parentSiblings}
+          isLast={isLast}
         />
       ))}
     </tr>