@acusti/dropdown 1.0.0-alpha.3 → 1.0.0-alpha.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 (6) hide show
  1. package/README.md +129 -30
  2. package/dist/Dropdown.d.ts +19 -5
  3. package/dist/Dropdown.js +523 -426
  4. package/dist/Dropdown.js.map +1 -1
  5. package/dist/helpers.d.ts +4 -2
  6. package/package.json +1 -1
package/dist/Dropdown.js CHANGED
@@ -9,7 +9,7 @@ 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-body-bg-color:#fff;--uktdd-body-bg-color-hover:#69a2f9;--uktdd-body-color-hover:#fff;--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:bottom span-right;--uktdd-body-position-try-fallbacks:--uktdd-top-left, --uktdd-bottom-right, --uktdd-top-right;--uktdd-body-gap:0px;--uktdd-body-color:canvastext;--uktdd-body-bg-color-path:#dcdcdc;--uktdd-body-color-path:currentColor;--uktdd-label-pad-right:.625em;--uktdd-submenu-position-area:inline-end span-block-end;--uktdd-submenu-position-try-fallbacks:--uktdd-submenu-inline-start;--uktdd-submenu-gap:0px;--uktdd-menubar-trigger-bg-color-active:#0000001f}.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-order:most-height;position-try-fallbacks:var(--uktdd-body-position-try-fallbacks);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:min(var(--uktdd-body-max-height), 100%);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:inherit;background-color:var(--uktdd-body-bg-color);flex-direction:column;display:flex;position:fixed;overflow:hidden;box-shadow:0 8px 18px #00000040}.uktdropdown-body.has-items{-webkit-user-select:none;user-select:none}.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: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-item][aria-expanded=true]>[data-ukt-submenu]{display:block}.uktdropdown-body [data-ukt-submenu]{box-sizing:border-box;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-fallbacks);z-index:2;margin-block:0;margin-inline:var(--uktdd-submenu-gap);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);max-block-size:var(--uktdd-body-max-height);overscroll-behavior:contain;background-color:var(--uktdd-body-bg-color);list-style:none;display:none;position:fixed;overflow:auto;box-shadow:0 8px 18px #00000040}div.uktdropdown-body{block-size:auto;margin-block:var(--uktdd-body-gap);border:0;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-top-left{position-area: top span-right;}@position-try --uktdd-bottom-left{position-area: bottom span-right;}@position-try --uktdd-bottom-right{position-area: bottom span-left;}@position-try --uktdd-top-right{position-area: top span-left;}@position-try --uktdd-submenu-inline-start{position-area: inline-start span-block-end;}";
12
+ var Dropdown_default = ":root{--uktdd-font-family:system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif;--uktdd-body-bg-color:#fff;--uktdd-body-bg-color-hover:#69a2f9;--uktdd-body-color-hover:#fff;--uktdd-body-bg-color-selected:#0000000f;--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-fallbacks:--uktdd-top-start, --uktdd-bottom-end, --uktdd-top-end;--uktdd-body-gap:0px;--uktdd-body-color:canvastext;--uktdd-body-bg-color-path:#dcdcdc;--uktdd-body-color-path:currentColor;--uktdd-label-pad-right:.625em;--uktdd-submenu-position-area:inline-end span-block-end;--uktdd-submenu-position-try-fallbacks:--uktdd-submenu-inline-start;--uktdd-submenu-gap:0px;--uktdd-menubar-trigger-bg-color-active:#0000001f}.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-fallbacks), --uktdd-fill, --uktdd-fill flip-inline, --uktdd-fill flip-block, --uktdd-fill flip-block flip-inline;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:inherit;background-color:var(--uktdd-body-bg-color);flex-direction:column;display:flex;position:fixed;overflow:hidden;box-shadow:0 8px 18px #00000040}.uktdropdown-body.has-items{-webkit-user-select:none;user-select:none}.uktdropdown-body [aria-selected=true]{background-color:var(--uktdd-body-bg-color-selected)}.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: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;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-fallbacks), --uktdd-fill, --uktdd-fill flip-inline, --uktdd-fill flip-block, --uktdd-fill flip-block flip-inline;z-index:2;margin-block:0;margin-inline:var(--uktdd-submenu-gap);--uktdd-body-gap:0;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);border:0;list-style:none;position:fixed;inset:auto;overflow:auto;box-shadow:0 8px 18px #00000040}div.uktdropdown-body{block-size:auto;margin-block:var(--uktdd-body-gap);border:0;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-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{block-size: calc(100% - var(--uktdd-body-gap) * 2);}";
13
13
  //#endregion
14
14
  //#region src/helpers.ts
15
15
  var ITEM_SELECTOR = "[data-ukt-item], [data-ukt-value]";
@@ -29,6 +29,36 @@ var getItemLabel = (item) => {
29
29
  for (const submenu of Array.from(clone.querySelectorAll(SUBMENU_SELECTOR))) submenu.remove();
30
30
  return (clone.textContent ?? "").trim();
31
31
  };
