@acusti/dropdown
Version:
React component that renders a dropdown with a trigger and supports searching, keyboard access, and more
724 lines (723 loc) • 26.6 kB
JavaScript
import { c } from "react/compiler-runtime";
import useKeyboardEvents, { isEventTargetUsingKeyEvent } from "@acusti/use-keyboard-events";
import clsx from "clsx";
import { Children, Fragment, cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
import { getBestMatch } from "@acusti/matchmaking";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Dropdown.css?inline
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:9px;--uktdd-body-pad-left:12px;--uktdd-body-pad-right:12px;--uktdd-body-pad-top:9px;--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-translate:0 0;--uktdd-label-pad-right:10px}.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;translate:var(--uktdd-body-translate);z-index:2;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)}.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;}";
//#endregion
//#region src/helpers.ts
var ITEM_SELECTOR = `[data-ukt-item], [data-ukt-value]`;
var getItemElements = (dropdownElement) => {
if (!dropdownElement) return null;
const bodyElement = dropdownElement.querySelector(".uktdropdown-body");
if (!bodyElement) return null;
let items = bodyElement.querySelectorAll(ITEM_SELECTOR);
if (items.length) return items;
items = bodyElement.children;
while (items.length === 1) {
if (items[0].children == null) break;
items = items[0].children;
}
if (items.length === 1) items = bodyElement.children;
return items;
};
var getActiveItemElement = (dropdownElement) => {
if (!dropdownElement) return null;
return dropdownElement.querySelector("[data-ukt-active]");
};
var clearItemElementsState = (itemElements) => {
itemElements.forEach((itemElement) => {
if (itemElement.hasAttribute("data-ukt-active")) delete itemElement.dataset.uktActive;
});
};
var setActiveItem = ({ dropdownElement, element, event, index, indexAddend, isExactMatch, onActiveItem, text }) => {
const items = getItemElements(dropdownElement);
if (!items) return;
const itemElements = Array.from(items);
if (!itemElements.length) return;
const lastIndex = itemElements.length - 1;
const currentActiveIndex = itemElements.findIndex((itemElement) => itemElement.hasAttribute("data-ukt-active"));
let nextActiveIndex = currentActiveIndex;
if (typeof index === "number") nextActiveIndex = index < 0 ? itemElements.length + index : index;
if (element) nextActiveIndex = itemElements.findIndex((itemElement) => itemElement === element);
else if (typeof indexAddend === "number") {
if (currentActiveIndex === -1 && indexAddend === -1) nextActiveIndex = lastIndex;
else nextActiveIndex += indexAddend;
nextActiveIndex = Math.max(0, Math.min(nextActiveIndex, lastIndex));
} else if (typeof text === "string") {
if (!text) {
clearItemElementsState(itemElements);
return;
}
const itemTexts = itemElements.map((itemElement) => itemElement.innerText);
if (isExactMatch) {
const textToCompare = text.toLowerCase();
nextActiveIndex = itemTexts.findIndex((itemText) => itemText.toLowerCase().startsWith(textToCompare));
if (nextActiveIndex === -1) clearItemElementsState(itemElements);
} else {
const bestMatch = getBestMatch({
items: itemTexts,
text
});
nextActiveIndex = itemTexts.findIndex((itemText) => itemText === bestMatch);
}
}
const nextActiveItem = items[nextActiveIndex];
if (nextActiveItem == null || nextActiveIndex === currentActiveIndex) return;
clearItemElementsState(itemElements);
nextActiveItem.setAttribute("data-ukt-active", "");
const label = nextActiveItem.innerText;
const value = nextActiveItem.dataset.uktValue ?? label;
onActiveItem?.({
element: nextActiveItem,
event,
label,
value
});
let { parentElement } = nextActiveItem;
let scrollableParent = null;
while (!scrollableParent && parentElement && parentElement !== dropdownElement) if (parentElement.scrollHeight > parentElement.clientHeight + 15) scrollableParent = parentElement;
else parentElement = parentElement.parentElement;
if (scrollableParent) {
const parentRect = scrollableParent.getBoundingClientRect();
const itemRect = nextActiveItem.getBoundingClientRect();
const isAboveTop = itemRect.top < parentRect.top;
const isBelowBottom = itemRect.bottom > parentRect.bottom;
if (isAboveTop || isBelowBottom) {
let { scrollTop } = scrollableParent;
if (isAboveTop) scrollTop -= parentRect.top - itemRect.top;
else scrollTop += itemRect.bottom - parentRect.bottom;
scrollableParent.scrollTop = scrollTop;
}
}
};
//#endregion
//#region src/Dropdown.tsx
var CHILDREN_ERROR = "@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.";
var CLICKABLE_SELECTOR = "button, a[href], input[type=\"button\"], input[type=\"submit\"]";
var TEXT_INPUT_SELECTOR = "input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea";
function Dropdown(t0) {
const $ = c(95);
const { allowCreate, allowEmpty: t1, children, className, disabled, hasItems: t2, isOpenOnMount, isSearchable, keepOpenOnSubmit: t3, label, minHeightBody, minWidthBody, name, onActiveItem, onClick, onClose, onMouseDown, onMouseUp, onOpen, onSubmitItem, placeholder, style: styleFromProps, tabIndex, value } = t0;
const allowEmpty = t1 === void 0 ? true : t1;
const hasItems = t2 === void 0 ? true : t2;
const keepOpenOnSubmit = t3 === void 0 ? !hasItems : t3;
const childrenCount = Children.count(children);
if (childrenCount !== 1 && childrenCount !== 2) {
if (childrenCount === 0) throw new Error(CHILDREN_ERROR + " Received no children.");
console.error(`${CHILDREN_ERROR} Received ${childrenCount} children.`);
}
let trigger;
if (childrenCount > 1) trigger = children[0];
const [isOpen, setIsOpen] = useState(isOpenOnMount ?? false);
const [isOpening, setIsOpening] = useState(!isOpenOnMount);
const [dropdownElement, setDropdownElement] = useState(null);
const bodyId = useId();
const popupRole = isSearchable ? "listbox" : hasItems ? "menu" : "dialog";
const inputElementRef = useRef(null);
const closingTimerRef = useRef(null);
const isOpeningTimerRef = useRef(null);
const currentInputMethodRef = useRef("mouse");
const clearEnteredCharactersTimerRef = useRef(null);
const enteredCharactersRef = useRef("");
const mouseDownPositionRef = useRef(null);
const allowCreateRef = useRef(allowCreate);
const allowEmptyRef = useRef(allowEmpty);
const hasItemsRef = useRef(hasItems);
const isOpenRef = useRef(isOpen);
const isOpeningRef = useRef(isOpening);
const keepOpenOnSubmitRef = useRef(keepOpenOnSubmit);
const onCloseRef = useRef(onClose);
const onOpenRef = useRef(onOpen);
const onSubmitItemRef = useRef(onSubmitItem);
const valueRef = useRef(value);
let t4;
let t5;
if ($[0] !== allowCreate || $[1] !== allowEmpty || $[2] !== hasItems || $[3] !== isOpen || $[4] !== isOpening || $[5] !== keepOpenOnSubmit || $[6] !== onClose || $[7] !== onOpen || $[8] !== onSubmitItem || $[9] !== value) {
t4 = () => {
allowCreateRef.current = allowCreate;
allowEmptyRef.current = allowEmpty;
hasItemsRef.current = hasItems;
isOpenRef.current = isOpen;
isOpeningRef.current = isOpening;
keepOpenOnSubmitRef.current = keepOpenOnSubmit;
onCloseRef.current = onClose;
onOpenRef.current = onOpen;
onSubmitItemRef.current = onSubmitItem;
valueRef.current = value;
};
t5 = [
allowCreate,
allowEmpty,
hasItems,
isOpen,
isOpening,
keepOpenOnSubmit,
onClose,
onOpen,
onSubmitItem,
value
];
$[0] = allowCreate;
$[1] = allowEmpty;
$[2] = hasItems;
$[3] = isOpen;
$[4] = isOpening;
$[5] = keepOpenOnSubmit;
$[6] = onClose;
$[7] = onOpen;
$[8] = onSubmitItem;
$[9] = value;
$[10] = t4;
$[11] = t5;
} else {
t4 = $[10];
t5 = $[11];
}
useEffect(t4, t5);
const isMountedRef = useRef(false);
let t6;
let t7;
if ($[12] !== isOpen) {
t6 = () => {
if (!isMountedRef.current) {
isMountedRef.current = true;
if (isOpenRef.current && onOpenRef.current) onOpenRef.current();
return;
}
if (isOpen && onOpenRef.current) onOpenRef.current();
else if (!isOpen && onCloseRef.current) onCloseRef.current();
};
t7 = [isOpen];
$[12] = isOpen;
$[13] = t6;
$[14] = t7;
} else {
t6 = $[13];
t7 = $[14];
}
useEffect(t6, t7);
let t8;
if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
t8 = () => {
setIsOpen(false);
setIsOpening(false);
mouseDownPositionRef.current = null;
if (closingTimerRef.current != null) {
clearTimeout(closingTimerRef.current);
closingTimerRef.current = null;
}
};
$[15] = t8;
} else t8 = $[15];
const closeDropdown = t8;
let t9;
if ($[16] !== dropdownElement) {
t9 = (event) => {
if (isOpenRef.current && !keepOpenOnSubmitRef.current) closingTimerRef.current = setTimeout(closeDropdown, 90);
if (!hasItemsRef.current) return;
const element = getActiveItemElement(dropdownElement);
if (!element && !allowCreateRef.current) {
if (!allowEmptyRef.current) return;
if (inputElementRef.current?.value) return;
}
let itemLabel = element?.innerText ?? "";
if (inputElementRef.current) {
if (!element) itemLabel = inputElementRef.current.value;
else inputElementRef.current.value = itemLabel;
if (inputElementRef.current === inputElementRef.current.ownerDocument.activeElement) inputElementRef.current.blur();
}
const nextValue = element?.dataset.uktValue ?? itemLabel;
if (valueRef.current && valueRef.current === nextValue) return;
if (element) {
const eventTarget = event.target;
if (element.matches(CLICKABLE_SELECTOR)) {
if (element !== eventTarget && !element.contains(eventTarget)) element.click();
} else {
const clickableElements = element.querySelectorAll(CLICKABLE_SELECTOR);
if (clickableElements.length === 1) {
const clickableElement = clickableElements[0];
if (clickableElement !== eventTarget && !clickableElement.contains(eventTarget)) clickableElement.click();
}
}
}
onSubmitItemRef.current?.({
element,
event,
label: itemLabel,
value: nextValue
});
};
$[16] = dropdownElement;
$[17] = t9;
} else t9 = $[17];
const handleSubmitItem = t9;
let t10;
if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
t10 = (t11) => {
const { clientX, clientY } = t11;
currentInputMethodRef.current = "mouse";
const initialPosition = mouseDownPositionRef.current;
if (!initialPosition) return;
if (Math.abs(initialPosition.clientX - clientX) < 12 && Math.abs(initialPosition.clientY - clientY) < 12) return;
setIsOpening(false);
};
$[18] = t10;
} else t10 = $[18];
const handleMouseMove = t10;
let t11;
if ($[19] !== dropdownElement || $[20] !== onActiveItem) {
t11 = (event_0) => {
if (!hasItemsRef.current) return;
if (currentInputMethodRef.current !== "mouse") return;
if (!dropdownElement) return;
const itemElements = getItemElements(dropdownElement);
if (!itemElements) return;
const eventTarget_0 = event_0.target;
const element_0 = eventTarget_0.closest(ITEM_SELECTOR) ?? eventTarget_0;
for (const itemElement of itemElements) if (itemElement === element_0) {
setActiveItem({
dropdownElement,
element: element_0,
event: event_0,
onActiveItem
});
return;
}
};
$[19] = dropdownElement;
$[20] = onActiveItem;
$[21] = t11;
} else t11 = $[21];
const handleMouseOver = t11;
let t12;
if ($[22] !== dropdownElement) {
t12 = (event_1) => {
if (!hasItemsRef.current) return;
const activeItem = getActiveItemElement(dropdownElement);
if (!activeItem) return;
const eventRelatedTarget = event_1.relatedTarget;
if (activeItem !== event_1.target || activeItem.contains(eventRelatedTarget)) return;
delete activeItem.dataset.uktActive;
};
$[22] = dropdownElement;
$[23] = t12;
} else t12 = $[23];
const handleMouseOut = t12;
let t13;
if ($[24] !== onMouseDown) {
t13 = (event_2) => {
if (onMouseDown) onMouseDown(event_2);
if (isOpenRef.current) return;
setIsOpen(true);
setIsOpening(true);
mouseDownPositionRef.current = {
clientX: event_2.clientX,
clientY: event_2.clientY
};
isOpeningTimerRef.current = setTimeout(() => {
setIsOpening(false);
isOpeningTimerRef.current = null;
}, 1e3);
};
$[24] = onMouseDown;
$[25] = t13;
} else t13 = $[25];
const handleMouseDown = t13;
let t14;
if ($[26] !== handleSubmitItem || $[27] !== onMouseUp) {
t14 = (event_3) => {
if (onMouseUp) onMouseUp(event_3);
if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current != null) return;
const eventTarget_1 = event_3.target;
if (!eventTarget_1.closest(".uktdropdown-body")) {
if (!isOpeningRef.current && inputElementRef.current !== eventTarget_1.ownerDocument.activeElement) closeDropdown();
return;
}
if (!hasItemsRef.current) return;
handleSubmitItem(event_3);
};
$[26] = handleSubmitItem;
$[27] = onMouseUp;
$[28] = t14;
} else t14 = $[28];
const handleMouseUp = t14;
let t15;
if ($[29] !== dropdownElement || $[30] !== handleSubmitItem || $[31] !== onActiveItem) {
t15 = (event_4) => {
const { altKey, ctrlKey, key, metaKey } = event_4;
const eventTarget_2 = event_4.target;
if (!dropdownElement) return;
const onEventHandled = () => {
event_4.stopPropagation();
event_4.preventDefault();
currentInputMethodRef.current = "keyboard";
};
const isEventTargetingDropdown = dropdownElement.contains(eventTarget_2);
if (!isOpenRef.current) {
if (!isEventTargetingDropdown) return;
if (key === " " || key === "Enter" || hasItemsRef.current && (key === "ArrowUp" || key === "ArrowDown")) {
onEventHandled();
setIsOpen(true);
}
return;
}
const isTargetUsingKeyEvents = isEventTargetUsingKeyEvent(event_4);
if (hasItemsRef.current && !isTargetUsingKeyEvents) {
let isEditingCharacters = !ctrlKey && !metaKey && /^[A-Za-z0-9]$/.test(key);
if (!isEditingCharacters && enteredCharactersRef.current) isEditingCharacters = key === " " || key === "Backspace";
if (isEditingCharacters) {
onEventHandled();
if (key === "Backspace") enteredCharactersRef.current = enteredCharactersRef.current.slice(0, -1);
else enteredCharactersRef.current = enteredCharactersRef.current + key;
setActiveItem({
dropdownElement,
event: event_4,
isExactMatch: allowCreateRef.current,
onActiveItem,
text: enteredCharactersRef.current
});
if (clearEnteredCharactersTimerRef.current != null) clearTimeout(clearEnteredCharactersTimerRef.current);
clearEnteredCharactersTimerRef.current = setTimeout(() => {
enteredCharactersRef.current = "";
clearEnteredCharactersTimerRef.current = null;
}, 1500);
return;
}
}
if (key === "Enter" || key === " " && !inputElementRef.current) {
onEventHandled();
handleSubmitItem(event_4);
return;
}
if (key === "Escape" || isEventTargetingDropdown && key === " " && !hasItemsRef.current) {
if (hasItemsRef.current || !isTargetUsingKeyEvents) closeDropdown();
return;
}
if (hasItemsRef.current) {
if (key === "ArrowUp") {
onEventHandled();
if (altKey || metaKey) setActiveItem({
dropdownElement,
event: event_4,
index: 0,
onActiveItem
});
else setActiveItem({
dropdownElement,
event: event_4,
indexAddend: -1,
onActiveItem
});
return;
}
if (key === "ArrowDown") {
onEventHandled();
if (altKey || metaKey) setActiveItem({
dropdownElement,
event: event_4,
index: -1,
onActiveItem
});
else setActiveItem({
dropdownElement,
event: event_4,
indexAddend: 1,
onActiveItem
});
return;
}
}
};
$[29] = dropdownElement;
$[30] = handleSubmitItem;
$[31] = onActiveItem;
$[32] = t15;
} else t15 = $[32];
const handleKeyDown = t15;
let t16;
if ($[33] !== handleKeyDown) {
t16 = {
ignoreUsedKeyboardEvents: false,
onKeyDown: handleKeyDown
};
$[33] = handleKeyDown;
$[34] = t16;
} else t16 = $[34];
useKeyboardEvents(t16);
let t17;
if ($[35] !== isOpenOnMount || $[36] !== onActiveItem) {
t17 = (ref) => {
setDropdownElement(ref);
if (!ref) return;
const { ownerDocument } = ref;
let inputElement = inputElementRef.current;
if (!inputElement && ref.firstElementChild) {
if (ref.firstElementChild.matches(TEXT_INPUT_SELECTOR)) inputElement = ref.firstElementChild;
else inputElement = ref.firstElementChild.querySelector(TEXT_INPUT_SELECTOR);
inputElementRef.current = inputElement;
}
const handleGlobalMouseDown = (t18) => {
const { target } = t18;
const eventTarget_3 = target;
if (!ref.contains(eventTarget_3)) closeDropdown();
};
const handleGlobalMouseUp = (t19) => {
const { target: target_0 } = t19;
if (!isOpenRef.current || closingTimerRef.current != null) return;
if (isOpeningRef.current) {
setIsOpening(false);
if (isOpeningTimerRef.current != null) {
clearTimeout(isOpeningTimerRef.current);
isOpeningTimerRef.current = null;
}
return;
}
const eventTarget_4 = target_0;
if (!ref.contains(eventTarget_4)) closeDropdown();
};
const handleGlobalFocusIn = (t20) => {
const { target: target_1 } = t20;
if (!isOpenRef.current) return;
const eventTarget_5 = target_1;
if (ref.contains(eventTarget_5) || eventTarget_5.contains(ref)) return;
closeDropdown();
};
document.addEventListener("focusin", handleGlobalFocusIn);
document.addEventListener("mousedown", handleGlobalMouseDown);
document.addEventListener("mouseup", handleGlobalMouseUp);
if (ownerDocument !== document) {
ownerDocument.addEventListener("focusin", handleGlobalFocusIn);
ownerDocument.addEventListener("mousedown", handleGlobalMouseDown);
ownerDocument.addEventListener("mouseup", handleGlobalMouseUp);
}
if (isOpenOnMount) ref.focus();
const handleInput = (event_5) => {
if (!isOpenRef.current) setIsOpen(true);
const input = event_5.target;
const isDeleting = enteredCharactersRef.current.length > input.value.length;
enteredCharactersRef.current = input.value;
if (isDeleting && input.value.length && getActiveItemElement(ref)) return;
setActiveItem({
dropdownElement: ref,
event: event_5,
isExactMatch: allowCreateRef.current,
onActiveItem,
text: enteredCharactersRef.current
});
};
if (inputElement) inputElement.addEventListener("input", handleInput);
return () => {
document.removeEventListener("focusin", handleGlobalFocusIn);
document.removeEventListener("mousedown", handleGlobalMouseDown);
document.removeEventListener("mouseup", handleGlobalMouseUp);
if (ownerDocument !== document) {
ownerDocument.removeEventListener("focusin", handleGlobalFocusIn);
ownerDocument.removeEventListener("mousedown", handleGlobalMouseDown);
ownerDocument.removeEventListener("mouseup", handleGlobalMouseUp);
}
if (inputElement) inputElement.removeEventListener("input", handleInput);
};
};
$[35] = isOpenOnMount;
$[36] = onActiveItem;
$[37] = t17;
} else t17 = $[37];
const handleRef = t17;
if (!isValidElement(trigger)) if (isSearchable) {
const t18 = value ?? "";
let t19;
if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
t19 = () => setIsOpen(true);
$[38] = t19;
} else t19 = $[38];
let t20;
if ($[39] !== bodyId || $[40] !== disabled || $[41] !== isOpen || $[42] !== name || $[43] !== placeholder || $[44] !== popupRole || $[45] !== t18 || $[46] !== tabIndex) {
t20 = /* @__PURE__ */ jsx("input", {
"aria-controls": bodyId,
"aria-expanded": isOpen,
"aria-haspopup": popupRole,
autoComplete: "off",
className: "uktdropdown-trigger",
defaultValue: t18,
disabled,
name,
onFocus: t19,
placeholder,
ref: inputElementRef,
tabIndex,
type: "text"
});
$[39] = bodyId;
$[40] = disabled;
$[41] = isOpen;
$[42] = name;
$[43] = placeholder;
$[44] = popupRole;
$[45] = t18;
$[46] = tabIndex;
$[47] = t20;
} else t20 = $[47];
trigger = t20;
} else {
let t18;
if ($[48] !== bodyId || $[49] !== isOpen || $[50] !== popupRole || $[51] !== trigger) {
t18 = /* @__PURE__ */ jsx("button", {
"aria-controls": bodyId,
"aria-expanded": isOpen,
"aria-haspopup": popupRole,
className: "uktdropdown-trigger",
tabIndex: 0,
type: "button",
children: trigger
});
$[48] = bodyId;
$[49] = isOpen;
$[50] = popupRole;
$[51] = trigger;
$[52] = t18;
} else t18 = $[52];
trigger = t18;
}
else {
const triggerProps = trigger.props;
const t18 = trigger;
const t19 = triggerProps["aria-controls"] ?? bodyId;
const t20 = triggerProps["aria-expanded"] ?? isOpen;
const t21 = triggerProps["aria-haspopup"] ?? popupRole;
let t22;
if ($[53] !== t18 || $[54] !== t19 || $[55] !== t20 || $[56] !== t21) {
t22 = cloneElement(t18, {
"aria-controls": t19,
"aria-expanded": t20,
"aria-haspopup": t21
});
$[53] = t18;
$[54] = t19;
$[55] = t20;
$[56] = t21;
$[57] = t22;
} else t22 = $[57];
trigger = t22;
}
if (label != null) {
let t18;
if ($[58] !== label) {
t18 = /* @__PURE__ */ jsx("div", {
className: "uktdropdown-label-text",
children: label
});
$[58] = label;
$[59] = t18;
} else t18 = $[59];
let t19;
if ($[60] !== t18 || $[61] !== trigger) {
t19 = /* @__PURE__ */ jsxs("label", {
className: "uktdropdown-label",
children: [t18, trigger]
});
$[60] = t18;
$[61] = trigger;
$[62] = t19;
} else t19 = $[62];
trigger = t19;
}
let t18;
if ($[63] !== minHeightBody) {
t18 = minHeightBody != null && minHeightBody > 0 ? { "--uktdd-body-min-height": `${minHeightBody}px` } : null;
$[63] = minHeightBody;
$[64] = t18;
} else t18 = $[64];
let t19;
if ($[65] !== minWidthBody) {
t19 = minWidthBody != null && minWidthBody > 0 ? { "--uktdd-body-min-width": `${minWidthBody}px` } : null;
$[65] = minWidthBody;
$[66] = t19;
} else t19 = $[66];
let t20;
if ($[67] !== styleFromProps || $[68] !== t18 || $[69] !== t19) {
t20 = {
...styleFromProps,
...t18,
...t19
};
$[67] = styleFromProps;
$[68] = t18;
$[69] = t19;
$[70] = t20;
} else t20 = $[70];
const style = t20;
let t21;
if ($[71] === Symbol.for("react.memo_cache_sentinel")) {
t21 = /* @__PURE__ */ jsx("style", {
href: "@acusti/dropdown/Dropdown",
precedence: "medium",
children: Dropdown_default
});
$[71] = t21;
} else t21 = $[71];
let t22;
if ($[72] !== className || $[73] !== disabled || $[74] !== isOpen || $[75] !== isSearchable) {
t22 = clsx("uktdropdown", className, {
disabled,
"is-open": isOpen,
"is-searchable": isSearchable
});
$[72] = className;
$[73] = disabled;
$[74] = isOpen;
$[75] = isSearchable;
$[76] = t22;
} else t22 = $[76];
let t23;
if ($[77] !== bodyId || $[78] !== children || $[79] !== childrenCount || $[80] !== hasItems || $[81] !== isOpen || $[82] !== popupRole) {
t23 = isOpen ? /* @__PURE__ */ jsx("div", {
className: clsx("uktdropdown-body", { "has-items": hasItems }),
id: bodyId,
role: popupRole,
children: /* @__PURE__ */ jsx("div", {
className: "uktdropdown-content",
children: childrenCount > 1 ? children[1] : children
})
}) : null;
$[77] = bodyId;
$[78] = children;
$[79] = childrenCount;
$[80] = hasItems;
$[81] = isOpen;
$[82] = popupRole;
$[83] = t23;
} else t23 = $[83];
let t24;
if ($[84] !== handleMouseDown || $[85] !== handleMouseOut || $[86] !== handleMouseOver || $[87] !== handleMouseUp || $[88] !== handleRef || $[89] !== onClick || $[90] !== style || $[91] !== t22 || $[92] !== t23 || $[93] !== trigger) {
t24 = /* @__PURE__ */ jsxs(Fragment, { children: [t21, /* @__PURE__ */ jsxs("div", {
className: t22,
onClick,
onMouseDown: handleMouseDown,
onMouseMove: handleMouseMove,
onMouseOut: handleMouseOut,
onMouseOver: handleMouseOver,
onMouseUp: handleMouseUp,
ref: handleRef,
style,
children: [trigger, t23]
})] });
$[84] = handleMouseDown;
$[85] = handleMouseOut;
$[86] = handleMouseOver;
$[87] = handleMouseUp;
$[88] = handleRef;
$[89] = onClick;
$[90] = style;
$[91] = t22;
$[92] = t23;
$[93] = trigger;
$[94] = t24;
} else t24 = $[94];
return t24;
}
//#endregion
export { Dropdown as default };
//# sourceMappingURL=Dropdown.js.map