@acusti/dropdown 1.0.0-rc.2 → 1.0.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +209 -45
  2. package/dist/Dropdown.d.ts +96 -17
  3. package/dist/Dropdown.js +431 -387
  4. package/dist/Dropdown.js.map +1 -1
  5. package/dist/Menubar.d.ts +7 -2
  6. package/dist/helpers.d.ts +3 -2
  7. package/package.json +3 -2
package/dist/Dropdown.js CHANGED
@@ -9,11 +9,13 @@ var DropdownContext = createContext(null);
9
9
  var MenubarContext = createContext(null);
10
10
  //#endregion
11
11
  //#region src/Dropdown.css?inline
12
- var Dropdown_default = ":root{--uktdd-font-family:system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif;--uktdd-color-scheme:inherit;--uktdd-body-bg-color:Canvas;--uktdd-body-bg-color-hover:Highlight;--uktdd-body-color-hover:HighlightText;--uktdd-body-bg-color-selected:color-mix(in oklab, currentColor 6%, transparent);--uktdd-body-box-shadow:0 8px 18px #00000040;--uktdd-body-border-color:color-mix(in oklab, currentColor 15%, transparent);--uktdd-body-buffer:10px;--uktdd-body-max-height:calc(100dvh - var(--uktdd-body-buffer));--uktdd-body-max-width:calc(100dvw - var(--uktdd-body-buffer));--uktdd-body-min-height:30px;--uktdd-body-pad-bottom:.5em;--uktdd-body-pad-left:.6875em;--uktdd-body-pad-right:.6875em;--uktdd-body-pad-top:.5em;--uktdd-body-min-width:min(50px, 100%);--uktdd-body-position-area:block-end span-inline-end;--uktdd-body-position-try-fallback-1:--uktdd-top-start;--uktdd-body-position-try-fallback-2:--uktdd-bottom-end;--uktdd-body-fill-fallbacks:--uktdd-fill-bottom, --uktdd-fill-top;--uktdd-body-gap:0px;--uktdd-body-color:CanvasText;--uktdd-body-color-path:currentColor;--uktdd-label-pad-right:.625em;--uktdd-submenu-position-area:inline-end span-block-end;--uktdd-submenu-position-try-fallback:--uktdd-submenu-inline-start;--uktdd-submenu-fill-fallbacks:--uktdd-submenu-fill, --uktdd-submenu-fill flip-inline;--uktdd-submenu-gap:0px;--uktdd-menubar-trigger-bg-color-active:color-mix(in oklab, currentColor 12%, transparent)}.uktdropdown,.uktdropdown-trigger{font-family:var(--uktdd-font-family)}.uktdropdown{anchor-scope:--uktdd-anchor;width:max-content}.uktdropdown.disabled{pointer-events:none}.uktdropdown>*{cursor:default}.uktdropdown>:first-child{anchor-name:--uktdd-anchor}.uktdropdown-label{align-items:center;display:flex}.uktdropdown-label-text{padding-right:var(--uktdd-label-pad-right)}.uktdropdown-body{box-sizing:border-box;position-anchor:--uktdd-anchor;position-area:var(--uktdd-body-position-area);position-try-fallbacks:var(--uktdd-body-position-try-fallback-1), var(--uktdd-body-position-try-fallback-2), var(--uktdd-body-fill-fallbacks);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:var(--uktdd-body-max-height);min-inline-size:min(var(--uktdd-body-min-width), var(--uktdd-body-max-width));max-inline-size:var(--uktdd-body-max-width);inline-size:max-content;color:var(--uktdd-body-color);color-scheme:var(--uktdd-color-scheme);background-color:var(--uktdd-body-bg-color);box-shadow:var(--uktdd-body-box-shadow);flex-direction:column;display:flex;position:fixed;overflow:hidden}.uktdropdown-body.has-items{-webkit-user-select:none;user-select:none}.uktdropdown-body [aria-selected=true]{background-color:var(--uktdd-body-bg-color-selected)}@media (forced-colors:active){.uktdropdown-body [aria-selected=true]{outline-offset:-2px;outline:2px solid}}.uktdropdown-body [data-ukt-active]{background-color:var(--uktdd-body-bg-color-hover);color:var(--uktdd-body-color-hover)}:is(.uktdropdown-body [data-ukt-active]:has([data-ukt-submenu] [data-ukt-active]),.uktdropdown-body [data-ukt-active]:has([data-ukt-submenu]:hover)){background-color:var(--uktdd-body-bg-color-path,color-mix(in oklab, var(--uktdd-body-color) 12%, var(--uktdd-body-bg-color)));color:var(--uktdd-body-color-path)}.uktdropdown-body [data-ukt-item][aria-disabled=true]{opacity:.5;pointer-events:none}.uktdropdown-body [data-ukt-item]{anchor-scope:--uktdd-submenu-anchor}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]{padding-inline-end:2em;position:relative}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]:after{content:\"\";border-block-start:.14em solid;border-inline-end:.14em solid;block-size:.3em;inline-size:.3em;position:absolute;inset-block-start:50%;inset-inline-end:.9em;translate:0 -50%;rotate:45deg}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):after{rotate:-45deg}.uktdropdown-body [data-ukt-item][aria-expanded=true]{anchor-name:--uktdd-submenu-anchor}.uktdropdown-body [data-ukt-submenu]:not([popover]){display:none}.uktdropdown-body [data-ukt-submenu]{box-sizing:border-box;border:1px solid var(--uktdd-body-border-color);block-size:auto;color:var(--uktdd-body-color);position-anchor:--uktdd-submenu-anchor;position-area:var(--uktdd-submenu-position-area);position-try-fallbacks:var(--uktdd-submenu-position-try-fallback), var(--uktdd-submenu-fill-fallbacks);z-index:2;margin-block:0;margin-inline:var(--uktdd-submenu-gap);--uktdd-body-gap:0px;padding:var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);inline-size:max-content;max-inline-size:var(--uktdd-body-max-width);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:var(--uktdd-body-max-height);overscroll-behavior:contain;background-color:var(--uktdd-body-bg-color);box-shadow:var(--uktdd-body-box-shadow);list-style:none;position:fixed;inset:auto;overflow:auto}div.uktdropdown-body{block-size:auto;margin-block:var(--uktdd-body-gap);border:1px solid var(--uktdd-body-border-color);margin-inline:0;padding:0;inset:auto}.uktmenubar{width:max-content;font-family:var(--uktdd-font-family);align-items:stretch;display:flex}.uktmenubar .uktdropdown.is-open .uktdropdown-trigger{box-shadow:inset 0 0 0 100vmax var(--uktdd-menubar-trigger-bg-color-active)}.uktdropdown-content{box-sizing:border-box;overscroll-behavior:contain;min-block-size:0;padding:var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);overflow:auto}@position-try --uktdd-noop{}@position-try --uktdd-top-start{position-area:block-start span-inline-end}@position-try --uktdd-bottom-start{position-area:block-end span-inline-end}@position-try --uktdd-bottom-end{position-area:block-end span-inline-start}@position-try --uktdd-top-end{position-area:block-start span-inline-start}@position-try --uktdd-submenu-inline-start{position-area:inline-start span-block-end}@position-try --uktdd-fill-bottom{position-area:block-end;block-size:calc(100% - var(--uktdd-body-gap) * 2);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height), calc((100dvb - anchor-size(block)) / 2 - var(--uktdd-body-gap) * 2));justify-self:anchor-center}@position-try --uktdd-fill-top{position-area:block-start;block-size:calc(100% - var(--uktdd-body-gap) * 2);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height), calc((100dvb - anchor-size(block)) / 2 - var(--uktdd-body-gap) * 2));justify-self:anchor-center}@position-try --uktdd-fill{block-size:calc(100% - var(--uktdd-body-gap) * 2)}@position-try --uktdd-submenu-fill{position-area:inline-end;block-size:calc(100% - var(--uktdd-body-gap) * 2);align-self:anchor-center}@position-try --uktdd-fill-cover{position-area:span-all span-inline-end;block-size:calc(100% - var(--uktdd-body-gap) * 2);align-self:anchor-center}";
12
+ var Dropdown_default = ":root{--uktdd-font-family:system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif;--uktdd-color-scheme:inherit;--uktdd-body-bg-color:Canvas;--uktdd-body-bg-color-hover:Highlight;--uktdd-body-color-hover:HighlightText;--uktdd-body-bg-color-selected:color-mix(in oklab, currentColor 6%, transparent);--uktdd-body-box-shadow:0 8px 18px #00000040;--uktdd-body-border-color:color-mix(in oklab, currentColor 15%, transparent);--uktdd-body-buffer:10px;--uktdd-body-max-height:calc(100dvh - var(--uktdd-body-buffer));--uktdd-body-max-width:calc(100dvw - var(--uktdd-body-buffer));--uktdd-body-min-height:30px;--uktdd-body-pad-block-start:.5em;--uktdd-body-pad-block-end:.5em;--uktdd-body-pad-inline-start:.6875em;--uktdd-body-pad-inline-end:.6875em;--uktdd-body-min-width:min(50px, 100%);--uktdd-body-position-area:block-end span-inline-end;--uktdd-body-position-try-fallback-1:--uktdd-top-start;--uktdd-body-position-try-fallback-2:--uktdd-bottom-end;--uktdd-body-fill-fallbacks:--uktdd-fill-bottom, --uktdd-fill-top;--uktdd-body-gap:0px;--uktdd-body-color:CanvasText;--uktdd-body-color-path:currentColor;--uktdd-label-gap:.625em;--uktdd-submenu-position-area:inline-end span-block-end;--uktdd-submenu-position-try-fallback:--uktdd-submenu-inline-start;--uktdd-submenu-fill-fallbacks:--uktdd-submenu-fill, --uktdd-submenu-fill flip-inline;--uktdd-submenu-gap:0px;--uktdd-menubar-trigger-bg-color-active:color-mix(in oklab, currentColor 12%, transparent)}.uktdropdown,.uktdropdown-trigger{font-family:var(--uktdd-font-family)}.uktdropdown{anchor-scope:--uktdd-anchor;width:max-content}.uktdropdown.is-disabled{pointer-events:none}.uktdropdown>*{cursor:default}.uktdropdown>:first-child{anchor-name:--uktdd-anchor}.uktdropdown-label{align-items:center;gap:var(--uktdd-label-gap);display:flex}.uktdropdown-body{box-sizing:border-box;position-anchor:--uktdd-anchor;position-area:var(--uktdd-body-position-area);position-try-fallbacks:var(--uktdd-body-position-try-fallback-1), var(--uktdd-body-position-try-fallback-2), var(--uktdd-body-fill-fallbacks);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:var(--uktdd-body-max-height);min-inline-size:min(var(--uktdd-body-min-width), var(--uktdd-body-max-width));max-inline-size:var(--uktdd-body-max-width);inline-size:max-content;color:var(--uktdd-body-color);color-scheme:var(--uktdd-color-scheme);background-color:var(--uktdd-body-bg-color);box-shadow:var(--uktdd-body-box-shadow);flex-direction:column;display:flex;position:fixed;overflow:hidden}.uktdropdown-body.has-items{-webkit-user-select:none;user-select:none}.uktdropdown-body [aria-selected=true]{background-color:var(--uktdd-body-bg-color-selected)}@media (forced-colors:active){.uktdropdown-body [aria-selected=true]{outline-offset:-2px;outline:2px solid}}.uktdropdown-body [data-ukt-active]{background-color:var(--uktdd-body-bg-color-hover);color:var(--uktdd-body-color-hover)}:is(.uktdropdown-body [data-ukt-active]:has([data-ukt-submenu] [data-ukt-active]),.uktdropdown-body [data-ukt-active]:has([data-ukt-submenu]:hover)){background-color:var(--uktdd-body-bg-color-path,color-mix(in oklab, var(--uktdd-body-color) 12%, var(--uktdd-body-bg-color)));color:var(--uktdd-body-color-path)}.uktdropdown-body [data-ukt-item][aria-disabled=true]{opacity:.5;pointer-events:none}.uktdropdown-body [data-ukt-item]{anchor-scope:--uktdd-submenu-anchor}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]{padding-inline-end:2em;position:relative}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]:after{content:\"\";border-block-start:.14em solid;border-inline-end:.14em solid;block-size:.3em;inline-size:.3em;position:absolute;inset-block-start:50%;inset-inline-end:.9em;translate:0 -50%;rotate:45deg}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):after{rotate:-45deg}.uktdropdown-body [data-ukt-item][aria-expanded=true]{anchor-name:--uktdd-submenu-anchor}.uktdropdown-body [data-ukt-submenu]:not([popover]){display:none}.uktdropdown-body [data-ukt-submenu]{box-sizing:border-box;border:1px solid var(--uktdd-body-border-color);block-size:auto;color:var(--uktdd-body-color);position-anchor:--uktdd-submenu-anchor;position-area:var(--uktdd-submenu-position-area);position-try-fallbacks:var(--uktdd-submenu-position-try-fallback), var(--uktdd-submenu-fill-fallbacks);z-index:2;margin-block:0;margin-inline:var(--uktdd-submenu-gap);--uktdd-body-gap:0px;padding-block:var(--uktdd-body-pad-block-start) var(--uktdd-body-pad-block-end);padding-inline:var(--uktdd-body-pad-inline-start) var(--uktdd-body-pad-inline-end);inline-size:max-content;max-inline-size:var(--uktdd-body-max-width);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:var(--uktdd-body-max-height);overscroll-behavior:contain;background-color:var(--uktdd-body-bg-color);box-shadow:var(--uktdd-body-box-shadow);list-style:none;position:fixed;inset:auto;overflow:auto}div.uktdropdown-body{block-size:auto;margin-block:var(--uktdd-body-gap);border:1px solid var(--uktdd-body-border-color);margin-inline:0;padding:0;inset:auto}.uktmenubar{width:max-content;font-family:var(--uktdd-font-family);align-items:stretch;display:flex}.uktmenubar .uktdropdown.is-open .uktdropdown-trigger{box-shadow:inset 0 0 0 100vmax var(--uktdd-menubar-trigger-bg-color-active)}.uktdropdown-content{box-sizing:border-box;overscroll-behavior:contain;min-block-size:0;padding-block:var(--uktdd-body-pad-block-start) var(--uktdd-body-pad-block-end);padding-inline:var(--uktdd-body-pad-inline-start) var(--uktdd-body-pad-inline-end);overflow:auto}@position-try --uktdd-noop{}@position-try --uktdd-top-start{position-area:block-start span-inline-end}@position-try --uktdd-bottom-start{position-area:block-end span-inline-end}@position-try --uktdd-bottom-end{position-area:block-end span-inline-start}@position-try --uktdd-top-end{position-area:block-start span-inline-start}@position-try --uktdd-submenu-inline-start{position-area:inline-start span-block-end}@position-try --uktdd-fill-bottom{position-area:block-end;block-size:calc(100% - var(--uktdd-body-gap) * 2);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height), calc((100dvb - anchor-size(block)) / 2 - var(--uktdd-body-gap) * 2));justify-self:anchor-center}@position-try --uktdd-fill-top{position-area:block-start;block-size:calc(100% - var(--uktdd-body-gap) * 2);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height), calc((100dvb - anchor-size(block)) / 2 - var(--uktdd-body-gap) * 2));justify-self:anchor-center}@position-try --uktdd-fill{block-size:calc(100% - var(--uktdd-body-gap) * 2)}@position-try --uktdd-submenu-fill{position-area:inline-end;block-size:calc(100% - var(--uktdd-body-gap) * 2);align-self:anchor-center}@position-try --uktdd-fill-cover{position-area:span-all span-inline-end;block-size:calc(100% - var(--uktdd-body-gap) * 2);align-self:anchor-center}";
13
13
  //#endregion
