pixel-react 1.20.18 → 1.20.20

package/lib/components/VariableInput/VariableInput.js

@@ -1,241 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { useState, useRef, useEffect } from 'react';
-import './VariableInput.scss';
-import Typography from '../Typography';
-const VariableInput = ({ type = 'url', name = '', label, disabled = false, required = false, placeholder = '', value = '', error, className = '', onChange, onKeyDown, onBlur, onFocus, list = [], ...props }) => {
-    const [inputValue, setInputValue] = useState('');
-    const [cursorPosition, setCursorPosition] = useState(0);
-    const [isAddingText, setIsAddingText] = useState(true);
-    const [suggestions, setSuggestions] = useState([]);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const contentEditableRef = useRef(null);
-    const undoStack = useRef([]);
-    const redoStack = useRef([]);
-    useEffect(() => {
-        if (value) {
-            setInputValue(value);
-        }
-    }, [value]);
-    const parseUrl = (url) => {
-        const regex = /\$\{(\w+)\}/g; //checking the text variable or not
-        const parts = [];
-        let lastIndex = 0;
-        let match;
-        while ((match = regex.exec(url)) !== null) {
-            const [fullMatch, variable] = match;
-            const isInList = list?.includes(variable ?? '');
-            if (match.index > lastIndex) {
-                parts.push({
-                    text: url.slice(lastIndex, match.index),
-                    textType: 'normal',
-                });
-            }
-            parts.push({
-                text: fullMatch,
-                textType: isInList ? 'variable' : 'nonVariable',
-            });
-            lastIndex = match.index + fullMatch.length;
-        }
-        if (lastIndex < url.length) {
-            parts.push({ text: url.slice(lastIndex), textType: 'normal' });
-        }
-        return parts;
-    };
-    const updateContentEditable = () => {
-        const parsedParts = parseUrl(inputValue);
-        const contentEditableElement = contentEditableRef.current;
-        if (contentEditableElement) {
-            contentEditableElement.innerHTML = parsedParts
-                .map((part, index) => {
-                const varClassName = classNames({
-                    ['ff_var_red']: part.textType === 'nonVariable',
-                    ['ff_var_green']: part.textType === 'variable',
-                    ['ff_var_def_textType']: part.textType !== 'nonVariable' && part.textType !== 'variable',
-                });
-                return `<Typography key="${index}" class="${varClassName}">${part.text}</Typography>`;
-            })
-                .join('');
-            restoreCursorPosition(contentEditableElement);
-        }
-    };
-    const restoreCursorPosition = (element) => {
-        const selection = window.getSelection();
-        const range = document.createRange();
-        const textNodes = getTextNodes(element);
-        if (textNodes.length > 0) {
-            const lastNode = textNodes[textNodes.length - 1];
-            const positionAdjustment = isAddingText ? 1 : -1;
-            const newOffset = Math.max(0, Math.min(cursorPosition + positionAdjustment, lastNode.length || 0));
-            if (lastNode) {
-                range.setStart(lastNode, newOffset);
-            }
-            range.collapse(true);
-        }
-        else {
-            range.selectNodeContents(element);
-            range.collapse(false);
-        }
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-        element.focus();
-    };
-    const getTextNodes = (element) => {
-        const nodes = [];
-        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
-        let node;
-        while ((node = walker.nextNode())) {
-            nodes.push(node);
-        }
-        return nodes;
-    };
-    const handleInputChange = (e) => {
-        const text = e.currentTarget.innerText.split('\n').join('');
-        setInputValue(text);
-        undoStack.current.push(text);
-        redoStack.current = [];
-        if (required && !text.trim()) {
-            e.currentTarget.classList.add('ff_required_empty');
-        }
-        else {
-            e.currentTarget.classList.remove('ff_required_empty');
-        }
-        if (type === 'url') {
-            const urlPattern = new RegExp('^(https?://)?([\\w.-]+)\\.([a-zA-Z]{2,})(/([\\w.-]+|\\$\\{[\\w.-]+\\}))*/?$');
-            if (!urlPattern.test(text)) {
-                e.currentTarget.classList.add('ff_invalid_input');
-            }
-            else {
-                e.currentTarget.classList.remove('ff_invalid_input');
-                e.currentTarget.classList.remove('ff_required_empty');
-            }
-        }
-        else {
-            e.currentTarget.classList.add('ff_invalid_input');
-        }
-        if (onChange) {
-            onChange(text);
-        }
-        const match = /\$\{(\w*)$/.exec(text);
-        if (match) {
-            const query = match[1];
-            const filteredSuggestions = list?.filter((item) => item.startsWith(query ?? ''));
-            setSuggestions(filteredSuggestions);
-            setShowSuggestions(true);
-        }
-        else {
-            setShowSuggestions(false);
-        }
-    };
-    const handleKeyDown = (e) => {
-        const cursorPos = getCursorPosition();
-        setCursorPosition(cursorPos);
-        setIsAddingText(true);
-        const currentText = contentEditableRef.current
-            ? contentEditableRef.current.textContent || ''
-            : '';
-        if (e.key === 'Backspace' || e.key === 'Delete') {
-            setIsAddingText(false);
-            if (!currentText.trim()) {
-                e.preventDefault();
-                if (contentEditableRef.current) {
-                    contentEditableRef.current.textContent = '';
-                    contentEditableRef.current.blur();
-                }
-                return;
-            }
-        }
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            insertTextAtCursor('\n');
-        }
-        else if (e.ctrlKey && e.key === 'z') {
-            e.preventDefault();
-            undo();
-        }
-        else if (e.ctrlKey && e.key === 'y') {
-            e.preventDefault();
-            redo();
-        }
-        if (onKeyDown) {
-            onKeyDown(e);
-        }
-    };
-    const getCursorPosition = () => {
-        const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-            const range = selection.getRangeAt(0);
-            return range.startOffset;
-        }
-        return 0;
-    };
-    const undo = () => {
-        if (undoStack.current.length > 1) {
-            redoStack.current.push(undoStack.current.pop());
-            setInputValue(undoStack.current[undoStack.current.length - 1] ?? '');
-            setIsAddingText(false);
-        }
-    };
-    const redo = () => {
-        if (redoStack.current.length > 0) {
-            const textToRedo = redoStack.current.pop();
-            setInputValue(textToRedo);
-            undoStack.current.push(textToRedo);
-            setIsAddingText(true);
-        }
-    };
-    const insertTextAtCursor = (text) => {
-        const selection = window.getSelection();
-        const range = selection?.getRangeAt(0);
-        if (range) {
-            range.deleteContents();
-            const newTextNode = document.createTextNode(text);
-            range.insertNode(newTextNode);
-            const lineBreak = document.createElement('br');
-            range.insertNode(lineBreak);
-            range.setStartAfter(lineBreak);
-            range.collapse(true);
-            selection?.removeAllRanges();
-            selection?.addRange(range);
-            contentEditableRef.current?.focus();
-            setInputValue(contentEditableRef.current?.innerText || '');
-        }
-    };
-    const handleSuggestionClick = (suggestion) => {
-        const newText = inputValue.replace(/\$\{\w*$/, `\$\{${suggestion}`);
-        setInputValue(newText);
-        setShowSuggestions(false);
-    };
-    useEffect(() => {
-        updateContentEditable();
-    }, [inputValue]);
-    const inputClasses = classNames('ff_content_editable', {
-        ['ff_placeholder']: !inputValue,
-        ['ff_disabled']: disabled,
-        ['ff_required']: required,
-        ['ff_invalid_input']: error,
-    });
-    return (_jsxs("div", { className: 'ff_variable_input_container', children: [label && (_jsxs("label", { htmlFor: name, className: classNames('ff_label_container', {
-                    ['ff_labelDanger']: error,
-                }), children: [required && (_jsx(Typography, { className: 'ff_required_asterisk', children: "*" })), _jsx(Typography, { className: classNames('ff_input_label', {
-                            ['ff_no_hover']: value,
-                            ['ff_disabled_label']: disabled,
-                            ['ff_danger_label']: error,
-                        }), children: label })] })), _jsx("div", { id: name, contentEditable: !disabled, ref: contentEditableRef, onInput: handleInputChange, onKeyDown: handleKeyDown, onFocus: (e) => {
-                    e.currentTarget.style.outline = 'none';
-                    if (onFocus)
-                        onFocus(e);
-                }, onBlur: (e) => {
-                    e.currentTarget.style.outline = 'none';
-                    if (onBlur)
-                        onBlur(e);
-                    if (required && !inputValue.trim()) {
-                        e.currentTarget.classList.add('ff_required_empty');
-                    }
-                    else {
-                        e.currentTarget.classList.remove('ff_required_empty');
-                    }
-                }, className: inputClasses, suppressContentEditableWarning: true, "aria-required": required ? 'true' : 'false', "data-name": name, "data-type": type, "data-placeholder": placeholder, spellCheck: false, ...props }), showSuggestions && (_jsx("ul", { className: 'ff_suggestions', children: suggestions.map((suggestion) => (_jsx("li", { onClick: () => handleSuggestionClick(suggestion), className: 'ff_suggestion_item', children: suggestion }, suggestion))) }))] }));
-};
-export default VariableInput;
-//# sourceMappingURL=VariableInput.js.map
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"../../_virtual/index.js";import{useState as n,useRef as a,useEffect as l}from"react";import"./VariableInput.scss.js";import s from"../Typography/Typography.js";const c=({type:c="url",name:i="",label:o,disabled:u=!1,required:f=!1,placeholder:d="",value:p="",error:_,className:g="",onChange:m,onKeyDown:h,onBlur:y,onFocus:T,list:x=[],...v})=>{const[b,w]=n(""),[N,$]=n(0),[k,q]=n(!0),[C,L]=n([]),[D,R]=n(!1),j=a(null),A=a([]),E=a([]);l(()=>{p&&w(p)},[p]);const S=()=>{const e=(e=>{const t=/\$\{(\w+)\}/g,r=[];let n,a=0;for(;null!==(n=t.exec(e));){const[t,l]=n,s=x?.includes(l??"");n.index>a&&r.push({text:e.slice(a,n.index),textType:"normal"}),r.push({text:t,textType:s?"variable":"nonVariable"}),a=n.index+t.length}return a<e.length&&r.push({text:e.slice(a),textType:"normal"}),r})(b),t=j.current;t&&(t.innerHTML=e.map((e,t)=>`<Typography key="${t}" class="${r({ff_var_red:"nonVariable"===e.textType,ff_var_green:"variable"===e.textType,ff_var_def_textType:"nonVariable"!==e.textType&&"variable"!==e.textType})}">${e.text}</Typography>`).join(""),F(t))},F=e=>{const t=window.getSelection(),r=document.createRange(),n=K(e);if(n.length>0){const e=n[n.length-1],t=k?1:-1,a=Math.max(0,Math.min(N+t,e.length||0));e&&r.setStart(e,a),r.collapse(!0)}else r.selectNodeContents(e),r.collapse(!1);t?.removeAllRanges(),t?.addRange(r),e.focus()},K=e=>{const t=[],r=document.createTreeWalker(e,NodeFilter.SHOW_TEXT,null);let n;for(;n=r.nextNode();)t.push(n);return t},V=()=>{const e=window.getSelection();if(e&&e.rangeCount>0){return e.getRangeAt(0).startOffset}return 0},W=()=>{A.current.length>1&&(E.current.push(A.current.pop()),w(A.current[A.current.length-1]??""),q(!1))},B=()=>{if(E.current.length>0){const e=E.current.pop();w(e),A.current.push(e),q(!0)}},M=e=>{const t=window.getSelection(),r=t?.getRangeAt(0);if(r){r.deleteContents();const n=document.createTextNode(e);r.insertNode(n);const a=document.createElement("br");r.insertNode(a),r.setStartAfter(a),r.collapse(!0),t?.removeAllRanges(),t?.addRange(r),j.current?.focus(),w(j.current?.innerText||"")}};l(()=>{S()},[b]);const z=r("ff_content_editable",{ff_placeholder:!b,ff_disabled:u,ff_required:f,ff_invalid_input:_});return e("div",{className:"ff_variable_input_container",children:[o&&e("label",{htmlFor:i,className:r("ff_label_container",{ff_labelDanger:_}),children:[f&&t(s,{className:"ff_required_asterisk",children:"*"}),t(s,{className:r("ff_input_label",{ff_no_hover:p,ff_disabled_label:u,ff_danger_label:_}),children:o})]}),t("div",{id:i,contentEditable:!u,ref:j,onInput:e=>{const t=e.currentTarget.innerText.split("\n").join("");if(w(t),A.current.push(t),E.current=[],f&&!t.trim()?e.currentTarget.classList.add("ff_required_empty"):e.currentTarget.classList.remove("ff_required_empty"),"url"===c){new RegExp("^(https?://)?([\\w.-]+)\\.([a-zA-Z]{2,})(/([\\w.-]+|\\$\\{[\\w.-]+\\}))*/?$").test(t)?(e.currentTarget.classList.remove("ff_invalid_input"),e.currentTarget.classList.remove("ff_required_empty")):e.currentTarget.classList.add("ff_invalid_input")}else e.currentTarget.classList.add("ff_invalid_input");m&&m(t);const r=/\$\{(\w*)$/.exec(t);if(r){const e=r[1],t=x?.filter(t=>t.startsWith(e??""));L(t),R(!0)}else R(!1)},onKeyDown:e=>{const t=V();$(t),q(!0);const r=j.current&&j.current.textContent||"";if(("Backspace"===e.key||"Delete"===e.key)&&(q(!1),!r.trim()))return e.preventDefault(),void(j.current&&(j.current.textContent="",j.current.blur()));"Enter"===e.key?(e.preventDefault(),M("\n")):e.ctrlKey&&"z"===e.key?(e.preventDefault(),W()):e.ctrlKey&&"y"===e.key&&(e.preventDefault(),B()),h&&h(e)},onFocus:e=>{e.currentTarget.style.outline="none",T&&T(e)},onBlur:e=>{e.currentTarget.style.outline="none",y&&y(e),f&&!b.trim()?e.currentTarget.classList.add("ff_required_empty"):e.currentTarget.classList.remove("ff_required_empty")},className:z,suppressContentEditableWarning:!0,"aria-required":f?"true":"false","data-name":i,"data-type":c,"data-placeholder":d,spellCheck:!1,...v}),D&&t("ul",{className:"ff_suggestions",children:C.map(e=>t("li",{onClick:()=>(e=>{const t=b.replace(/\$\{\w*$/,`\${${e}`);w(t),R(!1)})(e),className:"ff_suggestion_item",children:e},e))})]})};export{c as default};

package/lib/components/VariableInput/VariableInput.scss.js

@@ -0,0 +1 @@
+import i from"../../node_modules/style-inject/dist/style-inject.es.js";i('.ff_variable_input_container .ff_label_container{align-items:center;display:flex;margin-bottom:4px}.ff_variable_input_container .ff_label_container.ff_danger_label .ff_input_label,.ff_variable_input_container .ff_label_container.ff_danger_label .ff_required_asterisk{color:var(--error)}.ff_variable_input_container .ff_required_asterisk{color:var(--input-error-text-color);font-size:1.1em;margin-right:4px}.ff_variable_input_container .ff_input_label{color:var(--text-color);font-size:14px;font-weight:500}.ff_variable_input_container .ff_input_label.ff_no_hover{color:var(--toggle-disable-icon-color)}.ff_variable_input_container .ff_input_label.ff_disabled_label{color:var(--toggle-disable-icon-color);cursor:not-allowed}.ff_variable_input_container .ff_input_label.ff_danger_label{color:var(--error)}.ff_variable_input_container .ff_content_editable{align-items:center;border:1px solid var(--input-default-border-color);border-radius:4px;display:flex;font-size:14px;line-height:20px;min-height:30px;min-width:8rem;overflow:auto;padding:8px;position:relative;text-align:left;transition:border-color .2s ease}.ff_variable_input_container .ff_content_editable .ff_var_red{color:var(--status-rejected-text-color)}.ff_variable_input_container .ff_content_editable .ff_var_def_color{color:var(--text-color)}.ff_variable_input_container .ff_content_editable .ff_var_green{color:var(--status-success-text-color)}.ff_variable_input_container .ff_content_editable:after{color:var(--input-error-text-color);content:"*";display:none;font-size:1.2em;position:absolute;right:2px;top:2px}.ff_variable_input_container .ff_content_editable.ff_required:after{display:inline}.ff_variable_input_container .ff_content_editable.ff_required_empty:focus,.ff_variable_input_container .ff_content_editable.ff_required_empty:focus-within{border-color:var(--input-error-text-color)}.ff_variable_input_container .ff_content_editable:empty:before{color:var(--ff-search-filed-placeholder-text);content:attr(data-placeholder);font-size:medium;pointer-events:none;position:absolute;user-select:none}.ff_variable_input_container .ff_content_editable.ff_disabled{background-color:var(--input-default-border-color);opacity:.5;pointer-events:none}.ff_variable_input_container .ff_content_editable.ff_invalid_input{border:1px solid var(--input-error-text-color)}.ff_variable_input_container .ff_suggestions{background-color:var(--ff-select-background-color);border:1px solid var(--input-default-border-color);border-radius:4px;list-style-type:none;margin-top:4px;max-height:150px;overflow-y:auto;padding:4px}.ff_variable_input_container .ff_suggestion_item{cursor:pointer;padding:4px}.ff_variable_input_container .ff_suggestion_item:hover{background-color:var(--ff-select-background-color)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZhcmlhYmxlSW5wdXQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxpREFFRSxrQkFBbUIsQ0FEbkIsWUFBYSxDQUViLGlCQUNGLENBSUEsd0tBQ0Usa0JBQ0YsQ0FDQSxtREFDRSxtQ0FBb0MsQ0FDcEMsZUFBZ0IsQ0FDaEIsZ0JBQ0YsQ0FDQSw2Q0FHRSx1QkFBd0IsQ0FGeEIsY0FBZSxDQUNmLGVBRUYsQ0FDQSx5REFDRSxzQ0FDRixDQUNBLCtEQUNFLHNDQUF1QyxDQUN2QyxrQkFDRixDQUNBLDZEQUNFLGtCQUNGLENBQ0Esa0RBWUUsa0JBQW1CLENBVm5CLGtEQUFtRCxDQUduRCxpQkFBa0IsQ0FNbEIsWUFBYSxDQUxiLGNBQWUsQ0FDZixnQkFBaUIsQ0FIakIsZUFBZ0IsQ0FIaEIsY0FBZSxDQVlmLGFBQWMsQ0FWZCxXQUFZLENBTVosaUJBQWtCLENBQ2xCLGVBQWdCLENBRmhCLGdDQU1GLENBQ0EsOERBQ0UsdUNBQ0YsQ0FDQSxvRUFDRSx1QkFDRixDQUNBLGdFQUNFLHNDQUNGLENBQ0Esd0RBRUUsbUNBQW9DLENBRHBDLFdBQVksQ0FNWixZQUFhLENBSmIsZUFBZ0IsQ0FDaEIsaUJBQWtCLENBRWxCLFNBQVUsQ0FEVixPQUdGLENBQ0Esb0VBQ0UsY0FDRixDQUNBLDJKQUNFLDBDQUNGLENBQ0EsK0RBRUUsNkNBQThDLENBRDlDLDhCQUErQixDQUsvQixnQkFBaUIsQ0FEakIsbUJBQW9CLENBRnBCLGlCQUFrQixDQUNsQixnQkFHRixDQUNBLDhEQUdFLGtEQUFtRCxDQURuRCxVQUFZLENBRFosbUJBR0YsQ0FDQSxtRUFDRSw4Q0FDRixDQUNBLDZDQU1FLGtEQUFtRCxDQUxuRCxrREFBbUQsQ0FHbkQsaUJBQWtCLENBQ2xCLG9CQUFxQixDQUhyQixjQUFlLENBS2YsZ0JBQWlCLENBQ2pCLGVBQWdCLENBTGhCLFdBTUYsQ0FDQSxpREFFRSxjQUFlLENBRGYsV0FFRixDQUNBLHVEQUNFLGtEQUNGIiwiZmlsZSI6IlZhcmlhYmxlSW5wdXQuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX2xhYmVsX2NvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi1ib3R0b206IDRweDtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX2xhYmVsX2NvbnRhaW5lci5mZl9kYW5nZXJfbGFiZWwgLmZmX2lucHV0X2xhYmVsIHtcbiAgY29sb3I6IHZhcigtLWVycm9yKTtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX2xhYmVsX2NvbnRhaW5lci5mZl9kYW5nZXJfbGFiZWwgLmZmX3JlcXVpcmVkX2FzdGVyaXNrIHtcbiAgY29sb3I6IHZhcigtLWVycm9yKTtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX3JlcXVpcmVkX2FzdGVyaXNrIHtcbiAgY29sb3I6IHZhcigtLWlucHV0LWVycm9yLXRleHQtY29sb3IpO1xuICBmb250LXNpemU6IDEuMWVtO1xuICBtYXJnaW4tcmlnaHQ6IDRweDtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX2lucHV0X2xhYmVsIHtcbiAgZm9udC1zaXplOiAxNHB4O1xuICBmb250LXdlaWdodDogNTAwO1xuICBjb2xvcjogdmFyKC0tdGV4dC1jb2xvcik7XG59XG4uZmZfdmFyaWFibGVfaW5wdXRfY29udGFpbmVyIC5mZl9pbnB1dF9sYWJlbC5mZl9ub19ob3ZlciB7XG4gIGNvbG9yOiB2YXIoLS10b2dnbGUtZGlzYWJsZS1pY29uLWNvbG9yKTtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX2lucHV0X2xhYmVsLmZmX2Rpc2FibGVkX2xhYmVsIHtcbiAgY29sb3I6IHZhcigtLXRvZ2dsZS1kaXNhYmxlLWljb24tY29sb3IpO1xuICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xufVxuLmZmX3ZhcmlhYmxlX2lucHV0X2NvbnRhaW5lciAuZmZfaW5wdXRfbGFiZWwuZmZfZGFuZ2VyX2xhYmVsIHtcbiAgY29sb3I6IHZhcigtLWVycm9yKTtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX2NvbnRlbnRfZWRpdGFibGUge1xuICBtaW4td2lkdGg6IDhyZW07XG4gIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWlucHV0LWRlZmF1bHQtYm9yZGVyLWNvbG9yKTtcbiAgcGFkZGluZzogOHB4O1xuICBtaW4taGVpZ2h0OiAzMHB4O1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgbGluZS1oZWlnaHQ6IDIwcHg7XG4gIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAwLjJzIGVhc2U7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgb3ZlcmZsb3c6IGF1dG87XG59XG4uZmZfdmFyaWFibGVfaW5wdXRfY29udGFpbmVyIC5mZl9jb250ZW50X2VkaXRhYmxlIC5mZl92YXJfcmVkIHtcbiAgY29sb3I6IHZhcigtLXN0YXR1cy1yZWplY3RlZC10ZXh0LWNvbG9yKTtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX2NvbnRlbnRfZWRpdGFibGUgLmZmX3Zhcl9kZWZfY29sb3Ige1xuICBjb2xvcjogdmFyKC0tdGV4dC1jb2xvcik7XG59XG4uZmZfdmFyaWFibGVfaW5wdXRfY29udGFpbmVyIC5mZl9jb250ZW50X2VkaXRhYmxlIC5mZl92YXJfZ3JlZW4ge1xuICBjb2xvcjogdmFyKC0tc3RhdHVzLXN1Y2Nlc3MtdGV4dC1jb2xvcik7XG59XG4uZmZfdmFyaWFibGVfaW5wdXRfY29udGFpbmVyIC5mZl9jb250ZW50X2VkaXRhYmxlOjphZnRlciB7XG4gIGNvbnRlbnQ6IFwiKlwiO1xuICBjb2xvcjogdmFyKC0taW5wdXQtZXJyb3ItdGV4dC1jb2xvcik7XG4gIGZvbnQtc2l6ZTogMS4yZW07XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAycHg7XG4gIHJpZ2h0OiAycHg7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG4uZmZfdmFyaWFibGVfaW5wdXRfY29udGFpbmVyIC5mZl9jb250ZW50X2VkaXRhYmxlLmZmX3JlcXVpcmVkOjphZnRlciB7XG4gIGRpc3BsYXk6IGlubGluZTtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX2NvbnRlbnRfZWRpdGFibGUuZmZfcmVxdWlyZWRfZW1wdHk6Zm9jdXMtd2l0aGluLCAuZmZfdmFyaWFibGVfaW5wdXRfY29udGFpbmVyIC5mZl9jb250ZW50X2VkaXRhYmxlLmZmX3JlcXVpcmVkX2VtcHR5OmZvY3VzIHtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1pbnB1dC1lcnJvci10ZXh0LWNvbG9yKTtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX2NvbnRlbnRfZWRpdGFibGU6ZW1wdHk6OmJlZm9yZSB7XG4gIGNvbnRlbnQ6IGF0dHIoZGF0YS1wbGFjZWhvbGRlcik7XG4gIGNvbG9yOiB2YXIoLS1mZi1zZWFyY2gtZmlsZWQtcGxhY2Vob2xkZXItdGV4dCk7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBmb250LXNpemU6IG1lZGl1bTtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX2NvbnRlbnRfZWRpdGFibGUuZmZfZGlzYWJsZWQge1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgb3BhY2l0eTogMC41O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1pbnB1dC1kZWZhdWx0LWJvcmRlci1jb2xvcik7XG59XG4uZmZfdmFyaWFibGVfaW5wdXRfY29udGFpbmVyIC5mZl9jb250ZW50X2VkaXRhYmxlLmZmX2ludmFsaWRfaW5wdXQge1xuICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1pbnB1dC1lcnJvci10ZXh0LWNvbG9yKTtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX3N1Z2dlc3Rpb25zIHtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0taW5wdXQtZGVmYXVsdC1ib3JkZXItY29sb3IpO1xuICBtYXJnaW4tdG9wOiA0cHg7XG4gIHBhZGRpbmc6IDRweDtcbiAgYm9yZGVyLXJhZGl1czogNHB4O1xuICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWZmLXNlbGVjdC1iYWNrZ3JvdW5kLWNvbG9yKTtcbiAgbWF4LWhlaWdodDogMTUwcHg7XG4gIG92ZXJmbG93LXk6IGF1dG87XG59XG4uZmZfdmFyaWFibGVfaW5wdXRfY29udGFpbmVyIC5mZl9zdWdnZXN0aW9uX2l0ZW0ge1xuICBwYWRkaW5nOiA0cHg7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi5mZl92YXJpYWJsZV9pbnB1dF9jb250YWluZXIgLmZmX3N1Z2dlc3Rpb25faXRlbTpob3ZlciB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWZmLXNlbGVjdC1iYWNrZ3JvdW5kLWNvbG9yKTtcbn0iXX0= */');

package/lib/components/ZoomControl/ZoomControl.js

@@ -1,22 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './ZoomControl.scss';
-import Icon from '../Icon';
-import Typography from '../Typography';
-const ZoomControl = ({ value, min = 10, max = 200, step = 10, onChange, className = '', }) => {
-    const handleChange = (e) => {
-        const newValue = Number(e.target.value);
-        const clamped = Math.max(min, Math.min(max, newValue));
-        onChange(clamped);
-    };
-    const zoomIn = () => {
-        const newValue = Math.min(value + step, max);
-        onChange(newValue);
-    };
-    const zoomOut = () => {
-        const newValue = Math.max(value - step, min);
-        onChange(newValue);
-    };
-    return (_jsxs("div", { className: `ff-zoom ${className}`, children: [_jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, className: "ff-zoom__slider" }), _jsxs("div", { className: "ff-zoom__controls", children: [_jsx(Icon, { onClick: zoomOut, disabled: value <= min, name: "window_minimize", className: "ff-zoom-icon", color: "var(--text-color)", width: 10, height: 24 }), _jsx(Typography, { fontSize: 12, fontWeight: "regular", children: "Zoom" }), _jsx(Icon, { onClick: zoomIn, disabled: value >= max, name: "add_file", className: "ff-zoom-icon", color: "var(--text-color)", width: 12, height: 24 })] })] }));
-};
-export default ZoomControl;
-//# sourceMappingURL=ZoomControl.js.map
+import{jsxs as o,jsx as a}from"react/jsx-runtime";import"./ZoomControl.scss.js";import e from"../Icon/Icon.js";import t from"../Typography/Typography.js";const m=({value:m,min:i=10,max:n=200,step:s=10,onChange:r,className:c=""})=>o("div",{className:`ff-zoom ${c}`,children:[a("input",{type:"range",min:i,max:n,step:s,value:m,onChange:o=>{const a=Number(o.target.value),e=Math.max(i,Math.min(n,a));r(e)},className:"ff-zoom__slider"}),o("div",{className:"ff-zoom__controls",children:[a(e,{onClick:()=>{const o=Math.max(m-s,i);r(o)},disabled:m<=i,name:"window_minimize",className:"ff-zoom-icon",color:"var(--text-color)",width:10,height:24}),a(t,{fontSize:12,fontWeight:"regular",children:"Zoom"}),a(e,{onClick:()=>{const o=Math.min(m+s,n);r(o)},disabled:m>=n,name:"add_file",className:"ff-zoom-icon",color:"var(--text-color)",width:12,height:24})]})]});export{m as default};

