@acusti/dropdown 1.0.0-rc.3 → 1.0.0-rc.5

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