pixel-react 1.4.4 → 1.4.6

package/lib/utils/getSequentialPayload/getSequentialPayload.d.ts

@@ -1,2 +1,2 @@
-import { SequentialMachineInstance, MachineExecutionInstanceDataSet } from './types';
-export declare const getSequentialPayload: (machineInstances?: MachineExecutionInstanceDataSet[]) => SequentialMachineInstance[];
+import { MachineExecutionInstance, SequentialMachineInstance } from './types';
+export declare const getSequentialPayload: (data: MachineExecutionInstance[]) => SequentialMachineInstance[];

package/lib/utils/getSequentialPayload/types.d.ts

@@ -18,12 +18,10 @@ export interface MachineExecutionInstance {
     systemUrl: string;
     machineInfo: OperatingSystemInfo;
     deviceInfo: any[];
-    headless: boolean;
-}
-export interface MachineExecutionInstanceDataSet extends MachineExecutionInstance {
     runLevelExecutionDataSets: RunLevelExecutionDataSet[];
+    headless: boolean;
 }
-export interface SequentialMachineInstance extends MachineExecutionInstance {
+export interface SequentialMachineInstance extends Omit<MachineExecutionInstance, 'runLevelExecutionDataSets'> {
     peVariableSetId: string;
     globalVariableSetId: string;
     testDataSetId: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -26,6 +26,7 @@
     "@storybook/react": "^8.4.5",
     "@storybook/react-vite": "^8.4.5",
     "@storybook/test": "^8.4.5",
+    "@types/js-beautify": "^1.14.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-google-recaptcha": "^2.1.9",
@@ -66,7 +67,6 @@
     "date-fns-tz": "^3.2.0",
     "js-beautify": "^1.15.1",
     "jsencrypt": "^3.3.2",
-    "prettier": "^3.3.3",
     "react-archer": "^4.4.0",
     "react-day-picker": "^9.2.1",
     "react-google-recaptcha": "^3.1.0",

package/src/assets/icons/add_file.svg

@@ -1,14 +1,5 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_911_11481)">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-            d="M19.1307 13.4822C19.6597 13.4822 20.0885 13.0534 20.0885 12.5243C20.0885 11.9953 19.6597 11.5665 19.1307 11.5665L12.9579 11.5665L12.9579 5.39368C12.9579 4.86467 12.529 4.43582 12 4.43582C11.471 4.43582 11.0421 4.86467 11.0421 5.39368L11.0421 11.5665L4.86934 11.5665C4.34033 11.5665 3.91148 11.9953 3.91148 12.5243C3.91148 13.0534 4.34032 13.4822 4.86934 13.4822L11.0421 13.4822V19.655C11.0421 20.184 11.471 20.6129 12 20.6129C12.529 20.6129 12.9579 20.184 12.9579 19.655V13.4822L19.1307 13.4822Z"
-            fill="currentColor" />
-    </g>
-    <defs>
-        <clipPath id="clip0_911_11481">
-            <path
-                d="M0 4.52441C0 2.31528 1.79086 0.524414 4 0.524414H20C22.2091 0.524414 24 2.31528 24 4.52441V20.5244C24 22.7336 22.2091 24.5244 20 24.5244H4C1.79086 24.5244 0 22.7336 0 20.5244V4.52441Z"
-                fill="currentColor" />
-        </clipPath>
-    </defs>
+<svg width="16" height="16" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M16.1307 9.4822C16.6597 9.4822 17.0885 9.05336 17.0885 8.52434C17.0885 7.99533 16.6597 7.56648 16.1307 7.56648L9.95786 7.56648L9.95786 1.39368C9.95786 0.864669 9.52901 0.435821 9 0.435821C8.47099 0.435821 8.04214 0.864669 8.04214 1.39368L8.04214 7.56648L1.86934 7.56648C1.34033 7.56648 0.911477 7.99533 0.911477 8.52434C0.911477 9.05336 1.34032 9.4822 1.86934 9.4822L8.04214 9.4822V15.655C8.04214 16.184 8.47099 16.6129 9 16.6129C9.52901 16.6129 9.95786 16.184 9.95786 15.655V9.4822L16.1307 9.4822Z"
+        fill="currentColor" />
 </svg>

package/src/assets/icons/eye_open_icon.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2947_11191)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8985 12.297C17.5046 14.8002 14.861 16.3552 12.0009 16.3552C9.13896 16.3552 6.49546 14.8002 5.10149 12.297C4.99413 12.1026 4.99413 11.8972 5.10149 11.703C6.49546 9.19978 9.13896 7.64494 12.0009 7.64494C14.861 7.64494 17.5045 9.19978 18.8985 11.703C19.0078 11.8972 19.0078 12.1026 18.8985 12.297ZM19.789 11.2067C18.2154 8.38043 15.2313 6.62494 12.0009 6.62494C8.76871 6.62494 5.78457 8.38043 4.21104 11.2067C3.92965 11.7109 3.92965 12.2891 4.21104 12.7929C5.78457 15.6192 8.76871 17.375 12.0009 17.375C15.2313 17.375 18.2154 15.6192 19.789 12.7929C20.0703 12.2891 20.0703 11.7109 19.789 11.2067ZM12.0009 14.0923C13.1542 14.0923 14.0928 13.1538 14.0928 11.9999C14.0928 10.8461 13.1542 9.9075 12.0009 9.9075C10.8458 9.9075 9.9072 10.8461 9.9072 11.9999C9.9072 13.1538 10.8458 14.0923 12.0009 14.0923ZM12.0009 8.88749C10.283 8.88749 8.8872 10.2839 8.8872 11.9999C8.8872 13.7164 10.283 15.1122 12.0009 15.1122C13.717 15.1122 15.1128 13.7164 15.1128 11.9999C15.1128 10.2839 13.717 8.88749 12.0009 8.88749Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_2947_11191">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/windows.svg

