saurabh-table-dnd-edit 1.1.0

package/lib/components/DragAndDrop/DragAndDropList.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import DragAndDrop from './DragAndDrop';
+const { DNDCore: { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, closestCorners, }, DNDSortable: { useSortable, arrayMove, sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, }, DNDUtilities: { CSS }, } = DragAndDrop;
+import Typography from '../Typography';
+import './DragAndDropList.scss';
+export const Task = ({ id, title }) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+    const style = {
+        transition,
+        transform: CSS.Transform.toString(transform),
+    };
+    return (_jsx("div", { ref: setNodeRef, style: style, ...attributes, ...listeners, className: "task", children: _jsx(Typography, { as: 'h1', fontSize: 16, className: 'task-title', children: title }) }));
+};
+export const Column = ({ tasks }) => {
+    return (_jsx("div", { className: "column", children: _jsx(SortableContext, { items: tasks, strategy: verticalListSortingStrategy, children: tasks.map((task) => (_jsx(Task, { id: task.id, title: task.title }, task.id))) }) }));
+};
+export const Input = ({ onSubmit }) => {
+    const [input, setInput] = useState('');
+    const handleSubmit = () => {
+        if (!input)
+            return;
+        onSubmit(input);
+        setInput('');
+    };
+    return (_jsxs("div", { className: "container", children: [_jsx("input", { className: "input", type: "text", value: input, onChange: (e) => setInput(e.target.value) }), _jsx("button", { onClick: handleSubmit, className: "button", children: _jsx(Typography, { fontSize: 14, children: "Add" }) })] }));
+};
+const DragAndDropList = () => {
+    const [tasks, setTasks] = useState([
+        { id: 1, title: 'Add tests to homepage' },
+        { id: 2, title: 'Fix styling in about section' },
+        { id: 3, title: 'Learn how to center a div' },
+    ]);
+    const addTask = (title) => {
+        setTasks((tasks) => [...tasks, { id: tasks.length + 1, title }]);
+    };
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const getTaskPos = (id) => tasks.findIndex((task) => task.id === id);
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (active.id === over?.id)
+            return;
+        setTasks((tasks) => {
+            const originalPos = getTaskPos(Number(active?.id));
+            const newPos = getTaskPos(Number(over?.id));
+            return arrayMove(tasks, originalPos, newPos);
+        });
+    };
+    return (_jsxs("div", { className: "drag-and-drop-list", children: [_jsx(Typography, { fontSize: 32, fontWeight: "semi-bold", children: "Drag and Drop test \u2705" }), _jsx(Input, { onSubmit: addTask }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCorners, onDragEnd: handleDragEnd, children: _jsx(Column, { id: "toDo", tasks: tasks }) })] }));
+};
+export default DragAndDropList;
+//# sourceMappingURL=DragAndDropList.js.map

package/lib/components/DragAndDrop/DragAndDropList.js.map

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

package/lib/components/DragAndDrop/index.d.ts

@@ -0,0 +1 @@
+export * from './DragAndDrop';

package/lib/components/DragAndDrop/index.js

@@ -0,0 +1,2 @@
+export * from './DragAndDrop';
+//# sourceMappingURL=index.js.map

package/lib/components/DragAndDrop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/lib/components/Drawer/Drawer.d.ts

@@ -0,0 +1,5 @@
+import { DrawerProps } from './Types.js';
+import './Drawer.scss';
+import { FC } from 'react';
+declare const Drawer: FC<DrawerProps>;
+export default Drawer;