14
14
  //#region src/helpers.ts
15
+ var BODY_SELECTOR = ".uktdropdown-body";
15
16
  var ITEM_SELECTOR = "[data-ukt-item], [data-ukt-value]";
16
17
  var SUBMENU_SELECTOR = "[data-ukt-submenu]";
18
+ var LIST_CONTAINER_SELECTOR = "menu, ol, ul";
17
19
  var DISABLED_ITEM_SELECTOR = "[aria-disabled=\"true\"]";
18
20
  var FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
19
21
  var getBodyElement = (dropdownElement) => dropdownElement?.querySelector(".uktdropdown-body") ?? null;
@@ -177,16 +179,22 @@ var annotateParentItems = (bodyElement) => {
177
179
  if (item) ensureSubmenuARIA(item, submenu);
178
180
  }
179
181
  };
180
- var annotateItemRoles = (bodyElement, popupRole) => {
181
- if (!bodyElement) return;
182
- for (const list of Array.from(bodyElement.querySelectorAll("ul, ol"))) if (!list.hasAttribute("role") && list.querySelector("[data-ukt-item], [data-ukt-value]")) list.setAttribute("role", "presentation");
183
- for (const item of Array.from(bodyElement.querySelectorAll(ITEM_SELECTOR))) {
182
+ var annotateItemRoles = (root, popupRole) => {
183
+ if (!root) return;
184
+ for (const list of Array.from(root.querySelectorAll(LIST_CONTAINER_SELECTOR))) if (!list.hasAttribute("role") && list.querySelector("[data-ukt-item], [data-ukt-value]")) list.setAttribute("role", "presentation");
185
+ const items = Array.from(root.querySelectorAll(ITEM_SELECTOR));
186
+ if (root.matches("[data-ukt-item], [data-ukt-value]")) items.unshift(root);
187
+ for (const item of items) {
184
188
  if (item.hasAttribute("role") || item.matches("a[href], button, input, select, textarea")) continue;
185
189
  const isMenuItem = popupRole === "menu" || getLevelRoot(item) != null;
186
190
  if (!isMenuItem && getSubmenuOfItem(item)) continue;
187
191
  item.setAttribute("role", isMenuItem ? "menuitem" : "option");
188
192
  }
189
193
  };
194
+ var annotateSubtree = (root, popupRole) => {
195
+ annotateParentItems(root);
196
+ if (popupRole !== "dialog") annotateItemRoles(root, popupRole);
197
+ };
190
198
  var expandItem = (item, onToggleSubmenu) => {
191
199
  const submenu = getSubmenuOfItem(item);
192
200
  if (!submenu) return;
@@ -380,10 +388,18 @@ function Menubar(t0) {
380
388
  },
381
389
  registerMember(member_2) {
382
390
  membersRef.current.add(member_2);
383
- setTabbableElement((current) => current == null && canHoldTabStop(member_2) ? member_2.element : current);
391
+ setTabbableElement((current) => {
392
+ if (current == null) return canHoldTabStop(member_2) ? member_2.element : current;
393
+ if (current === member_2.element && !canHoldTabStop(member_2)) return null;
394
+ return current;
395
+ });
384
396
  return () => {
385
397
  membersRef.current.delete(member_2);
386
- reconcile();
398
+ if (member_2.element !== tabbableElement) return;
399
+ queueMicrotask(() => {
400
+ for (const registered of membersRef.current) if (registered.element === member_2.element) return;
401
+ reconcile();
402
+ });
387
403
  };
388
404
  },
389
405
  tabbableElement
@@ -495,7 +511,7 @@ function _temp(count) {
495
511
  }
496
512
  //#endregion
497
513
  //#region src/Dropdown.tsx
498
- var CHILDREN_ERROR = "@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.";
514
+ var CHILDREN_ERROR = "Dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.";
499
515
  var CLICKABLE_SELECTOR = "button, a[href], input[type=\"button\"], input[type=\"submit\"]";
500
516
  var TEXT_INPUT_SELECTOR = `input${NON_TEXT_INPUT_TYPES.map((type) => `:not([type=${type}])`).join("")},textarea`;
501
517
  var SUBMENU_DISCLOSURE_DELAY = 200;
@@ -507,6 +523,27 @@ var isTextInputElement = (element) => {
507
523
  const { type } = element.props;
508
524
  return type == null || !NON_TEXT_INPUT_TYPES.includes(type);
509
525
  };
526
+ var useWarnOnce = (message) => {
527
+ const $ = c(3);
528
+ const warnedRef = useRef(false);
529
+ let t0;
530
+ let t1;
531
+ if ($[0] !== message) {
532
+ t0 = () => {
533
+ if (warnedRef.current || message == null) return;
534
+ warnedRef.current = true;
535
+ console.warn(`@acusti/dropdown: ${message}`);
536
+ };
537
+ t1 = [message];
538
+ $[0] = message;
539
+ $[1] = t0;
540
+ $[2] = t1;
541
+ } else {
542
+ t0 = $[1];
543
+ t1 = $[2];
544
+ }
545
+ useEffect(t0, t1);
546
+ };
510
547
  function Dropdown(props) {
511
548
  const $ = c(5);
512
549
  const parentDropdown = useContext(DropdownContext);
@@ -532,16 +569,14 @@ function Dropdown(props) {
532
569
  return t0;
533
570
  }
534
571
  function RootDropdown(t0) {
535
- const $ = c(188);
536
- const { allowCreate, allowEmpty: t1, children, className, disabled, hasItems: t2, isOpenOnMount, isSearchable, keepOpenOnSubmit: t3, label, name, onActiveItem, onClick, onClose, onMouseDown, onMouseUp, onOpen, onSubmitItem, openOnHover, placeholder, style: styleFromProps, tabIndex, value } = t0;
572
+ const $ = c(190);
573
+ const { allowCreate, allowEmpty: t1, children, className, disabled, hasItems: t2, isOpenOnMount, isSearchable, itemAs: itemElementName, keepOpenOnSubmit: t3, label, name, onActiveItem, onClick, onClose, onMouseDown, onMouseUp, onOpen, onSubmitItem, openOnHover, placeholder, style: styleFromProps, tabIndex, value } = t0;
537
574
  const allowEmpty = t1 === void 0 ? true : t1;
538
575
  const hasItems = t2 === void 0 ? true : t2;
539
576
  const keepOpenOnSubmit = t3 === void 0 ? !hasItems : t3;
540
577
  const childrenCount = Children.count(children);
541
- if (childrenCount !== 1 && childrenCount !== 2) {
542
- if (childrenCount === 0) throw new Error("@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body. Received no children.");
543
- console.error(`${CHILDREN_ERROR} Received ${childrenCount} children.`);
544
- }
578
+ if (childrenCount === 0) throw new Error(`@acusti/dropdown: ${CHILDREN_ERROR} Received no children.`);
579
+ useWarnOnce(childrenCount > 2 ? `${CHILDREN_ERROR} Received ${childrenCount} children.` : null);
545
580
  let trigger;
546
581
  if (childrenCount > 1) trigger = children[0];
547
582
  const body = childrenCount > 1 ? children[1] : children;
@@ -574,7 +609,7 @@ function RootDropdown(t0) {
574
609
  t5 = /* @__PURE__ */ new WeakSet();
575
610
  $[5] = t5;
576
611
  } else t5 = $[5];
577
- const annotatedBodiesRef = useRef(t5);
612
+ const annotatedElementsRef = useRef(t5);
578
613
  const closingTimerRef = useRef(null);
579
614
  const isOpeningTimerRef = useRef(null);
580
615
  const currentInputMethodRef = useRef("mouse");
@@ -635,6 +670,7 @@ function RootDropdown(t0) {
635
670
  $[15] = t9;
636
671
  } else t9 = $[15];
637
672
  useLayoutEffect(t9);
673
+ useWarnOnce(itemElementName === void 0 ? null : "itemAs only applies to a submenu Dropdown (one nested in a dropdown where hasItems is true) and is ignored anywhere else.");
638
674
  const isMountedRef = useRef(false);
639
675
  let t10;
640
676
  let t11;
@@ -658,37 +694,44 @@ function RootDropdown(t0) {
658
694
  }
659
695
  useEffect(t10, t11);
660
696
  let t12;
661
- if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
697
+ if ($[19] !== popupRole) {
662
698
  t12 = { registerSubmenu(registration) {
663
699
  submenuRegistrationsRef.current.add(registration);
700
+ const { element } = registration;
701
+ if (!annotatedElementsRef.current.has(element)) {
702
+ annotatedElementsRef.current.add(element);
703
+ const bodyElement = element.closest(BODY_SELECTOR);
704
+ if (bodyElement && annotatedElementsRef.current.has(bodyElement)) annotateSubtree(element, popupRole);
705
+ }
664
706
  return () => {
665
707
  submenuRegistrationsRef.current.delete(registration);
666
708
  };
667
709
  } };
668
- $[19] = t12;
669
- } else t12 = $[19];
710
+ $[19] = popupRole;
711
+ $[20] = t12;
712
+ } else t12 = $[20];
670
713
  const dropdownContextValue = t12;
671
714
  let t13;
672
- if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
715
+ if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
673
716
  t13 = (key, payload) => {
674
717
  if (!payload.element) return;
675
718
  for (const registration_0 of submenuRegistrationsRef.current) if (registration_0.element.contains(payload.element)) registration_0[key]?.(payload);
676
719
  };
677
- $[20] = t13;
678
- } else t13 = $[20];
720
+ $[21] = t13;
721
+ } else t13 = $[21];
679
722
  const dispatchToSubmenus = t13;
680
723
  let t14;
681
- if ($[21] !== onActiveItem) {
724
+ if ($[22] !== onActiveItem) {
682
725
  t14 = (payload_0) => {
683
726
  onActiveItem?.(payload_0);
684
727
  dispatchToSubmenus("onActiveItem", payload_0);
685
728
  };
686
- $[21] = onActiveItem;
687
- $[22] = t14;
688
- } else t14 = $[22];
729
+ $[22] = onActiveItem;
730
+ $[23] = t14;
731
+ } else t14 = $[23];
689
732
  const handleActiveItem = t14;
690
733
  let t15;
691
- if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
734
+ if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
692
735
  t15 = (item, isExpanded) => {
693
736
  const submenu = getSubmenuOfItem(item);
694
737
  if (submenu) {
@@ -698,11 +741,11 @@ function RootDropdown(t0) {
698
741
  }
699
742
  for (const registration_1 of submenuRegistrationsRef.current) if (registration_1.element === item) (isExpanded ? registration_1.onOpen : registration_1.onClose)?.();
700
743
  };
701
- $[23] = t15;
702
- } else t15 = $[23];
744
+ $[24] = t15;
745
+ } else t15 = $[24];
703
746
  const handleToggleSubmenu = t15;
704
747
  let t16;
705
- if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
748
+ if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
706
749
  t16 = () => {
707
750
  if (disclosureTimerRef.current != null) {
708
751
  clearTimeout(disclosureTimerRef.current);
@@ -710,23 +753,23 @@ function RootDropdown(t0) {
710
753
  }
711
754
  pendingDisclosureItemRef.current = null;
712
755
  };
713
- $[24] = t16;
714
- } else t16 = $[24];
756
+ $[25] = t16;
757
+ } else t16 = $[25];
715
758
  const clearDisclosureTimer = t16;
