@epam/ai-dial-ui-kit 0.14.0-dev.32 → 0.14.0-dev.34

package/dist/CHANGELOG.md

@@ -35,6 +35,8 @@ Versions match the git tags on the `development` branch.
 - **2.0 components compose 2.0 tooltips** — `Popup`'s clipped title, `Input`'s disabled-field readout, `Highlight`, and the option labels of `Select` and its submenus were still built on `DialTooltip` / `DialEllipsisTooltip`, so a 2.0 surface revealed its text in the 1.0 bubble. They now use the 2.0 `Tooltip` / `EllipsisTooltip`: the inverted `bg-control-inverted` bubble with an arrow, and no element rendered at all when there is nothing to show. The popup title passes `triggerClassName="truncate"` because the 2.0 trigger no longer forces it. No props change.
 - **Overlay rows follow the multiselect-list-item spec** — a selected row and a hovered row shared one tint (`control-accent-alpha-hover`), so a selected row lit up identically whether or not the pointer was on it, and a disabled row lit up too, since the hover rule applied to every row. Selected now takes the faint `control-accent-alpha` step at rest, hover keeps `control-accent-alpha-hover` for selected and unselected alike, and a disabled row drops both tints and moves from `text-secondary` to `text-control-disable-primary`. `Dropdown` and `Select` both read these from `constants/overlay`, so the whole 2.0 overlay family moves together.
 - **`Select` composes the 2.0 `Checkbox` and `Tag`** — the multi-select options and the Select All row were 1.0 `DialCheckbox` (an 18px box on `before:` pseudo-borders) and the field's selection was rendered with 1.0 `DialTag`. Both are now their 2.0 counterparts, so an option gets the 20px box with the accent fill and the real `indeterminate` DOM property that Select All's mixed state needs to be drawn as mixed, and each tag is the 24px 2.0 pill whose remove button is named after the tag it removes ("Remove Option 1") instead of being reachable only by position. No props change.
+- **`Select` (2.0) — the chosen option is tinted, not checked** — the option list marked its selection with a trailing check, which is how the design marks a _menu_ row; a select list tints the row instead, and the two are drawn differently on purpose. The single-select row now takes the faint `control-accent-alpha` step at rest and carries no glyph, matching the multiselect row it sits beside. `selectedOptionMark` puts the check back (`MenuItemMark.Check`) or swaps in the navigation highlight (`MenuItemMark.Highlight`) for a list that reads as navigation. Nothing else changes: `aria-selected` still carries the state.
+- **`Select` (2.0) — the options scroll at 344px, and the search row stays put** — the overlay capped the whole panel at 352px and dropped the cap entirely once `searchable` was on, so a long searchable list grew to the height of the viewport and its search row scrolled away with the options. The options are now their own scroll box at the design's maximum list length of 344px, with the header, the search row and Select All outside it; the panel keeps its cap on the available viewport height for a screen too short even for that.
 
 ### Fixed
 
@@ -42,6 +44,8 @@ Versions match the git tags on the `development` branch.
 - **`--stroke-primary` and `--stroke-info` light defaults matched their comments, not their tokens** — `--stroke-primary` fell back to `#6B7280`, Tailwind's own `gray-500`, while every other grey-800 token in the kit is `#57647A`; `--stroke-info` fell back to `#124ACE` where blue-500 is `#1D4ED8`. Both now match the palette. Hosts that define the variables are unaffected.
 - **The selected tab's hover underline ended on a violet no other control used** — the hover gradient's second stop was `#956CFA`, while the button hover gradient ends on `#885DF2`. Both now end on `#885DF2`, so a tab and a primary button lit by the same hover read as the same gradient.
 - **`Switch` had no hover state, and its disabled knob asked for a token that does not exist** — the track carried no `hover:` rule at all, and the disabled knob used `bg-controls-disable-secondary`, which is absent from the Tailwind scale, so Tailwind emitted no rule and the knob rendered with no background. The track now lightens to `control-neutral-hover-strong` when off and `control-accent-hover` when on; both disabled tracks take the light `control-disable-primary` instead of sharing the dark grey-450 of the enabled off state, and the knob takes `control-disable-secondary`. The disabled label moves from `text-secondary` to `text-control-disable-primary`, the token the rest of 2.0 already uses for disabled text.