package/lib/components/Drawer/Drawer.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import Button from '../Button/Button.js';
+import classNames from 'classnames';
+import './Drawer.scss';
+import { useContext, useEffect, useRef, useState } from 'react';
+import Icon from '../Icon';
+import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider.js';
+import Tooltip from '../Tooltip/Tooltip.js';
+import useClickOutside from '../../hooks/useClickOutside.js';
+const Drawer = ({ isOpen = true, children = 'Drawer content area', onClose = () => { }, onBackButtonClick = () => { }, title = 'drawer', primaryButtonProps = {}, secondaryButtonProps = {}, leftPrimaryButtonProps = {}, leftSecondaryButtonProps = {}, showEditButton = false, showTransition = true, onEdit = () => { }, onCollapse = () => { }, overlay = false, isFooterRequired = true, footerContent = null, size = 'medium', _isExpanded = false, isBackButtonVisible = false, _isCloseModalButtonVisible = true, showHeader = true, isScrollBar = true, backButtonIcon, onCloseIconClick, customHeader, customFooter, leftTertiaryButtonProps = {}, rightTertiaryButtonProps = {}, zIndex, top = '89px', height, width, right = '5px', overflow, isClickOutside, ignoreRefs, noHeaderBorder = false, }) => {
+    const containerRef = useRef(null);
+    useClickOutside(containerRef, () => {
+        const openDrawers = document.querySelectorAll('.ff-drawer');
+        const lastDrawer = openDrawers[openDrawers.length - 1];
+        if (lastDrawer &&
+            lastDrawer.contains(containerRef.current) &&
+            isClickOutside) {
+            onClose();
+        }
+    }, ignoreRefs);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [delayedOpen, setDelayedOpen] = useState(false);
+    // useKeyboardActions([{ key: 'Escape', action: onClose }]);
+    const handelClose = useEscapeKey('Escape');
+    handelClose(onClose);
+    const toggleExpand = () => {
+        setIsExpanded((prev) => {
+            onCollapse(!prev);
+            return !prev;
+        });
+    };
+    const onCancel = () => {
+        if (secondaryButtonProps.onClick) {
+            secondaryButtonProps.onClick();
+        }
+        else {
+            onClose();
+        }
+    };
+    useEffect(() => {
+        closeModal();
+    }, [isOpen]);
+    const closeModal = () => {
+        if (!isOpen) {
+            setTimeout(() => {
+                return null;
+            }, 1000);
+        }
+    };
+    useEffect(() => {
+        if (isOpen) {
+            setTimeout(() => setDelayedOpen(true), 200);
+        }
+        else {
+            setDelayedOpen(false);
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Enter' &&
+                isOpen &&
+                primaryButtonProps?.onClick &&
+                !primaryButtonProps.disabled) {
+                const activeElement = document.activeElement;
+                const isSpecialInput = ['ff-add-module-input', 'ff-search-input'].some((className) => activeElement?.classList?.contains(className) ||
+                    activeElement?.closest(`.${className}`));
+                if (isSpecialInput) {
+                    return;
+                }
+                primaryButtonProps.onClick();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, primaryButtonProps]);
+    const drawerSize = isExpanded ? 'x-large' : size;
+    const themeContext = useContext(ThemeContext);
+    const currentTheme = themeContext?.currentTheme;
+    const transitionDuration = !showTransition ? '0s' : '0.4s';
+    const getDefaultZIndex = (size) => {
+        const zIndexMap = {
+            small: 1100,
+            medium: 1050,
+            large: 1000,
+            'x-large': 950,
+        };
+        return zIndexMap[size] ?? 1050;
+    };
+    const computedZIndex = zIndex ?? getDefaultZIndex(size);
+    return createPortal(_jsxs("div", { className: classNames('ff-drawer-container', currentTheme), children: [overlay && (_jsx("div", { className: 'ff-overlay', style: { zIndex: computedZIndex } })), _jsxs("div", { ref: containerRef, className: classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
+                    'ff-drawer--open': delayedOpen,
+                }), style: {
+                    zIndex: computedZIndex,
+                    top: top,
+                    height,
+                    width,
+                    right: right,
+                    overflow,
+                    transition: `all ${transitionDuration} ease-in-out`,
+                }, children: [showHeader && (_jsx("div", { className: classNames('ff-drawer-header', {
+                            'ff-custom-header': customHeader,
+                            'no-header-border': noHeaderBorder,
+                        }), style: { zIndex: computedZIndex }, children: customHeader ? (_jsx("div", { className: classNames('ff-custom-header', {
+                                'no-header-border': noHeaderBorder,
+                            }), children: customHeader })) : (_jsxs("div", { className: "ff-drawer-action-section", children: [_jsxs("div", { className: "ff-action-button", children: [showEditButton && (_jsxs("button", { className: "ff-expand-collapse-button", onClick: onEdit, children: [_jsx(Icon, { name: "logo", height: 16, width: 16 }), "Edit"] })), _isExpanded && (_jsx(Tooltip, { title: isExpanded ? 'Minimize' : 'Maximize', placement: "bottom", children: _jsx("div", { className: "ff-expand-collapse-button", onClick: toggleExpand, children: _jsx(Icon, { name: isExpanded ? 'maximize_tree' : 'minimize_tree', height: 16, width: 16, hoverEffect: true, cursorType: "pointer" }) }) })), isBackButtonVisible &&
+                                            (backButtonIcon || (_jsx(Tooltip, { title: "Back", children: _jsx(Icon, { name: "back_icon", height: 16, width: 16, hoverEffect: true, onClick: onBackButtonClick }) }))), title && _jsx("div", { className: "ff-drawer-title", children: title })] }), _isCloseModalButtonVisible && (_jsx("div", { className: "ff-close-icon", children: _jsx(Tooltip, { title: "Close", children: _jsx(Icon, { name: "drawer_icon_close", onClick: onCloseIconClick || onClose, height: 16, width: 16, color: "var(--tabs-label-active-color)", cursorType: "pointer" }) }) }))] })) })), _jsxs("div", { className: classNames({
+                            'ff-drawer-body-with-scroll': isScrollBar,
+                            'ff-drawer-body': !isScrollBar,
+                            'no-footer': !isFooterRequired,
+                        }), children: [' ', children] }), isFooterRequired && (_jsx("div", { className: classNames('ff-drawer-footer', {
+                            'ff-custom-footer': customFooter,
+                        }), style: {
+                            zIndex: computedZIndex,
+                        }, children: customFooter || footerContent || (_jsxs(_Fragment, { children: [_jsxs("div", { className: "button-container", children: [leftSecondaryButtonProps.label && (_jsx(Button, { onClick: leftPrimaryButtonProps.onClick, variant: "secondary", transparentBackground: true, ...leftSecondaryButtonProps })), leftPrimaryButtonProps.label && (_jsx(Button, { onClick: leftPrimaryButtonProps.onClick, variant: "primary", transparentBackground: true, ...leftPrimaryButtonProps })), leftTertiaryButtonProps?.label && (_jsx(Button, { onClick: leftTertiaryButtonProps.onClick, variant: "tertiary", transparentBackground: true, ...leftTertiaryButtonProps }))] }), _jsxs("div", { className: "button-container", children: [rightTertiaryButtonProps?.label && (_jsx(Button, { onClick: rightTertiaryButtonProps.onClick, variant: "tertiary", transparentBackground: true, ...rightTertiaryButtonProps })), secondaryButtonProps.label && (_jsx(Button, { onClick: onCancel, variant: "secondary", transparentBackground: true, ...secondaryButtonProps })), primaryButtonProps.label && (_jsx(Button, { onClick: primaryButtonProps.onClick, variant: "primary", transparentBackground: true, ...primaryButtonProps }))] })] })) }))] })] }), document.body);
+};
+export default Drawer;
+//# sourceMappingURL=Drawer.js.map