package/lib/components/ZoomControl/ZoomControl.scss.js

@@ -0,0 +1 @@
+import i from"../../node_modules/style-inject/dist/style-inject.es.js";i(".ff-zoom{border-radius:8px;width:140px}.ff-zoom__slider{appearance:none;background:var(--drawer-footer-border);border-radius:20px;height:8px;outline:none;transition:all .3s ease;width:100%}.ff-zoom__slider::-webkit-slider-thumb{appearance:none;background:var(--brand-color);border-radius:50%;cursor:pointer;height:16px;margin-top:-2px;transition:transform .25s ease;width:16px}.ff-zoom__slider::-webkit-slider-thumb:hover{transform:scale(1.05)}.ff-zoom__slider::-moz-range-thumb{background:var(--brand-color);border:none;border-radius:50%;cursor:pointer;height:56px;width:56px}.ff-zoom__controls{align-items:center;display:flex;justify-content:space-between}.ff-zoom__controls button:disabled{cursor:not-allowed;opacity:.3}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlpvb21Db250cm9sLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsU0FFRSxpQkFBa0IsQ0FEbEIsV0FFRixDQUVBLGlCQUVFLGVBQWdCLENBR2hCLHNDQUF1QyxDQUR2QyxrQkFBbUIsQ0FEbkIsVUFBVyxDQUdYLFlBQWEsQ0FDYix1QkFBeUIsQ0FOekIsVUFPRixDQUVBLHVDQUNFLGVBQWdCLENBSWhCLDZCQUE4QixDQUQ5QixpQkFBa0IsQ0FFbEIsY0FBZSxDQUhmLFdBQVksQ0FJWixlQUFnQixDQUNoQiw4QkFBZ0MsQ0FOaEMsVUFPRixDQUVBLDZDQUNFLHFCQUNGLENBR0EsbUNBSUUsNkJBQThCLENBQzlCLFdBQVksQ0FGWixpQkFBa0IsQ0FHbEIsY0FBZSxDQUpmLFdBQVksQ0FEWixVQU1GLENBRUEsbUJBRUUsa0JBQW1CLENBRG5CLFlBQWEsQ0FFYiw2QkFDRixDQUVBLG1DQUVFLGtCQUFtQixDQURuQixVQUVGIiwiZmlsZSI6Ilpvb21Db250cm9sLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZmYtem9vbSB7XG4gIHdpZHRoOiAxNDBweDtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xufVxuXG4uZmYtem9vbV9fc2xpZGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGhlaWdodDogOHB4O1xuICBib3JkZXItcmFkaXVzOiAyMHB4O1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1kcmF3ZXItZm9vdGVyLWJvcmRlcik7XG4gIG91dGxpbmU6IG5vbmU7XG4gIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG59XG5cbi5mZi16b29tX19zbGlkZXI6Oi13ZWJraXQtc2xpZGVyLXRodW1iIHtcbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgd2lkdGg6IDE2cHg7XG4gIGhlaWdodDogMTZweDtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1icmFuZC1jb2xvcik7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgbWFyZ2luLXRvcDogLTJweDtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDAuMjVzIGVhc2U7XG59XG5cbi5mZi16b29tX19zbGlkZXI6Oi13ZWJraXQtc2xpZGVyLXRodW1iOmhvdmVyIHtcbiAgdHJhbnNmb3JtOiBzY2FsZSgxLjA1KTtcbn1cblxuLyogRmlyZWZveCAqL1xuLmZmLXpvb21fX3NsaWRlcjo6LW1vei1yYW5nZS10aHVtYiB7XG4gIHdpZHRoOiA1NnB4O1xuICBoZWlnaHQ6IDU2cHg7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgYmFja2dyb3VuZDogdmFyKC0tYnJhbmQtY29sb3IpO1xuICBib3JkZXI6IG5vbmU7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLmZmLXpvb21fX2NvbnRyb2xzIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xufVxuXG4uZmYtem9vbV9fY29udHJvbHMgYnV0dG9uOmRpc2FibGVkIHtcbiAgb3BhY2l0eTogMC4zO1xuICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xufSJdfQ== */");