32
+ var getNodeText = (node) => {
33
+ let text = "";
34
+ Children.forEach(node, (child) => {
35
+ if (typeof child === "string" || typeof child === "number") text += child;
36
+ else if (isValidElement(child)) {
37
+ const childProps = child.props;
38
+ if (childProps["data-ukt-submenu"] !== void 0) return;
39
+ text += getNodeText(childProps.children);
40
+ }
41
+ });
42
+ return text;
43
+ };
44
+ var getLabelFromChildren = (children, value) => {
45
+ let label;
46
+ const visit = (node) => {
47
+ if (label != null) return;
48
+ Children.forEach(node, (child) => {
49
+ if (label != null || !isValidElement(child)) return;
50
+ const childProps = child.props;
51
+ const uktValue = childProps["data-ukt-value"];
52
+ if (uktValue != null && String(uktValue) === value) {
53
+ label = getNodeText(childProps.children).replace(/\s+/g, " ").trim();
54
+ return;
55
+ }
56
+ visit(childProps.children);
57
+ });
58
+ };
59
+ visit(children);
60
+ return label;
61
+ };
32
62
  var getItemPath = (element) => {
33
63
  const path = [];
34
64
  if (!element) return path;
@@ -86,9 +116,10 @@ var getDeepestExpandedItem = (dropdownElement) => {
86
116
  };
87
117
  var isItemExpanded = (item) => item.getAttribute("aria-expanded") === "true";
88
118
  var submenuIdCounter = 0;
89
- var ensureSubmenuAria = (item, submenu) => {
119
+ var ensureSubmenuARIA = (item, submenu) => {
90
120
  if (!submenu.hasAttribute("role")) submenu.setAttribute("role", "menu");
91
121
  if (!submenu.id) submenu.id = `uktdd-submenu-${++submenuIdCounter}`;
122
+ if (submenu.getAttribute("popover") !== "manual") submenu.setAttribute("popover", "manual");
92
123
  if (!item.hasAttribute("aria-haspopup")) item.setAttribute("aria-haspopup", "menu");
93
124
  if (!item.hasAttribute("aria-expanded")) item.setAttribute("aria-expanded", "false");
94
125
  if (!item.hasAttribute("aria-controls")) item.setAttribute("aria-controls", submenu.id);
@@ -97,13 +128,23 @@ var annotateParentItems = (bodyElement) => {
97
128
  if (!bodyElement) return;
98
129
  for (const submenu of Array.from(bodyElement.querySelectorAll(SUBMENU_SELECTOR))) {
99
130
  const item = getParentItem(submenu);
100
- if (item) ensureSubmenuAria(item, submenu);
131
+ if (item) ensureSubmenuARIA(item, submenu);
132
+ }
133
+ };
134
+ var annotateItemRoles = (bodyElement, popupRole) => {
135
+ if (!bodyElement) return;
136
+ 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");
137
+ for (const item of Array.from(bodyElement.querySelectorAll(ITEM_SELECTOR))) {
138
+ if (item.hasAttribute("role") || item.matches("a[href], button, input, select, textarea")) continue;
139
+ const isMenuItem = popupRole === "menu" || getLevelRoot(item) != null;
140
+ if (!isMenuItem && getSubmenuOfItem(item)) continue;
141
+ item.setAttribute("role", isMenuItem ? "menuitem" : "option");
101
142
  }
102
143
  };
103
144
  var expandItem = (item, onToggleSubmenu) => {
104
145
  const submenu = getSubmenuOfItem(item);
105
146
  if (!submenu) return;
106
- ensureSubmenuAria(item, submenu);
147
+ ensureSubmenuARIA(item, submenu);
107
148
  if (isItemExpanded(item)) return;
108
149
  item.setAttribute("aria-expanded", "true");
109
150
  onToggleSubmenu?.(item, true);
@@ -182,15 +223,16 @@ var setActiveItem = ({ dropdownElement, element, event, index, indexAddend, isEx
182
223
  const nextActiveItem = itemElements[nextActiveIndex];
183
224
  if (nextActiveItem == null || nextActiveItem === currentDeepest) return currentDeepest;
184
225
  setActiveChain(dropdownElement, nextActiveItem);
185
- const label = getItemLabel(nextActiveItem);
186
- const value = nextActiveItem.dataset.uktValue ?? label;
187
- onActiveItem?.({
188
- element: nextActiveItem,
189
- event,
190
- label,
191
- path: getItemPath(nextActiveItem),
192
- value
193
- });
226
+ if (event) {
227
+ const label = getItemLabel(nextActiveItem);
228
+ onActiveItem?.({
229
+ element: nextActiveItem,
230
+ event,
231
+ label,
232
+ path: getItemPath(nextActiveItem),
233
+ value: nextActiveItem.dataset.uktValue ?? label
234
+ });
235
+ }
194
236
  let { parentElement } = nextActiveItem;
195
237
  let scrollableParent = null;
196
238
  while (!scrollableParent && parentElement && parentElement !== dropdownElement) if (parentElement.scrollHeight > parentElement.clientHeight + 15) scrollableParent = parentElement;
@@ -280,7 +322,7 @@ function Menubar(t0) {
280
322
  if (key !== "ArrowLeft" && key !== "ArrowRight") return;
281
323
  const members_0 = getOrderedMembers();
282
324
  if (members_0.length < 2) return;
283
- if (members_0.some(_temp$1)) return;
325
+ if (members_0.some(_temp)) return;
284
326
  const eventTarget = event.target;
285
327
  const index_0 = members_0.findIndex((member_3) => member_3.element.contains(eventTarget));
286
328
  if (index_0 === -1) return;
@@ -360,7 +402,7 @@ function Menubar(t0) {
360
402
  } else t10 = $[14];
361
403
  return t10;
362
404
  }
363
- function _temp$1(member_2) {
405
+ function _temp(member_2) {
364
406
  return member_2.isOpen();
365
407
  }
366
408
  //#endregion
@@ -397,7 +439,7 @@ function Dropdown(props) {
397
439
  return t0;
398
440
  }
399
441
  function RootDropdown(t0) {
400
- const $ = c(147);
442
+ const $ = c(157);
401
443
  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;
402
444
  const allowEmpty = t1 === void 0 ? true : t1;
403
445
  const hasItems = t2 === void 0 ? true : t2;
@@ -409,6 +451,17 @@ function RootDropdown(t0) {
409
451
  }
410
452
  let trigger;
411
453
  if (childrenCount > 1) trigger = children[0];
454
+ const body = childrenCount > 1 ? children[1] : children;
455
+ const valueIdentity = typeof value === "string" ? value : value?.value;
456
+ let t4;
457
+ if ($[0] !== body || $[1] !== isSearchable || $[2] !== value) {
458
+ t4 = !isSearchable ? void 0 : typeof value !== "string" ? value?.label : getLabelFromChildren(body, value) ?? value;
459
+ $[0] = body;
460
+ $[1] = isSearchable;
461
+ $[2] = value;
462
+ $[3] = t4;
463
+ } else t4 = $[3];
464
+ const valueLabel = t4;
412
465
  const [isOpen, setIsOpen] = useState(isOpenOnMount ?? false);
413
466
  const [isOpening, setIsOpening] = useState(!isOpenOnMount);
414
467
  const [dropdownElement, setDropdownElement] = useState(null);
@@ -416,6 +469,13 @@ function RootDropdown(t0) {
416
469
  const popupRole = isSearchable ? "listbox" : hasItems ? "menu" : "dialog";
417
470
  const menubar = useContext(MenubarContext);
418
471
  const inputElementRef = useRef(null);
472
+ const consumerOwnsARIASelectedRef = useRef(false);
473
+ let t5;
474
+ if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
475
+ t5 = /* @__PURE__ */ new WeakSet();
476
+ $[4] = t5;
477
+ } else t5 = $[4];
478
+ const annotatedBodiesRef = useRef(t5);
419
479
  const closingTimerRef = useRef(null);
420
480
  const isOpeningTimerRef = useRef(null);
421
481
  const currentInputMethodRef = useRef("mouse");
@@ -424,12 +484,12 @@ function RootDropdown(t0) {
424
484
  const mouseDownPositionRef = useRef(null);
425
485
  const disclosureTimerRef = useRef(null);
426
486
  const pendingDisclosureItemRef = useRef(null);
427
- let t4;
428
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
429
- t4 = /* @__PURE__ */ new Set();
430
- $[0] = t4;
431
- } else t4 = $[0];
432
- const submenuRegistrationsRef = useRef(t4);
487
+ let t6;
488
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
489
+ t6 = /* @__PURE__ */ new Set();
490
+ $[5] = t6;
491
+ } else t6 = $[5];
492
+ const submenuRegistrationsRef = useRef(t6);
433
493
  const pointerRef = useRef(null);
434
494
  const lastMouseEventRef = useRef(null);
435
495
  const safeAreaRef = useRef(null);
@@ -445,11 +505,11 @@ function RootDropdown(t0) {
445
505
  const onCloseRef = useRef(onClose);
446
506
  const onOpenRef = useRef(onOpen);
447
507
  const onSubmitItemRef = useRef(onSubmitItem);
448
- const valueRef = useRef(value);
449
- let t5;
450
- let t6;
451
- if ($[1] !== allowCreate || $[2] !== allowEmpty || $[3] !== hasItems || $[4] !== isOpen || $[5] !== isOpening || $[6] !== keepOpenOnSubmit || $[7] !== onClose || $[8] !== onOpen || $[9] !== onSubmitItem || $[10] !== value) {
452
- t5 = () => {
508
+ const valueRef = useRef(valueIdentity);
509
+ let t7;
510
+ let t8;
511
+ if ($[6] !== allowCreate || $[7] !== allowEmpty || $[8] !== hasItems || $[9] !== isOpen || $[10] !== isOpening || $[11] !== keepOpenOnSubmit || $[12] !== onClose || $[13] !== onOpen || $[14] !== onSubmitItem || $[15] !== valueIdentity) {
512
+ t7 = () => {
453
513
  allowCreateRef.current = allowCreate;
454
514
  allowEmptyRef.current = allowEmpty;
455
515
  hasItemsRef.current = hasItems;
@@ -459,9 +519,9 @@ function RootDropdown(t0) {
459
519
  onCloseRef.current = onClose;
460
520
  onOpenRef.current = onOpen;
461
521
  onSubmitItemRef.current = onSubmitItem;
462
- valueRef.current = value;
522
+ valueRef.current = valueIdentity;
463
523
  };
464
- t6 = [
524
+ t8 = [
465
525
  allowCreate,
466
526
  allowEmpty,
467
527
  hasItems,
@@ -471,30 +531,30 @@ function RootDropdown(t0) {
471
531
  onClose,
472
532
  onOpen,
473
533
  onSubmitItem,
474
- value
534
+ valueIdentity
475
535
  ];
476
- $[1] = allowCreate;
477
- $[2] = allowEmpty;
478
- $[3] = hasItems;
479
- $[4] = isOpen;
480
- $[5] = isOpening;
481
- $[6] = keepOpenOnSubmit;
482
- $[7] = onClose;
483
- $[8] = onOpen;
484
- $[9] = onSubmitItem;
485
- $[10] = value;
486
- $[11] = t5;
487
- $[12] = t6;
536
+ $[6] = allowCreate;
537
+ $[7] = allowEmpty;
538
+ $[8] = hasItems;
539
+ $[9] = isOpen;
540
+ $[10] = isOpening;
541
+ $[11] = keepOpenOnSubmit;
542
+ $[12] = onClose;
543
+ $[13] = onOpen;
544
+ $[14] = onSubmitItem;
545
+ $[15] = valueIdentity;
546
+ $[16] = t7;
547
+ $[17] = t8;
488
548
  } else {
489
- t5 = $[11];
490
- t6 = $[12];
549
+ t7 = $[16];
550
+ t8 = $[17];
491
551
  }
492
- useEffect(t5, t6);
552
+ useEffect(t7, t8);
493
553
  const isMountedRef = useRef(false);
494
- let t7;
495
- let t8;
496
- if ($[13] !== isOpen) {
497
- t7 = () => {
554
+ let t10;
555
+ let t9;
556
+ if ($[18] !== isOpen) {
557
+ t9 = () => {
498
558
  if (!isMountedRef.current) {
499
559
  isMountedRef.current = true;
500
560
  if (isOpenRef.current && onOpenRef.current) onOpenRef.current();
@@ -503,85 +563,91 @@ function RootDropdown(t0) {
503
563
  if (isOpen && onOpenRef.current) onOpenRef.current();
504
564
  else if (!isOpen && onCloseRef.current) onCloseRef.current();
505
565
  };
506
- t8 = [isOpen];
507
- $[13] = isOpen;
508
- $[14] = t7;
509
- $[15] = t8;
566
+ t10 = [isOpen];
567
+ $[18] = isOpen;
568
+ $[19] = t10;
569
+ $[20] = t9;
510
570
  } else {
511
- t7 = $[14];
512
- t8 = $[15];
571
+ t10 = $[19];
572
+ t9 = $[20];
513
573
  }
514
- useEffect(t7, t8);
515
- let t9;
516
- if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
517
- t9 = { registerSubmenu(registration) {
574
+ useEffect(t9, t10);
575
+ let t11;
576
+ if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
577
+ t11 = { registerSubmenu(registration) {
518
578
  submenuRegistrationsRef.current.add(registration);
519
579
  return () => {
520
580
  submenuRegistrationsRef.current.delete(registration);
521
581
  };
522
582
  } };
523
- $[16] = t9;
524
- } else t9 = $[16];
525
- const dropdownContextValue = t9;
526
- let t10;
527
- if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
528
- t10 = (key, payload) => {
583
+ $[21] = t11;
584
+ } else t11 = $[21];
585
+ const dropdownContextValue = t11;
586
+ let t12;
587
+ if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
588
+ t12 = (key, payload) => {
529
589
  if (!payload.element) return;
530
590
  for (const registration_0 of submenuRegistrationsRef.current) if (registration_0.element.contains(payload.element)) registration_0[key]?.(payload);
531
591
  };
532
- $[17] = t10;
533
- } else t10 = $[17];
534
- const dispatchToSubmenus = t10;
535
- let t11;
536
- if ($[18] !== onActiveItem) {
537
- t11 = (payload_0) => {
592
+ $[22] = t12;
593
+ } else t12 = $[22];
594
+ const dispatchToSubmenus = t12;
595
+ let t13;
596
+ if ($[23] !== onActiveItem) {
597
+ t13 = (payload_0) => {
538
598
  onActiveItem?.(payload_0);
539
599
  dispatchToSubmenus("onActiveItem", payload_0);
540
600
  };
541
- $[18] = onActiveItem;
542
- $[19] = t11;
543
- } else t11 = $[19];
544
- const handleActiveItem = t11;
545
- let t12;
546
- if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
547
- t12 = (item, isExpanded) => {
601
+ $[23] = onActiveItem;
602
+ $[24] = t13;
603
+ } else t13 = $[24];
604
+ const handleActiveItem = t13;
605
+ let t14;
606
+ if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
607
+ t14 = (item, isExpanded) => {
608
+ const submenu = getSubmenuOfItem(item);
609
+ if (submenu) {
610
+ const isShown = submenu.matches(":popover-open");
611
+ if (isExpanded && !isShown) submenu.showPopover();
612
+ else if (!isExpanded && isShown) submenu.hidePopover();
613
+ }
548
614
  for (const registration_1 of submenuRegistrationsRef.current) if (registration_1.element === item) (isExpanded ? registration_1.onOpen : registration_1.onClose)?.();
549
615
  };
550
- $[20] = t12;
551
- } else t12 = $[20];
552
- const handleToggleSubmenu = t12;
553
- let t13;
554
- if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
555
- t13 = () => {
616
+ $[25] = t14;
617
+ } else t14 = $[25];
618
+ const handleToggleSubmenu = t14;
619
+ let t15;
620
+ if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
621
+ t15 = () => {
556
622
  if (disclosureTimerRef.current != null) {
557
623
  clearTimeout(disclosureTimerRef.current);
558
624
  disclosureTimerRef.current = null;
559
625
  }
560
626
  pendingDisclosureItemRef.current = null;
561
627
  };
562
- $[21] = t13;
563
- } else t13 = $[21];
564
- const clearDisclosureTimer = t13;
565
- let t14;
566
- let t15;
567
- if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
568
- t14 = () => clearDisclosureTimer;
569
- t15 = [];
570
- $[22] = t14;
571
- $[23] = t15;
628
+ $[26] = t15;
629
+ } else t15 = $[26];
630
+ const clearDisclosureTimer = t15;
631
+ let t16;
632
+ let t17;
633
+ if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
634
+ t16 = () => clearDisclosureTimer;
635
+ t17 = [];
636
+ $[27] = t16;
637
+ $[28] = t17;
572
638
  } else {
573
- t14 = $[22];
574
- t15 = $[23];
639
+ t16 = $[27];
640
+ t17 = $[28];
575
641
  }
576
- useEffect(t14, t15);
577
- let t16;
578
- if ($[24] !== dropdownElement) {
579
- t16 = () => {
642
+ useEffect(t16, t17);
643
+ let t18;
644
+ if ($[29] !== dropdownElement) {
645
+ t18 = () => {
580
646
  if (!dropdownElement) return;
581
647
  const activeElement = getActiveItemElement(dropdownElement);
582
648
  collapseItemsOutsidePath(dropdownElement, activeElement, handleToggleSubmenu);
583
- const submenu = activeElement ? getSubmenuOfItem(activeElement) : null;
584
- if (activeElement && submenu && !isItemExpanded(activeElement)) {
649
+ const submenu_0 = activeElement ? getSubmenuOfItem(activeElement) : null;
650
+ if (activeElement && submenu_0 && !isItemExpanded(activeElement)) {
585
651
  if (pendingDisclosureItemRef.current === activeElement) return;
586
652
  clearDisclosureTimer();
587
653
  pendingDisclosureItemRef.current = activeElement;
@@ -595,41 +661,41 @@ function RootDropdown(t0) {
595
661
  }
596
662
  clearDisclosureTimer();
597
663
  };
598
- $[24] = dropdownElement;
599
- $[25] = t16;
600
- } else t16 = $[25];
601
- const syncSubmenuDisclosure = t16;
602
- let t17;
603
- if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
604
- t17 = () => {
664
+ $[29] = dropdownElement;
665
+ $[30] = t18;
666
+ } else t18 = $[30];
667
+ const syncSubmenuDisclosure = t18;
668
+ let t19;
669
+ if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
670
+ t19 = () => {
605
671
  if (safeAreaTimerRef.current != null) {
606
672
  clearTimeout(safeAreaTimerRef.current);
607
673
  safeAreaTimerRef.current = null;
608
674
  }
609
675
  };
610
- $[26] = t17;
611
- } else t17 = $[26];
612
- const clearSafeAreaTimer = t17;
613
- let t18;
614
- let t19;
615
- if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
616
- t18 = () => clearSafeAreaTimer;
617
- t19 = [];
618
- $[27] = t18;
619
- $[28] = t19;
676
+ $[31] = t19;
677
+ } else t19 = $[31];
678
+ const clearSafeAreaTimer = t19;
679
+ let t20;
680
+ let t21;
681
+ if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
682
+ t20 = () => clearSafeAreaTimer;
683
+ t21 = [];
684
+ $[32] = t20;
685
+ $[33] = t21;
620
686
  } else {
621
- t18 = $[27];
622
- t19 = $[28];
687
+ t20 = $[32];
688
+ t21 = $[33];
623
689
  }
624
- useEffect(t18, t19);
625
- let t20;
626
- if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
627
- t20 = (x, y) => {
690
+ useEffect(t20, t21);
691
+ let t22;
692
+ if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
693
+ t22 = (x, y) => {
628
694
  const safeArea = safeAreaRef.current;
629
695
  if (!safeArea || !isItemExpanded(safeArea.parent)) return false;
630
- const submenu_0 = getSubmenuOfItem(safeArea.parent);
631
- if (!submenu_0) return false;
632
- const submenuRect = submenu_0.getBoundingClientRect();
696
+ const submenu_1 = getSubmenuOfItem(safeArea.parent);
697
+ if (!submenu_1) return false;
698
+ const submenuRect = submenu_1.getBoundingClientRect();
633
699
  const parentRect = safeArea.parent.getBoundingClientRect();
634
700
  const nearX = submenuRect.left >= parentRect.right - 1 ? submenuRect.left : submenuRect.right;
635
701
  return isPointInTriangle({
@@ -643,12 +709,12 @@ function RootDropdown(t0) {
643
709
  y: submenuRect.bottom
644
710
  });
645
711
  };
646
- $[29] = t20;
647
- } else t20 = $[29];
648
- const isPointerInSafeArea = t20;
649
- let t21;
650
- if ($[30] !== dropdownElement || $[31] !== handleActiveItem || $[32] !== syncSubmenuDisclosure) {
651
- t21 = (targetElement) => {
712
+ $[34] = t22;
713
+ } else t22 = $[34];
714
+ const isPointerInSafeArea = t22;
715
+ let t23;
716
+ if ($[35] !== dropdownElement || $[36] !== handleActiveItem || $[37] !== syncSubmenuDisclosure) {
717
+ t23 = (targetElement) => {
652
718
  clearSafeAreaTimer();
653
719
  safeAreaRef.current = null;
654
720
  wasInSafeAreaRef.current = false;
@@ -665,15 +731,15 @@ function RootDropdown(t0) {
665
731
  });
666
732
  syncSubmenuDisclosure();
667
733
  };
668
- $[30] = dropdownElement;
669
- $[31] = handleActiveItem;
670
- $[32] = syncSubmenuDisclosure;
671
- $[33] = t21;
672
- } else t21 = $[33];
673
- const commitPointerTarget = t21;
674
- let t22;
675
- if ($[34] !== commitPointerTarget || $[35] !== dropdownElement) {
676
- t22 = (event_0) => {
734
+ $[35] = dropdownElement;
735
+ $[36] = handleActiveItem;
736
+ $[37] = syncSubmenuDisclosure;
737
+ $[38] = t23;
738
+ } else t23 = $[38];
739
+ const commitPointerTarget = t23;
740
+ let t24;
741
+ if ($[39] !== commitPointerTarget || $[40] !== dropdownElement) {
742
+ t24 = (event_0) => {
677
743
  if (!dropdownElement || !isOpenRef.current || !hasItemsRef.current) return;
678
744
  const pointer_0 = {
679
745
  x: event_0.clientX,
@@ -689,8 +755,8 @@ function RootDropdown(t0) {
689
755
  return;
690
756
  }
691
757
  const target_0 = event_0.target;
692
- const submenu_1 = getSubmenuOfItem(parent);
693
- if (parent.contains(target_0) && !(submenu_1?.contains(target_0) ?? false)) {
758
+ const submenu_2 = getSubmenuOfItem(parent);
759
+ if (parent.contains(target_0) && !(submenu_2?.contains(target_0) ?? false)) {
694
760
  safeAreaRef.current = {
695
761
  apex: pointer_0,
696
762
  parent
@@ -706,37 +772,37 @@ function RootDropdown(t0) {
706
772
  safeAreaTimerRef.current = setTimeout(commitPointerTarget, SAFE_AREA_TIMEOUT);
707
773
  } else if (wasInSafeAreaRef.current) commitPointerTarget(target_0);
708
774
  };
709
- $[34] = commitPointerTarget;
710
- $[35] = dropdownElement;
711
- $[36] = t22;
712
- } else t22 = $[36];
713
- const trackSafeArea = t22;
714
- let t23;
715
- if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
716
- t23 = () => {
775
+ $[39] = commitPointerTarget;
776
+ $[40] = dropdownElement;
777
+ $[41] = t24;
778
+ } else t24 = $[41];
779
+ const trackSafeArea = t24;
780
+ let t25;
781
+ if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
782
+ t25 = () => {
717
783
  if (hoverCloseTimerRef.current != null) {
718
784
  clearTimeout(hoverCloseTimerRef.current);
719
785
  hoverCloseTimerRef.current = null;
720
786
  }
721
787
  };
722
- $[37] = t23;
723
- } else t23 = $[37];
724
- const clearHoverCloseTimer = t23;
725
- let t24;
726
- let t25;
727
- if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
728
- t24 = () => clearHoverCloseTimer;
729
- t25 = [];
730
- $[38] = t24;
731
- $[39] = t25;
788
+ $[42] = t25;
789
+ } else t25 = $[42];
790
+ const clearHoverCloseTimer = t25;
791
+ let t26;
792
+ let t27;
793
+ if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
794
+ t26 = () => clearHoverCloseTimer;
795
+ t27 = [];
796
+ $[43] = t26;
797
+ $[44] = t27;
732
798
  } else {
733
- t24 = $[38];
734
- t25 = $[39];
799
+ t26 = $[43];
800
+ t27 = $[44];
735
801
  }
736
- useEffect(t24, t25);
737
- let t26;
738
- if ($[40] !== dropdownElement || $[41] !== menubar) {
739
- t26 = (options) => {
802
+ useEffect(t26, t27);
803
+ let t28;
804
+ if ($[45] !== dropdownElement || $[46] !== menubar) {
805
+ t28 = (options) => {
740
806
  setIsOpen(false);
741
807
  setIsOpening(false);
742
808
  mouseDownPositionRef.current = null;
@@ -751,51 +817,51 @@ function RootDropdown(t0) {
751
817
  }
752
818
  if (menubar && dropdownElement && !options?.keepMenubarEngaged) menubar.notifyClosed(dropdownElement);
753
819
  };
754
- $[40] = dropdownElement;
755
- $[41] = menubar;
756
- $[42] = t26;
757
- } else t26 = $[42];
758
- const closeDropdown = t26;
759
- let t27;
760
- if ($[43] !== openOnHover) {
761
- t27 = () => {
820
+ $[45] = dropdownElement;
821
+ $[46] = menubar;
822
+ $[47] = t28;
823
+ } else t28 = $[47];
824
+ const closeDropdown = t28;
825
+ let t29;
826
+ if ($[48] !== openOnHover) {
827
+ t29 = () => {
762
828
  clearHoverCloseTimer();
763
829
  if (!openOnHover || isOpenRef.current) return;
764
830
  setIsOpen(true);
765
831
  setIsOpening(false);
766
832
  };
767
- $[43] = openOnHover;
768
- $[44] = t27;
769
- } else t27 = $[44];
770
- const handleDropdownMouseEnter = t27;
771
- let t28;
772
- if ($[45] !== closeDropdown || $[46] !== openOnHover) {
773
- t28 = () => {
833
+ $[48] = openOnHover;
834
+ $[49] = t29;
835
+ } else t29 = $[49];
836
+ const handleDropdownMouseEnter = t29;
837
+ let t30;
838
+ if ($[50] !== closeDropdown || $[51] !== openOnHover) {
839
+ t30 = () => {
774
840
  if (!openOnHover || !isOpenRef.current || hoverCloseTimerRef.current != null) return;
775
841
  hoverCloseTimerRef.current = setTimeout(() => {
776
842
  hoverCloseTimerRef.current = null;
777
843
  closeDropdown();
778
844
  }, HOVER_CLOSE_DELAY);
779
845
  };
780
- $[45] = closeDropdown;
781
- $[46] = openOnHover;
782
- $[47] = t28;
783
- } else t28 = $[47];
784
- const handleDropdownMouseLeave = t28;
785
- let t29;
786
- if ($[48] !== dropdownElement?.firstElementChild) {
787
- t29 = () => {
846
+ $[50] = closeDropdown;
847
+ $[51] = openOnHover;
848
+ $[52] = t30;
849
+ } else t30 = $[52];
850
+ const handleDropdownMouseLeave = t30;
851
+ let t31;
852
+ if ($[53] !== dropdownElement?.firstElementChild) {
853
+ t31 = () => {
788
854
  const firstChild = dropdownElement?.firstElementChild;
789
855
  if (!firstChild) return;
790
856
  (firstChild.matches(FOCUSABLE_SELECTOR) ? firstChild : firstChild.querySelector(FOCUSABLE_SELECTOR))?.focus();
791
857
  };
792
- $[48] = dropdownElement?.firstElementChild;
793
- $[49] = t29;
794
- } else t29 = $[49];
795
- const focusTrigger = t29;
796
- let t30;
797
- if ($[50] !== closeDropdown || $[51] !== dropdownElement || $[52] !== focusTrigger || $[53] !== menubar) {
798
- t30 = () => {
858
+ $[53] = dropdownElement?.firstElementChild;
859
+ $[54] = t31;
860
+ } else t31 = $[54];
861
+ const focusTrigger = t31;
862
+ let t32;
863
+ if ($[55] !== closeDropdown || $[56] !== dropdownElement || $[57] !== focusTrigger || $[58] !== menubar) {
864
+ t32 = () => {
799
865
  if (!menubar || !dropdownElement) return;
800
866
  return menubar.registerMember({
801
867
  close: () => closeDropdown({ keepMenubarEngaged: true }),
@@ -805,37 +871,37 @@ function RootDropdown(t0) {
805
871
  open: () => setIsOpen(true)
806
872
  });
807
873
  };
808
- $[50] = closeDropdown;
809
- $[51] = dropdownElement;
810
- $[52] = focusTrigger;
811
- $[53] = menubar;
812
- $[54] = t30;
813
- } else t30 = $[54];
814
- useEffect(t30);
815
- let t31;
816
- let t32;
817
- if ($[55] !== dropdownElement || $[56] !== isOpen || $[57] !== menubar) {
818
- t31 = () => {
874
+ $[55] = closeDropdown;
875
+ $[56] = dropdownElement;
876
+ $[57] = focusTrigger;
877
+ $[58] = menubar;
878
+ $[59] = t32;
879
+ } else t32 = $[59];
880
+ useEffect(t32);
881
+ let t33;
882
+ let t34;
883
+ if ($[60] !== dropdownElement || $[61] !== isOpen || $[62] !== menubar) {
884
+ t33 = () => {
819
885
  if (isOpen && menubar && dropdownElement) menubar.notifyOpened(dropdownElement);
820
886
  };
821
- t32 = [
887
+ t34 = [
822
888
  dropdownElement,
823
889
  isOpen,
824
890
  menubar
825
891
  ];
826
- $[55] = dropdownElement;
827
- $[56] = isOpen;
828
- $[57] = menubar;
829
- $[58] = t31;
830
- $[59] = t32;
892
+ $[60] = dropdownElement;
893
+ $[61] = isOpen;
894
+ $[62] = menubar;
895
+ $[63] = t33;
896
+ $[64] = t34;
831
897
  } else {
832
- t31 = $[58];
833
- t32 = $[59];
898
+ t33 = $[63];
899
+ t34 = $[64];
834
900
  }
835
- useEffect(t31, t32);
836
- let t33;
837
- if ($[60] !== closeDropdown || $[61] !== dropdownElement || $[62] !== handleActiveItem) {
838
- t33 = (event_1) => {
901
+ useEffect(t33, t34);
902
+ let t35;
903
+ if ($[65] !== closeDropdown || $[66] !== dropdownElement || $[67] !== handleActiveItem || $[68] !== popupRole) {
904
+ t35 = (event_1) => {
839
905
  const element = hasItemsRef.current ? getActiveItemElement(dropdownElement) : null;
840
906
  const submenuOfActive = element ? getSubmenuOfItem(element) : null;
841
907
  if (element && submenuOfActive) {
@@ -868,6 +934,11 @@ function RootDropdown(t0) {
868
934
  }
869
935
  const nextValue = element?.dataset.uktValue ?? itemLabel;
870
936
  if (valueRef.current && valueRef.current === nextValue) return;
937
+ if (element && keepOpenOnSubmitRef.current && popupRole === "listbox" && !consumerOwnsARIASelectedRef.current) {
938
+ const bodyElement = element.closest(".uktdropdown-body");
939
+ for (const selected of Array.from(bodyElement?.querySelectorAll("[aria-selected=\"true\"]") ?? [])) selected.removeAttribute("aria-selected");
940
+ element.setAttribute("aria-selected", "true");
941
+ }
871
942
  if (element) {
872
943
  const eventTarget = event_1.target;
873
944
  if (element.matches(CLICKABLE_SELECTOR)) {
@@ -890,15 +961,16 @@ function RootDropdown(t0) {
890
961
  onSubmitItemRef.current?.(payload_1);
891
962
  dispatchToSubmenus("onSubmitItem", payload_1);
892
963
  };
893
- $[60] = closeDropdown;
894
- $[61] = dropdownElement;
895
- $[62] = handleActiveItem;
896
- $[63] = t33;
897
- } else t33 = $[63];
898
- const handleSubmitItem = t33;
899
- let t34;
900
- if ($[64] !== trackSafeArea) {
901
- t34 = (event_2) => {
964
+ $[65] = closeDropdown;
965
+ $[66] = dropdownElement;
966
+ $[67] = handleActiveItem;
967
+ $[68] = popupRole;
968
+ $[69] = t35;
969
+ } else t35 = $[69];
970
+ const handleSubmitItem = t35;
971
+ let t36;
972
+ if ($[70] !== trackSafeArea) {
973
+ t36 = (event_2) => {
902
974
  const { clientX, clientY } = event_2;
903
975
  currentInputMethodRef.current = "mouse";
904
976
  trackSafeArea(event_2);
@@ -907,13 +979,13 @@ function RootDropdown(t0) {
907
979
  if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
908
980
  setIsOpening(false);
909
981
  };
910
- $[64] = trackSafeArea;
911
- $[65] = t34;
912
- } else t34 = $[65];
913
- const handleMouseMove = t34;
914
- let t35;
915
- if ($[66] !== dropdownElement || $[67] !== handleActiveItem || $[68] !== syncSubmenuDisclosure) {
916
- t35 = (event_3) => {
982
+ $[70] = trackSafeArea;
983
+ $[71] = t36;
984
+ } else t36 = $[71];
985
+ const handleMouseMove = t36;
986
+ let t37;
987
+ if ($[72] !== dropdownElement || $[73] !== handleActiveItem || $[74] !== syncSubmenuDisclosure) {
988
+ t37 = (event_3) => {
917
989
  if (!hasItemsRef.current) return;
918
990
  if (currentInputMethodRef.current !== "mouse") return;
919
991
  if (!dropdownElement) return;
@@ -932,15 +1004,15 @@ function RootDropdown(t0) {
932
1004
  });
933
1005
  syncSubmenuDisclosure();
934
1006
  };
935
- $[66] = dropdownElement;
936
- $[67] = handleActiveItem;
937
- $[68] = syncSubmenuDisclosure;
938
- $[69] = t35;
939
- } else t35 = $[69];
940
- const handleMouseOver = t35;
941
- let t36;
942
- if ($[70] !== dropdownElement || $[71] !== syncSubmenuDisclosure) {
943
- t36 = (event_4) => {
1007
+ $[72] = dropdownElement;
1008
+ $[73] = handleActiveItem;
1009
+ $[74] = syncSubmenuDisclosure;
1010
+ $[75] = t37;
1011
+ } else t37 = $[75];
1012
+ const handleMouseOver = t37;
1013
+ let t38;
1014
+ if ($[76] !== dropdownElement || $[77] !== syncSubmenuDisclosure) {
1015
+ t38 = (event_4) => {
944
1016
  if (!hasItemsRef.current) return;
945
1017
  const relatedTarget = event_4.relatedTarget;
946
1018
  if (!dropdownElement?.contains(relatedTarget)) {
@@ -956,14 +1028,14 @@ function RootDropdown(t0) {
956
1028
  delete activeItem.dataset.uktActive;
957
1029
  syncSubmenuDisclosure();
958
1030
  };
959
- $[70] = dropdownElement;
960
- $[71] = syncSubmenuDisclosure;
961
- $[72] = t36;
962
- } else t36 = $[72];
963
- const handleMouseOut = t36;
964
- let t37;
965
- if ($[73] !== onMouseDown) {
966
- t37 = (event_5) => {
1031
+ $[76] = dropdownElement;
1032
+ $[77] = syncSubmenuDisclosure;
1033
+ $[78] = t38;
1034
+ } else t38 = $[78];
1035
+ const handleMouseOut = t38;
1036
+ let t39;
1037
+ if ($[79] !== onMouseDown) {
1038
+ t39 = (event_5) => {
967
1039
  if (onMouseDown) onMouseDown(event_5);
968
1040
  if (isOpenRef.current) return;
969
1041
  setIsOpen(true);
@@ -977,13 +1049,13 @@ function RootDropdown(t0) {
977
1049
  isOpeningTimerRef.current = null;
978
1050
  }, 1e3);
979
1051
  };
980
- $[73] = onMouseDown;
981
- $[74] = t37;
982
- } else t37 = $[74];
983
- const handleMouseDown = t37;
984
- let t38;
985
- if ($[75] !== closeDropdown || $[76] !== dropdownElement || $[77] !== handleActiveItem || $[78] !== handleSubmitItem || $[79] !== onMouseUp) {
986
- t38 = (event_6) => {
1052
+ $[79] = onMouseDown;
1053
+ $[80] = t39;
1054
+ } else t39 = $[80];
1055
+ const handleMouseDown = t39;
1056
+ let t40;
1057
+ if ($[81] !== closeDropdown || $[82] !== dropdownElement || $[83] !== handleActiveItem || $[84] !== handleSubmitItem || $[85] !== onMouseUp) {
1058
+ t40 = (event_6) => {
987
1059
  if (onMouseUp) onMouseUp(event_6);
988
1060
  if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
989
1061
  const eventTarget_1 = event_6.target;
@@ -1007,17 +1079,17 @@ function RootDropdown(t0) {
1007
1079
  }
1008
1080
  handleSubmitItem(event_6);
1009
1081
  };
1010
- $[75] = closeDropdown;
1011
- $[76] = dropdownElement;
1012
- $[77] = handleActiveItem;
1013
- $[78] = handleSubmitItem;
1014
- $[79] = onMouseUp;
1015
- $[80] = t38;
1016
- } else t38 = $[80];
1017
- const handleMouseUp = t38;
1018
- let t39;
1019
- if ($[81] !== closeDropdown || $[82] !== dropdownElement || $[83] !== focusTrigger || $[84] !== handleActiveItem || $[85] !== handleSubmitItem || $[86] !== menubar || $[87] !== syncSubmenuDisclosure) {
1020
- t39 = (event_7) => {
1082
+ $[81] = closeDropdown;
1083
+ $[82] = dropdownElement;
1084
+ $[83] = handleActiveItem;
1085
+ $[84] = handleSubmitItem;
1086
+ $[85] = onMouseUp;
1087
+ $[86] = t40;
1088
+ } else t40 = $[86];
1089
+ const handleMouseUp = t40;
1090
+ let t41;
1091
+ if ($[87] !== closeDropdown || $[88] !== dropdownElement || $[89] !== focusTrigger || $[90] !== handleActiveItem || $[91] !== handleSubmitItem || $[92] !== menubar || $[93] !== syncSubmenuDisclosure) {
1092
+ t41 = (event_7) => {
1021
1093
  const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
1022
1094
  const eventTarget_2 = event_7.target;
1023
1095
  if (!dropdownElement) return;
@@ -1111,12 +1183,12 @@ function RootDropdown(t0) {
1111
1183
  if (!isTargetUsingKeyEvents) {
1112
1184
  if (key_0 === "ArrowRight") {
1113
1185
  const activeElement_0 = getActiveItemElement(dropdownElement);
1114
- const submenu_2 = activeElement_0 ? getSubmenuOfItem(activeElement_0) : null;
1115
- if (activeElement_0 && submenu_2) {
1186
+ const submenu_3 = activeElement_0 ? getSubmenuOfItem(activeElement_0) : null;
1187
+ if (activeElement_0 && submenu_3) {
1116
1188
  onEventHandled();
1117
1189
  clearDisclosureTimer();
1118
1190
  expandItem(activeElement_0, handleToggleSubmenu);
1119
- const firstItem_0 = getItemElements(dropdownElement, submenu_2)?.[0];
1191
+ const firstItem_0 = getItemElements(dropdownElement, submenu_3)?.[0];
1120
1192
  if (firstItem_0) setActiveItem({
1121
1193
  dropdownElement,
1122
1194
  element: firstItem_0,
@@ -1150,29 +1222,29 @@ function RootDropdown(t0) {
1150
1222
  }
1151
1223
  }
1152
1224
  };
1153
- $[81] = closeDropdown;
1154
- $[82] = dropdownElement;
1155
- $[83] = focusTrigger;
1156
- $[84] = handleActiveItem;
1157
- $[85] = handleSubmitItem;
1158
- $[86] = menubar;
1159
- $[87] = syncSubmenuDisclosure;
1160
- $[88] = t39;
1161
- } else t39 = $[88];
1162
- const handleKeyDown = t39;
1163
- let t40;
1164
- if ($[89] !== handleKeyDown) {
1165
- t40 = {
1225
+ $[87] = closeDropdown;
1226
+ $[88] = dropdownElement;
1227
+ $[89] = focusTrigger;
1228
+ $[90] = handleActiveItem;
1229
+ $[91] = handleSubmitItem;
1230
+ $[92] = menubar;
1231
+ $[93] = syncSubmenuDisclosure;
1232
+ $[94] = t41;
1233
+ } else t41 = $[94];
1234
+ const handleKeyDown = t41;
1235
+ let t42;
1236
+ if ($[95] !== handleKeyDown) {
1237
+ t42 = {
1166
1238
  ignoreUsedKeyboardEvents: false,
1167
1239
  onKeyDown: handleKeyDown
1168
1240
  };
1169
- $[89] = handleKeyDown;
1170
- $[90] = t40;
1171
- } else t40 = $[90];
1172
- useKeyboardEvents(t40);
1173
- let t41;
1174
- if ($[91] !== closeDropdown || $[92] !== handleActiveItem || $[93] !== isOpenOnMount) {
1175
- t41 = (ref) => {
1241
+ $[95] = handleKeyDown;
1242
+ $[96] = t42;
1243
+ } else t42 = $[96];
1244
+ useKeyboardEvents(t42);
1245
+ let t43;
1246
+ if ($[97] !== closeDropdown || $[98] !== handleActiveItem || $[99] !== isOpenOnMount) {
1247
+ t43 = (ref) => {
1176
1248
  setDropdownElement(ref);
1177
1249
  if (!ref) return;
1178
1250
  const { ownerDocument } = ref;
@@ -1182,13 +1254,13 @@ function RootDropdown(t0) {
1182
1254
  else inputElement = ref.firstElementChild.querySelector(TEXT_INPUT_SELECTOR);
1183
1255
  inputElementRef.current = inputElement;
1184
1256
  }
1185
- const handleGlobalMouseDown = (t42) => {
1186
- const { target: target_1 } = t42;
1257
+ const handleGlobalMouseDown = (t44) => {
1258
+ const { target: target_1 } = t44;
1187
1259
  const eventTarget_3 = target_1;
1188
1260
  if (!ref.contains(eventTarget_3)) closeDropdown();
1189
1261
  };
1190
- const handleGlobalMouseUp = (t43) => {
1191
- const { target: target_2 } = t43;
1262
+ const handleGlobalMouseUp = (t45) => {
1263
+ const { target: target_2 } = t45;
1192
1264
  if (!isOpenRef.current || closingTimerRef.current != null) return;
1193
1265
  if (isOpeningRef.current) {
1194
1266
  setIsOpening(false);
@@ -1201,8 +1273,8 @@ function RootDropdown(t0) {
1201
1273
  const eventTarget_4 = target_2;
1202
1274
  if (!ref.contains(eventTarget_4)) closeDropdown();
1203
1275
  };
1204
- const handleGlobalFocusIn = (t44) => {
1205
- const { target: target_3 } = t44;
1276
+ const handleGlobalFocusIn = (t46) => {
1277
+ const { target: target_3 } = t46;
1206
1278
  if (!isOpenRef.current) return;
1207
1279
  const eventTarget_5 = target_3;
1208
1280
  if (ref.contains(eventTarget_5) || eventTarget_5.contains(ref)) return;
@@ -1244,52 +1316,78 @@ function RootDropdown(t0) {
1244
1316
  if (inputElement) inputElement.removeEventListener("input", handleInput);
1245
1317
  };
1246
1318
  };
1247
- $[91] = closeDropdown;
1248
- $[92] = handleActiveItem;
1249
- $[93] = isOpenOnMount;
1250
- $[94] = t41;
1251
- } else t41 = $[94];
1252
- const handleRef = t41;
1253
- const handleBodyRef = _temp;
1319
+ $[97] = closeDropdown;
1320
+ $[98] = handleActiveItem;
1321
+ $[99] = isOpenOnMount;
1322
+ $[100] = t43;
1323
+ } else t43 = $[100];
1324
+ const handleRef = t43;
1325
+ let t44;
1326
+ if ($[101] !== dropdownElement || $[102] !== popupRole || $[103] !== valueIdentity) {
1327
+ t44 = (ref_0) => {
1328
+ if (!ref_0) return;
1329
+ if (annotatedBodiesRef.current.has(ref_0)) return;
1330
+ annotatedBodiesRef.current.add(ref_0);
1331
+ consumerOwnsARIASelectedRef.current = ref_0.querySelector("[aria-selected]") != null;
1332
+ annotateParentItems(ref_0);
1333
+ if (popupRole !== "dialog") annotateItemRoles(ref_0, popupRole);
1334
+ ref_0.showPopover();
1335
+ if (valueIdentity != null && dropdownElement) {
1336
+ const selectedItem = getItemElements(dropdownElement)?.find((item_2) => item_2.dataset.uktValue === valueIdentity);
1337
+ if (selectedItem) {
1338
+ if (popupRole === "listbox" && !consumerOwnsARIASelectedRef.current) selectedItem.setAttribute("aria-selected", "true");
1339
+ setActiveItem({
1340
+ dropdownElement,
1341
+ element: selectedItem
1342
+ });
1343
+ }
1344
+ }
1345
+ };
1346
+ $[101] = dropdownElement;
1347
+ $[102] = popupRole;
1348
+ $[103] = valueIdentity;
1349
+ $[104] = t44;
1350
+ } else t44 = $[104];
1351
+ const handleBodyRef = t44;
1254
1352
  if (!isValidElement(trigger)) if (isSearchable) {
1255
- const t42 = value ?? "";
1256
- let t43;
1257
- if ($[95] === Symbol.for("react.memo_cache_sentinel")) {
1258
- t43 = () => setIsOpen(true);
1259
- $[95] = t43;
1260
- } else t43 = $[95];
1261
- let t44;
1262
- if ($[96] !== bodyId || $[97] !== disabled || $[98] !== isOpen || $[99] !== name || $[100] !== placeholder || $[101] !== popupRole || $[102] !== t42 || $[103] !== tabIndex) {
1263
- t44 = /* @__PURE__ */ jsx("input", {
1353
+ const t45 = valueLabel ?? "";
1354
+ let t46;
1355
+ if ($[105] === Symbol.for("react.memo_cache_sentinel")) {
1356
+ t46 = () => setIsOpen(true);
1357
+ $[105] = t46;
1358
+ } else t46 = $[105];
1359
+ let t47;
1360
+ if ($[106] !== bodyId || $[107] !== disabled || $[108] !== isOpen || $[109] !== name || $[110] !== placeholder || $[111] !== popupRole || $[112] !== t45 || $[113] !== tabIndex) {
1361
+ t47 = /* @__PURE__ */ jsx("input", {
1264
1362
  "aria-controls": bodyId,
1265
1363
  "aria-expanded": isOpen,
1266
1364
  "aria-haspopup": popupRole,
1267
1365
  autoComplete: "off",
1268
1366
  className: "uktdropdown-trigger",
1269
- defaultValue: t42,
1367
+ defaultValue: t45,
1270
1368
  disabled,
1271
1369
  name,
1272
- onFocus: t43,
1370
+ onFocus: t46,
1273
1371
  placeholder,
1274
1372
  ref: inputElementRef,
1275
1373
  tabIndex,
1276
1374
  type: "text"
1277
1375
  });
1278
- $[96] = bodyId;
1279
- $[97] = disabled;
1280
- $[98] = isOpen;
1281
- $[99] = name;
1282
- $[100] = placeholder;
1283
- $[101] = popupRole;
1284
- $[102] = t42;
1285
- $[103] = tabIndex;
1286
- $[104] = t44;
1287
- } else t44 = $[104];
1288
- trigger = t44;
1376
+ $[106] = bodyId;
1377
+ $[107] = disabled;
1378
+ $[108] = isOpen;
1379
+ $[109] = name;
1380
+ $[110] = placeholder;
1381
+ $[111] = popupRole;
1382
+ $[112] = t45;
1383
+ $[113] = tabIndex;
1384
+ $[114] = t47;
1385
+ } else t47 = $[114];
1386
+ trigger = t47;
1289
1387
  } else {
1290
- let t42;
1291
- if ($[105] !== bodyId || $[106] !== isOpen || $[107] !== popupRole || $[108] !== trigger) {
1292
- t42 = /* @__PURE__ */ jsx("button", {
1388
+ let t45;
1389
+ if ($[115] !== bodyId || $[116] !== isOpen || $[117] !== popupRole || $[118] !== trigger) {
1390
+ t45 = /* @__PURE__ */ jsx("button", {
1293
1391
  "aria-controls": bodyId,
1294
1392
  "aria-expanded": isOpen,
1295
1393
  "aria-haspopup": popupRole,
@@ -1298,82 +1396,82 @@ function RootDropdown(t0) {
1298
1396
  type: "button",
1299
1397
  children: trigger
1300
1398
  });
1301
- $[105] = bodyId;
1302
- $[106] = isOpen;
1303
- $[107] = popupRole;
1304
- $[108] = trigger;
1305
- $[109] = t42;
1306
- } else t42 = $[109];
1307
- trigger = t42;
1399
+ $[115] = bodyId;
1400
+ $[116] = isOpen;
1401
+ $[117] = popupRole;
1402
+ $[118] = trigger;
1403
+ $[119] = t45;
1404
+ } else t45 = $[119];
1405
+ trigger = t45;
1308
1406
  }
1309
1407
  else {
1310
1408
  const triggerProps = trigger.props;
1311
- const t42 = trigger;
1312
- const t43 = triggerProps["aria-controls"] ?? bodyId;
1313
- const t44 = triggerProps["aria-expanded"] ?? isOpen;
1314
- const t45 = triggerProps["aria-haspopup"] ?? popupRole;
1315
- let t46;
1316
- if ($[110] !== t42 || $[111] !== t43 || $[112] !== t44 || $[113] !== t45) {
1317
- t46 = cloneElement(t42, {
1318
- "aria-controls": t43,
1319
- "aria-expanded": t44,
1320
- "aria-haspopup": t45
1409
+ const t45 = trigger;
1410
+ const t46 = triggerProps["aria-controls"] ?? bodyId;
1411
+ const t47 = triggerProps["aria-expanded"] ?? isOpen;
1412
+ const t48 = triggerProps["aria-haspopup"] ?? popupRole;
1413
+ let t49;
1414
+ if ($[120] !== t45 || $[121] !== t46 || $[122] !== t47 || $[123] !== t48) {
1415
+ t49 = cloneElement(t45, {
1416
+ "aria-controls": t46,
1417
+ "aria-expanded": t47,
1418
+ "aria-haspopup": t48
1321
1419
  });
1322
- $[110] = t42;
1323
- $[111] = t43;
1324
- $[112] = t44;
1325
- $[113] = t45;
1326
- $[114] = t46;
1327
- } else t46 = $[114];
1328
- trigger = t46;
1420
+ $[120] = t45;
1421
+ $[121] = t46;
1422
+ $[122] = t47;
1423
+ $[123] = t48;
1424
+ $[124] = t49;
1425
+ } else t49 = $[124];
1426
+ trigger = t49;
1329
1427
  }
1330
1428
  if (label != null) {
1331
- let t42;
1332
- if ($[115] !== label) {
1333
- t42 = /* @__PURE__ */ jsx("div", {
1429
+ let t45;
1430
+ if ($[125] !== label) {
1431
+ t45 = /* @__PURE__ */ jsx("div", {
1334
1432
  className: "uktdropdown-label-text",
1335
1433
  children: label
1336
1434
  });
1337
- $[115] = label;
1338
- $[116] = t42;
1339
- } else t42 = $[116];
1340
- let t43;
1341
- if ($[117] !== t42 || $[118] !== trigger) {
1342
- t43 = /* @__PURE__ */ jsxs("label", {
1435
+ $[125] = label;
1436
+ $[126] = t45;
1437
+ } else t45 = $[126];
1438
+ let t46;
1439
+ if ($[127] !== t45 || $[128] !== trigger) {
1440
+ t46 = /* @__PURE__ */ jsxs("label", {
1343
1441
  className: "uktdropdown-label",
1344
- children: [t42, trigger]
1442
+ children: [t45, trigger]
1345
1443
  });
1346
- $[117] = t42;
1347
- $[118] = trigger;
1348
- $[119] = t43;
1349
- } else t43 = $[119];
1350
- trigger = t43;
1444
+ $[127] = t45;
1445
+ $[128] = trigger;
1446
+ $[129] = t46;
1447
+ } else t46 = $[129];
1448
+ trigger = t46;
1351
1449
  }
1352
- let t42;
1353
- if ($[120] === Symbol.for("react.memo_cache_sentinel")) {
1354
- t42 = /* @__PURE__ */ jsx("style", {
1450
+ let t45;
1451
+ if ($[130] === Symbol.for("react.memo_cache_sentinel")) {
1452
+ t45 = /* @__PURE__ */ jsx("style", {
1355
1453
  href: "@acusti/dropdown/Dropdown",
1356
1454
  precedence: "medium",
1357
1455
  children: Dropdown_default
1358
1456
  });
1359
- $[120] = t42;
1360
- } else t42 = $[120];
1361
- let t43;
1362
- if ($[121] !== className || $[122] !== disabled || $[123] !== isOpen || $[124] !== isSearchable) {
1363
- t43 = clsx("uktdropdown", className, {
1457
+ $[130] = t45;
1458
+ } else t45 = $[130];
1459
+ let t46;
1460
+ if ($[131] !== className || $[132] !== disabled || $[133] !== isOpen || $[134] !== isSearchable) {
1461
+ t46 = clsx("uktdropdown", className, {
1364
1462
  disabled,
1365
1463
  "is-open": isOpen,
1366
1464
  "is-searchable": isSearchable
1367
1465
  });
1368
- $[121] = className;
1369
- $[122] = disabled;
1370
- $[123] = isOpen;
1371
- $[124] = isSearchable;
1372
- $[125] = t43;
1373
- } else t43 = $[125];
1374
- let t44;
1375
- if ($[126] !== bodyId || $[127] !== children || $[128] !== childrenCount || $[129] !== hasItems || $[130] !== isOpen || $[131] !== popupRole) {
1376
- t44 = isOpen ? /* @__PURE__ */ jsx("div", {
1466
+ $[131] = className;
1467
+ $[132] = disabled;
1468
+ $[133] = isOpen;
1469
+ $[134] = isSearchable;
1470
+ $[135] = t46;
1471
+ } else t46 = $[135];
1472
+ let t47;
1473
+ if ($[136] !== body || $[137] !== bodyId || $[138] !== handleBodyRef || $[139] !== hasItems || $[140] !== isOpen || $[141] !== popupRole) {
1474
+ t47 = isOpen ? /* @__PURE__ */ jsx("div", {
1377
1475
  className: clsx("uktdropdown-body", { "has-items": hasItems }),
1378
1476
  id: bodyId,
1379
1477
  popover: "manual",
@@ -1383,22 +1481,22 @@ function RootDropdown(t0) {
1383
1481
  className: "uktdropdown-content",
1384
1482
  children: /* @__PURE__ */ jsx(DropdownContext.Provider, {
1385
1483
  value: hasItems ? dropdownContextValue : null,
1386
- children: childrenCount > 1 ? children[1] : children
1484
+ children: body
1387
1485
  })
1388
1486
  })
1389
1487
  }) : null;
1390
- $[126] = bodyId;
1391
- $[127] = children;
1392
- $[128] = childrenCount;
1393
- $[129] = hasItems;
1394
- $[130] = isOpen;
1395
- $[131] = popupRole;
1396
- $[132] = t44;
1397
- } else t44 = $[132];
1398
- let t45;
1399
- if ($[133] !== handleDropdownMouseEnter || $[134] !== handleDropdownMouseLeave || $[135] !== handleMouseDown || $[136] !== handleMouseMove || $[137] !== handleMouseOut || $[138] !== handleMouseOver || $[139] !== handleMouseUp || $[140] !== handleRef || $[141] !== onClick || $[142] !== styleFromProps || $[143] !== t43 || $[144] !== t44 || $[145] !== trigger) {
1400
- t45 = /* @__PURE__ */ jsxs(Fragment, { children: [t42, /* @__PURE__ */ jsxs("div", {
1401
- className: t43,
1488
+ $[136] = body;
1489
+ $[137] = bodyId;
1490
+ $[138] = handleBodyRef;
1491
+ $[139] = hasItems;
1492
+ $[140] = isOpen;
1493
+ $[141] = popupRole;
1494
+ $[142] = t47;
1495
+ } else t47 = $[142];
1496
+ let t48;
1497
+ if ($[143] !== handleDropdownMouseEnter || $[144] !== handleDropdownMouseLeave || $[145] !== handleMouseDown || $[146] !== handleMouseMove || $[147] !== handleMouseOut || $[148] !== handleMouseOver || $[149] !== handleMouseUp || $[150] !== handleRef || $[151] !== onClick || $[152] !== styleFromProps || $[153] !== t46 || $[154] !== t47 || $[155] !== trigger) {
1498
+ t48 = /* @__PURE__ */ jsxs(Fragment, { children: [t45, /* @__PURE__ */ jsxs("div", {
1499
+ className: t46,
1402
1500
  onClick,
1403
1501
  onMouseDown: handleMouseDown,
1404
1502
  onMouseEnter: handleDropdownMouseEnter,
@@ -1409,29 +1507,24 @@ function RootDropdown(t0) {
1409
1507
  onMouseUp: handleMouseUp,
1410
1508
  ref: handleRef,
1411
1509
  style: styleFromProps,
1412
- children: [trigger, t44]
1510
+ children: [trigger, t47]
1413
1511
  })] });
1414
- $[133] = handleDropdownMouseEnter;
1415
- $[134] = handleDropdownMouseLeave;
1416
- $[135] = handleMouseDown;
1417
- $[136] = handleMouseMove;
1418
- $[137] = handleMouseOut;
1419
- $[138] = handleMouseOver;
1420
- $[139] = handleMouseUp;
1421
- $[140] = handleRef;
1422
- $[141] = onClick;
1423
- $[142] = styleFromProps;
1424
- $[143] = t43;
1425
- $[144] = t44;
1426
- $[145] = trigger;
1427
- $[146] = t45;
1428
- } else t45 = $[146];
1429
- return t45;
1430
- }
1431
- function _temp(ref_0) {
1432
- if (!ref_0) return;
1433
- annotateParentItems(ref_0);
1434
- ref_0.showPopover();
1512
+ $[143] = handleDropdownMouseEnter;
1513
+ $[144] = handleDropdownMouseLeave;
1514
+ $[145] = handleMouseDown;
1515
+ $[146] = handleMouseMove;
1516
+ $[147] = handleMouseOut;
1517
+ $[148] = handleMouseOver;
1518
+ $[149] = handleMouseUp;
1519
+ $[150] = handleRef;
1520
+ $[151] = onClick;
1521
+ $[152] = styleFromProps;
1522
+ $[153] = t46;
1523
+ $[154] = t47;
1524
+ $[155] = trigger;
1525
+ $[156] = t48;
1526
+ } else t48 = $[156];
1527
+ return t48;
1435
1528
  }
1436
1529
  var INERT_SUBMENU_PROPS = [
1437
1530
  "allowCreate",
@@ -1505,8 +1598,12 @@ function SubmenuDropdown(props) {
1505
1598
  }
1506
1599
  let t3;
1507
1600
  if ($[9] !== body) {
1508
- t3 = isValidElement(body) ? cloneElement(body, { "data-ukt-submenu": "" }) : /* @__PURE__ */ jsx("div", {
1601
+ t3 = isValidElement(body) ? cloneElement(body, {
1509
1602
  "data-ukt-submenu": "",
1603
+ popover: "manual"
1604
+ }) : /* @__PURE__ */ jsx("div", {
1605
+ "data-ukt-submenu": "",
1606
+ popover: "manual",
1510
1607
  children: body
1511
1608
  });
1512
1609
  $[9] = body;