@epam/ai-dial-ui-kit 0.14.0-dev.46 → 0.14.0-dev.48

package/dist/DateCellRenderer-D437_mi0.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react/jsx-runtime"),S=require("./DateCellRenderer-BVM-Q8yx.cjs"),$=require("@tabler/icons-react"),o=require("react"),C=require("./merge-classes-Dipy1Ih1.cjs"),p=require("@floating-ui/react"),ge=require("./icon-DhjrDQ8I.cjs"),oe=require("./icon-CrGVkVpG.cjs"),g=require("./IconButton-DWqoaBWf.cjs"),it=require("classnames");var he=(e=>(e.Top="top",e.Right="right",e.Bottom="bottom",e.Left="left",e))(he||{});const ut=7,dt=2,mt=500,ft="fill-control-inverted",pt="z-[55] max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs",Pe=o.createContext(null),ze=()=>{const e=o.useContext(Pe);if(e==null)throw new Error("Tooltip components must be wrapped in <TooltipContainer />");return e},gt=({initialOpen:e=!1,placement:s=he.Bottom,isTriggerClickable:n=!1,open:r,onOpenChange:i}={})=>{const[u,a]=o.useState(e),d=o.useRef(null),m=r??u,h=i??a,b=p.useFloating({placement:s,open:m,onOpenChange:h,whileElementsMounted:p.autoUpdate,middleware:[p.offset(ut+dt),p.flip({fallbackAxisSideDirection:"start",padding:5}),p.shift({padding:5}),p.arrow({element:d})]}),f=p.useHover(b.context,{move:!1,enabled:r==null,mouseOnly:n,delay:{open:mt,close:0}}),N=p.useFocus(b.context,{enabled:r==null}),I=p.useDismiss(b.context),j=p.useRole(b.context,{role:"tooltip"}),A=p.useInteractions([f,N,I,j]);return o.useEffect(()=>{if(!m)return;const y=b.refs.reference.current;if(!(y instanceof Element))return;const k=new IntersectionObserver(([B])=>{B.isIntersecting||h(!1)},{root:null,threshold:0});return k.observe(y),()=>k.disconnect()},[m,b.refs.reference,h]),o.useMemo(()=>({open:m,setOpen:h,arrowRef:d,...A,...b}),[m,h,A,b])},Re=({children:e,...s})=>{const n=gt(s);return t.jsx(Pe.Provider,{value:n,children:e})},je=({style:e,...s})=>{const n=ze(),r=g.useHasHover(),i=S.useThemeScope(),u=o.useRef(null),a=p.useMergeRefs([n.refs.setFloating,u]);return!n.open||!r?null:t.jsx(p.FloatingPortal,{id:"tooltip-portal",children:t.jsxs("div",{ref:a,"data-placement":n.placement,style:{...n.floatingStyles,...e},...n.getFloatingProps(s),className:it(pt,i,n.getFloatingProps(s).className),children:[s.children,t.jsx(p.FloatingArrow,{ref:n.arrowRef,context:n.context,className:ft})]})})},we=({children:e,asChild:s=!1,...n})=>{const r=ze(),i=s&&o.isValidElement(e),u=i?e.props?.ref:null,a=p.useMergeRefs([r.refs.setReference,...u?[u]:[]]);if(i){const d=e.props;return o.cloneElement(e,r.getReferenceProps({...d,...n,className:C.mergeClasses(d.className,n.className)||void 0,ref:a}))}return t.jsx("span",{ref:a,...r.getReferenceProps(n),className:n.className??"text-start",children:e})},He=({hideTooltip:e=!1,tooltip:s,children:n,asChild:r=!1,triggerClassName:i,contentClassName:u,...a})=>{const d=!e&&!!s;return t.jsxs(Re,{...a,children:[t.jsx(we,{asChild:r,className:i,children:n}),d&&t.jsx(je,{className:u,children:s})]})},Le={[g.ButtonVariant.Primary]:{[g.ButtonAppearance.Solid]:"dial-kit-primary-solid-button",[g.ButtonAppearance.Ghost]:"dial-kit-primary-ghost-button",[g.ButtonAppearance.Link]:"dial-kit-primary-link-button"},[g.ButtonVariant.Neutral]:{[g.ButtonAppearance.Solid]:"dial-kit-neutral-solid-button",[g.ButtonAppearance.Outlined]:"dial-kit-neutral-outlined-button"},[g.ButtonVariant.Danger]:{[g.ButtonAppearance.Solid]:"dial-kit-danger-solid-button",[g.ButtonAppearance.Ghost]:"dial-kit-danger-ghost-button",[g.ButtonAppearance.Outlined]:"dial-kit-danger-outlined-button"},[g.ButtonVariant.Static]:{[g.ButtonAppearance.Solid]:"dial-kit-static-solid-button"},[g.ButtonVariant.Success]:{},[g.ButtonVariant.Secondary]:{},[g.ButtonVariant.Tertiary]:{}},Ve=(e=g.ButtonVariant.Primary,s=g.ButtonAppearance.Solid)=>{const n=Le[e]?.[s];return n||(console.warn(`Could not find Button styles for variant: ${e} and appearance: ${s}. Using default primary solid button styles.`),Le[g.ButtonVariant.Primary][g.ButtonAppearance.Solid])},ht={[g.ElementSize.Small]:"size-[24px]",[g.ElementSize.Standard]:"size-[40px] dial-kit-enhanced-target",[g.ElementSize.Large]:"size-[48px] dial-kit-enhanced-target"},xe=({variant:e,appearance:s=g.ButtonAppearance.Solid,size:n=g.ElementSize.Standard,className:r,icon:i,tooltipProps:u,type:a="button",...d})=>{const m=C.mergeClasses("dial-kit-base-icon-button dial-kit-base-button",e&&Ve(e,s),ht[n],r),h=t.jsx("button",{...d,type:a,className:m,"aria-label":g.resolveAccessibleName(d["aria-label"],u?.tooltip),children:i});return u?t.jsx(He,{asChild:!0,...u,children:h}):h},We=({caption:e,onClick:s,"aria-label":n})=>{if(!e)return null;const r=C.mergeClasses("text-secondary hover:text-control-accent-hover active:text-control-accent-active","focus-visible:outline focus-visible:outline-focus");return t.jsx(xe,{"aria-label":n,className:r,icon:t.jsx($.IconInfoCircle,{size:oe.DIAL_ICON_SIZE.SM,stroke:ge.DIAL_KIT_ICON_STROKE,"aria-hidden":"true"}),onClick:s,size:g.ElementSize.Small,tooltipProps:{tooltip:e}})},Ae=({label:e,required:s,className:n,containerClassName:r,caption:i,size:u=g.ElementSize.Small,...a})=>e?t.jsxs("span",{className:C.mergeClasses("flex items-center gap-0.5",r),children:[t.jsxs("label",{...a,className:C.mergeClasses("text-secondary flex items-center gap-0.5",u===g.ElementSize.Small?"dial-tiny-semi-text":"dial-small-text",n),children:[typeof e=="string"?t.jsx("span",{className:"min-h-4",children:e}):e,s&&t.jsxs(t.Fragment,{children:[t.jsx("span",{"aria-hidden":"true",className:"text-error dial-tiny-text",children:"*"}),t.jsx("span",{className:"sr-only",children:"(required)"})]})]}),t.jsx(We,{caption:i})]}):null;var O=(e=>(e.None="none",e.Check="check",e.Tint="tint",e.Checkbox="checkbox",e.Highlight="highlight",e))(O||{});const _e=(e,s)=>({appearance:r,...i})=>t.jsx(xe,{...i,variant:e,appearance:r||s}),Ue=(e,s)=>({variant:r,...i})=>t.jsx(xe,{...i,variant:r||s,appearance:e}),xt=_e(g.ButtonVariant.Primary,g.ButtonAppearance.Solid),Ct=_e(g.ButtonVariant.Neutral,g.ButtonAppearance.Solid),bt=_e(g.ButtonVariant.Danger,g.ButtonAppearance.Ghost),Ke=Ue(g.ButtonAppearance.Ghost,g.ButtonVariant.Primary),St=Ue(g.ButtonAppearance.Solid,g.ButtonVariant.Static),$e=({ariaLabel:e="Close",className:s,size:n=g.ElementSize.Small,onClose:r,...i})=>t.jsx(Ke,{...i,size:n,"aria-label":e,className:s,onClick:r,icon:t.jsx($.IconX,{size:n===g.ElementSize.Small?oe.DIAL_ICON_SIZE.SM:oe.DIAL_ICON_SIZE.MD,stroke:ge.DIAL_KIT_ICON_STROKE,"aria-hidden":"true"})}),Nt=e=>{const s=o.useRef(null),[n,r]=o.useState(!1),[i,u]=o.useState(""),a=o.useRef(!1),d=o.useCallback(()=>{const h=s.current;h&&(a.current&&u(h.textContent??""),r(h.scrollWidth>h.clientWidth))},[]),m=o.useCallback(()=>S.scheduleMeasure(d),[d]);return o.useEffect(()=>{const h=s.current;if(h)return S.observeElementSize(h,d)},[d]),o.useEffect(()=>{a.current=typeof e!="string",m()},[e,m]),{ref:s,isTruncated:n,textContent:i,remeasure:m}},Ce=({text:e,className:s,contentClassName:n,hideTooltip:r=!1,id:i,customTooltipContent:u,...a})=>{const{ref:d,isTruncated:m,textContent:h,remeasure:b}=Nt(e),f=typeof e=="string"?e:h,N=o.useMemo(()=>r||!m?null:u??f,[u,f,r,m]);return t.jsxs(Re,{...a,children:[t.jsx(we,{asChild:!0,onMouseEnter:b,onFocusCapture:b,children:t.jsx("span",{id:i,ref:d,"aria-label":m&&f?f:void 0,className:C.mergeClasses("block min-w-0 max-w-full flex-1 truncate text-start",s),children:e})}),!!N&&t.jsx(je,{className:n,children:N})]})},vt=8,Et=400,It="z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md",me=({content:e,placement:s=he.Right,children:n,asChild:r=!1,hideTooltip:i=!1,initialOpen:u=!1,open:a,onOpenChange:d,triggerClassName:m,contentClassName:h})=>{const b=S.useIsMobileScreen(),f=S.useThemeScope(),[N,I]=o.useState(u),j=a??N,A=D=>{d?.(D),a==null&&I(D)},y=p.useFloatingNodeId(),{refs:k,floatingStyles:B,context:F}=p.useFloating({nodeId:y,placement:s,open:j,onOpenChange:A,whileElementsMounted:p.autoUpdate,middleware:[p.offset(vt),p.flip({padding:5}),p.shift({padding:5})]}),X=p.useHover(F,{enabled:a==null,handleClose:p.safePolygon(),delay:{open:Et,close:0}}),R=p.useFocus(F,{enabled:a==null}),H=p.useDismiss(F),{getReferenceProps:V,getFloatingProps:E}=p.useInteractions([X,R,H]),ee=o.useRef(null),te=p.useMergeRefs(o.useMemo(()=>[k.setFloating,ee],[k.setFloating])),Z=r&&o.isValidElement(n),L=Z?n.props?.ref:null,w=p.useMergeRefs(o.useMemo(()=>[k.setReference,...L?[L]:[]],[k.setReference,L])),P=!i&&!b&&!!e,M=Z?o.cloneElement(n,V({...n.props,ref:w,className:C.mergeClasses(n.props.className,m)||void 0})):t.jsx("span",{ref:w,...V(),className:m??"text-start",children:n});return t.jsxs(t.Fragment,{children:[M,j&&P&&t.jsx(p.FloatingPortal,{id:"interactive-tooltip-portal",children:t.jsx(p.FloatingFocusManager,{context:F,modal:!1,initialFocus:-1,returnFocus:!1,order:["reference","content"],children:t.jsx("div",{ref:te,"data-placement":F.placement,style:B,...E(),className:C.mergeClasses(It,f,h),children:e})})})]})},qe="rounded-xl bg-layer-raised p-1 shadow-md",Xe=C.mergeClasses(qe,"w-max"),Ze=C.mergeClasses("flex w-full cursor-pointer items-center gap-2 px-3 h-[40px] rounded-lg","dial-small-text text-primary truncate","hover:bg-control-accent-alpha-hover","focus-visible:outline focus-visible:outline-focus"),Ye="bg-control-accent-alpha",yt=C.mergeClasses(Ye,"text-accent"),kt=C.mergeClasses("cursor-not-allowed text-control-disable-primary","bg-transparent hover:bg-transparent"),Je=4,Tt=C.mergeClasses("flex items-center gap-2 align-middle","h-auto px-0 bg-transparent border-0"),Rt=C.mergeClasses("z-[53] focus-visible:outline-none",qe),jt=Xe,wt="my-1 border-t border-tertiary",Q=Je,At=t.jsx($.IconChevronRight,{size:oe.DIAL_ICON_SIZE.SM,stroke:ge.DIAL_KIT_ICON_STROKE,"aria-hidden":"true"}),Me={size:14,stroke:3,"aria-hidden":!0},De=({isSelected:e=!1,isIndeterminate:s=!1,invalid:n=!1,disabled:r=!1,htmlFor:i,className:u})=>{const a=s||e,d=!!i,m=C.mergeClasses("grid size-[20px] shrink-0 place-items-center rounded border transition-colors duration-200",d&&"dial-kit-minimum-target",d&&"peer-focus-visible:outline peer-focus-visible:outline-focus",r?"border-transparent bg-control-disable-primary text-control-disable-primary":C.mergeClasses(n&&a&&"border-transparent bg-control-error text-control-permanent",n&&!a&&"border-error bg-control-neutral",!n&&a&&"border-transparent bg-control-accent text-control-permanent hover:bg-control-accent-hover",!n&&!a&&"border-default bg-control-neutral hover:border-accent hover:bg-control-accent-alpha-hover"),r?"cursor-not-allowed":d&&"cursor-pointer",u),h=s?t.jsx($.IconMinus,{...Me}):e&&t.jsx($.IconCheck,{...Me});return d?t.jsx("label",{htmlFor:i,className:m,children:h}):t.jsx("span",{"aria-hidden":"true",className:m,children:h})},_t=t.jsx($.IconCheck,{size:oe.DIAL_ICON_SIZE.SM,stroke:ge.DIAL_KIT_ICON_STROKE,className:"shrink-0","aria-hidden":!0}),fe=({label:e,icon:s,description:n,mark:r=O.None,selected:i=!1,danger:u=!1,trailing:a,rightControl:d,ellipsisLabel:m=!1,labelClassName:h,children:b,className:f,disabled:N=!1,type:I="button",...j})=>{const A=i&&r===O.Highlight,y=i&&(r===O.Checkbox||r===O.Tint),k=C.mergeClasses(u&&"text-error",N&&"text-control-disable-primary"),B=C.mergeClasses(Ze,"aria-expanded:bg-control-accent-alpha-hover",A&&yt,y&&Ye,N&&kt,u&&"text-error",f),F=t.jsxs("button",{type:I,disabled:N,"data-menu-item-row":d?"":void 0,className:d?"flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-none":B,...j,children:[b??t.jsxs(t.Fragment,{children:[r===O.Checkbox&&t.jsx(De,{isSelected:i,disabled:N}),s&&t.jsx(S.DialIcon,{icon:s,className:k}),m?t.jsx(Ce,{text:e,className:C.mergeClasses(k,h)}):t.jsx("span",{className:C.mergeClasses("min-w-0 flex-1 truncate text-start",k,h),children:e}),n&&t.jsx("span",{className:C.mergeClasses("shrink-0 text-secondary dial-small-text",N&&"text-control-disable-primary"),children:n}),i&&r===O.Check&&_t]}),a&&t.jsx("span",{className:C.mergeClasses("ml-auto shrink-0",k),children:a})]});return d?t.jsxs("div",{role:"none",className:C.mergeClasses(B,"has-[[data-menu-item-row]:focus-visible]:outline","has-[[data-menu-item-row]:focus-visible]:outline-focus"),children:[F,d]}):F},pe=e=>e.mark??(e.selectable?O.Checkbox:O.None),Qe=e=>e.selectable?"menuitemcheckbox":pe(e)===O.Check?"menuitemradio":"menuitem",Dt=({item:e,onRootClose:s})=>{const{isOpen:n,nodeId:r,refs:i,floatingStyles:u,context:a,getReferenceProps:d,getFloatingProps:m}=S.useSubMenuFloating(Q,"menu",!!e.disabled),h=o.useCallback(f=>N=>{f.disabled||(f.onClick?.({key:f.key,domEvent:N}),f.selectable||s())},[s]),b=t.jsx(fe,{ref:i.setReference,role:"menuitem","aria-haspopup":"menu","aria-expanded":n,"aria-disabled":!!e.disabled,disabled:e.disabled,icon:e.icon,label:e.label,trailing:At,className:e.className,...d(),children:e.renderItem?.(e)});return t.jsxs(p.FloatingNode,{id:r,children:[e.interactiveTooltip?t.jsx(me,{asChild:!0,placement:e.interactiveTooltip.placement,content:e.interactiveTooltip.content,contentClassName:e.interactiveTooltip.contentClassName,children:b}):b,n&&t.jsx(S.SubMenuPanel,{refs:i,floatingStyles:u,context:a,getFloatingProps:m,role:"menu",surfaceClassName:jt,children:e.renderSubMenu?e.renderSubMenu():t.jsxs(t.Fragment,{children:[e.menuHeader&&(typeof e.menuHeader=="function"?e.menuHeader():e.menuHeader),e.children.map(f=>{const N=Qe(f),I=t.jsx(fe,{role:N,"aria-checked":N==="menuitem"?void 0:!!f.checked,"aria-current":pe(f)===O.Highlight&&f.checked?!0:void 0,"aria-disabled":!!f.disabled,disabled:f.disabled,mark:pe(f),selected:!!f.checked,danger:f.danger,icon:f.icon,label:f.label,className:f.className,rightControl:f.rightControl,onClick:h(f),children:f.renderItem?.(f)});return t.jsx(o.Fragment,{children:f.interactiveTooltip?t.jsx(me,{asChild:!0,placement:f.interactiveTooltip.placement,content:f.interactiveTooltip.content,contentClassName:f.interactiveTooltip.contentClassName,children:I}):I},f.key)}),e.menuFooter&&(typeof e.menuFooter=="function"?e.menuFooter():e.menuFooter)]})})]})},Ot='[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]',Bt=e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-disabled")!=="true",Ft=["ArrowDown","ArrowUp","Home","End"],Lt=(e,s,n)=>{if(e==="Home")return 0;if(e==="End")return n-1;const r=e==="ArrowDown"?1:-1;return s===-1?r===1?0:n-1:(s+r+n)%n},Mt=e=>"clientWidth"in e?e.clientWidth:e.getBoundingClientRect?.()?.width??0,et=({children:e,items:s,onItemClick:n,menuHeader:r,menuFooter:i,renderOverlay:u,trigger:a=[S.DropdownTrigger.Click],placement:d,disabled:m=!1,open:h,defaultOpen:b=!1,onOpenChange:f,closable:N=!1,onClose:I,className:j,overlayContentClassName:A,separatorClassName:y,listClassName:k,outsidePressIgnoreRef:B,outsideClosable:F=!0,allowedPlacements:X,anchorToMouse:R=!1,matchReferenceWidth:H=!0,maxDropdownHeight:V,initialFocus:E})=>{const ee=S.useThemeScope(),[te,Z]=o.useState(b),L=h!==void 0,w=L?!!h:te,P=o.useRef(null),[M,D]=o.useState(!0),T=o.useCallback((l,v,c)=>{l&&D(c!=="hover"&&c!=="safe-polygon"),L||Z(l),f?.(l)},[L,f]),ne=o.useId(),be=d===void 0,ae=p.useFloatingNodeId(),{refs:W,floatingStyles:U,context:G}=p.useFloating({nodeId:ae,placement:d,open:w,onOpenChange:T,whileElementsMounted:p.autoUpdate,middleware:[p.offset({mainAxis:Q,crossAxis:0}),be?p.autoPlacement({alignment:"start",crossAxis:!0,padding:Q,allowedPlacements:X}):p.flip({padding:Q}),p.shift({padding:Q}),p.size({padding:Q,apply({availableWidth:l,availableHeight:v,elements:c}){const x=c.floating,_=Mt(c.reference);x.style.setProperty("--fui-available-height",`${Math.floor(v)}px`),x.style.setProperty("--reference-width",H?`${Math.round(_)}px`:"0px"),H?x.style.minWidth=`${Math.round(_)}px`:x.style.removeProperty("min-width"),x.style.maxWidth=`${Math.floor(l)}px`;const K=Math.floor(v);x.style.maxHeight=`${V?Math.min(K,V):K}px`}})]}),se=p.useClick(G,{enabled:a.includes(S.DropdownTrigger.Click)&&!m}),Y=p.useHover(G,{enabled:a.includes(S.DropdownTrigger.Hover)&&!m,move:!1,restMs:40,handleClose:p.safePolygon(),delay:{open:80,close:80}}),Se=p.useDismiss(G,{bubbles:!0,referencePress:!1,outsidePress:l=>{if(!F)return!1;const v=l.target;return!(B?.current&&v instanceof Node&&B.current.contains(v))}}),re=p.useRole(G,{role:"menu"}),{getReferenceProps:le,getFloatingProps:Ne}=p.useInteractions([se,Y,Se,re]),q=o.useCallback((l,v)=>{W.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:l,y:v,top:v,left:l,right:l,bottom:v})})},[W]),J=o.useCallback(l=>{!a.includes(S.DropdownTrigger.ContextMenu)||m||(l.preventDefault(),R&&(q(l.clientX,l.clientY),P.current=document.elementFromPoint(l.clientX,l.clientY)),T(!0))},[R,m,T,q,a]),ve=o.useCallback(l=>{!R||m||(a.includes(S.DropdownTrigger.ContextMenu)&&w&&T(!1),q(l.clientX,l.clientY),P.current=document.elementFromPoint(l.clientX,l.clientY))},[R,m,q,w,a,T]);o.useEffect(()=>{m&&w&&T(!1)},[m,w,T]);const Ee=o.useCallback(l=>{if(l.defaultPrevented||!Ft.includes(l.key))return;const v=Array.from(l.currentTarget.querySelectorAll(Ot)).filter(Bt);if(v.length===0)return;l.preventDefault();const c=l.currentTarget.ownerDocument.activeElement,x=v.findIndex(_=>_===c);v[Lt(l.key,x,v.length)]?.focus()},[]),ce=o.useCallback(l=>v=>{l.disabled||(l.onClick?.({key:l.key,domEvent:v}),n?.({key:l.key,domEvent:v}),l.selectable||T(!1))},[n,T]),Ie=o.useMemo(()=>u?u():s?t.jsxs(t.Fragment,{children:[r&&t.jsx(t.Fragment,{children:typeof r=="function"?r():r}),t.jsx("div",{role:"none",className:C.mergeClasses("py-1",A),"aria-label":"dropdown",children:s.map(l=>{if(l.type===S.DropdownItemType.Divider)return t.jsx("div",{role:"separator",className:C.mergeClasses(wt,y)},l.key);if(l.type===S.DropdownItemType.PlainText)return t.jsx("div",{className:C.mergeClasses("px-3 py-2 text-secondary dial-caption-text",l.className),children:l.label},l.key);if(l.children?.length)return t.jsx(Dt,{item:l,onRootClose:()=>T(!1)},l.key);const v=pe(l),c=Qe(l),x=t.jsx(fe,{role:c,"aria-checked":c==="menuitem"?void 0:!!l.checked,"aria-current":v===O.Highlight&&l.checked?!0:void 0,"aria-disabled":!!l.disabled,disabled:l.disabled,mark:v,selected:!!l.checked,danger:l.danger,icon:l.icon,label:l.label,className:l.className,rightControl:l.rightControl,onClick:ce(l),children:l.renderItem?.(l)});return t.jsx(o.Fragment,{children:l.interactiveTooltip?t.jsx(me,{asChild:!0,placement:l.interactiveTooltip.placement,content:l.interactiveTooltip.content,contentClassName:l.interactiveTooltip.contentClassName,children:x}):x},l.key)})}),i&&t.jsx(t.Fragment,{children:typeof i=="function"?i():i})]}):null,[ce,s,i,r,u,T,A,y]),ie=le({onContextMenu:J,onMouseDown:ve});return o.useEffect(()=>{if(!w)return;const l=W.reference.current;let v=null;if(l instanceof Element?v=l:P.current instanceof Element&&(v=P.current),!v)return;const c=new IntersectionObserver(([x])=>{x.isIntersecting||T(!1)},{root:null,threshold:0});return c.observe(v),()=>c.disconnect()},[w,W.reference,T]),t.jsx(p.FloatingTree,{children:t.jsxs(p.FloatingNode,{id:ae,children:[t.jsx("span",{ref:W.setReference,className:C.mergeClasses(Tt,m&&"!cursor-not-allowed opacity-75",j),"aria-haspopup":"menu","aria-expanded":w,"aria-controls":ne,...ie,children:e}),w&&t.jsx(p.FloatingPortal,{children:t.jsx(p.FloatingFocusManager,{context:G,modal:!1,initialFocus:E!==void 0?E:M?0:-1,returnFocus:!0,children:t.jsxs("div",{id:ne,ref:W.setFloating,style:U,className:C.mergeClasses(Rt,!H&&"w-max","overflow-auto",ee,k),...Ne({onKeyDown:Ee}),children:[N&&t.jsx("div",{className:"flex items-center justify-between px-2 pt-2",children:t.jsx($e,{ariaLabel:"Close dropdown",onClose:l=>{I?.(l),T(!1)}})}),Ie]})})})]})})},Oe=({id:e,labelProps:s,isSelected:n=!1,isIndeterminate:r=!1,invalid:i=!1,disabled:u,onChange:a,caption:d,className:m,boxClassName:h,...b})=>{const f=o.useId(),N=e??f,I=d?`${N}-caption`:void 0,j=o.useCallback(y=>{a?.(y.target.checked)},[a]),A=o.useCallback(y=>{y&&(y.indeterminate=r)},[r]);return t.jsxs("div",{className:"flex flex-col gap-1",children:[t.jsxs("div",{className:C.mergeClasses("flex items-center gap-2",m),children:[t.jsx("input",{...b,ref:A,type:"checkbox",id:N,checked:n,disabled:u,onChange:j,"aria-checked":r?"mixed":n,"aria-invalid":i||void 0,"aria-label":g.resolveAccessibleName(typeof s?.label!="string"?b["aria-label"]:void 0),"aria-describedby":I,className:"peer sr-only"}),t.jsx(De,{htmlFor:N,isSelected:n,isIndeterminate:r,invalid:i,disabled:u,className:h}),s&&t.jsx(Ae,{size:g.ElementSize.Standard,...s,htmlFor:N,className:C.mergeClasses("py-[1px]",u?"cursor-not-allowed text-control-disable-primary":"cursor-pointer text-primary",s.className)})]}),d&&t.jsx("span",{id:I,className:"dial-tiny-text text-secondary ml-[28px]",children:d})]})},tt=({id:e,name:s,value:n,labelProps:r,isSelected:i=!1,disabled:u,onChange:a,caption:d,className:m,...h})=>{const b=o.useId(),f=e??b,N=d?`${f}-caption`:void 0,I=o.useCallback(j=>{j.target.checked&&a?.(n)},[a,n]);return t.jsxs("div",{className:"flex flex-col gap-1",children:[t.jsxs("div",{className:C.mergeClasses("flex items-center gap-2 ",m),children:[t.jsx("input",{...h,type:"radio",id:f,name:s,value:n,checked:i,disabled:u,onChange:I,"aria-label":g.resolveAccessibleName(typeof r?.label!="string"?h["aria-label"]:void 0),"aria-describedby":N,className:"peer sr-only"}),t.jsx("label",{htmlFor:f,className:C.mergeClasses("group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200 hover:bg-control-accent-alpha-hover","dial-kit-minimum-target","peer-focus-visible:outline peer-focus-visible:outline-focus",u?"cursor-not-allowed border-default bg-control-disable-primary":C.mergeClasses("cursor-pointer",i?"border border-accent bg-control-neutral":"border-default bg-control-neutral")),children:i&&t.jsx("span",{className:C.mergeClasses("size-3 rounded-full",u?"bg-control-disable-secondary":"bg-control-accent")})}),r&&t.jsx(Ae,{size:g.ElementSize.Standard,...r,htmlFor:f,className:C.mergeClasses("py-[1px]",u?"cursor-not-allowed text-control-disable-primary":"cursor-pointer text-primary",r.className)})]}),d&&t.jsx("span",{id:N,className:"dial-tiny-text text-secondary ml-[26px]",children:d})]})},Gt=60,nt=({title:e,description:s,icon:n,live:r=!1,className:i,titleClassName:u,descriptionClassName:a})=>t.jsxs("div",{role:r?"status":void 0,className:C.mergeClasses("flex size-full flex-col items-center justify-center gap-2 text-tertiary",i),children:[n??t.jsx($.IconClipboardX,{size:Gt,stroke:.5,"aria-hidden":"true"}),t.jsx("span",{className:C.mergeClasses("dial-body-semi-text text-primary",u),children:e}),s&&t.jsx("span",{className:C.mergeClasses("dial-small-text text-secondary",a),children:s})]}),st="dial-kit-grid",Pt="dial-kit-grid-with-selection",zt="dial-kit-grid-without-header-borders",Ht="dial-kit-grid-row-select",Vt="dial-kit-grid-header-select",Wt="dial-kit-grid-selection-visible",Ut="dial-kit-grid-align-right",Te=40,ye="0.5px solid var(--stroke-tertiary, #E0E6F0)",de={accentColor:"var(--bg-control-accent, #1D4ED8)",backgroundColor:"var(--bg-layer-raised, #FCFCFC)",oddRowBackgroundColor:"var(--bg-layer-sunken, #EEF1F7)",selectedRowBackgroundColor:"var(--bg-control-accent-alpha, #2764D90F)",rowHoverColor:"var(--bg-control-accent-alpha-hover, #2764D924)",borderColor:"var(--stroke-tertiary, #E0E6F0)",rowBorder:ye,headerRowBorder:ye,headerColumnBorder:ye,chromeBackgroundColor:"var(--bg-layer-base, #F5F7FA)",foregroundColor:"var(--text-primary, #161B2D)",headerTextColor:"var(--text-secondary, #57647A)",browserColorScheme:"light",headerFontSize:14,headerFontWeight:600,fontSize:14,fontFamily:"var(--theme-font, var(--font-inter))",spacing:4,borderRadius:4,wrapperBorderRadius:8};var z=(e=>(e.API="api",e.ROW_DATA_CHANGED="rowDataChanged",e.CHECKBOX_SELECTED="checkboxSelected",e))(z||{});const Kt=({params:e,mode:s,label:n,radioName:r,rowId:i,disabled:u})=>{const a=e.node,[d,m]=o.useState(()=>!!a.isSelected());o.useEffect(()=>{const b=()=>m(!!a.isSelected());return b(),a.addEventListener("rowSelected",b),()=>a.removeEventListener("rowSelected",b)},[a]);const h=b=>{u||a.setSelected(b,s===S.GridSelectionMode.SINGLE,z.CHECKBOX_SELECTED)};return s===S.GridSelectionMode.SINGLE?t.jsx(tt,{name:r,value:i,isSelected:d,disabled:u,"aria-label":n,onChange:()=>h(!0)}):t.jsx(Oe,{isSelected:d,disabled:u,"aria-label":n,onChange:h})},Ge=e=>{let s=0,n=0;return e.forEachNodeAfterFilter(r=>{r.selectable!==!1&&(n++,r.isSelected()&&s++)}),{selected:s,selectable:n}},$t=({api:e,label:s})=>{const[{selected:n,selectable:r},i]=o.useState(()=>Ge(e));o.useEffect(()=>{const a=()=>i(Ge(e));return a(),e.addEventListener("selectionChanged",a),e.addEventListener("modelUpdated",a),()=>{e.isDestroyed()||(e.removeEventListener("selectionChanged",a),e.removeEventListener("modelUpdated",a))}},[e]);const u=o.useCallback(a=>{if(a){e.selectAll("filtered",z.CHECKBOX_SELECTED);return}e.deselectAll("filtered",z.CHECKBOX_SELECTED)},[e]);return t.jsx(Oe,{isSelected:r>0&&n===r,isIndeterminate:n>0&&n<r,disabled:r===0,"aria-label":s,onChange:u})},rt="en-US",ot={year:"numeric",month:"numeric",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"},ke=40,qt={minWidth:ke,width:ke,maxWidth:ke,resizable:!1,sortable:!1,filter:!1,floatingFilter:!1,suppressMovable:!0,suppressHeaderMenuButton:!0,suppressAutoSize:!0,suppressSizeToFit:!0},at="dial-kit-grid-selection",Xt=150,Zt=100,Yt=({columnDefs:e,rowData:s,additionalGridOptions:n,getContextMenuItems:r,className:i,ariaLabel:u="Data grid",wrapCustomCellRenderers:a=!0,disabledRowIds:d,selectedRowIds:m,onSelectionChange:h,onGridApiChange:b,getRowId:f,alternateOddRowColors:N=!1,filterPlaceholder:I="Enter value",emptyStateIcon:j,emptyStateTitle:A="No results found",emptyStateDescription:y="Sorry, we couldn't find any results for your search.",loading:k=!1,wrapperBorder:B=!0,withoutHeaderBorders:F=!1,allowDisabledContextMenu:X=!1,selectionMode:R,selectRowLabel:H,selectAllLabel:V="Select all rows"})=>{S.registerAgGridModulesOnce();const[E,ee]=o.useState(),te=S.useIsMobileScreen(),Z=S.useIsTabletScreen(),L=o.useRef(new Set),w=o.useRef(void 0),P=`dial-kit-grid-selection-${o.useId()}`,M=o.useRef({getRowId:f,getContextMenuItems:r,onSelectionChange:h,selectRowLabel:H,wrapCustomCellRenderers:a});M.current={getRowId:f,getContextMenuItems:r,onSelectionChange:h,selectRowLabel:H,wrapCustomCellRenderers:a};const D=o.useCallback(c=>{const x=M.current.getRowId;return x?x(c):String(c.id??JSON.stringify(c))},[]),T=!!r,ne=!!a,be=o.useMemo(()=>S.themeBalham.withPart(S.colorSchemeLight).withParams({...de,oddRowBackgroundColor:N?de.oddRowBackgroundColor:de.backgroundColor,wrapperBorder:B}),[N,B]),ae=o.useCallback(c=>{c.api.sizeColumnsToFit()},[]),W=te||Z||(m?.size??0)>0,U=o.useCallback(c=>!!c&&!!d?.has(D(c)),[d,D]),G=o.useCallback((c,x,_)=>T?t.jsx(et,{trigger:[S.DropdownTrigger.ContextMenu],items:c.data?M.current.getContextMenuItems?.(c.data)??[]:[],anchorToMouse:!0,matchReferenceWidth:!0,className:C.mergeClasses("size-full",_&&"cursor-not-allowed opacity-75"),disabled:_&&!X,children:t.jsx("span",{className:"block min-w-0 max-w-full flex-1",children:x})}):x,[T,X]),se=o.useCallback(c=>{if(!c.data)return null;const x=U(c.data);return G(c,t.jsx(Ce,{text:c.value==null?"":String(c.value),className:"max-w-full dial-small-text text-primary",hideTooltip:x}),x)},[U,G]),Y=o.useCallback(c=>c===z.API||c===z.ROW_DATA_CHANGED,[]),Se=o.useMemo(()=>S.debounceFn(c=>{const _=(c.selectedNodes??[]).map(Be=>Be.data),K=new Set(_.map(D));L.current=K,w.current=c.source,!Y(c.source)&&M.current.onSelectionChange?.(K,_)},Zt),[Y,D]),re=o.useMemo(()=>{if(R)return{...qt,colId:at,headerName:"",headerClass:Vt,cellClass:Ht,headerComponent:R===S.GridSelectionMode.MULTIPLE?$t:void 0,headerComponentParams:{label:V},cellRenderer:c=>{if(!c.data)return null;const x=D(c.data);return t.jsx(Kt,{params:c,mode:R,rowId:x,radioName:P,label:M.current.selectRowLabel?.(c.data)??"Select row",disabled:d?.has(x)})}}},[R,V,D,d,P]),le=o.useCallback(c=>{if(!c.cellRenderer)return{...c,cellRenderer:se};const x=M.current.wrapCustomCellRenderers;if(!(typeof x=="function"?x(c):!!x))return c;const K=c.cellRenderer;return{...c,cellRenderer:ue=>{const lt=U(ue.data),Fe=typeof K=="function"?K:void 0,ct=Fe?t.jsx(Fe,{...ue}):se(ue);return G(ue,ct,lt)}}},[U,se,G]),Ne=o.useMemo(()=>{const c=ne?(e??[]).map(le):e??[];return re?[re,...c]:c},[e,ne,le,re]),{defaultColDef:q,rowSelection:J,...ve}=n??{},Ee=o.useMemo(()=>({minWidth:Xt,resizable:!0,sortable:!0,floatingFilter:!0,filter:"agTextColumnFilter",filterParams:{filterPlaceholder:I,buttons:["reset"]},comparator:S.baseColumnComparator,...S.omitUndefined(q)}),[I,q]),ce=c=>{c.api.sizeColumnsToFit(),ee(c.api),n?.onGridReady?.(c),b?.(c.api)};o.useEffect(()=>{E&&s&&E.setGridOption("rowData",s)},[E,s]);const Ie=o.useCallback(()=>t.jsx(nt,{live:!0,title:A,description:y,icon:j??t.jsx($.IconZoomCancel,{size:100,stroke:.5,"aria-hidden":"true"})}),[A,y,j]),ie=typeof J=="object"?J:void 0,l=o.useMemo(()=>R?{isRowSelectable:c=>!U(c.data),...ie,mode:R===S.GridSelectionMode.SINGLE?"singleRow":"multiRow",checkboxes:!1,headerCheckbox:!1}:J,[J,ie,U,R]);o.useEffect(()=>{E&&s&&L.current.size&&L.current.forEach(c=>{const x=E.getRowNode(c);x&&!x.isSelected()&&x.setSelected(!0,!1,z.API)})},[E,s]),o.useEffect(()=>{E&&m&&(E.deselectAll("all",z.API),m.forEach(c=>{const x=E.getRowNode(c);x&&!x.isSelected()&&x.setSelected(!0,!1,z.API)}))},[E,m]);const v=o.useCallback(c=>c.data?D(c.data):"",[D]);return o.useEffect(()=>{const c=Y(w.current);if(E&&m?.size&&c){const x=Array.from(m)[0];if(x){const _=E.getRowNode(x);_&&E.ensureNodeVisible(_)}}},[E,Y,m]),t.jsx("div",{className:C.mergeClasses(st,"size-full",R&&Pt,R&&W&&Wt,F&&zt,i),role:"region","aria-label":u,"aria-busy":k,children:t.jsx("div",{className:"h-full overflow-x-auto",children:t.jsx(S.AgGridReact,{rowModelType:"clientSide",headerHeight:Te,rowHeight:Te,cellSelection:!1,theme:be,autoSizeStrategy:{type:"fitGridWidth"},columnDefs:Ne,defaultColDef:Ee,onGridSizeChanged:ae,onGridReady:ce,loading:k,suppressCellFocus:!0,suppressDragLeaveHidesColumns:!0,noRowsOverlayComponent:Ie,rowData:s,rowSelection:l,onSelectionChanged:Se,getRowId:v,...ve})})})},Jt=({value:e,locale:s=rt,options:n=ot,emptyPlaceholder:r,className:i,hideTooltip:u=!1})=>{const a=S.convertToDate(e),d=o.useMemo(()=>a?new Intl.DateTimeFormat(s,n).format(a):r,[a,r,s,n]),m=a?a.toISOString():void 0;return t.jsx(Ce,{text:m?t.jsx("time",{dateTime:m,children:d}):t.jsx("span",{children:d}),className:C.mergeClasses("dial-small-text text-primary",i),hideTooltip:u})};exports.Checkbox=Oe;exports.CheckboxBox=De;exports.CloseButton=$e;exports.DEFAULT_DATE_FORMAT_OPTIONS=ot;exports.DEFAULT_LOCALE=rt;exports.DangerIconButton=bt;exports.DateCellRenderer=Jt;exports.Dropdown=et;exports.EllipsisTooltip=Ce;exports.GRID_ALIGN_RIGHT_CLASS=Ut;exports.GRID_ROOT_CLASS=st;exports.GRID_SELECTION_COLUMN_ID=at;exports.GRID_THEME_PARAMS=de;exports.GhostIconButton=Ke;exports.Grid=Yt;exports.IconButton=xe;exports.InfoButton=We;exports.InteractiveTooltip=me;exports.Label=Ae;exports.MenuItem=fe;exports.MenuItemMark=O;exports.NeutralIconButton=Ct;exports.NoDataContent=nt;exports.PrimaryIconButton=xt;exports.ROW_HEIGHT=Te;exports.Radio=tt;exports.StaticIconButton=St;exports.Tooltip=He;exports.TooltipContainer=Re;exports.TooltipContent=je;exports.TooltipPlacement=he;exports.TooltipTrigger=we;exports.getButtonClassNames=Ve;exports.overlayGap=Je;exports.overlayItemClassName=Ze;exports.overlaySubMenuClassName=Xe;

package/dist/components/New/Dropdown/Dropdown.js

@@ -1,22 +1,22 @@
-import { jsxs as N, Fragment as F, jsx as n } from "react/jsx-runtime";
-import { useFloatingNodeId as me, useFloating as he, autoUpdate as ge, offset as ye, autoPlacement as we, flip as ve, shift as xe, size as Ce, useClick as ke, useHover as be, safePolygon as Pe, useDismiss as Ee, useRole as Ie, useInteractions as Ne, FloatingTree as Fe, FloatingNode as Me, FloatingPortal as De, FloatingFocusManager as Ae } from "@floating-ui/react";
-import { useState as _, useRef as Oe, useCallback as m, useId as Re, useEffect as W, useMemo as Te, Fragment as Se } from "react";
-import { InteractiveTooltip as Le } from "../InteractiveTooltip/InteractiveTooltip.js";
-import { DropdownTrigger as y, DropdownItemType as j } from "../../../types/dropdown.js";
-import { MenuItemMark as $e } from "../../../types/menu-item.js";
-import { dropdownGap as w, dropdownDividerClassName as Be, dropdownBaseClassName as Ye, dropdownListBaseClassName as _e } from "./constants.js";
-import { CloseButton as We } from "../CloseButton/CloseButton.js";
-import { MenuItem as je } from "../MenuItem/MenuItem.js";
-import { useThemeScope as Ke } from "../ThemeScope/ThemeScope.js";
+import { jsxs as N, Fragment as M, jsx as n } from "react/jsx-runtime";
+import { useFloatingNodeId as he, useFloating as ge, autoUpdate as ye, offset as we, autoPlacement as ve, flip as xe, shift as Ce, size as ke, useClick as be, useHover as Pe, safePolygon as Ee, useDismiss as Ie, useRole as Ne, useInteractions as Me, FloatingTree as De, FloatingNode as Fe, FloatingPortal as Ae, FloatingFocusManager as Oe } from "@floating-ui/react";
+import { useState as W, useRef as Re, useCallback as m, useId as Te, useEffect as j, useMemo as Se, Fragment as Le } from "react";
+import { InteractiveTooltip as $e } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { DropdownTrigger as y, DropdownItemType as K } from "../../../types/dropdown.js";
+import { MenuItemMark as Be } from "../../../types/menu-item.js";
+import { dropdownGap as w, dropdownDividerClassName as Ye, dropdownBaseClassName as _e, dropdownListBaseClassName as We } from "./constants.js";
+import { CloseButton as je } from "../CloseButton/CloseButton.js";
+import { MenuItem as Ke } from "../MenuItem/MenuItem.js";
+import { useThemeScope as Ue } from "../ThemeScope/ThemeScope.js";
 import { mergeClasses as v } from "../../../utils/merge-classes.js";
-import { DropdownSubMenuItem as Ue } from "./DropdownSubMenuItem.js";
-import { resolveItemMark as Ve, getItemRole as Xe } from "./item-mark.js";
-const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', ze = (l) => !l.hasAttribute("disabled") && l.getAttribute("aria-disabled") !== "true", Ge = ["ArrowDown", "ArrowUp", "Home", "End"], He = (l, d, u) => {
+import { DropdownSubMenuItem as Ve } from "./DropdownSubMenuItem.js";
+import { resolveItemMark as Xe, getItemRole as qe } from "./item-mark.js";
+const ze = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', Ge = (l) => !l.hasAttribute("disabled") && l.getAttribute("aria-disabled") !== "true", He = ["ArrowDown", "ArrowUp", "Home", "End"], Je = (l, d, u) => {
   if (l === "Home") return 0;
   if (l === "End") return u - 1;
   const a = l === "ArrowDown" ? 1 : -1;
   return d === -1 ? a === 1 ? 0 : u - 1 : (d + a + u) % u;
-}, Je = (l) => "clientWidth" in l ? l.clientWidth : l.getBoundingClientRect?.()?.width ?? 0, ut = ({
+}, Qe = (l) => "clientWidth" in l ? l.clientWidth : l.getBoundingClientRect?.()?.width ?? 0, ft = ({
   children: l,
   items: d,
   onItemClick: u,
@@ -24,48 +24,49 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
   menuFooter: h,
   renderOverlay: P,
   trigger: f = [y.Click],
-  placement: M,
+  placement: D,
   disabled: i = !1,
-  open: D,
-  defaultOpen: K = !1,
+  open: F,
+  defaultOpen: U = !1,
   onOpenChange: A,
-  closable: U = !1,
-  onClose: V,
-  className: X,
+  closable: V = !1,
+  onClose: X,
+  className: q,
   overlayContentClassName: O,
   separatorClassName: R,
-  listClassName: q,
+  listClassName: z,
   outsidePressIgnoreRef: T,
-  outsideClosable: z = !0,
-  allowedPlacements: G,
+  outsideClosable: G = !0,
+  allowedPlacements: H,
   anchorToMouse: x = !1,
   matchReferenceWidth: E = !0,
-  maxDropdownHeight: S
+  maxDropdownHeight: S,
+  initialFocus: L
 }) => {
-  const H = Ke(), [J, Q] = _(K), I = D !== void 0, c = I ? !!D : J, C = Oe(null), [Z, ee] = _(!0), o = m(
+  const J = Ue(), [Q, Z] = W(U), I = F !== void 0, c = I ? !!F : Q, C = Re(null), [ee, te] = W(!0), o = m(
     (e, t, r) => {
-      e && ee(r !== "hover" && r !== "safe-polygon"), I || Q(e), A?.(e);
+      e && te(r !== "hover" && r !== "safe-polygon"), I || Z(e), A?.(e);
     },
     [I, A]
-  ), L = Re(), te = M === void 0, $ = me(), { refs: p, floatingStyles: ne, context: g } = he({
-    nodeId: $,
-    placement: M,
+  ), $ = Te(), ne = D === void 0, B = he(), { refs: p, floatingStyles: oe, context: g } = ge({
+    nodeId: B,
+    placement: D,
     open: c,
     onOpenChange: o,
-    whileElementsMounted: ge,
+    whileElementsMounted: ye,
     middleware: [
-      ye({ mainAxis: w, crossAxis: 0 }),
-      te ? we({
+      we({ mainAxis: w, crossAxis: 0 }),
+      ne ? ve({
         alignment: "start",
         crossAxis: !0,
         padding: w,
-        allowedPlacements: G
-      }) : ve({ padding: w }),
-      xe({ padding: w }),
-      Ce({
+        allowedPlacements: H
+      }) : xe({ padding: w }),
+      Ce({ padding: w }),
+      ke({
         padding: w,
         apply({ availableWidth: e, availableHeight: t, elements: r }) {
-          const s = r.floating, b = Je(r.reference);
+          const s = r.floating, b = Qe(r.reference);
           s.style.setProperty(
             "--fui-available-height",
             `${Math.floor(t)}px`
@@ -73,32 +74,32 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
             "--reference-width",
             E ? `${Math.round(b)}px` : "0px"
           ), E ? s.style.minWidth = `${Math.round(b)}px` : s.style.removeProperty("min-width"), s.style.maxWidth = `${Math.floor(e)}px`;
-          const Y = Math.floor(t);
-          s.style.maxHeight = `${S ? Math.min(Y, S) : Y}px`;
+          const _ = Math.floor(t);
+          s.style.maxHeight = `${S ? Math.min(_, S) : _}px`;
         }
       })
     ]
-  }), oe = ke(g, {
-    enabled: f.includes(y.Click) && !i
   }), re = be(g, {
+    enabled: f.includes(y.Click) && !i
+  }), se = Pe(g, {
     enabled: f.includes(y.Hover) && !i,
     move: !1,
     restMs: 40,
-    handleClose: Pe(),
+    handleClose: Ee(),
     delay: { open: 80, close: 80 }
-  }), se = Ee(g, {
+  }), le = Ie(g, {
     bubbles: !0,
     referencePress: !1,
     outsidePress: (e) => {
-      if (!z) return !1;
+      if (!G) return !1;
       const t = e.target;
       return !(T?.current && t instanceof Node && T.current.contains(t));
     }
-  }), le = Ie(g, { role: "menu" }), { getReferenceProps: ie, getFloatingProps: ce } = Ne([
-    oe,
+  }), ie = Ne(g, { role: "menu" }), { getReferenceProps: ce, getFloatingProps: ae } = Me([
     re,
     se,
-    le
+    le,
+    ie
   ]), k = m(
     (e, t) => {
       p.setPositionReference({
@@ -115,7 +116,7 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
       });
     },
     [p]
-  ), ae = m(
+  ), de = m(
     (e) => {
       !f.includes(y.ContextMenu) || i || (e.preventDefault(), x && (k(e.clientX, e.clientY), C.current = document.elementFromPoint(
         e.clientX,
@@ -123,7 +124,7 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
       )), o(!0));
     },
     [x, i, o, k, f]
-  ), de = m(
+  ), ue = m(
     (e) => {
       !x || i || (f.includes(y.ContextMenu) && c && o(!1), k(e.clientX, e.clientY), C.current = document.elementFromPoint(
         e.clientX,
@@ -132,30 +133,30 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
     },
     [x, i, k, c, f, o]
   );
-  W(() => {
+  j(() => {
     i && c && o(!1);
   }, [i, c, o]);
-  const ue = m(
+  const fe = m(
     (e) => {
-      if (e.defaultPrevented || !Ge.includes(e.key)) return;
+      if (e.defaultPrevented || !He.includes(e.key)) return;
       const t = Array.from(
         e.currentTarget.querySelectorAll(
-          qe
+          ze
         )
-      ).filter(ze);
+      ).filter(Ge);
       if (t.length === 0) return;
       e.preventDefault();
       const r = e.currentTarget.ownerDocument.activeElement, s = t.findIndex((b) => b === r);
-      t[He(e.key, s, t.length)]?.focus();
+      t[Je(e.key, s, t.length)]?.focus();
     },
     []
-  ), B = m(
+  ), Y = m(
     (e) => (t) => {
       e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), u?.({ key: e.key, domEvent: t }), e.selectable || o(!1));
     },
     [u, o]
-  ), fe = Te(() => P ? P() : d ? /* @__PURE__ */ N(F, { children: [
-    a && /* @__PURE__ */ n(F, { children: typeof a == "function" ? a() : a }),
+  ), pe = Se(() => P ? P() : d ? /* @__PURE__ */ N(M, { children: [
+    a && /* @__PURE__ */ n(M, { children: typeof a == "function" ? a() : a }),
     /* @__PURE__ */ n(
       "div",
       {
@@ -163,19 +164,19 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
         className: v("py-1", O),
         "aria-label": "dropdown",
         children: d.map((e) => {
-          if (e.type === j.Divider)
+          if (e.type === K.Divider)
             return /* @__PURE__ */ n(
               "div",
               {
                 role: "separator",
                 className: v(
-                  Be,
+                  Ye,
                   R
                 )
               },
               e.key
             );
-          if (e.type === j.PlainText)
+          if (e.type === K.PlainText)
             return /* @__PURE__ */ n(
               "div",
               {
@@ -189,19 +190,19 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
             );
           if (e.children?.length)
             return /* @__PURE__ */ n(
-              Ue,
+              Ve,
               {
                 item: e,
                 onRootClose: () => o(!1)
               },
               e.key
             );
-          const t = Ve(e), r = Xe(e), s = /* @__PURE__ */ n(
-            je,
+          const t = Xe(e), r = qe(e), s = /* @__PURE__ */ n(
+            Ke,
             {
               role: r,
               "aria-checked": r === "menuitem" ? void 0 : !!e.checked,
-              "aria-current": t === $e.Highlight && e.checked ? !0 : void 0,
+              "aria-current": t === Be.Highlight && e.checked ? !0 : void 0,
               "aria-disabled": !!e.disabled,
               disabled: e.disabled,
               mark: t,
@@ -211,12 +212,12 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
               label: e.label,
               className: e.className,
               rightControl: e.rightControl,
-              onClick: B(e),
+              onClick: Y(e),
               children: e.renderItem?.(e)
             }
           );
-          return /* @__PURE__ */ n(Se, { children: e.interactiveTooltip ? /* @__PURE__ */ n(
-            Le,
+          return /* @__PURE__ */ n(Le, { children: e.interactiveTooltip ? /* @__PURE__ */ n(
+            $e,
             {
               asChild: !0,
               placement: e.interactiveTooltip.placement,
@@ -228,9 +229,9 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
         })
       }
     ),
-    h && /* @__PURE__ */ n(F, { children: typeof h == "function" ? h() : h })
+    h && /* @__PURE__ */ n(M, { children: typeof h == "function" ? h() : h })
   ] }) : null, [
-    B,
+    Y,
     d,
     h,
     a,
@@ -238,11 +239,11 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
     o,
     O,
     R
-  ]), pe = ie({
-    onContextMenu: ae,
-    onMouseDown: de
+  ]), me = ce({
+    onContextMenu: de,
+    onMouseDown: ue
   });
-  return W(() => {
+  return j(() => {
     if (!c) return;
     const e = p.reference.current;
     let t = null;
@@ -254,55 +255,55 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
       { root: null, threshold: 0 }
     );
     return r.observe(t), () => r.disconnect();
-  }, [c, p.reference, o]), /* @__PURE__ */ n(Fe, { children: /* @__PURE__ */ N(Me, { id: $, children: [
+  }, [c, p.reference, o]), /* @__PURE__ */ n(De, { children: /* @__PURE__ */ N(Fe, { id: B, children: [
     /* @__PURE__ */ n(
       "span",
       {
         ref: p.setReference,
         className: v(
-          Ye,
+          _e,
           i && "!cursor-not-allowed opacity-75",
-          X
+          q
         ),
         "aria-haspopup": "menu",
         "aria-expanded": c,
-        "aria-controls": L,
-        ...pe,
+        "aria-controls": $,
+        ...me,
         children: l
       }
     ),
-    c && /* @__PURE__ */ n(De, { children: /* @__PURE__ */ n(
-      Ae,
+    c && /* @__PURE__ */ n(Ae, { children: /* @__PURE__ */ n(
+      Oe,
       {
         context: g,
         modal: !1,
-        initialFocus: Z ? 0 : -1,
+        initialFocus: L !== void 0 ? L : ee ? 0 : -1,
         returnFocus: !0,
         children: /* @__PURE__ */ N(
           "div",
           {
-            id: L,
+            id: $,
             ref: p.setFloating,
-            style: ne,
+            style: oe,
             className: v(
-              _e,
+              We,
               !E && "w-max",
               "overflow-auto",
-              H,
-              q
+              J,
+              z
             ),
-            ...ce({ onKeyDown: ue }),
+            ...ae({ onKeyDown: fe }),
             children: [
-              U && /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ n(
-                We,
+              V && /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ n(
+                je,
                 {
                   ariaLabel: "Close dropdown",
                   onClose: (e) => {
-                    V?.(e), o(!1);
+                    X?.(e), o(!1);
                   }
                 }
               ) }),
-              fe
+              pe
             ]
           }
         )
@@ -311,5 +312,5 @@ const qe = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]
   ] }) });
 };
 export {
-  ut as Dropdown
+  ft as Dropdown
 };

package/dist/components/New/InteractiveTooltip/InteractiveTooltip.js

@@ -1,65 +1,67 @@
-import { jsx as s, jsxs as j, Fragment as w } from "react/jsx-runtime";
-import { useFloatingNodeId as D, useFloating as H, autoUpdate as U, offset as G, flip as Y, shift as k, useHover as q, safePolygon as z, useFocus as B, useDismiss as J, useInteractions as K, useMergeRefs as m, FloatingPortal as Q, FloatingFocusManager as W } from "@floating-ui/react";
-import { useState as X, useRef as Z, useMemo as d, isValidElement as $, cloneElement as ee } from "react";
-import { useThemeScope as oe } from "../ThemeScope/ThemeScope.js";
+import { jsx as n, jsxs as w, Fragment as D } from "react/jsx-runtime";
+import { useFloatingNodeId as H, useFloating as U, autoUpdate as G, offset as Y, flip as k, shift as q, useHover as z, safePolygon as B, useFocus as J, useDismiss as K, useInteractions as Q, useMergeRefs as u, FloatingPortal as W, FloatingFocusManager as X } from "@floating-ui/react";
+import { useState as Z, useRef as $, useMemo as d, isValidElement as ee, cloneElement as oe } from "react";
+import { useThemeScope as se } from "../ThemeScope/ThemeScope.js";
 import { useIsMobileScreen as te } from "../../../hooks/use-is-mobile-screen.js";
-import { TooltipPlacement as se } from "../../../types/tooltip.js";
-import { mergeClasses as u } from "../../../utils/merge-classes.js";
-import { INTERACTIVE_TOOLTIP_GAP as ne, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as le, interactiveTooltipClassName as ae } from "./constants.js";
-const ge = ({
+import { TooltipPlacement as ne } from "../../../types/tooltip.js";
+import { mergeClasses as g } from "../../../utils/merge-classes.js";
+import { INTERACTIVE_TOOLTIP_GAP as le, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as ae, interactiveTooltipClassName as re } from "./constants.js";
+const Re = ({
   content: a,
-  placement: g = se.Right,
+  placement: R = ne.Right,
   children: e,
-  asChild: R = !1,
-  hideTooltip: F = !1,
-  initialOpen: T = !1,
-  open: n,
-  onOpenChange: h,
+  asChild: F = !1,
+  hideTooltip: T = !1,
+  initialOpen: h = !1,
+  open: s,
+  onOpenChange: I,
   triggerClassName: r,
-  contentClassName: I
+  contentClassName: E
 }) => {
-  const E = te(), P = oe(), [O, C] = X(T), i = n ?? O, N = h ?? C, v = D(), { refs: t, floatingStyles: M, context: o } = H({
-    nodeId: v,
-    placement: g,
+  const P = te(), C = se(), [N, O] = Z(h), i = s ?? N, v = (m) => {
+    I?.(m), s == null && O(m);
+  }, M = H(), { refs: t, floatingStyles: _, context: o } = U({
+    nodeId: M,
+    placement: R,
     open: i,
-    onOpenChange: N,
-    whileElementsMounted: U,
+    onOpenChange: v,
+    whileElementsMounted: G,
     middleware: [
-      G(ne),
+      Y(le),
       /* No `fallbackAxisSideDirection`: a panel placed to the right should
        flip to the left when it does not fit, not drop to the perpendicular
        top/bottom axis, which reads as the panel landing in the wrong place.*/
-      Y({ padding: 5 }),
-      k({ padding: 5 })
+      k({ padding: 5 }),
+      q({ padding: 5 })
     ]
-  }), _ = q(o, {
-    enabled: n == null,
+  }), S = z(o, {
+    enabled: s == null,
     /* Lets the pointer cross the gap between the trigger and the panel
        without closing it, so it can actually be reached and used. */
-    handleClose: z(),
-    delay: { open: le, close: 0 }
-  }), x = B(o, { enabled: n == null }), S = J(o), { getReferenceProps: c, getFloatingProps: V } = K([
-    _,
-    x,
-    S
-  ]), b = Z(null), y = m(
-    d(() => [t.setFloating, b], [t.setFloating])
-  ), f = R && $(e), l = f ? e.props?.ref : null, p = m(
+    handleClose: B(),
+    delay: { open: ae, close: 0 }
+  }), V = J(o, { enabled: s == null }), b = K(o), { getReferenceProps: c, getFloatingProps: x } = Q([
+    S,
+    V,
+    b
+  ]), y = $(null), A = u(
+    d(() => [t.setFloating, y], [t.setFloating])
+  ), f = F && ee(e), l = f ? e.props?.ref : null, p = u(
     d(
       () => [t.setReference, ...l ? [l] : []],
       [t.setReference, l]
     )
-  ), A = !F && !E && !!a, L = f ? ee(
+  ), L = !T && !P && !!a, j = f ? oe(
     e,
     c({
       ...e.props,
       ref: p,
-      className: u(
+      className: g(
         e.props.className,
         r
       ) || void 0
     })
-  ) : /* @__PURE__ */ s(
+  ) : /* @__PURE__ */ n(
     "span",
     {
       ref: p,
@@ -68,27 +70,27 @@ const ge = ({
       children: e
     }
   );
-  return /* @__PURE__ */ j(w, { children: [
-    L,
-    i && A && /* @__PURE__ */ s(Q, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ s(
-      W,
+  return /* @__PURE__ */ w(D, { children: [
+    j,
+    i && L && /* @__PURE__ */ n(W, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ n(
+      X,
       {
         context: o,
         modal: !1,
         initialFocus: -1,
         returnFocus: !1,
         order: ["reference", "content"],
-        children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ n(
           "div",
           {
-            ref: y,
+            ref: A,
             "data-placement": o.placement,
-            style: M,
-            ...V(),
-            className: u(
-              ae,
-              P,
-              I
+            style: _,
+            ...x(),
+            className: g(
+              re,
+              C,
+              E
             ),
             children: a
           }
@@ -98,5 +100,5 @@ const ge = ({
   ] });
 };
 export {
-  ge as InteractiveTooltip
+  Re as InteractiveTooltip
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.14.0-dev.46",
-  "generatedAt": "2026-09-10T12:23:10.770Z",
+  "version": "0.14.0-dev.48",
+  "generatedAt": "2026-09-10T18:17:27.065Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -2028,6 +2028,12 @@
           "type": "number | null",
           "required": false,
           "description": "Maximum height of the dropdown menu; when omitted, no limit is applied"
+        },
+        {
+          "name": "initialFocus",
+          "type": "0 | -1 | RefObject<HTMLElement | null>",
+          "required": false,
+          "description": "Initial focus target inside the overlay on open, forwarded to `FloatingFocusManager`; when omitted, matches pre-existing behavior"
         }
       ],
       "examples": [