package/lib/components/Drawer/Drawer.js.map

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

package/lib/components/Drawer/Types.d.ts

@@ -0,0 +1,173 @@
+import { ReactNode } from 'react';
+export interface BtnPropsCommon {
+    /**
+     * Label for the button
+     */
+    label?: string;
+    /**
+     * Boolean value to disable the button
+     */
+    disabled?: boolean;
+    /**
+     * Onclick function for button
+     */
+    onClick?: () => void;
+    /**
+     * Button type
+     * @default 'button'
+     * @example 'submit'
+     * @example 'button'
+     */
+    type?: 'button' | 'submit';
+    /**
+     *  form to accept id of form in string format
+     */
+    form?: string;
+}
+export interface DrawerProps {
+    /**
+     * To Open the Drawer
+     */
+    isOpen: boolean;
+    /**
+     * To Expand the Drawer
+     */
+    _isExpanded?: boolean;
+    /**
+     * To show and  hide the back button of the Drawer
+     */
+    isBackButtonVisible?: boolean;
+    /**
+     * To show and  hide the close button of the Drawer
+     */
+    _isCloseModalButtonVisible?: boolean;
+    /**
+     * Function to close the drawer
+     */
+    onClose?: () => void;
+    /**
+     * Function to go back in the drawer
+     */
+    onBackButtonClick?: () => void;
+    /**
+     * Size of the drawer medium = 550px large = 850px
+     */
+    size?: 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * Body Content of the drawer
+     */
+    children: ReactNode;
+    /**
+     * Header title for the drawer
+     */
+    title?: string | ReactNode;
+    /**
+     * To show the edit button on the header
+     */
+    showEditButton?: boolean;
+    /**
+     * To show the transition effect while the drawer comes
+     */
+    showTransition?: boolean;
+    /**
+     * Primary | Success button props
+     */
+    primaryButtonProps?: BtnPropsCommon;
+    /**
+     * Secondary | Cancel button props
+     */
+    secondaryButtonProps?: BtnPropsCommon;
+    /**
+     * Left side Primary Button | Cancel button props
+     */
+    leftPrimaryButtonProps?: BtnPropsCommon;
+    /**
+     * Left side Secondary | Cancel button props
+     */
+    leftSecondaryButtonProps?: BtnPropsCommon;
+    /**
+     * Left side Tertiary Button | Help button props
+     */
+    leftTertiaryButtonProps?: BtnPropsCommon;
+    /**
+     * Right side Tertiary Button | More Info button props
+     */
+    rightTertiaryButtonProps?: BtnPropsCommon;
+    /**
+     * Onclick function for edit button
+     */
+    onEdit?: () => void;
+    /**
+     * Background overlay for the drawer
+     */
+    overlay?: boolean;
+    /**
+     * displays footer if its true, default true
+     */
+    isFooterRequired?: boolean;
+    /**
+     * footer Content
+     */
+    footerContent?: ReactNode;
+    /**
+     * To show or hide the header
+     */
+    showHeader?: boolean;
+    /**
+     *  Custom back button icon
+     * The icon to display for the back button.
+     * If not provided, a default icon will be used.
+     */
+    backButtonIcon?: ReactNode;
+    /**
+     * Callback function when the close icon is clicked
+     */
+    onCloseIconClick?: () => void;
+    /**
+     * Custom header for the drawer, replacing the default header.
+     * If provided, this will render in place of the default header.
+     */
+    customHeader?: ReactNode;
+    /**
+     * Custom footer for the drawer, replacing the default footer.
+     * If provided, this will render in place of the default footer.
+     */
+    customFooter?: ReactNode;
+    /**
+     * Custom z-index for the drawer
+     */
+    zIndex?: number;
+    /**
+     * Custom top for the drawer
+     */
+    top?: string;
+    /**
+     * Height of the drawer
+     */
+    height?: string;
+    /**
+     *
+     * width of the drawer
+     */
+    width?: string;
+    /**
+     * Position from right
+     */
+    right?: string | number;
+    /**
+     * Custom overflow for the drawer
+     */
+    overflow?: string;
+    /**
+     * Callback function returns a boolean value when the drawer is collapsed.
+     */
+    onCollapse?: (value: boolean) => void;
+    /**This optional boolean prop determines whether the drawer body displays a scrollbar when its content overflows. */
+    isScrollBar?: boolean;
+    /**
+     *To  Close the drawer when clicking outside of it.
+     */
+    isClickOutside?: boolean;
+    ignoreRefs?: Array<React.RefObject<HTMLElement>>;
+    noHeaderBorder?: boolean;
+}