@@ -1,6 +1,10 @@
 <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.80888 12.0185L0.114433 11.3751L0.00422248 11.36L0.00421445 11.2489L0.00396729 7.39195V7.26428H0.131141H4.82583H4.95351V7.39195V11.8924V12.0384L4.80888 12.0185Z" fill="#00ADEF"/>
-<path d="M12.0003 7.39195L11.9987 12.8732V13.0197L11.8541 12.9993L5.59136 12.1182L5.48114 12.1028V11.9921V7.39195V7.26428H5.60882H11.8731H12.0003V7.39195Z" fill="#00ADEF"/>
-<path d="M5.59086 1.91281L11.8536 1.00154L11.9993 0.980347V1.12771V6.60891V6.73658H11.8715H5.60882H5.48114V6.60891V2.03899V1.92879L5.59086 1.91281Z" fill="#00ADEF"/>
-<path d="M0.00418431 6.60893L-0.000124334 2.79077L-0.000244141 2.67959L0.110094 2.6646L4.80836 2.02659L4.95299 2.00696V2.15276V6.60893V6.7366H4.82531H0.131358H0.00433601L0.00418431 6.60893Z" fill="#00ADEF"/>
+    <path d="M4.80888 12.0185L0.114433 11.3751L0.00422248 11.36L0.00421445 11.2489L0.00396729 7.39195V7.26428H0.131141H4.82583H4.95351V7.39195V11.8924V12.0384L4.80888 12.0185Z"
+          fill="currentColor"/>
+    <path d="M12.0003 7.39195L11.9987 12.8732V13.0197L11.8541 12.9993L5.59136 12.1182L5.48114 12.1028V11.9921V7.39195V7.26428H5.60882H11.8731H12.0003V7.39195Z"
+          fill="currentColor"/>
+    <path d="M5.59086 1.91281L11.8536 1.00154L11.9993 0.980347V1.12771V6.60891V6.73658H11.8715H5.60882H5.48114V6.60891V2.03899V1.92879L5.59086 1.91281Z"
+          fill="currentColor"/>
+    <path d="M0.00418431 6.60893L-0.000124334 2.79077L-0.000244141 2.67959L0.110094 2.6646L4.80836 2.02659L4.95299 2.00696V2.15276V6.60893V6.7366H4.82531H0.131358H0.00433601L0.00418431 6.60893Z"
+          fill="currentColor"/>
 </svg>

