pixel-react 1.21.66 → 1.21.68

package/lib/components/Editor/useVariableDropdown.js

@@ -0,0 +1,252 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { calculateDropdownPosition } from './calculateDropdownPosition';
+export const useVariableDropdown = ({ editor, variableOptionsList, addForloopPrefix, isRequisiteType, setValue, }) => {
+    const decorationsRef = useRef([]);
+    const varRef = useRef(null);
+    const filterVarRef = useRef(null);
+    const [currentLine, setCurrentLine] = useState(0);
+    const [isTextSelected, setIsTextSelected] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
+    const [filteredVariableOptions, setFilteredVariableOptions] = useState([]);
+    // Setup listeners when editor is available
+    useEffect(() => {
+        if (!editor)
+            return;
+        const cursorPositionDisposable = editor.onDidChangeCursorPosition((e) => {
+            setCurrentLine(e.position.lineNumber);
+            const position = editor.getPosition();
+            const model = editor.getModel();
+            if (!position || !model)
+                return;
+            const currentLineContent = model.getLineContent(position.lineNumber);
+            const col = position.column - 1;
+            if (col === 0) {
+                setShowDropdown(false);
+                return;
+            }
+            const dollarIndex = currentLineContent.lastIndexOf('$', col - 1);
+            const openIndex = currentLineContent.lastIndexOf('${', col - 1);
+            const closeIndex = openIndex !== -1 ? currentLineContent.indexOf('}', openIndex + 2) : -1;
+            const insideVariable = openIndex !== -1 && closeIndex !== -1 && col - 1 > openIndex && col - 1 < closeIndex;
+            const isCloserEnd = !/\}/.test(currentLineContent.slice(dollarIndex + 1, col));
+            if (dollarIndex !== -1 &&
+                col > dollarIndex &&
+                !/\s/.test(currentLineContent.slice(dollarIndex + 1, col)) &&
+                !insideVariable &&
+                isCloserEnd) {
+                varRef.current = dollarIndex;
+                filterVarRef.current = currentLineContent.slice(dollarIndex + 1, col);
+                const filterVal = (filterVarRef.current ?? '').toLowerCase();
+                const filteredVariable = variableOptionsList.filter((opt) => {
+                    const variableName = opt.type === '_startforloop' && addForloopPrefix ? `FLV_for:${opt.name}` : opt.name;
+                    return variableName.toLowerCase().includes(filterVal);
+                });
+                setFilteredVariableOptions(filteredVariable);
+                const visiblePosition = editor.getScrolledVisiblePosition(position);
+                const editorDomNode = editor.getDomNode();
+                if (visiblePosition && editorDomNode) {
+                    setDropdownPosition(calculateDropdownPosition(visiblePosition, editorDomNode, 150));
+                }
+                if (['keyboard', 'mouse', 'deleteLeft'].includes(e?.source || '')) {
+                    setShowDropdown(true);
+                }
+            }
+            else {
+                setShowDropdown(false);
+                varRef.current = null;
+                filterVarRef.current = null;
+            }
+        });
+        const mouseDownDisposable = editor.onMouseDown(() => {
+            setTimeout(() => {
+                const position = editor.getPosition();
+                const model = editor.getModel();
+                if (!position || !model)
+                    return;
+                const currentLineContent = model.getLineContent(position.lineNumber);
+                const columnIndex = position.column - 2;
+                if (currentLineContent[columnIndex] === '$') {
+                    varRef.current = columnIndex;
+                    filterVarRef.current = '';
+                }
+                else {
+                    varRef.current = null;
+                    filterVarRef.current = null;
+                }
+            }, 0);
+        });
+        const cursorSelectionDisposable = editor.onDidChangeCursorSelection(() => {
+            const selections = editor.getSelections() || [];
+            const hasSelection = selections.some((sel) => sel.startLineNumber !== sel.endLineNumber || sel.startColumn !== sel.endColumn);
+            setIsTextSelected(hasSelection);
+        });
+        const modelContentDisposable = editor.onDidChangeModelContent(() => {
+            const content = editor.getValue();
+            setValue(content);
+            const position = editor.getPosition();
+            const model = editor.getModel();
+            if (!position || !model)
+                return;
+            const currentLineContent = model.getLineContent(position.lineNumber);
+            const columnIndex = position.column - 2;
+            const currentVarIndex = varRef.current ?? columnIndex;
+            if (currentLineContent[currentVarIndex] === '$') {
+                if (varRef.current === null) {
+                    varRef.current = columnIndex;
+                }
+                filterVarRef.current = currentLineContent.slice(varRef.current + 1, columnIndex);
+                const filteredVariable = variableOptionsList.filter((opt) => {
+                    const variableName = opt.type === '_startforloop' && addForloopPrefix ? `FLV_for:${opt.name}` : opt.name;
+                    return variableName.toLowerCase().includes((filterVarRef.current ?? '').toLowerCase());
+                });
+                if (filteredVariable.length) {
+                    setFilteredVariableOptions(filteredVariable);
+                }
+                else {
+                    setFilteredVariableOptions([]);
+                    if (varRef.current !== columnIndex && currentLineContent[columnIndex] === ' ') {
+                        varRef.current = null;
+                        filterVarRef.current = null;
+                        setShowDropdown(false);
+                    }
+                }
+                const visiblePosition = editor.getScrolledVisiblePosition(position);
+                const editorDomNode = editor.getDomNode();
+                if (visiblePosition && editorDomNode) {
+                    setDropdownPosition(calculateDropdownPosition(visiblePosition, editorDomNode, 150));
+                }
+            }
+            else {
+                varRef.current = null;
+                filterVarRef.current = null;
+            }
+        });
+        const blurDisposable = editor.onDidBlurEditorWidget(() => {
+            setShowDropdown(false);
+            varRef.current = null;
+            filterVarRef.current = null;
+            decorationsRef.current = [];
+            setCurrentLine(0);
+        });
+        return () => {
+            cursorPositionDisposable.dispose();
+            mouseDownDisposable.dispose();
+            cursorSelectionDisposable.dispose();
+            modelContentDisposable.dispose();
+            blurDisposable.dispose();
+        };
+    }, [editor, variableOptionsList, addForloopPrefix, setValue]);
+    // Decoration hook
+    useEffect(() => {
+        if (!editor || !currentLine)
+            return;
+        const decorations = [];
+        const lineNumberDecorations = [];
+        if (isTextSelected) {
+            lineNumberDecorations.push({
+                range: {
+                    startLineNumber: currentLine,
+                    startColumn: 1,
+                    endLineNumber: currentLine,
+                    endColumn: 1,
+                },
+                options: {
+                    isWholeLine: false,
+                    linesDecorationsClassName: 'active-line-number',
+                },
+            });
+        }
+        else {
+            decorations.push({
+                range: {
+                    startLineNumber: currentLine,
+                    startColumn: 1,
+                    endLineNumber: currentLine,
+                    endColumn: 1,
+                },
+                options: {
+                    isWholeLine: true,
+                    className: 'current-line-background',
+                },
+            });
+        }
+        const decorationIds = decorationsRef.current || [];
+        decorationsRef.current = editor.deltaDecorations(decorationIds, [
+            ...decorations,
+            ...lineNumberDecorations,
+        ]);
+    }, [editor, currentLine, isTextSelected]);
+    const insertSuggestion = useCallback((textToInsert, moveMarkers, currentPositionOffset) => {
+        if (!editor)
+            return;
+        const position = editor.getPosition();
+        if (!position)
+            return;
+        const currentVarIndex = varRef.current ?? 0;
+        editor.executeEdits('', [
+            {
+                range: {
+                    startLineNumber: position.lineNumber,
+                    startColumn: currentVarIndex + currentPositionOffset,
+                    endLineNumber: position.lineNumber,
+                    endColumn: currentVarIndex + (position.column - currentVarIndex),
+                },
+                text: textToInsert,
+                forceMoveMarkers: moveMarkers,
+            },
+        ]);
+        // Update decorations for the current line
+        const decorationIds = decorationsRef.current || [];
+        decorationsRef.current = editor.deltaDecorations(decorationIds, [
+            {
+                range: {
+                    startLineNumber: currentLine,
+                    startColumn: 1,
+                    endLineNumber: currentLine,
+                    endColumn: 1,
+                },
+                options: {
+                    isWholeLine: false,
+                },
+            },
+        ]);
+        filterVarRef.current = null;
+        varRef.current = null;
+        setShowDropdown(false);
+    }, [editor, currentLine]);
+    const handleSelectSuggestion = useCallback((suggestion, type) => {
+        const val = `{${type}${type === 'FLV_for:' ? '' : '_'}${suggestion}}`;
+        insertSuggestion(val, false, 2);
+    }, [insertSuggestion]);
+    const handleSelectVariable = useCallback((option) => {
+        if (isRequisiteType) {
+            insertSuggestion(`'${option.name}'`, true, 1);
+        }
+        else {
+            const typePrefix = option.parentVariableType === 'STEPGROUP'
+                ? 'SGV'
+                : option?.type === 'GLOBAL'
+                    ? 'GV'
+                    : option?.type === 'LOCAL'
+                        ? 'LV'
+                        : (option?._id ?? option?.id ?? '').includes('PARAMETER')
+                            ? 'SGP'
+                            : option?.type === '_startforloop'
+                                ? 'FLV_for:'
+                                : option?.type === 'DATAPROVIDER'
+                                    ? 'DPV'
+                                    : 'PEV';
+            const suggestionText = option?.type === 'DATAPROVIDER' ? `${option?.dpName}:${option?.varname}` : option?.name;
+            handleSelectSuggestion(suggestionText, typePrefix);
+        }
+    }, [isRequisiteType, handleSelectSuggestion, insertSuggestion]);
+    return {
+        showDropdown,
+        setShowDropdown,
+        dropdownPosition,
+        filteredVariableOptions,
+        handleSelectVariable,
+    };
+};
+//# sourceMappingURL=useVariableDropdown.js.map

