pixel-react 1.20.18 → 1.20.20

package/lib/components/NLPInput/NlpInput.js

@@ -1,254 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useReducer, useRef, useEffect, useState, useLayoutEffect, } from 'react';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import { createPortal } from 'react-dom';
-import classNames from 'classnames';
-import Dropdown from './components/NlpDropDown/NlpDropdown';
-import Icon from '../Icon';
-import './NLPInput.scss';
-import usePortalPosition from '../../hooks/usePortalPosition';
-import Typography from '../Typography';
-import ChipsAccordion from './components/ChipsFolder/ChipsAccordion';
-const nlpInputReducer = (state, action) => {
-    switch (action.type) {
-        case 'FOCUS_INPUT':
-            return {
-                ...state,
-                isInputFocused: true,
-                isIconClick: true,
-                showOptions: true,
-            };
-        case 'BLUR_INPUT':
-            return {
-                ...state,
-                isInputFocused: false,
-                option: action.payload.option,
-                isIconClick: false,
-                showOptions: false,
-                dropdownPosition: {
-                    positionX: 0,
-                    positionY: 0,
-                    width: 0,
-                    fromBottom: 0,
-                },
-            };
-        case 'UPDATE_DROPDOWN_POSITION':
-            const { positionX, positionY, width, fromBottom } = action.payload || {};
-            return {
-                ...state,
-                dropdownPosition: {
-                    positionX,
-                    positionY,
-                    width,
-                    fromBottom,
-                },
-            };
-        case 'UPDATE_OPTION':
-            return {
-                ...state,
-                option: action.payload,
-            };
-        case 'SHOW_ERROR':
-            return {
-                ...state,
-                isInputFocused: true,
-                isIconClick: false,
-                showOptions: false,
-                option: action.payload.option,
-                dropdownPosition: {
-                    positionX: 0,
-                    positionY: 0,
-                    width: 0,
-                    fromBottom: 0,
-                },
-            };
-        default:
-            return state;
-    }
-};
-const NlpInput = ({ label = '', leftIcon, rightIcon, rightIconColor, showLabel = true, onHelpIconClick = () => { }, aiIconClick = () => { }, webServiceClick = () => { }, containerWidth = '', optionsList = [], selectedOption = {
-    displayName: '',
-    projectId: '',
-    nlpType: '',
-    platform: '',
-}, onChange = () => { }, errorMsg = '', className = '', optionZIndex = 100, disabled = false, borderRadius = true, showBorder = true, required = false, value = '', onSelect = () => { }, chipOptionList, selectedChips, loadMoreOptions = () => { }, isWebservice = true, closeInputOnOutsideClick = () => { }, tooltipText = 'Help', ChipsAccordionWidth = '27.8%', dropDownMessage = '', }) => {
-    const initialState = {
-        isInputFocused: false,
-        isIconClick: false,
-        showOptions: false,
-        option: checkEmpty(selectedOption) &&
-            typeof selectedOption?.displayName === 'string'
-            ? selectedOption.displayName
-            : '',
-        dropdownPosition: { positionX: 0, positionY: 0, width: 0, fromBottom: 0 },
-    };
-    const [selectControlState, dispatch] = useReducer(nlpInputReducer, initialState);
-    const [inputVal, setInputVal] = useState(selectedOption);
-    const [tooltipStyle, setTooltipStyle] = useState({});
-    const helpIconClicked = useRef(false);
-    useEffect(() => {
-        const updatedDisplayName = typeof selectedOption.displayName === 'string'
-            ? selectedOption.displayName
-            : String(selectedOption.displayName ?? '');
-        if (updatedDisplayName !== inputVal.displayName) {
-            setInputVal({ ...selectedOption, displayName: updatedDisplayName });
-        }
-    }, [selectedOption]);
-    useEffect(() => {
-        if (value) {
-            handleSelectAction('FOCUS_INPUT');
-        }
-    }, [value]);
-    const DropDownRef = useRef(null);
-    const InputRef = useRef(null);
-    const ChipRef = useRef(null);
-    const { isInputFocused, isIconClick, showOptions, dropdownPosition, option } = selectControlState;
-    const calculatePosition = usePortalPosition(DropDownRef, showOptions);
-    const handleSelectAction = (actionType) => {
-        if (!disabled) {
-            if (actionType === 'SHOW_ERROR' || actionType === 'BLUR_INPUT') {
-                dispatch({
-                    type: actionType,
-                    payload: {
-                        option: typeof selectedOption.displayName === 'string'
-                            ? selectedOption.displayName
-                            : String(selectedOption.displayName ?? ''),
-                    },
-                });
-            }
-            else {
-                dispatch({ type: actionType });
-            }
-        }
-    };
-    const onSelectInputChange = (e) => {
-        if (disabled)
-            return;
-        onChange(e);
-    };
-    const onSelectBlur = () => {
-        if (disabled)
-            return;
-        if (helpIconClicked.current) {
-            helpIconClicked.current = false;
-            return;
-        }
-        if (errorMsg) {
-            handleSelectAction('SHOW_ERROR');
-        }
-        else {
-            handleSelectAction('BLUR_INPUT');
-            closeInputOnOutsideClick();
-        }
-    };
-    const onSelectOptionSelector = (option) => {
-        onSelect(option);
-    };
-    const onSelectUpdatePosition = () => {
-        if (!showOptions || !DropDownRef?.current || disabled)
-            return;
-        const { positionX, positionY, width, fromBottom } = calculatePosition(DropDownRef);
-        dispatch({
-            type: 'UPDATE_DROPDOWN_POSITION',
-            payload: { positionX, positionY, width, fromBottom },
-        });
-    };
-    const onSelectToggleScroll = (isEnabled) => {
-        const bodyScrollWidth = window.innerWidth - document.body.clientWidth;
-        document.body.style.paddingRight = isEnabled ? '' : `${bodyScrollWidth}px`;
-        document.body.style.overflow = isEnabled ? '' : 'hidden';
-    };
-    useLayoutEffect(() => {
-        if (disabled)
-            return;
-        if (showOptions) {
-            onSelectToggleScroll(!showOptions);
-        }
-        onSelectUpdatePosition();
-        const handleResizeOrScroll = () => onSelectUpdatePosition();
-        window.addEventListener('resize', handleResizeOrScroll);
-        window.addEventListener('scroll', handleResizeOrScroll);
-        return () => {
-            onSelectToggleScroll(true);
-            window.removeEventListener('resize', handleResizeOrScroll);
-            window.removeEventListener('scroll', handleResizeOrScroll);
-        };
-    }, [showOptions]);
-    useEffect(() => {
-        if (errorMsg) {
-            handleSelectAction('SHOW_ERROR');
-        }
-    }, []);
-    useEffect(() => {
-        handleSelectAction('FOCUS_INPUT');
-    }, []);
-    const applyActiveOptionClasses = !isInputFocused && Boolean(option);
-    useEffect(() => {
-        const inputEl = InputRef.current;
-        if (!inputEl)
-            return;
-        let scrollContainer = inputEl.parentElement;
-        while (scrollContainer && scrollContainer !== document.body) {
-            const style = getComputedStyle(scrollContainer);
-            if (['scroll', 'auto'].includes(style.overflowY)) {
-                break;
-            }
-            scrollContainer = scrollContainer.parentElement;
-        }
-        if (!scrollContainer)
-            return;
-        const originalOverflow = scrollContainer.style.overflow;
-        const shouldFreeze = showOptions || chipOptionList;
-        if (shouldFreeze) {
-            scrollContainer.style.overflow = 'hidden';
-        }
-        else {
-            scrollContainer.style.overflow = originalOverflow || 'auto';
-        }
-        return () => {
-            scrollContainer.style.overflow = originalOverflow || 'auto';
-        };
-    }, [showOptions, chipOptionList]);
-    return (_jsxs("section", { className: "main-section", children: [_jsxs("div", { className: classNames(`ff-nlp-input-wrapper ${className}`), children: [_jsxs("div", { className: "ff-nlp-input", children: [_jsx("input", { type: "text", className: classNames('ff-nlp-input-container', {
-                                    'ff-nlp-input-container--default': !isInputFocused,
-                                    'ff-nlp-input-container--active': applyActiveOptionClasses,
-                                    'ff-nlp-input-container--no-label': !showLabel,
-                                    'ff-nlp-input-container--error': errorMsg && !isInputFocused && !Boolean(option),
-                                    'ff-nlp-input-container--border-radius': !borderRadius,
-                                    'ff-nlp-input-container--disable': disabled,
-                                    'ff-nlp-input-container--no-border': !showBorder,
-                                }), style: {
-                                    zIndex: optionZIndex,
-                                    paddingLeft: '32px',
-                                }, onFocus: () => handleSelectAction('FOCUS_INPUT'), onChange: onSelectInputChange, value: value, disabled: disabled, autoComplete: "off", spellCheck: "false", ref: InputRef, autoFocus: true }), _jsxs("div", { className: "ff-nlp-icon-container", children: [_jsx(Icon, { name: leftIcon || 'ai_search', className: "ff-nlp-help_icon", width: 16, height: 16, onClick: aiIconClick }), _jsx(Typography, { className: "icon-label", fontSize: 10, children: "Search With Ai" })] }), showLabel && (_jsxs("div", { className: classNames('ff-nlp-input-label', 'ff-nlp-input-label--default', {
-                                    'ff-nlp-input-label--active': value || Boolean(option),
-                                    'ff-nlp-input-label--error': errorMsg,
-                                }), children: [required && (_jsx(Typography, { color: "var(--$error-light)", className: "ff-nlp-input-label--required", children: "*" })), label] })), _jsxs("div", { className: "help-icon-container", onMouseDown: () => (helpIconClicked.current = true), style: { zIndex: optionZIndex }, children: [_jsx("span", { className: classNames('ff-nlp-input-arrow', {
-                                            'ff-nlp-input-arrow--down': !isIconClick,
-                                            'ff-nlp-input-arrow--no-label': !showLabel,
-                                        }), onMouseEnter: (e) => {
-                                            const rect = e.target.getBoundingClientRect();
-                                            setTooltipStyle({
-                                                top: `${rect.top + window.scrollY - 20}px`,
-                                                left: `${rect.left + window.scrollX + rect.width * 0.5}px`,
-                                                visibility: 'visible',
-                                                opacity: 1,
-                                                transitionDelay: '0s',
-                                            });
-                                        }, onMouseLeave: () => setTooltipStyle((prev) => ({
-                                            ...prev,
-                                            visibility: 'hidden',
-                                            opacity: 0,
-                                        })), children: _jsx(Icon, { name: rightIcon || '', height: 16, width: 16, onClick: onHelpIconClick, color: rightIconColor }) }), createPortal(_jsx(Typography, { className: "help-icon-label", fontSize: 10, style: tooltipStyle, children: tooltipText }), document.body)] }), _jsx("fieldset", { className: classNames('ff-nlp-input-fieldset', {
-                                    'ff-nlp-input-fieldset--no-label': !showLabel,
-                                    'ff-nlp-input-fieldset--default': !isInputFocused,
-                                    'ff-nlp-input-fieldset--active': isInputFocused,
-                                    'ff-nlp-input-fieldset--option': applyActiveOptionClasses,
-                                    'ff-nlp-input-fieldset--error': errorMsg,
-                                    'ff-nlp-input-fieldset--border-radius': !borderRadius,
-                                    'ff-nlp-input-fieldset--no-border': !showBorder,
-                                }) })] }), errorMsg && (_jsx(Typography, { className: "ff-nlp-input-wrapper-error-text", fontSize: 8, color: 'var(--error-light)', children: errorMsg })), _jsx("div", { ref: DropDownRef, children: showOptions &&
-                            createPortal(_jsx(Dropdown, { onSelectBlur: onSelectBlur, onSelectOptionSelector: onSelectOptionSelector, dropdownPosition: dropdownPosition, options: optionsList, optionZIndex: optionZIndex, inputRef: InputRef, webServiceClick: webServiceClick, containerWidth: containerWidth, loadMoreOptions: loadMoreOptions, chipRef: ChipRef, isWebservice: isWebservice, dropDownMessage: dropDownMessage }), document.body) })] }), _jsx("div", { className: "chips-accordion-content", children: chipOptionList && chipOptionList.length > 0 && (_jsx(ChipsAccordion, { chipOptionList: chipOptionList, selectedChips: selectedChips, optionZIndex: optionZIndex, ref: ChipRef, inputRef: InputRef, ChipsAccordionWidth: ChipsAccordionWidth })) })] }));
-};
-export default NlpInput;
-//# sourceMappingURL=NlpInput.js.map
+import{jsxs as o,jsx as e}from"react/jsx-runtime";import{useReducer as i,useState as n,useRef as t,useEffect as r,useLayoutEffect as l}from"react";import{checkEmpty as s}from"../../utils/checkEmpty/checkEmpty.js";import{createPortal as p}from"react-dom";import a from"../../_virtual/index.js";import c from"./components/NlpDropDown/NlpDropdown.js";import d from"../Icon/Icon.js";import"./NLPInput.scss.js";import f from"../../hooks/usePortalPosition.js";import u from"../Typography/Typography.js";import m from"./components/ChipsFolder/ChipsAccordion.js";const h=(o,e)=>{switch(e.type){case"FOCUS_INPUT":return{...o,isInputFocused:!0,isIconClick:!0,showOptions:!0};case"BLUR_INPUT":return{...o,isInputFocused:!1,option:e.payload.option,isIconClick:!1,showOptions:!1,dropdownPosition:{positionX:0,positionY:0,width:0,fromBottom:0}};case"UPDATE_DROPDOWN_POSITION":const{positionX:i,positionY:n,width:t,fromBottom:r}=e.payload||{};return{...o,dropdownPosition:{positionX:i,positionY:n,width:t,fromBottom:r}};case"UPDATE_OPTION":return{...o,option:e.payload};case"SHOW_ERROR":return{...o,isInputFocused:!0,isIconClick:!1,showOptions:!1,option:e.payload.option,dropdownPosition:{positionX:0,positionY:0,width:0,fromBottom:0}};default:return o}},w=({label:w="",leftIcon:y,rightIcon:N,rightIconColor:I,showLabel:O=!0,onHelpIconClick:b=()=>{},aiIconClick:v=()=>{},webServiceClick:C=()=>{},containerWidth:g="",optionsList:P=[],selectedOption:R={displayName:"",projectId:"",nlpType:"",platform:""},onChange:S=()=>{},errorMsg:_="",className:k="",optionZIndex:T=100,disabled:U=!1,borderRadius:B=!0,showBorder:E=!0,required:x=!1,value:W="",onSelect:D=()=>{},chipOptionList:L,selectedChips:F,loadMoreOptions:j=()=>{},isWebservice:Y=!0,closeInputOnOutsideClick:M=()=>{},tooltipText:X="Help",ChipsAccordionWidth:z="27.8%",dropDownMessage:A=""})=>{const H={isInputFocused:!1,isIconClick:!1,showOptions:!1,option:s(R)&&"string"==typeof R?.displayName?R.displayName:"",dropdownPosition:{positionX:0,positionY:0,width:0,fromBottom:0}},[$,Z]=i(h,H),[q,G]=n(R),[J,K]=n({}),Q=t(!1);r(()=>{const o="string"==typeof R.displayName?R.displayName:String(R.displayName??"");o!==q.displayName&&G({...R,displayName:o})},[R]),r(()=>{W&&po("FOCUS_INPUT")},[W]);const V=t(null),oo=t(null),eo=t(null),{isInputFocused:io,isIconClick:no,showOptions:to,dropdownPosition:ro,option:lo}=$,so=f(V,to),po=o=>{U||Z("SHOW_ERROR"===o||"BLUR_INPUT"===o?{type:o,payload:{option:"string"==typeof R.displayName?R.displayName:String(R.displayName??"")}}:{type:o})},ao=()=>{if(!to||!V?.current||U)return;const{positionX:o,positionY:e,width:i,fromBottom:n}=so(V);Z({type:"UPDATE_DROPDOWN_POSITION",payload:{positionX:o,positionY:e,width:i,fromBottom:n}})},co=o=>{const e=window.innerWidth-document.body.clientWidth;document.body.style.paddingRight=o?"":`${e}px`,document.body.style.overflow=o?"":"hidden"};l(()=>{if(U)return;to&&co(!to),ao();const o=()=>ao();return window.addEventListener("resize",o),window.addEventListener("scroll",o),()=>{co(!0),window.removeEventListener("resize",o),window.removeEventListener("scroll",o)}},[to]),r(()=>{_&&po("SHOW_ERROR")},[]),r(()=>{po("FOCUS_INPUT")},[]);const fo=!io&&Boolean(lo);return r(()=>{const o=oo.current;if(!o)return;let e=o.parentElement;for(;e&&e!==document.body;){const o=getComputedStyle(e);if(["scroll","auto"].includes(o.overflowY))break;e=e.parentElement}if(!e)return;const i=e.style.overflow,n=to||L;return e.style.overflow=n?"hidden":i||"auto",()=>{e.style.overflow=i||"auto"}},[to,L]),o("section",{className:"main-section",children:[o("div",{className:a(`ff-nlp-input-wrapper ${k}`),children:[o("div",{className:"ff-nlp-input",children:[e("input",{type:"text",className:a("ff-nlp-input-container",{"ff-nlp-input-container--default":!io,"ff-nlp-input-container--active":fo,"ff-nlp-input-container--no-label":!O,"ff-nlp-input-container--error":_&&!io&&!Boolean(lo),"ff-nlp-input-container--border-radius":!B,"ff-nlp-input-container--disable":U,"ff-nlp-input-container--no-border":!E}),style:{zIndex:T,paddingLeft:"32px"},onFocus:()=>po("FOCUS_INPUT"),onChange:o=>{U||S(o)},value:W,disabled:U,autoComplete:"off",spellCheck:"false",ref:oo,autoFocus:!0}),o("div",{className:"ff-nlp-icon-container",children:[e(d,{name:y||"ai_search",className:"ff-nlp-help_icon",width:16,height:16,onClick:v}),e(u,{className:"icon-label",fontSize:10,children:"Search With Ai"})]}),O&&o("div",{className:a("ff-nlp-input-label","ff-nlp-input-label--default",{"ff-nlp-input-label--active":W||Boolean(lo),"ff-nlp-input-label--error":_}),children:[x&&e(u,{color:"var(--$error-light)",className:"ff-nlp-input-label--required",children:"*"}),w]}),o("div",{className:"help-icon-container",onMouseDown:()=>Q.current=!0,style:{zIndex:T},children:[e("span",{className:a("ff-nlp-input-arrow",{"ff-nlp-input-arrow--down":!no,"ff-nlp-input-arrow--no-label":!O}),onMouseEnter:o=>{const e=o.target.getBoundingClientRect();K({top:e.top+window.scrollY-20+"px",left:`${e.left+window.scrollX+.5*e.width}px`,visibility:"visible",opacity:1,transitionDelay:"0s"})},onMouseLeave:()=>K(o=>({...o,visibility:"hidden",opacity:0})),children:e(d,{name:N||"",height:16,width:16,onClick:b,color:I})}),p(e(u,{className:"help-icon-label",fontSize:10,style:J,children:X}),document.body)]}),e("fieldset",{className:a("ff-nlp-input-fieldset",{"ff-nlp-input-fieldset--no-label":!O,"ff-nlp-input-fieldset--default":!io,"ff-nlp-input-fieldset--active":io,"ff-nlp-input-fieldset--option":fo,"ff-nlp-input-fieldset--error":_,"ff-nlp-input-fieldset--border-radius":!B,"ff-nlp-input-fieldset--no-border":!E})})]}),_&&e(u,{className:"ff-nlp-input-wrapper-error-text",fontSize:8,color:"var(--error-light)",children:_}),e("div",{ref:V,children:to&&p(e(c,{onSelectBlur:()=>{U||(Q.current?Q.current=!1:_?po("SHOW_ERROR"):(po("BLUR_INPUT"),M()))},onSelectOptionSelector:o=>{D(o)},dropdownPosition:ro,options:P,optionZIndex:T,inputRef:oo,webServiceClick:C,containerWidth:g,loadMoreOptions:j,chipRef:eo,isWebservice:Y,dropDownMessage:A}),document.body)})]}),e("div",{className:"chips-accordion-content",children:L&&L.length>0&&e(m,{chipOptionList:L,selectedChips:F,optionZIndex:T,ref:eo,inputRef:oo,ChipsAccordionWidth:z})})]})};export{w as default};