package/lib/components/variableSuggestionInputDropDown/OptionsDropdown.js

@@ -1,23 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import cx from 'classnames';
-import './VariableSuggestionInputDropDown.scss';
-import Typography from '../Typography';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import Tooltip from '../Tooltip';
-import { isTextTruncated, truncateText, } from '../../utils/truncateText/truncateText';
-const OptionsDropdown = ({ onSelectVariable, dropdownPosition, filteredOptions = [], position = 'relative', width = '100%', zIndex, truncateTextValue = 34, }) => {
-    return (_jsx("div", { className: cx(`ff-variable-dropdown-container ${position}`), style: dropdownPosition
-            ? {
-                top: dropdownPosition.top + 30,
-                left: dropdownPosition.left - 30,
-                width,
-                zIndex,
-            }
-            : { width, zIndex }, children: !checkEmpty(filteredOptions) ? (filteredOptions?.map((option) => {
-            return (_jsx("div", { className: "ff-variable-option", onMouseDown: () => onSelectVariable(option), children: _jsx(Tooltip, { title: isTextTruncated(option?.name, truncateTextValue, 'pixel')
-                        ? option?.name
-                        : '', children: _jsx(Typography, { children: truncateText(option?.name, truncateTextValue, 'pixel') }) }) }, option?.id));
-        })) : (_jsx("div", { className: "ff-variable-option no-data", children: _jsx(Typography, { as: "div", children: "No Option", fontSize: 14 }) })) }));
-};
-export default OptionsDropdown;
-//# sourceMappingURL=OptionsDropdown.js.map
+import{jsx as t}from"react/jsx-runtime";import e from"../../_virtual/index.js";import"./VariableSuggestionInputDropDown.scss.js";import i from"../Typography/Typography.js";import{checkEmpty as o}from"../../utils/checkEmpty/checkEmpty.js";import r from"../Tooltip/Tooltip.js";import{truncateText as n,isTextTruncated as a}from"../../utils/truncateText/truncateText.js";const l=({onSelectVariable:l,dropdownPosition:p,filteredOptions:s=[],position:d="relative",width:m="100%",zIndex:c,truncateTextValue:f=34})=>t("div",{className:e(`ff-variable-dropdown-container ${d}`),style:p?{top:p.top+30,left:p.left-30,width:m,zIndex:c}:{width:m,zIndex:c},children:o(s)?t("div",{className:"ff-variable-option no-data",children:t(i,{as:"div",children:"No Option",fontSize:14})}):s?.map(e=>t("div",{className:"ff-variable-option",onMouseDown:()=>l(e),children:t(r,{title:a(e?.name,f,"pixel")?e?.name:"",children:t(i,{children:n(e?.name,f,"pixel")})})},e?.id))});export{l as default};

