pixel-react 1.7.8 → 1.8.0

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx

@@ -15,6 +15,7 @@ import {
   calculateSpreadsheetSize,
   getCSV,
   shouldHandleClipboardEvent,
+  isFocusedWithin,
 } from './util';
 
 import DefaultTable from './Table';
@@ -98,7 +99,7 @@ export type Props<CellType extends Types.CellBase> = {
   /** Callback called when the Spreadsheet's evaluated data changes. */
   onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
   setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
-    /** Set your dynamic sheet Height*/
+  /** Set your dynamic sheet Height*/
   sheetHeight: string;
 };
 
@@ -119,6 +120,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     HeaderRow = DefaultHeaderRow,
     DataEditor = DefaultDataEditor,
     DataViewer = DefaultDataViewer,
+    onSelect = () => {},
+    onActivate = () => {},
     onEvaluatedDataChange = () => {},
   } = props;
   type State = Types.StoreState<CellType>;
@@ -162,6 +165,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const copy = useAction(Actions.copy);
   const paste = useAction(Actions.paste);
   const onKeyDownAction = useAction(Actions.keyDown);
+  const onKeyPress = useAction(Actions.keyPress);
   const onDragStart = useAction(Actions.dragStart);
   const onDragEnd = useAction(Actions.dragEnd);
   const setData = useAction(Actions.setData);
@@ -183,6 +187,23 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const deleteRow = useAction(Actions.deleteRow);
   const deleteColumn = useAction(Actions.deleteColumn);
 
+  // Track active
+  const prevActiveRef = React.useRef<Point.Point | null>(state.active);
+  React.useEffect(() => {
+    if (state.active !== prevActiveRef.current) {
+      if (state.active) {
+        onActivate(state.active);
+      } else {
+        const root = rootRef.current;
+        if (root && isFocusedWithin(root) && document.activeElement) {
+          (document.activeElement as HTMLElement).blur();
+        }
+      }
+    }
+
+    prevActiveRef.current = state.active;
+  }, [onActivate, state.active]);
+
   const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
     state.model.evaluatedData
   );
@@ -194,6 +215,17 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     prevEvaluatedDataRef.current = state.model.evaluatedData;
   }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
 