package/lib/components/NLPInput/components/ChipsFolder/ChipsAccordion.js

@@ -1,93 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, forwardRef, useRef, useImperativeHandle, useLayoutEffect, } from 'react';
-import './ChipsAccordion.scss';
-import Icon from '../../../Icon';
-import Typography from '../../../Typography';
-import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
-import usePortalPosition from '../../../../hooks/usePortalPosition';
-import { createPortal } from 'react-dom';
-const ChipsAccordion = forwardRef(({ chipOptionList, selectedChips, optionZIndex = 0, inputRef, ChipsAccordionWidth, }, ref) => {
-    const [filterData, setFilterData] = useState([]);
-    const [isExpanded, setIsExpanded] = useState(false);
-    const [positionChipContainer, setPositionChipContainer] = useState({ left: 0, top: 0 });
-    const [expandDirection, setExpandDirection] = useState('down');
-    const localRef = useRef(null);
-    useImperativeHandle(ref, () => localRef.current);
-    const portalPosition = usePortalPosition(localRef, isExpanded);
-    useEffect(() => {
-        if (checkEmpty(chipOptionList))
-            return;
-        setFilterData(chipOptionList);
-    }, [chipOptionList]);
-    const chipsRowRef = useRef(null);
-    const checkOverflow = () => {
-        const rowEl = chipsRowRef.current;
-        if (!rowEl)
-            return;
-    };
-    useEffect(() => {
-        checkOverflow();
-    }, [filterData]);
-    useLayoutEffect(() => {
-        const handleUpdate = () => {
-            if (!inputRef?.current)
-                return;
-            const { positionX, positionY, width, fromBottom } = portalPosition(inputRef);
-            const estimatedHeight = 160;
-            const expandUp = fromBottom < estimatedHeight;
-            setExpandDirection(expandUp ? 'up' : 'down');
-            setPositionChipContainer({
-                left: positionX + width,
-                top: positionY,
-            });
-        };
-        handleUpdate();
-        const observer = new ResizeObserver(() => handleUpdate());
-        if (inputRef?.current)
-            observer.observe(inputRef.current);
-        window.addEventListener('scroll', handleUpdate, true);
-        return () => {
-            if (inputRef?.current)
-                observer.unobserve(inputRef.current);
-            observer.disconnect();
-            window.removeEventListener('scroll', handleUpdate, true);
-        };
-    }, [portalPosition, inputRef]);
-    const toggleExpand = () => {
-        setIsExpanded((prev) => !prev);
-        if (isExpanded) {
-            document.querySelector('.ff-chips-row')?.scrollTo({ top: 0 });
-        }
-    };
-    const toggleAction = (index) => {
-        const updatedActions = filterData.map((chip, i) => i === index ? { ...chip, isSelected: !chip.isSelected } : chip);
-        setFilterData(updatedActions);
-        if (selectedChips) {
-            const selected = updatedActions.filter((chip) => chip.isSelected);
-            selectedChips(selected);
-        }
-    };
-    useEffect(() => {
-        const handleResize = () => {
-            checkOverflow();
-        };
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    return createPortal(_jsxs("div", { className: "ff-chips-accordion", style: {
-            left: positionChipContainer.left,
-            top: positionChipContainer.top,
-            zIndex: optionZIndex + 100,
-            transform: expandDirection === 'up'
-                ? 'translateY(calc(-100% + 33px))'
-                : 'none',
-            width: ChipsAccordionWidth,
-            position: 'absolute',
-        }, ref: localRef, children: [_jsx("div", { ref: chipsRowRef, className: `ff-chips-row ${isExpanded ? 'expanded' : ''}`, style: { maxHeight: isExpanded ? '280px' : '20px' }, children: _jsx("div", { className: `chips-container ${isExpanded ? 'chips-container-scroll' : ''}`, children: filterData?.map(({ name, isSelected }, index) => (_jsx("div", { className: `chip ${isSelected ? 'selected-chip' : ''}`, onClick: () => toggleAction(index), children: _jsx(Typography, { as: "div", className: "chip-text", children: name, fontSize: 10, lineHeight: "15px" }) }, index))) }) }), _jsx("div", { className: "ff-arrow-icon-container", children: _jsx("div", { className: `ff-icon-wrapper ${isExpanded ? 'expanded' : ''}`, role: "button", "aria-expanded": isExpanded, children: _jsx(Icon, { name: expandDirection === 'down'
-                            ? 'arrows_down_icon'
-                            : 'arrows_top_icon', height: 8, width: 8, onClick: toggleExpand }) }) })] }), document.body);
-});
-export default ChipsAccordion;
-//# sourceMappingURL=ChipsAccordion.js.map
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{forwardRef as t,useState as r,useRef as n,useImperativeHandle as i,useEffect as c,useLayoutEffect as s}from"react";import"./ChipsAccordion.scss.js";import d from"../../../Icon/Icon.js";import p from"../../../Typography/Typography.js";import{checkEmpty as l}from"../../../../utils/checkEmpty/checkEmpty.js";import a from"../../../../hooks/usePortalPosition.js";import{createPortal as m}from"react-dom";const h=t(({chipOptionList:t,selectedChips:h,optionZIndex:f=0,inputRef:u,ChipsAccordionWidth:w},v)=>{const[x,y]=r([]),[N,b]=r(!1),[j,E]=r({left:0,top:0}),[S,g]=r("down"),k=n(null);i(v,()=>k.current);const z=a(k,N);c(()=>{l(t)||y(t)},[t]);const C=n(null),L=()=>{C.current};c(()=>{L()},[x]),s(()=>{const e=()=>{if(!u?.current)return;const{positionX:e,positionY:o,width:t,fromBottom:r}=z(u);g(r<160?"up":"down"),E({left:e+t,top:o})};e();const o=new ResizeObserver(()=>e());return u?.current&&o.observe(u.current),window.addEventListener("scroll",e,!0),()=>{u?.current&&o.unobserve(u.current),o.disconnect(),window.removeEventListener("scroll",e,!0)}},[z,u]);return c(()=>{const e=()=>{L()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),m(e("div",{className:"ff-chips-accordion",style:{left:j.left,top:j.top,zIndex:f+100,transform:"up"===S?"translateY(calc(-100% + 33px))":"none",width:w,position:"absolute"},ref:k,children:[o("div",{ref:C,className:"ff-chips-row "+(N?"expanded":""),style:{maxHeight:N?"280px":"20px"},children:o("div",{className:"chips-container "+(N?"chips-container-scroll":""),children:x?.map(({name:e,isSelected:t},r)=>o("div",{className:"chip "+(t?"selected-chip":""),onClick:()=>(e=>{const o=x.map((o,t)=>t===e?{...o,isSelected:!o.isSelected}:o);if(y(o),h){const e=o.filter(e=>e.isSelected);h(e)}})(r),children:o(p,{as:"div",className:"chip-text",children:e,fontSize:10,lineHeight:"15px"})},r))})}),o("div",{className:"ff-arrow-icon-container",children:o("div",{className:"ff-icon-wrapper "+(N?"expanded":""),role:"button","aria-expanded":N,children:o(d,{name:"down"===S?"arrows_down_icon":"arrows_top_icon",height:8,width:8,onClick:()=>{b(e=>!e),N&&document.querySelector(".ff-chips-row")?.scrollTo({top:0})}})})})]}),document.body)});export{h as default};

package/lib/components/NLPInput/components/ChipsFolder/ChipsAccordion.scss.js

@@ -0,0 +1 @@
+import c from"../../../../node_modules/style-inject/dist/style-inject.es.js";c(".ff-chips-accordion{background-color:var(--base-bg-color);border:1px solid var(--nlp-border-color);border-radius:4px;display:flex;gap:8px;justify-content:space-between;margin-left:8px;overflow:hidden;padding:5px 8px;position:relative}.ff-chips-accordion .ff-chips-row{align-items:center;display:flex;flex-wrap:wrap;gap:8px;max-height:20px;overflow:hidden;transition:max-height .3s ease}.ff-chips-accordion .ff-chips-row.expanded{max-height:280px;overflow-x:hidden;overflow-y:auto}.ff-chips-accordion .ff-chips-row.expanded::-webkit-scrollbar{width:0}.ff-chips-accordion .ff-chips-row .chips-container{align-items:center;display:flex;flex-wrap:wrap;gap:8px;width:100%}.ff-chips-accordion .ff-chips-row .chips-container .chip{align-items:center;background-color:var(--toast-close-icon-wrapper-bg);border:none;border-radius:4px;color:var(--nlp-chips-blur-text-color);cursor:pointer;display:flex;justify-content:center;padding:2px 4px;transition:background-color .15s ease,color .15s ease}.ff-chips-accordion .ff-chips-row .chips-container .chip.selected-chip{background-color:var(--nlp-selected-chip-bg);color:var(--nlp-chips-select-text-color)}.ff-chips-accordion .ff-chips-row .chips-container-scroll{height:280px;overflow:auto}.ff-chips-accordion .ff-chips-row .chip-text{cursor:pointer!important}.ff-chips-accordion .ff-arrow-icon-container{padding:2px}.ff-chips-accordion .ff-icon-wrapper{align-items:center;cursor:pointer;display:flex;justify-content:center;transition:transform .2s ease}.ff-chips-accordion .ff-icon-wrapper.expanded{transform:rotate(180deg)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoaXBzQWNjb3JkaW9uLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0JBVUUscUNBQXNDLENBVHRDLHdDQUF5QyxDQUN6QyxpQkFBa0IsQ0FHbEIsWUFBYSxDQUliLE9BQVEsQ0FMUiw2QkFBOEIsQ0FHOUIsZUFBZ0IsQ0FEaEIsZUFBZ0IsQ0FIaEIsZUFBZ0IsQ0FLaEIsaUJBR0YsQ0FDQSxrQ0FJRSxrQkFBbUIsQ0FIbkIsWUFBYSxDQUNiLGNBQWUsQ0FDZixPQUFRLENBR1IsZUFBZ0IsQ0FDaEIsZUFBZ0IsQ0FGaEIsOEJBR0YsQ0FDQSwyQ0FDRSxnQkFBaUIsQ0FFakIsaUJBQWtCLENBRGxCLGVBRUYsQ0FDQSw4REFDRSxPQUNGLENBQ0EsbURBSUUsa0JBQW1CLENBSG5CLFlBQWEsQ0FDYixjQUFlLENBQ2YsT0FBUSxDQUVSLFVBQ0YsQ0FDQSx5REFHRSxrQkFBbUIsQ0FJbkIsbURBQW9ELENBRnBELFdBQVksQ0FDWixpQkFBa0IsQ0FJbEIsc0NBQXVDLENBRnZDLGNBQWUsQ0FQZixZQUFhLENBQ2Isc0JBQXVCLENBRXZCLGVBQWdCLENBS2hCLHFEQUVGLENBQ0EsdUVBQ0UsNENBQTZDLENBQzdDLHdDQUNGLENBQ0EsMERBQ0UsWUFBYSxDQUNiLGFBQ0YsQ0FDQSw2Q0FDRSx3QkFDRixDQUNBLDZDQUNFLFdBQ0YsQ0FDQSxxQ0FFRSxrQkFBbUIsQ0FFbkIsY0FBZSxDQUhmLFlBQWEsQ0FFYixzQkFBdUIsQ0FFdkIsNkJBQ0YsQ0FDQSw4Q0FDRSx3QkFDRiIsImZpbGUiOiJDaGlwc0FjY29yZGlvbi5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmZmLWNoaXBzLWFjY29yZGlvbiB7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLW5scC1ib3JkZXItY29sb3IpO1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIHBhZGRpbmc6IDVweCA4cHg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgZGlzcGxheTogZmxleDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgbWFyZ2luLWxlZnQ6IDhweDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBnYXA6IDhweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYmFzZS1iZy1jb2xvcik7XG59XG4uZmYtY2hpcHMtYWNjb3JkaW9uIC5mZi1jaGlwcy1yb3cge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LXdyYXA6IHdyYXA7XG4gIGdhcDogOHB4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB0cmFuc2l0aW9uOiBtYXgtaGVpZ2h0IDAuM3MgZWFzZTtcbiAgbWF4LWhlaWdodDogMjBweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbn1cbi5mZi1jaGlwcy1hY2NvcmRpb24gLmZmLWNoaXBzLXJvdy5leHBhbmRlZCB7XG4gIG1heC1oZWlnaHQ6IDI4MHB4O1xuICBvdmVyZmxvdy15OiBhdXRvO1xuICBvdmVyZmxvdy14OiBoaWRkZW47XG59XG4uZmYtY2hpcHMtYWNjb3JkaW9uIC5mZi1jaGlwcy1yb3cuZXhwYW5kZWQ6Oi13ZWJraXQtc2Nyb2xsYmFyIHtcbiAgd2lkdGg6IDBweDtcbn1cbi5mZi1jaGlwcy1hY2NvcmRpb24gLmZmLWNoaXBzLXJvdyAuY2hpcHMtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC13cmFwOiB3cmFwO1xuICBnYXA6IDhweDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgd2lkdGg6IDEwMCU7XG59XG4uZmYtY2hpcHMtYWNjb3JkaW9uIC5mZi1jaGlwcy1yb3cgLmNoaXBzLWNvbnRhaW5lciAuY2hpcCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAycHggNHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdG9hc3QtY2xvc2UtaWNvbi13cmFwcGVyLWJnKTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuMTVzIGVhc2UsIGNvbG9yIDAuMTVzIGVhc2U7XG4gIGNvbG9yOiB2YXIoLS1ubHAtY2hpcHMtYmx1ci10ZXh0LWNvbG9yKTtcbn1cbi5mZi1jaGlwcy1hY2NvcmRpb24gLmZmLWNoaXBzLXJvdyAuY2hpcHMtY29udGFpbmVyIC5jaGlwLnNlbGVjdGVkLWNoaXAge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1ubHAtc2VsZWN0ZWQtY2hpcC1iZyk7XG4gIGNvbG9yOiB2YXIoLS1ubHAtY2hpcHMtc2VsZWN0LXRleHQtY29sb3IpO1xufVxuLmZmLWNoaXBzLWFjY29yZGlvbiAuZmYtY2hpcHMtcm93IC5jaGlwcy1jb250YWluZXItc2Nyb2xsIHtcbiAgaGVpZ2h0OiAyODBweDtcbiAgb3ZlcmZsb3c6IGF1dG87XG59XG4uZmYtY2hpcHMtYWNjb3JkaW9uIC5mZi1jaGlwcy1yb3cgLmNoaXAtdGV4dCB7XG4gIGN1cnNvcjogcG9pbnRlciAhaW1wb3J0YW50O1xufVxuLmZmLWNoaXBzLWFjY29yZGlvbiAuZmYtYXJyb3ctaWNvbi1jb250YWluZXIge1xuICBwYWRkaW5nOiAycHg7XG59XG4uZmYtY2hpcHMtYWNjb3JkaW9uIC5mZi1pY29uLXdyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycyBlYXNlO1xufVxuLmZmLWNoaXBzLWFjY29yZGlvbiAuZmYtaWNvbi13cmFwcGVyLmV4cGFuZGVkIHtcbiAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcbn0iXX0= */");

package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.js

@@ -1,7 +1 @@
-export const nlpDropdownDefaultCSSData = {
-    margin: 6,
-    optionHeight: 32,
-    selectInputHeight: 38,
-    dropDownWrapperPadding: 0,
-};
-//# sourceMappingURL=NlpDropDownType.js.map
+const t={margin:6,optionHeight:32,selectInputHeight:38,dropDownWrapperPadding:0};export{t as nlpDropdownDefaultCSSData};

package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.js

@@ -1,211 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useRef, useState } from 'react';
-import { nlpDropdownDefaultCSSData, } from './NlpDropDownType';
-import useClickOutside from '../../../../hooks/useClickOutside';
-import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
-import './NlpDropdown.scss';
-import Typography from '../../../Typography';
-import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
-import classNames from 'classnames';
-import Icon from '../../../Icon';
-import IconButton from '../../../IconButton';
-import { useIntersectionObserver } from '../../../../hooks/useIntersectionObserver';
-import Tooltip from '../../../Tooltip';
-const NlpDropdown = ({ onSelectBlur, onSelectOptionSelector, dropdownPosition, options = [], optionZIndex = 100, inputRef, webServiceClick = () => { }, containerWidth, loadMoreOptions, chipRef, isWebservice = true, dropDownMessage = '', }) => {
-    const [nlpData, setNlpData] = useState(null);
-    const [showNlpDetails, setShowNlpDetails] = useState('');
-    const themeContext = useContext(ThemeContext);
-    const currentTheme = themeContext?.currentTheme;
-    const optionsWrapperRef = useRef(null);
-    const [focusedIndex, setFocusedIndex] = useState(-1);
-    useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, chipRef]);
-    const { positionX, positionY, width, fromBottom } = dropdownPosition;
-    const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } = nlpDropdownDefaultCSSData;
-    const updateDropdownPosition = () => {
-        let dropdownContainerHeight;
-        if (checkEmpty(options)) {
-            dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
-        }
-        else if (options.length > 0) {
-            dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
-        }
-        else {
-            dropdownContainerHeight =
-                options.length * optionHeight + 2 * dropDownWrapperPadding;
-        }
-        if (fromBottom > dropdownContainerHeight + margin + 80) {
-            return {
-                left: positionX,
-                top: positionY,
-                width: width,
-                zIndex: optionZIndex,
-            };
-        }
-        return {
-            zIndex: optionZIndex,
-            left: positionX,
-            width: width,
-            top: positionY - selectInputHeight - 92 - dropdownContainerHeight - margin,
-        };
-    };
-    const getNLPType = (nlpType) => {
-        let label = '';
-        let className = '';
-        if (nlpType === 'NLP') {
-            label = 'NLP';
-            className = 'ff-nlp';
-        }
-        else if (nlpType === 'STEP_GROUP') {
-            label = 'SG';
-            className = 'ff-sg';
-        }
-        else if (nlpType === 'PROGRAM_ELEMENTS') {
-            label = 'PE';
-            className = 'ff-pe';
-        }
-        else if (nlpType === 'WORKBENCH_REQUEST') {
-            label = 'WS';
-            className = 'ff-ws';
-        }
-        else {
-            label = '--';
-            className = 'nlp-default';
-        }
-        return { label, className };
-    };
-    const getPlatformIcon = ({ platform, nlpType }) => {
-        if (nlpType === 'NLP') {
-            if (platform === 'Web') {
-                return _jsx(Icon, { name: "web_icon", height: 10, width: 10 });
-            }
-            else if (platform === 'Android') {
-                return _jsx(Icon, { name: "android_icon", height: 10, width: 10 });
-            }
-            else if (platform === 'iOS') {
-                return (_jsx(Icon, { name: "ios_icon", height: 10, width: 10, color: "var(--dotted-border-color)" }));
-            }
-            else if (platform === 'Generic') {
-                return _jsx(Icon, { name: "mobile_icon", height: 10, width: 10 });
-            }
-            else {
-                return _jsx(Icon, { name: "common_nlp", height: 10, width: 10 });
-            }
-        }
-        else if (nlpType === 'WORKBENCH_REQUEST') {
-            if (platform === 'Webservice') {
-                return _jsx(Icon, { name: "web_service_icon", height: 8, width: 8 });
-            }
-        }
-        return _jsx(_Fragment, {});
-    };
-    useIntersectionObserver(['ff-nlp-dropdown-pagination'], {
-        root: document.getElementById('ff-nlp-dropdown-options-wrapper'),
-        rootMargin: '0px',
-        threshold: 0.1,
-        onIntersect: (entry, _observer) => {
-            if (entry.isIntersecting) {
-                if (loadMoreOptions) {
-                    loadMoreOptions();
-                }
-            }
-        },
-    });
-    useEffect(() => {
-        if (focusedIndex >= 0 && focusedIndex < options.length) {
-            const newOption = options[focusedIndex];
-            setNlpData(newOption);
-            setShowNlpDetails('show');
-        }
-        else if (focusedIndex >= options.length) {
-            setNlpData(null);
-            setShowNlpDetails('');
-            setFocusedIndex(-1);
-        }
-        const handleKeyDown = (event) => {
-            if (!options.length)
-                return;
-            switch (event.key) {
-                case 'ArrowDown':
-                    event.preventDefault();
-                    setFocusedIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));
-                    break;
-                case 'ArrowUp':
-                    event.preventDefault();
-                    setFocusedIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));
-                    break;
-                case 'Enter':
-                    if (focusedIndex >= 0) {
-                        if (options[focusedIndex]) {
-                            onSelectOptionSelector(options[focusedIndex]);
-                        }
-                    }
-                    break;
-                default:
-                    break;
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [options, focusedIndex]);
-    useEffect(() => {
-        if (focusedIndex < 0)
-            return;
-        const el = document.getElementById(`ff-nlp-option-${focusedIndex}`);
-        if (el) {
-            el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-        }
-    }, [focusedIndex]);
-    useEffect(() => {
-        if (!options?.length)
-            return;
-        const dropdown = optionsWrapperRef.current;
-        if (!dropdown)
-            return;
-        const stopScroll = (e) => {
-            if (dropdown.contains(e.target))
-                return;
-            e.stopPropagation();
-            e.preventDefault();
-        };
-        document.body.addEventListener('wheel', stopScroll, { passive: false });
-        document.body.addEventListener('touchmove', stopScroll, { passive: false });
-        return () => {
-            document.body.removeEventListener('wheel', stopScroll);
-            document.body.removeEventListener('touchmove', stopScroll);
-        };
-    }, [options]);
-    const getDisplayName = (item) => {
-        return (item?.searchName ||
-            item?.displayName ||
-            item?.desc ||
-            item?.name ||
-            item?.nlpName ||
-            '---');
-    };
-    return (_jsx("div", { className: "ff-nlp-dropdown-wrapper", children: _jsxs("div", { ref: optionsWrapperRef, style: { ...updateDropdownPosition(), width: containerWidth }, className: classNames('ff-nlp-options-wrapper', currentTheme), onMouseLeave: () => setShowNlpDetails('hide'), children: [_jsxs("div", { className: "ff-nlp-options-wrapper-main", children: [_jsx("div", { className: "ff-nlp-options-primary-wrapper", id: "ff-nlp-dropdown-options-wrapper", children: !checkEmpty(options) ? (_jsxs(_Fragment, { children: [options.map((option, index) => (_jsx("div", { onMouseEnter: () => {
-                                            setNlpData(option);
-                                            setShowNlpDetails('show');
-                                        }, id: `ff-nlp-option-${index}`, children: _jsx("div", { onMouseEnter: () => setFocusedIndex(index), onClick: () => onSelectOptionSelector(option), onKeyDown: (event) => {
-                                                if (event.key === 'Enter') {
-                                                    onSelectOptionSelector(option);
-                                                }
-                                            }, children: _jsxs(Typography, { as: "div", lineHeight: "30px", fontSize: 12, className: classNames('ff-nlp-option', currentTheme, {
-                                                    'ff-nlp-option--selected': focusedIndex === index,
-                                                }), children: [_jsx(Tooltip, { title: option.platform, children: _jsx("span", { children: _jsx(Typography, { className: `nlp-categories ${getNLPType(option.nlpType).className}`, fontWeight: "regular", fontSize: 8, lineHeight: "32px", children: getNLPType(option.nlpType).label }) }) }), _jsx("span", { children: getPlatformIcon(option) }), getDisplayName(option)] }) }) }, `ff-nlp-option-${index}`))), _jsx("div", { id: "ff-nlp-dropdown-pagination" })] })) : (_jsx(Typography, { textAlign: "center", lineHeight: "32px", as: "p", color: "var(--ff-nlp-text-color)", className: "ff-nlp-no-option", children: checkEmpty(dropDownMessage)
-                                    ? 'No Results Found'
-                                    : dropDownMessage })) }), isWebservice && (_jsx("div", { children: _jsx("div", { className: showNlpDetails === 'show'
-                                    ? 'ff-nlp-web-service-div'
-                                    : 'ff-nlp-primary-web-service-div', children: _jsx(IconButton, { iconName: "plus_user_icon", label: "Web Service", onClick: () => {
-                                        onSelectBlur();
-                                        webServiceClick();
-                                    } }) }) }))] }), _jsx("div", { className: showNlpDetails === 'show' ? 'ff-nlp-data-show' : 'ff-nlp-data-hide', children: _jsxs("div", { className: "ff-nlp-data-side-menu", children: [nlpData?.videoSrc && (_jsxs(Typography, { className: "nlp-details-header", fontWeight: "semi-bold", fontSize: 10, children: ["Video", _jsx("div", { className: "nlp-details ", children: _jsx("video", { src: nlpData.videoSrc, controls: true, className: "nlp-video-player", width: "100%", children: "Your browser does not support the video tag." }) })] })), _jsxs(Typography, { className: "nlp-details-header", fontWeight: "semi-bold", fontSize: 12, children: ["NLP Details", _jsx(Typography, { className: "nlp-details", fontWeight: "regular", fontSize: 12, children: getDisplayName(nlpData) })] }), _jsxs(Typography, { className: "nlp-details-header", fontWeight: "semi-bold", fontSize: 12, children: ["Description", _jsx(Typography, { className: "nlp-details", fontWeight: "regular", fontSize: 12, children: nlpData?.description || '--' })] }), nlpData?.nlpType === 'STEP_GROUP' && (_jsx(_Fragment, { children: _jsxs(Typography, { className: "nlp-details-header", fontWeight: "semi-bold", fontSize: 12, children: ["Path", _jsx(Typography, { className: "nlp-details", fontWeight: "regular", fontSize: 12, children: nlpData?.path ? nlpData?.path : '---' })] }) })), _jsx(Typography, { className: "nlp-details-header", fontWeight: "semi-bold", fontSize: 12, children: "Inputs" }), nlpData?.stepInputs?.length ? (nlpData.stepInputs.map((stepInput, index) => {
-                                const stepInputType = stepInput.type
-                                    ? stepInput?.type?.split('.')?.pop()
-                                    : '--';
-                                return (_jsx("div", { children: _jsxs(Typography, { className: "nlp-details-header", fontWeight: "semi-bold", fontSize: 12, children: ["Input", index + 1, _jsxs(Typography, { className: "nlp-details", fontWeight: "regular", fontSize: 12, children: ["type: ", stepInputType] }), _jsxs(Typography, { className: "nlp-details", fontWeight: "regular", fontSize: 12, children: ["name: ", stepInput.name || '--'] })] }) }, index));
-                            })) : (_jsx("div", { className: "nlp-details", children: "--" })), _jsxs(Typography, { className: "nlp-details-header", fontWeight: "semi-bold", fontSize: 12, children: ["Output", _jsx(Typography, { className: "nlp-details ", fontWeight: "regular", fontSize: 12, children: nlpData?.returnType || '--' })] })] }) })] }) }));
-};
-export default NlpDropdown;
-//# sourceMappingURL=NlpDropdown.js.map
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import{useState as o,useContext as i,useRef as r,useEffect as l}from"react";import{nlpDropdownDefaultCSSData as s}from"./NlpDropDownType.js";import a from"../../../../hooks/useClickOutside.js";import{checkEmpty as d}from"../../../../utils/checkEmpty/checkEmpty.js";import"./NlpDropdown.scss.js";import p from"../../../Typography/Typography.js";import{ThemeContext as c}from"../../../ThemeProvider/ThemeProvider.js";import h from"../../../../_virtual/index.js";import m from"../../../Icon/Icon.js";import f from"../../../IconButton/IconButton.js";import{useIntersectionObserver as u}from"../../../../hooks/useIntersectionObserver.js";import g from"../../../Tooltip/Tooltip.js";const v=({onSelectBlur:v,onSelectOptionSelector:w,dropdownPosition:N,options:b=[],optionZIndex:y=100,inputRef:S,webServiceClick:E=()=>{},containerWidth:W,loadMoreOptions:I,chipRef:T,isWebservice:z=!0,dropDownMessage:P=""})=>{const[k,_]=o(null),[j,x]=o(""),D=i(c),L=D?.currentTheme,O=r(null),[R,B]=o(-1);a(O,v,[S,T]);const{positionX:M,positionY:H,width:C,fromBottom:A}=N,{margin:G,optionHeight:U,selectInputHeight:$,dropDownWrapperPadding:K}=s,Q=e=>{let n="",t="";return"NLP"===e?(n="NLP",t="ff-nlp"):"STEP_GROUP"===e?(n="SG",t="ff-sg"):"PROGRAM_ELEMENTS"===e?(n="PE",t="ff-pe"):"WORKBENCH_REQUEST"===e?(n="WS",t="ff-ws"):(n="--",t="nlp-default"),{label:n,className:t}},V=({platform:n,nlpType:o})=>"NLP"===o?e(m,"Web"===n?{name:"web_icon",height:10,width:10}:"Android"===n?{name:"android_icon",height:10,width:10}:"iOS"===n?{name:"ios_icon",height:10,width:10,color:"var(--dotted-border-color)"}:"Generic"===n?{name:"mobile_icon",height:10,width:10}:{name:"common_nlp",height:10,width:10}):"WORKBENCH_REQUEST"===o&&"Webservice"===n?e(m,{name:"web_service_icon",height:8,width:8}):e(t,{});u(["ff-nlp-dropdown-pagination"],{root:document.getElementById("ff-nlp-dropdown-options-wrapper"),rootMargin:"0px",threshold:.1,onIntersect:(e,n)=>{e.isIntersecting&&I&&I()}}),l(()=>{if(R>=0&&R<b.length){const e=b[R];_(e),x("show")}else R>=b.length&&(_(null),x(""),B(-1));const e=e=>{if(b.length)switch(e.key){case"ArrowDown":e.preventDefault(),B(e=>e<b.length-1?e+1:0);break;case"ArrowUp":e.preventDefault(),B(e=>e>0?e-1:b.length-1);break;case"Enter":R>=0&&b[R]&&w(b[R])}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[b,R]),l(()=>{if(R<0)return;const e=document.getElementById(`ff-nlp-option-${R}`);e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})},[R]),l(()=>{if(!b?.length)return;const e=O.current;if(!e)return;const n=n=>{e.contains(n.target)||(n.stopPropagation(),n.preventDefault())};return document.body.addEventListener("wheel",n,{passive:!1}),document.body.addEventListener("touchmove",n,{passive:!1}),()=>{document.body.removeEventListener("wheel",n),document.body.removeEventListener("touchmove",n)}},[b]);const Y=e=>e?.searchName||e?.displayName||e?.desc||e?.name||e?.nlpName||"---";return e("div",{className:"ff-nlp-dropdown-wrapper",children:n("div",{ref:O,style:{...(()=>{let e;return e=d(b)||b.length>0?5*U+2*K:b.length*U+2*K,A>e+G+80?{left:M,top:H,width:C,zIndex:y}:{zIndex:y,left:M,width:C,top:H-$-92-e-G}})(),width:W},className:h("ff-nlp-options-wrapper",L),onMouseLeave:()=>x("hide"),children:[n("div",{className:"ff-nlp-options-wrapper-main",children:[e("div",{className:"ff-nlp-options-primary-wrapper",id:"ff-nlp-dropdown-options-wrapper",children:d(b)?e(p,{textAlign:"center",lineHeight:"32px",as:"p",color:"var(--ff-nlp-text-color)",className:"ff-nlp-no-option",children:d(P)?"No Results Found":P}):n(t,{children:[b.map((t,o)=>e("div",{onMouseEnter:()=>{_(t),x("show")},id:`ff-nlp-option-${o}`,children:e("div",{onMouseEnter:()=>B(o),onClick:()=>w(t),onKeyDown:e=>{"Enter"===e.key&&w(t)},children:n(p,{as:"div",lineHeight:"30px",fontSize:12,className:h("ff-nlp-option",L,{"ff-nlp-option--selected":R===o}),children:[e(g,{title:t.platform,children:e("span",{children:e(p,{className:`nlp-categories ${Q(t.nlpType).className}`,fontWeight:"regular",fontSize:8,lineHeight:"32px",children:Q(t.nlpType).label})})}),e("span",{children:V(t)}),Y(t)]})})},`ff-nlp-option-${o}`)),e("div",{id:"ff-nlp-dropdown-pagination"})]})}),z&&e("div",{children:e("div",{className:"show"===j?"ff-nlp-web-service-div":"ff-nlp-primary-web-service-div",children:e(f,{iconName:"plus_user_icon",label:"Web Service",onClick:()=>{v(),E()}})})})]}),e("div",{className:"show"===j?"ff-nlp-data-show":"ff-nlp-data-hide",children:n("div",{className:"ff-nlp-data-side-menu",children:[k?.videoSrc&&n(p,{className:"nlp-details-header",fontWeight:"semi-bold",fontSize:10,children:["Video",e("div",{className:"nlp-details ",children:e("video",{src:k.videoSrc,controls:!0,className:"nlp-video-player",width:"100%",children:"Your browser does not support the video tag."})})]}),n(p,{className:"nlp-details-header",fontWeight:"semi-bold",fontSize:12,children:["NLP Details",e(p,{className:"nlp-details",fontWeight:"regular",fontSize:12,children:Y(k)})]}),n(p,{className:"nlp-details-header",fontWeight:"semi-bold",fontSize:12,children:["Description",e(p,{className:"nlp-details",fontWeight:"regular",fontSize:12,children:k?.description||"--"})]}),"STEP_GROUP"===k?.nlpType&&e(t,{children:n(p,{className:"nlp-details-header",fontWeight:"semi-bold",fontSize:12,children:["Path",e(p,{className:"nlp-details",fontWeight:"regular",fontSize:12,children:k?.path?k?.path:"---"})]})}),e(p,{className:"nlp-details-header",fontWeight:"semi-bold",fontSize:12,children:"Inputs"}),k?.stepInputs?.length?k.stepInputs.map((t,o)=>{const i=t.type?t?.type?.split(".")?.pop():"--";return e("div",{children:n(p,{className:"nlp-details-header",fontWeight:"semi-bold",fontSize:12,children:["Input",o+1,n(p,{className:"nlp-details",fontWeight:"regular",fontSize:12,children:["type: ",i]}),n(p,{className:"nlp-details",fontWeight:"regular",fontSize:12,children:["name: ",t.name||"--"]})]})},o)}):e("div",{className:"nlp-details",children:"--"}),n(p,{className:"nlp-details-header",fontWeight:"semi-bold",fontSize:12,children:["Output",e(p,{className:"nlp-details ",fontWeight:"regular",fontSize:12,children:k?.returnType||"--"})]})]})})]})})};export{v as default};