@acusti/dropdown 1.0.0-rc.3 → 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 +377 -342
  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;
@@ -503,7 +511,7 @@ function _temp(count) {
503
511
  }
504
512
  //#endregion
505
513
  //#region src/Dropdown.tsx
506
- 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.";
507
515
  var CLICKABLE_SELECTOR = "button, a[href], input[type=\"button\"], input[type=\"submit\"]";
508
516
  var TEXT_INPUT_SELECTOR = `input${NON_TEXT_INPUT_TYPES.map((type) => `:not([type=${type}])`).join("")},textarea`;
509
517
  var SUBMENU_DISCLOSURE_DELAY = 200;
@@ -515,6 +523,27 @@ var isTextInputElement = (element) => {
515
523
  const { type } = element.props;
516
524
  return type == null || !NON_TEXT_INPUT_TYPES.includes(type);
517
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
+ };
518
547
  function Dropdown(props) {
519
548
  const $ = c(5);
520
549
  const parentDropdown = useContext(DropdownContext);
@@ -540,16 +569,14 @@ function Dropdown(props) {
540
569
  return t0;
541
570
  }
542
571
  function RootDropdown(t0) {
543
- const $ = c(188);
544
- 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;
545
574
  const allowEmpty = t1 === void 0 ? true : t1;
546
575
  const hasItems = t2 === void 0 ? true : t2;
547
576
  const keepOpenOnSubmit = t3 === void 0 ? !hasItems : t3;
548
577
  const childrenCount = Children.count(children);
549
- if (childrenCount !== 1 && childrenCount !== 2) {
550
- if (childrenCount === 0) throw new Error(CHILDREN_ERROR + " Received no children.");
551
- console.error(`${CHILDREN_ERROR} Received ${childrenCount} children.`);
552
- }
578
+ if (childrenCount === 0) throw new Error(`@acusti/dropdown: ${CHILDREN_ERROR} Received no children.`);
579
+ useWarnOnce(childrenCount > 2 ? `${CHILDREN_ERROR} Received ${childrenCount} children.` : null);
553
580
  let trigger;
554
581
  if (childrenCount > 1) trigger = children[0];
555
582
  const body = childrenCount > 1 ? children[1] : children;
@@ -582,7 +609,7 @@ function RootDropdown(t0) {
582
609
  t5 = /* @__PURE__ */ new WeakSet();
583
610
  $[5] = t5;
584
611
  } else t5 = $[5];
585
- const annotatedBodiesRef = useRef(t5);
612
+ const annotatedElementsRef = useRef(t5);
586
613
  const closingTimerRef = useRef(null);
587
614
  const isOpeningTimerRef = useRef(null);
588
615
  const currentInputMethodRef = useRef("mouse");
@@ -643,6 +670,7 @@ function RootDropdown(t0) {
643
670
  $[15] = t9;
644
671
  } else t9 = $[15];
645
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.");
646
674
  const isMountedRef = useRef(false);
647
675
  let t10;
648
676
  let t11;
@@ -666,37 +694,44 @@ function RootDropdown(t0) {
666
694
  }
667
695
  useEffect(t10, t11);
668
696
  let t12;
669
- if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
697
+ if ($[19] !== popupRole) {
670
698
  t12 = { registerSubmenu(registration) {
671
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
+ }
672
706
  return () => {
673
707
  submenuRegistrationsRef.current.delete(registration);
674
708
  };
675
709
  } };
676
- $[19] = t12;
677
- } else t12 = $[19];
710
+ $[19] = popupRole;
711
+ $[20] = t12;
712
+ } else t12 = $[20];
678
713
  const dropdownContextValue = t12;
679
714
  let t13;
680
- if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
715
+ if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
681
716
  t13 = (key, payload) => {
682
717
  if (!payload.element) return;
683
718
  for (const registration_0 of submenuRegistrationsRef.current) if (registration_0.element.contains(payload.element)) registration_0[key]?.(payload);
684
719
  };
685
- $[20] = t13;
686
- } else t13 = $[20];
720
+ $[21] = t13;
721
+ } else t13 = $[21];
687
722
  const dispatchToSubmenus = t13;
688
723
  let t14;
689
- if ($[21] !== onActiveItem) {
724
+ if ($[22] !== onActiveItem) {
690
725
  t14 = (payload_0) => {
691
726
  onActiveItem?.(payload_0);
692
727
  dispatchToSubmenus("onActiveItem", payload_0);
693
728
  };
694
- $[21] = onActiveItem;
695
- $[22] = t14;
696
- } else t14 = $[22];
729
+ $[22] = onActiveItem;
730
+ $[23] = t14;
731
+ } else t14 = $[23];
697
732
  const handleActiveItem = t14;
698
733
  let t15;
699
- if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
734
+ if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
700
735
  t15 = (item, isExpanded) => {
701
736
  const submenu = getSubmenuOfItem(item);
702
737
  if (submenu) {
@@ -706,11 +741,11 @@ function RootDropdown(t0) {
706
741
  }
707
742
  for (const registration_1 of submenuRegistrationsRef.current) if (registration_1.element === item) (isExpanded ? registration_1.onOpen : registration_1.onClose)?.();
708
743
  };
709
- $[23] = t15;
710
- } else t15 = $[23];
744
+ $[24] = t15;
745
+ } else t15 = $[24];
711
746
  const handleToggleSubmenu = t15;
712
747
  let t16;
713
- if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
748
+ if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
714
749
  t16 = () => {
715
750
  if (disclosureTimerRef.current != null) {
716
751
  clearTimeout(disclosureTimerRef.current);
@@ -718,23 +753,23 @@ function RootDropdown(t0) {
718
753
  }
719
754
  pendingDisclosureItemRef.current = null;
720
755
  };
721
- $[24] = t16;
722
- } else t16 = $[24];
756
+ $[25] = t16;
757
+ } else t16 = $[25];
723
758
  const clearDisclosureTimer = t16;
