@acusti/dropdown 1.0.0-beta.0 → 1.0.0-beta.2

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 +152 -20
  2. package/dist/Dropdown.d.ts +10 -0
  3. package/dist/Dropdown.js +683 -518
  4. package/dist/Dropdown.js.map +1 -1
  5. package/dist/context.d.ts +3 -0
  6. package/dist/helpers.d.ts +5 -0
  7. package/package.json +2 -2
package/dist/Dropdown.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { c } from "react/compiler-runtime";
2
- import useKeyboardEvents, { isEventTargetUsingKeyEvent } from "@acusti/use-keyboard-events";
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, useRef, useState } from "react";
4
+ import { Children, Fragment, cloneElement, createContext, isValidElement, useContext, useEffect, 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,12 +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, CanvasText 6%, transparent);--uktdd-body-box-shadow:0 8px 18px #00000040;--uktdd-body-border-color:color-mix(in oklab, CanvasText 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-bg-color-path:color-mix(in oklab, CanvasText 12%, Canvas);--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)}.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;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-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)}.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}";
13
13
  //#endregion
14
14
  //#region src/helpers.ts
15
15
  var ITEM_SELECTOR = "[data-ukt-item], [data-ukt-value]";
16
16
  var SUBMENU_SELECTOR = "[data-ukt-submenu]";
17
17
  var DISABLED_ITEM_SELECTOR = "[aria-disabled=\"true\"]";
18
+ var FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
18
19
  var getBodyElement = (dropdownElement) => dropdownElement?.querySelector(".uktdropdown-body") ?? null;
19
20
  var getLevelRoot = (element) => element.closest(SUBMENU_SELECTOR);
