pixel-react 1.20.21 → 1.20.22

package/lib/components/PromptContainer/PromptContainer.js

@@ -1 +1,76 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useState as r,useRef as i,useEffect as l}from"react";import"./PromptContainer.scss.js";import a from"../Icon/Icon.js";import n from"../Tooltip/Tooltip.js";import c from"../Typography/Typography.js";const s=({id:s=0,serialNumber:d,activeId:m,setActiveId:p,children:f,onIconClick:h,numberChildren:b,onContainerClick:u,onNextClick:g,onPreviousClick:v,disabled:C,isEditAccess:N,versionsLength:x,count:k,hiddenActions:y=[]})=>{const[T,j]=r(!1),[A,E]=r(!1),I=i(null),P=Array.isArray(y)?y:y?[y]:[],w=(e,t)=>{e.stopPropagation(),t()};l(()=>{I.current&&(()=>{if(I.current){const e=getComputedStyle(I.current),t=1.2*parseFloat(e.fontSize)*6;I.current.scrollHeight>t&&E(!0)}})()},[]);const $=e=>{e.stopPropagation(),j(!T)};return e("div",{className:`ff-prompt-container-Block ${m===s?"active":"inactive"} `,onClick:()=>{p(s),u()},children:[t(c,{fontSize:8,className:"ff-prompt-number-bg-color",as:"span",children:`Test cases ${d}`}),e(o,{children:[e("div",{className:"ff-prompt-content "+(T?"expanded":""),ref:I,children:[f,T&&e(o,{children:[t("span",{role:"button","aria-label":"toggleExpand",onClick:$,className:"read-less-btn",children:t(c,{color:"var(--brand-color)",fontWeight:"semi-bold",className:"read-more-btn-text",children:"Read Less"})})," "]})]}),A&&!T&&t("div",{role:"button","aria-label":"toggleExpand",onClick:$,className:"read-more-btn",children:t(c,{color:"var(--brand-color)",fontWeight:"semi-bold",className:"read-more-btn-text",children:"Read More"})})]}),e("div",{className:"ff-prompt-icons",children:[t("div",{className:"ff-prompt-icons-leftside",children:[{action:"delete",title:"Delete",color:"var(--ff-delete-button-attachment)"},{action:"edit",title:"Edit",color:"var(--label-edit-text-label-color)"},{action:"regenerate",title:"Regenerate",color:"var(--label-edit-text-label-color)"}].filter(e=>!P.includes(e.action)).map((e,o)=>{const r=N&&"delete"===e?.action||"regenerate"===e?.action&&(x??0)>=3||C;return t(n,{title:e.title,placement:"bottom",children:t(a,{disabled:r,name:e.action,color:e.color,hoverEffect:!0,onClick:t=>((e,t)=>{e.stopPropagation(),h(t)})(t,e.action)})},`${e?.title}-${o}`)})}),e("div",{className:"ff-prompt-icons-rightside",children:[t(a,{disabled:1===k,className:"ff-prompt-icons-style",name:"arrow_left_accordian",color:"var(--table-column-text-color)",width:18,height:18,onClick:e=>w(e,v),cursorType:"pointer"}),b,t(a,{disabled:k===x,className:"ff-prompt-icons-style",name:"arrow_right_icon",color:"var(--table-column-text-color)",width:18,height:18,onClick:e=>w(e,g),cursorType:"pointer"})]})]})]})};export{s as default};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import './PromptContainer.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+const PromptContainer = ({ id = 0, serialNumber, activeId, setActiveId, children, onIconClick, numberChildren, onContainerClick, onNextClick, onPreviousClick, disabled, isEditAccess, versionsLength, count, hiddenActions = [], }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [showReadMore, setShowReadMore] = useState(false);
+    const contentRef = useRef(null);
+    const hiddenListIcons = Array.isArray(hiddenActions)
+        ? hiddenActions
+        : hiddenActions
+            ? [hiddenActions]
+            : [];
+    const actions = [
+        {
+            action: 'delete',
+            title: 'Delete',
+            color: 'var(--ff-delete-button-attachment)',
+        },
+        {
+            action: 'edit',
+            title: 'Edit',
+            color: 'var(--label-edit-text-label-color)',
+        },
+        {
+            action: 'regenerate',
+            title: 'Regenerate',
+            color: 'var(--label-edit-text-label-color)',
+        },
+    ];
+    const handleContainerClick = () => {
+        setActiveId(id);
+        onContainerClick();
+    };
+    const handleNavigationClick = (e, callback) => {
+        e.stopPropagation();
+        callback();
+    };
+    const handleIconClick = (e, action) => {
+        e.stopPropagation();
+        onIconClick(action);
+    };
+    const handleReadMoreClick = () => {
+        if (contentRef.current) {
+            const computedStyle = getComputedStyle(contentRef.current);
+            let lineHeight = parseFloat(computedStyle.fontSize) * 1.2;
+            const maxHeight = lineHeight * 6;
+            if (contentRef.current.scrollHeight > maxHeight) {
+                setShowReadMore(true);
+            }
+        }
+    };
+    useEffect(() => {
+        if (contentRef.current) {
+            handleReadMoreClick();
+        }
+    }, []);
+    const toggleExpand = (e) => {
+        e.stopPropagation();
+        setIsExpanded(!isExpanded);
+    };
+    return (_jsxs("div", { className: `ff-prompt-container-Block ${activeId === id ? 'active' : 'inactive'} `, onClick: handleContainerClick, children: [_jsx(Typography, { fontSize: 8, className: "ff-prompt-number-bg-color", as: "span", children: `Test cases ${serialNumber}` }), _jsxs(_Fragment, { children: [_jsxs("div", { className: `ff-prompt-content ${isExpanded ? 'expanded' : ''}`, ref: contentRef, children: [children, isExpanded && (_jsxs(_Fragment, { children: [_jsx("span", { role: "button", "aria-label": "toggleExpand", onClick: toggleExpand, className: "read-less-btn", children: _jsx(Typography, { color: "var(--brand-color)", fontWeight: "semi-bold", className: "read-more-btn-text", children: "Read Less" }) }), ' '] }))] }), showReadMore && !isExpanded && (_jsx("div", { role: "button", "aria-label": "toggleExpand", onClick: toggleExpand, className: "read-more-btn", children: _jsx(Typography, { color: "var(--brand-color)", fontWeight: "semi-bold", className: "read-more-btn-text", children: "Read More" }) }))] }), _jsxs("div", { className: "ff-prompt-icons", children: [_jsx("div", { className: "ff-prompt-icons-leftside", children: actions
+                            .filter((act) => !hiddenListIcons.includes(act.action))
+                            .map((act, index) => {
+                            const isDelete = act?.action === 'delete';
+                            const isRegenerate = act?.action === 'regenerate';
+                            const shouldDisableIcon = (isEditAccess && isDelete) ||
+                                (isRegenerate && (versionsLength ?? 0) >= 3) ||
+                                disabled;
+                            return (_jsx(Tooltip, { title: act.title, placement: "bottom", children: _jsx(Icon, { disabled: shouldDisableIcon, name: act.action, color: act.color, hoverEffect: true, onClick: (e) => handleIconClick(e, act.action) }) }, `${act?.title}-${index}`));
+                        }) }), _jsxs("div", { className: "ff-prompt-icons-rightside", children: [_jsx(Icon, { disabled: count === 1, className: "ff-prompt-icons-style", name: "arrow_left_accordian", color: "var(--table-column-text-color)", width: 18, height: 18, onClick: (e) => handleNavigationClick(e, onPreviousClick), cursorType: 'pointer' }), numberChildren, _jsx(Icon, { disabled: count === versionsLength, className: "ff-prompt-icons-style", name: "arrow_right_icon", color: "var(--table-column-text-color)", width: 18, height: 18, onClick: (e) => handleNavigationClick(e, onNextClick), cursorType: 'pointer' })] })] })] }));
+};
+export default PromptContainer;
+//# sourceMappingURL=PromptContainer.js.map