package/src/components/Checkbox/Checkbox.scss

@@ -14,7 +14,7 @@
     @include mixins.box(16px, 1px solid var(--checkbox-border-color));
     box-sizing: border-box;
     border-radius: 2px;
-    margin-right: 8px;
+    margin-right: 4px;
     background-color: var(--checkbox-bg-color);
     position: relative;
     @include mixins.center-content;

package/src/components/Editor/Editor.tsx

@@ -1,215 +1,248 @@
-import React, { useRef, useState, useEffect } from 'react';
-import MonacoEditor, { OnMount } from '@monaco-editor/react';
 import {
-  dropdownPositionType,
-  EditorProps,
-  option,
-  DyanamicObj,
-} from './types';
-import Icon from '../Icon';
+  useRef,
+  useState,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import MonacoEditor, { OnMount } from '@monaco-editor/react';
+import { js as beautifyJS, html as beautifyHTML } from 'js-beautify';
+import { dropdownPositionType, EditorProps, DyanamicObj } from './types';
 import './Editor.scss';
-import Select from '../Select';
-import Button from '../Button';
 import VariableDropdown from './VariableDropdown';
-import Drawer from '../Drawer';
-import FileDropzone from '../FileDropzone';
-import Tooltip from '../Tooltip';
-import { optionsList } from './constants';
 