package/lib/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.js

@@ -1,198 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, forwardRef, useImperativeHandle, useRef, } from 'react';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import VariableDropdown from '../Editor/VariableDropdown';
-import Icon from '../Icon';
-import Input from '../Input';
-import './VariableSuggestionInputDropDown.scss';
-import OptionsDropdown from './OptionsDropdown';
-import Tooltip from '../Tooltip';
-import Typography from '../Typography';
-import classNames from 'classnames';
-const VariableSuggestionInputDropDown = forwardRef(({ label = '', hashInputValue = '', setHashInputValue, variableList = [], placeholder = 'Enter text', onChange, onPaste, onCreateVariableClick, handleClearInput, value = '', dropdownWidth = '100%', dropdownHeight = '160px', isHash = false, isOnlyHash = false, dataFiles = [], showAddVariableIcon = true, helperText = '', error, autoComplete = 'off', required = false, zIndex = 9999, truncateTextValue = 34, formProps = {}, getSelectedVariable = () => { }, symbol = '$', type = 'text', clearIcon = true, inputTitle = '', onBlur, helperTextWidth, iconProps = {
-    isShowIcon: false,
-    iconName: '',
-    iconToolTipTitle: '',
-    isIconDisable: false,
-    iconColor: '',
-    onIconClick: () => { },
-}, ...props }, ref) => {
-    const [showDropdown, setShowDropdown] = useState(false);
-    const [isDropdownClicked, setIsDropdownClicked] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-    const [cursorPosition, setCursorPosition] = useState(null);
-    const [findCursor, setFindCursor] = useState(0);
-    const [showCreateVariableIcon, setShowCreateVariableIcon] = useState(false);
-    const [filteredOptions, setFilteredOptions] = useState([]);
-    const inputRef = useRef(null);
-    const containerRef = useRef(null);
-    const [dropdownWidthPx, setDropdownWidthPx] = useState('auto');
-    const showIcon = iconProps?.isShowIcon;
-    useEffect(() => {
-        const inputContainer = containerRef.current?.querySelector('.ff-input-container');
-        if (!inputContainer)
-            return;
-        const resizeObserver = new ResizeObserver((entries) => {
-            for (let entry of entries) {
-                const width = `${entry.contentRect.width}px`;
-                setDropdownWidthPx(width);
-            }
-        });
-        resizeObserver.observe(inputContainer);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
-    useImperativeHandle(ref, () => inputRef.current);
-    useEffect(() => {
-        if (cursorPosition !== null && inputRef.current) {
-            inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
-            inputRef.current.focus();
-        }
-    }, [cursorPosition]);
-    useEffect(() => {
-        if (isHash) {
-            setShowDropdown(value.startsWith('#'));
-        }
-        const selectedHashValue = dataFiles?.find((file) => file.name === value);
-        const selectedDollarValue = variableList?.find((file) => file?.name === value);
-        if (value.startsWith('#') && isHash) {
-            const searchQuery = value.slice(1).toLowerCase();
-            const filtered = dataFiles.filter((file) => file.name.toLowerCase().includes(searchQuery));
-            setFilteredOptions(filtered);
-            setShowDropdown(true);
-        }
-        const isHashSelected = selectedHashValue !== null && value.startsWith('#');
-        const isDollarSelected = selectedDollarValue !== null && value.startsWith('$');
-        const additionalText = value.length > (selectedDollarValue?.name.length || 0);
-        const hasTextWithoutVariable = (value.length > 0 && !isDollarSelected) || value.startsWith('#');
-        if (isOnlyHash) {
-            setShowCreateVariableIcon(false);
-        }
-        else {
-            if (isDollarSelected ||
-                isHashSelected ||
-                value.includes('$') ||
-                value.includes('#')) {
-                setShowCreateVariableIcon(false);
-                if (hasTextWithoutVariable) {
-                    setShowCreateVariableIcon(true);
-                }
-            }
-            else if (additionalText && !value.includes('$')) {
-                setShowCreateVariableIcon(true);
-            }
-        }
-    }, [value]);
-    const updateCursorPosition = () => {
-        if (inputRef.current) {
-            setFindCursor(inputRef.current.selectionStart || 0);
-        }
-    };
-    const handleClick = updateCursorPosition;
-    const handleKeyUp = updateCursorPosition;
-    useEffect(() => {
-        if (inputRef.current) {
-            setFindCursor(inputRef.current.selectionStart || 0);
-        }
-    }, [value]);
-    const handleDropdownClick = (item) => {
-        if (inputRef.current) {
-            const { selectionStart, selectionEnd } = inputRef.current;
-            const dollarSyntax = `${item.name}`;
-            let newValue;
-            if (isHash && value[0] === '#') {
-                newValue = item.name + value.slice(selectionEnd || 1);
-            }
-            else {
-                newValue = item.name;
-            }
-            if (onChange) {
-                const event = {
-                    target: {
-                        value: newValue,
-                    },
-                };
-                onChange(event, item);
-                getSelectedVariable(item.name);
-            }
-            inputRef.current.value = newValue;
-            setHashInputValue?.(item);
-            setCursorPosition((selectionStart || 0) + dollarSyntax.length);
-            setShowDropdown(false);
-            setIsDropdownClicked(true);
-        }
-    };
-    function getDropdownState(input, cursorPosit, variableList) {
-        let showDropdown = false;
-        let searchString = '';
-        const checkifCursorPositionhasCloseCurly = value[cursorPosit - 1] === '}';
-        if (cursorPosit < 0 || cursorPosit > input.length) {
-            return { showDropdown, searchString };
-        }
-        const lastDollarBeforeCursor = input.lastIndexOf(symbol, cursorPosit - 1);
-        const nextDollarAfterCursor = input.indexOf(symbol, cursorPosit);
-        if (lastDollarBeforeCursor !== -1) {
-            if (isOnlyHash && input[lastDollarBeforeCursor] === '$') {
-                showDropdown = false;
-            }
-            else if (cursorPosit === lastDollarBeforeCursor + 1) {
-                showDropdown = true;
-                searchString = '';
-            }
-            else {
-                searchString = input.slice(lastDollarBeforeCursor + 1, nextDollarAfterCursor === -1 ? undefined : nextDollarAfterCursor);
-                if (cursorPosit > lastDollarBeforeCursor + 1) {
-                    searchString = input.slice(lastDollarBeforeCursor + 1, cursorPosit);
-                }
-                showDropdown = true;
-            }
-            if (isDropdownClicked && checkifCursorPositionhasCloseCurly) {
-                showDropdown = false;
-            }
-            if (/[{}]/.test(searchString) || cursorPosit === 0) {
-                showDropdown = false;
-                searchString = '';
-            }
-            if (searchString) {
-                const isInVariableList = variableList.some((file) => file.name.toLowerCase().includes(searchString.toLowerCase()));
-                if (!isInVariableList) {
-                    variableList = [];
-                }
-            }
-        }
-        return { showDropdown, searchString };
-    }
-    const result = getDropdownState(value, findCursor, variableList);
-    const handleBlur = (e) => {
-        {
-            if (!e.relatedTarget ||
-                !e.relatedTarget.closest('.dropdown-container')) {
-                setIsFocused(false);
-            }
-        }
-    };
-    const variableOptionList = () => {
-        return variableList?.filter((file) => file?.name?.toLowerCase()?.includes(result?.searchString?.toLowerCase()));
-    };
-    return (_jsxs("div", { className: "ff-add-variable-container", children: [_jsxs("div", { className: "ff-add-variable-input", ref: containerRef, children: [_jsx(Tooltip, { title: inputTitle, style: { width: '100%' }, children: _jsx(Input, { ...props, name: "add_variable", ref: inputRef, type: type, className: classNames('ff-variable-input-container', {
-                                'ff-variable-input-container--show-icon': showIcon,
-                            }), value: value, onChange: onChange, onPaste: () => {
-                                setShowCreateVariableIcon(true);
-                            }, variant: "primary", label: label, placeholder: placeholder, onClick: handleClick, onKeyUp: handleKeyUp, onFocus: () => setIsFocused(true), onBlur: (e) => {
-                                handleBlur(e);
-                                onBlur?.(e);
-                            }, autoComplete: autoComplete, helperText: helperText, error: error, required: required, helperTextWidth: helperTextWidth, ...formProps }) }), !checkEmpty(value) &&
-                        showCreateVariableIcon &&
-                        showAddVariableIcon && (_jsx("div", { className: "ff-create-variable-container", onClick: onCreateVariableClick, children: _jsx(Typography, { fontWeight: "regular", fontSize: "10px", color: 'var(--brand-color)', cursor: "pointer", children: "Create Variable" }) })), !checkEmpty(value) && !isOnlyHash && (_jsx("div", { className: classNames('ff-cancel-icon-container', {
-                            'ff-cancel-icon-container--show-icon': showIcon,
-                        }), children: clearIcon && (_jsx(Tooltip, { title: "Cancel", style: { zIndex: 99999 }, children: _jsx(Icon, { onClick: handleClearInput, name: "close", height: 16, width: 16, hoverEffect: true }) })) })), showIcon && (_jsx("div", { className: "ff-info-icon-container", 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) => {
-                                    if (iconProps?.onIconClick) {
-                                        iconProps?.onIconClick(e);
-                                    }
-                                }, disabled: iconProps?.isIconDisable, cursorType: "pointer" }) }) }))] }), result?.showDropdown && isFocused && (_jsx(VariableDropdown, { position: "absolute", zIndex: zIndex, truncateTextValue: truncateTextValue, width: dropdownWidthPx, height: checkEmpty(variableOptionList()) ? 'auto' : dropdownHeight, optionsList: variableOptionList(), onSelectVariable: handleDropdownClick })), showDropdown && isHash && isFocused && (_jsx(OptionsDropdown, { position: "relative", zIndex: zIndex, truncateTextValue: truncateTextValue, width: dropdownWidthPx, filteredOptions: filteredOptions, onSelectVariable: handleDropdownClick }))] }));
-});
-export default VariableSuggestionInputDropDown;
-//# sourceMappingURL=VariableSuggestionInputDropDown.js.map
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as n,useState as o,useRef as r,useEffect as i,useImperativeHandle as a}from"react";import{checkEmpty as l}from"../../utils/checkEmpty/checkEmpty.js";import c from"../Editor/VariableDropdown.js";import s from"../Icon/Icon.js";import d from"../Input/Input.js";import"./VariableSuggestionInputDropDown.scss.js";import u from"./OptionsDropdown.js";import h from"../Tooltip/Tooltip.js";import p from"../Typography/Typography.js";import f from"../../_virtual/index.js";const m=n(({label:n="",hashInputValue:m="",setHashInputValue:w,variableList:b=[],placeholder:v="Enter text",onChange:g,onPaste:C,onCreateVariableClick:I,handleClearInput:x,value:T="",dropdownWidth:y="100%",dropdownHeight:S="160px",isHash:V=!1,isOnlyHash:j=!1,dataFiles:k=[],showAddVariableIcon:D=!0,helperText:W="",error:L,autoComplete:N="off",required:E=!1,zIndex:$=9999,truncateTextValue:z=34,formProps:O={},getSelectedVariable:H=()=>{},symbol:P="$",type:q="text",clearIcon:R=!0,inputTitle:B="",onBlur:F,helperTextWidth:_,iconProps:A={isShowIcon:!1,iconName:"",iconToolTipTitle:"",isIconDisable:!1,iconColor:"",onIconClick:()=>{}},...K},U)=>{const[G,J]=o(!1),[M,Q]=o(!1),[X,Y]=o(!1),[Z,ee]=o(null),[te,ne]=o(0),[oe,re]=o(!1),[ie,ae]=o([]),le=r(null),ce=r(null),[se,de]=o("auto"),ue=A?.isShowIcon;i(()=>{const e=ce.current?.querySelector(".ff-input-container");if(!e)return;const t=new ResizeObserver(e=>{for(let t of e){const e=`${t.contentRect.width}px`;de(e)}});return t.observe(e),()=>{t.disconnect()}},[]),a(U,()=>le.current),i(()=>{null!==Z&&le.current&&(le.current.setSelectionRange(Z,Z),le.current.focus())},[Z]),i(()=>{V&&J(T.startsWith("#"));const e=k?.find(e=>e.name===T),t=b?.find(e=>e?.name===T);if(T.startsWith("#")&&V){const e=T.slice(1).toLowerCase(),t=k.filter(t=>t.name.toLowerCase().includes(e));ae(t),J(!0)}const n=null!==e&&T.startsWith("#"),o=null!==t&&T.startsWith("$"),r=T.length>(t?.name.length||0),i=T.length>0&&!o||T.startsWith("#");j?re(!1):o||n||T.includes("$")||T.includes("#")?(re(!1),i&&re(!0)):r&&!T.includes("$")&&re(!0)},[T]);const he=()=>{le.current&&ne(le.current.selectionStart||0)},pe=he,fe=he;i(()=>{le.current&&ne(le.current.selectionStart||0)},[T]);const me=e=>{if(le.current){const{selectionStart:t,selectionEnd:n}=le.current,o=`${e.name}`;let r;if(r=V&&"#"===T[0]?e.name+T.slice(n||1):e.name,g){g({target:{value:r}},e),H(e.name)}le.current.value=r,w?.(e),ee((t||0)+o.length),J(!1),Q(!0)}};const we=function(e,t,n){let o=!1,r="";const i="}"===T[t-1];if(t<0||t>e.length)return{showDropdown:o,searchString:r};const a=e.lastIndexOf(P,t-1),l=e.indexOf(P,t);if(-1!==a&&(j&&"$"===e[a]?o=!1:t===a+1?(o=!0,r=""):(r=e.slice(a+1,-1===l?void 0:l),t>a+1&&(r=e.slice(a+1,t)),o=!0),M&&i&&(o=!1),(/[{}]/.test(r)||0===t)&&(o=!1,r=""),r)){n.some(e=>e.name.toLowerCase().includes(r.toLowerCase()))||(n=[])}return{showDropdown:o,searchString:r}}(T,te,b),be=()=>b?.filter(e=>e?.name?.toLowerCase()?.includes(we?.searchString?.toLowerCase()));return e("div",{className:"ff-add-variable-container",children:[e("div",{className:"ff-add-variable-input",ref:ce,children:[t(h,{title:B,style:{width:"100%"},children:t(d,{...K,name:"add_variable",ref:le,type:q,className:f("ff-variable-input-container",{"ff-variable-input-container--show-icon":ue}),value:T,onChange:g,onPaste:()=>{re(!0)},variant:"primary",label:n,placeholder:v,onClick:pe,onKeyUp:fe,onFocus:()=>Y(!0),onBlur:e=>{(e=>{e.relatedTarget&&e.relatedTarget.closest(".dropdown-container")||Y(!1)})(e),F?.(e)},autoComplete:N,helperText:W,error:L,required:E,helperTextWidth:_,...O})}),!l(T)&&oe&&D&&t("div",{className:"ff-create-variable-container",onClick:I,children:t(p,{fontWeight:"regular",fontSize:"10px",color:"var(--brand-color)",cursor:"pointer",children:"Create Variable"})}),!l(T)&&!j&&t("div",{className:f("ff-cancel-icon-container",{"ff-cancel-icon-container--show-icon":ue}),children:R&&t(h,{title:"Cancel",style:{zIndex:99999},children:t(s,{onClick:x,name:"close",height:16,width:16,hoverEffect:!0})})}),ue&&t("div",{className:"ff-info-icon-container",children:t(h,{title:ue&&!A?.isIconDisable?A?.iconToolTipTitle:"",children:t(s,{name:A?.iconName||"",hoverEffect:!1,height:16,width:16,color:A?.iconColor||"var(--text-area-default-color)",onClick:e=>{A?.onIconClick&&A?.onIconClick(e)},disabled:A?.isIconDisable,cursorType:"pointer"})})})]}),we?.showDropdown&&X&&t(c,{position:"absolute",zIndex:$,truncateTextValue:z,width:se,height:l(be())?"auto":S,optionsList:be(),onSelectVariable:me}),G&&V&&X&&t(u,{position:"relative",zIndex:$,truncateTextValue:z,width:se,filteredOptions:ie,onSelectVariable:me})]})});export{m as default};