package/lib/components/RadioButton/RadioButton.js

@@ -1 +1,9 @@
-import{jsxs as o,jsx as i}from"react/jsx-runtime";import"./RadioButton.scss.js";import a from"../Tooltip/Tooltip.js";import e from"../Typography/Typography.js";const l=({label:l,name:r,checked:t,onChange:n,value:s,disabled:d=!1,showTooltip:c=!1,tooltipChildren:p="Custom JSX",tooltipTitle:m="Custom JSX",tooltipPosition:f="right",onBlur:h=()=>{},alignIconCenter:u=!0,radioMarginTop:g})=>o("div",{className:"ff-radio-wrapper",onClick:o=>o.stopPropagation(),children:[o("label",{className:`ff-radio ${u?"ff-radio-align-icon":""} ${d?"ff-radio--disabled":""}`,children:[o("span",{style:g?{marginTop:g}:{},children:[i("input",{disabled:d,type:"radio",name:r,value:s,checked:t,onChange:n,onBlur:h,className:"ff-radio-input"}),i("div",{className:"ff-radio-custom",children:i("div",{className:"ff-radio-custom-fill"})})]}),i(e,{color:"var(--text-color)",children:l})]}),c&&i(a,{title:m,placement:f,children:p})]});export{l as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './RadioButton.scss';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+const RadioButton = ({ label, name, checked, onChange, value, disabled = false, showTooltip = false, tooltipChildren = 'Custom JSX', tooltipTitle = 'Custom JSX', tooltipPosition = 'right', onBlur = () => { }, alignIconCenter = true, radioMarginTop, }) => {
+    return (_jsxs("div", { className: "ff-radio-wrapper", onClick: (event) => event.stopPropagation(), children: [_jsxs("label", { className: `ff-radio ${alignIconCenter ? 'ff-radio-align-icon' : ''} ${disabled ? 'ff-radio--disabled' : ''}`, children: [_jsxs("span", { style: radioMarginTop ? { marginTop: radioMarginTop } : {}, children: [_jsx("input", { disabled: disabled, type: "radio", name: name, value: value, checked: checked, onChange: onChange, onBlur: onBlur, className: "ff-radio-input" }), _jsx("div", { className: "ff-radio-custom", children: _jsx("div", { className: "ff-radio-custom-fill" }) })] }), _jsx(Typography, { color: "var(--text-color)", children: label })] }), showTooltip && (_jsx(Tooltip, { title: tooltipTitle, placement: tooltipPosition, children: tooltipChildren }))] }));
+};
+export default RadioButton;
+//# sourceMappingURL=RadioButton.js.map

package/lib/components/RadioGroup/RadioGroup.js

@@ -1 +1,10 @@
-import{jsxs as o,Fragment as e,jsx as i}from"react/jsx-runtime";import"./RadioGroup.scss.js";import r from"../../_virtual/index.js";import a from"../Typography/Typography.js";import l from"../RadioButton/RadioButton.js";const t=({options:t,name:s,selectedValue:n,onChange:d,label:p,isLabel:m=!1,isAsteriskRequired:c=!1,className:h,classNameForLabel:u,isError:f=!1,errorMessage:g="",onBlur:b=()=>{},disabled:v,radioIconCenter:C=!0,radioMarginTop:T})=>o(e,{children:[o("div",{className:r("ff-radio-group",h),onBlur:b,children:[m&&o(a,{fontWeight:"semi-bold",className:r(u),children:[" ",c&&o(a,{className:r("ff-required-asterisk"),children:["*"," "]}),p," "]}),t.map(o=>i(l,{label:o.label,showTooltip:o?.showTooltip,tooltipChildren:o?.tooltipChildren,tooltipTitle:o?.tooltipTitle,tooltipPosition:o?.tooltipPosition,name:s,value:o.value,checked:n?.toLowerCase()===o.value?.toLowerCase(),onChange:()=>d?.(o),disabled:v||o.disabled,alignIconCenter:C,radioMarginTop:T},o.value))]}),f&&i(a,{as:"div",lineHeight:"15px",fontSize:10,color:"var(--error_light)",className:"ff-radio-error-msg",children:g})]});export{t as default};
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import './RadioGroup.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import RadioButton from '../RadioButton';
+const RadioGroup = ({ options, name, selectedValue, onChange, label, isLabel = false, isAsteriskRequired = false, className, classNameForLabel, isError = false, errorMessage = '', onBlur = () => { }, disabled, radioIconCenter = true, radioMarginTop, }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames('ff-radio-group', className), onBlur: onBlur, children: [isLabel && (_jsxs(Typography, { fontWeight: "semi-bold", className: classNames(classNameForLabel), children: [' ', isAsteriskRequired && (_jsxs(Typography, { className: classNames('ff-required-asterisk'), children: ["*", ' '] })), label, ' '] })), options.map((option) => (_jsx(RadioButton, { label: option.label, showTooltip: option?.showTooltip, tooltipChildren: option?.tooltipChildren, tooltipTitle: option?.tooltipTitle, tooltipPosition: option?.tooltipPosition, name: name, value: option.value, checked: selectedValue?.toLowerCase() === option.value?.toLowerCase(), onChange: () => onChange?.(option), disabled: disabled || option.disabled, alignIconCenter: radioIconCenter, radioMarginTop: radioMarginTop }, option.value)))] }), isError && (_jsx(Typography, { as: "div", lineHeight: "15px", fontSize: 10, color: "var(--error_light)", className: "ff-radio-error-msg", children: errorMessage }))] }));
+};
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.js.map