package/lib/components/Editor/useVariableDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVariableDropdown.js","sourceRoot":"","sources":["../../../src/components/Editor/useVariableDropdown.ts"],"names":[],"mappings":"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"}

package/lib/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import * as Types from './types';
 export declare const enhance: (ColumnIndicatorComponent: Types.ColumnIndicatorComponent) => React.FC<Omit<Types.ColumnIndicatorProps, "selected" | "onSelect">>;
-declare const EnhancedColumnIndicator: React.FC<Omit<Types.ColumnIndicatorProps, "selected" | "onSelect">>;
+declare const EnhancedColumnIndicator: React.FC<Omit<Types.ColumnIndicatorProps, "onSelect" | "selected">>;
 export default EnhancedColumnIndicator;

package/lib/components/Excel/ExcelFile/ExcelFileComponents/areModelsEqual.js

@@ -13,6 +13,5 @@ function areModelsEqual(a, b) {
         return undefined;
     }
 }
-// @ts-expect-error
 expect.addEqualityTesters([areModelsEqual]);
 //# sourceMappingURL=areModelsEqual.js.map

package/lib/components/Excel/ExcelFile/ExcelFileComponents/areModelsEqual.js.map

@@ -1 +1 @@
-{"version":3,"file":"areModelsEqual.js","sourceRoot":"","sources":["../../../../../src/components/Excel/ExcelFile/ExcelFileComponents/areModelsEqual.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,SAAS,cAAc,CAAC,CAAU,EAAE,CAAU;IAC5C,MAAM,SAAS,GAAG,CAAC,YAAY,KAAK,CAAC;IACrC,MAAM,SAAS,GAAG,CAAC,YAAY,KAAK,CAAC;IAErC,IAAI,SAAS,IAAI,SAAS,EAAE,CAAC;QAC3B,mBAAmB;QACnB,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3B,CAAC;SAAM,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC;IACf,CAAC;SAAM,CAAC;QACN,OAAO,SAAS,CAAC;IACnB,CAAC;AACH,CAAC;AAED,mBAAmB;AACnB,MAAM,CAAC,kBAAkB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC"}
+{"version":3,"file":"areModelsEqual.js","sourceRoot":"","sources":["../../../../../src/components/Excel/ExcelFile/ExcelFileComponents/areModelsEqual.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,SAAS,cAAc,CAAC,CAAU,EAAE,CAAU;IAC5C,MAAM,SAAS,GAAG,CAAC,YAAY,KAAK,CAAC;IACrC,MAAM,SAAS,GAAG,CAAC,YAAY,KAAK,CAAC;IAErC,IAAI,SAAS,IAAI,SAAS,EAAE,CAAC;QAC3B,mBAAmB;QACnB,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3B,CAAC;SAAM,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC;IACf,CAAC;SAAM,CAAC;QACN,OAAO,SAAS,CAAC;IACnB,CAAC;AACH,CAAC;AAGD,MAAM,CAAC,kBAAkB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC"}

package/lib/components/Icon/Icon.js

@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import Components from './iconList';
 import './Icons.scss';
-const Icon = forwardRef(({ name, height, width, onClick = () => { }, color = 'var(--brand-color)', // Default color
+const Icon = forwardRef(({ name, height, width, onClick, color = 'var(--brand-color)', // Default color
 hoverEffect = false, className = '', disabled = false, variant = 'light', isSelected = false, x, y, chartIcon = false, tabIndex = -1, cursorType, withPadding = true, ...props }, ref) => {
     const IconComponent = Components[name];
     const iconHeight = height || 16;
@@ -42,7 +42,20 @@ hoverEffect = false, className = '', disabled = false, variant = 'light', isSele
     };
     const baseProps = {
         ref: iconRef,
-        onClick: disabled ? () => { } : onClick,
+        onClick: disabled ? undefined : onClick,
+        onKeyDown: (e) => {
+            if (disabled)
+                return;
+            if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                onClick(e);
+            }
+            if (props.onKeyDown) {
+                props.onKeyDown(e);
+            }
+        },
+        role: props.role || (onClick ? 'button' : 'img'),
+        'aria-disabled': disabled || undefined,
         style: {
             height: `${iconHeight}px`,
             width: `${iconWidth}px`,
@@ -60,7 +73,7 @@ hoverEffect = false, className = '', disabled = false, variant = 'light', isSele
         tabIndex: tabIndex,
         ...props,
     };
-    return (_jsx(_Fragment, { children: chartIcon === false ? (_jsx("span", { ...baseProps, ref: ref, children: _jsx(IconComponent, { height: "100%", width: "100%", style: { color: iconColor } }) })) : (_jsx("svg", { ...baseProps, children: _jsx(IconComponent, { style: { color: color }, height: height, width: width }) })) }));
+    return (_jsx(_Fragment, { children: chartIcon === false ? (_jsx("span", { ...baseProps, ref: ref, children: _jsx(IconComponent, { height: "100%", width: "100%", style: { color: iconColor } }) })) : (_jsx("svg", { ...baseProps, role: "img", "aria-label": name, children: _jsx(IconComponent, { style: { color: color }, height: height, width: width }) })) }));
 });
 export default Icon;
 //# sourceMappingURL=Icon.js.map

package/lib/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"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"}

package/lib/components/Icon/__tests__/Icon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Icon/__tests__/Icon.test.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Icon from '../Icon';
+// Mock the IconList to avoid depending on actual SVG imports
+vi.mock('../iconList', () => {
+    return {
+        default: {
+            play: (props) => _jsx("svg", { "data-testid": "mock-play-svg", ...props }),
+            close: (props) => _jsx("svg", { "data-testid": "mock-close-svg", ...props }),
+        },
+    };
+});
+describe('Icon Component', () => {
+    it('renders correctly with a valid icon name', () => {
+        render(_jsx(Icon, { name: "play" }));
+        // By default, it has role="img" when not interactive
+        const iconContainer = screen.getByRole('img');
+        expect(iconContainer).toBeInTheDocument();
+        const svg = screen.getByTestId('mock-play-svg');
+        expect(svg).toBeInTheDocument();
+    });
+    it('returns null if icon name is invalid', () => {
+        const { container } = render(_jsx(Icon, { name: "invalid_icon" }));
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('receives role="button" when onClick is provided', () => {
+        const handleClick = vi.fn();
+        render(_jsx(Icon, { name: "play", onClick: handleClick }));
+        const buttonIcon = screen.getByRole('button');
+        expect(buttonIcon).toBeInTheDocument();
+    });
+    it('handles onClick events', () => {
+        const handleClick = vi.fn();
+        render(_jsx(Icon, { name: "play", onClick: handleClick }));
+        const buttonIcon = screen.getByRole('button');
+        fireEvent.click(buttonIcon);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('does not trigger onClick when disabled', () => {
+        const handleClick = vi.fn();
+        render(_jsx(Icon, { name: "play", onClick: handleClick, disabled: true }));
+        // When disabled and onClick is provided, it might still have role="button" but should not fire
+        const buttonIcon = screen.getByRole('button');
+        expect(buttonIcon).toHaveAttribute('aria-disabled', 'true');
+        fireEvent.click(buttonIcon);
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+    it('fires onClick on Enter and Space keys', () => {
+        const handleClick = vi.fn();
+        render(_jsx(Icon, { name: "play", onClick: handleClick, tabIndex: 0 }));
+        const buttonIcon = screen.getByRole('button');
+        fireEvent.keyDown(buttonIcon, { key: 'Enter', code: 'Enter' });
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        fireEvent.keyDown(buttonIcon, { key: ' ', code: 'Space' });
+        expect(handleClick).toHaveBeenCalledTimes(2);
+    });
+    it('does not fire keyboard events when disabled', () => {
+        const handleClick = vi.fn();
+        render(_jsx(Icon, { name: "play", onClick: handleClick, tabIndex: 0, disabled: true }));
+        const buttonIcon = screen.getByRole('button');
+        fireEvent.keyDown(buttonIcon, { key: 'Enter', code: 'Enter' });
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=Icon.test.js.map

package/lib/components/Icon/__tests__/Icon.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.test.js","sourceRoot":"","sources":["../../../../src/components/Icon/__tests__/Icon.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,6DAA6D;AAC7D,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE;IAC1B,OAAO;QACL,OAAO,EAAE;YACP,IAAI,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,6BAAiB,eAAe,KAAK,KAAK,GAAI;YACpE,KAAK,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,6BAAiB,gBAAgB,KAAK,KAAK,GAAI;SACvE;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,CAAC,CAAC;QAC7B,qDAAqD;QACrD,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAC9C,MAAM,CAAC,aAAa,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAE1C,MAAM,GAAG,GAAG,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QAChD,MAAM,CAAC,GAAG,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,GAAG,CAAC,CAAC;QAC3D,MAAM,CAAC,SAAS,CAAC,CAAC,mBAAmB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACzD,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,MAAM,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,WAAW,GAAI,CAAC,CAAC;QAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC9C,MAAM,CAAC,UAAU,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;QAChC,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,MAAM,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,WAAW,GAAI,CAAC,CAAC;QAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC9C,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC5B,MAAM,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,MAAM,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,SAAG,CAAC,CAAC;QAE5D,+FAA+F;QAC/F,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC9C,MAAM,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAE5D,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC5B,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;QAC/C,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,MAAM,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,GAAI,CAAC,CAAC;QAEhE,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAE9C,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QAC/D,MAAM,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QAE7C,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QAC3D,MAAM,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACrD,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,MAAM,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,SAAG,CAAC,CAAC;QAEzE,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAE9C,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QAC/D,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/components/Icon/iconList.js

@@ -437,7 +437,7 @@ import GotoScript from '../../assets/icons/go_to_scripts.svg?react';
 import SettingIcon from '../../assets/icons/setting-icon.svg?react';
 import SeleniumIcon from '../../assets/icons/selenium_icon.svg?react';
 import VideoPreviewIcon from '../../assets/icons/video_preview_icon.svg?react';
-import FilterActive from '../../assets/icons/Filter_active.svg?react';
+import FilterActive from '../../assets/icons/filter_active.svg?react';
 import MaximizedNewIcon from '../../assets/icons/maximize_new_icon.svg?react';
 import AutoHealing from '../../assets/icons/auto_healing.svg?react';
 import ClockFilled from '../../assets/icons/clock_filled.svg?react';
@@ -489,7 +489,7 @@ import PromptSlider from '../../assets/icons/prompt_slider.svg?react';
 import SendPrompt from '../../assets/icons/send_prompt.svg?react';
 import Access_Key from '../../assets/icons/access_key.svg?react'; //Newly Added icon
 import List_icon from '../../assets/icons/list_icon.svg?react';
-import JSON_icon from '../../assets/icons/jSON_code_icon.svg?react';
+import JSON_icon from '../../assets/icons/JSON_code_icon.svg?react';
 import Honor_icon from '../../assets/icons/honor_icon.svg?react'; //Newly Added icon
 import IQOO_icon from '../../assets/icons/iqoo_icon.svg?react'; //Newly Added icon
 import MOTOROLA_icon from '../../assets/icons/motorola_icon.svg?react'; //Newly Added icon
@@ -498,7 +498,7 @@ import REALME_icon from '../../assets/icons/realme_icon.svg?react'; //Newly Adde
 import VIVO_icon from '../../assets/icons/vivo_icon.svg?react'; //Newly Added icon
 import DataSet from '../../assets/icons/data_set.svg?react'; //Newly Added icon
 import VideoPreview from '../../assets/icons/video_preview.svg?react'; //Newly Added icon
-import Minimize_tree from '../../assets/icons/minimize_tree.svg?react';
+import Minimize_tree from '../../assets/icons/Minimize_Tree.svg?react';
 import Record from '../../assets/icons/record.svg?react';
 import AddElement from '../../assets/icons/add_element.svg?react';
 import ElementSlider from '../../assets/icons/element_slider.svg?react';
@@ -553,7 +553,7 @@ import AndroidBrowserIcon from '../../assets/icons/android_browser.svg?react';
 import IosBrowserIcon from '../../assets/icons/ios_browser.svg?react';
 import ManualMobileWhiteIcon from '../../assets/icons/manualMobileWhiteIcon.svg?react';
 import ManualMobileIcon from '../../assets/icons/manualMobileIcon.svg?react';
-import DeviceFarm_Arrow_icon from '../../assets/icons/deviceFarm_Arrow_icon.svg?react';
+import DeviceFarm_Arrow_icon from '../../assets/icons/DeviceFarm_Arrow_icon.svg?react';
 import CertifiedIcon from '../../assets/icons/certified.svg?react';
 import VerifiedIcon from '../../assets/icons/verified.svg?react';
 import IssuedByIcon from '../../assets/icons/issued_by.svg?react';
@@ -580,7 +580,7 @@ import Empty_page_web_icon from '../../assets/icons/empty_page_web_icon.svg?reac
 import Screenshot_empty_icon from '../../assets/icons/screenshot_empty_icon.svg?react';
 import Video_empty_icon from '../../assets/icons/video_empty_icon.svg?react';
 import Optmizer_icon from '../../assets/icons/optmizer_icon.svg?react';
-import Warning_info_icon from '../../assets/icons/warning_info_icon.svg?react';
+import Warning_info_icon from '../../assets/icons/Warning_info_icon.svg?react';
 import Request_generation_icon from '../../assets/icons/request_generation.svg?react';
 import Up_Control_Icon from '../../assets/icons/up_control_icon.svg?react';
 import Down_Control_Icon from '../../assets/icons/down_control_icon.svg?react';

package/lib/components/Icon/types.d.ts

@@ -1,4 +1,5 @@
-export interface IconProps {
+import { HTMLAttributes } from 'react';
+export interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
     name: string;
     className?: string;
     height?: number;

package/lib/components/Input/Input.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect, useId } from 'react';
 import classNames from 'classnames';
 import './Input.scss';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
@@ -27,6 +27,9 @@ const Input = forwardRef(({ type = 'text', variant = 'primary', name = '', label
     const [isFocused, setIsFocused] = useState(false);
     const clearIcon = iconProps?.isClearIcon;
     const showIcon = iconProps?.isShowIcon;
+    const uniqueId = useId();
+    const inputId = props.id || name || uniqueId;
+    const helperTextId = `${inputId}-helper-text`;
     useEffect(() => {
         if (value !== internalValue) {
             setInternalValue(value);
@@ -143,12 +146,12 @@ const Input = forwardRef(({ type = 'text', variant = 'primary', name = '', label
                 'ff-input-container--disabled': !!disabled,
             }), children: [isLabelRequired && (_jsxs("label", { className: classNames(`ff-input-label-container ff-input-label-container--${size}`, {
                         'ff-input-label-container--danger': (displayErrorImmediately || touched) && !!error,
-                    }), htmlFor: name, children: [required && _jsx("span", { className: "required-asterisk", children: "*" }), _jsx("span", { className: classNames(`ff-input-label ff-input-label--${variant}`, {
+                    }), htmlFor: inputId, children: [required && _jsx("span", { className: "required-asterisk", children: "*" }), _jsx("span", { className: classNames(`ff-input-label ff-input-label--${variant}`, {
                                 'ff-input-label--no-hover': !!internalValue,
                                 'ff-input-label--disabled': !!disabled,
                                 'ff-input-label--danger': (displayErrorImmediately || touched) && !!error,
                                 'ff-input-label--focused': isFocused,
-                            }), children: label })] })), _jsx("input", { style: { background: background || 'transparent' }, readOnly: readOnly, ref: ref, name: name, value: internalValue || value, type: type, spellCheck: false, id: name, className: classNames(`ff-input ff-input-${variant} default-input ff-input--${size}`, {
+                            }), children: label })] })), _jsx("input", { style: { background: background || 'transparent' }, readOnly: readOnly, ref: ref, name: name, value: internalValue || value, type: type, spellCheck: false, id: inputId, "aria-invalid": !!error, "aria-required": !!required, "aria-describedby": (((displayErrorImmediately || touched) && (error || isHelperTextRequired) && helperText) || reserveHelperTextSpace) ? helperTextId : undefined, className: classNames(`ff-input ff-input-${variant} default-input ff-input--${size}`, {
                         ['ff-input--transparentBackground']: !!transparentBackground,
                         'ff-input--disabled': !!disabled,
                         'ff-input--danger': (displayErrorImmediately || touched) && !!error,
@@ -164,13 +167,13 @@ const Input = forwardRef(({ type = 'text', variant = 'primary', name = '', label
                         ['arrow-container-label']: label,
                         ['arrow-container-label-error']: !!error && (label || required),
                         ['arrow-container-no-label-error']: !!error && !label,
-                    }), children: [_jsx(Icon, { name: "arrow_up", hoverEffect: false, height: 7, width: 12, color: value == maxValue
+                    }), children: [_jsx(Icon, { name: "arrow_up", tabIndex: disabled ? -1 : 0, "aria-label": "Increment", hoverEffect: false, height: 7, width: 12, color: value == maxValue
                                 ? 'var(--private-chip-bg-color)'
                                 : 'var(--text-area-default-color)', onClick: () => {
                                 if (disabled)
                                     return;
                                 handleIncrementDecrement('increment');
-                            }, disabled: disabled }), _jsx(Icon, { name: "arrow_down", height: 7, width: 12, color: value == minValue
+                            }, disabled: disabled }), _jsx(Icon, { name: "arrow_down", tabIndex: disabled ? -1 : 0, "aria-label": "Decrement", height: 7, width: 12, color: value == minValue
                                 ? 'var(--private-chip-bg-color)'
                                 : 'var(--text-area-default-color)', onClick: () => {
                                 if (disabled)
@@ -178,7 +181,7 @@ const Input = forwardRef(({ type = 'text', variant = 'primary', name = '', label
                                 handleIncrementDecrement('decrement');
                             }, disabled: disabled })] })), showSearchIcon && !(type === 'number') && (_jsx("div", { className: classNames('arrow-container', {
                         ['arrow-container-searchIcon']: showSearchIcon,
-                    }), children: _jsx(Tooltip, { title: searchIconProps?.toolTipTitle || 'search', children: _jsx(Icon, { name: searchIconProps?.name || 'search', hoverEffect: false, height: searchIconProps?.height || 14, width: searchIconProps?.height || 14, color: "var(--text-area-default-color)", onClick: (e) => {
+                    }), children: _jsx(Tooltip, { title: searchIconProps?.toolTipTitle || 'search', children: _jsx(Icon, { name: searchIconProps?.name || 'search', tabIndex: searchIconProps?.disabled ? -1 : 0, "aria-label": searchIconProps?.toolTipTitle || 'search', hoverEffect: false, height: searchIconProps?.height || 14, width: searchIconProps?.height || 14, color: "var(--text-area-default-color)", onClick: (e) => {
                                 if (handleSearchIconClick) {
                                     handleSearchIconClick(e);
                                 }
@@ -188,18 +191,18 @@ const Input = forwardRef(({ type = 'text', variant = 'primary', name = '', label
                         ['ff-input-clear-icon-container--with-label']: (label || required) && clearIcon,
                         ['ff-input-clear-icon-container--no-label']: !label && clearIcon,
                         ['ff-input-clear-icon-container--isOnly-clear-icon']: !showIcon && clearIcon,
-                    }), children: _jsx(Tooltip, { title: clearIcon ? 'Clear' : '', children: _jsx(Icon, { name: clearIcon ? 'close' : '', hoverEffect: false, height: 16, width: 16, color: "var(--brand-color)", onClick: handleClearValue, disabled: iconProps?.isIconDisable, cursorType: "pointer" }) }) })), showIcon && !(type === 'number') && (_jsx("div", { className: classNames('ff-input-icon-container', {
+                    }), children: _jsx(Tooltip, { title: clearIcon ? 'Clear' : '', children: _jsx(Icon, { name: clearIcon ? 'close' : '', tabIndex: iconProps?.isIconDisable ? -1 : 0, "aria-label": "Clear input", hoverEffect: false, height: 16, width: 16, color: "var(--brand-color)", onClick: handleClearValue, disabled: iconProps?.isIconDisable, cursorType: "pointer" }) }) })), showIcon && !(type === 'number') && (_jsx("div", { className: classNames('ff-input-icon-container', {
                         ['ff-input-icon-container--default']: showIcon,
                         ['ff-input-icon-container--error']: !!error,
                         ['ff-input-icon-container--with-label']: (label || required) && showIcon,
                         ['ff-input-icon-container--no-label']: !label && showIcon,
                     }), children: _jsx(Tooltip, { title: showIcon && !iconProps?.isIconDisable
                             ? iconProps?.iconToolTipTitle
-                            : '', children: _jsx(Icon, { name: iconProps?.iconName || '', hoverEffect: false, height: 16, width: 16, color: iconProps?.iconColor || 'var(--text-area-default-color)', onClick: (e) => {
+                            : '', children: _jsx(Icon, { name: iconProps?.iconName || '', tabIndex: iconProps?.isIconDisable ? -1 : 0, "aria-label": iconProps?.iconToolTipTitle || 'icon', hoverEffect: false, height: 16, width: 16, color: iconProps?.iconColor || 'var(--text-area-default-color)', onClick: (e) => {
                                 if (iconProps?.onIconClick) {
                                     iconProps?.onIconClick(e);
                                 }
-                            }, disabled: iconProps?.isIconDisable, cursorType: "pointer" }) }) })), reserveHelperTextSpace && (_jsx("span", { className: classNames('ff-input-message', {
+                            }, disabled: iconProps?.isIconDisable, cursorType: "pointer" }) }) })), reserveHelperTextSpace && (_jsx("span", { id: helperTextId, className: classNames('ff-input-message', {
                         'ff-input-message--space': !!reserveHelperTextSpace,
                         'ff-input-message--showHelperText': !!isHelperTextRequired,
                         'ff-input-message--danger': (displayErrorImmediately || touched) && !!error,
@@ -209,7 +212,7 @@ const Input = forwardRef(({ type = 'text', variant = 'primary', name = '', label
                         : '' })), !reserveHelperTextSpace &&
                     (displayErrorImmediately || touched) &&
                     helperText &&
-                    (error || isHelperTextRequired) && (_jsx("span", { className: classNames(helperTextWidth ? 'ff-input-width' : 'ff-input-message', {
+                    (error || isHelperTextRequired) && (_jsx("span", { id: helperTextId, className: classNames(helperTextWidth ? 'ff-input-width' : 'ff-input-message', {
                         'ff-input-message--showHelperText': !!isHelperTextRequired,
                         'ff-input-message--danger': !!error,
                     }), style: {