-const Editor: React.FC<EditorProps> = ({
-  width,
-  height,
-  showToolbar,
-  readOnly,
-  value = '',
-  handleChange,
-  setValue,
-  variableOptionsList = [],
-  language = 'javascript',
-  theme = 'light',
-}) => {
-  const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
-  const decorationsRef = useRef<string[]>([]);
-  const [contentType, setContentType] = useState<string>(language);
-  const [currentLine, setCurrentLine] = useState<number>(0);
-  const [showDropdown, setShowDropdown] = useState<boolean>(false);
-  const [showDrawer, setShowDrawer] = useState<boolean>(false);
-  const [selectedOption, setSelectedOption] = useState<option>({
-    label: 'JSON',
-    value: 'json',
-  });
-  const [dropdownPosition, setDropdownPosition] =
-    useState<dropdownPositionType>({ top: 0, left: 0 });
+const Editor = forwardRef<any, EditorProps>(
+  (
+    {
+      width,
+      height,
+      readOnly,
+      value = '',
+      handleChange,
+      setValue,
+      variableOptionsList = [],
+      language = 'json',
+      theme = 'light',
+    },
+    ref
+  ) => {
+    const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
+    const decorationsRef = useRef<string[]>([]);
+    const [currentLine, setCurrentLine] = useState<number>(0);
+    const [showDropdown, setShowDropdown] = useState<boolean>(false);
+    const [dropdownPosition, setDropdownPosition] =
+      useState<dropdownPositionType>({ top: 0, left: 0 });
 
-  const handleEditorDidMount: OnMount = (editor: any) => {
-    editorRef.current = editor;
+    const handleEditorDidMount: OnMount = (editor: any) => {
+      editorRef.current = editor;
 
-    editor.onDidChangeCursorPosition((e: any) => {
-      setCurrentLine(e.position.lineNumber);
-    });
+      editor.onDidChangeCursorPosition((e: any) => {
+        setCurrentLine(e.position.lineNumber);
+      });
 
-    editor.onDidChangeModelContent(() => {
-      const content = editor.getValue();
-      setValue(content);
+      editor.onDidChangeModelContent(() => {
+        const content = editor.getValue();
+        setValue(content);
 
-      const position = editor.getPosition();
-      const model = editor.getModel();
-      if (position && model) {
-        const currentLineContent = model.getLineContent(position.lineNumber);
-        if (currentLineContent[position.column - 2] === '$') {
-          const visiblePosition = editor.getScrolledVisiblePosition(position);
-          if (visiblePosition) {
-            setDropdownPosition({
-              top: visiblePosition.top,
-              left: visiblePosition.left,
-            });
-            setShowDropdown(true);
+        const position = editor.getPosition();
+        const model = editor.getModel();
+        if (position && model) {
+          const currentLineContent = model.getLineContent(position.lineNumber);
+          if (currentLineContent[position.column - 2] === '$') {
+            const visiblePosition = editor.getScrolledVisiblePosition(position);
+            if (visiblePosition) {
+              setDropdownPosition({
+                top: visiblePosition.top,
+                left: visiblePosition.left,
+              });
+              setShowDropdown(true);
+            }
+          } else {
+            setShowDropdown(false);
           }
-        } else {
-          setShowDropdown(false);
         }
-      }
-    });
-  };
+      });
+    };
 
-  useEffect(() => {
-    if (editorRef.current && currentLine) {
-      // Define decoration for the current line
-      const decorations = [
-        {
-          range: {
-            startLineNumber: currentLine,
-            startColumn: 1,
-            endLineNumber: currentLine,
-            endColumn: 1,
-          },
-          options: {
-            isWholeLine: true,
-            className: 'current-line-background', // Custom CSS class for background color
+    useEffect(() => {
+      if (editorRef.current && currentLine) {
+        const decorations = [
+          {
+            range: {
+              startLineNumber: currentLine,
+              startColumn: 1,
+              endLineNumber: currentLine,
+              endColumn: 1,
+            },
+            options: {
+              isWholeLine: true,
+              className: 'current-line-background',
+            },
           },
-        },
-      ];
-
-      // Apply decorations
-      decorationsRef.current = editorRef.current.deltaDecorations(
-        decorationsRef.current,
-        decorations
-      );
-    }
-  }, [currentLine]);
+        ];
 
-  const handleBeautify = () => {
-    let beautifiedContent = value;
-    if (contentType === 'json') {
-      try {
-        beautifiedContent = JSON.stringify(JSON.parse(value), null, 2);
-      } catch (e) {
-        alert('Invalid JSON format');
+        decorationsRef.current = editorRef.current.deltaDecorations(
+          decorationsRef.current,
+          decorations
+        );
       }
-    }
-    setValue(beautifiedContent);
-  };
+    }, [currentLine]);
 
-  const handleSelectSuggestion = (suggestion: string, type: string) => {
-    if (editorRef.current) {
-      const editor = editorRef.current;
-      const position = editor.getPosition();
-      if (position) {
-        editor.executeEdits('', [
-          {
-            range: {
-              startLineNumber: position.lineNumber,
-              startColumn: position.column,
-              endLineNumber: position.lineNumber,
-              endColumn: position.column,
+    const handleSelectSuggestion = (suggestion: string, type: string) => {
+      if (editorRef.current) {
+        const editor = editorRef.current;
+        const position = editor.getPosition();
+        if (position) {
+          editor.executeEdits('', [
+            {
+              range: {
+                startLineNumber: position.lineNumber,
+                startColumn: position.column,
+                endLineNumber: position.lineNumber,
+                endColumn: position.column,
+              },
+              text: `{${type}_${suggestion}}`,
             },
-            text: `{${type}_${suggestion}}`,
-          },
-        ]);
-        setShowDropdown(false);
+          ]);
+          setShowDropdown(false);
+        }
       }
-    }
-  };
+    };
 
-  const handleFileUpload = () => {
-    setShowDrawer(true);
-  };
+    const handleSelectVariable = (option: DyanamicObj) => {
+      handleSelectSuggestion(
+        option?.name,
+        option?.type === 'GLOBAL'
+          ? 'GV'
+          : option?.type === 'LOCAL'
+            ? 'LV'
+            : 'PEV'
+      );
+    };
 
-  const onDropdownChangeHandler = (option: option) => {
-    setContentType(option.value);
-    setSelectedOption(option);
-  };
+    const mapLanguageToContentType = (language: string | undefined): string => {
+      switch (language) {
+        case 'javascript':
+        case 'typescript':
+          return 'javascript';
+        case 'json':
+          return 'json';
+        case 'html':
+          return 'html';
+        case 'xml':
+          return 'xml';
+        default:
+          return 'plain text';
+      }
+    };
 
-  const handleSelectVariable = (option: DyanamicObj) => {
-    handleSelectSuggestion(
-      option?.name,
-      option?.type === 'GLOBAL' ? 'GV' : option?.type === 'LOCAL' ? 'LV' : 'PEV'
-    );
-  };
+    const beautifyContent = (content: string, language: string): string => {
+      switch (language) {
+        case 'json':
+          return beautifyJS(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            keep_array_indentation: true,
+            break_chained_methods: true,
+            brace_style: 'collapse',
+            space_before_conditional: true,
+            unescape_strings: true,
+            jslint_happy: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            comma_first: true,
+            e4x: true,
+            indent_empty_lines: true,
+          });
+        case 'javascript':
+          return beautifyJS(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            keep_array_indentation: true,
+            break_chained_methods: true,
+            brace_style: 'collapse',
+            space_before_conditional: true,
+            unescape_strings: true,
+            jslint_happy: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            comma_first: true,
+            e4x: true,
+            indent_empty_lines: true,
+          });
+        case 'html':
+          return beautifyHTML(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            indent_empty_lines: true,
+          });
+        case 'xml':
+          return beautifyHTML(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            indent_empty_lines: true,
+          });
+        case 'plain text':
+          return content;
+        default:
+          return content;
+      }
+    };
 
-  return (
-    <div style={{ width, height }} className="ff-editor-container">
-      {showToolbar && (
-        <div className="ff-top-toolbar">
-          <Tooltip title="Beautify">
-            <Icon name="beautify_icon" hoverEffect onClick={handleBeautify} />
-          </Tooltip>
-          <Select
-            labelAccessor="label"
-            valueAccessor="value"
-            optionsList={optionsList}
-            selectedOption={selectedOption}
-            showBorder={true}
-            onChange={onDropdownChangeHandler}
-            showLabel={true}
-            height={24}
-            width={98}
-          />
-          <Button
-            onClick={handleFileUpload}
-            variant="secondary"
-            label="Choose File"
-          />
-        </div>
-      )}
-      <MonacoEditor
-        height="90%"
-        width="100%"
-        language={contentType}
-        value={value}
-        options={{
-          lineNumbers: 'on',
-          wordWrap: 'on',
-          autoClosingBrackets: 'always',
-          scrollBeyondLastLine: false,
-          readOnly,
-          fontFamily: 'font-poppins',
-          theme,
-        }}
-        onMount={handleEditorDidMount}
-        onChange={(newValue, event) => handleChange(newValue, event)}
-      />
-      {showDrawer && (
-        <Drawer
-          title="Choose File"
-          isOpen={showDrawer}
-          onClose={() => setShowDrawer(false)}
-        >
-          <FileDropzone
-            buttonLabel="Upload"
-            accept={['.json', '.js', '.html']}
-          />
-        </Drawer>
-      )}
-      {showDropdown && dropdownPosition && (
-        <VariableDropdown
-          optionsList={variableOptionsList}
-          onSelectVariable={handleSelectVariable}
-          dropdownPosition={dropdownPosition}
+    // Expose editorRef and helper functions to parent via forwarded ref
+    useImperativeHandle(ref, () => ({
+      getEditorInstance: () => editorRef.current,
+      beautify: () => {
+        if (editorRef.current) {
+          const content = editorRef.current.getValue();
+          const lang = editorRef.current.getModel()?.getLanguageId();
+          const language = mapLanguageToContentType(lang);
+          const beautifiedContent = beautifyContent(content, language);
+          editorRef.current.setValue(beautifiedContent);
+        }
+      },
+    }));
+
+    return (
+      <div style={{ width, height }} className="ff-editor-container">
+        <MonacoEditor
+          height="90%"
+          width="100%"
+          language={language}
+          value={value}
+          options={{
+            lineNumbers: 'on',
+            wordWrap: 'on',
+            autoClosingBrackets: 'always',
+            scrollBeyondLastLine: false,
+            readOnly,
+          }}
+          onMount={handleEditorDidMount}
+          onChange={(newValue, event) => handleChange(newValue, event)}
+          theme={theme}
         />
-      )}
-    </div>
-  );
-};
+        {showDropdown && dropdownPosition && (
+          <VariableDropdown
+            optionsList={variableOptionsList}
+            onSelectVariable={handleSelectVariable}
+            dropdownPosition={dropdownPosition}
+          />
+        )}
+      </div>
+    );
+  }
+);
 
 export default Editor;

package/src/components/Editor/types.ts

@@ -5,7 +5,7 @@ export interface EditorProps {
   /**
    * Editor Content Type
    */
-  language?: 'javascript' | 'html' | 'json' | 'plaintext' | 'xml';
+  language: 'javascript' | 'html' | 'json' | 'plain text' | 'xml';
 
   /**
    *
@@ -18,10 +18,6 @@ export interface EditorProps {
    */
   height: string;
 
-  /**
-   * Show toolbar
-   */
-  showToolbar?: boolean;
 
   /**
    * read only

package/src/components/Icon/iconList.ts

@@ -202,6 +202,7 @@ import AddLabelIcon from '../../assets/icons/add_label_icon.svg?react';
 import QuickRunSettingIcon from '../../assets/icons/quick_run_setting_icon.svg?react';
 import RunManualTestcaseIcon from '../../assets/icons/run_manual_testcase_icon.svg?react';
 import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_icon.svg?react';
+import EyeOpenIcon from '../../assets/icons/eye_open_icon.svg?react';
 
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -402,6 +403,7 @@ Components['add_label_icon'] = AddLabelIcon;
 Components['quick_run_setting'] = QuickRunSettingIcon;
 Components['run_manual_testcase'] = RunManualTestcaseIcon;
 Components['run_automation_scripts'] = RunAutomationScriptsIcon;
+Components['eye_open_icon'] = EyeOpenIcon;
 
 
 export default Components;

package/src/components/MachineInputField/MachineInputField.scss

@@ -9,6 +9,7 @@
     height: 100%;
     width: 100%;
     border: 1px solid var(--ff-machine-input-field-border-color);
+    padding: 0 8px 0 0;
     border-radius: 4px;
     display: flex;
     align-items: center;
@@ -17,9 +18,10 @@
     .ff-machine-icon-text-wrapper,
     .ff-machine-icon-text-wrapper-reverse {
       display: flex;
+      align-items: center;
 
       .ff-machine-icon {
-        margin-right: 8px;
+        margin-left: 4px;
       }
     }
     
@@ -39,6 +41,6 @@
     background-color: var(--ff-machine-input-field-border-color);
     border-radius: 4px;
     padding: 1px 2px;
-    height: 10px;
+    height: 12px;
   }
 }

package/src/components/MachineInputField/MachineInputField.tsx

@@ -13,6 +13,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
       runCount = 0,
       className = '',
       contentReverse = false,
+      onClick = () => {},
     },
     ref
   ) => {
@@ -28,6 +29,7 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
         ref={ref}
         style={{ width: width }}
         className={classNames('ff-machine-input-field-wrapper', className)}
+        onClick={onClick}
       >
         <Typography
           as="span"

package/src/components/MachineInputField/types.ts

@@ -9,4 +9,5 @@ export interface MachineInputFieldProps {
   runCount: number;
   className?: string;
   contentReverse?: boolean;
+  onClick?: () => void;
 }