package/lib/components/variableSuggestionInputDropDown/VariableSuggestionInputDropDown.scss.js

@@ -0,0 +1 @@
+import i from"../../node_modules/style-inject/dist/style-inject.es.js";i(".fontXs{font-size:10px}.fontSm,.fontXs{font-family:Poppins}.fontSm{font-size:12px}.fontMd{font-size:14px}.fontLg,.fontMd{font-family:Poppins}.fontLg{font-size:16px}.fontXL{font-size:18px}.font2Xl,.fontXL{font-family:Poppins}.font2Xl{font-size:24px}.font-size-8{font-family:Poppins;font-size:8px}.ff-add-variable-container .ff-create-variable-container,.font-size-10{font-family:Poppins;font-size:10px}.font-size-20{font-family:Poppins;font-size:20px}.font-size-32{font-family:Poppins;font-size:32px}.font-size-80{font-family:Poppins;font-size:80px}.ff-add-variable-container{display:flex;flex-direction:column;gap:2px;position:relative;width:100%}.ff-add-variable-container .ff-add-variable-input{align-items:flex-start;display:flex;position:relative;width:100%}.ff-add-variable-container .ff-add-variable-input .ff-variable-input-container{padding:6px 32px 6px 6px;white-space:nowrap}.ff-add-variable-container .ff-add-variable-input .ff-variable-input-container--show-icon{padding:6px 60px 6px 6px!important}.ff-add-variable-container .ff-add-variable-input .ff-cancel-icon-container,.ff-add-variable-container .ff-add-variable-input .ff-info-icon-container{position:absolute;right:5px;top:4px}.ff-add-variable-container .ff-add-variable-input .ff-cancel-icon-container--show-icon{right:30px!important}.ff-add-variable-container .variable-helper-inline{align-items:center;color:var(--brand-color);display:flex;font-size:10px;justify-content:flex-end;margin-top:2px}.ff-add-variable-container .ff-create-variable-container{align-self:flex-end;color:var(--brand-color);display:flex;justify-content:end;line-height:normal;position:absolute;right:0;text-align:left;top:32px}.ff-variable-dropdown-container{background-color:var(--variable-dropdown-bg);border:1px solid var(--border-color);border-radius:3px;max-height:150px;overflow:hidden;overflow-y:auto;padding:4px;position:absolute;scrollbar-width:thin;top:34px;width:auto}.ff-variable-dropdown-container .ff-variable-option{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:10px}.ff-variable-dropdown-container .ff-variable-option:hover{background-color:var(--hover-color)}.ff-variable-dropdown-container .ff-variable-option.no-data{cursor:no-drop}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZhcmlhYmxlU3VnZ2VzdGlvbklucHV0RHJvcERvd24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxRQUVFLGNBQ0YsQ0FFQSxnQkFKRSxtQkFPRixDQUhBLFFBRUUsY0FDRixDQUVBLFFBRUUsY0FDRixDQUVBLGdCQUpFLG1CQU9GLENBSEEsUUFFRSxjQUNGLENBRUEsUUFFRSxjQUNGLENBRUEsaUJBSkUsbUJBT0YsQ0FIQSxTQUVFLGNBQ0YsQ0FFQSxhQUNFLG1CQUFzQixDQUN0QixhQUNGLENBRUEsdUVBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSxjQUNFLG1CQUFzQixDQUN0QixjQUNGLENBRUEsY0FDRSxtQkFBc0IsQ0FDdEIsY0FDRixDQUVBLGNBQ0UsbUJBQXNCLENBQ3RCLGNBQ0YsQ0FFQSwyQkFFRSxZQUFhLENBQ2IscUJBQXNCLENBQ3RCLE9BQVEsQ0FDUixpQkFBa0IsQ0FKbEIsVUFLRixDQUNBLGtEQUdFLHNCQUF1QixDQUR2QixZQUFhLENBRWIsaUJBQWtCLENBSGxCLFVBSUYsQ0FDQSwrRUFDRSx3QkFBeUIsQ0FDekIsa0JBQ0YsQ0FDQSwwRkFDRSxrQ0FDRixDQU9BLHNKQUlFLGlCQUFrQixDQUZsQixTQUFVLENBQ1YsT0FFRixDQUNBLHVGQUNFLG9CQUNGLENBQ0EsbURBR0Usa0JBQW1CLENBRW5CLHdCQUF5QixDQUp6QixZQUFhLENBR2IsY0FBZSxDQUZmLHdCQUF5QixDQUl6QixjQUNGLENBQ0EseURBSUUsbUJBQW9CLENBRHBCLHdCQUF5QixDQUZ6QixZQUFhLENBQ2IsbUJBQW9CLENBR3BCLGtCQUFtQixDQUVuQixpQkFBa0IsQ0FFbEIsT0FBUSxDQUhSLGVBQWdCLENBRWhCLFFBRUYsQ0FFQSxnQ0FJRSw0Q0FBNkMsQ0FDN0Msb0NBQXFDLENBQ3JDLGlCQUFrQixDQUtsQixnQkFBaUIsQ0FIakIsZUFBZ0IsQ0FDaEIsZUFBZ0IsQ0FQaEIsV0FBWSxDQUtaLGlCQUFrQixDQU5sQixvQkFBcUIsQ0FTckIsUUFBUyxDQVBULFVBU0YsQ0FDQSxvREFFRSxrQkFBbUIsQ0FHbkIsY0FBZSxDQUpmLFlBQWEsQ0FFYiw2QkFBOEIsQ0FDOUIsWUFFRixDQUNBLDBEQUNFLG1DQUNGLENBQ0EsNERBQ0UsY0FDRiIsImZpbGUiOiJWYXJpYWJsZVN1Z2dlc3Rpb25JbnB1dERyb3BEb3duLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZm9udFhzIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDEwcHg7XG59XG5cbi5mb250U20ge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTJweDtcbn1cblxuLmZvbnRNZCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAxNHB4O1xufVxuXG4uZm9udExnIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDE2cHg7XG59XG5cbi5mb250WEwge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMThweDtcbn1cblxuLmZvbnQyWGwge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMjRweDtcbn1cblxuLmZvbnQtc2l6ZS04IHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDhweDtcbn1cblxuLmZvbnQtc2l6ZS0xMCwgLmZmLWFkZC12YXJpYWJsZS1jb250YWluZXIgLmZmLWNyZWF0ZS12YXJpYWJsZS1jb250YWluZXIge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogMTBweDtcbn1cblxuLmZvbnQtc2l6ZS0yMCB7XG4gIGZvbnQtZmFtaWx5OiBcIlBvcHBpbnNcIjtcbiAgZm9udC1zaXplOiAyMHB4O1xufVxuXG4uZm9udC1zaXplLTMyIHtcbiAgZm9udC1mYW1pbHk6IFwiUG9wcGluc1wiO1xuICBmb250LXNpemU6IDMycHg7XG59XG5cbi5mb250LXNpemUtODAge1xuICBmb250LWZhbWlseTogXCJQb3BwaW5zXCI7XG4gIGZvbnQtc2l6ZTogODBweDtcbn1cblxuLmZmLWFkZC12YXJpYWJsZS1jb250YWluZXIge1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgZ2FwOiAycHg7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbi5mZi1hZGQtdmFyaWFibGUtY29udGFpbmVyIC5mZi1hZGQtdmFyaWFibGUtaW5wdXQge1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbi5mZi1hZGQtdmFyaWFibGUtY29udGFpbmVyIC5mZi1hZGQtdmFyaWFibGUtaW5wdXQgLmZmLXZhcmlhYmxlLWlucHV0LWNvbnRhaW5lciB7XG4gIHBhZGRpbmc6IDZweCAzMnB4IDZweCA2cHg7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG59XG4uZmYtYWRkLXZhcmlhYmxlLWNvbnRhaW5lciAuZmYtYWRkLXZhcmlhYmxlLWlucHV0IC5mZi12YXJpYWJsZS1pbnB1dC1jb250YWluZXItLXNob3ctaWNvbiB7XG4gIHBhZGRpbmc6IDZweCA2MHB4IDZweCA2cHggIWltcG9ydGFudDtcbn1cbi5mZi1hZGQtdmFyaWFibGUtY29udGFpbmVyIC5mZi1hZGQtdmFyaWFibGUtaW5wdXQgLmZmLWluZm8taWNvbi1jb250YWluZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiA1cHg7XG4gIHRvcDogNHB4O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG59XG4uZmYtYWRkLXZhcmlhYmxlLWNvbnRhaW5lciAuZmYtYWRkLXZhcmlhYmxlLWlucHV0IC5mZi1jYW5jZWwtaWNvbi1jb250YWluZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiA1cHg7XG4gIHRvcDogNHB4O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG59XG4uZmYtYWRkLXZhcmlhYmxlLWNvbnRhaW5lciAuZmYtYWRkLXZhcmlhYmxlLWlucHV0IC5mZi1jYW5jZWwtaWNvbi1jb250YWluZXItLXNob3ctaWNvbiB7XG4gIHJpZ2h0OiAzMHB4ICFpbXBvcnRhbnQ7XG59XG4uZmYtYWRkLXZhcmlhYmxlLWNvbnRhaW5lciAudmFyaWFibGUtaGVscGVyLWlubGluZSB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGZvbnQtc2l6ZTogMTBweDtcbiAgY29sb3I6IHZhcigtLWJyYW5kLWNvbG9yKTtcbiAgbWFyZ2luLXRvcDogMnB4O1xufVxuLmZmLWFkZC12YXJpYWJsZS1jb250YWluZXIgLmZmLWNyZWF0ZS12YXJpYWJsZS1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGVuZDtcbiAgY29sb3I6IHZhcigtLWJyYW5kLWNvbG9yKTtcbiAgYWxpZ24tc2VsZjogZmxleC1lbmQ7XG4gIGxpbmUtaGVpZ2h0OiBub3JtYWw7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAzMnB4O1xuICByaWdodDogMDtcbn1cblxuLmZmLXZhcmlhYmxlLWRyb3Bkb3duLWNvbnRhaW5lciB7XG4gIHNjcm9sbGJhci13aWR0aDogdGhpbjtcbiAgcGFkZGluZzogNHB4O1xuICB3aWR0aDogYXV0bztcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdmFyaWFibGUtZHJvcGRvd24tYmcpO1xuICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1ib3JkZXItY29sb3IpO1xuICBib3JkZXItcmFkaXVzOiAzcHg7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgb3ZlcmZsb3cteTogYXV0bztcbiAgdG9wOiAzNHB4O1xuICBtYXgtaGVpZ2h0OiAxNTBweDtcbn1cbi5mZi12YXJpYWJsZS1kcm9wZG93bi1jb250YWluZXIgLmZmLXZhcmlhYmxlLW9wdGlvbiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgcGFkZGluZzogMTBweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuLmZmLXZhcmlhYmxlLWRyb3Bkb3duLWNvbnRhaW5lciAuZmYtdmFyaWFibGUtb3B0aW9uOmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0taG92ZXItY29sb3IpO1xufVxuLmZmLXZhcmlhYmxlLWRyb3Bkb3duLWNvbnRhaW5lciAuZmYtdmFyaWFibGUtb3B0aW9uLm5vLWRhdGEge1xuICBjdXJzb3I6IG5vLWRyb3A7XG59Il19 */");