package/lib/components/ScriptGenerationLoader/ScriptGenerationLoader.js

@@ -1 +1,46 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useEffect as i}from"react";import o from"../Typography/Typography.js";import"./ScriptGenerationLoader.scss.js";const n=({actions:n=[{text:"Analyzing your application flow...",color:"var(--brand-color)"},{text:"AI agents are on action...",color:"var(--ff-electric-indigo)"},{text:"Thinking like a QA expert… just a few more seconds...",color:"var(--ff-vivid-orange)"},{text:"Hold on, test cases are on the way!",color:"var(--ff-dodger-blue)"}],width:a,height:c,path:s,DynamicHeight:l=500})=>{const[f,h]=r(0),[d,g]=r("");i(()=>{if(f>=n?.length)return;const e=n[f]?.text||" ";let t=0;const r=setInterval(()=>{t<=e?.length?(g(e?.slice(0,t)),t++):(clearInterval(r),setTimeout(()=>{h(e=>e<n?.length-1?e+1:e)},1e3))},80);return()=>clearInterval(r)},[f,n]);const m=n[f]?.color;return e("div",{className:"loader-container",style:{width:`${a}%`,height:`${c}%`},children:[t("div",{className:"ff-moving-sections-container",children:[1,2,3,4]?.map(e=>t("div",{className:`ff-moving-section${e}`,style:{height:""+(l+"px")}},e))}),e("div",{className:"ff-gif-container",children:[t("div",{className:"ff-typing-wrapper",children:t(o,{className:"ff-typing-text",fontSize:16,fontWeight:"medium",style:{color:m},children:d})}),t("img",{height:100,width:100,alt:"generation",src:s})]})]})};export{n as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Typography from '../Typography';
+import './ScriptGenerationLoader.scss';
+const ScriptGenerationLoader = ({ actions = [
+    {
+        text: 'Analyzing your application flow...',
+        color: 'var(--brand-color)',
+    },
+    { text: 'AI agents are on action...', color: 'var(--ff-electric-indigo)' },
+    {
+        text: 'Thinking like a QA expert… just a few more seconds...',
+        color: 'var(--ff-vivid-orange)',
+    },
+    {
+        text: 'Hold on, test cases are on the way!',
+        color: 'var(--ff-dodger-blue)',
+    },
+], width, height, path, DynamicHeight = 500, }) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [visibleChars, setVisibleChars] = useState('');
+    const numberOfDivs = [1, 2, 3, 4];
+    useEffect(() => {
+        if (currentIndex >= actions?.length)
+            return;
+        const message = actions[currentIndex]?.text || ' ';
+        let charIndex = 0;
+        const typingInterval = setInterval(() => {
+            if (charIndex <= message?.length) {
+                setVisibleChars(message?.slice(0, charIndex));
+                charIndex++;
+            }
+            else {
+                clearInterval(typingInterval);
+                setTimeout(() => {
+                    setCurrentIndex((prev) => prev < actions?.length - 1 ? prev + 1 : prev);
+                }, 1000);
+            }
+        }, 80);
+        return () => clearInterval(typingInterval);
+    }, [currentIndex, actions]);
+    const currentColor = actions[currentIndex]?.color;
+    return (_jsxs("div", { className: "loader-container", style: { width: `${width}%`, height: `${height}%` }, children: [_jsx("div", { className: "ff-moving-sections-container", children: numberOfDivs?.map((order) => (_jsx("div", { className: `ff-moving-section${order}`, style: { height: `${DynamicHeight + 'px'}` } }, order))) }), _jsxs("div", { className: "ff-gif-container", children: [_jsx("div", { className: "ff-typing-wrapper", children: _jsx(Typography, { className: "ff-typing-text", fontSize: 16, fontWeight: "medium", style: { color: currentColor }, children: visibleChars }) }), _jsx("img", { height: 100, width: 100, alt: "generation", src: path })] })] }));
+};
+export default ScriptGenerationLoader;
+//# sourceMappingURL=ScriptGenerationLoader.js.map

package/lib/components/ScriptSwitchButton/ScriptSwitchButton.js