724
759
  let t17;
725
760
  let t18;
726
- if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
761
+ if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
727
762
  t17 = () => clearDisclosureTimer;
728
763
  t18 = [];
729
- $[25] = t17;
730
- $[26] = t18;
764
+ $[26] = t17;
765
+ $[27] = t18;
731
766
  } else {
732
- t17 = $[25];
733
- t18 = $[26];
767
+ t17 = $[26];
768
+ t18 = $[27];
734
769
  }
735
770
  useEffect(t17, t18);
736
771
  let t19;
737
- if ($[27] !== dropdownElement) {
772
+ if ($[28] !== dropdownElement) {
738
773
  t19 = () => {
739
774
  if (!dropdownElement) return;
740
775
  const activeElement = getActiveItemElement(dropdownElement);
@@ -754,35 +789,35 @@ function RootDropdown(t0) {
754
789
  }
755
790
  clearDisclosureTimer();
756
791
  };
757
- $[27] = dropdownElement;
758
- $[28] = t19;
759
- } else t19 = $[28];
792
+ $[28] = dropdownElement;
793
+ $[29] = t19;
794
+ } else t19 = $[29];
760
795
  const syncSubmenuDisclosure = t19;
761
796
  let t20;
762
- if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
797
+ if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
763
798
  t20 = () => {
764
799
  if (safeAreaTimerRef.current != null) {
765
800
  clearTimeout(safeAreaTimerRef.current);
766
801
  safeAreaTimerRef.current = null;
767
802
  }
768
803
  };
769
- $[29] = t20;
770
- } else t20 = $[29];
804
+ $[30] = t20;
805
+ } else t20 = $[30];
771
806
  const clearSafeAreaTimer = t20;
772
807
  let t21;
773
808
  let t22;
774
- if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
809
+ if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
775
810
  t21 = () => clearSafeAreaTimer;
776
811
  t22 = [];
777
- $[30] = t21;
778
- $[31] = t22;
812
+ $[31] = t21;
813
+ $[32] = t22;
779
814
  } else {
780
- t21 = $[30];
781
- t22 = $[31];
815
+ t21 = $[31];
816
+ t22 = $[32];
782
817
  }
783
818
  useEffect(t21, t22);
784
819
  let t23;
785
- if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
820
+ if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
786
821
  t23 = (x, y) => {
787
822
  const safeArea = safeAreaRef.current;
788
823
  if (!safeArea || !isItemExpanded(safeArea.parent)) return false;
@@ -802,11 +837,11 @@ function RootDropdown(t0) {
802
837
  y: submenuRect.bottom
803
838
  });
804
839
  };
805
- $[32] = t23;
806
- } else t23 = $[32];
840
+ $[33] = t23;
841
+ } else t23 = $[33];
807
842
  const isPointerInSafeArea = t23;
808
843
  let t24;
809
- if ($[33] !== dropdownElement || $[34] !== handleActiveItem || $[35] !== syncSubmenuDisclosure) {
844
+ if ($[34] !== dropdownElement || $[35] !== handleActiveItem || $[36] !== syncSubmenuDisclosure) {
810
845
  t24 = (targetElement) => {
811
846
  clearSafeAreaTimer();
812
847
  safeAreaRef.current = null;
@@ -824,14 +859,14 @@ function RootDropdown(t0) {
824
859
  });
825
860
  syncSubmenuDisclosure();
826
861
  };
827
- $[33] = dropdownElement;
828
- $[34] = handleActiveItem;
829
- $[35] = syncSubmenuDisclosure;
830
- $[36] = t24;
831
- } else t24 = $[36];
862
+ $[34] = dropdownElement;
863
+ $[35] = handleActiveItem;
864
+ $[36] = syncSubmenuDisclosure;
865
+ $[37] = t24;
866
+ } else t24 = $[37];
832
867
  const commitPointerTarget = t24;
833
868
  let t25;
834
- if ($[37] !== commitPointerTarget || $[38] !== dropdownElement || $[39] !== hasItems) {
869
+ if ($[38] !== commitPointerTarget || $[39] !== dropdownElement || $[40] !== hasItems) {
835
870
  t25 = (event_0) => {
836
871
  if (!dropdownElement || !isOpenRef.current || !hasItems) return;
837
872
  const pointer_0 = {
@@ -865,37 +900,37 @@ function RootDropdown(t0) {
865
900
  safeAreaTimerRef.current = setTimeout(commitPointerTarget, SAFE_AREA_TIMEOUT);
866
901
  } else if (wasInSafeAreaRef.current) commitPointerTarget(target_0);
867
902
  };
868
- $[37] = commitPointerTarget;
869
- $[38] = dropdownElement;
870
- $[39] = hasItems;
871
- $[40] = t25;
872
- } else t25 = $[40];
903
+ $[38] = commitPointerTarget;
904
+ $[39] = dropdownElement;
905
+ $[40] = hasItems;
906
+ $[41] = t25;
907
+ } else t25 = $[41];
873
908
  const trackSafeArea = t25;
874
909
  let t26;
875
- if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
910
+ if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
876
911
  t26 = () => {
877
912
  if (hoverCloseTimerRef.current != null) {
878
913
  clearTimeout(hoverCloseTimerRef.current);
879
914
  hoverCloseTimerRef.current = null;
880
915
  }
881
916
  };
882
- $[41] = t26;
883
- } else t26 = $[41];
917
+ $[42] = t26;
918
+ } else t26 = $[42];
884
919
  const clearHoverCloseTimer = t26;
885
920
  let t27;
886
921
  let t28;
