pixel-react 1.6.9 → 1.7.1

package/src/components/FileDropzone/FileDropzone.tsx

@@ -3,7 +3,7 @@ import { FileDropzoneProps } from './types';
 import './FileDropzone.scss';
 import Icon from '../Icon';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import Dropzone from './Dropzone';
 import FilePreview from './FilePreview';
 import classNames from 'classnames';
@@ -39,6 +39,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   isApiResponseError = false,
   isDisable = false,
 }) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
   const {
     getRootProps,
     getInputProps,
@@ -77,6 +78,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
     [acceptedFiles, handleRemoveClick, handleReplaceClick]
   );
 
+  useEffect(() => {
+    if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [selectedRadioOption]);
+
   useEffect(() => {
     if (!checkEmpty(acceptedFiles) && setSelectedFile) {
       setSelectedFile(acceptedFiles[0] || null);
@@ -98,9 +105,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   );
 
   return (
-    <div className={classNames('ff-file-dropzone-wrapper',
-      {'ff-disable-file-dropzone-wrapper': isDisable,}
-    )} style={{ width: `${width}px` }}>
+    <div
+      className={classNames('ff-file-dropzone-wrapper', {
+        'ff-disable-file-dropzone-wrapper': isDisable,
+      })}
+      style={{ width: `${width}px` }}
+    >
       <Dropzone
         icon={icon}
         primaryLabel={primaryLabel}
@@ -123,6 +133,16 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
         isDisable={isDisable}
       />
 
+      {isWebServiceFileDropZone && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="ff-input-ref"
+          onChange={handleFileChange}
+          accept={accept.join(',')}
+        />
+      )}
+
       {isWebServiceFileDropZone ? null : (
         <div
           className={'ff-file-details-wrapper'}

package/src/components/Form/Forms.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
 import Form from './Form';
-
 interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
   id?: string;
   onSubmit: Form.SubmitHandler<T>;
@@ -16,7 +15,6 @@ const Forms = <T extends Form.FieldValues>(
   ref: React.Ref<any>
 ) => {
   const methods = Form.useForm<T>(rest);
-
   const { handleSubmit } = methods;
   const extendedMethods = {
     ...methods,

package/src/components/Icon/iconList.ts

@@ -117,6 +117,8 @@ import HideAccessIcon from '../../assets/icons/hide_access_icon.svg?react';
 import AddLocator from '../../assets/icons/add_locator.svg?react';
 import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
 
+import IosIcon from '../../assets/icons/ios_icon.svg?react';
+import HelpIcon from '../../assets/icons/help_icon.svg?react';
 import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
 import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
 import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react';
@@ -142,6 +144,7 @@ import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
 import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
 import UpdateIcon from '../../assets/icons/update_icon.svg?react';
 import AddFile from '../../assets/icons/add_file.svg?react';
+import PlusRoundIcon from '../../assets/icons/plus_round_icon.svg?react';
 import EyeClosed from '../../assets/icons/eye_closed.svg?react';
 import AttachmentIcon from '../../assets/icons/attachment_icon.svg?react';
 import AuthorizationIcon from '../../assets/icons/authorization_icon.svg?react';
@@ -192,6 +195,8 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
 import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
 import UserWarning from '../../assets/icons/user_warning.svg?react';
 import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
+import AiSearch from '../../assets/icons/ai_search.svg?react';
+
 import Import from '../../assets/icons/import.svg?react';
 import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
 import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
@@ -352,6 +357,8 @@ Components['android_icon'] = AndroidIcon;
 Components['plus_user_icon'] = PlusUserIcon;
 Components['label_plus'] = LabelPlusIcon;
 Components['manual_locator'] = ManualLocator;
+Components['ios_icon'] = IosIcon;
+Components['help_icon'] = HelpIcon;
 Components['select_license'] = SwitchLicenseIcon;
 Components['fireflink-logo'] = FireflinkLogo;
 Components['wswb_delete_icon'] = WSWBDeleteIcon;
@@ -383,6 +390,7 @@ Components['notification_icon'] = NotificationIcon;
 Components['nlp_help_icon'] = NLPHelpIcon;
 Components['update_icon'] = UpdateIcon;
 Components['add_file'] = AddFile;
+Components['plus_round_icon'] = PlusRoundIcon;
 Components['clone_icon'] = CloneIcon;
 Components['move_icon'] = MoveIcon;
 Components['jira'] = Jira;
@@ -395,6 +403,7 @@ Components['hide_access_icon'] = HideAccessIcon;
 Components['eye_closed'] = EyeClosed;
 Components['attachment_icon'] = AttachmentIcon;
 Components['authorization_icon'] = AuthorizationIcon;
+Components['ai_search'] = AiSearch;
 
 Components['fireflink_platform_logo'] = FireflinkPlatform;
 Components['fireflink_finder_logo'] = FireflinkFinder;

package/src/components/LabelEditTextField/LabelEditTextField.scss

@@ -7,7 +7,7 @@
   width: 100%;
   .ff-label-text-field {
     display: flex;
-    gap: 10px;
+    gap: 5px;
   }
   .ff-label-text-field-with-dropdown,
   .ff-label-text-field-without-dropdown {

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -5,6 +5,8 @@ import Typography from '../Typography';
 import HighlightText from '../HighlightText';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
+import Input from '../Input/Input';
+import Select from '../Select/Select';
 
 const getErrorMessage = (
   inputValue: string,
@@ -25,6 +27,7 @@ const getErrorMessage = (
 };
 const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   label,
+  placeholder,
   text,
   highlightText,
   customError,
@@ -33,7 +36,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   cancelIcon,
   variant = 'textField',
   dropdownData = [],
-  width,
+  // width,
   height,
   isOpen = false,
   confirmAction,
@@ -47,7 +50,8 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   );
   const [showError, setShowError] = useState('');
   const [isTextFieldModified, setIsTextFieldModified] = useState(false);
-  const [isDropdownModified, setIsDropdownModified] = 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 [clickTimeout, setClickTimeout] = useState<number | null>(null);
@@ -105,7 +109,6 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
     setIsEditing(false);
     setShowError('');
     setIsTextFieldModified(false);
-    setIsDropdownModified(false);
   };
 
   const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -114,12 +117,6 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
     setShowError('');
   };
 
-  const handleDropdownChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setDropdownValue(e.target.value);
-    setIsDropdownModified(true);
-    setShowError('');
-  };
-
   const handleBlur = (e: MouseEvent) => {
     if (
       containerRef.current &&
@@ -155,44 +152,40 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
               }`}
               style={{ height }}
             >
-              <input
+              <Input
+                name="input"
                 type="text"
+                label={label ? label : ''}
+                disabled={false}
+                error={isThrowingError}
+                placeholder={placeholder ? placeholder : ''}
                 value={inputValue}
                 onChange={handleTextFieldChange}
-                className={`ff-text-dropdown-field ${
-                  isTextFieldModified ? 'modified' : ''
-                }`}
-                placeholder=" "
-                style={{
-                  width,
-                }}
+                className={`
+                
+               ${isTextFieldModified ? 'modified' : ''}`}
+              />
+              <Select
+                label={''}
+                optionsList={dropdownData}
+                selectedOption={{ value: dropdownValue, label: dropdownValue }}
+                onChange={(option) => setDropdownValue(option.value)}
               />
-              {label && <label className="ff-label">{label}</label>}
-              <select
-                value={dropdownValue}
-                onChange={handleDropdownChange}
-                className={`dropdown ${isDropdownModified ? 'modified' : ''}`}
-              >
-                {dropdownData.map((item) => (
-                  <option key={item.id} value={item.value}>
-                    {item.label}
-                  </option>
-                ))}
-              </select>
             </div>
           ) : (
             <div className="ff-label-text-field-without-dropdown">
-              <input
+              <Input
+                name="input"
                 type="text"
+                label={label ? label : ''}
+                disabled={false}
+                placeholder={placeholder ? placeholder : ''}
                 value={inputValue}
                 onChange={handleTextFieldChange}
-                className={`ff-text-field ${
-                  isTextFieldModified ? 'modified' : ''
-                }`}
-                placeholder=" "
-                style={{ width, height }}
+                className={`
+               
+               ${isTextFieldModified ? 'modified' : ''}`}
               />
-              <label className="ff-textfield-label">{label}</label>
             </div>
           )}
           <div className="ff-icon-container">

package/src/components/LabelEditTextField/types.ts

@@ -38,6 +38,7 @@ export interface LabelEditTextFieldTypes {
   isOpen?: boolean;
   /**for conditionally handle custom error */
   customErrorCondition?: boolean;
+  placeholder?: string;
   onClick?: () => void;
   tooltip?: {
     tooltipTitle?: string;

package/src/components/MachineInputField/MachineInputField.scss

@@ -26,11 +26,7 @@
 
       .ff-machine-text-reverse,
       .ff-machine-text {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        min-width: 30px;
-        max-width: 70px;
+        max-width: fit-content;
       }
 
       .ff-machine-text-reverse {

package/src/components/MachineInputField/MachineInputField.stories.tsx

@@ -15,15 +15,16 @@ type Story = StoryObj<typeof MachineInputField>;
 
 // Sample data for the MachineInputField
 const sampleOptions: MachineType[] = [
-  { label: 'Local', type: 'Local' },
-  { label: '121.25.36', type: 'Google Chrome' },
-  { label: '17, iPhone 15', type: 'mac' },
-  { label: 'Samsung Galaxy S23', type: 'android' },
+  { label: 'Local Environment', type: 'local' },
+  { label: '10.100.233.23', type: 'windows' },
+  { label: '121.25.333.344.2', type: 'Browserstack' },
+  { label: 'iphone 17 pro max', type: 'mac' },
+  { label: 'samsung galaxy s23', type: 'android' },
 ];
 
 export const Primary: Story = {
   args: {
-    width: '410px', // Example width
+    width: '530px', // Example width
     options: sampleOptions,
     runCount: 1,
   },

package/src/components/MachineInputField/MachineInputField.tsx

@@ -4,19 +4,18 @@ import Typography from '../Typography';
 import Icon from '../Icon';
 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 = () => {},
-    },
-    ref
-  ) => {
+  ({
+    width = '',
+    options = [],
+    runCount = 0,
+    className = '',
+    contentReverse = false,
+    onClick = () => {},
+    modalId = '',
+  }) => {
     const getIcon: Record<MachineType['type'], string> = {
       Local: 'local',
       Browserstack: 'browserstack_icon',
@@ -31,14 +30,15 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
       'Internet Explorer': 'internet_explorer',
       Safari: 'safari_icon',
       Opera: 'opera',
+      windows: 'windows',
     };
 
     return (
       <div
-        ref={ref}
+        ref={modalId}
         style={{ width: width }}
         className={classNames('ff-machine-input-field-wrapper', className)}
-        onClick={onClick}
+        onClick={() => onClick()}
       >
         <Typography
           as="span"
@@ -72,7 +72,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
                 })}
                 color="var(--ff-machine-input-field-text-color)"
               >
-                {label}
+                {truncateText(label, 15)}
               </Typography>
             </div>
           ))}

package/src/components/MachineInputField/types.ts

@@ -1,3 +1,4 @@
+
 export interface MachineType {
   type: string;
   label: string;
@@ -10,4 +11,5 @@ export interface MachineInputFieldProps {
   className?: string;
   contentReverse?: boolean;
   onClick?: () => void;
+  modalId?: string;
 }

package/src/components/MenuOption/MenuOption.scss

@@ -45,7 +45,7 @@
 }
 
 .ff-option-card {
-  position: fixed;
+  position: absolute;
   margin: 4px;
   border: 1px solid var(--option-card-border-color);
   background: var(--option-card-bg-color);
@@ -54,7 +54,7 @@
   min-width: 110px;
   width: max-content;
   border-radius: 4px;
-  &--primary{
+  &--primary {
     background: var(--brand-color);
     color: var(--primary-button-text-color);
     svg {
@@ -62,14 +62,14 @@
         fill: var(--primary-icon-color);
       }
     }
-    :hover{
+    :hover {
       color: var(--brand-color);
-    svg {
-      path {
-        fill: var(--brand-color);
+      svg {
+        path {
+          fill: var(--brand-color);
+        }
       }
     }
-    }
   }
   .ff-options {
     @extend .fontSm;

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import MenuOption from './MenuOption';
 import './MenuOption.scss';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useRef } from 'react';
 import Icon from '../Icon';
 
 const meta: Meta<typeof MenuOption> = {
@@ -29,16 +29,16 @@ const meta: Meta<typeof MenuOption> = {
     },
     tooltipPlacement: {
       control: {
-        type: 'text',
-        options: ['top', 'down', 'left', 'right'],  
+        type: 'select',
+        options: ['top', 'down', 'left', 'right'],
       },
       description: 'Placement of the tooltip relative to the button.',
       defaultValue: 'top',
     },
     dropdownPlacement: {
       control: {
-        type: 'text',
-        options: ['top', 'down', 'left', 'right'],  
+        type: 'select',
+        options: ['top', 'down', 'left', 'right'],
       },
       description: 'Placement of the dropdown menu relative to the button.',
       defaultValue: 'down',
@@ -49,7 +49,15 @@ const meta: Meta<typeof MenuOption> = {
 type Story = StoryObj<typeof MenuOption>;
 
 const options = [
-  { label: <div style={{display:'flex', justifyContent:"center", alignItems:"center",gap:"8px"}}>hello <Icon name='edit'/></div>, value: 'opt1', icon: 'success' },
+  {
+    label: (
+      <div>
+        hello <Icon name="edit" />
+      </div>
+    ),
+    value: 'opt1',
+    icon: 'success',
+  },
   { label: 'Option 2', value: 'opt2', icon: 'success' },
   {
     label: 'Delete',
@@ -59,21 +67,31 @@ const options = [
   },
 ];
 
-const handleOptionClick = (option: { label: string|ReactNode }) => {
+const handleOptionClick = (option: { label: string | ReactNode }) => {
   alert(`Option clicked: ${option.label}`);
 };
 
-
 export const ControlledMenuOption: Story = {
   args: {
     iconName: 'more',
     labelName: 'Controlled Menu',
     tooltipTitle: 'Select an option',
-    dropdownPlacement: "top",  
+    dropdownPlacement: 'top',
+  },
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef} // Make sure targetRef is passed properly here
+          onOptionClick={handleOptionClick}
+          dropdownPlacement="left" // Dropdown placement for testing
+        />
+      </div>
+    );
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
   parameters: {
     docs: {
       description: {
@@ -84,15 +102,24 @@ export const ControlledMenuOption: Story = {
   },
 };
 
-
 export const MenuOptionTop: Story = {
   args: {
     ...ControlledMenuOption.args,
     dropdownPlacement: 'top',
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
   parameters: {
     docs: {
       description: {
@@ -102,15 +129,24 @@ export const MenuOptionTop: Story = {
   },
 };
 
-
 export const MenuOptionBottom: Story = {
   args: {
     ...ControlledMenuOption.args,
     dropdownPlacement: 'down',
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
   parameters: {
     docs: {
       description: {
@@ -120,15 +156,24 @@ export const MenuOptionBottom: Story = {
   },
 };
 
-
 export const MenuOptionLeft: Story = {
   args: {
     ...ControlledMenuOption.args,
     dropdownPlacement: 'left',
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef}
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
+  },
   parameters: {
     docs: {
       description: {
@@ -141,11 +186,21 @@ export const MenuOptionLeft: Story = {
 export const MenuOptionRight: Story = {
   args: {
     ...ControlledMenuOption.args,
-    dropdownPlacement: 'right',
+    dropdownPlacement: 'right', // Proper dropdown placement
+  },
+  render: (args) => {
+    const moreRef = useRef<HTMLDivElement>(null);
+    return (
+      <div ref={moreRef}>
+        <MenuOption
+          {...args}
+          options={options}
+          targetRef={moreRef} // Properly pass ref to targetRef
+          onOptionClick={handleOptionClick}
+        />
+      </div>
+    );
   },
-  render: (args) => (
-    <MenuOption {...args} options={options} onOptionClick={handleOptionClick} />
-  ),
   parameters: {
     docs: {
       description: {

package/src/components/MenuOption/MenuOption.tsx

@@ -31,7 +31,7 @@ const Option = ({ option, onClick }: OptionProps) => (
     )}
     <Typography
       as="label"
-      lineHeight='18px'
+      lineHeight="18px"
       color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
     >
       {option.label}
@@ -74,13 +74,13 @@ const OptionCard = ({
         };
       case 'down':
         return {
-          top: menuPosition.top + 18,
+          top: menuPosition.top + 20,
           left: menuPosition.left - 4,
         };
       case 'left':
         return {
           top: menuPosition.top - 4,
-          left: menuPosition.left - optionsWidth - 7,
+          left: menuPosition.left - optionsWidth - 8,
         };
       case 'right':
         return {
@@ -127,7 +127,8 @@ const MenuOption = ({
   variant = 'light',
   zIndex = 99,
   dropdownPlacement = 'down',
-  optionCardVariant
+  optionCardVariant,
+  targetRef,
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -136,8 +137,6 @@ const MenuOption = ({
     left: 0,
     height: 0,
     right: 0,
-    rightSpaceAvailable: 0,
-    bottomSpaceAvailable: 0,
   });
 
   const closeDropDown = () => setIsClicked(false);
@@ -154,20 +153,17 @@ const MenuOption = ({
   };
 
   const calculateDims = () => {
-    if (menuRef?.current) {
-      const rect = menuRef.current.getBoundingClientRect();
+    if (targetRef?.current) {
+      const rect = targetRef.current.getBoundingClientRect();
 
       setMenuPosition({
-        top: rect.top,
-        left: rect.left,
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
         height: rect.height,
         right: rect.right,
-        rightSpaceAvailable: document.body.clientWidth - rect.right,
-        bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop,
       });
     }
   };
-
   return (
     <div className="ff-menu-option-container" ref={menuRef}>
       <Tooltip title={tooltipTitle} placement={tooltipPlacement}>