@@ -1 +1,16 @@
-import{jsxs as t,jsx as a}from"react/jsx-runtime";import"./ScriptSwitchButton.scss.js";import o from"../Icon/Icon.js";import i from"../Tooltip/Tooltip.js";const e=({selected:e="text",handleClick:n,tabList:c})=>{const r=c?.includes("Automation"),s=c?.includes("Manual");return t("div",{className:"ff-script-switch-container",children:[a(i,{title:r?"Automation":"Add Automation",zIndex:1e3,children:a("div",{className:"ff-script-switch-button "+("Automation"===e?"active":""),onClick:()=>n(r?"Automation":"Add Automation"),children:a(o,{name:r?"automation_testcase":"add_testcase",color:"Automation"===e?"var(--primary-button-text-color)":"var(--description-text)"})})}),a(i,{title:s?"Manual":"Add Manual",zIndex:1e3,children:a("div",{className:"ff-script-switch-button "+("Manual"===e?"active":""),onClick:()=>n(s?"Manual":"Add Manual"),children:a(o,{name:s?"manual_testcase":"add_testcase",color:"Manual"===e?"var(--primary-button-text-color)":"var(--description-text)"})})})]})};export{e as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ScriptSwitchButton.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+const ScriptSwitchButton = ({ selected = 'text', handleClick, tabList, //  ['Automation' , 'Manual']
+ }) => {
+    const isAutomation = tabList?.includes('Automation');
+    const isManual = tabList?.includes('Manual');
+    return (_jsxs("div", { className: "ff-script-switch-container", children: [_jsx(Tooltip, { title: isAutomation ? 'Automation' : 'Add Automation', zIndex: 1000, children: _jsx("div", { className: `ff-script-switch-button ${selected === 'Automation' ? 'active' : ''}`, onClick: () => handleClick(isAutomation ? 'Automation' : 'Add Automation'), children: _jsx(Icon, { name: isAutomation ? 'automation_testcase' : 'add_testcase', color: selected === 'Automation'
+                            ? 'var(--primary-button-text-color)'
+                            : 'var(--description-text)' }) }) }), _jsx(Tooltip, { title: isManual ? 'Manual' : 'Add Manual', zIndex: 1000, children: _jsx("div", { className: `ff-script-switch-button ${selected === 'Manual' ? 'active' : ''}`, onClick: () => handleClick(isManual ? 'Manual' : 'Add Manual'), children: _jsx(Icon, { name: isManual ? 'manual_testcase' : 'add_testcase', color: selected === 'Manual'
+                            ? 'var(--primary-button-text-color)'
+                            : 'var(--description-text)' }) }) })] }));
+};
+export default ScriptSwitchButton;
+//# sourceMappingURL=ScriptSwitchButton.js.map

package/lib/components/Search/Search.js

@@ -1 +1,148 @@
-import{jsx as e,jsxs as r,Fragment as a}from"react/jsx-runtime";import{useState as i,useRef as t,useEffect as c}from"react";import o from"../../_virtual/index.js";import"./Search.scss.js";import n from"../Icon/Icon.js";import{checkEmpty as s}from"../../utils/checkEmpty/checkEmpty.js";import l from"../Typography/Typography.js";import d from"../Tooltip/Tooltip.js";import{Toastify as h,toast as m}from"../Toastify/Toastify.js";import{useKeyboardActions as f}from"../../utils/keyBoardActionUtil/UseKeyboardActions.js";const p=({placeholder:p="Search",onSearch:u,disabled:v=!1,width:y=150,value:C="",isExpand:x=!1,onClose:E,onExpand:k,showClose:w=!0,helperText:g="Minimum 3 characters required",showToaster:b=!0,minLength:N=3,isAISearch:j=!1,isAISearchClicked:S=!1,handleActiveAiSearch:T,isClear:_=!1,handleIsClear:A,style:I={},handleFocus:B,handleBlur:L})=>{const[F,U]=i(C),$=t(null),[q,z]=i(S);c(()=>{x&&$.current&&w&&$.current.focus(),U("")},[x]);c(()=>{U(C),!S||C?z(!1):S&&z(!0)},[C,S]);const D=e=>{"Enter"===e?F.trim().length<N&&b?m.info(g):s(F.trim())||u(F.trim()):"Escape"===e&&K("Close")};f([{key:"Enter",action:()=>D("Enter")},{key:"Escape",action:()=>D("Escape")}],$);const K=e=>{U(""),"Clear"===e&&_?(S&&z(!0),A?.()):u(""),"Close"===e&&E?.(),"Clear"===e&&x&&$.current&&w&&$.current.focus()};return c(()=>{const e=e=>{"Enter"===e.key&&x&&$.current===document.activeElement&&(F.trim().length<N&&b?m.info(g):s(F.trim())||u(F.trim()))};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[x,E,F,N,b,g,u]),e("div",{className:o("ff-gradient-border-container",{"ai-search-active":S&&x}),children:r("div",{style:I,className:o("ff-search-container",{expanded:x,disabled:v}),children:[e("div",{className:o("ff-search-icon",{expanded:x}),onClick:()=>{v||x||k?.(!0)},children:e(d,{title:v?"Search Disabled":"Search",disabled:x,children:e(n,{name:"search",height:x?14:16,width:x?14:16,disabled:v,hoverEffect:!x})})}),e("div",{className:o("ff-vertical-line",{expanded:x})}),r("div",{className:o("ff-search-input-block",{expanded:x}),style:{width:x?`${y}px`:"0px"},children:[" ",e("input",{className:o("ff-search-input",{"ai-search-placeholder-animation":q,expanded:x}),name:"input",style:{width:x?y<=135?y-8+"px":`${y}px`:"0px"},placeholder:p,type:"text",value:F,disabled:v,ref:$,autoComplete:"off",onChange:e=>{var r;r=e.target.value,U(r),w?""===r&&u(""):u(r),z(!1)},onFocus:B,onBlur:L})]}),e(h,{}),x&&r(a,{children:[e("div",{className:o("ff-search-clear-button",{showClose:!w}),onClick:()=>K("Clear"),style:F?{cursor:"pointer"}:{},children:""!==F&&e(l,{children:"Clear",fontSize:8,color:"var(--ff-search-filed-clear-text)"})}),e(d,{title:"Close",children:e("div",{className:o("ff-search-close-icon",{showClose:!w}),children:e(n,{name:"close",hoverEffect:!0,onClick:()=>{K("Close")},height:12,width:12})})}),j&&r(a,{children:[e("div",{className:o("ff-vertical-line",{expanded:x})}),e(n,{className:o("ff-ai-search-icon"),height:16,width:16,color:S?"":"var(--ai-search-icon-color)",name:S?"ai_search_active_icon":"ai_search_default_icon",onClick:T})]})]})]})})};export{p as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import './Search.scss';
+import Icon from '../Icon';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Typography from '../Typography';
+import Tooltip from '../Tooltip';
+import Toastify, { toast } from '../Toastify/Toastify';
+import { useKeyboardActions } from './../../utils/keyBoardActionUtil/UseKeyboardActions';
+const Search = ({ placeholder = 'Search', onSearch, disabled = false, width = 150, value = '', isExpand = false, onClose, onExpand, showClose = true, helperText = 'Minimum 3 characters required', showToaster = true, minLength = 3, isAISearch = false, isAISearchClicked = false, handleActiveAiSearch, isClear = false, handleIsClear, style = {}, handleFocus, handleBlur, }) => {
+    const [searchValue, setSearchValue] = useState(value);
+    const inputRef = useRef(null);
+    const [isAnimationActive, setIsAnimationActive] = useState(isAISearchClicked);
+    useEffect(() => {
+        if (isExpand && inputRef.current && showClose) {
+            inputRef.current.focus();
+        }
+        setSearchValue('');
+    }, [isExpand]);
+    const handleInputInteraction = () => {
+        setIsAnimationActive(false);
+    };
+    useEffect(() => {
+        setSearchValue(value);
+        if (!isAISearchClicked || value) {
+            setIsAnimationActive(false);
+        }
+        else if (isAISearchClicked) {
+            setIsAnimationActive(true);
+        }
+    }, [value, isAISearchClicked]);
+    const handleSearchData = (key) => {
+        if (key === 'Enter') {
+            if (searchValue.trim().length < minLength && showToaster) {
+                toast.info(helperText);
+            }
+            else if (!checkEmpty(searchValue.trim())) {
+                onSearch(searchValue.trim());
+            }
+        }
+        else if (key === 'Escape') {
+            handleSearchClearAndClose('Close');
+        }
+    };
+    useKeyboardActions([
+        {
+            key: 'Enter',
+            action: () => handleSearchData('Enter'),
+        },
+        {
+            key: 'Escape',
+            action: () => handleSearchData('Escape'),
+        },
+    ], inputRef);
+    const handleSearchClearAndClose = (label) => {
+        setSearchValue('');
+        if (label === 'Clear' && isClear) {
+            if (isAISearchClicked) {
+                setIsAnimationActive(true);
+            }
+            handleIsClear?.();
+        }
+        else {
+            onSearch('');
+        }
+        if (label === 'Close') {
+            onClose?.();
+        }
+        if (label === 'Clear' && isExpand && inputRef.current && showClose) {
+            inputRef.current.focus();
+        }
+    };
+    const handleIconClick = () => {
+        if (!disabled && !isExpand) {
+            onExpand?.(true);
+        }
+    };
+    const handleChange = (data) => {
+        setSearchValue(data);
+        if (showClose) {
+            if (data === '') {
+                onSearch('');
+            }
+        }
+        else {
+            onSearch(data);
+        }
+    };
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Enter' &&
+                isExpand &&
+                inputRef.current === document.activeElement) {
+                if (searchValue.trim().length < minLength && showToaster) {
+                    toast.info(helperText);
+                }
+                else if (!checkEmpty(searchValue.trim())) {
+                    onSearch(searchValue.trim());
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [
+        isExpand,
+        onClose,
+        searchValue,
+        minLength,
+        showToaster,
+        helperText,
+        onSearch,
+    ]);
+    return (_jsx("div", { className: classNames('ff-gradient-border-container', {
+            'ai-search-active': isAISearchClicked && isExpand,
+        }), children: _jsxs("div", { style: style, className: classNames('ff-search-container', {
+                expanded: isExpand,
+                disabled: disabled,
+            }), children: [_jsx("div", { className: classNames('ff-search-icon', { expanded: isExpand }), onClick: handleIconClick, children: _jsx(Tooltip, { title: disabled ? 'Search Disabled' : 'Search', disabled: isExpand, children: _jsx(Icon, { name: "search", height: isExpand ? 14 : 16, width: isExpand ? 14 : 16, disabled: disabled, hoverEffect: !isExpand }) }) }), _jsx("div", { className: classNames('ff-vertical-line', {
+                        expanded: isExpand,
+                    }) }), _jsxs("div", { className: classNames('ff-search-input-block', {
+                        expanded: isExpand,
+                    }), style: { width: isExpand ? `${width}px` : '0px' }, children: [' ', _jsx("input", { className: classNames('ff-search-input', {
+                                'ai-search-placeholder-animation': isAnimationActive,
+                                expanded: isExpand,
+                            }), name: "input", style: {
+                                width: isExpand
+                                    ? width <= 135
+                                        ? `${width - 8}px`
+                                        : `${width}px`
+                                    : '0px',
+                            }, placeholder: placeholder, type: "text", value: searchValue, disabled: disabled, ref: inputRef, autoComplete: "off", onChange: (e) => {
+                                handleChange(e.target.value);
+                                handleInputInteraction();
+                            }, onFocus: handleFocus, onBlur: handleBlur })] }), _jsx(Toastify, {}), isExpand && (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames('ff-search-clear-button', {
+                                showClose: !showClose,
+                            }), onClick: () => handleSearchClearAndClose('Clear'), style: searchValue ? { cursor: 'pointer' } : {}, children: searchValue !== '' && (_jsx(Typography, { children: 'Clear', fontSize: 8, color: 'var(--ff-search-filed-clear-text)' })) }), _jsx(Tooltip, { title: "Close", children: _jsx("div", { className: classNames('ff-search-close-icon', {
+                                    showClose: !showClose,
+                                }), children: _jsx(Icon, { name: "close", hoverEffect: true, onClick: () => {
+                                        handleSearchClearAndClose('Close');
+                                    }, height: 12, width: 12 }) }) }), isAISearch && (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames('ff-vertical-line', {
+                                        expanded: isExpand,
+                                    }) }), _jsx(Icon, { className: classNames('ff-ai-search-icon'), height: 16, width: 16, color: isAISearchClicked ? '' : 'var(--ai-search-icon-color)', name: isAISearchClicked
+                                        ? 'ai_search_active_icon'
+                                        : 'ai_search_default_icon', onClick: handleActiveAiSearch })] }))] }))] }) }));
+};
+export default Search;
+//# sourceMappingURL=Search.js.map