887
- if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
922
+ if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
888
923
  t27 = () => clearHoverCloseTimer;
889
924
  t28 = [];
890
- $[42] = t27;
891
- $[43] = t28;
925
+ $[43] = t27;
926
+ $[44] = t28;
892
927
  } else {
893
- t27 = $[42];
894
- t28 = $[43];
928
+ t27 = $[43];
929
+ t28 = $[44];
895
930
  }
896
931
  useEffect(t27, t28);
897
932
  let t29;
898
- if ($[44] !== dropdownElement || $[45] !== menubar) {
933
+ if ($[45] !== dropdownElement || $[46] !== menubar) {
899
934
  t29 = (options) => {
900
935
  getTriggerElement(dropdownElement)?.removeAttribute("aria-activedescendant");
901
936
  setIsOpen(false);
@@ -912,26 +947,26 @@ function RootDropdown(t0) {
912
947
  }
913
948
  if (menubar && dropdownElement && !options?.keepMenubarEngaged) menubar.notifyClosed(dropdownElement);
914
949
  };
915
- $[44] = dropdownElement;
916
- $[45] = menubar;
917
- $[46] = t29;
918
- } else t29 = $[46];
950
+ $[45] = dropdownElement;
951
+ $[46] = menubar;
952
+ $[47] = t29;
953
+ } else t29 = $[47];
919
954
  const closeDropdown = t29;
920
955
  let t30;
921
- if ($[47] !== disabled || $[48] !== openOnHover) {
956
+ if ($[48] !== disabled || $[49] !== openOnHover) {
922
957
  t30 = () => {
923
958
  clearHoverCloseTimer();
924
959
  if (disabled || !openOnHover || isOpenRef.current) return;
925
960
  setIsOpen(true);
926
961
  setIsOpening(false);
927
962
  };
928
- $[47] = disabled;
929
- $[48] = openOnHover;
930
- $[49] = t30;
931
- } else t30 = $[49];
963
+ $[48] = disabled;
964
+ $[49] = openOnHover;
965
+ $[50] = t30;
966
+ } else t30 = $[50];
932
967
  const handleDropdownMouseEnter = t30;
933
968
  let t31;
934
- if ($[50] !== closeDropdown || $[51] !== openOnHover) {
969
+ if ($[51] !== closeDropdown || $[52] !== openOnHover) {
935
970
  t31 = () => {
936
971
  if (!openOnHover || !isOpenRef.current || hoverCloseTimerRef.current != null) return;
937
972
  hoverCloseTimerRef.current = setTimeout(() => {
@@ -939,22 +974,22 @@ function RootDropdown(t0) {
939
974
  closeDropdown();
940
975
  }, HOVER_CLOSE_DELAY);
941
976
  };
942
- $[50] = closeDropdown;
943
- $[51] = openOnHover;
944
- $[52] = t31;
945
- } else t31 = $[52];
977
+ $[51] = closeDropdown;
978
+ $[52] = openOnHover;
979
+ $[53] = t31;
980
+ } else t31 = $[53];
946
981
  const handleDropdownMouseLeave = t31;
947
982
  let t32;
948
- if ($[53] !== dropdownElement) {
983
+ if ($[54] !== dropdownElement) {
949
984
  t32 = () => {
950
985
  getTriggerElement(dropdownElement)?.focus();
951
986
  };
952
- $[53] = dropdownElement;
953
- $[54] = t32;
954
- } else t32 = $[54];
987
+ $[54] = dropdownElement;
988
+ $[55] = t32;
989
+ } else t32 = $[55];
955
990
  const focusTrigger = t32;
956
991
  let t33;
957
- 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) {
958
993
  t33 = () => {
959
994
  if (!menubar || !dropdownElement) return;
960
995
  return menubar.registerMember({
@@ -970,18 +1005,18 @@ function RootDropdown(t0) {
970
1005
  }
971
1006
  });
972
1007
  };
973
- $[55] = closeDropdown;
974
- $[56] = disabled;
975
- $[57] = dropdownElement;
976
- $[58] = focusTrigger;
977
- $[59] = isMenubarItem;
978
- $[60] = menubar;
979
- $[61] = t33;
980
- } 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];
981
1016
  useEffect(t33);
982
1017
  let t34;
983
1018
  let t35;
