pixel-react-excel-sheet 1.0.19 → 1.0.21

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

@@ -103,33 +103,8 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   );
 
   return (
-    // <th
-    //   style={{ minWidth: `${columnWidth}px`, position: 'relative' }} //Dynamic value, Inline Styling required
-    //   className={classNames('ff-spreadsheet-header', {
-    //     'ff-spreadsheet-header--selected': selected,
-    //   })}
-    //   onClick={handleClick}
-    //   onContextMenu={contextClick}
-    //   tabIndex={0}
-    // >
-    //   {label !== undefined ? label : columnIndexToLabel(column)}
-    //   <div
-    //     onMouseDown={onMouseDown}
-    //     onClick={() => activate({ row: -1, column })}
-    //     style={{
-    //       zIndex: 'inherit',
-    //       width: '2px',
-    //       position: 'absolute',
-    //       right: 0,
-    //       top: 0,
-    //       height: '100%',
-    //       cursor: 'ew-resize',
-    //     }}
-    //   />
-    // </th>
-
     <th
-      style={{ minWidth: `${columnWidth}px`}} //Dynamic value, Inline Styling required
+      style={{ minWidth: `${columnWidth}px`, position: 'relative' }}
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
@@ -137,7 +112,15 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       onContextMenu={contextClick}
       tabIndex={0}
     >
+      <div      
+      style={{ position: 'fixed' }}
+      onClick={handleClick}
+      onContextMenu={contextClick}
+      tabIndex={0}>
+
+      </div>
       {label !== undefined ? label : columnIndexToLabel(column)}
+
       <div
         onMouseDown={onMouseDown}
         onClick={() => activate({ row: -1, column })}

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

@@ -100,7 +100,7 @@
   }
 
   .ff-spreadsheet-corner-header{
-    
+    padding-left: 20px; 
     z-index: 1100;
   }
 
@@ -109,12 +109,14 @@
     color: var(--tooltip-text-color);
   }
 
-  .ff-spreadsheet-header,
   .ff-spreadsheet-data-viewer,
   .ff-spreadsheet-data-editor input {
     padding: 4px;
     box-sizing: border-box;
   }
+  .ff-spreadsheet-header{
+    box-sizing: border-box;
+  }
 
   .ff-spreadsheet-data-viewer--preserve-breaks {
     white-space: pre-wrap;

package/src/components/Excel/ExcelFile.stories.tsx

@@ -160,7 +160,7 @@ export const Default: Story = {
         action: () => {},
       },
     ],
-    sheetHeight:"",
+    sheetHeight:"300px",
     onSave: () => {},
   },
 };

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';
@@ -246,6 +251,7 @@ import machineEnableIcon from '../../assets/icons/machine_enable_icon.svg?react'
 import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?react';
 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';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -351,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;
@@ -382,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;
@@ -394,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;
@@ -488,4 +498,6 @@ Components['machine_enable_icon'] = machineEnableIcon;
 Components['machine_disable_icon'] = machineDisableIcon;
 Components['executions_icon'] = executionsIcon;
 Components['suites_icon'] = suitesIcon;
+Components['import_icon'] = ImportIcon;
+
 export default Components;

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import './InputWithDropdown.scss';
 import { InputWithDropdownProps } from './types';
@@ -5,44 +6,101 @@ import Select from '../Select/Select';
 import Typography from '../Typography';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