716
759
  let t17;
717
760
  let t18;
718
- if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
761
+ if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
719
762
  t17 = () => clearDisclosureTimer;
720
763
  t18 = [];
721
- $[25] = t17;
722
- $[26] = t18;
764
+ $[26] = t17;
765
+ $[27] = t18;
723
766
  } else {
724
- t17 = $[25];
725
- t18 = $[26];
767
+ t17 = $[26];
768
+ t18 = $[27];
726
769
  }
727
770
  useEffect(t17, t18);
728
771
  let t19;
729
- if ($[27] !== dropdownElement) {
772
+ if ($[28] !== dropdownElement) {
730
773
  t19 = () => {
731
774
  if (!dropdownElement) return;
732
775
  const activeElement = getActiveItemElement(dropdownElement);
@@ -746,35 +789,35 @@ function RootDropdown(t0) {
746
789
  }
747
790
  clearDisclosureTimer();
748
791
  };
749
- $[27] = dropdownElement;
750
- $[28] = t19;
751
- } else t19 = $[28];
792
+ $[28] = dropdownElement;
793
+ $[29] = t19;
794
+ } else t19 = $[29];
752
795
  const syncSubmenuDisclosure = t19;
753
796
  let t20;
754
- if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
797
+ if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
755
798
  t20 = () => {
756
799
  if (safeAreaTimerRef.current != null) {
757
800
  clearTimeout(safeAreaTimerRef.current);
758
801
  safeAreaTimerRef.current = null;
759
802
  }
760
803
  };
761
- $[29] = t20;
762
- } else t20 = $[29];
804
+ $[30] = t20;
805
+ } else t20 = $[30];
763
806
  const clearSafeAreaTimer = t20;
764
807
  let t21;
765
808
  let t22;
766
- if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
809
+ if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
767
810
  t21 = () => clearSafeAreaTimer;
768
811
  t22 = [];
769
- $[30] = t21;
770
- $[31] = t22;
812
+ $[31] = t21;
813
+ $[32] = t22;
771
814
  } else {
772
- t21 = $[30];
773
- t22 = $[31];
815
+ t21 = $[31];
816
+ t22 = $[32];
774
817
  }
775
818
  useEffect(t21, t22);
776
819
  let t23;
777
- if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
820
+ if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
778
821
  t23 = (x, y) => {
779
822
  const safeArea = safeAreaRef.current;
780
823
  if (!safeArea || !isItemExpanded(safeArea.parent)) return false;
@@ -794,11 +837,11 @@ function RootDropdown(t0) {
794
837
  y: submenuRect.bottom
795
838
  });
796
839
  };
797
- $[32] = t23;
798
- } else t23 = $[32];
840
+ $[33] = t23;
841
+ } else t23 = $[33];
799
842
  const isPointerInSafeArea = t23;
800
843
  let t24;