package/lib/components/Drawer/Types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Types.js.map

package/lib/components/Drawer/Types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Types.js","sourceRoot":"","sources":["../../../src/components/Drawer/Types.ts"],"names":[],"mappings":""}

package/lib/components/Drawer/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Drawer';

package/lib/components/Drawer/index.js

@@ -0,0 +1,2 @@
+export { default } from './Drawer';
+//# sourceMappingURL=index.js.map

package/lib/components/Drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/lib/components/EditLabel/EditLabel.d.ts

@@ -0,0 +1,4 @@
+import './EditLabel.scss';
+import type { EditLabelProps } from './types';
+declare const EditLabel: ({ id, onConfirm, onCancel, handleCustomError, value, label, optionsList, selectedOption, withDropdown, inputFieldWidth, selectFieldWidth, textColor, tooltip, required, isDisable, onClick, highlightText, isEditable, setIsEditable, cursor, isOnBlurTrue, handleOnChange, handleTriggerDoubleClick, truncatedTextCount, truncatedType, confirmIconTooltip, cancelIconTooltip, inlineValidationError, onChangeValidationError, }: EditLabelProps) => import("react/jsx-runtime").JSX.Element;
+export default EditLabel;

package/lib/components/EditLabel/EditLabel.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import Icon from '../Icon';
+import Select from '../Select';
+import './EditLabel.scss';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import classNames from 'classnames';
+import Tooltip from '../Tooltip';
+import Toaster from '../Toast';
+import HighlightText from '../HighlightText';
+import { isTextTruncated, truncateText, } from '../../utils/truncateText/truncateText';
+import Typography from '../Typography';
+import useClickOutside from '../../hooks/useClickOutside';
+const EditLabel = ({ id = '', onConfirm, onCancel, handleCustomError, value = '', label = 'Add Script', optionsList = [], selectedOption = { label: '', value: '' }, withDropdown, inputFieldWidth = 350, selectFieldWidth = 94, textColor = 'var(--nlp-color)', tooltip, required = false, isDisable = { confirm: false, cancel: false, textField: false }, onClick, highlightText = '', isEditable, setIsEditable, cursor = 'pointer', isOnBlurTrue = false, handleOnChange, handleTriggerDoubleClick, truncatedTextCount = 25, truncatedType = 'count', confirmIconTooltip = 'Create', cancelIconTooltip = 'Cancel', inlineValidationError = false, onChangeValidationError = false, }) => {
+    const [isEditing, setIsEditing] = useState(!value);
+    const [text, setText] = useState(value ?? '');
+    const [clickTimeout, setClickTimeout] = useState(null);
+    const [showError, setShowError] = useState('');
+    const [toasts, setToasts] = useState({ error: false });
+    const [currentSelectedOption, setCurrentSelectedOption] = useState(selectedOption);
+    const [shouldShowToast, setShouldShowToast] = useState(false);
+    const containerRef = useRef(null);
+    const cancelRef = useRef(null);
+    const confirmRef = useRef(null);
+    const isThrowingError = showError && isEditing ? true : false;
+    const inputRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const isValueFilled = !checkEmpty(text);
+    const handleTextFieldChange = (e) => {
+        const newValue = e.target.value;
+        setText(newValue);
+        if (typeof handleOnChange === 'function') {
+            handleOnChange(e);
+        }
+        if (inlineValidationError && onChangeValidationError && isThrowingError) {
+            const errorMessage = handleCustomError ? handleCustomError(newValue) : '';
+            if (errorMessage) {
+                setShowError(errorMessage);
+            }
+            else {
+                setShowError('');
+            }
+        }
+    };
+    const onDropdownChangeHandler = (option) => {
+        setCurrentSelectedOption(option);
+        inputRef.current?.focus();
+    };
+    const handleDoubleClick = () => {
+        if (isDisable.textField)
+            return;
+        if (clickTimeout) {
+            clearTimeout(clickTimeout);
+            setClickTimeout(null);
+        }
+        setIsEditing(true);
+        setIsEditable && setIsEditable(id);
+        if (handleTriggerDoubleClick) {
+            handleTriggerDoubleClick();
+        }
+    };
+    const handleSingleClick = () => {
+        if (onClick)
+            onClick();
+    };
+    const handleClick = () => {
+        if (clickTimeout) {
+            clearTimeout(clickTimeout);
+            setClickTimeout(null);
+        }
+        const timeout = window.setTimeout(() => {
+            handleSingleClick();
+            setClickTimeout(null);
+        }, 1000);
+        setClickTimeout(timeout);
+    };
+    const handleConfirm = () => {
+        if (isDisable.confirm)
+            return;
+        const errorMessage = handleCustomError ? handleCustomError(text) : '';
+        if (errorMessage) {
+            setShouldShowToast(true);
+            handleToastToggle('error');
+            setShowError(errorMessage);
+            return;
+        }
+        else {
+            setShouldShowToast(false);
+            setToasts({ error: false });
+            setIsEditing(false);
+            setShowError('');
+            if (onConfirm)
+                onConfirm(text, currentSelectedOption);
+            setIsEditable && setIsEditable(null);
+        }
+    };
+    const handleBlur = (event) => {
+        if (withDropdown ||
+            !isOnBlurTrue ||
+            containerRef.current?.contains(event.relatedTarget) ||
+            event.relatedTarget === confirmRef.current ||
+            event.relatedTarget === cancelRef.current) {
+            return;
+        }
+        setIsEditing(false);
+        setText(value);
+        setShowError('');
+        if (onCancel)
+            onCancel();
+        setIsEditable && setIsEditable(null);
+    };
+    const handleOutsideClick = () => {
+        if (!isEditing || !containerRef.current)
+            return;
+        handleCancel();
+    };
+    useClickOutside(containerRef, handleOutsideClick, [
+        confirmRef,
+        cancelRef,
+        dropdownRef,
+    ]);
+    const handleCancel = () => {
+        if (isDisable.cancel)
+            return;
+        if (required && !value) {
+            const errorMessage = handleCustomError ? handleCustomError(text) : '';
+            handleToastToggle('error');
+            setShowError(errorMessage);
+            setShouldShowToast(true);
+            setToasts({ error: true });
+            return;
+        }
+        if (onCancel) {
+            onCancel();
+        }
+        setText(value);
+        setCurrentSelectedOption(selectedOption);
+        setIsEditing(false);
+        setShowError('');
+        setIsEditable && setIsEditable(null);
+        setShouldShowToast(false);
+        setToasts({ error: false });
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' && inputRef.current === document.activeElement) {
+            handleConfirm();
+            event.stopPropagation();
+        }
+        else if (event.key === 'Escape') {
+            handleCancel();
+        }
+    };
+    const handleToastToggle = (key) => {
+        setToasts((prev) => ({ ...prev, [key]: !prev[key] }));
+    };
+    const getTooltipTitle = () => {
+        if (tooltip?.tooltipTitle) {
+            return tooltip.tooltipTitle;
+        }
+        else if (isTextTruncated(text, truncatedTextCount, truncatedType)) {
+            return text;
+        }
+        else {
+            return '';
+        }
+    };
+    const getScrollableParent = (element) => {
+        if (!element)
+            return window;
+        let parent = element.parentElement;
+        while (parent) {
+            const overflowY = window.getComputedStyle(parent).overflowY;
+            if (overflowY === 'auto' || overflowY === 'scroll') {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return window;
+    };
+    useEffect(() => {
+        if (!containerRef.current || !isEditing)
+            return;
+        const scrollableParent = getScrollableParent(containerRef.current);
+        const handleScroll = () => {
+            handleCancel();
+        };
+        scrollableParent.addEventListener('scroll', handleScroll, {
+            passive: true,
+        });
+        return () => {
+            scrollableParent.removeEventListener('scroll', handleScroll);
+        };
+    }, [isEditing]);
+    useEffect(() => {
+        if (value) {
+            setText(value);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (setIsEditable) {
+            if (isEditable) {
+                setIsEditing(true);
+            }
+            else {
+                setText(value);
+                setIsEditing(false);
+            }
+        }
+    }, [isEditable]);
+    return (_jsxs("div", { className: 'ff-add-module-container', style: {
+            '--add-module-text-color': textColor,
+            cursor: (isDisable && cursor) || 'pointer',
+        }, ref: containerRef, children: [isEditing && (setIsEditable ? isEditable : true) ? (_jsxs("div", { className: "ff-add-module-edit-container", children: [_jsxs("fieldset", { className: classNames('ff-add-module-input-with-dropdown', {
+                            'ff-add-module-input-with-dropdown--danger': isThrowingError && inlineValidationError,
+                        }), children: [_jsxs("div", { className: classNames('ff-add-module-input-container', {
+                                    'ff-add-module-input-container--float': isValueFilled,
+                                }), style: { width: inputFieldWidth }, children: [_jsxs("label", { className: "ff-add-module-label-container", htmlFor: "add-module-input", children: [required && _jsx("span", { className: "required-asterisk", children: "*" }), _jsx("span", { className: classNames('ff-add-module-label', {
+                                                    'ff-input-label--no-hover': !!text,
+                                                }), children: label })] }), _jsx("input", { ref: inputRef, id: "add-module-input", name: "add-module-input", type: "text", className: classNames('ff-add-module-input', {
+                                            'ff-add-module-input--border-right': !!withDropdown,
+                                        }), onChange: handleTextFieldChange, value: text, required: required, onBlur: handleBlur, disabled: isDisable.textField, onKeyDown: handleKeyDown, autoFocus: true, autoComplete: "off" })] }), withDropdown && (_jsx(Select, { dropDownRef: dropdownRef, optionsList: optionsList, selectedOption: currentSelectedOption, showLabel: false, showBorder: false, onChange: onDropdownChangeHandler, optionZIndex: 9999, width: selectFieldWidth, height: 24, className: "ff-add-module-dropdown", selectedOptionColor: "var(--nlp-color)", tooltip: true, showToolTip: true }))] }), _jsxs("div", { className: "ff-module-icon-container", children: [_jsx(Tooltip, { title: confirmIconTooltip, placement: 'bottom', children: _jsx(Icon, { className: "icons", name: "update_icon", onClick: () => !isDisable.confirm && handleConfirm(), color: isDisable.confirm
+                                        ? 'var(--default-color)'
+                                        : 'var(--label-edit-confirm-icon)', height: 16, width: 16, ref: confirmRef, tabIndex: -1, disabled: isDisable?.confirm }) }), _jsx(Tooltip, { title: cancelIconTooltip, placement: 'bottom', children: _jsx(Icon, { className: "icons", name: "edit_label_close", onClick: () => !isDisable.cancel && handleCancel(), color: isDisable.cancel
+                                        ? 'var(--default-color)'
+                                        : 'var(--label-edit-cancel-icon)', height: 12, width: 12, ref: cancelRef, tabIndex: -1, disabled: isDisable?.cancel }) })] })] })) : (_jsx(Tooltip, { title: isTextTruncated(text, truncatedTextCount, truncatedType)
+                    ? getTooltipTitle()
+                    : '', placement: tooltip?.tooltipPlacement ?? 'bottom', children: _jsx("span", { className: 'ff-add-module-display-text', style: { cursor: (isDisable?.textField && cursor) || 'pointer' }, onDoubleClick: handleDoubleClick, role: "button", onClick: handleClick, children: checkEmpty(highlightText) ? (truncateText(text, truncatedTextCount, truncatedType)) : (_jsx(HighlightText, { text: truncateText(text, truncatedTextCount, truncatedType), highlight: truncateText(highlightText, truncatedTextCount, truncatedType) })) }) })), inlineValidationError && showError && isEditing && (_jsx(Typography, { as: "p", fontSize: 8, className: "error-text", children: showError })), !inlineValidationError && shouldShowToast && !!showError && (_jsx(Toaster, { isOpen: toasts.error, variant: "info", toastTitle: "Info!", toastMessage: showError, onCancelClick: () => handleToastToggle('error'), zIndex: 2000000 }))] }));
+};
+export default EditLabel;
+//# sourceMappingURL=EditLabel.js.map