-const InputWithDropdown = ({
-  name = '',
-  label,
-  value,
-  disabled = false,
-  required = false,
-  placeholder,
-  error,
-  helperText,
-  optionsList,
-  selectedOption,
-  autoComplete = 'off',
-  onDropdownChangeHandler = () => {},
-  onInputChangeHandler,
-  onInputBlurHandler,
-  optionsRequired = true,
-  dropdownPosition = 'right',
-  type = 'text',
-}: InputWithDropdownProps) => {
-  const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
+const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
+  (
+    {
+      name = '',
+      label,
+      value,
+      disabled = false,
+      required = false,
+      placeholder,
+      error,
+      helperText,
+      optionsList,
+      selectedOption,
+      autoComplete = 'off',
+      onDropdownChangeHandler = () => {},
+      onInputChangeHandler,
+      onInputBlurHandler,
+      optionsRequired = true,
+      dropdownPosition = 'right',
+      type = 'text',
+    },
+    ref
+  ) => {
+    const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
 
-  return (
-    <div
-      className={classNames('ff-input-with-dropdown-container', {
-        'ff-input-with-dropdown-container--filled': isValueFilled,
-      })}
-    >
-      <fieldset
-        className={classNames('ff-input-with-dropdown', {
-          'ff-input-with-dropdown--filled': isValueFilled,
-          'ff-input-with-dropdown--no-hover': isValueFilled,
-          'ff-input-with-dropdown--disabled': !!disabled,
-          'ff-input-with-dropdown--error': !!error,
-          [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
+    return (
+      <div
+        className={classNames('ff-input-with-dropdown-container', {
+          'ff-input-with-dropdown-container--filled': isValueFilled,
         })}
       >
-        {dropdownPosition === 'left' && (
-          <>
+        <fieldset
+          className={classNames('ff-input-with-dropdown', {
+            'ff-input-with-dropdown--filled': isValueFilled,
+            'ff-input-with-dropdown--no-hover': isValueFilled,
+            'ff-input-with-dropdown--disabled': !!disabled,
+            'ff-input-with-dropdown--error': !!error,
+            [`ff-input-with-dropdown--${dropdownPosition}`]: dropdownPosition,
+          })}
+        >
+          {dropdownPosition === 'left' && (
+            <>
+              <Select
+                optionsList={optionsList}
+                selectedOption={selectedOption}
+                showLabel={false}
+                showBorder={false}
+                onChange={onDropdownChangeHandler}
+                disabled={disabled || !optionsRequired}
+                optionsRequired={optionsRequired}
+                className={classNames('ff-floating-dropdown', {
+                  'ff-floating-dropdown--disabled': !!disabled,
+                  'ff-floating-dropdown--error': !!error,
+                  'ff-floating-dropdown--left': dropdownPosition === 'left',
+                })}
+                width={94}
+                height={30}
+              />
+              <div className="seperatorline" />
+            </>
+          )}
+          <div className={classNames('ff-floating-label-input-container')}>
+            <Typography
+              as="label"
+              htmlFor={name}
+              className={classNames('ff-floating-label', {
+                'ff-floating-label--filled': isValueFilled,
+                'ff-floating-label--no-hover': isValueFilled,
+                'ff-floating-label--error': !!error,
+              })}
+              required={required}
+            >
+              {label}
+            </Typography>
+            <input
+              ref={ref}
+              name={name}
+              type={type}
+              id={name}
+              value={value}
+              onChange={onInputChangeHandler}
+              onBlur={onInputBlurHandler}
+              placeholder={placeholder}
+              autoComplete={autoComplete}
+              required={required}
+              disabled={disabled}
+              className={classNames('ff-floating-input', {
+                'ff-floating-input--filled': isValueFilled,
+                'ff-floating-input--disabled': !!disabled,
+                'ff-floating-input--error': !!error,
+                'ff-floating-input--left-dropdown': dropdownPosition === 'left',
+              })}
+            />
+          </div>
+          {dropdownPosition === 'right' && (
             <Select
               optionsList={optionsList}
               selectedOption={selectedOption}
@@ -54,69 +112,18 @@ const InputWithDropdown = ({
               className={classNames('ff-floating-dropdown', {
                 'ff-floating-dropdown--disabled': !!disabled,
                 'ff-floating-dropdown--error': !!error,
-                'ff-floating-dropdown--left': dropdownPosition === 'left',
               })}
-              width={94}
+              width={120}
               height={30}
             />
-            <div className="seperatorline" />
-          </>
-        )}
-        <div className={classNames('ff-floating-label-input-container')}>
-          <Typography
-            as="label"
-            htmlFor={name}
-            className={classNames('ff-floating-label', {
-              'ff-floating-label--filled': isValueFilled,
-              'ff-floating-label--no-hover': isValueFilled,
-              'ff-floating-label--error': !!error,
-            })}
-            required={required}
-          >
-            {label}
-          </Typography>
-          <input
-            name={name}
-            type={type}
-            id={name}
-            value={value}
-            onChange={onInputChangeHandler}
-            onBlur={onInputBlurHandler}
-            placeholder={placeholder}
-            autoComplete={autoComplete}
-            required={required}
-            disabled={disabled}
-            className={classNames('ff-floating-input', {
-              'ff-floating-input--filled': isValueFilled,
-              'ff-floating-input--disabled': !!disabled,
-              'ff-floating-input--error': !!error,
-              'ff-floating-input--left-dropdown': dropdownPosition === 'left',
-            })}
-          />
-        </div>
-        {dropdownPosition === 'right' && (
-          <Select
-            optionsList={optionsList}
-            selectedOption={selectedOption}
-            showLabel={false}
-            showBorder={false}
-            onChange={onDropdownChangeHandler}
-            disabled={disabled || !optionsRequired}
-            optionsRequired={optionsRequired}
-            className={classNames('ff-floating-dropdown', {
-              'ff-floating-dropdown--disabled': !!disabled,
-              'ff-floating-dropdown--error': !!error,
-            })}
-            width={120}
-            height={30}
-          />
+          )}
+        </fieldset>
+        {error && helperText && (
+          <span className="ff-helper-text">{helperText}</span>
         )}
-      </fieldset>
-      {error && helperText && (
-        <span className="ff-helper-text">{helperText}</span>
-      )}
-    </div>
-  );
-};
+      </div>
+    );
+  }
+);
 
 export default InputWithDropdown;

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,15 @@ 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: 'Local Environment', type: 'Local' },
+  { label: '121.25.333.344.2', type: 'Google Chrome' },
+  { label: '17, iPhone 15 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,6 +4,7 @@ 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>(
   (
@@ -14,6 +15,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
       className = '',
       contentReverse = false,
       onClick = () => {},
+      modalId = '',
     },
     ref
   ) => {
@@ -36,6 +38,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
     return (
       <div
         ref={ref}
+        id={modalId}
         style={{ width: width }}
         className={classNames('ff-machine-input-field-wrapper', className)}
         onClick={onClick}
@@ -72,7 +75,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

@@ -10,4 +10,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;