801
- if ($[33] !== dropdownElement || $[34] !== handleActiveItem || $[35] !== syncSubmenuDisclosure) {
844
+ if ($[34] !== dropdownElement || $[35] !== handleActiveItem || $[36] !== syncSubmenuDisclosure) {
802
845
  t24 = (targetElement) => {
803
846
  clearSafeAreaTimer();
804
847
  safeAreaRef.current = null;
@@ -816,14 +859,14 @@ function RootDropdown(t0) {
816
859
  });
817
860
  syncSubmenuDisclosure();
818
861
  };
819
- $[33] = dropdownElement;
820
- $[34] = handleActiveItem;
821
- $[35] = syncSubmenuDisclosure;
822
- $[36] = t24;
823
- } else t24 = $[36];
862
+ $[34] = dropdownElement;
863
+ $[35] = handleActiveItem;
864
+ $[36] = syncSubmenuDisclosure;
865
+ $[37] = t24;
866
+ } else t24 = $[37];
824
867
  const commitPointerTarget = t24;
825
868
  let t25;
826
- if ($[37] !== commitPointerTarget || $[38] !== dropdownElement || $[39] !== hasItems) {
869
+ if ($[38] !== commitPointerTarget || $[39] !== dropdownElement || $[40] !== hasItems) {
827
870
  t25 = (event_0) => {
828
871
  if (!dropdownElement || !isOpenRef.current || !hasItems) return;
829
872
  const pointer_0 = {
@@ -857,37 +900,37 @@ function RootDropdown(t0) {
857
900
  safeAreaTimerRef.current = setTimeout(commitPointerTarget, SAFE_AREA_TIMEOUT);
858
901
  } else if (wasInSafeAreaRef.current) commitPointerTarget(target_0);
859
902
  };
860
- $[37] = commitPointerTarget;
861
- $[38] = dropdownElement;
862
- $[39] = hasItems;
863
- $[40] = t25;
864
- } else t25 = $[40];
903
+ $[38] = commitPointerTarget;
904
+ $[39] = dropdownElement;
905
+ $[40] = hasItems;
906
+ $[41] = t25;
907
+ } else t25 = $[41];
865
908
  const trackSafeArea = t25;
866
909
  let t26;
867
- if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
910
+ if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
868
911
  t26 = () => {
869
912
  if (hoverCloseTimerRef.current != null) {
870
913
  clearTimeout(hoverCloseTimerRef.current);
871
914
  hoverCloseTimerRef.current = null;
872
915
  }
873
916
  };
874
- $[41] = t26;
875
- } else t26 = $[41];
917
+ $[42] = t26;
918
+ } else t26 = $[42];
876
919
  const clearHoverCloseTimer = t26;
877
920
  let t27;
878
921
  let t28;
879
- if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
922
+ if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
880
923
  t27 = () => clearHoverCloseTimer;
881
924
  t28 = [];
882
- $[42] = t27;
883
- $[43] = t28;
925
+ $[43] = t27;
926
+ $[44] = t28;
884
927
  } else {
885
- t27 = $[42];
886
- t28 = $[43];
928
+ t27 = $[43];
929
+ t28 = $[44];
887
930
  }
888
931
  useEffect(t27, t28);
889
932
  let t29;
890
- if ($[44] !== dropdownElement || $[45] !== menubar) {
933
+ if ($[45] !== dropdownElement || $[46] !== menubar) {
891
934
  t29 = (options) => {
892
935
  getTriggerElement(dropdownElement)?.removeAttribute("aria-activedescendant");
893
936
  setIsOpen(false);
@@ -904,26 +947,26 @@ function RootDropdown(t0) {
904
947
  }
905
948
  if (menubar && dropdownElement && !options?.keepMenubarEngaged) menubar.notifyClosed(dropdownElement);
906
949
  };
907
- $[44] = dropdownElement;
908
- $[45] = menubar;
909
- $[46] = t29;
910
- } else t29 = $[46];
950
+ $[45] = dropdownElement;
951
+ $[46] = menubar;
952
+ $[47] = t29;
953
+ } else t29 = $[47];
911
954
  const closeDropdown = t29;
912
955
  let t30;
913
- if ($[47] !== disabled || $[48] !== openOnHover) {
956
+ if ($[48] !== disabled || $[49] !== openOnHover) {
914
957
  t30 = () => {
915
958
  clearHoverCloseTimer();
916
959
  if (disabled || !openOnHover || isOpenRef.current) return;
917
960
  setIsOpen(true);
918
961
  setIsOpening(false);
919
962
  };
920
- $[47] = disabled;
921
- $[48] = openOnHover;
922
- $[49] = t30;
923
- } else t30 = $[49];
963
+ $[48] = disabled;
964
+ $[49] = openOnHover;
965
+ $[50] = t30;
966
+ } else t30 = $[50];
924
967
  const handleDropdownMouseEnter = t30;
925
968
  let t31;
