@epam/ai-dial-ui-kit 0.14.0-dev.30 → 0.14.0-dev.33

package/dist/DateCellRenderer-B41xNX7a.cjs

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

package/dist/components/Grid/constants.js

@@ -2,10 +2,15 @@ const o = "h-full w-full", e = ".ag-checkbox-input", t = {
   accentColor: "var(--bg-control-accent, var(--bg-accent-primary, #5C8DEA))",
   backgroundColor: "var(--bg-layer-raised, var(--bg-layer-3, #FCFCFC))",
   oddRowBackgroundColor: "var(--bg-layer-sunken, var(--bg-layer-2, #EEF1F7))",
-  selectedRowBackgroundColor: "var(--controls-bg-accent-primary-alpha-active, var(--bg-accent-primary-alpha, #7DA4FF26))",
+  // The row tint has to stay translucent: the row it paints carries body text
+  // and a checkbox filled with `accentColor`, so an opaque accent hides both.
+  // `--bg-accent-primary-alpha` is the tint every other 1.0 control hovers
+  // with; the controls' `*-alpha-active` token this used to read is the
+  // pressed-state fill, which themes do define opaque.
+  selectedRowBackgroundColor: "var(--bg-accent-primary-alpha, #7DA4FF26)",
   borderColor: "var(--bg-layer-4, #D1DBEA)",
   rowBorder: "1px solid var(--stroke-tertiary, var(--stroke-primary, #6B7280))",
-  rowHoverColor: "var(--controls-bg-accent-primary-alpha-active, var(--bg-accent-primary-alpha, #7DA4FF26))",
+  rowHoverColor: "var(--bg-accent-primary-alpha, #7DA4FF26)",
   borderRadius: 3,
   browserColorScheme: "dark",
   chromeBackgroundColor: "var(--bg-layer-1, #E0E6F0)",

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

@@ -1,103 +1,104 @@
-import { jsxs as D, Fragment as b, jsx as n } from "react/jsx-runtime";
-import { useFloating as pe, autoUpdate as me, offset as he, autoPlacement as ye, flip as xe, shift as be, size as we, useClick as ge, useHover as Ce, useDismiss as ke, useRole as ve, useInteractions as Ne, FloatingPortal as De, FloatingFocusManager as Ee } from "@floating-ui/react";
-import { useState as _, useRef as Pe, useCallback as h, useId as Ie, useEffect as $, useMemo as Ae } from "react";
-import { DialIcon as Me } from "../../Icon/Icon.js";
-import { DropdownTrigger as w, DropdownItemType as W } from "../../../types/dropdown.js";
-import { dropdownGap as g, dropdownDividerClassName as Oe, dropdownItemDangerClassName as Fe, dropdownItemDisabledClassName as Se, dropdownItemSelectedClassName as Re, dropdownItemBaseClassName as Be, dropdownBaseClassName as Le, dropdownListBaseClassName as Te } from "./constants.js";
-import { CloseButton as Ye } from "../CloseButton/CloseButton.js";
-import { CheckboxBox as _e } from "../Checkbox/CheckboxBox.js";
-import { useThemeScope as $e } from "../ThemeScope/ThemeScope.js";
-import { mergeClasses as d } from "../../../utils/merge-classes.js";
-import { DropdownSubMenuItem as We } from "./DropdownSubMenuItem.js";
-const je = '[role="menuitem"], [role="menuitemcheckbox"], [role="option"]', Ke = (r) => !r.hasAttribute("disabled") && r.getAttribute("aria-disabled") !== "true", Ue = ["ArrowDown", "ArrowUp", "Home", "End"], Ve = (r, u, f) => {
+import { jsxs as A, Fragment as E, jsx as s } from "react/jsx-runtime";
+import { useFloating as pe, autoUpdate as me, offset as he, autoPlacement as ye, flip as ge, shift as we, size as xe, useClick as ve, useHover as ke, useDismiss as be, useRole as Ce, useInteractions as Ee, FloatingPortal as Pe, FloatingFocusManager as Me } from "@floating-ui/react";
+import { useState as _, useRef as De, useCallback as m, useId as Ae, useEffect as $, useMemo as Ie } from "react";
+import { DropdownTrigger as g, DropdownItemType as W } from "../../../types/dropdown.js";
+import { MenuItemMark as Ne } from "../../../types/menu-item.js";
+import { dropdownGap as w, dropdownDividerClassName as Oe, dropdownBaseClassName as Fe, dropdownListBaseClassName as Re } from "./constants.js";
+import { CloseButton as Se } from "../CloseButton/CloseButton.js";
+import { MenuItem as Le } from "../MenuItem/MenuItem.js";
+import { useThemeScope as Be } from "../ThemeScope/ThemeScope.js";
+import { mergeClasses as x } from "../../../utils/merge-classes.js";
+import { DropdownSubMenuItem as Te } from "./DropdownSubMenuItem.js";
+import { resolveItemMark as Ye, getItemRole as _e } from "./item-mark.js";
+const $e = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"]', We = (r) => !r.hasAttribute("disabled") && r.getAttribute("aria-disabled") !== "true", je = ["ArrowDown", "ArrowUp", "Home", "End"], Ke = (r, u, d) => {
   if (r === "Home") return 0;
-  if (r === "End") return f - 1;
+  if (r === "End") return d - 1;
   const a = r === "ArrowDown" ? 1 : -1;
-  return u === -1 ? a === 1 ? 0 : f - 1 : (u + a + f) % f;
-}, Xe = (r) => "clientWidth" in r ? r.clientWidth : r.getBoundingClientRect?.()?.width ?? 0, rt = ({
+  return u === -1 ? a === 1 ? 0 : d - 1 : (u + a + d) % d;
+}, Ue = (r) => "clientWidth" in r ? r.clientWidth : r.getBoundingClientRect?.()?.width ?? 0, ot = ({
   children: r,
   items: u,
-  onItemClick: f,
+  onItemClick: d,
   menuHeader: a,
-  menuFooter: y,
-  renderOverlay: E,
-  trigger: p = [w.Click],
-  placement: A,
-  disabled: c = !1,
-  open: M,
+  menuFooter: h,
+  renderOverlay: P,
+  trigger: f = [g.Click],
+  placement: I,
+  disabled: i = !1,
+  open: N,
   defaultOpen: j = !1,
   onOpenChange: O,
   closable: K = !1,
   onClose: U,
   className: V,
   overlayContentClassName: F,
-  separatorClassName: S,
+  separatorClassName: R,
   listClassName: X,
-  outsidePressIgnoreRef: R,
+  outsidePressIgnoreRef: S,
   outsideClosable: q = !0,
   allowedPlacements: z,
-  anchorToMouse: C = !1,
-  matchReferenceWidth: P = !0,
-  maxDropdownHeight: B
+  anchorToMouse: v = !1,
+  matchReferenceWidth: M = !0,
+  maxDropdownHeight: L
 }) => {
-  const G = $e(), [J, Q] = _(j), I = M !== void 0, i = I ? !!M : J, k = Pe(null), [Z, H] = _(!0), o = h(
-    (e, t, s) => {
-      e && H(s !== "hover" && s !== "safe-polygon"), I || Q(e), O?.(e);
+  const G = Be(), [H, J] = _(j), D = N !== void 0, c = D ? !!N : H, k = De(null), [Q, Z] = _(!0), n = m(
+    (e, t, o) => {
+      e && Z(o !== "hover" && o !== "safe-polygon"), D || J(e), O?.(e);
     },
-    [I, O]
-  ), L = Ie(), ee = A === void 0, { refs: m, floatingStyles: te, context: x } = pe({
-    placement: A,
-    open: i,
-    onOpenChange: o,
+    [D, O]
+  ), B = Ae(), ee = I === void 0, { refs: p, floatingStyles: te, context: y } = pe({
+    placement: I,
+    open: c,
+    onOpenChange: n,
     whileElementsMounted: me,
     middleware: [
-      he({ mainAxis: g, crossAxis: 0 }),
+      he({ mainAxis: w, crossAxis: 0 }),
       ee ? ye({
         alignment: "start",
         crossAxis: !0,
-        padding: g,
+        padding: w,
         allowedPlacements: z
-      }) : xe({ padding: g }),
-      be({ padding: g }),
-      we({
-        padding: g,
-        apply({ availableWidth: e, availableHeight: t, elements: s }) {
-          const l = s.floating, N = Xe(s.reference);
+      }) : ge({ padding: w }),
+      we({ padding: w }),
+      xe({
+        padding: w,
+        apply({ availableWidth: e, availableHeight: t, elements: o }) {
+          const l = o.floating, C = Ue(o.reference);
           l.style.setProperty(
             "--fui-available-height",
             `${Math.floor(t)}px`
           ), l.style.setProperty(
             "--reference-width",
-            P ? `${Math.round(N)}px` : "0px"
-          ), P ? l.style.minWidth = `${Math.round(N)}px` : l.style.removeProperty("min-width"), l.style.maxWidth = `${Math.floor(e)}px`;
+            M ? `${Math.round(C)}px` : "0px"
+          ), M ? l.style.minWidth = `${Math.round(C)}px` : l.style.removeProperty("min-width"), l.style.maxWidth = `${Math.floor(e)}px`;
           const Y = Math.floor(t);
-          l.style.maxHeight = `${B ? Math.min(Y, B) : Y}px`;
+          l.style.maxHeight = `${L ? Math.min(Y, L) : Y}px`;
         }
       })
     ]
-  }), ne = ge(x, {
-    enabled: p.includes(w.Click) && !c
-  }), oe = Ce(x, {
-    enabled: p.includes(w.Hover) && !c,
+  }), ne = ve(y, {
+    enabled: f.includes(g.Click) && !i
+  }), oe = ke(y, {
+    enabled: f.includes(g.Hover) && !i,
     move: !1,
     restMs: 40,
     delay: { open: 80, close: 80 }
-  }), re = ke(x, {
+  }), re = be(y, {
     bubbles: !0,
     referencePress: !1,
     outsidePress: (e) => {
       if (!q) return !1;
       const t = e.target;
-      return !(R?.current && t instanceof Node && R.current.contains(t));
+      return !(S?.current && t instanceof Node && S.current.contains(t));
     }
-  }), se = ve(x, { role: "menu" }), { getReferenceProps: le, getFloatingProps: ce } = Ne([
+  }), se = Ce(y, { role: "menu" }), { getReferenceProps: le, getFloatingProps: ie } = Ee([
     ne,
     oe,
     re,
     se
-  ]), v = h(
+  ]), b = m(
     (e, t) => {
-      m.setPositionReference({
+      p.setPositionReference({
         getBoundingClientRect: () => ({
           width: 0,
           height: 0,
@@ -110,207 +111,187 @@ const je = '[role="menuitem"], [role="menuitemcheckbox"], [role="option"]', Ke =
         })
       });
     },
-    [m]
-  ), ie = h(
+    [p]
+  ), ce = m(
     (e) => {
-      !p.includes(w.ContextMenu) || c || (e.preventDefault(), C && (v(e.clientX, e.clientY), k.current = document.elementFromPoint(
+      !f.includes(g.ContextMenu) || i || (e.preventDefault(), v && (b(e.clientX, e.clientY), k.current = document.elementFromPoint(
         e.clientX,
         e.clientY
-      )), o(!0));
+      )), n(!0));
     },
-    [C, c, o, v, p]
-  ), ae = h(
+    [v, i, n, b, f]
+  ), ae = m(
     (e) => {
-      !C || c || (p.includes(w.ContextMenu) && i && o(!1), v(e.clientX, e.clientY), k.current = document.elementFromPoint(
+      !v || i || (f.includes(g.ContextMenu) && c && n(!1), b(e.clientX, e.clientY), k.current = document.elementFromPoint(
         e.clientX,
         e.clientY
       ));
     },
-    [C, c, v, i, p, o]
+    [v, i, b, c, f, n]
   );
   $(() => {
-    c && i && o(!1);
-  }, [c, i, o]);
-  const de = h(
+    i && c && n(!1);
+  }, [i, c, n]);
+  const ue = m(
     (e) => {
-      if (e.defaultPrevented || !Ue.includes(e.key)) return;
+      if (e.defaultPrevented || !je.includes(e.key)) return;
       const t = Array.from(
         e.currentTarget.querySelectorAll(
-          je
+          $e
         )
-      ).filter(Ke);
+      ).filter(We);
       if (t.length === 0) return;
       e.preventDefault();
-      const s = e.currentTarget.ownerDocument.activeElement, l = t.findIndex((N) => N === s);
-      t[Ve(e.key, l, t.length)]?.focus();
+      const o = e.currentTarget.ownerDocument.activeElement, l = t.findIndex((C) => C === o);
+      t[Ke(e.key, l, t.length)]?.focus();
     },
     []
-  ), T = h(
+  ), T = m(
     (e) => (t) => {
-      e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), f?.({ key: e.key, domEvent: t }), e.selectable || o(!1));
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), d?.({ key: e.key, domEvent: t }), e.selectable || n(!1));
     },
-    [f, o]
-  ), ue = Ae(() => E ? E() : u ? /* @__PURE__ */ D(b, { children: [
-    a && /* @__PURE__ */ n(b, { children: typeof a == "function" ? a() : a }),
-    /* @__PURE__ */ n(
+    [d, n]
+  ), de = Ie(() => P ? P() : u ? /* @__PURE__ */ A(E, { children: [
+    a && /* @__PURE__ */ s(E, { children: typeof a == "function" ? a() : a }),
+    /* @__PURE__ */ s(
       "div",
       {
         role: "none",
-        className: d("py-1", F),
+        className: x("py-1", F),
         "aria-label": "dropdown",
-        children: u.map((e) => e.type === W.Divider ? /* @__PURE__ */ n(
-          "div",
-          {
-            role: "separator",
-            className: d(
-              Oe,
-              S
-            )
-          },
-          e.key
-        ) : e.type === W.PlainText ? /* @__PURE__ */ n(
-          "div",
-          {
-            className: d(
-              "px-3 py-2 text-secondary dial-caption-text",
-              e.className
-            ),
-            children: e.label
-          },
-          e.key
-        ) : e.children?.length ? /* @__PURE__ */ n(
-          We,
-          {
-            item: e,
-            onRootClose: () => o(!1)
-          },
-          e.key
-        ) : /* @__PURE__ */ n(
-          "button",
-          {
-            role: e.selectable ? "menuitemcheckbox" : "menuitem",
-            "aria-checked": e.selectable ? !!e.checked : void 0,
-            type: "button",
-            "aria-disabled": !!e.disabled,
-            className: d(
-              Be,
-              e.selectable && e.checked && Re,
-              e.disabled && Se,
-              e.danger && Fe,
-              e.className
-            ),
-            disabled: e.disabled,
-            onClick: T(e),
-            children: e.renderItem ? e.renderItem(e) : /* @__PURE__ */ D(b, { children: [
-              e.selectable && /* @__PURE__ */ n(
-                _e,
-                {
-                  isSelected: !!e.checked,
-                  disabled: e.disabled
-                }
-              ),
-              e.icon && /* @__PURE__ */ n(
-                "span",
-                {
-                  className: d(
-                    e.danger && "text-error",
-                    e.disabled && "text-control-disable-primary"
-                  ),
-                  children: /* @__PURE__ */ n(Me, { icon: e.icon })
-                }
-              ),
-              /* @__PURE__ */ n(
-                "span",
-                {
-                  className: d(
-                    "flex-1 truncate text-start",
-                    e.danger && "text-error",
-                    e.disabled && "text-control-disable-primary"
-                  ),
-                  children: e.label
-                }
-              )
-            ] })
-          },
-          e.key
-        ))
+        children: u.map((e) => {
+          if (e.type === W.Divider)
+            return /* @__PURE__ */ s(
+              "div",
+              {
+                role: "separator",
+                className: x(
+                  Oe,
+                  R
+                )
+              },
+              e.key
+            );
+          if (e.type === W.PlainText)
+            return /* @__PURE__ */ s(
+              "div",
+              {
+                className: x(
+                  "px-3 py-2 text-secondary dial-caption-text",
+                  e.className
+                ),
+                children: e.label
+              },
+              e.key
+            );
+          if (e.children?.length)
+            return /* @__PURE__ */ s(
+              Te,
+              {
+                item: e,
+                onRootClose: () => n(!1)
+              },
+              e.key
+            );
+          const t = Ye(e), o = _e(e);
+          return /* @__PURE__ */ s(
+            Le,
+            {
+              role: o,
+              "aria-checked": o === "menuitem" ? void 0 : !!e.checked,
+              "aria-current": t === Ne.Highlight && e.checked ? !0 : void 0,
+              "aria-disabled": !!e.disabled,
+              disabled: e.disabled,
+              mark: t,
+              selected: !!e.checked,
+              danger: e.danger,
+              icon: e.icon,
+              label: e.label,
+              className: e.className,
+              rightControl: e.rightControl,
+              onClick: T(e),
+              children: e.renderItem?.(e)
+            },
+            e.key
+          );
+        })
       }
     ),
-    y && /* @__PURE__ */ n(b, { children: typeof y == "function" ? y() : y })
+    h && /* @__PURE__ */ s(E, { children: typeof h == "function" ? h() : h })
   ] }) : null, [
     T,
     u,
-    y,
+    h,
     a,
-    E,
-    o,
+    P,
+    n,
     F,
-    S
+    R
   ]), fe = le({
-    onContextMenu: ie,
+    onContextMenu: ce,
     onMouseDown: ae
   });
   return $(() => {
-    if (!i) return;
-    const e = m.reference.current;
+    if (!c) return;
+    const e = p.reference.current;
     let t = null;
     if (e instanceof Element ? t = e : k.current instanceof Element && (t = k.current), !t) return;
-    const s = new IntersectionObserver(
+    const o = new IntersectionObserver(
       ([l]) => {
-        l.isIntersecting || o(!1);
+        l.isIntersecting || n(!1);
       },
       { root: null, threshold: 0 }
     );
-    return s.observe(t), () => s.disconnect();
-  }, [i, m.reference, o]), /* @__PURE__ */ D(b, { children: [
-    /* @__PURE__ */ n(
+    return o.observe(t), () => o.disconnect();
+  }, [c, p.reference, n]), /* @__PURE__ */ A(E, { children: [
+    /* @__PURE__ */ s(
       "span",
       {
-        ref: m.setReference,
-        className: d(
-          Le,
-          c && "!cursor-not-allowed opacity-75",
+        ref: p.setReference,
+        className: x(
+          Fe,
+          i && "!cursor-not-allowed opacity-75",
           V
         ),
         "aria-haspopup": "menu",
-        "aria-expanded": i,
-        "aria-controls": L,
+        "aria-expanded": c,
+        "aria-controls": B,
         ...fe,
         children: r
       }
     ),
-    i && /* @__PURE__ */ n(De, { children: /* @__PURE__ */ n(
-      Ee,
+    c && /* @__PURE__ */ s(Pe, { children: /* @__PURE__ */ s(
+      Me,
       {
-        context: x,
+        context: y,
         modal: !1,
-        initialFocus: Z ? 0 : -1,
+        initialFocus: Q ? 0 : -1,
         returnFocus: !0,
-        children: /* @__PURE__ */ D(
+        children: /* @__PURE__ */ A(
           "div",
           {
-            id: L,
-            ref: m.setFloating,
+            id: B,
+            ref: p.setFloating,
             style: te,
-            className: d(
-              Te,
-              !P && "w-max",
+            className: x(
+              Re,
+              !M && "w-max",
               "overflow-auto",
               G,
               X
             ),
-            ...ce({ onKeyDown: de }),
+            ...ie({ onKeyDown: ue }),
             children: [
-              K && /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ n(
-                Ye,
+              K && /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ s(
+                Se,
                 {
                   ariaLabel: "Close dropdown",
                   onClose: (e) => {
-                    U?.(e), o(!1);
+                    U?.(e), n(!1);
                   }
                 }
               ) }),
-              ue
+              de
             ]
           }
         )
@@ -319,5 +300,5 @@ const je = '[role="menuitem"], [role="menuitemcheckbox"], [role="option"]', Ke =
   ] });
 };
 export {
-  rt as Dropdown
+  ot as Dropdown
 };