984
- if ($[62] !== dropdownElement || $[63] !== isOpen || $[64] !== menubar) {
1019
+ if ($[63] !== dropdownElement || $[64] !== isOpen || $[65] !== menubar) {
985
1020
  t34 = () => {
986
1021
  if (isOpen && menubar && dropdownElement) menubar.notifyOpened(dropdownElement);
987
1022
  };
@@ -990,24 +1025,24 @@ function RootDropdown(t0) {
990
1025
  isOpen,
991
1026
  menubar
992
1027
  ];
993
- $[62] = dropdownElement;
994
- $[63] = isOpen;
995
- $[64] = menubar;
996
- $[65] = t34;
997
- $[66] = t35;
1028
+ $[63] = dropdownElement;
1029
+ $[64] = isOpen;
1030
+ $[65] = menubar;
1031
+ $[66] = t34;
1032
+ $[67] = t35;
998
1033
  } else {
999
- t34 = $[65];
1000
- t35 = $[66];
1034
+ t34 = $[66];
1035
+ t35 = $[67];
1001
1036
  }
1002
1037
  useEffect(t34, t35);
1003
1038
  let t36;
1004
- 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) {
1005
1040
  t36 = (event_1) => {
1006
- const element = hasItems ? getActiveItemElement(dropdownElement) : null;
1007
- const submenuOfActive = element ? getSubmenuOfItem(element) : null;
1008
- 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) {
1009
1044
  clearDisclosureTimer();
1010
- expandItem(element, handleToggleSubmenu);
1045
+ expandItem(element_0, handleToggleSubmenu);
1011
1046
  if (currentInputMethodRef.current === "keyboard" && dropdownElement) {
1012
1047
  const firstItem = getItemElements(dropdownElement, submenuOfActive)?.[0];
1013
1048
  if (firstItem) setActiveItem({
@@ -1021,31 +1056,31 @@ function RootDropdown(t0) {
1021
1056
  }
1022
1057
  if (isOpenRef.current && !keepOpenOnSubmit) closingTimerRef.current = setTimeout(closeDropdown, 90);
1023
1058
  if (!hasItems) return;
1024
- if (!element) {
1059
+ if (!element_0) {
1025
1060
  if (!inputElementRef.current) return;
1026
1061
  if (inputElementRef.current.value) {
1027
1062
  if (!allowCreate) return;
1028
1063
  } else if (!allowEmpty) return;
1029
1064
  }
1030
- let itemLabel = element?.innerText ?? "";
1065
+ let itemLabel = element_0?.innerText ?? "";
1031
1066
  if (inputElementRef.current) {
1032
- if (!element) itemLabel = inputElementRef.current.value;
1067
+ if (!element_0) itemLabel = inputElementRef.current.value;
1033
1068
  else inputElementRef.current.value = itemLabel;
1034
1069
  if (inputElementRef.current === inputElementRef.current.ownerDocument.activeElement) inputElementRef.current.blur();
1035
1070
  }
1036
- const nextValue = element?.dataset.uktValue ?? itemLabel;
1071
+ const nextValue = element_0?.dataset.uktValue ?? itemLabel;
1037
1072
  if (valueIdentity && valueIdentity === nextValue) return;
1038
- if (element && keepOpenOnSubmit && popupRole === "listbox" && !consumerOwnsARIASelectedRef.current) {
1039
- const bodyElement = element.closest(".uktdropdown-body");
1040
- for (const selected of Array.from(bodyElement?.querySelectorAll("[aria-selected=\"true\"]") ?? [])) selected.removeAttribute("aria-selected");
1041
- 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");
1042
1077
  }
1043
- if (element) {
1078
+ if (element_0) {
1044
1079
  const eventTarget = event_1.target;
1045
- if (element.matches(CLICKABLE_SELECTOR)) {
1046
- 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();
1047
1082
  } else {
1048
- const clickableElements = element.querySelectorAll(CLICKABLE_SELECTOR);
1083
+ const clickableElements = element_0.querySelectorAll(CLICKABLE_SELECTOR);
1049
1084
  if (clickableElements.length === 1) {
1050
1085
  const clickableElement = clickableElements[0];
1051
1086
  if (clickableElement !== eventTarget && !clickableElement.contains(eventTarget)) clickableElement.click();
@@ -1053,30 +1088,30 @@ function RootDropdown(t0) {
1053
1088
  }
1054
1089
  }
1055
1090
  const payload_1 = {
1056
- element,
1091
+ element: element_0,
1057
1092
  event: event_1,
1058
1093
  label: itemLabel,
1059
- path: getItemPath(element),
1094
+ path: getItemPath(element_0),
1060
1095
  value: nextValue
1061
1096
  };
1062
1097
  onSubmitItem?.(payload_1);
1063
1098
  dispatchToSubmenus("onSubmitItem", payload_1);
1064
1099
  };
1065
- $[67] = allowCreate;
1066
- $[68] = allowEmpty;
1067
- $[69] = closeDropdown;
1068
- $[70] = dropdownElement;
1069
- $[71] = handleActiveItem;
1070
- $[72] = hasItems;
1071
- $[73] = keepOpenOnSubmit;
1072
- $[74] = onSubmitItem;
1073
- $[75] = popupRole;
1074
- $[76] = valueIdentity;
1075
- $[77] = t36;
1076
- } 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];
1077
1112
  const handleSubmitItem = t36;
1078
1113
  let t37;
1079
- if ($[78] !== trackSafeArea) {
1114
+ if ($[79] !== trackSafeArea) {
1080
1115
  t37 = (event_2) => {
1081
1116
  const { clientX, clientY } = event_2;
1082
1117
  currentInputMethodRef.current = "mouse";
@@ -1086,12 +1121,12 @@ function RootDropdown(t0) {
1086
1121
  if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
1087
1122
  setIsOpening(false);
1088
1123
  };
1089
- $[78] = trackSafeArea;
1090
- $[79] = t37;
1091
- } else t37 = $[79];
1124
+ $[79] = trackSafeArea;
1125
+ $[80] = t37;
1126
+ } else t37 = $[80];
1092
1127
  const handleMouseMove = t37;
1093
1128
  let t38;
1094
- if ($[80] !== dropdownElement || $[81] !== handleActiveItem || $[82] !== hasItems || $[83] !== syncSubmenuDisclosure) {
1129
+ if ($[81] !== dropdownElement || $[82] !== handleActiveItem || $[83] !== hasItems || $[84] !== syncSubmenuDisclosure) {
1095
1130
  t38 = (event_3) => {
1096
1131
  if (!hasItems) return;
1097
1132
  if (currentInputMethodRef.current !== "mouse") return;
@@ -1111,15 +1146,15 @@ function RootDropdown(t0) {
1111
1146
  });
1112
1147
  syncSubmenuDisclosure();
1113
1148
  };
1114
- $[80] = dropdownElement;
1115
- $[81] = handleActiveItem;
1116
- $[82] = hasItems;
1117
- $[83] = syncSubmenuDisclosure;
1118
- $[84] = t38;
1119
- } else t38 = $[84];
1149
+ $[81] = dropdownElement;
1150
+ $[82] = handleActiveItem;
1151
+ $[83] = hasItems;
1152
+ $[84] = syncSubmenuDisclosure;
1153
+ $[85] = t38;
1154
+ } else t38 = $[85];
1120
1155
  const handleMouseOver = t38;
1121
1156
  let t39;
1122
- if ($[85] !== dropdownElement || $[86] !== hasItems || $[87] !== syncSubmenuDisclosure) {
1157
+ if ($[86] !== dropdownElement || $[87] !== hasItems || $[88] !== syncSubmenuDisclosure) {
1123
1158
  t39 = (event_4) => {
1124
1159
  if (!hasItems) return;
1125
1160
  const relatedTarget = event_4.relatedTarget;
@@ -1136,14 +1171,14 @@ function RootDropdown(t0) {
1136
1171
  clearActiveItems(dropdownElement, activeItem);
1137
1172
  syncSubmenuDisclosure();
1138
1173
  };
1139
- $[85] = dropdownElement;
1140
- $[86] = hasItems;
1141
- $[87] = syncSubmenuDisclosure;
1142
- $[88] = t39;
1143
- } else t39 = $[88];
1174
+ $[86] = dropdownElement;
1175
+ $[87] = hasItems;
1176
+ $[88] = syncSubmenuDisclosure;
1177
+ $[89] = t39;
1178
+ } else t39 = $[89];
1144
1179
  const handleMouseOut = t39;
1145
1180
  let t40;
1146
- if ($[89] !== disabled || $[90] !== onMouseDown) {
1181
+ if ($[90] !== disabled || $[91] !== onMouseDown) {
1147
1182
  t40 = (event_5) => {
1148
1183
  if (onMouseDown) onMouseDown(event_5);
1149
1184
  if (disabled || isOpenRef.current) return;
@@ -1158,20 +1193,20 @@ function RootDropdown(t0) {
1158
1193
  isOpeningTimerRef.current = null;
1159
1194
  }, 1e3);
1160
1195
  };
1161
- $[89] = disabled;
1162
- $[90] = onMouseDown;
1163
- $[91] = t40;
1164
- } else t40 = $[91];
1196
+ $[90] = disabled;
1197
+ $[91] = onMouseDown;
1198
+ $[92] = t40;
1199
+ } else t40 = $[92];
1165
1200
  const handleMouseDown = t40;
1166
1201
  let t41;
1167
- 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) {
1168
1203
  t41 = (event_6) => {
1169
1204
  if (onMouseUp) onMouseUp(event_6);
1170
1205
  if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
1171
1206
  const eventTarget_1 = event_6.target;
1172
1207
  const clickedRoot = eventTarget_1.closest(".uktdropdown");
1173
1208
  if (clickedRoot !== dropdownElement && clickedRoot?.classList.contains("is-open") && dropdownElement?.contains(clickedRoot)) return;
1174
- const targetBody = eventTarget_1.closest(".uktdropdown-body");
1209
+ const targetBody = eventTarget_1.closest(BODY_SELECTOR);
1175
1210
  if (!Boolean(targetBody && targetBody.closest(".uktdropdown") === dropdownElement)) {
1176
1211
  if (!isOpeningRef.current && inputElementRef.current !== eventTarget_1.ownerDocument.activeElement) closeDropdown();
1177
1212
  return;
@@ -1189,17 +1224,17 @@ function RootDropdown(t0) {
1189
1224
  }
1190
1225
  handleSubmitItem(event_6);
1191
1226
  };
1192
- $[92] = closeDropdown;
1193
- $[93] = dropdownElement;
1194
- $[94] = handleActiveItem;
1195
- $[95] = handleSubmitItem;
1196
- $[96] = hasItems;
1197
- $[97] = onMouseUp;
1198
- $[98] = t41;
1199
- } 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];
1200
1235
  const handleMouseUp = t41;
1201
1236
  let t42;
1202
- 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) {
1203
1238
  t42 = (event_7) => {
1204
1239
  const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
1205
1240
  const eventTarget_2 = event_7.target;
@@ -1345,31 +1380,31 @@ function RootDropdown(t0) {
1345
1380
  }
1346
1381
  }
1347
1382
  };
1348
- $[99] = allowCreate;
1349
- $[100] = closeDropdown;
1350
- $[101] = disabled;
1351
- $[102] = dropdownElement;
1352
- $[103] = focusTrigger;
1353
- $[104] = handleActiveItem;
1354
- $[105] = handleSubmitItem;
1355
- $[106] = hasItems;
1356
- $[107] = menubar;
1357
- $[108] = syncSubmenuDisclosure;
1358
- $[109] = t42;
1359
- } 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];
1360
1395
  const handleKeyDown = t42;
1361
1396
  let t43;
1362
- if ($[110] !== handleKeyDown) {
1397
+ if ($[111] !== handleKeyDown) {
1363
1398
  t43 = {
1364
1399
  ignoreUsedKeyboardEvents: false,
1365
1400
  onKeyDown: handleKeyDown
1366
1401
  };
1367
- $[110] = handleKeyDown;
1368
- $[111] = t43;
1369
- } else t43 = $[111];
1402
+ $[111] = handleKeyDown;
1403
+ $[112] = t43;
1404
+ } else t43 = $[112];
1370
1405
  useKeyboardEvents(t43);
1371
1406
  let t44;
1372
- if ($[112] !== allowCreate || $[113] !== closeDropdown || $[114] !== disabled || $[115] !== handleActiveItem) {
1407
+ if ($[113] !== allowCreate || $[114] !== closeDropdown || $[115] !== disabled || $[116] !== handleActiveItem) {
1373
1408
  t44 = (ref) => {
1374
1409
  setDropdownElement(ref);
1375
1410
  if (!ref) return;
@@ -1442,22 +1477,21 @@ function RootDropdown(t0) {
1442
1477
  if (inputElement) inputElement.removeEventListener("input", handleInput);
1443
1478
  };
1444
1479
  };
1445
- $[112] = allowCreate;
1446
- $[113] = closeDropdown;
1447
- $[114] = disabled;
1448
- $[115] = handleActiveItem;
1449
- $[116] = t44;
1450
- } else t44 = $[116];
1480
+ $[113] = allowCreate;
1481
+ $[114] = closeDropdown;
1482
+ $[115] = disabled;
1483
+ $[116] = handleActiveItem;
1484
+ $[117] = t44;
1485
+ } else t44 = $[117];
1451
1486
  const handleRef = t44;
1452
1487
  let t45;
1453
- if ($[117] !== dropdownElement || $[118] !== popupRole || $[119] !== valueIdentity) {
1488
+ if ($[118] !== dropdownElement || $[119] !== popupRole || $[120] !== valueIdentity) {
1454
1489
  t45 = (ref_0) => {
1455
1490
  if (!ref_0) return;
1456
- if (annotatedBodiesRef.current.has(ref_0)) return;
1457
- annotatedBodiesRef.current.add(ref_0);
1491
+ if (annotatedElementsRef.current.has(ref_0)) return;
1492
+ annotatedElementsRef.current.add(ref_0);
1458
1493
  consumerOwnsARIASelectedRef.current = ref_0.querySelector("[aria-selected]") != null;
1459
- annotateParentItems(ref_0);
1460
- if (popupRole !== "dialog") annotateItemRoles(ref_0, popupRole);
1494
+ annotateSubtree(ref_0, popupRole);
1461
1495
  ref_0.showPopover();
1462
1496
  if (valueIdentity != null && dropdownElement) {
1463
1497
  const selectedItem = getItemElements(dropdownElement)?.find((item_2) => item_2.dataset.uktValue === valueIdentity);
@@ -1470,23 +1504,23 @@ function RootDropdown(t0) {
1470
1504
  }
1471
1505
  }
1472
1506
  };
1473
- $[117] = dropdownElement;
1474
- $[118] = popupRole;
1475
- $[119] = valueIdentity;
1476
- $[120] = t45;
1477
- } else t45 = $[120];
1507
+ $[118] = dropdownElement;
1508
+ $[119] = popupRole;
1509
+ $[120] = valueIdentity;
1510
+ $[121] = t45;
1511
+ } else t45 = $[121];
1478
1512
  const handleBodyRef = t45;
1479
1513
  let bodyLabelledBy;
1480
1514
  if (!isValidElement(trigger)) {
1481
1515
  if (isSearchable) {
1482
1516
  const t46 = valueLabel ?? "";
1483
1517
  let t47;
1484
- if ($[121] === Symbol.for("react.memo_cache_sentinel")) {
1518
+ if ($[122] === Symbol.for("react.memo_cache_sentinel")) {
1485
1519
  t47 = () => setIsOpen(true);
1486
- $[121] = t47;
1487
- } else t47 = $[121];
1520
+ $[122] = t47;
1521
+ } else t47 = $[122];
1488
1522
  let t48;
1489
- if ($[122] !== bodyId || $[123] !== disabled || $[124] !== isOpen || $[125] !== name || $[126] !== placeholder || $[127] !== popupRole || $[128] !== t46 || $[129] !== tabIndex || $[130] !== triggerId) {
1523
+ if ($[123] !== bodyId || $[124] !== disabled || $[125] !== isOpen || $[126] !== name || $[127] !== placeholder || $[128] !== popupRole || $[129] !== t46 || $[130] !== tabIndex || $[131] !== triggerId) {
1490
1524
  t48 = /* @__PURE__ */ jsx("input", {
1491
1525
  "aria-autocomplete": "list",
1492
1526
  "aria-controls": bodyId,
@@ -1505,24 +1539,24 @@ function RootDropdown(t0) {
1505
1539
  tabIndex,
1506
1540
  type: "text"
1507
1541
  });
1508
- $[122] = bodyId;
1509
- $[123] = disabled;
1510
- $[124] = isOpen;
1511
- $[125] = name;
1512
- $[126] = placeholder;
1513
- $[127] = popupRole;
1514
- $[128] = t46;
1515
- $[129] = tabIndex;
1516
- $[130] = triggerId;
1517
- $[131] = t48;
1518
- } else t48 = $[131];
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];
1519
1553
  trigger = t48;
1520
1554
  } else {
1521
1555
  bodyLabelledBy = triggerId;
1522
1556
  const t46 = isMenubarItem ? "menuitem" : void 0;
1523
1557
  const t47 = menubarTabIndex ?? 0;
1524
1558
  let t48;
1525
- if ($[132] !== bodyId || $[133] !== disabled || $[134] !== isOpen || $[135] !== popupRole || $[136] !== t46 || $[137] !== t47 || $[138] !== trigger || $[139] !== triggerId) {
1559
+ if ($[133] !== bodyId || $[134] !== disabled || $[135] !== isOpen || $[136] !== popupRole || $[137] !== t46 || $[138] !== t47 || $[139] !== trigger || $[140] !== triggerId) {
1526
1560
  t48 = /* @__PURE__ */ jsx("button", {
1527
1561
  "aria-controls": bodyId,
1528
1562
  "aria-expanded": isOpen,
@@ -1535,16 +1569,16 @@ function RootDropdown(t0) {
1535
1569
  type: "button",
1536
1570
  children: trigger
1537
1571
  });
1538
- $[132] = bodyId;
1539
- $[133] = disabled;
1540
- $[134] = isOpen;
1541
- $[135] = popupRole;
1542
- $[136] = t46;
1543
- $[137] = t47;
1544
- $[138] = trigger;
1545
- $[139] = triggerId;
1546
- $[140] = t48;
1547
- } else t48 = $[140];
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];
1548
1582
  trigger = t48;
1549
1583
  }
1550
1584
  } else {
@@ -1563,7 +1597,7 @@ function RootDropdown(t0) {
1563
1597
  const t51 = triggerProps["aria-haspopup"] ?? popupRole;
1564
1598
  const t52 = triggerProps.tabIndex ?? menubarTabIndex;
1565
1599
  let t53;
1566
- 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) {
1567
1601
  t53 = cloneElement(t46, {
1568
1602
  "aria-autocomplete": t47,
1569
1603
  "aria-controls": t48,
@@ -1574,17 +1608,17 @@ function RootDropdown(t0) {
1574
1608
  role: triggerRole,
1575
1609
  tabIndex: t52
1576
1610
  });
1577
- $[141] = resolvedTriggerId;
1578
- $[142] = t46;
1579
- $[143] = t47;
1580
- $[144] = t48;
1581
- $[145] = t49;
1582
- $[146] = t50;
1583
- $[147] = t51;
1584
- $[148] = t52;
1585
- $[149] = triggerRole;
1586
- $[150] = t53;
1587
- } 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];
1588
1622
  trigger = t53;
1589
1623
  }
1590
1624
  if (label != null) {
@@ -1592,57 +1626,57 @@ function RootDropdown(t0) {
1592
1626
  const t46 = isMenubarMember ? "none" : void 0;
1593
1627
  const t47 = isMenubarMember ? "none" : void 0;
1594
1628
  let t48;
1595
- if ($[151] !== label || $[152] !== labelId || $[153] !== t47) {
1629
+ if ($[152] !== label || $[153] !== labelId || $[154] !== t47) {
1596
1630
  t48 = /* @__PURE__ */ jsx("div", {
1597
1631
  className: "uktdropdown-label-text",
1598
1632
  id: labelId,
1599
1633
  role: t47,
1600
1634
  children: label
1601
1635
  });
1602
- $[151] = label;
1603
- $[152] = labelId;
1604
- $[153] = t47;
1605
- $[154] = t48;
1606
- } else t48 = $[154];
1636
+ $[152] = label;
1637
+ $[153] = labelId;
1638
+ $[154] = t47;
1639
+ $[155] = t48;
1640
+ } else t48 = $[155];
1607
1641
  let t49;
1608
- if ($[155] !== t46 || $[156] !== t48 || $[157] !== trigger) {
1642
+ if ($[156] !== t46 || $[157] !== t48 || $[158] !== trigger) {
1609
1643
  t49 = /* @__PURE__ */ jsxs("label", {
1610
1644
  className: "uktdropdown-label",
1611
1645
  role: t46,
1612
1646
  children: [t48, trigger]
1613
1647
  });
1614
- $[155] = t46;
1615
- $[156] = t48;
1616
- $[157] = trigger;
1617
- $[158] = t49;
1618
- } else t49 = $[158];
1648
+ $[156] = t46;
1649
+ $[157] = t48;
1650
+ $[158] = trigger;
1651
+ $[159] = t49;
1652
+ } else t49 = $[159];
1619
1653
  trigger = t49;
1620
1654
  }
1621
1655
  let t46;
1622
- if ($[159] === Symbol.for("react.memo_cache_sentinel")) {
1656
+ if ($[160] === Symbol.for("react.memo_cache_sentinel")) {
1623
1657
  t46 = /* @__PURE__ */ jsx("style", {
1624
1658
  href: "@acusti/dropdown/Dropdown",
1625
1659
  precedence: "medium",
1626
1660
  children: Dropdown_default
1627
1661
  });
1628
- $[159] = t46;
1629
- } else t46 = $[159];
1662
+ $[160] = t46;
1663
+ } else t46 = $[160];
1630
1664
  let t47;
1631
- if ($[160] !== className || $[161] !== disabled || $[162] !== isOpen || $[163] !== isSearchable) {
1665
+ if ($[161] !== className || $[162] !== disabled || $[163] !== isOpen || $[164] !== isSearchable) {
1632
1666
  t47 = clsx("uktdropdown", className, {
1633
- disabled,
1667
+ "is-disabled": disabled,
1634
1668
  "is-open": isOpen,
1635
1669
  "is-searchable": isSearchable
1636
1670
  });
1637
- $[160] = className;
1638
- $[161] = disabled;
1639
- $[162] = isOpen;
1640
- $[163] = isSearchable;
1641
- $[164] = t47;
1642
- } else t47 = $[164];
1671
+ $[161] = className;
1672
+ $[162] = disabled;
1673
+ $[163] = isOpen;
1674
+ $[164] = isSearchable;
1675
+ $[165] = t47;
1676
+ } else t47 = $[165];
1643
1677
  const t48 = isMenubarMember ? "none" : void 0;
1644
1678
  let t49;
1645
- 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) {
1646
1680
  t49 = isOpen ? /* @__PURE__ */ jsx("div", {
1647
1681
  "aria-labelledby": bodyLabelledBy,
1648
1682
  className: clsx("uktdropdown-body", { "has-items": hasItems }),
@@ -1658,17 +1692,18 @@ function RootDropdown(t0) {
1658
1692
  })
1659
1693
  })
1660
1694
  }) : null;
1661
- $[165] = body;
1662
- $[166] = bodyId;
1663
- $[167] = bodyLabelledBy;
1664
- $[168] = handleBodyRef;
1665
- $[169] = hasItems;
1666
- $[170] = isOpen;
1667
- $[171] = popupRole;
1668
- $[172] = t49;
1669
- } 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];
1670
1705
  let t50;