+  const prevSelectedRef = React.useRef<Selection>(state.selected);
+  React.useEffect(() => {
+    if (!state.selected.equals(prevSelectedRef.current)) {
+      if (!props.selected || !state.selected.equals(props.selected)) {
+        onSelect(state.selected);
+      }
+    }
+
+    prevSelectedRef.current = state.selected;
+  }, [state.selected, onSelect, props.selected]);
+
   // Update selection when props.selected changes
   const prevSelectedPropRef = React.useRef<Selection | undefined>(
     props.selected
@@ -446,25 +478,32 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const rootNode = React.useMemo(
     () => (
       <div className="ff-excel">
-      <div className="ff-excel-toolbar-container">
-        <ExcelToolBar
-          onBold={onBold}
-          onItalic={onItalic}
-          setUnderlineType={setUnderlineType}
-          setColor={setColor}
-          setBorderType={setBorderType}
-          setFontSize={setFontSize}
-          setFontFamily={setFontFamily}
-          setTextAlign={setTextAlign}
-          setBackgroundColor={setBackgroundColor}
-          setFormatePainter={setFormatePainter}
-        />
-      </div>
+        <div className="ff-excel-header-hider ff-excel-header-column-hider"></div>
+        <div className="ff-excel-header-hider ff-excel-header-row-hider"></div>
+        <div className="ff-excel-toolbar-container">
+          <ExcelToolBar
+            onBold={onBold}
+            onItalic={onItalic}
+            setUnderlineType={setUnderlineType}
+            setColor={setColor}
+            setBorderType={setBorderType}
+            setFontSize={setFontSize}
+            setFontFamily={setFontFamily}
+            setTextAlign={setTextAlign}
+            setBackgroundColor={setBackgroundColor}
+            setFormatePainter={setFormatePainter}
+          />
+        </div>
         <div
           ref={rootRef}
-          style={{height:sheetHeight}}
-          className={classNames('ff-spreadsheet', className)}
-          onKeyDown={handleKeyDown}
+          style={{ height: sheetHeight }}
+          className={classNames('ff-excel-spreadsheet', className)}
+          onKeyPress={(e) => {
+            onKeyPress(e);
+          }}
+          onKeyDown={(e) => {
+            handleKeyDown(e);
+          }}
           onMouseMove={handleMouseMove}
         >
           {tableNode}
@@ -474,7 +513,14 @@ const Spreadsheet = <CellType extends Types.CellBase>(
         </div>
       </div>
     ),
-    [className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]
+    [
+      className,
+      onKeyPress,
+      handleKeyDown,
+      handleMouseMove,
+      tableNode,
+      activeCellNode,
+    ]
   );
 
   return (

package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts

@@ -298,6 +298,19 @@ export type SetDataAction = BaseAction<typeof SET_DATA> & {
   };
 };
 
+export type KeyPressAction = BaseAction<typeof KEY_PRESS> & {
+  payload: {
+    event: React.KeyboardEvent;
+  };
+};
+
+export function keyPress(event: React.KeyboardEvent): KeyPressAction {
+  return {
+    type: KEY_PRESS,
+    payload: { event },
+  };
+}
+
 export function setData(data: Matrix<CellBase>): SetDataAction {
   return {
     type: SET_DATA,
@@ -544,6 +557,7 @@ export type Action =
   | UnderlineTypeStyle
   | FontSize
   | FontFamily
+  | KeyPressAction
   | TextAlignType
   | BorderType
   | ItalicStyle

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts

@@ -582,6 +582,22 @@ export default function reducer(
       return blur(state);
     }
 
+    case Actions.KEY_PRESS: {
+      const { event } = action.payload;
+
+      if (isActiveReadOnly(state) || event.metaKey) {
+        return state;
+      }
+      if (state.mode === 'view' && state.active) {
+        const selectedRange = state.selected.toRange(state.model.data);
+        if (selectedRange?.size() === 1) {
+          return edit(clear(state));
+        }
+        return edit(state);
+      }
+      return state;
+    }
+
     case Actions.KEY_DOWN: {
       const { event } = action.payload;
       const handler = getKeyDownHandler(state, event);

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

@@ -123,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 = [
@@ -415,8 +414,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           </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
@@ -425,7 +426,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             name="formula_icon"
           />
         </Tooltip>
-      </div>
+      </div>  TODO */}
     </div>
   );
 };

package/src/components/Icon/iconList.ts

@@ -252,6 +252,7 @@ import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?reac
 import suitesIcon from '../../assets/icons/suites_icon.svg?react'; 
 import executionsIcon from '../../assets/icons/executions_icon.svg?react';
 import ImportIcon from '../../assets/icons/import_icon.svg?react';
+import Settings from '../../assets/icons/settings.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -499,5 +500,6 @@ Components['machine_disable_icon'] = machineDisableIcon;
 Components['executions_icon'] = executionsIcon;
 Components['suites_icon'] = suitesIcon;
 Components['import_icon'] = ImportIcon;
+Components['settings'] = Settings
 
 export default Components;

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/LabelEditTextField/LabelEditTextField.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import LabelEditTextField from './LabelEditTextField';
 import '../../assets/styles/_colors.scss';
@@ -155,16 +155,20 @@ export const textFieldWithHighlight: Story = {
 };
 export const openLabelEditTextField: Story = {
   render: () => {
+    const [demoText, setDemoText] = useState('Verify The');
     const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
       //DEMO: we are getting that value from LabelEditTextField
-
+      setDemoText(inputValue);
       console.info(
         'Confirmed input value and dropdown value:',
         inputValue,
         dropdownValue
       );
     };
-    let demoText = 'Verify The';
+    const handleInputChange = (newInputValue: string) => {
+      setDemoText(newInputValue); // Update parent state
+    };
+    console.log('demoText: ', demoText);
     return (
       <LabelEditTextField
         label="Add Module"
@@ -181,6 +185,7 @@ export const openLabelEditTextField: Story = {
         width="400px"
         height="22px"
         confirmAction={handleConfirmAction}
+        onInputChange={handleInputChange}
         isOpen={true}
         customError="text is too long"
         customErrorCondition={demoText?.length > 10}

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -21,7 +21,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 +35,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   customErrorCondition,
   cancelIcon,
   variant = 'textField',
+  onInputChange,
   dropdownData = [],
   // width,
   height,
@@ -87,14 +88,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);
@@ -112,9 +115,23 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   };
 
   const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-    setIsTextFieldModified(true);
-    setShowError('');
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    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) => {

package/src/components/LabelEditTextField/types.ts

@@ -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/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;