package/lib/hooks/keyboardevents/useEscKeyEvent.js

@@ -1,18 +1 @@
-import { useEffect } from 'react';
-function useEscapeKey(key) {
-    return (callBack) => {
-        const handleKeyDown = (event) => {
-            if (event?.key === key) {
-                callBack();
-            }
-        };
-        useEffect(() => {
-            document.addEventListener('keydown', handleKeyDown);
-            return () => {
-                document.removeEventListener('keydown', handleKeyDown);
-            };
-        }, [key, callBack]);
-    };
-}
-export default useEscapeKey;
-//# sourceMappingURL=useEscKeyEvent.js.map
+import{useEffect as e}from"react";function t(t){return n=>{const o=e=>{e?.key===t&&n()};e(()=>(document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o)}),[t,n])}}export{t as default};

package/lib/hooks/useClickOutside.js

@@ -1,19 +1 @@
-import { useEffect } from 'react';
-const useClickOutside = (ref, callback, ignoreRefs = []) => {
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (ref.current &&
-                !ref.current.contains(event.target) &&
-                !ignoreRefs.some((ignoreRef) => ignoreRef?.current &&
-                    ignoreRef.current.contains(event.target))) {
-                callback();
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [ref, callback, ignoreRefs]);
-};
-export default useClickOutside;
-//# sourceMappingURL=useClickOutside.js.map
+import{useEffect as e}from"react";const t=(t,n,r=[])=>{e(()=>{const e=e=>{!t.current||t.current.contains(e.target)||r.some(t=>t?.current&&t.current.contains(e.target))||n()};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[t,n,r])};export{t as default};