926
- if ($[50] !== closeDropdown || $[51] !== openOnHover) {
969
+ if ($[51] !== closeDropdown || $[52] !== openOnHover) {
927
970
  t31 = () => {
928
971
  if (!openOnHover || !isOpenRef.current || hoverCloseTimerRef.current != null) return;
929
972
  hoverCloseTimerRef.current = setTimeout(() => {
@@ -931,22 +974,22 @@ function RootDropdown(t0) {
931
974
  closeDropdown();
932
975
  }, HOVER_CLOSE_DELAY);
933
976
  };
934
- $[50] = closeDropdown;
935
- $[51] = openOnHover;
936
- $[52] = t31;
937
- } else t31 = $[52];
977
+ $[51] = closeDropdown;
978
+ $[52] = openOnHover;
979
+ $[53] = t31;
980
+ } else t31 = $[53];
938
981
  const handleDropdownMouseLeave = t31;
939
982
  let t32;
940
- if ($[53] !== dropdownElement) {
983
+ if ($[54] !== dropdownElement) {
941
984
  t32 = () => {
942
985
  getTriggerElement(dropdownElement)?.focus();
943
986
  };
944
- $[53] = dropdownElement;
945
- $[54] = t32;
946
- } else t32 = $[54];
987
+ $[54] = dropdownElement;
988
+ $[55] = t32;
989
+ } else t32 = $[55];
947
990
  const focusTrigger = t32;
948
991
  let t33;
949
- if ($[55] !== closeDropdown || $[56] !== disabled || $[57] !== dropdownElement || $[58] !== focusTrigger || $[59] !== isMenubarItem || $[60] !== menubar) {
992
+ if ($[56] !== closeDropdown || $[57] !== disabled || $[58] !== dropdownElement || $[59] !== focusTrigger || $[60] !== isMenubarItem || $[61] !== menubar) {
950
993
  t33 = () => {
951
994
  if (!menubar || !dropdownElement) return;
952
995
  return menubar.registerMember({
@@ -962,18 +1005,18 @@ function RootDropdown(t0) {
962
1005
  }
963
1006
  });
964
1007
  };
965
- $[55] = closeDropdown;
966
- $[56] = disabled;
967
- $[57] = dropdownElement;
968
- $[58] = focusTrigger;
969
- $[59] = isMenubarItem;
970
- $[60] = menubar;
971
- $[61] = t33;
972
- } else t33 = $[61];
1008
+ $[56] = closeDropdown;
1009
+ $[57] = disabled;
1010
+ $[58] = dropdownElement;
1011
+ $[59] = focusTrigger;
1012
+ $[60] = isMenubarItem;
1013
+ $[61] = menubar;
1014
+ $[62] = t33;
1015
+ } else t33 = $[62];
973
1016
  useEffect(t33);
974
1017
  let t34;
975
1018
  let t35;
976
- if ($[62] !== dropdownElement || $[63] !== isOpen || $[64] !== menubar) {
1019
+ if ($[63] !== dropdownElement || $[64] !== isOpen || $[65] !== menubar) {
977
1020
  t34 = () => {
978
1021
  if (isOpen && menubar && dropdownElement) menubar.notifyOpened(dropdownElement);
979
1022
  };
@@ -982,24 +1025,24 @@ function RootDropdown(t0) {
982
1025
  isOpen,
983
1026
  menubar
984
1027
  ];
985
- $[62] = dropdownElement;
986
- $[63] = isOpen;
987
- $[64] = menubar;
988
- $[65] = t34;
989
- $[66] = t35;
1028
+ $[63] = dropdownElement;
1029
+ $[64] = isOpen;
1030
+ $[65] = menubar;
1031
+ $[66] = t34;
1032
+ $[67] = t35;
990
1033
  } else {
991
- t34 = $[65];
992
- t35 = $[66];
1034
+ t34 = $[66];
1035
+ t35 = $[67];
993
1036
  }
994
1037
  useEffect(t34, t35);
995
1038
  let t36;
996
- if ($[67] !== allowCreate || $[68] !== allowEmpty || $[69] !== closeDropdown || $[70] !== dropdownElement || $[71] !== handleActiveItem || $[72] !== hasItems || $[73] !== keepOpenOnSubmit || $[74] !== onSubmitItem || $[75] !== popupRole || $[76] !== valueIdentity) {
1039
+ if ($[68] !== allowCreate || $[69] !== allowEmpty || $[70] !== closeDropdown || $[71] !== dropdownElement || $[72] !== handleActiveItem || $[73] !== hasItems || $[74] !== keepOpenOnSubmit || $[75] !== onSubmitItem || $[76] !== popupRole || $[77] !== valueIdentity) {
997
1040
  t36 = (event_1) => {
998
- const element = hasItems ? getActiveItemElement(dropdownElement) : null;
999
- const submenuOfActive = element ? getSubmenuOfItem(element) : null;
1000
- if (element && submenuOfActive) {
1041
+ const element_0 = hasItems ? getActiveItemElement(dropdownElement) : null;
1042
+ const submenuOfActive = element_0 ? getSubmenuOfItem(element_0) : null;
1043
+ if (element_0 && submenuOfActive) {
1001
1044
  clearDisclosureTimer();
1002
- expandItem(element, handleToggleSubmenu);
1045
+ expandItem(element_0, handleToggleSubmenu);
1003
1046
  if (currentInputMethodRef.current === "keyboard" && dropdownElement) {
1004
1047
  const firstItem = getItemElements(dropdownElement, submenuOfActive)?.[0];
1005
1048
  if (firstItem) setActiveItem({
@@ -1013,31 +1056,31 @@ function RootDropdown(t0) {
1013
1056
  }
1014
1057
  if (isOpenRef.current && !keepOpenOnSubmit) closingTimerRef.current = setTimeout(closeDropdown, 90);
1015
1058
  if (!hasItems) return;
1016
- if (!element) {
1059
+ if (!element_0) {
1017
1060
  if (!inputElementRef.current) return;
1018
1061
  if (inputElementRef.current.value) {
1019
1062
  if (!allowCreate) return;
1020
1063
  } else if (!allowEmpty) return;
1021
1064
  }
1022
- let itemLabel = element?.innerText ?? "";
1065
+ let itemLabel = element_0?.innerText ?? "";
1023
1066
  if (inputElementRef.current) {
1024
- if (!element) itemLabel = inputElementRef.current.value;
1067
+ if (!element_0) itemLabel = inputElementRef.current.value;
1025
1068
  else inputElementRef.current.value = itemLabel;
1026
1069
  if (inputElementRef.current === inputElementRef.current.ownerDocument.activeElement) inputElementRef.current.blur();
1027
1070
  }
1028
- const nextValue = element?.dataset.uktValue ?? itemLabel;
1071
+ const nextValue = element_0?.dataset.uktValue ?? itemLabel;
1029
1072
  if (valueIdentity && valueIdentity === nextValue) return;
1030
- if (element && keepOpenOnSubmit && popupRole === "listbox" && !consumerOwnsARIASelectedRef.current) {
1031
- const bodyElement = element.closest(".uktdropdown-body");
1032
- for (const selected of Array.from(bodyElement?.querySelectorAll("[aria-selected=\"true\"]") ?? [])) selected.removeAttribute("aria-selected");
1033
- element.setAttribute("aria-selected", "true");
1073
+ if (element_0 && keepOpenOnSubmit && popupRole === "listbox" && !consumerOwnsARIASelectedRef.current) {
1074
+ const bodyElement_0 = element_0.closest(BODY_SELECTOR);
1075
+ for (const selected of Array.from(bodyElement_0?.querySelectorAll("[aria-selected=\"true\"]") ?? [])) selected.removeAttribute("aria-selected");
1076
+ element_0.setAttribute("aria-selected", "true");
1034
1077
  }
1035
- if (element) {
1078
+ if (element_0) {
1036
1079
  const eventTarget = event_1.target;
1037
- if (element.matches(CLICKABLE_SELECTOR)) {
1038
- if (element !== eventTarget && !element.contains(eventTarget)) element.click();
1080
+ if (element_0.matches(CLICKABLE_SELECTOR)) {
1081
+ if (element_0 !== eventTarget && !element_0.contains(eventTarget)) element_0.click();
1039
1082
  } else {
1040
- const clickableElements = element.querySelectorAll(CLICKABLE_SELECTOR);
1083
+ const clickableElements = element_0.querySelectorAll(CLICKABLE_SELECTOR);
1041
1084
  if (clickableElements.length === 1) {
1042
1085
  const clickableElement = clickableElements[0];
1043
1086
  if (clickableElement !== eventTarget && !clickableElement.contains(eventTarget)) clickableElement.click();
@@ -1045,30 +1088,30 @@ function RootDropdown(t0) {
1045
1088
  }
1046
1089
  }
1047
1090
  const payload_1 = {
1048
- element,
1091
+ element: element_0,
1049
1092
  event: event_1,
1050
1093
  label: itemLabel,
1051
- path: getItemPath(element),
1094
+ path: getItemPath(element_0),
1052
1095
  value: nextValue
1053
1096
  };
1054
1097
  onSubmitItem?.(payload_1);
1055
1098
  dispatchToSubmenus("onSubmitItem", payload_1);
1056
1099
  };
1057
- $[67] = allowCreate;
1058
- $[68] = allowEmpty;
1059
- $[69] = closeDropdown;
1060
- $[70] = dropdownElement;
1061
- $[71] = handleActiveItem;
1062
- $[72] = hasItems;
1063
- $[73] = keepOpenOnSubmit;
1064
- $[74] = onSubmitItem;
1065
- $[75] = popupRole;
1066
- $[76] = valueIdentity;
1067
- $[77] = t36;
1068
- } else t36 = $[77];
1100
+ $[68] = allowCreate;
1101
+ $[69] = allowEmpty;
1102
+ $[70] = closeDropdown;
1103
+ $[71] = dropdownElement;
1104
+ $[72] = handleActiveItem;
1105
+ $[73] = hasItems;
1106
+ $[74] = keepOpenOnSubmit;
1107
+ $[75] = onSubmitItem;
1108
+ $[76] = popupRole;
1109
+ $[77] = valueIdentity;
1110
+ $[78] = t36;
1111
+ } else t36 = $[78];
1069
1112
  const handleSubmitItem = t36;
1070
1113
  let t37;
1071
- if ($[78] !== trackSafeArea) {
1114
+ if ($[79] !== trackSafeArea) {
1072
1115
  t37 = (event_2) => {
1073
1116
  const { clientX, clientY } = event_2;
1074
1117
  currentInputMethodRef.current = "mouse";
@@ -1078,12 +1121,12 @@ function RootDropdown(t0) {
1078
1121
  if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
1079
1122
  setIsOpening(false);
1080
1123
  };
1081
- $[78] = trackSafeArea;
1082
- $[79] = t37;
1083
- } else t37 = $[79];
1124
+ $[79] = trackSafeArea;
1125
+ $[80] = t37;
1126
+ } else t37 = $[80];
1084
1127
  const handleMouseMove = t37;
1085
1128
  let t38;
1086
- if ($[80] !== dropdownElement || $[81] !== handleActiveItem || $[82] !== hasItems || $[83] !== syncSubmenuDisclosure) {
1129
+ if ($[81] !== dropdownElement || $[82] !== handleActiveItem || $[83] !== hasItems || $[84] !== syncSubmenuDisclosure) {
1087
1130
  t38 = (event_3) => {
1088
1131
  if (!hasItems) return;
1089
1132
  if (currentInputMethodRef.current !== "mouse") return;
@@ -1103,15 +1146,15 @@ function RootDropdown(t0) {
1103
1146
  });
1104
1147
  syncSubmenuDisclosure();
1105
1148
  };
1106
- $[80] = dropdownElement;
1107
- $[81] = handleActiveItem;
1108
- $[82] = hasItems;
1109
- $[83] = syncSubmenuDisclosure;
1110
- $[84] = t38;
1111
- } else t38 = $[84];
1149
+ $[81] = dropdownElement;
1150
+ $[82] = handleActiveItem;
1151
+ $[83] = hasItems;
1152
+ $[84] = syncSubmenuDisclosure;
1153
+ $[85] = t38;
1154
+ } else t38 = $[85];
1112
1155
  const handleMouseOver = t38;
1113
1156
  let t39;
1114
- if ($[85] !== dropdownElement || $[86] !== hasItems || $[87] !== syncSubmenuDisclosure) {
1157
+ if ($[86] !== dropdownElement || $[87] !== hasItems || $[88] !== syncSubmenuDisclosure) {
1115
1158
  t39 = (event_4) => {
1116
1159
  if (!hasItems) return;
1117
1160
  const relatedTarget = event_4.relatedTarget;
@@ -1128,14 +1171,14 @@ function RootDropdown(t0) {
1128
1171
  clearActiveItems(dropdownElement, activeItem);
1129
1172
  syncSubmenuDisclosure();
1130
1173
  };
1131
- $[85] = dropdownElement;
1132
- $[86] = hasItems;
1133
- $[87] = syncSubmenuDisclosure;
1134
- $[88] = t39;
1135
- } else t39 = $[88];
1174
+ $[86] = dropdownElement;
1175
+ $[87] = hasItems;
1176
+ $[88] = syncSubmenuDisclosure;
1177
+ $[89] = t39;
1178
+ } else t39 = $[89];
1136
1179
  const handleMouseOut = t39;
1137
1180
  let t40;
1138
- if ($[89] !== disabled || $[90] !== onMouseDown) {
1181
+ if ($[90] !== disabled || $[91] !== onMouseDown) {
1139
1182
  t40 = (event_5) => {
1140
1183
  if (onMouseDown) onMouseDown(event_5);
1141
1184
  if (disabled || isOpenRef.current) return;
@@ -1150,20 +1193,20 @@ function RootDropdown(t0) {
1150
1193
  isOpeningTimerRef.current = null;
1151
1194
  }, 1e3);
1152
1195
  };
1153
- $[89] = disabled;
1154
- $[90] = onMouseDown;
1155
- $[91] = t40;
1156
- } else t40 = $[91];
1196
+ $[90] = disabled;
1197
+ $[91] = onMouseDown;
1198
+ $[92] = t40;
1199
+ } else t40 = $[92];
1157
1200
  const handleMouseDown = t40;
1158
1201
  let t41;
1159
- if ($[92] !== closeDropdown || $[93] !== dropdownElement || $[94] !== handleActiveItem || $[95] !== handleSubmitItem || $[96] !== hasItems || $[97] !== onMouseUp) {
1202
+ if ($[93] !== closeDropdown || $[94] !== dropdownElement || $[95] !== handleActiveItem || $[96] !== handleSubmitItem || $[97] !== hasItems || $[98] !== onMouseUp) {
1160
1203
  t41 = (event_6) => {
1161
1204
  if (onMouseUp) onMouseUp(event_6);
1162
1205
  if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
1163
1206
  const eventTarget_1 = event_6.target;
1164
1207
  const clickedRoot = eventTarget_1.closest(".uktdropdown");
1165
1208
  if (clickedRoot !== dropdownElement && clickedRoot?.classList.contains("is-open") && dropdownElement?.contains(clickedRoot)) return;
1166
- const targetBody = eventTarget_1.closest(".uktdropdown-body");
1209
+ const targetBody = eventTarget_1.closest(BODY_SELECTOR);
1167
1210
  if (!Boolean(targetBody && targetBody.closest(".uktdropdown") === dropdownElement)) {
1168
1211
  if (!isOpeningRef.current && inputElementRef.current !== eventTarget_1.ownerDocument.activeElement) closeDropdown();
1169
1212
  return;
@@ -1181,17 +1224,17 @@ function RootDropdown(t0) {
1181
1224
  }
1182
1225
  handleSubmitItem(event_6);
1183
1226
  };
1184
- $[92] = closeDropdown;
1185
- $[93] = dropdownElement;
1186
- $[94] = handleActiveItem;
1187
- $[95] = handleSubmitItem;
1188
- $[96] = hasItems;
1189
- $[97] = onMouseUp;
1190
- $[98] = t41;
1191
- } else t41 = $[98];
1227
+ $[93] = closeDropdown;
1228
+ $[94] = dropdownElement;
1229
+ $[95] = handleActiveItem;
1230
+ $[96] = handleSubmitItem;
1231
+ $[97] = hasItems;
1232
+ $[98] = onMouseUp;
1233
+ $[99] = t41;
1234
+ } else t41 = $[99];
1192
1235
  const handleMouseUp = t41;
1193
1236
  let t42;
1194
- if ($[99] !== allowCreate || $[100] !== closeDropdown || $[101] !== disabled || $[102] !== dropdownElement || $[103] !== focusTrigger || $[104] !== handleActiveItem || $[105] !== handleSubmitItem || $[106] !== hasItems || $[107] !== menubar || $[108] !== syncSubmenuDisclosure) {
1237
+ if ($[100] !== allowCreate || $[101] !== closeDropdown || $[102] !== disabled || $[103] !== dropdownElement || $[104] !== focusTrigger || $[105] !== handleActiveItem || $[106] !== handleSubmitItem || $[107] !== hasItems || $[108] !== menubar || $[109] !== syncSubmenuDisclosure) {
1195
1238
  t42 = (event_7) => {
1196
1239
  const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
1197
1240
  const eventTarget_2 = event_7.target;
@@ -1337,31 +1380,31 @@ function RootDropdown(t0) {
1337
1380
  }
1338
1381
  }
1339
1382
  };
1340
- $[99] = allowCreate;
1341
- $[100] = closeDropdown;
1342
- $[101] = disabled;
1343
- $[102] = dropdownElement;
1344
- $[103] = focusTrigger;
1345
- $[104] = handleActiveItem;
1346
- $[105] = handleSubmitItem;
1347
- $[106] = hasItems;
1348
- $[107] = menubar;
1349
- $[108] = syncSubmenuDisclosure;
1350
- $[109] = t42;
1351
- } else t42 = $[109];
1383
+ $[100] = allowCreate;
1384
+ $[101] = closeDropdown;
1385
+ $[102] = disabled;
1386
+ $[103] = dropdownElement;
1387
+ $[104] = focusTrigger;
1388
+ $[105] = handleActiveItem;
1389
+ $[106] = handleSubmitItem;
1390
+ $[107] = hasItems;
1391
+ $[108] = menubar;
1392
+ $[109] = syncSubmenuDisclosure;
1393
+ $[110] = t42;
1394
+ } else t42 = $[110];
1352
1395
  const handleKeyDown = t42;
1353
1396
  let t43;
1354
- if ($[110] !== handleKeyDown) {
1397
+ if ($[111] !== handleKeyDown) {
1355
1398
  t43 = {
1356
1399
  ignoreUsedKeyboardEvents: false,
1357
1400
  onKeyDown: handleKeyDown
1358
1401
  };
1359
- $[110] = handleKeyDown;
1360
- $[111] = t43;
1361
- } else t43 = $[111];
1402
+ $[111] = handleKeyDown;
1403
+ $[112] = t43;
1404
+ } else t43 = $[112];
1362
1405
  useKeyboardEvents(t43);
1363
1406
  let t44;
1364
- if ($[112] !== allowCreate || $[113] !== closeDropdown || $[114] !== disabled || $[115] !== handleActiveItem) {
1407
+ if ($[113] !== allowCreate || $[114] !== closeDropdown || $[115] !== disabled || $[116] !== handleActiveItem) {
1365
1408
  t44 = (ref) => {
1366
1409
  setDropdownElement(ref);
1367
1410
  if (!ref) return;
@@ -1434,22 +1477,21 @@ function RootDropdown(t0) {
1434
1477
  if (inputElement) inputElement.removeEventListener("input", handleInput);
1435
1478
  };
1436
1479
  };
1437
- $[112] = allowCreate;
1438
- $[113] = closeDropdown;
1439
- $[114] = disabled;
1440
- $[115] = handleActiveItem;
1441
- $[116] = t44;
1442
- } else t44 = $[116];
1480
+ $[113] = allowCreate;
1481
+ $[114] = closeDropdown;
1482
+ $[115] = disabled;
1483
+ $[116] = handleActiveItem;
1484
+ $[117] = t44;
1485
+ } else t44 = $[117];
1443
1486
  const handleRef = t44;
1444
1487
  let t45;
1445
- if ($[117] !== dropdownElement || $[118] !== popupRole || $[119] !== valueIdentity) {
1488
+ if ($[118] !== dropdownElement || $[119] !== popupRole || $[120] !== valueIdentity) {
1446
1489
  t45 = (ref_0) => {
1447
1490
  if (!ref_0) return;
1448
- if (annotatedBodiesRef.current.has(ref_0)) return;
1449
- annotatedBodiesRef.current.add(ref_0);
1491
+ if (annotatedElementsRef.current.has(ref_0)) return;
1492
+ annotatedElementsRef.current.add(ref_0);
1450
1493
  consumerOwnsARIASelectedRef.current = ref_0.querySelector("[aria-selected]") != null;
1451
- annotateParentItems(ref_0);
1452
- if (popupRole !== "dialog") annotateItemRoles(ref_0, popupRole);
1494
+ annotateSubtree(ref_0, popupRole);
1453
1495
  ref_0.showPopover();
1454
1496
  if (valueIdentity != null && dropdownElement) {
1455
1497
  const selectedItem = getItemElements(dropdownElement)?.find((item_2) => item_2.dataset.uktValue === valueIdentity);
@@ -1462,83 +1504,84 @@ function RootDropdown(t0) {
1462
1504
  }
1463
1505
  }
1464
1506
  };
1465
- $[117] = dropdownElement;
1466
- $[118] = popupRole;
1467
- $[119] = valueIdentity;
1468
- $[120] = t45;
1469
- } else t45 = $[120];
1507
+ $[118] = dropdownElement;
1508
+ $[119] = popupRole;
1509
+ $[120] = valueIdentity;
1510
+ $[121] = t45;
1511
+ } else t45 = $[121];
1470
1512
  const handleBodyRef = t45;
1471
1513
  let bodyLabelledBy;
1472
- if (!isValidElement(trigger)) if (isSearchable) {
1473
- const t46 = valueLabel ?? "";
1474
- let t47;
1475
- if ($[121] === Symbol.for("react.memo_cache_sentinel")) {
1476
- t47 = () => setIsOpen(true);
1477
- $[121] = t47;
1478
- } else t47 = $[121];
1479
- let t48;
1480
- if ($[122] !== bodyId || $[123] !== disabled || $[124] !== isOpen || $[125] !== name || $[126] !== placeholder || $[127] !== popupRole || $[128] !== t46 || $[129] !== tabIndex || $[130] !== triggerId) {
1481
- t48 = /* @__PURE__ */ jsx("input", {
1482
- "aria-autocomplete": "list",
1483
- "aria-controls": bodyId,
1484
- "aria-expanded": isOpen,
1485
- "aria-haspopup": popupRole,
1486
- autoComplete: "off",
1487
- className: "uktdropdown-trigger",
1488
- defaultValue: t46,
1489
- disabled,
1490
- id: triggerId,
1491
- name,
1492
- onFocus: t47,
1493
- placeholder,
1494
- ref: inputElementRef,
1495
- role: "combobox",
1496
- tabIndex,
1497
- type: "text"
1498
- });
1499
- $[122] = bodyId;
1500
- $[123] = disabled;
1501
- $[124] = isOpen;
1502
- $[125] = name;
1503
- $[126] = placeholder;
1504
- $[127] = popupRole;
1505
- $[128] = t46;
1506
- $[129] = tabIndex;
1507
- $[130] = triggerId;
1508
- $[131] = t48;
1509
- } else t48 = $[131];
1510
- trigger = t48;
1514
+ if (!isValidElement(trigger)) {
1515
+ if (isSearchable) {
1516
+ const t46 = valueLabel ?? "";
1517
+ let t47;
1518
+ if ($[122] === Symbol.for("react.memo_cache_sentinel")) {
1519
+ t47 = () => setIsOpen(true);
1520
+ $[122] = t47;
1521
+ } else t47 = $[122];
1522
+ let t48;
1523
+ if ($[123] !== bodyId || $[124] !== disabled || $[125] !== isOpen || $[126] !== name || $[127] !== placeholder || $[128] !== popupRole || $[129] !== t46 || $[130] !== tabIndex || $[131] !== triggerId) {
1524
+ t48 = /* @__PURE__ */ jsx("input", {
1525
+ "aria-autocomplete": "list",
1526
+ "aria-controls": bodyId,
1527
+ "aria-expanded": isOpen,
1528
+ "aria-haspopup": popupRole,
1529
+ autoComplete: "off",
1530
+ className: "uktdropdown-trigger",
1531
+ defaultValue: t46,
1532
+ disabled,
1533
+ id: triggerId,
1534
+ name,
1535
+ onFocus: t47,
1536
+ placeholder,
1537
+ ref: inputElementRef,
1538
+ role: "combobox",
1539
+ tabIndex,
1540
+ type: "text"
1541
+ });
1542
+ $[123] = bodyId;
1543
+ $[124] = disabled;
1544
+ $[125] = isOpen;
1545
+ $[126] = name;
1546
+ $[127] = placeholder;
1547
+ $[128] = popupRole;
1548
+ $[129] = t46;
1549
+ $[130] = tabIndex;
1550
+ $[131] = triggerId;
1551
+ $[132] = t48;
1552
+ } else t48 = $[132];
1553
+ trigger = t48;
1554
+ } else {
1555
+ bodyLabelledBy = triggerId;
1556
+ const t46 = isMenubarItem ? "menuitem" : void 0;
1557
+ const t47 = menubarTabIndex ?? 0;
1558
+ let t48;
1559
+ if ($[133] !== bodyId || $[134] !== disabled || $[135] !== isOpen || $[136] !== popupRole || $[137] !== t46 || $[138] !== t47 || $[139] !== trigger || $[140] !== triggerId) {
1560
+ t48 = /* @__PURE__ */ jsx("button", {
1561
+ "aria-controls": bodyId,
1562
+ "aria-expanded": isOpen,
1563
+ "aria-haspopup": popupRole,
1564
+ className: "uktdropdown-trigger",
1565
+ disabled,
1566
+ id: triggerId,
1567
+ role: t46,
1568
+ tabIndex: t47,
1569
+ type: "button",
1570
+ children: trigger
1571
+ });
1572
+ $[133] = bodyId;
1573
+ $[134] = disabled;
1574
+ $[135] = isOpen;
1575
+ $[136] = popupRole;
1576
+ $[137] = t46;
1577
+ $[138] = t47;
1578
+ $[139] = trigger;
1579
+ $[140] = triggerId;
1580
+ $[141] = t48;
1581
+ } else t48 = $[141];
1582
+ trigger = t48;
1583
+ }
1511
1584
  } else {
1512
- bodyLabelledBy = triggerId;
1513
- const t46 = isMenubarItem ? "menuitem" : void 0;
1514
- const t47 = menubarTabIndex ?? 0;
1515
- let t48;
1516
- if ($[132] !== bodyId || $[133] !== disabled || $[134] !== isOpen || $[135] !== popupRole || $[136] !== t46 || $[137] !== t47 || $[138] !== trigger || $[139] !== triggerId) {
1517
- t48 = /* @__PURE__ */ jsx("button", {
1518
- "aria-controls": bodyId,
1519
- "aria-expanded": isOpen,
1520
- "aria-haspopup": popupRole,
1521
- className: "uktdropdown-trigger",
1522
- disabled,
1523
- id: triggerId,
1524
- role: t46,
1525
- tabIndex: t47,
1526
- type: "button",
1527
- children: trigger
1528
- });
1529
- $[132] = bodyId;
1530
- $[133] = disabled;
1531
- $[134] = isOpen;
1532
- $[135] = popupRole;
1533
- $[136] = t46;
1534
- $[137] = t47;
1535
- $[138] = trigger;
1536
- $[139] = triggerId;
1537
- $[140] = t48;
1538
- } else t48 = $[140];
1539
- trigger = t48;
1540
- }
1541
- else {
1542
1585
  const triggerProps = trigger.props;
1543
1586
  const resolvedTriggerId = triggerProps.id ?? triggerId;
1544
1587
  const isTextInputTrigger = isTextInputElement(trigger);
@@ -1554,7 +1597,7 @@ function RootDropdown(t0) {
1554
1597
  const t51 = triggerProps["aria-haspopup"] ?? popupRole;
1555
1598
  const t52 = triggerProps.tabIndex ?? menubarTabIndex;
1556
1599
  let t53;
1557
- if ($[141] !== resolvedTriggerId || $[142] !== t46 || $[143] !== t47 || $[144] !== t48 || $[145] !== t49 || $[146] !== t50 || $[147] !== t51 || $[148] !== t52 || $[149] !== triggerRole) {
1600
+ if ($[142] !== resolvedTriggerId || $[143] !== t46 || $[144] !== t47 || $[145] !== t48 || $[146] !== t49 || $[147] !== t50 || $[148] !== t51 || $[149] !== t52 || $[150] !== triggerRole) {
1558
1601
  t53 = cloneElement(t46, {
1559
1602
  "aria-autocomplete": t47,
1560
1603
  "aria-controls": t48,
@@ -1565,17 +1608,17 @@ function RootDropdown(t0) {
1565
1608
  role: triggerRole,
1566
1609
  tabIndex: t52
1567
1610
  });
1568
- $[141] = resolvedTriggerId;
1569
- $[142] = t46;
1570
- $[143] = t47;
1571
- $[144] = t48;
1572
- $[145] = t49;
1573
- $[146] = t50;
1574
- $[147] = t51;
1575
- $[148] = t52;
1576
- $[149] = triggerRole;
1577
- $[150] = t53;
1578
- } else t53 = $[150];
1611
+ $[142] = resolvedTriggerId;
1612
+ $[143] = t46;
1613
+ $[144] = t47;
1614
+ $[145] = t48;
1615
+ $[146] = t49;
1616
+ $[147] = t50;
1617
+ $[148] = t51;
1618
+ $[149] = t52;
1619
+ $[150] = triggerRole;
1620
+ $[151] = t53;
1621
+ } else t53 = $[151];
1579
1622
  trigger = t53;
1580
1623
  }
1581
1624
  if (label != null) {
@@ -1583,57 +1626,57 @@ function RootDropdown(t0) {
1583
1626
  const t46 = isMenubarMember ? "none" : void 0;
1584
1627
  const t47 = isMenubarMember ? "none" : void 0;
1585
1628
  let t48;
1586
- if ($[151] !== label || $[152] !== labelId || $[153] !== t47) {
1629
+ if ($[152] !== label || $[153] !== labelId || $[154] !== t47) {
1587
1630
  t48 = /* @__PURE__ */ jsx("div", {
1588
1631
  className: "uktdropdown-label-text",
1589
1632
  id: labelId,
1590
1633
  role: t47,
1591
1634
  children: label
1592
1635
  });
1593
- $[151] = label;
1594
- $[152] = labelId;
1595
- $[153] = t47;
1596
- $[154] = t48;
1597
- } else t48 = $[154];
1636
+ $[152] = label;
1637
+ $[153] = labelId;
1638
+ $[154] = t47;
1639
+ $[155] = t48;
1640
+ } else t48 = $[155];
1598
1641
  let t49;
1599
- if ($[155] !== t46 || $[156] !== t48 || $[157] !== trigger) {
1642
+ if ($[156] !== t46 || $[157] !== t48 || $[158] !== trigger) {
1600
1643
  t49 = /* @__PURE__ */ jsxs("label", {
1601
1644
  className: "uktdropdown-label",
1602
1645
  role: t46,
1603
1646
  children: [t48, trigger]
1604
1647
  });
1605
- $[155] = t46;
1606
- $[156] = t48;
1607
- $[157] = trigger;
1608
- $[158] = t49;
1609
- } else t49 = $[158];
1648
+ $[156] = t46;
1649
+ $[157] = t48;
1650
+ $[158] = trigger;
1651
+ $[159] = t49;
1652
+ } else t49 = $[159];
1610
1653
  trigger = t49;
1611
1654
  }
1612
1655
  let t46;
1613
- if ($[159] === Symbol.for("react.memo_cache_sentinel")) {
1656
+ if ($[160] === Symbol.for("react.memo_cache_sentinel")) {
1614
1657
  t46 = /* @__PURE__ */ jsx("style", {
1615
1658
  href: "@acusti/dropdown/Dropdown",
1616
1659
  precedence: "medium",
1617
1660
  children: Dropdown_default
1618
1661
  });
1619
- $[159] = t46;
1620
- } else t46 = $[159];
1662
+ $[160] = t46;
1663
+ } else t46 = $[160];
1621
1664
  let t47;
1622
- if ($[160] !== className || $[161] !== disabled || $[162] !== isOpen || $[163] !== isSearchable) {
1665
+ if ($[161] !== className || $[162] !== disabled || $[163] !== isOpen || $[164] !== isSearchable) {
1623
1666
  t47 = clsx("uktdropdown", className, {
1624
- disabled,
1667
+ "is-disabled": disabled,
1625
1668
  "is-open": isOpen,
1626
1669
  "is-searchable": isSearchable
1627
1670
  });
1628
- $[160] = className;
1629
- $[161] = disabled;
1630
- $[162] = isOpen;
1631
- $[163] = isSearchable;
1632
- $[164] = t47;
1633
- } else t47 = $[164];
1671
+ $[161] = className;
1672
+ $[162] = disabled;
1673
+ $[163] = isOpen;
1674
+ $[164] = isSearchable;
1675
+ $[165] = t47;
1676
+ } else t47 = $[165];
1634
1677
  const t48 = isMenubarMember ? "none" : void 0;
1635
1678
  let t49;
1636
- if ($[165] !== body || $[166] !== bodyId || $[167] !== bodyLabelledBy || $[168] !== handleBodyRef || $[169] !== hasItems || $[170] !== isOpen || $[171] !== popupRole) {
1679
+ if ($[166] !== body || $[167] !== bodyId || $[168] !== bodyLabelledBy || $[169] !== dropdownContextValue || $[170] !== handleBodyRef || $[171] !== hasItems || $[172] !== isOpen || $[173] !== popupRole) {
1637
1680
  t49 = isOpen ? /* @__PURE__ */ jsx("div", {
1638
1681
  "aria-labelledby": bodyLabelledBy,
1639
1682
  className: clsx("uktdropdown-body", { "has-items": hasItems }),
@@ -1649,17 +1692,18 @@ function RootDropdown(t0) {
1649
1692
  })
1650
1693
  })
1651
1694
  }) : null;
1652
- $[165] = body;
1653
- $[166] = bodyId;
1654
- $[167] = bodyLabelledBy;
1655
- $[168] = handleBodyRef;
1656
- $[169] = hasItems;
1657
- $[170] = isOpen;
1658
- $[171] = popupRole;
1659
- $[172] = t49;
1660
- } else t49 = $[172];
1695
+ $[166] = body;
1696
+ $[167] = bodyId;
1697
+ $[168] = bodyLabelledBy;
1698
+ $[169] = dropdownContextValue;
1699
+ $[170] = handleBodyRef;
1700
+ $[171] = hasItems;
1701
+ $[172] = isOpen;
1702
+ $[173] = popupRole;
1703
+ $[174] = t49;
1704
+ } else t49 = $[174];
1661
1705
  let t50;
1662
- if ($[173] !== handleDropdownMouseEnter || $[174] !== handleDropdownMouseLeave || $[175] !== handleMouseDown || $[176] !== handleMouseMove || $[177] !== handleMouseOut || $[178] !== handleMouseOver || $[179] !== handleMouseUp || $[180] !== handleRef || $[181] !== onClick || $[182] !== styleFromProps || $[183] !== t47 || $[184] !== t48 || $[185] !== t49 || $[186] !== trigger) {
1706
+ if ($[175] !== handleDropdownMouseEnter || $[176] !== handleDropdownMouseLeave || $[177] !== handleMouseDown || $[178] !== handleMouseMove || $[179] !== handleMouseOut || $[180] !== handleMouseOver || $[181] !== handleMouseUp || $[182] !== handleRef || $[183] !== onClick || $[184] !== styleFromProps || $[185] !== t47 || $[186] !== t48 || $[187] !== t49 || $[188] !== trigger) {
1663
1707
  t50 = /* @__PURE__ */ jsxs(Fragment, { children: [t46, /* @__PURE__ */ jsxs("div", {
1664
1708
  className: t47,
1665
1709
  onClick,
@@ -1675,22 +1719,22 @@ function RootDropdown(t0) {
1675
1719
  style: styleFromProps,
1676
1720
  children: [trigger, t49]
1677
1721
  })] });
1678
- $[173] = handleDropdownMouseEnter;
1679
- $[174] = handleDropdownMouseLeave;
1680
- $[175] = handleMouseDown;
1681
- $[176] = handleMouseMove;
1682
- $[177] = handleMouseOut;
1683
- $[178] = handleMouseOver;
1684
- $[179] = handleMouseUp;
1685
- $[180] = handleRef;
1686
- $[181] = onClick;
1687
- $[182] = styleFromProps;
1688
- $[183] = t47;
1689
- $[184] = t48;
1690
- $[185] = t49;
1691
- $[186] = trigger;
1692
- $[187] = t50;
1693
- } else t50 = $[187];
1722
+ $[175] = handleDropdownMouseEnter;
1723
+ $[176] = handleDropdownMouseLeave;
1724
+ $[177] = handleMouseDown;
1725
+ $[178] = handleMouseMove;
1726
+ $[179] = handleMouseOut;
1727
+ $[180] = handleMouseOver;
1728
+ $[181] = handleMouseUp;
1729
+ $[182] = handleRef;
1730
+ $[183] = onClick;
1731
+ $[184] = styleFromProps;
1732
+ $[185] = t47;
1733
+ $[186] = t48;
1734
+ $[187] = t49;
1735
+ $[188] = trigger;
1736
+ $[189] = t50;
1737
+ } else t50 = $[189];
1694
1738
  return t50;
1695
1739
  }
1696
1740
  var INERT_SUBMENU_PROPS = [
@@ -1700,21 +1744,28 @@ var INERT_SUBMENU_PROPS = [
1700
1744
  "isSearchable",
1701
1745
  "keepOpenOnSubmit",
1702
1746
  "name",
1747
+ "onClick",
1748
+ "onMouseDown",
1749
+ "onMouseUp",
1703
1750
  "openOnHover",
1704
1751
  "placeholder",
1705
1752
  "tabIndex",
1706
1753
  "value"
1707
1754
  ];
1708
1755
  function SubmenuDropdown(props) {
1709
- const $ = c(17);
1710
- const { children, className, disabled, label, onActiveItem, onClose, onOpen, onSubmitItem, parentDropdown, style } = props;
1711
- const itemRef = useRef(null);
1756
+ const $ = c(21);
1757
+ const { children, className, disabled, itemAs, label, onActiveItem, onClose, onOpen, onSubmitItem, parentDropdown, style } = props;
1758
+ const [detectedElement, setDetectedElement] = useState("li");
1759
+ const ItemElement = itemAs ?? detectedElement;
1712
1760
  let t0;
1713
- let t1;
1714
- if ($[0] !== onActiveItem || $[1] !== onClose || $[2] !== onOpen || $[3] !== onSubmitItem || $[4] !== parentDropdown) {
1715
- t0 = () => {
1716
- const element = itemRef.current;
1761
+ if ($[0] !== detectedElement || $[1] !== itemAs || $[2] !== onActiveItem || $[3] !== onClose || $[4] !== onOpen || $[5] !== onSubmitItem || $[6] !== parentDropdown) {
1762
+ t0 = (element) => {
1717
1763
  if (!element) return;
1764
+ const container = element.parentElement;
1765
+ if (!itemAs && detectedElement === "li" && container && !container.matches("menu, ol, ul")) {
1766
+ setDetectedElement("div");
1767
+ return;
1768
+ }
1718
1769
  return parentDropdown.registerSubmenu({
1719
1770
  element,
1720
1771
  onActiveItem,
@@ -1723,39 +1774,30 @@ function SubmenuDropdown(props) {
1723
1774
  onSubmitItem
1724
1775
  });
1725
1776
  };
1726
- t1 = [
1727
- onActiveItem,
1728
- onClose,
1729
- onOpen,
1730
- onSubmitItem,
1731
- parentDropdown
1732
- ];
1733
- $[0] = onActiveItem;
1734
- $[1] = onClose;
1735
- $[2] = onOpen;
1736
- $[3] = onSubmitItem;
1737
- $[4] = parentDropdown;
1738
- $[5] = t0;
1739
- $[6] = t1;
1777
+ $[0] = detectedElement;
1778
+ $[1] = itemAs;
1779
+ $[2] = onActiveItem;
1780
+ $[3] = onClose;
1781
+ $[4] = onOpen;
1782
+ $[5] = onSubmitItem;
1783
+ $[6] = parentDropdown;
1784
+ $[7] = t0;
1785
+ } else t0 = $[7];
1786
+ const handleItemRef = t0;
1787
+ let t1;
1788
+ let t2;
1789
+ if ($[8] !== props) {
1790
+ const inertProps = INERT_SUBMENU_PROPS.filter((propName) => props[propName] !== void 0);
1791
+ t1 = useWarnOnce;
1792
+ t2 = inertProps.length ? `${inertProps.join(", ")} only apply to a top-level Dropdown and are ignored on a nested (submenu) Dropdown.` : null;
1793
+ $[8] = props;
1794
+ $[9] = t1;
1795
+ $[10] = t2;
1740
1796
  } else {
1741
- t0 = $[5];
1742
- t1 = $[6];
1797
+ t1 = $[9];
1798
+ t2 = $[10];
1743
1799
  }
1744
- useEffect(t0, t1);
1745
- const warnedRef = useRef(false);
1746
- let t2;
1747
- if ($[7] !== props) {
1748
- t2 = () => {
1749
- if (warnedRef.current) return;
1750
- const inertProps = INERT_SUBMENU_PROPS.filter((propName) => props[propName] !== void 0);
1751
- if (!inertProps.length) return;
1752
- warnedRef.current = true;
1753
- console.error(`@acusti/dropdown: ${inertProps.join(", ")} only apply to a top-level Dropdown and are ignored on a nested (submenu) Dropdown.`);
1754
- };
1755
- $[7] = props;
1756
- $[8] = t2;
1757
- } else t2 = $[8];
1758
- useEffect(t2);
1800
+ t1(t2);
1759
1801
  const childrenCount = Children.count(children);
1760
1802
  let labelContent = label;
1761
1803
  let body = children;
@@ -1764,7 +1806,7 @@ function SubmenuDropdown(props) {
1764
1806
  body = children[1];
1765
1807
  }
1766
1808
  let t3;
1767
- if ($[9] !== body) {
1809
+ if ($[11] !== body) {
1768
1810
  t3 = isValidElement(body) ? cloneElement(body, {
1769
1811
  "data-ukt-submenu": "",
1770
1812
  popover: "manual"
@@ -1773,28 +1815,30 @@ function SubmenuDropdown(props) {
1773
1815
  popover: "manual",
1774
1816
  children: body
1775
1817
  });
1776
- $[9] = body;
1777
- $[10] = t3;
1778
- } else t3 = $[10];
1818
+ $[11] = body;
1819
+ $[12] = t3;
1820
+ } else t3 = $[12];
1779
1821
  const submenu = t3;
1780
1822
  const t4 = disabled || void 0;
1781
1823
  let t5;
1782
- if ($[11] !== className || $[12] !== labelContent || $[13] !== style || $[14] !== submenu || $[15] !== t4) {
1783
- t5 = /* @__PURE__ */ jsxs("li", {
1824
+ if ($[13] !== ItemElement || $[14] !== className || $[15] !== handleItemRef || $[16] !== labelContent || $[17] !== style || $[18] !== submenu || $[19] !== t4) {
1825
+ t5 = /* @__PURE__ */ jsxs(ItemElement, {
1784
1826
  "aria-disabled": t4,
1785
1827
  className,
1786
1828
  "data-ukt-item": "",
1787
- ref: itemRef,
1829
+ ref: handleItemRef,
1788
1830
  style,
1789
1831
  children: [labelContent, submenu]
1790
1832
  });
1791
- $[11] = className;
1792
- $[12] = labelContent;
1793
- $[13] = style;
1794
- $[14] = submenu;
1795
- $[15] = t4;
1796
- $[16] = t5;
1797
- } else t5 = $[16];
1833
+ $[13] = ItemElement;
1834
+ $[14] = className;
1835
+ $[15] = handleItemRef;
1836
+ $[16] = labelContent;
1837
+ $[17] = style;
1838
+ $[18] = submenu;
1839
+ $[19] = t4;
1840
+ $[20] = t5;
1841
+ } else t5 = $[20];
1798
1842
  return t5;
1799
1843
  }
1800
1844
  //#endregion