package/lib/components/Select/Select.js

@@ -1 +1,258 @@
-import{jsxs as e,Fragment as o,jsx as t}from"react/jsx-runtime";import{useMemo as r,useState as n,useRef as l,useEffect as c}from"react";import"./Select.scss.js";import s from"../Icon/Icon.js";import i from"../Typography/Typography.js";import a from"../../_virtual/index.js";import{createPortal as d}from"react-dom";import p from"./components/Dropdown.js";import{getValue as h}from"../../utils/getSelectOptionValue/getSelectOptionValue.js";import f from"../../hooks/usePortalPosition.js";import u from"../Tooltip/Tooltip.js";import{checkEmpty as m}from"../../utils/checkEmpty/checkEmpty.js";import{truncateText as w}from"../../utils/truncateText/truncateText.js";const g=({label:g="Default Label",showLabel:b=!0,optionsList:v=[],selectedOption:C={label:"",value:""},onChange:I=()=>{},errorMsg:x="",className:y="",optionZIndex:_=1500,disabled:T=!1,showBorder:E=!0,required:S=!0,optionsRequired:N=!0,selectedOptionColor:L="var(--ff-select-text-color)",labelAccessor:F="",valueAccessor:R="",height:j=32,width:z="100%",onBlur:$=()=>{},disableInput:k=!1,showIcon:O=!1,placeHolder:D="",showToolTip:W=!1,onCancelModal:A=()=>{},onSaveModal:B=()=>{},modalJSXProps:H=t(o,{}),recurrence:M=!1,showArrowIcon:P=!0,showClearIcon:X=!1,handelClear:q=()=>{},showOptions:Y={open:!1,toggle:!1},tooltip:J=!1,background:V="",borderRadius:Z="0px",noResultsMessage:G,dropDownRef:K,dropDownHeight:Q=160,onSearchText:U,isCustomButtonDisabled:ee=!1,hasInnerClearIcon:oe=!1,dropdownInnerIconWidth:te=0,onDropdownOpen:re=()=>{}})=>{const ne="number"==typeof z?`${z}px`:z,le=r(()=>v,[v]),[ce,se]=n(!1),[ie,ae]=n(!1),[de,pe]=n({searchedText:"",searchedIcon:"",searchedIconColor:""}),{searchedText:he,searchedIcon:fe,searchedIconColor:ue}=de,[me,we]=n([]),[ge,be]=n({positionX:0,positionY:0,width:0,fromBottom:0}),ve=l(null),Ce=l(null),Ie=l(null),xe=l(null),ye=f(Ie,ce),_e=()=>{ce&&ve?.current&&!T&&be(ye(Ie))},Te=e=>{const o=window.innerWidth-document.documentElement.clientWidth;e?(document.body.style.paddingRight="",document.body.style.overflow=""):(document.body.style.paddingRight=`${o}px`,document.body.style.overflow="hidden")};c(()=>{Y.open&&se(!0)},[Y.toggle]);const Ee=()=>{se(!1),be({positionX:0,positionY:0,fromBottom:0,width:0}),we(v),Ie?.current===document.activeElement&&(Ie?.current?.blur(),pe({searchedText:h(C,R)||"",searchedIcon:C.iconName||"",searchedIconColor:C.iconColor}),ae(!1),$())},Se=()=>_e();c(()=>{if(!ce||T)return;re(),N&&Te(!1),_e();const e=(e=>{const o=[];if(!e)return o;let t=e.parentElement;for(;t;){if("tbody"===t.tagName.toLowerCase()){t=t.parentElement;continue}const e=window.getComputedStyle(t),r=e.overflowY,n=e.overflowX;("auto"===r||"scroll"===r||"auto"===n||"scroll"===n)&&(t.scrollHeight>t.clientHeight||t.scrollWidth>t.clientWidth)&&o.push(t),t=t.parentElement}return o.length?o:[document.body]})(Ie.current);return window.addEventListener("resize",Se),e.forEach(e=>{e.addEventListener("scroll",Ee)}),()=>{Te(!0),window.removeEventListener("resize",Se),e.forEach(e=>{e.removeEventListener("scroll",Ee)})}},[ce]),c(()=>{pe({searchedText:h(C,R),searchedIcon:C.iconName,searchedIconColor:C.iconColor})},[C?.label,C?.value,C?.iconName,h(C,R)]),c(()=>{we(le)},[le]),b&&(D="");const[Ne,Le]=n(!1),[Fe,Re]=n("");c(()=>{const e=()=>{const e=Ie.current;if(!e)return;const o=window.getComputedStyle(e),t=parseFloat(o.paddingLeft||"0"),r=parseFloat(o.paddingRight||"0"),n=e.clientWidth-t-r,l=parseFloat(o.fontSize||"12"),c=o.fontFamily,s=parseFloat(o.letterSpacing||"0")||0,i=w(he,n,"pixel",l,c,s);Re(i),Le(i!==he)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[he,z]);const je=e(o,{children:[t(u,{title:he,style:{width:"100%"},disabled:!(J&&Ne),children:t("input",{type:"text",ref:Ie,id:"select-input-element",className:a("ff-select-inputField",{"ff-select-inputField__disabled":T,"ff-select-inputField__readonly":k,"ff-select-inputField__icon":O&&!m(fe),"ff-select-inputField__hasicon":oe}),onFocus:()=>{T||se(!0)},value:Ne?Fe:he,autoCorrect:"off",autoComplete:"off",spellCheck:"false",style:{zIndex:_,color:L},disabled:T,onChange:e=>{if(T)return;const{value:o}=e.target;U?.(o);const t=v.filter(e=>{const t=h(e,R);return"string"==typeof t?t.toLowerCase().includes(o.toLowerCase().trim()):t===Number(o)});we(t),pe({...de,searchedText:o})},readOnly:k,placeholder:D})}),oe&&t("span",{className:"ff-select-clear-icon",children:t(u,{title:"Clear",children:t(s,{name:"close",height:16,width:16,onClick:q,hoverEffect:!0,cursorType:"pointer"})})})]});return e("div",{className:`ff-select-wrapper ${y} ${X?"show-clear-icon":""}`,ref:Ce,style:{height:`${j}px`,width:`${ne}`,background:`${V}`,borderRadius:`${Z}`},children:[e("div",{className:a("ff-select",{"ff-select__focus":ce,"ff-select__disabled":T,"ff-select__error":!!x,"ff-select__error__focused":!!x&&ce,"ff-select__no_border":!E}),children:[O&&!m(fe)&&t(u,{placement:"bottom",title:he,children:t(s,{name:fe,color:ue,className:"ff-select-input-icon",withPadding:!m(he)})}),je,N&&t("div",{ref:xe,className:a("ff-select-arrows-wrapper",{"ff-select-arrows-wrapper__disabled":T}),onClick:()=>{T||(se(!ce),pe({...de,searchedText:h(C,R)||""}),we(v),!ce&&Ie.current&&Ie.current.focus())},children:P&&t(s,{name:"arrow_down",className:"ff-select-arrows",height:8,width:12,color:"var(--brand-color)","z-index":9999})}),b&&t(i,{as:"span",className:a("ff-select-labels",{"ff-select-labels__icon":O&&!m(fe),"ff-select-labels__active":he}),fontSize:he||ce?10:12,lineHeight:he||ce?"12px":"16px",required:S,style:{maxWidth:`calc(${ne} - ${oe?"56px":"40px"})`},children:g})]}),x&&t(i,{as:"div",lineHeight:"15px",fontSize:10,color:"var(--error_light)",className:"ff-select-error-msg",children:x}),N&&t("div",{ref:ve,children:ce&&d(t(p,{options:me,dropdownPosition:ge,labelAccessor:F,optionZIndex:_,inputRef:Ie,selectArrowRef:xe,onSelectBlur:Ee,onSelectOptionSelector:e=>{if(T)return;const o=e?.recurrence||!1;ae(o),pe({searchedText:h(C,R),searchedIcon:C.iconName,searchedIconColor:C.iconColor}),o||Ee(),I&&I(e)},heightFromTop:j,selectedOption:C,showIcon:O,showToolTip:W,customReccurenece:ie,onSaveModal:B,onCancelModal:()=>{A(),ae(!1)},modalJSXProps:H,recurrence:M,valueAccessor:R,showArrowIcon:P,showClearIcon:X,hasInnerClearIcon:oe,noResultsMessage:G,ref:K,searchedIcon:fe,dropDownHeight:Q,isCustomButtonDisabled:ee,dropdownInnerIconWidth:te}),document.body)}),X&&t(u,{title:"Cancel",style:{zIndex:99999},children:t(s,{name:"close",height:16,width:16,onClick:q,hoverEffect:!0})})]})};export{g as default};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import './Select.scss';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import classNames from 'classnames';
+import { createPortal } from 'react-dom';
+import Dropdown from './components/Dropdown';
+import { getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
+import usePortalPosition from '../../hooks/usePortalPosition';
+import Tooltip from '../Tooltip';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import { truncateText } from '../../utils/truncateText/truncateText';
+const Select = ({ label = 'Default Label', showLabel = true, optionsList = [], selectedOption = { label: '', value: '' }, onChange = () => { }, errorMsg = '', className = '', optionZIndex = 1500, disabled = false, showBorder = true, required = true, optionsRequired = true, selectedOptionColor = 'var(--ff-select-text-color)', labelAccessor = '', valueAccessor = '', height = 32, width = '100%', onBlur = () => { }, disableInput = false, showIcon = false, placeHolder = '', showToolTip = false, onCancelModal = () => { }, onSaveModal = () => { }, modalJSXProps = _jsx(_Fragment, {}), recurrence = false, showArrowIcon = true, showClearIcon = false, handelClear = () => { }, showOptions = { open: false, toggle: false }, tooltip = false, background = '', borderRadius = '0px', noResultsMessage, dropDownRef, dropDownHeight = 160, onSearchText, isCustomButtonDisabled = false, hasInnerClearIcon = false, dropdownInnerIconWidth = 0, onDropdownOpen = () => { }, }) => {
+    const selectWidth = typeof width === 'number' ? `${width}px` : width;
+    const memoizedOptionsList = useMemo(() => optionsList, [optionsList]);
+    const [showDropdownOptions, setShowDropdownOptions] = useState(false);
+    const [customRecurrence, setCustomRecurrence] = useState(false);
+    const [searchedOption, setSearchedOption] = useState({
+        searchedText: '',
+        searchedIcon: '',
+        searchedIconColor: '',
+    });
+    const { searchedText, searchedIcon, searchedIconColor } = searchedOption;
+    const [selectOptionList, setSelectOptionList] = useState([]);
+    const [dropdownPosition, setDropdownPosition] = useState({
+        positionX: 0,
+        positionY: 0,
+        width: 0,
+        fromBottom: 0,
+    });
+    const DropdownRef = useRef(null);
+    const selectWrapperRef = useRef(null);
+    const inputRef = useRef(null);
+    const selectArrowRef = useRef(null);
+    const calculatePosition = usePortalPosition(inputRef, showDropdownOptions);
+    const handleIconClick = () => {
+        if (disabled)
+            return;
+        setShowDropdownOptions(!showDropdownOptions);
+        setSearchedOption({
+            ...searchedOption,
+            searchedText: getValue(selectedOption, valueAccessor) || '',
+        });
+        setSelectOptionList(optionsList);
+        if (!showDropdownOptions && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    const handleChange = (event) => {
+        if (disabled)
+            return;
+        const { value } = event.target;
+        onSearchText?.(value);
+        const filteredOptions = optionsList.filter((option) => {
+            const valueData = getValue(option, valueAccessor);
+            return typeof valueData === 'string'
+                ? valueData.toLowerCase().includes(value.toLowerCase().trim())
+                : valueData === Number(value);
+        });
+        setSelectOptionList(filteredOptions);
+        setSearchedOption({
+            ...searchedOption,
+            searchedText: value,
+        });
+    };
+    const onSelectUpdatePosition = () => {
+        if (!showDropdownOptions || !DropdownRef?.current || disabled)
+            return;
+        setDropdownPosition(calculatePosition(inputRef));
+    };
+    const onSelectToggleScroll = (isEnabled) => {
+        const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+        if (isEnabled) {
+            document.body.style.paddingRight = '';
+            document.body.style.overflow = '';
+        }
+        else {
+            document.body.style.paddingRight = `${scrollWidth}px`;
+            document.body.style.overflow = 'hidden';
+        }
+    };
+    const handleFocus = () => {
+        if (disabled)
+            return;
+        setShowDropdownOptions(true);
+    };
+    useEffect(() => {
+        if (showOptions.open) {
+            setShowDropdownOptions(true);
+        }
+    }, [showOptions.toggle]);
+    const onSelectBlur = () => {
+        setShowDropdownOptions(false);
+        setDropdownPosition({
+            positionX: 0,
+            positionY: 0,
+            fromBottom: 0,
+            width: 0,
+        });
+        setSelectOptionList(optionsList);
+        if (inputRef?.current === document.activeElement) {
+            inputRef?.current?.blur();
+            setSearchedOption({
+                searchedText: getValue(selectedOption, valueAccessor) || '',
+                searchedIcon: selectedOption.iconName || '',
+                searchedIconColor: selectedOption.iconColor,
+            });
+            setCustomRecurrence(false);
+            onBlur();
+        }
+    };
+    const onSelectOptionSelector = (option) => {
+        if (disabled)
+            return;
+        const isCustomRecurrence = option?.recurrence || false;
+        setCustomRecurrence(isCustomRecurrence);
+        setSearchedOption({
+            searchedText: getValue(selectedOption, valueAccessor),
+            searchedIcon: selectedOption.iconName,
+            searchedIconColor: selectedOption.iconColor,
+        });
+        if (!isCustomRecurrence) {
+            onSelectBlur();
+        }
+        if (onChange) {
+            onChange(option);
+        }
+    };
+    const handleResizeOrScroll = () => onSelectUpdatePosition();
+    const getScrollParent = (element) => {
+        const scrollableParents = [];
+        if (!element)
+            return scrollableParents;
+        let parent = element.parentElement;
+        while (parent) {
+            const tagName = parent.tagName.toLowerCase();
+            // Skip tbody and similar non-scrollable semantic containers
+            if (tagName === 'tbody') {
+                parent = parent.parentElement;
+                continue;
+            }
+            const style = window.getComputedStyle(parent);
+            const overflowY = style.overflowY;
+            const overflowX = style.overflowX;
+            const isScrollable = (overflowY === 'auto' ||
+                overflowY === 'scroll' ||
+                overflowX === 'auto' ||
+                overflowX === 'scroll') &&
+                (parent.scrollHeight > parent.clientHeight ||
+                    parent.scrollWidth > parent.clientWidth);
+            if (isScrollable) {
+                scrollableParents.push(parent);
+            }
+            parent = parent.parentElement;
+        }
+        // as fallback also include window scroll (document.body)
+        return scrollableParents.length ? scrollableParents : [document.body];
+    };
+    useEffect(() => {
+        if (!showDropdownOptions || disabled)
+            return;
+        onDropdownOpen();
+        if (optionsRequired) {
+            onSelectToggleScroll(false);
+        }
+        onSelectUpdatePosition();
+        const scrollableParents = getScrollParent(inputRef.current);
+        window.addEventListener('resize', handleResizeOrScroll);
+        scrollableParents.forEach((parent) => {
+            parent.addEventListener('scroll', onSelectBlur);
+        });
+        return () => {
+            onSelectToggleScroll(true);
+            window.removeEventListener('resize', handleResizeOrScroll);
+            scrollableParents.forEach((parent) => {
+                parent.removeEventListener('scroll', onSelectBlur);
+            });
+        };
+    }, [showDropdownOptions]);
+    useEffect(() => {
+        setSearchedOption({
+            searchedText: getValue(selectedOption, valueAccessor),
+            searchedIcon: selectedOption.iconName,
+            searchedIconColor: selectedOption.iconColor,
+        });
+    }, [
+        selectedOption?.label,
+        selectedOption?.value,
+        selectedOption?.iconName,
+        getValue(selectedOption, valueAccessor),
+    ]);
+    useEffect(() => {
+        setSelectOptionList(memoizedOptionsList);
+    }, [memoizedOptionsList]);
+    if (showLabel) {
+        placeHolder = '';
+    }
+    const [isTruncated, setIsTruncated] = useState(false);
+    const [displaySearchedText, setDisplaySearchedText] = useState('');
+    useEffect(() => {
+        const updateTruncation = () => {
+            const input = inputRef.current;
+            if (!input)
+                return;
+            // derive properties from input
+            const styles = window.getComputedStyle(input);
+            const paddingLeft = parseFloat(styles.paddingLeft || '0');
+            const paddingRight = parseFloat(styles.paddingRight || '0');
+            const availableWidth = input.clientWidth - paddingLeft - paddingRight;
+            const fontSize = parseFloat(styles.fontSize || '12');
+            const fontFamily = styles.fontFamily;
+            const letterSpacing = parseFloat(styles.letterSpacing || '0') || 0;
+            const truncated = truncateText(searchedText, availableWidth, 'pixel', fontSize, fontFamily, letterSpacing);
+            setDisplaySearchedText(truncated);
+            setIsTruncated(truncated !== searchedText); // if different → truncated → show tooltip
+        };
+        updateTruncation();
+        window.addEventListener('resize', updateTruncation);
+        return () => {
+            window.removeEventListener('resize', updateTruncation);
+        };
+    }, [searchedText, width]);
+    const inputElement = (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: searchedText, style: { width: '100%' }, disabled: !(tooltip && isTruncated), children: _jsx("input", { type: "text", ref: inputRef, id: "select-input-element", className: classNames('ff-select-inputField', {
+                        'ff-select-inputField__disabled': disabled,
+                        'ff-select-inputField__readonly': disableInput,
+                        'ff-select-inputField__icon': showIcon && !checkEmpty(searchedIcon),
+                        'ff-select-inputField__hasicon': hasInnerClearIcon,
+                    }), onFocus: handleFocus, value: isTruncated ? displaySearchedText : searchedText, autoCorrect: "off", autoComplete: "off", spellCheck: "false", style: {
+                        zIndex: optionZIndex,
+                        color: selectedOptionColor,
+                    }, disabled: disabled, onChange: handleChange, readOnly: disableInput, placeholder: placeHolder }) }), hasInnerClearIcon && (_jsx("span", { className: "ff-select-clear-icon", children: _jsx(Tooltip, { title: "Clear", children: _jsx(Icon, { name: "close", height: 16, width: 16, onClick: handelClear, hoverEffect: true, cursorType: "pointer" }) }) }))] }));
+    return (_jsxs("div", { className: `ff-select-wrapper ${className} ${showClearIcon ? 'show-clear-icon' : ''}`, ref: selectWrapperRef, style: {
+            height: `${height}px`,
+            width: `${selectWidth}`,
+            background: `${background}`,
+            borderRadius: `${borderRadius}`,
+        }, children: [_jsxs("div", { className: classNames('ff-select', {
+                    'ff-select__focus': showDropdownOptions,
+                    'ff-select__disabled': disabled,
+                    'ff-select__error': !!errorMsg,
+                    'ff-select__error__focused': !!errorMsg && showDropdownOptions,
+                    'ff-select__no_border': !showBorder,
+                }), children: [showIcon && !checkEmpty(searchedIcon) && (_jsx(Tooltip, { placement: "bottom", title: searchedText, children: _jsx(Icon, { name: searchedIcon, color: searchedIconColor, className: "ff-select-input-icon", withPadding: !checkEmpty(searchedText) }) })), inputElement, optionsRequired && (_jsx("div", { ref: selectArrowRef, className: classNames('ff-select-arrows-wrapper', {
+                            'ff-select-arrows-wrapper__disabled': disabled,
+                        }), onClick: handleIconClick, children: showArrowIcon && (_jsx(Icon, { name: "arrow_down", className: "ff-select-arrows", height: 8, width: 12, color: 'var(--brand-color)', "z-index": 9999 })) })), showLabel && (_jsx(Typography, { as: "span", className: classNames('ff-select-labels', {
+                            'ff-select-labels__icon': showIcon && !checkEmpty(searchedIcon),
+                            'ff-select-labels__active': searchedText,
+                        }), fontSize: searchedText || showDropdownOptions ? 10 : 12, lineHeight: searchedText || showDropdownOptions ? '12px' : '16px', required: required, style: {
+                            maxWidth: `calc(${selectWidth} - ${hasInnerClearIcon ? '56px' : '40px'})`,
+                        }, children: label }))] }), errorMsg && (_jsx(Typography, { as: "div", lineHeight: "15px", fontSize: 10, color: "var(--error_light)", className: "ff-select-error-msg", children: errorMsg })), optionsRequired && (_jsx("div", { ref: DropdownRef, children: showDropdownOptions &&
+                    createPortal(_jsx(Dropdown, { options: selectOptionList, dropdownPosition: dropdownPosition, labelAccessor: labelAccessor, optionZIndex: optionZIndex, inputRef: inputRef, selectArrowRef: selectArrowRef, onSelectBlur: onSelectBlur, onSelectOptionSelector: onSelectOptionSelector, heightFromTop: height, selectedOption: selectedOption, showIcon: showIcon, showToolTip: showToolTip, customReccurenece: customRecurrence, onSaveModal: onSaveModal, onCancelModal: () => {
+                            onCancelModal();
+                            setCustomRecurrence(false);
+                        }, modalJSXProps: modalJSXProps, recurrence: recurrence, valueAccessor: valueAccessor, showArrowIcon: showArrowIcon, showClearIcon: showClearIcon, hasInnerClearIcon: hasInnerClearIcon, noResultsMessage: noResultsMessage, ref: dropDownRef, searchedIcon: searchedIcon, dropDownHeight: dropDownHeight, isCustomButtonDisabled: isCustomButtonDisabled, dropdownInnerIconWidth: dropdownInnerIconWidth }), document.body) })), showClearIcon && (_jsx(Tooltip, { title: "Cancel", style: { zIndex: 99999 }, children: _jsx(Icon, { name: "close", height: 16, width: 16, onClick: handelClear, hoverEffect: true }) }))] }));
+};
+export default Select;
+//# sourceMappingURL=Select.js.map