1671
- 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) {
1672
1707
  t50 = /* @__PURE__ */ jsxs(Fragment, { children: [t46, /* @__PURE__ */ jsxs("div", {
1673
1708
  className: t47,
1674
1709
  onClick,
@@ -1684,22 +1719,22 @@ function RootDropdown(t0) {
1684
1719
  style: styleFromProps,
1685
1720
  children: [trigger, t49]
1686
1721
  })] });
1687
- $[173] = handleDropdownMouseEnter;
1688
- $[174] = handleDropdownMouseLeave;
1689
- $[175] = handleMouseDown;
1690
- $[176] = handleMouseMove;
1691
- $[177] = handleMouseOut;
1692
- $[178] = handleMouseOver;
1693
- $[179] = handleMouseUp;
1694
- $[180] = handleRef;
1695
- $[181] = onClick;
1696
- $[182] = styleFromProps;
1697
- $[183] = t47;
1698
- $[184] = t48;
1699
- $[185] = t49;
1700
- $[186] = trigger;
1701
- $[187] = t50;
1702
- } 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];
1703
1738
  return t50;
1704
1739
  }
1705
1740
  var INERT_SUBMENU_PROPS = [
@@ -1709,21 +1744,28 @@ var INERT_SUBMENU_PROPS = [
1709
1744
  "isSearchable",
1710
1745
  "keepOpenOnSubmit",
1711
1746
  "name",
1747
+ "onClick",
1748
+ "onMouseDown",
1749
+ "onMouseUp",
1712
1750
  "openOnHover",
1713
1751
  "placeholder",
1714
1752
  "tabIndex",
1715
1753
  "value"
1716
1754
  ];
1717
1755
  function SubmenuDropdown(props) {
1718
- const $ = c(17);
1719
- const { children, className, disabled, label, onActiveItem, onClose, onOpen, onSubmitItem, parentDropdown, style } = props;
1720
- 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;
1721
1760
  let t0;
1722
- let t1;
1723
- if ($[0] !== onActiveItem || $[1] !== onClose || $[2] !== onOpen || $[3] !== onSubmitItem || $[4] !== parentDropdown) {
1724
- t0 = () => {
1725
- const element = itemRef.current;
1761
+ if ($[0] !== detectedElement || $[1] !== itemAs || $[2] !== onActiveItem || $[3] !== onClose || $[4] !== onOpen || $[5] !== onSubmitItem || $[6] !== parentDropdown) {
1762
+ t0 = (element) => {
1726
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
+ }
1727
1769
  return parentDropdown.registerSubmenu({
1728
1770
  element,
1729
1771
  onActiveItem,
@@ -1732,39 +1774,30 @@ function SubmenuDropdown(props) {
1732
1774
  onSubmitItem
1733
1775
  });
1734
1776
  };
1735
- t1 = [
1736
- onActiveItem,
1737
- onClose,
1738
- onOpen,
1739
- onSubmitItem,
1740
- parentDropdown
1741
- ];
1742
- $[0] = onActiveItem;
1743
- $[1] = onClose;
1744
- $[2] = onOpen;
1745
- $[3] = onSubmitItem;
1746
- $[4] = parentDropdown;
1747
- $[5] = t0;
1748
- $[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;
1749
1796
  } else {
1750
- t0 = $[5];
1751
- t1 = $[6];
1797
+ t1 = $[9];
1798
+ t2 = $[10];
1752
1799
  }
1753
- useEffect(t0, t1);
1754
- const warnedRef = useRef(false);
1755
- let t2;
1756
- if ($[7] !== props) {
1757
- t2 = () => {
1758
- if (warnedRef.current) return;
1759
- const inertProps = INERT_SUBMENU_PROPS.filter((propName) => props[propName] !== void 0);
1760
- if (!inertProps.length) return;
1761
- warnedRef.current = true;
1762
- console.error(`@acusti/dropdown: ${inertProps.join(", ")} only apply to a top-level Dropdown and are ignored on a nested (submenu) Dropdown.`);
1763
- };
1764
- $[7] = props;
1765
- $[8] = t2;
1766
- } else t2 = $[8];
1767
- useEffect(t2);
1800
+ t1(t2);
1768
1801
  const childrenCount = Children.count(children);
1769
1802
  let labelContent = label;
1770
1803
  let body = children;
@@ -1773,7 +1806,7 @@ function SubmenuDropdown(props) {
1773
1806
  body = children[1];
1774
1807
  }
1775
1808
  let t3;
1776
- if ($[9] !== body) {
1809
+ if ($[11] !== body) {
1777
1810
  t3 = isValidElement(body) ? cloneElement(body, {
1778
1811
  "data-ukt-submenu": "",
1779
1812
  popover: "manual"
@@ -1782,28 +1815,30 @@ function SubmenuDropdown(props) {
1782
1815
  popover: "manual",
1783
1816
  children: body
1784
1817
  });
1785
- $[9] = body;
1786
- $[10] = t3;
1787
- } else t3 = $[10];
1818
+ $[11] = body;
1819
+ $[12] = t3;
1820
+ } else t3 = $[12];
1788
1821
  const submenu = t3;
1789
1822
  const t4 = disabled || void 0;
1790
1823
  let t5;
1791
- if ($[11] !== className || $[12] !== labelContent || $[13] !== style || $[14] !== submenu || $[15] !== t4) {
1792
- 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, {
1793
1826
  "aria-disabled": t4,
1794
1827
  className,
1795
1828
  "data-ukt-item": "",
1796
- ref: itemRef,
1829
+ ref: handleItemRef,
1797
1830
  style,
1798
1831
  children: [labelContent, submenu]
1799
1832
  });
1800
- $[11] = className;
1801
- $[12] = labelContent;
1802
- $[13] = style;
1803
- $[14] = submenu;
1804
- $[15] = t4;
1805
- $[16] = t5;
1806
- } 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];
1807
1842
  return t5;
1808
1843
  }
1809
1844
  //#endregion