+- **`Dropdown` (2.0) — a disabled submenu row was the wrong grey** — the icon, label and caret of a disabled submenu trigger and of every disabled submenu child were painted `text-secondary` (grey-800), the colour of ordinary secondary text, while the disabled rows of the root menu use `text-control-disable-primary` (grey-600) like the rest of 2.0. A disabled row inside a submenu therefore read as enabled next to one outside it. All five places now use the disable token.
+- **`Dropdown` and `Select` (2.0) — a submenu trigger went flat once the pointer left it** — the row that opens a nested panel was tinted only while hovered, so moving the pointer into the panel it opened dropped the tint and lost the trail back to the row the panel belongs to. It now stays tinted for as long as its panel is open, off the `aria-expanded` it already sets.
 
 ### Added
 
@@ -60,6 +64,11 @@ Versions match the git tags on the `development` branch.
 - **`Radio` and `Checkbox` reach the 24×24 pointer target** — both controls render at 20px, so they take `dial-kit-minimum-target` for WCAG 2.5.8 (AA) and are listed in the README target-size exception table: a 44px enhanced target would overhang 12px per side and swallow the adjacent label.
 - **`Tag` (2.0) — `TagAppearance.Selectable`** — the selectable tag of the design: no rim and no fill until it is selected, then the faint `control-accent-alpha` step, with one `control-accent-alpha-hover` tint shared by the selected and unselected states, so a selected chip cannot read as hovered at rest. It is a toggle rather than a plain button — the state rides on `aria-pressed`, where the outlined tag leaves the accent tint as its only carrier — and a clickable 20px chip takes `dial-kit-minimum-target` to reach the WCAG 2.5.8 minimum, which the 24px one already clears. The borderless chip keeps a transparent border box so both appearances stand the same height in a mixed row. `appearance` defaults to `TagAppearance.Outlined`, so every existing tag, `TagInput` and `MultiSelectTags` included, is unchanged.
 
+- **`MenuItem` (2.0)** — one row of a floating overlay, extracted from the four places that each drew their own: the dropdown's items, its submenu rows, the select's options and its submenu rows. It owns the Menu-item states of the design — rest, hover, focus, disable — and the ways a chosen row is marked, through the new `MenuItemMark`: a trailing `Check` (how a menu marks its rows, single- and multi-select alike), a `Tint` (how a select list marks its own), a leading `Checkbox` box, or the `Highlight` that gives the current item of a navigation menu an accent label. The row itself is the control; the box and the check are decorative, since the state rides on the `aria-checked` / `aria-selected` the caller sets alongside `role`.
+- **`Dropdown` (2.0) — `DropdownItem.mark`** — marks a chosen row the way the design draws it: `MenuItemMark.Check` for a single choice (announced as `menuitemradio`) or for a multiselect row when paired with `selectable`, which is what keeps the menu open; `MenuItemMark.Highlight` for the current item of a navigation menu, which also sets `aria-current`. `selectable` on its own still means the checkbox row it always did, so no existing menu changes. Submenu children take `mark` too, and a `selectable` child now leaves both panels up instead of closing the whole menu.
+- **`Select` (2.0) — a multiselect list nests** — `SelectOption.children` was only read in single mode, so a multiselect could not group its options at all. A nested list now renders in both modes, with checkbox rows inside the panel when the select is a multiselect, and toggling one leaves both panels open.
+- **`Dropdown` and `Select` (2.0) — `rightControl` on a row** — the design gives a list row a control of its own at its trailing edge (a favourite toggle, a delete button), which nothing in the kit could render: the row _is_ a `<button>`, and a button nested in a button is invalid, swallows the row's click and lands inside its accessible name. A row given `rightControl` is now drawn as the row button and the control side by side inside one wrapper that carries the row's own tint, hover and shape, with the focus ring following the row button through `:has()`. The wrapper is `role="none"`, so a listbox still owns its options. Available per item on `DropdownItem` and per option on `SelectOption`, submenus included.
+
 ---
 
 ## [0.13.0]

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/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
 };