20
21
  var getSubmenuOfItem = (item) => {
@@ -115,6 +116,51 @@ var getDeepestExpandedItem = (dropdownElement) => {
115
116
  return expanded.length ? expanded[expanded.length - 1] : null;
116
117
  };
117
118
  var isItemExpanded = (item) => item.getAttribute("aria-expanded") === "true";
119
+ var getTriggerElement = (dropdownElement) => {
120
+ const firstChild = dropdownElement?.firstElementChild;
121
+ if (!firstChild) return null;
122
+ return firstChild.matches("a[href], button, input, select, textarea, [tabindex]") ? firstChild : firstChild.querySelector(FOCUSABLE_SELECTOR);
123
+ };
124
+ var ensureItemId = (dropdownElement, item) => {
125
+ const generatedId = item.dataset.uktGeneratedId;
126
+ if (item.id && item.id !== generatedId) return item.id;
127
+ const indexes = [];
128
+ let current = item;
129
+ while (current) {
130
+ const levelRoot = getLevelRoot(current);
131
+ const itemElements = getItemElements(dropdownElement, levelRoot) ?? [];
132
+ indexes.unshift(itemElements.indexOf(current));
133
+ if (!levelRoot) break;
134
+ current = getParentItem(levelRoot);
135
+ }
136
+ const id = `${getBodyElement(dropdownElement)?.id ?? "uktdd"}-${indexes.join("-")}`;
137
+ const existing = item.ownerDocument.getElementById(id);
138
+ if (existing && existing !== item && existing.dataset.uktGeneratedId === id) {
139
+ existing.removeAttribute("id");
140
+ delete existing.dataset.uktGeneratedId;
141
+ }
142
+ item.id = id;
143
+ item.dataset.uktGeneratedId = id;
144
+ return id;
145
+ };
146
+ var syncActiveDescendant = (dropdownElement) => {
147
+ const trigger = getTriggerElement(dropdownElement);
148
+ if (!trigger) return;
149
+ const activeItem = getActiveItemElement(dropdownElement);
150
+ if (!activeItem) {
151
+ trigger.removeAttribute("aria-activedescendant");
152
+ return;
153
+ }
154
+ trigger.setAttribute("aria-activedescendant", ensureItemId(dropdownElement, activeItem));
155
+ };
156
+ var clearActiveItems = (dropdownElement, scopes) => {
157
+ for (const scope of Array.isArray(scopes) ? scopes : [scopes]) {
158
+ delete scope.dataset.uktActive;
159
+ for (const active of Array.from(scope.querySelectorAll("[data-ukt-active]"))) delete active.dataset.uktActive;
160
+ }
161
+ syncActiveDescendant(dropdownElement);
162
+ };
163
+ var getDropdownRoot = (element) => element.closest(".uktdropdown");
118
164
  var submenuIdCounter = 0;
119
165
  var ensureSubmenuARIA = (item, submenu) => {
120
166
  if (!submenu.hasAttribute("role")) submenu.setAttribute("role", "menu");
@@ -155,7 +201,7 @@ var collapseItem = (item, onToggleSubmenu) => {
155
201
  if (submenu) {
156
202
  const expandedDescendants = Array.from(submenu.querySelectorAll("[aria-expanded=\"true\"]")).filter((descendant) => descendant.matches(ITEM_SELECTOR));
157
203
  for (const descendant of expandedDescendants) collapseItem(descendant, onToggleSubmenu);
158
- for (const active of Array.from(submenu.querySelectorAll("[data-ukt-active]"))) delete active.dataset.uktActive;
204
+ clearActiveItems(getDropdownRoot(item), submenu);
159
205
  }
160
206
  item.setAttribute("aria-expanded", "false");
161
207
  onToggleSubmenu?.(item, false);
@@ -169,12 +215,6 @@ var collapseItemsOutsidePath = (dropdownElement, element, onToggleSubmenu) => {
169
215
  collapseItem(item, onToggleSubmenu);
170
216
  }
171
217
  };
172
- var clearItemElementsState = (itemElements) => {
173
- itemElements.forEach((itemElement) => {
174
- if (itemElement.hasAttribute("data-ukt-active")) delete itemElement.dataset.uktActive;
175
- for (const active of Array.from(itemElement.querySelectorAll("[data-ukt-active]"))) delete active.dataset.uktActive;
176
- });
177
- };
178
218
  var setActiveChain = (dropdownElement, element) => {
179
219
  const chain = /* @__PURE__ */ new Set([element]);
180
220
  let levelRoot = getLevelRoot(element);
@@ -186,6 +226,7 @@ var setActiveChain = (dropdownElement, element) => {
186
226
  }
187
227
  for (const active of getActiveItemElements(dropdownElement) ?? []) if (!chain.has(active)) delete active.dataset.uktActive;
188
228
  for (const item of chain) item.setAttribute("data-ukt-active", "");
229
+ syncActiveDescendant(dropdownElement);
189
230
  };
190
231
  var setActiveItem = ({ dropdownElement, element, event, index, indexAddend, isExactMatch, onActiveItem, text }) => {
191
232
  const currentDeepest = getActiveItemElement(dropdownElement);
@@ -204,14 +245,14 @@ var setActiveItem = ({ dropdownElement, element, event, index, indexAddend, isEx
204
245
  nextActiveIndex = Math.max(0, Math.min(nextActiveIndex, lastIndex));
205
246
  } else if (typeof text === "string") {
206
247
  if (!text) {
207
- clearItemElementsState(itemElements);
248
+ clearActiveItems(dropdownElement, itemElements);
208
249
  return null;
209
250
  }
210
251
  const itemTexts = itemElements.map(getItemLabel);
211
252
  if (isExactMatch) {
212
253
  const textToCompare = text.toLowerCase();
213
254
  nextActiveIndex = itemTexts.findIndex((itemText) => itemText.toLowerCase().startsWith(textToCompare));
214
- if (nextActiveIndex === -1) clearItemElementsState(itemElements);
255
+ if (nextActiveIndex === -1) clearActiveItems(dropdownElement, itemElements);
215
256
  } else {
216
257
  const bestMatch = getBestMatch({
217
258
  items: itemTexts,
@@ -268,8 +309,17 @@ var compareDocumentOrder = (a, b) => {
268
309
  return 0;
269
310
  };
270
311
  var NON_MENU_CONTROL_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
312
+ var findNextEnabledMember = (members, fromIndex, direction) => {
313
+ const { length } = members;
314
+ for (let step = 1; step < length; step++) {
315
+ const member = members[((fromIndex + direction * step) % length + length) % length];
316
+ if (!member.isDisabled()) return member;
317
+ }
318
+ return null;
319
+ };
320
+ var canHoldTabStop = (member) => !member.isDisabled() && member.isMenuPopup();
271
321
  function Menubar(t0) {
272
- const $ = c(15);
322
+ const $ = c(22);
273
323
  const { children, className, style } = t0;
274
324
  let t1;
275
325
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -277,6 +327,8 @@ function Menubar(t0) {
277
327
  $[0] = t1;
278
328
  } else t1 = $[0];
279
329
  const membersRef = useRef(t1);
330
+ const [tabbableElement, setTabbableElement] = useState(null);
331
+ const [reconcileCount, reconcile] = useReducer(_temp, 0);
280
332
  const engagedMemberRef = useRef(null);
281
333
  let t2;
282
334
  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
@@ -286,134 +338,174 @@ function Menubar(t0) {
286
338
  const getOrderedMembersRef = useRef(t2);
287
339
  const getOrderedMembers = getOrderedMembersRef.current;
288
340
  let t3;
289
- if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
290
- t3 = {
341
+ if ($[2] !== tabbableElement) {
342
+ t3 = () => {
343
+ const members = getOrderedMembersRef.current();
344
+ const owner = members.find((member) => member.element === tabbableElement);
345
+ if (owner && canHoldTabStop(owner)) return;
346
+ const nextOwner = members.find(canHoldTabStop);
347
+ setTabbableElement(nextOwner?.element ?? null);
348
+ };
349
+ $[2] = tabbableElement;
350
+ $[3] = t3;
351
+ } else t3 = $[3];
352
+ let t4;
353
+ if ($[4] !== reconcileCount || $[5] !== tabbableElement) {
354
+ t4 = [reconcileCount, tabbableElement];
355
+ $[4] = reconcileCount;
356
+ $[5] = tabbableElement;
357
+ $[6] = t4;
358
+ } else t4 = $[6];
359
+ useEffect(t3, t4);
360
+ let t5;
361
+ if ($[7] !== tabbableElement) {
362
+ t5 = {
291
363
  moveOpen(fromElement, direction) {
292
- const members = getOrderedMembersRef.current();
293
- if (members.length < 2) return;
294
- const index = members.findIndex((member) => member.element === fromElement);
364
+ const members_0 = getOrderedMembersRef.current();
365
+ if (members_0.length < 2) return;
366
+ const index = members_0.findIndex((member_0) => member_0.element === fromElement);
295
367
  if (index === -1) return;
296
- const nextIndex = (index + direction + members.length) % members.length;
297
- members[index].close();
298
- members[nextIndex].open();
299
- members[nextIndex].focusTrigger();
368
+ const next = findNextEnabledMember(members_0, index, direction);
369
+ if (!next) return;
370
+ members_0[index].close();
371
+ next.open();
372
+ next.focusTrigger();
300
373
  },
301
374
  notifyClosed(element) {
302
375
  if (engagedMemberRef.current === element) engagedMemberRef.current = null;
303
376
  },
304
377
  notifyOpened(element_0) {
305
378
  engagedMemberRef.current = element_0;
306
- for (const member_0 of membersRef.current) if (member_0.element !== element_0 && member_0.isOpen()) member_0.close();
379
+ for (const member_1 of membersRef.current) if (member_1.element !== element_0 && member_1.isOpen()) member_1.close();
307
380
  },
308
- registerMember(member_1) {
309
- membersRef.current.add(member_1);
381
+ registerMember(member_2) {
382
+ membersRef.current.add(member_2);
383
+ setTabbableElement((current) => current == null && canHoldTabStop(member_2) ? member_2.element : current);
310
384
  return () => {
311
- membersRef.current.delete(member_1);
385
+ membersRef.current.delete(member_2);
386
+ reconcile();
312
387
  };
313
- }
388
+ },
389
+ tabbableElement
314
390
  };
315
- $[2] = t3;
316
- } else t3 = $[2];
317
- const contextValue = t3;
318
- let t4;
319
- if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
320
- t4 = (event) => {
391
+ $[7] = tabbableElement;
392
+ $[8] = t5;
393
+ } else t5 = $[8];
394
+ const contextValue = t5;
395
+ let t6;
396
+ if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
397
+ t6 = (event) => {
321
398
  const { key } = event;
322
399
  if (key !== "ArrowLeft" && key !== "ArrowRight") return;
323
- const members_0 = getOrderedMembers();
324
- if (members_0.length < 2) return;
325
- if (members_0.some(_temp)) return;
400
+ const members_1 = getOrderedMembers();
401
+ if (members_1.length < 2) return;
402
+ if (members_1.some(_temp2)) return;
326
403
  const eventTarget = event.target;
327
- const index_0 = members_0.findIndex((member_3) => member_3.element.contains(eventTarget));
404
+ const index_0 = members_1.findIndex((member_4) => member_4.element.contains(eventTarget));
328
405
  if (index_0 === -1) return;
329
406
  event.preventDefault();
330
407
  event.stopPropagation();
331
- members_0[(index_0 + (key === "ArrowRight" ? 1 : -1) + members_0.length) % members_0.length].focusTrigger();
408
+ const next_0 = findNextEnabledMember(members_1, index_0, key === "ArrowRight" ? 1 : -1);
409
+ if (!next_0) return;
410
+ next_0.focusTrigger();
332
411
  };
333
- $[3] = t4;
334
- } else t4 = $[3];
335
- const handleKeyDown = t4;
336
- let t5;
337
- if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
338
- t5 = (eventTarget_0) => {
412
+ $[9] = t6;
413
+ } else t6 = $[9];
414
+ const handleKeyDown = t6;
415
+ let t7;
416
+ if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
417
+ t7 = (eventTarget_0) => {
339
418
  if (engagedMemberRef.current == null) return;
340
- const members_1 = getOrderedMembers();
341
- if (!members_1.some((m) => m.element === engagedMemberRef.current)) {
419
+ const members_2 = getOrderedMembers();
420
+ if (!members_2.some((m) => m.element === engagedMemberRef.current)) {
342
421
  engagedMemberRef.current = null;
343
422
  return;
344
423
  }
345
- const member_4 = members_1.find((m_0) => m_0.element.contains(eventTarget_0));
346
- if (member_4) {
347
- if (!member_4.isOpen()) member_4.open();
424
+ const member_5 = members_2.find((m_0) => m_0.element.contains(eventTarget_0));
425
+ if (member_5) {
426
+ if (member_5.isDisabled()) return;
427
+ if (!member_5.isOpen()) member_5.open();
348
428
  return;
349
429
  }
350
430
  if (!eventTarget_0.closest(NON_MENU_CONTROL_SELECTOR)) return;
351
- for (const openMember of members_1) if (openMember.isOpen()) openMember.close();
431
+ for (const openMember of members_2) if (openMember.isOpen()) openMember.close();
352
432
  };
353
- $[4] = t5;
354
- } else t5 = $[4];
355
- const switchToMemberAt = t5;
356
- let t6;
357
- if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
358
- t6 = (event_0) => {
359
- switchToMemberAt(event_0.target);
433
+ $[10] = t7;
434
+ } else t7 = $[10];
435
+ const switchToMemberAt = t7;
436
+ let t8;
437
+ if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
438
+ t8 = (event_0) => {
439
+ const eventTarget_1 = event_0.target;
440
+ const member_6 = getOrderedMembers().find((m_1) => m_1.element.contains(eventTarget_1));
441
+ if (member_6 && canHoldTabStop(member_6)) setTabbableElement(member_6.element);
442
+ switchToMemberAt(eventTarget_1);
360
443
  };
361
- $[5] = t6;
362
- } else t6 = $[5];
363
- const handleFocus = t6;
364
- let t7;
365
- if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
366
- t7 = (event_1) => {
444
+ $[11] = t8;
445
+ } else t8 = $[11];
446
+ const handleFocus = t8;
447
+ let t9;
448
+ if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
449
+ t9 = (event_1) => {
367
450
  switchToMemberAt(event_1.target);
368
451
  };
369
- $[6] = t7;
370
- } else t7 = $[6];
371
- const handleMouseOver = t7;
372
- let t8;
373
- if ($[7] !== className) {
374
- t8 = clsx("uktmenubar", className);
375
- $[7] = className;
376
- $[8] = t8;
377
- } else t8 = $[8];
378
- let t9;
379
- if ($[9] !== children) {
380
- t9 = /* @__PURE__ */ jsx(MenubarContext.Provider, {
452
+ $[12] = t9;
453
+ } else t9 = $[12];
454
+ const handleMouseOver = t9;
455
+ let t10;
456
+ if ($[13] !== className) {
457
+ t10 = clsx("uktmenubar", className);
458
+ $[13] = className;
459
+ $[14] = t10;
460
+ } else t10 = $[14];
461
+ let t11;
462
+ if ($[15] !== children || $[16] !== contextValue) {
463
+ t11 = /* @__PURE__ */ jsx(MenubarContext.Provider, {
381
464
  value: contextValue,
382
465
  children
383
466
  });
384
- $[9] = children;
385
- $[10] = t9;
386
- } else t9 = $[10];
387
- let t10;
388
- if ($[11] !== style || $[12] !== t8 || $[13] !== t9) {
389
- t10 = /* @__PURE__ */ jsx("div", {
390
- className: t8,
467
+ $[15] = children;
468
+ $[16] = contextValue;
469
+ $[17] = t11;
470
+ } else t11 = $[17];
471
+ let t12;
472
+ if ($[18] !== style || $[19] !== t10 || $[20] !== t11) {
473
+ t12 = /* @__PURE__ */ jsx("div", {
474
+ className: t10,
391
475
  onFocus: handleFocus,
392
476
  onKeyDown: handleKeyDown,
393
477
  onMouseOver: handleMouseOver,
394
478
  role: "menubar",
395
479
  style,
396
- children: t9
480
+ children: t11
397
481
  });
398
- $[11] = style;
399
- $[12] = t8;
400
- $[13] = t9;
401
- $[14] = t10;
402
- } else t10 = $[14];
403
- return t10;
482
+ $[18] = style;
483
+ $[19] = t10;
484
+ $[20] = t11;
485
+ $[21] = t12;
486
+ } else t12 = $[21];
487
+ return t12;
488
+ }
489
+ function _temp2(member_3) {
490
+ return member_3.isOpen();
404
491
  }
405
- function _temp(member_2) {
406
- return member_2.isOpen();
492
+ function _temp(count) {
493
+ return count + 1;
407
494
  }
408
495
  //#endregion
409
496
  //#region src/Dropdown.tsx
410
497
  var CHILDREN_ERROR = "@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.";
411
498
  var CLICKABLE_SELECTOR = "button, a[href], input[type=\"button\"], input[type=\"submit\"]";
412
- var FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
413
- var TEXT_INPUT_SELECTOR = "input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea";
499
+ var TEXT_INPUT_SELECTOR = `input${NON_TEXT_INPUT_TYPES.map((type) => `:not([type=${type}])`).join("")},textarea`;
414
500
  var SUBMENU_DISCLOSURE_DELAY = 200;
415
501
  var SAFE_AREA_TIMEOUT = 300;
416
502
  var HOVER_CLOSE_DELAY = 150;
503
+ var isTextInputElement = (element) => {
504
+ if (element.type === "textarea") return true;
505
+ if (element.type !== "input") return false;
506
+ const { type } = element.props;
507
+ return type == null || !NON_TEXT_INPUT_TYPES.includes(type);
508
+ };
417
509
  function Dropdown(props) {
418
510
  const $ = c(5);
419
511
  const parentDropdown = useContext(DropdownContext);
@@ -439,7 +531,7 @@ function Dropdown(props) {
439
531
  return t0;
440
532
  }
441
533
  function RootDropdown(t0) {
442
- const $ = c(158);
534
+ const $ = c(188);
443
535
  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;
444
536
  const allowEmpty = t1 === void 0 ? true : t1;
445
537
  const hasItems = t2 === void 0 ? true : t2;
@@ -467,8 +559,13 @@ function RootDropdown(t0) {
467
559
  const [isOpening, setIsOpening] = useState(!isOpenOnMount);
468
560
  const [dropdownElement, setDropdownElement] = useState(null);
469
561
  const bodyId = useId();
562
+ const triggerId = `${bodyId}-trigger`;
563
+ const labelId = `${bodyId}-label`;
470
564
  const popupRole = isSearchable ? "listbox" : hasItems ? "menu" : "dialog";
471
565
  const menubar = useContext(MenubarContext);
566
+ const isMenubarMember = menubar != null;
567
+ const isMenubarItem = isMenubarMember && popupRole === "menu";
568
+ const menubarTabIndex = !isMenubarItem ? void 0 : menubar.tabbableElement === dropdownElement ? 0 : -1;
472
569
  const inputElementRef = useRef(null);
473
570
  const consumerOwnsARIASelectedRef = useRef(false);
474
571
  let t5;
@@ -497,65 +594,51 @@ function RootDropdown(t0) {
497
594
  const safeAreaTimerRef = useRef(null);
498
595
  const wasInSafeAreaRef = useRef(false);
499
596
  const hoverCloseTimerRef = useRef(null);
500
- const allowCreateRef = useRef(allowCreate);
501
- const allowEmptyRef = useRef(allowEmpty);
502
- const hasItemsRef = useRef(hasItems);
503
597
  const isOpenRef = useRef(isOpen);
504
598
  const isOpeningRef = useRef(isOpening);
505
- const keepOpenOnSubmitRef = useRef(keepOpenOnSubmit);
506
599
  const onCloseRef = useRef(onClose);
507
600
  const onOpenRef = useRef(onOpen);
508
- const onSubmitItemRef = useRef(onSubmitItem);
509
- const valueRef = useRef(valueIdentity);
510
601
  let t7;
511
602
  let t8;
512
- if ($[7] !== allowCreate || $[8] !== allowEmpty || $[9] !== hasItems || $[10] !== isOpen || $[11] !== isOpening || $[12] !== keepOpenOnSubmit || $[13] !== onClose || $[14] !== onOpen || $[15] !== onSubmitItem || $[16] !== valueIdentity) {
603
+ if ($[7] !== isOpen || $[8] !== isOpening || $[9] !== onClose || $[10] !== onOpen) {
513
604
  t7 = () => {
514
- allowCreateRef.current = allowCreate;
515
- allowEmptyRef.current = allowEmpty;
516
- hasItemsRef.current = hasItems;
517
605
  isOpenRef.current = isOpen;
518
606
  isOpeningRef.current = isOpening;
519
- keepOpenOnSubmitRef.current = keepOpenOnSubmit;
520
607
  onCloseRef.current = onClose;
521
608
  onOpenRef.current = onOpen;
522
- onSubmitItemRef.current = onSubmitItem;
523
- valueRef.current = valueIdentity;
524
609
  };
525
610
  t8 = [
526
- allowCreate,
527
- allowEmpty,
528
- hasItems,
529
611
  isOpen,
530
612
  isOpening,
531
- keepOpenOnSubmit,
532
613
  onClose,
533
- onOpen,
534
- onSubmitItem,
535
- valueIdentity
614
+ onOpen
536
615
  ];
537
- $[7] = allowCreate;
538
- $[8] = allowEmpty;
539
- $[9] = hasItems;
540
- $[10] = isOpen;
541
- $[11] = isOpening;
542
- $[12] = keepOpenOnSubmit;
543
- $[13] = onClose;
544
- $[14] = onOpen;
545
- $[15] = onSubmitItem;
546
- $[16] = valueIdentity;
547
- $[17] = t7;
548
- $[18] = t8;
616
+ $[7] = isOpen;
617
+ $[8] = isOpening;
618
+ $[9] = onClose;
619
+ $[10] = onOpen;
620
+ $[11] = t7;
621
+ $[12] = t8;
549
622
  } else {
550
- t7 = $[17];
551
- t8 = $[18];
623
+ t7 = $[11];
624
+ t8 = $[12];
552
625
  }
553
626
  useEffect(t7, t8);
554
- const isMountedRef = useRef(false);
555
- let t10;
556
627
  let t9;
557
- if ($[19] !== isOpen) {
628
+ if ($[13] !== dropdownElement || $[14] !== isOpen) {
558
629
  t9 = () => {
630
+ if (isOpen) syncActiveDescendant(dropdownElement);
631
+ };
632
+ $[13] = dropdownElement;
633
+ $[14] = isOpen;
634
+ $[15] = t9;
635
+ } else t9 = $[15];
636
+ useLayoutEffect(t9);
637
+ const isMountedRef = useRef(false);
638
+ let t10;
639
+ let t11;
640
+ if ($[16] !== isOpen) {
641
+ t10 = () => {
559
642
  if (!isMountedRef.current) {
560
643
  isMountedRef.current = true;
561
644
  if (isOpenRef.current && onOpenRef.current) onOpenRef.current();
@@ -564,48 +647,48 @@ function RootDropdown(t0) {
564
647
  if (isOpen && onOpenRef.current) onOpenRef.current();
565
648
  else if (!isOpen && onCloseRef.current) onCloseRef.current();
566
649
  };
567
- t10 = [isOpen];
568
- $[19] = isOpen;
569
- $[20] = t10;
570
- $[21] = t9;
650
+ t11 = [isOpen];
651
+ $[16] = isOpen;
652
+ $[17] = t10;
653
+ $[18] = t11;
571
654
  } else {
572
- t10 = $[20];
573
- t9 = $[21];
655
+ t10 = $[17];
656
+ t11 = $[18];
574
657
  }
575
- useEffect(t9, t10);
576
- let t11;
577
- if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
578
- t11 = { registerSubmenu(registration) {
658
+ useEffect(t10, t11);
659
+ let t12;
660
+ if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
661
+ t12 = { registerSubmenu(registration) {
579
662
  submenuRegistrationsRef.current.add(registration);
580
663
  return () => {
581
664
  submenuRegistrationsRef.current.delete(registration);
582
665
  };
583
666
  } };
584
- $[22] = t11;
585
- } else t11 = $[22];
586
- const dropdownContextValue = t11;
587
- let t12;
588
- if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
589
- t12 = (key, payload) => {
667
+ $[19] = t12;
668
+ } else t12 = $[19];
669
+ const dropdownContextValue = t12;
670
+ let t13;
671
+ if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
672
+ t13 = (key, payload) => {
590
673
  if (!payload.element) return;
591
674
  for (const registration_0 of submenuRegistrationsRef.current) if (registration_0.element.contains(payload.element)) registration_0[key]?.(payload);
592
675
  };
593
- $[23] = t12;
594
- } else t12 = $[23];
595
- const dispatchToSubmenus = t12;
596
- let t13;
597
- if ($[24] !== onActiveItem) {
598
- t13 = (payload_0) => {
676
+ $[20] = t13;
677
+ } else t13 = $[20];
678
+ const dispatchToSubmenus = t13;
679
+ let t14;
680
+ if ($[21] !== onActiveItem) {
681
+ t14 = (payload_0) => {
599
682
  onActiveItem?.(payload_0);
600
683
  dispatchToSubmenus("onActiveItem", payload_0);
601
684
  };
602
- $[24] = onActiveItem;
603
- $[25] = t13;
604
- } else t13 = $[25];
605
- const handleActiveItem = t13;
606
- let t14;
607
- if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
608
- t14 = (item, isExpanded) => {
685
+ $[21] = onActiveItem;
686
+ $[22] = t14;
687
+ } else t14 = $[22];
688
+ const handleActiveItem = t14;
689
+ let t15;
690
+ if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
691
+ t15 = (item, isExpanded) => {
609
692
  const submenu = getSubmenuOfItem(item);
610
693
  if (submenu) {
611
694
  const isShown = submenu.matches(":popover-open");
@@ -614,36 +697,36 @@ function RootDropdown(t0) {
614
697
  }
615
698
  for (const registration_1 of submenuRegistrationsRef.current) if (registration_1.element === item) (isExpanded ? registration_1.onOpen : registration_1.onClose)?.();
616
699
  };
617
- $[26] = t14;
618
- } else t14 = $[26];
619
- const handleToggleSubmenu = t14;
620
- let t15;
621
- if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
622
- t15 = () => {
700
+ $[23] = t15;
701
+ } else t15 = $[23];
702
+ const handleToggleSubmenu = t15;
703
+ let t16;
704
+ if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
705
+ t16 = () => {
623
706
  if (disclosureTimerRef.current != null) {
624
707
  clearTimeout(disclosureTimerRef.current);
625
708
  disclosureTimerRef.current = null;
626
709
  }
627
710
  pendingDisclosureItemRef.current = null;
628
711
  };
629
- $[27] = t15;
630
- } else t15 = $[27];
631
- const clearDisclosureTimer = t15;
632
- let t16;
712
+ $[24] = t16;
713
+ } else t16 = $[24];
714
+ const clearDisclosureTimer = t16;
633
715
  let t17;
634
- if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
635
- t16 = () => clearDisclosureTimer;
636
- t17 = [];
637
- $[28] = t16;
638
- $[29] = t17;
716
+ let t18;
717
+ if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
718
+ t17 = () => clearDisclosureTimer;
719
+ t18 = [];
720
+ $[25] = t17;
721
+ $[26] = t18;
639
722
  } else {
640
- t16 = $[28];
641
- t17 = $[29];
723
+ t17 = $[25];
724
+ t18 = $[26];
642
725
  }
643
- useEffect(t16, t17);
644
- let t18;
645
- if ($[30] !== dropdownElement) {
646
- t18 = () => {
726
+ useEffect(t17, t18);
727
+ let t19;
728
+ if ($[27] !== dropdownElement) {
729
+ t19 = () => {
647
730
  if (!dropdownElement) return;
648
731
  const activeElement = getActiveItemElement(dropdownElement);
649
732
  collapseItemsOutsidePath(dropdownElement, activeElement, handleToggleSubmenu);
@@ -662,36 +745,36 @@ function RootDropdown(t0) {
662
745
  }
663
746
  clearDisclosureTimer();
664
747
  };
665
- $[30] = dropdownElement;
666
- $[31] = t18;
667
- } else t18 = $[31];
668
- const syncSubmenuDisclosure = t18;
669
- let t19;
670
- if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
671
- t19 = () => {
748
+ $[27] = dropdownElement;
749
+ $[28] = t19;
750
+ } else t19 = $[28];
751
+ const syncSubmenuDisclosure = t19;
752
+ let t20;
753
+ if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
754
+ t20 = () => {
672
755
  if (safeAreaTimerRef.current != null) {
673
756
  clearTimeout(safeAreaTimerRef.current);
674
757
  safeAreaTimerRef.current = null;
675
758
  }
676
759
  };
677
- $[32] = t19;
678
- } else t19 = $[32];
679
- const clearSafeAreaTimer = t19;
680
- let t20;
760
+ $[29] = t20;
761
+ } else t20 = $[29];
762
+ const clearSafeAreaTimer = t20;
681
763
  let t21;
682
- if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
683
- t20 = () => clearSafeAreaTimer;
684
- t21 = [];
685
- $[33] = t20;
686
- $[34] = t21;
764
+ let t22;
765
+ if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
766
+ t21 = () => clearSafeAreaTimer;
767
+ t22 = [];
768
+ $[30] = t21;
769
+ $[31] = t22;
687
770
  } else {
688
- t20 = $[33];
689
- t21 = $[34];
771
+ t21 = $[30];
772
+ t22 = $[31];
690
773
  }
691
- useEffect(t20, t21);
692
- let t22;
693
- if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
694
- t22 = (x, y) => {
774
+ useEffect(t21, t22);
775
+ let t23;
776
+ if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
777
+ t23 = (x, y) => {
695
778
  const safeArea = safeAreaRef.current;
696
779
  if (!safeArea || !isItemExpanded(safeArea.parent)) return false;
697
780
  const submenu_1 = getSubmenuOfItem(safeArea.parent);
@@ -710,12 +793,12 @@ function RootDropdown(t0) {
710
793
  y: submenuRect.bottom
711
794
  });
712
795
  };
713
- $[35] = t22;
714
- } else t22 = $[35];
715
- const isPointerInSafeArea = t22;
716
- let t23;
717
- if ($[36] !== dropdownElement || $[37] !== handleActiveItem || $[38] !== syncSubmenuDisclosure) {
718
- t23 = (targetElement) => {
796
+ $[32] = t23;
797
+ } else t23 = $[32];
798
+ const isPointerInSafeArea = t23;
799
+ let t24;
800
+ if ($[33] !== dropdownElement || $[34] !== handleActiveItem || $[35] !== syncSubmenuDisclosure) {
801
+ t24 = (targetElement) => {
719
802
  clearSafeAreaTimer();
720
803
  safeAreaRef.current = null;
721
804
  wasInSafeAreaRef.current = false;
@@ -732,16 +815,16 @@ function RootDropdown(t0) {
732
815
  });
733
816
  syncSubmenuDisclosure();
734
817
  };
735
- $[36] = dropdownElement;
736
- $[37] = handleActiveItem;
737
- $[38] = syncSubmenuDisclosure;
738
- $[39] = t23;
739
- } else t23 = $[39];
740
- const commitPointerTarget = t23;
741
- let t24;
742
- if ($[40] !== commitPointerTarget || $[41] !== dropdownElement) {
743
- t24 = (event_0) => {
744
- if (!dropdownElement || !isOpenRef.current || !hasItemsRef.current) return;
818
+ $[33] = dropdownElement;
819
+ $[34] = handleActiveItem;
820
+ $[35] = syncSubmenuDisclosure;
821
+ $[36] = t24;
822
+ } else t24 = $[36];
823
+ const commitPointerTarget = t24;
824
+ let t25;
825
+ if ($[37] !== commitPointerTarget || $[38] !== dropdownElement || $[39] !== hasItems) {
826
+ t25 = (event_0) => {
827
+ if (!dropdownElement || !isOpenRef.current || !hasItems) return;
745
828
  const pointer_0 = {
746
829
  x: event_0.clientX,
747
830
  y: event_0.clientY
@@ -773,37 +856,39 @@ function RootDropdown(t0) {
773
856
  safeAreaTimerRef.current = setTimeout(commitPointerTarget, SAFE_AREA_TIMEOUT);
774
857
  } else if (wasInSafeAreaRef.current) commitPointerTarget(target_0);
775
858
  };
776
- $[40] = commitPointerTarget;
777
- $[41] = dropdownElement;
778
- $[42] = t24;
779
- } else t24 = $[42];
780
- const trackSafeArea = t24;
781
- let t25;
782
- if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
783
- t25 = () => {
859
+ $[37] = commitPointerTarget;
860
+ $[38] = dropdownElement;
861
+ $[39] = hasItems;
862
+ $[40] = t25;
863
+ } else t25 = $[40];
864
+ const trackSafeArea = t25;
865
+ let t26;
866
+ if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
867
+ t26 = () => {
784
868
  if (hoverCloseTimerRef.current != null) {
785
869
  clearTimeout(hoverCloseTimerRef.current);
786
870
  hoverCloseTimerRef.current = null;
787
871
  }
788
872
  };
789
- $[43] = t25;
790
- } else t25 = $[43];
791
- const clearHoverCloseTimer = t25;
792
- let t26;
873
+ $[41] = t26;
874
+ } else t26 = $[41];
875
+ const clearHoverCloseTimer = t26;
793
876
  let t27;
794
- if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
795
- t26 = () => clearHoverCloseTimer;
796
- t27 = [];
797
- $[44] = t26;
798
- $[45] = t27;
877
+ let t28;
878
+ if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
879
+ t27 = () => clearHoverCloseTimer;
880
+ t28 = [];
881
+ $[42] = t27;
882
+ $[43] = t28;
799
883
  } else {
800
- t26 = $[44];
801
- t27 = $[45];
884
+ t27 = $[42];
885
+ t28 = $[43];
802
886
  }
803
- useEffect(t26, t27);
804
- let t28;
805
- if ($[46] !== dropdownElement || $[47] !== menubar) {
806
- t28 = (options) => {
887
+ useEffect(t27, t28);
888
+ let t29;
889
+ if ($[44] !== dropdownElement || $[45] !== menubar) {
890
+ t29 = (options) => {
891
+ getTriggerElement(dropdownElement)?.removeAttribute("aria-activedescendant");
807
892
  setIsOpen(false);
808
893
  setIsOpening(false);
809
894
  mouseDownPositionRef.current = null;
@@ -818,92 +903,98 @@ function RootDropdown(t0) {
818
903
  }
819
904
  if (menubar && dropdownElement && !options?.keepMenubarEngaged) menubar.notifyClosed(dropdownElement);
820
905
  };
821
- $[46] = dropdownElement;
822
- $[47] = menubar;
823
- $[48] = t28;
824
- } else t28 = $[48];
825
- const closeDropdown = t28;
826
- let t29;
827
- if ($[49] !== openOnHover) {
828
- t29 = () => {
906
+ $[44] = dropdownElement;
907
+ $[45] = menubar;
908
+ $[46] = t29;
909
+ } else t29 = $[46];
910
+ const closeDropdown = t29;
911
+ let t30;
912
+ if ($[47] !== disabled || $[48] !== openOnHover) {
913
+ t30 = () => {
829
914
  clearHoverCloseTimer();
830
- if (!openOnHover || isOpenRef.current) return;
915
+ if (disabled || !openOnHover || isOpenRef.current) return;
831
916
  setIsOpen(true);
832
917
  setIsOpening(false);
833
918
  };
834
- $[49] = openOnHover;
835
- $[50] = t29;
836
- } else t29 = $[50];
837
- const handleDropdownMouseEnter = t29;
838
- let t30;
839
- if ($[51] !== closeDropdown || $[52] !== openOnHover) {
840
- t30 = () => {
919
+ $[47] = disabled;
920
+ $[48] = openOnHover;
921
+ $[49] = t30;
922
+ } else t30 = $[49];
923
+ const handleDropdownMouseEnter = t30;
924
+ let t31;
925
+ if ($[50] !== closeDropdown || $[51] !== openOnHover) {
926
+ t31 = () => {
841
927
  if (!openOnHover || !isOpenRef.current || hoverCloseTimerRef.current != null) return;
842
928
  hoverCloseTimerRef.current = setTimeout(() => {
843
929
  hoverCloseTimerRef.current = null;
844
930
  closeDropdown();
845
931
  }, HOVER_CLOSE_DELAY);
846
932
  };
847
- $[51] = closeDropdown;
848
- $[52] = openOnHover;
849
- $[53] = t30;
850
- } else t30 = $[53];
851
- const handleDropdownMouseLeave = t30;
852
- let t31;
853
- if ($[54] !== dropdownElement?.firstElementChild) {
854
- t31 = () => {
855
- const firstChild = dropdownElement?.firstElementChild;
856
- if (!firstChild) return;
857
- (firstChild.matches(FOCUSABLE_SELECTOR) ? firstChild : firstChild.querySelector(FOCUSABLE_SELECTOR))?.focus();
858
- };
859
- $[54] = dropdownElement?.firstElementChild;
860
- $[55] = t31;
861
- } else t31 = $[55];
862
- const focusTrigger = t31;
933
+ $[50] = closeDropdown;
934
+ $[51] = openOnHover;
935
+ $[52] = t31;
936
+ } else t31 = $[52];
937
+ const handleDropdownMouseLeave = t31;
863
938
  let t32;
864
- if ($[56] !== closeDropdown || $[57] !== dropdownElement || $[58] !== focusTrigger || $[59] !== menubar) {
939
+ if ($[53] !== dropdownElement) {
865
940
  t32 = () => {
941
+ getTriggerElement(dropdownElement)?.focus();
942
+ };
943
+ $[53] = dropdownElement;
944
+ $[54] = t32;
945
+ } else t32 = $[54];
946
+ const focusTrigger = t32;
947
+ let t33;
948
+ if ($[55] !== closeDropdown || $[56] !== disabled || $[57] !== dropdownElement || $[58] !== focusTrigger || $[59] !== isMenubarItem || $[60] !== menubar) {
949
+ t33 = () => {
866
950
  if (!menubar || !dropdownElement) return;
867
951
  return menubar.registerMember({
868
952
  close: () => closeDropdown({ keepMenubarEngaged: true }),
869
953
  element: dropdownElement,
870
954
  focusTrigger,
955
+ isDisabled: () => Boolean(disabled),
956
+ isMenuPopup: () => isMenubarItem,
871
957
  isOpen: () => isOpenRef.current,
872
- open: () => setIsOpen(true)
958
+ open: () => {
959
+ if (disabled) return;
960
+ setIsOpen(true);
961
+ }
873
962
  });
874
963
  };
875
- $[56] = closeDropdown;
964
+ $[55] = closeDropdown;
965
+ $[56] = disabled;
876
966
  $[57] = dropdownElement;
877
967
  $[58] = focusTrigger;
878
- $[59] = menubar;
879
- $[60] = t32;
880
- } else t32 = $[60];
881
- useEffect(t32);
882
- let t33;
968
+ $[59] = isMenubarItem;
969
+ $[60] = menubar;
970
+ $[61] = t33;
971
+ } else t33 = $[61];
972
+ useEffect(t33);
883
973
  let t34;
884
- if ($[61] !== dropdownElement || $[62] !== isOpen || $[63] !== menubar) {
885
- t33 = () => {
974
+ let t35;
975
+ if ($[62] !== dropdownElement || $[63] !== isOpen || $[64] !== menubar) {
976
+ t34 = () => {
886
977
  if (isOpen && menubar && dropdownElement) menubar.notifyOpened(dropdownElement);
887
978
  };
888
- t34 = [
979
+ t35 = [
889
980
  dropdownElement,
890
981
  isOpen,
891
982
  menubar
892
983
  ];
893
- $[61] = dropdownElement;
894
- $[62] = isOpen;
895
- $[63] = menubar;
896
- $[64] = t33;
984
+ $[62] = dropdownElement;
985
+ $[63] = isOpen;
986
+ $[64] = menubar;
897
987
  $[65] = t34;
988
+ $[66] = t35;
898
989
  } else {
899
- t33 = $[64];
900
990
  t34 = $[65];
991
+ t35 = $[66];
901
992
  }
902
- useEffect(t33, t34);
903
- let t35;
904
- if ($[66] !== closeDropdown || $[67] !== dropdownElement || $[68] !== handleActiveItem || $[69] !== popupRole) {
905
- t35 = (event_1) => {
906
- const element = hasItemsRef.current ? getActiveItemElement(dropdownElement) : null;
993
+ useEffect(t34, t35);
994
+ let t36;
995
+ if ($[67] !== allowCreate || $[68] !== allowEmpty || $[69] !== closeDropdown || $[70] !== dropdownElement || $[71] !== handleActiveItem || $[72] !== hasItems || $[73] !== keepOpenOnSubmit || $[74] !== onSubmitItem || $[75] !== popupRole || $[76] !== valueIdentity) {
996
+ t36 = (event_1) => {
997
+ const element = hasItems ? getActiveItemElement(dropdownElement) : null;
907
998
  const submenuOfActive = element ? getSubmenuOfItem(element) : null;
908
999
  if (element && submenuOfActive) {
909
1000
  clearDisclosureTimer();
@@ -919,13 +1010,13 @@ function RootDropdown(t0) {
919
1010
  }
920
1011
  return;
921
1012
  }
922
- if (isOpenRef.current && !keepOpenOnSubmitRef.current) closingTimerRef.current = setTimeout(closeDropdown, 90);
923
- if (!hasItemsRef.current) return;
1013
+ if (isOpenRef.current && !keepOpenOnSubmit) closingTimerRef.current = setTimeout(closeDropdown, 90);
1014
+ if (!hasItems) return;
924
1015
  if (!element) {
925
1016
  if (!inputElementRef.current) return;
926
1017
  if (inputElementRef.current.value) {
927
- if (!allowCreateRef.current) return;
928
- } else if (!allowEmptyRef.current) return;
1018
+ if (!allowCreate) return;
1019
+ } else if (!allowEmpty) return;
929
1020
  }
930
1021
  let itemLabel = element?.innerText ?? "";
931
1022
  if (inputElementRef.current) {
@@ -934,8 +1025,8 @@ function RootDropdown(t0) {
934
1025
  if (inputElementRef.current === inputElementRef.current.ownerDocument.activeElement) inputElementRef.current.blur();
935
1026
  }
936
1027
  const nextValue = element?.dataset.uktValue ?? itemLabel;
937
- if (valueRef.current && valueRef.current === nextValue) return;
938
- if (element && keepOpenOnSubmitRef.current && popupRole === "listbox" && !consumerOwnsARIASelectedRef.current) {
1028
+ if (valueIdentity && valueIdentity === nextValue) return;
1029
+ if (element && keepOpenOnSubmit && popupRole === "listbox" && !consumerOwnsARIASelectedRef.current) {
939
1030
  const bodyElement = element.closest(".uktdropdown-body");
940
1031
  for (const selected of Array.from(bodyElement?.querySelectorAll("[aria-selected=\"true\"]") ?? [])) selected.removeAttribute("aria-selected");
941
1032
  element.setAttribute("aria-selected", "true");
@@ -959,19 +1050,25 @@ function RootDropdown(t0) {
959
1050
  path: getItemPath(element),
960
1051
  value: nextValue
961
1052
  };
962
- onSubmitItemRef.current?.(payload_1);
1053
+ onSubmitItem?.(payload_1);
963
1054
  dispatchToSubmenus("onSubmitItem", payload_1);
964
1055
  };
965
- $[66] = closeDropdown;
966
- $[67] = dropdownElement;
967
- $[68] = handleActiveItem;
968
- $[69] = popupRole;
969
- $[70] = t35;
970
- } else t35 = $[70];
971
- const handleSubmitItem = t35;
972
- let t36;
973
- if ($[71] !== trackSafeArea) {
974
- t36 = (event_2) => {
1056
+ $[67] = allowCreate;
1057
+ $[68] = allowEmpty;
1058
+ $[69] = closeDropdown;
1059
+ $[70] = dropdownElement;
1060
+ $[71] = handleActiveItem;
1061
+ $[72] = hasItems;
1062
+ $[73] = keepOpenOnSubmit;
1063
+ $[74] = onSubmitItem;
1064
+ $[75] = popupRole;
1065
+ $[76] = valueIdentity;
1066
+ $[77] = t36;
1067
+ } else t36 = $[77];
1068
+ const handleSubmitItem = t36;
1069
+ let t37;
1070
+ if ($[78] !== trackSafeArea) {
1071
+ t37 = (event_2) => {
975
1072
  const { clientX, clientY } = event_2;
976
1073
  currentInputMethodRef.current = "mouse";
977
1074
  trackSafeArea(event_2);
@@ -980,14 +1077,14 @@ function RootDropdown(t0) {
980
1077
  if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
981
1078
  setIsOpening(false);
982
1079
  };
983
- $[71] = trackSafeArea;
984
- $[72] = t36;
985
- } else t36 = $[72];
986
- const handleMouseMove = t36;
987
- let t37;
988
- if ($[73] !== dropdownElement || $[74] !== handleActiveItem || $[75] !== syncSubmenuDisclosure) {
989
- t37 = (event_3) => {
990
- if (!hasItemsRef.current) return;
1080
+ $[78] = trackSafeArea;
1081
+ $[79] = t37;
1082
+ } else t37 = $[79];
1083
+ const handleMouseMove = t37;
1084
+ let t38;
1085
+ if ($[80] !== dropdownElement || $[81] !== handleActiveItem || $[82] !== hasItems || $[83] !== syncSubmenuDisclosure) {
1086
+ t38 = (event_3) => {
1087
+ if (!hasItems) return;
991
1088
  if (currentInputMethodRef.current !== "mouse") return;
992
1089
  if (!dropdownElement) return;
993
1090
  const eventTarget_0 = event_3.target;
@@ -1005,16 +1102,17 @@ function RootDropdown(t0) {
1005
1102
  });
1006
1103
  syncSubmenuDisclosure();
1007
1104
  };
1008
- $[73] = dropdownElement;
1009
- $[74] = handleActiveItem;
1010
- $[75] = syncSubmenuDisclosure;
1011
- $[76] = t37;
1012
- } else t37 = $[76];
1013
- const handleMouseOver = t37;
1014
- let t38;
1015
- if ($[77] !== dropdownElement || $[78] !== syncSubmenuDisclosure) {
1016
- t38 = (event_4) => {
1017
- if (!hasItemsRef.current) return;
1105
+ $[80] = dropdownElement;
1106
+ $[81] = handleActiveItem;
1107
+ $[82] = hasItems;
1108
+ $[83] = syncSubmenuDisclosure;
1109
+ $[84] = t38;
1110
+ } else t38 = $[84];
1111
+ const handleMouseOver = t38;
1112
+ let t39;
1113
+ if ($[85] !== dropdownElement || $[86] !== hasItems || $[87] !== syncSubmenuDisclosure) {
1114
+ t39 = (event_4) => {
1115
+ if (!hasItems) return;
1018
1116
  const relatedTarget = event_4.relatedTarget;
1019
1117
  if (!dropdownElement?.contains(relatedTarget)) {
1020
1118
  clearSafeAreaTimer();
@@ -1026,19 +1124,20 @@ function RootDropdown(t0) {
1026
1124
  if (!activeItem) return;
1027
1125
  const eventRelatedTarget = event_4.relatedTarget;
1028
1126
  if (activeItem !== event_4.target || activeItem.contains(eventRelatedTarget)) return;
1029
- delete activeItem.dataset.uktActive;
1127
+ clearActiveItems(dropdownElement, activeItem);
1030
1128
  syncSubmenuDisclosure();
1031
1129
  };
1032
- $[77] = dropdownElement;
1033
- $[78] = syncSubmenuDisclosure;
1034
- $[79] = t38;
1035
- } else t38 = $[79];
1036
- const handleMouseOut = t38;
1037
- let t39;
1038
- if ($[80] !== onMouseDown) {
1039
- t39 = (event_5) => {
1130
+ $[85] = dropdownElement;
1131
+ $[86] = hasItems;
1132
+ $[87] = syncSubmenuDisclosure;
1133
+ $[88] = t39;
1134
+ } else t39 = $[88];
1135
+ const handleMouseOut = t39;
1136
+ let t40;
1137
+ if ($[89] !== disabled || $[90] !== onMouseDown) {
1138
+ t40 = (event_5) => {
1040
1139
  if (onMouseDown) onMouseDown(event_5);
1041
- if (isOpenRef.current) return;
1140
+ if (disabled || isOpenRef.current) return;
1042
1141
  setIsOpen(true);
1043
1142
  setIsOpening(true);
1044
1143
  mouseDownPositionRef.current = {
@@ -1050,13 +1149,14 @@ function RootDropdown(t0) {
1050
1149
  isOpeningTimerRef.current = null;
1051
1150
  }, 1e3);
1052
1151
  };
1053
- $[80] = onMouseDown;
1054
- $[81] = t39;
1055
- } else t39 = $[81];
1056
- const handleMouseDown = t39;
1057
- let t40;
1058
- if ($[82] !== closeDropdown || $[83] !== dropdownElement || $[84] !== handleActiveItem || $[85] !== handleSubmitItem || $[86] !== onMouseUp) {
1059
- t40 = (event_6) => {
1152
+ $[89] = disabled;
1153
+ $[90] = onMouseDown;
1154
+ $[91] = t40;
1155
+ } else t40 = $[91];
1156
+ const handleMouseDown = t40;
1157
+ let t41;
1158
+ if ($[92] !== closeDropdown || $[93] !== dropdownElement || $[94] !== handleActiveItem || $[95] !== handleSubmitItem || $[96] !== hasItems || $[97] !== onMouseUp) {
1159
+ t41 = (event_6) => {
1060
1160
  if (onMouseUp) onMouseUp(event_6);
1061
1161
  if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
1062
1162
  const eventTarget_1 = event_6.target;
@@ -1067,7 +1167,7 @@ function RootDropdown(t0) {
1067
1167
  if (!isOpeningRef.current && inputElementRef.current !== eventTarget_1.ownerDocument.activeElement) closeDropdown();
1068
1168
  return;
1069
1169
  }
1070
- if (!hasItemsRef.current) return;
1170
+ if (!hasItems) return;
1071
1171
  if (dropdownElement) {
1072
1172
  const clickedItem = getItemForTarget(dropdownElement, eventTarget_1);
1073
1173
  if (clickedItem) setActiveItem({
@@ -1080,17 +1180,18 @@ function RootDropdown(t0) {
1080
1180
  }
1081
1181
  handleSubmitItem(event_6);
1082
1182
  };
1083
- $[82] = closeDropdown;
1084
- $[83] = dropdownElement;
1085
- $[84] = handleActiveItem;
1086
- $[85] = handleSubmitItem;
1087
- $[86] = onMouseUp;
1088
- $[87] = t40;
1089
- } else t40 = $[87];
1090
- const handleMouseUp = t40;
1091
- let t41;
1092
- if ($[88] !== closeDropdown || $[89] !== dropdownElement || $[90] !== focusTrigger || $[91] !== handleActiveItem || $[92] !== handleSubmitItem || $[93] !== menubar || $[94] !== syncSubmenuDisclosure) {
1093
- t41 = (event_7) => {
1183
+ $[92] = closeDropdown;
1184
+ $[93] = dropdownElement;
1185
+ $[94] = handleActiveItem;
1186
+ $[95] = handleSubmitItem;
1187
+ $[96] = hasItems;
1188
+ $[97] = onMouseUp;
1189
+ $[98] = t41;
1190
+ } else t41 = $[98];
1191
+ const handleMouseUp = t41;
1192
+ let t42;
1193
+ if ($[99] !== allowCreate || $[100] !== closeDropdown || $[101] !== disabled || $[102] !== dropdownElement || $[103] !== focusTrigger || $[104] !== handleActiveItem || $[105] !== handleSubmitItem || $[106] !== hasItems || $[107] !== menubar || $[108] !== syncSubmenuDisclosure) {
1194
+ t42 = (event_7) => {
1094
1195
  const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
1095
1196
  const eventTarget_2 = event_7.target;
1096
1197
  if (!dropdownElement) return;
@@ -1104,14 +1205,15 @@ function RootDropdown(t0) {
1104
1205
  if (nestedRoot && nestedRoot !== dropdownElement && dropdownElement.contains(nestedRoot) && nestedRoot.classList.contains("is-open")) return;
1105
1206
  if (!isOpenRef.current) {
1106
1207
  if (!isEventTargetingDropdown) return;
1107
- if (key_0 === " " || key_0 === "Enter" || hasItemsRef.current && (key_0 === "ArrowUp" || key_0 === "ArrowDown")) {
1208
+ if (disabled) return;
1209
+ if (key_0 === " " || key_0 === "Enter" || hasItems && (key_0 === "ArrowUp" || key_0 === "ArrowDown")) {
1108
1210
  onEventHandled();
1109
1211
  setIsOpen(true);
1110
1212
  }
1111
1213
  return;
1112
1214
  }
1113
1215
  const isTargetUsingKeyEvents = isEventTargetUsingKeyEvent(event_7);
1114
- if (hasItemsRef.current && !isTargetUsingKeyEvents) {
1216
+ if (hasItems && !isTargetUsingKeyEvents) {
1115
1217
  let isEditingCharacters = !ctrlKey && !metaKey && /^[A-Za-z0-9]$/.test(key_0);
1116
1218
  if (!isEditingCharacters && enteredCharactersRef.current) isEditingCharacters = key_0 === " " || key_0 === "Backspace";
1117
1219
  if (isEditingCharacters) {
@@ -1121,7 +1223,7 @@ function RootDropdown(t0) {
1121
1223
  setActiveItem({
1122
1224
  dropdownElement,
1123
1225
  event: event_7,
1124
- isExactMatch: allowCreateRef.current,
1226
+ isExactMatch: allowCreate,
1125
1227
  onActiveItem: handleActiveItem,
1126
1228
  text: enteredCharactersRef.current
1127
1229
  });
@@ -1139,14 +1241,14 @@ function RootDropdown(t0) {
1139
1241
  handleSubmitItem(event_7);
1140
1242
  return;
1141
1243
  }
1142
- if (key_0 === "Escape" || isEventTargetingDropdown && key_0 === " " && !hasItemsRef.current) {
1143
- if (hasItemsRef.current || !isTargetUsingKeyEvents) {
1244
+ if (key_0 === "Escape" || isEventTargetingDropdown && key_0 === " " && !hasItems) {
1245
+ if (hasItems || !isTargetUsingKeyEvents) {
1144
1246
  focusTrigger();
1145
1247
  closeDropdown();
1146
1248
  }
1147
1249
  return;
1148
1250
  }
1149
- if (hasItemsRef.current) {
1251
+ if (hasItems) {
1150
1252
  if (key_0 === "ArrowUp") {
1151
1253
  onEventHandled();
1152
1254
  if (altKey || metaKey) setActiveItem({
@@ -1181,6 +1283,17 @@ function RootDropdown(t0) {
1181
1283
  syncSubmenuDisclosure();
1182
1284
  return;
1183
1285
  }
1286
+ if (!isTargetUsingKeyEvents && (key_0 === "Home" || key_0 === "End")) {
1287
+ onEventHandled();
1288
+ setActiveItem({
1289
+ dropdownElement,
1290
+ event: event_7,
1291
+ index: key_0 === "Home" ? 0 : -1,
1292
+ onActiveItem: handleActiveItem
1293
+ });
1294
+ syncSubmenuDisclosure();
1295
+ return;
1296
+ }
1184
1297
  if (!isTargetUsingKeyEvents) {
1185
1298
  if (key_0 === "ArrowRight") {
1186
1299
  const activeElement_0 = getActiveItemElement(dropdownElement);
@@ -1223,29 +1336,32 @@ function RootDropdown(t0) {
1223
1336
  }
1224
1337
  }
1225
1338
  };
1226
- $[88] = closeDropdown;
1227
- $[89] = dropdownElement;
1228
- $[90] = focusTrigger;
1229
- $[91] = handleActiveItem;
1230
- $[92] = handleSubmitItem;
1231
- $[93] = menubar;
1232
- $[94] = syncSubmenuDisclosure;
1233
- $[95] = t41;
1234
- } else t41 = $[95];
1235
- const handleKeyDown = t41;
1236
- let t42;
1237
- if ($[96] !== handleKeyDown) {
1238
- t42 = {
1339
+ $[99] = allowCreate;
1340
+ $[100] = closeDropdown;
1341
+ $[101] = disabled;
1342
+ $[102] = dropdownElement;
1343
+ $[103] = focusTrigger;
1344
+ $[104] = handleActiveItem;
1345
+ $[105] = handleSubmitItem;
1346
+ $[106] = hasItems;
1347
+ $[107] = menubar;
1348
+ $[108] = syncSubmenuDisclosure;
1349
+ $[109] = t42;
1350
+ } else t42 = $[109];
1351
+ const handleKeyDown = t42;
1352
+ let t43;
1353
+ if ($[110] !== handleKeyDown) {
1354
+ t43 = {
1239
1355
  ignoreUsedKeyboardEvents: false,
1240
1356
  onKeyDown: handleKeyDown
1241
1357
  };
1242
- $[96] = handleKeyDown;
1243
- $[97] = t42;
1244
- } else t42 = $[97];
1245
- useKeyboardEvents(t42);
1246
- let t43;
1247
- if ($[98] !== closeDropdown || $[99] !== handleActiveItem || $[100] !== isOpenOnMount) {
1248
- t43 = (ref) => {
1358
+ $[110] = handleKeyDown;
1359
+ $[111] = t43;
1360
+ } else t43 = $[111];
1361
+ useKeyboardEvents(t43);
1362
+ let t44;
1363
+ if ($[112] !== allowCreate || $[113] !== closeDropdown || $[114] !== disabled || $[115] !== handleActiveItem) {
1364
+ t44 = (ref) => {
1249
1365
  setDropdownElement(ref);
1250
1366
  if (!ref) return;
1251
1367
  const { ownerDocument } = ref;
@@ -1255,13 +1371,13 @@ function RootDropdown(t0) {
1255
1371
  else inputElement = ref.firstElementChild.querySelector(TEXT_INPUT_SELECTOR);
1256
1372
  inputElementRef.current = inputElement;
1257
1373
  }
1258
- const handleGlobalMouseDown = (t44) => {
1259
- const { target: target_1 } = t44;
1374
+ const handleGlobalMouseDown = (t45) => {
1375
+ const { target: target_1 } = t45;
1260
1376
  const eventTarget_3 = target_1;
1261
1377
  if (!ref.contains(eventTarget_3)) closeDropdown();
1262
1378
  };
1263
- const handleGlobalMouseUp = (t45) => {
1264
- const { target: target_2 } = t45;
1379
+ const handleGlobalMouseUp = (t46) => {
1380
+ const { target: target_2 } = t46;
1265
1381
  if (!isOpenRef.current || closingTimerRef.current != null) return;
1266
1382
  if (isOpeningRef.current) {
1267
1383
  setIsOpening(false);
@@ -1274,8 +1390,8 @@ function RootDropdown(t0) {
1274
1390
  const eventTarget_4 = target_2;
1275
1391
  if (!ref.contains(eventTarget_4)) closeDropdown();
1276
1392
  };
1277
- const handleGlobalFocusIn = (t46) => {
1278
- const { target: target_3 } = t46;
1393
+ const handleGlobalFocusIn = (t47) => {
1394
+ const { target: target_3 } = t47;
1279
1395
  if (!isOpenRef.current) return;
1280
1396
  const eventTarget_5 = target_3;
1281
1397
  if (ref.contains(eventTarget_5) || eventTarget_5.contains(ref)) return;
@@ -1289,8 +1405,8 @@ function RootDropdown(t0) {
1289
1405
  ownerDocument.addEventListener("mousedown", handleGlobalMouseDown);
1290
1406
  ownerDocument.addEventListener("mouseup", handleGlobalMouseUp);
1291
1407
  }
1292
- if (isOpenOnMount) ref.focus();
1293
1408
  const handleInput = (event_8) => {
1409
+ if (disabled) return;
1294
1410
  if (!isOpenRef.current) setIsOpen(true);
1295
1411
  const input = event_8.target;
1296
1412
  const isDeleting = enteredCharactersRef.current.length > input.value.length;
@@ -1299,7 +1415,7 @@ function RootDropdown(t0) {
1299
1415
  setActiveItem({
1300
1416
  dropdownElement: ref,
1301
1417
  event: event_8,
1302
- isExactMatch: allowCreateRef.current,
1418
+ isExactMatch: allowCreate,
1303
1419
  onActiveItem: handleActiveItem,
1304
1420
  text: enteredCharactersRef.current
1305
1421
  });
@@ -1317,15 +1433,16 @@ function RootDropdown(t0) {
1317
1433
  if (inputElement) inputElement.removeEventListener("input", handleInput);
1318
1434
  };
1319
1435
  };
1320
- $[98] = closeDropdown;
1321
- $[99] = handleActiveItem;
1322
- $[100] = isOpenOnMount;
1323
- $[101] = t43;
1324
- } else t43 = $[101];
1325
- const handleRef = t43;
1326
- let t44;
1327
- if ($[102] !== dropdownElement || $[103] !== popupRole || $[104] !== valueIdentity) {
1328
- t44 = (ref_0) => {
1436
+ $[112] = allowCreate;
1437
+ $[113] = closeDropdown;
1438
+ $[114] = disabled;
1439
+ $[115] = handleActiveItem;
1440
+ $[116] = t44;
1441
+ } else t44 = $[116];
1442
+ const handleRef = t44;
1443
+ let t45;
1444
+ if ($[117] !== dropdownElement || $[118] !== popupRole || $[119] !== valueIdentity) {
1445
+ t45 = (ref_0) => {
1329
1446
  if (!ref_0) return;
1330
1447
  if (annotatedBodiesRef.current.has(ref_0)) return;
1331
1448
  annotatedBodiesRef.current.add(ref_0);
@@ -1344,135 +1461,180 @@ function RootDropdown(t0) {
1344
1461
  }
1345
1462
  }
1346
1463
  };
1347
- $[102] = dropdownElement;
1348
- $[103] = popupRole;
1349
- $[104] = valueIdentity;
1350
- $[105] = t44;
1351
- } else t44 = $[105];
1352
- const handleBodyRef = t44;
1464
+ $[117] = dropdownElement;
1465
+ $[118] = popupRole;
1466
+ $[119] = valueIdentity;
1467
+ $[120] = t45;
1468
+ } else t45 = $[120];
1469
+ const handleBodyRef = t45;
1470
+ let bodyLabelledBy;
1353
1471
  if (!isValidElement(trigger)) if (isSearchable) {
1354
- const t45 = valueLabel ?? "";
1355
- let t46;
1356
- if ($[106] === Symbol.for("react.memo_cache_sentinel")) {
1357
- t46 = () => setIsOpen(true);
1358
- $[106] = t46;
1359
- } else t46 = $[106];
1472
+ const t46 = valueLabel ?? "";
1360
1473
  let t47;
1361
- if ($[107] !== bodyId || $[108] !== disabled || $[109] !== isOpen || $[110] !== name || $[111] !== placeholder || $[112] !== popupRole || $[113] !== t45 || $[114] !== tabIndex) {
1362
- t47 = /* @__PURE__ */ jsx("input", {
1474
+ if ($[121] === Symbol.for("react.memo_cache_sentinel")) {
1475
+ t47 = () => setIsOpen(true);
1476
+ $[121] = t47;
1477
+ } else t47 = $[121];
1478
+ let t48;
1479
+ if ($[122] !== bodyId || $[123] !== disabled || $[124] !== isOpen || $[125] !== name || $[126] !== placeholder || $[127] !== popupRole || $[128] !== t46 || $[129] !== tabIndex || $[130] !== triggerId) {
1480
+ t48 = /* @__PURE__ */ jsx("input", {
1481
+ "aria-autocomplete": "list",
1363
1482
  "aria-controls": bodyId,
1364
1483
  "aria-expanded": isOpen,
1365
1484
  "aria-haspopup": popupRole,
1366
1485
  autoComplete: "off",
1367
1486
  className: "uktdropdown-trigger",
1368
- defaultValue: t45,
1487
+ defaultValue: t46,
1369
1488
  disabled,
1489
+ id: triggerId,
1370
1490
  name,
1371
- onFocus: t46,
1491
+ onFocus: t47,
1372
1492
  placeholder,
1373
1493
  ref: inputElementRef,
1494
+ role: "combobox",
1374
1495
  tabIndex,
1375
1496
  type: "text"
1376
1497
  });
1377
- $[107] = bodyId;
1378
- $[108] = disabled;
1379
- $[109] = isOpen;
1380
- $[110] = name;
1381
- $[111] = placeholder;
1382
- $[112] = popupRole;
1383
- $[113] = t45;
1384
- $[114] = tabIndex;
1385
- $[115] = t47;
1386
- } else t47 = $[115];
1387
- trigger = t47;
1498
+ $[122] = bodyId;
1499
+ $[123] = disabled;
1500
+ $[124] = isOpen;
1501
+ $[125] = name;
1502
+ $[126] = placeholder;
1503
+ $[127] = popupRole;
1504
+ $[128] = t46;
1505
+ $[129] = tabIndex;
1506
+ $[130] = triggerId;
1507
+ $[131] = t48;
1508
+ } else t48 = $[131];
1509
+ trigger = t48;
1388
1510
  } else {
1389
- let t45;
1390
- if ($[116] !== bodyId || $[117] !== isOpen || $[118] !== popupRole || $[119] !== trigger) {
1391
- t45 = /* @__PURE__ */ jsx("button", {
1511
+ bodyLabelledBy = triggerId;
1512
+ const t46 = isMenubarItem ? "menuitem" : void 0;
1513
+ const t47 = menubarTabIndex ?? 0;
1514
+ let t48;
1515
+ if ($[132] !== bodyId || $[133] !== disabled || $[134] !== isOpen || $[135] !== popupRole || $[136] !== t46 || $[137] !== t47 || $[138] !== trigger || $[139] !== triggerId) {
1516
+ t48 = /* @__PURE__ */ jsx("button", {
1392
1517
  "aria-controls": bodyId,
1393
1518
  "aria-expanded": isOpen,
1394
1519
  "aria-haspopup": popupRole,
1395
1520
  className: "uktdropdown-trigger",
1396
- tabIndex: 0,
1521
+ disabled,
1522
+ id: triggerId,
1523
+ role: t46,
1524
+ tabIndex: t47,
1397
1525
  type: "button",
1398
1526
  children: trigger
1399
1527
  });
1400
- $[116] = bodyId;
1401
- $[117] = isOpen;
1402
- $[118] = popupRole;
1403
- $[119] = trigger;
1404
- $[120] = t45;
1405
- } else t45 = $[120];
1406
- trigger = t45;
1528
+ $[132] = bodyId;
1529
+ $[133] = disabled;
1530
+ $[134] = isOpen;
1531
+ $[135] = popupRole;
1532
+ $[136] = t46;
1533
+ $[137] = t47;
1534
+ $[138] = trigger;
1535
+ $[139] = triggerId;
1536
+ $[140] = t48;
1537
+ } else t48 = $[140];
1538
+ trigger = t48;
1407
1539
  }
1408
1540
  else {
1409
1541
  const triggerProps = trigger.props;
1410
- const t45 = trigger;
1411
- const t46 = triggerProps["aria-controls"] ?? bodyId;
1412
- const t47 = triggerProps["aria-expanded"] ?? isOpen;
1413
- const t48 = triggerProps["aria-haspopup"] ?? popupRole;
1414
- let t49;
1415
- if ($[121] !== t45 || $[122] !== t46 || $[123] !== t47 || $[124] !== t48) {
1416
- t49 = cloneElement(t45, {
1417
- "aria-controls": t46,
1418
- "aria-expanded": t47,
1419
- "aria-haspopup": t48
1542
+ const resolvedTriggerId = triggerProps.id ?? triggerId;
1543
+ const isTextInputTrigger = isTextInputElement(trigger);
1544
+ if (!isSearchable && !isTextInputTrigger) bodyLabelledBy = resolvedTriggerId;
1545
+ const isCombobox = isSearchable && isTextInputTrigger && trigger.type !== "textarea";
1546
+ const triggerRole = triggerProps.role ?? (isCombobox ? "combobox" : isMenubarItem ? "menuitem" : void 0);
1547
+ const canExpand = !isTextInputTrigger || triggerRole != null;
1548
+ const t46 = trigger;
1549
+ const t47 = triggerProps["aria-autocomplete"] ?? (isCombobox ? "list" : void 0);
1550
+ const t48 = triggerProps["aria-controls"] ?? bodyId;
1551
+ const t49 = triggerProps["aria-disabled"] ?? (disabled || void 0);
1552
+ const t50 = triggerProps["aria-expanded"] ?? (canExpand ? isOpen : void 0);
1553
+ const t51 = triggerProps["aria-haspopup"] ?? popupRole;
1554
+ const t52 = triggerProps.tabIndex ?? menubarTabIndex;
1555
+ let t53;
1556
+ if ($[141] !== resolvedTriggerId || $[142] !== t46 || $[143] !== t47 || $[144] !== t48 || $[145] !== t49 || $[146] !== t50 || $[147] !== t51 || $[148] !== t52 || $[149] !== triggerRole) {
1557
+ t53 = cloneElement(t46, {
1558
+ "aria-autocomplete": t47,
1559
+ "aria-controls": t48,
1560
+ "aria-disabled": t49,
1561
+ "aria-expanded": t50,
1562
+ "aria-haspopup": t51,
1563
+ id: resolvedTriggerId,
1564
+ role: triggerRole,
1565
+ tabIndex: t52
1420
1566
  });
1421
- $[121] = t45;
1422
- $[122] = t46;
1423
- $[123] = t47;
1424
- $[124] = t48;
1425
- $[125] = t49;
1426
- } else t49 = $[125];
1427
- trigger = t49;
1567
+ $[141] = resolvedTriggerId;
1568
+ $[142] = t46;
1569
+ $[143] = t47;
1570
+ $[144] = t48;
1571
+ $[145] = t49;
1572
+ $[146] = t50;
1573
+ $[147] = t51;
1574
+ $[148] = t52;
1575
+ $[149] = triggerRole;
1576
+ $[150] = t53;
1577
+ } else t53 = $[150];
1578
+ trigger = t53;
1428
1579
  }
1429
1580
  if (label != null) {
1430
- let t45;
1431
- if ($[126] !== label) {
1432
- t45 = /* @__PURE__ */ jsx("div", {
1581
+ bodyLabelledBy = labelId;
1582
+ const t46 = isMenubarMember ? "none" : void 0;
1583
+ const t47 = isMenubarMember ? "none" : void 0;
1584
+ let t48;
1585
+ if ($[151] !== label || $[152] !== labelId || $[153] !== t47) {
1586
+ t48 = /* @__PURE__ */ jsx("div", {
1433
1587
  className: "uktdropdown-label-text",
1588
+ id: labelId,
1589
+ role: t47,
1434
1590
  children: label
1435
1591
  });
1436
- $[126] = label;
1437
- $[127] = t45;
1438
- } else t45 = $[127];
1439
- let t46;
1440
- if ($[128] !== t45 || $[129] !== trigger) {
1441
- t46 = /* @__PURE__ */ jsxs("label", {
1592
+ $[151] = label;
1593
+ $[152] = labelId;
1594
+ $[153] = t47;
1595
+ $[154] = t48;
1596
+ } else t48 = $[154];
1597
+ let t49;
1598
+ if ($[155] !== t46 || $[156] !== t48 || $[157] !== trigger) {
1599
+ t49 = /* @__PURE__ */ jsxs("label", {
1442
1600
  className: "uktdropdown-label",
1443
- children: [t45, trigger]
1601
+ role: t46,
1602
+ children: [t48, trigger]
1444
1603
  });
1445
- $[128] = t45;
1446
- $[129] = trigger;
1447
- $[130] = t46;
1448
- } else t46 = $[130];
1449
- trigger = t46;
1604
+ $[155] = t46;
1605
+ $[156] = t48;
1606
+ $[157] = trigger;
1607
+ $[158] = t49;
1608
+ } else t49 = $[158];
1609
+ trigger = t49;
1450
1610
  }
1451
- let t45;
1452
- if ($[131] === Symbol.for("react.memo_cache_sentinel")) {
1453
- t45 = /* @__PURE__ */ jsx("style", {
1611
+ let t46;
1612
+ if ($[159] === Symbol.for("react.memo_cache_sentinel")) {
1613
+ t46 = /* @__PURE__ */ jsx("style", {
1454
1614
  href: "@acusti/dropdown/Dropdown",
1455
1615
  precedence: "medium",
1456
1616
  children: Dropdown_default
1457
1617
  });
1458
- $[131] = t45;
1459
- } else t45 = $[131];
1460
- let t46;
1461
- if ($[132] !== className || $[133] !== disabled || $[134] !== isOpen || $[135] !== isSearchable) {
1462
- t46 = clsx("uktdropdown", className, {
1618
+ $[159] = t46;
1619
+ } else t46 = $[159];
1620
+ let t47;
1621
+ if ($[160] !== className || $[161] !== disabled || $[162] !== isOpen || $[163] !== isSearchable) {
1622
+ t47 = clsx("uktdropdown", className, {
1463
1623
  disabled,
1464
1624
  "is-open": isOpen,
1465
1625
  "is-searchable": isSearchable
1466
1626
  });
1467
- $[132] = className;
1468
- $[133] = disabled;
1469
- $[134] = isOpen;
1470
- $[135] = isSearchable;
1471
- $[136] = t46;
1472
- } else t46 = $[136];
1473
- let t47;
1474
- if ($[137] !== body || $[138] !== bodyId || $[139] !== handleBodyRef || $[140] !== hasItems || $[141] !== isOpen || $[142] !== popupRole) {
1475
- t47 = isOpen ? /* @__PURE__ */ jsx("div", {
1627
+ $[160] = className;
1628
+ $[161] = disabled;
1629
+ $[162] = isOpen;
1630
+ $[163] = isSearchable;
1631
+ $[164] = t47;
1632
+ } else t47 = $[164];
1633
+ const t48 = isMenubarMember ? "none" : void 0;
1634
+ let t49;
1635
+ if ($[165] !== body || $[166] !== bodyId || $[167] !== bodyLabelledBy || $[168] !== handleBodyRef || $[169] !== hasItems || $[170] !== isOpen || $[171] !== popupRole) {
1636
+ t49 = isOpen ? /* @__PURE__ */ jsx("div", {
1637
+ "aria-labelledby": bodyLabelledBy,
1476
1638
  className: clsx("uktdropdown-body", { "has-items": hasItems }),
1477
1639
  id: bodyId,
1478
1640
  popover: "manual",
@@ -1486,19 +1648,21 @@ function RootDropdown(t0) {
1486
1648
  })
1487
1649
  })
1488
1650
  }) : null;
1489
- $[137] = body;
1490
- $[138] = bodyId;
1491
- $[139] = handleBodyRef;
1492
- $[140] = hasItems;
1493
- $[141] = isOpen;
1494
- $[142] = popupRole;
1495
- $[143] = t47;
1496
- } else t47 = $[143];
1497
- let t48;
1498
- if ($[144] !== handleDropdownMouseEnter || $[145] !== handleDropdownMouseLeave || $[146] !== handleMouseDown || $[147] !== handleMouseMove || $[148] !== handleMouseOut || $[149] !== handleMouseOver || $[150] !== handleMouseUp || $[151] !== handleRef || $[152] !== onClick || $[153] !== styleFromProps || $[154] !== t46 || $[155] !== t47 || $[156] !== trigger) {
1499
- t48 = /* @__PURE__ */ jsxs(Fragment, { children: [t45, /* @__PURE__ */ jsxs("div", {
1500
- className: t46,
1651
+ $[165] = body;
1652
+ $[166] = bodyId;
1653
+ $[167] = bodyLabelledBy;
1654
+ $[168] = handleBodyRef;
1655
+ $[169] = hasItems;
1656
+ $[170] = isOpen;
1657
+ $[171] = popupRole;
1658
+ $[172] = t49;
1659
+ } else t49 = $[172];
1660
+ let t50;
1661
+ 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) {
1662
+ t50 = /* @__PURE__ */ jsxs(Fragment, { children: [t46, /* @__PURE__ */ jsxs("div", {
1663
+ className: t47,
1501
1664
  onClick,
1665
+ role: t48,
1502
1666
  onMouseDown: handleMouseDown,
1503
1667
  onMouseEnter: handleDropdownMouseEnter,
1504
1668
  onMouseLeave: handleDropdownMouseLeave,
@@ -1508,24 +1672,25 @@ function RootDropdown(t0) {
1508
1672
  onMouseUp: handleMouseUp,
1509
1673
  ref: handleRef,
1510
1674
  style: styleFromProps,
1511
- children: [trigger, t47]
1675
+ children: [trigger, t49]
1512
1676
  })] });
1513
- $[144] = handleDropdownMouseEnter;
1514
- $[145] = handleDropdownMouseLeave;
1515
- $[146] = handleMouseDown;
1516
- $[147] = handleMouseMove;
1517
- $[148] = handleMouseOut;
1518
- $[149] = handleMouseOver;
1519
- $[150] = handleMouseUp;
1520
- $[151] = handleRef;
1521
- $[152] = onClick;
1522
- $[153] = styleFromProps;
1523
- $[154] = t46;
1524
- $[155] = t47;
1525
- $[156] = trigger;
1526
- $[157] = t48;
1527
- } else t48 = $[157];
1528
- return t48;
1677
+ $[173] = handleDropdownMouseEnter;
1678
+ $[174] = handleDropdownMouseLeave;
1679
+ $[175] = handleMouseDown;
1680
+ $[176] = handleMouseMove;
1681
+ $[177] = handleMouseOut;
1682
+ $[178] = handleMouseOver;
1683
+ $[179] = handleMouseUp;
1684
+ $[180] = handleRef;
1685
+ $[181] = onClick;
1686
+ $[182] = styleFromProps;
1687
+ $[183] = t47;
1688
+ $[184] = t48;
1689
+ $[185] = t49;
1690
+ $[186] = trigger;
1691
+ $[187] = t50;
1692
+ } else t50 = $[187];
1693
+ return t50;
1529
1694
  }
1530
1695
  var INERT_SUBMENU_PROPS = [
1531
1696
  "allowCreate",