@acusti/dropdown 0.51.0 → 0.53.0

package/dist/Dropdown.js

@@ -1,11 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { SYSTEM_UI_FONT, Style } from "@acusti/styling";
 import useBoundingClientRect from "@acusti/use-bounding-client-rect";
 import useKeyboardEvents, { isEventTargetUsingKeyEvent } from "@acusti/use-keyboard-events";
 import clsx from "clsx";
-import { Children, useState, useId, useRef, useEffect, isValidElement, Fragment } from "react";
+import { Children, Fragment, isValidElement, useEffect, useRef, useState } from "react";
 import { getBestMatch } from "@acusti/matchmaking";
+import { jsx, jsxs } from "react/jsx-runtime";
 const ROOT_CLASS_NAME = "uktdropdown";
 const ROOT_SELECTOR = `.${ROOT_CLASS_NAME}`;
 const BODY_CLASS_NAME = `${ROOT_CLASS_NAME}-body`;
@@ -39,6 +39,7 @@ ${TRIGGER_SELECTOR} {
 }
 ${ROOT_SELECTOR} {
   width: max-content;
+  anchor-scope: --uktdd-anchor;
 }
 ${ROOT_SELECTOR}.disabled {
   pointer-events: none;
@@ -46,6 +47,9 @@ ${ROOT_SELECTOR}.disabled {
 ${ROOT_SELECTOR} > * {
   cursor: default;
 }
+${ROOT_SELECTOR} > :first-child {
+  anchor-name: --uktdd-anchor;
+}
 ${LABEL_SELECTOR} {
   display: flex;
   align-items: center;
@@ -56,6 +60,7 @@ ${LABEL_TEXT_SELECTOR} {
 ${BODY_SELECTOR} {
   box-sizing: border-box;
   position: absolute;
+  position-anchor: --uktdd-anchor;
   top: anchor(bottom);
   left: anchor(left);
   bottom: auto;
@@ -99,932 +104,696 @@ ${BODY_SELECTOR} [data-ukt-active] {
 `;
 const ITEM_SELECTOR = `[data-ukt-item], [data-ukt-value]`;
 const getItemElements = (dropdownElement) => {
-  if (!dropdownElement) return null;
-  const bodyElement = dropdownElement.querySelector(BODY_SELECTOR);
-  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;
+	if (!dropdownElement) return null;
+	const bodyElement = dropdownElement.querySelector(BODY_SELECTOR);
+	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;
 };
 const getActiveItemElement = (dropdownElement) => {
-  if (!dropdownElement) return null;
-  return dropdownElement.querySelector("[data-ukt-active]");
+	if (!dropdownElement) return null;
+	return dropdownElement.querySelector("[data-ukt-active]");
 };
-const clearItemElementsState = (itemElements) => {
-  itemElements.forEach((itemElement) => {
-    if (itemElement.hasAttribute("data-ukt-active")) {
-      delete itemElement.dataset.uktActive;
-    }
-  });
+var clearItemElementsState = (itemElements) => {
+	itemElements.forEach((itemElement) => {
+		if (itemElement.hasAttribute("data-ukt-active")) delete itemElement.dataset.uktActive;
+	});
 };
-const 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) {
-    const isScrollable = parentElement.scrollHeight > parentElement.clientHeight + 15;
-    if (isScrollable) {
-      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;
-    }
-  }
+const 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;
+		}
+	}
 };
-const CHILDREN_ERROR = "@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.";
-const TEXT_INPUT_SELECTOR = "input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea";
+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(102);
-  const {
-    allowCreate,
-    allowEmpty: t1,
-    children,
-    className,
-    disabled,
-    hasItems: t2,
-    isOpenOnMount,
-    isSearchable,
-    keepOpenOnSubmit: t3,
-    label,
-    minHeightBody: t4,
-    minWidthBody: t5,
-    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 minHeightBody = t4 === void 0 ? 30 : t4;
-  const minWidthBody = t5 === void 0 ? 100 : t5;
-  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 [dropdownBodyElement, setDropdownBodyElement] = useState(null);
-  const id = useId();
-  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 t6;
-  let t7;
-  if ($[0] !== allowCreate || $[1] !== allowEmpty || $[2] !== hasItems || $[3] !== isOpen || $[4] !== isOpening || $[5] !== keepOpenOnSubmit || $[6] !== onClose || $[7] !== onOpen || $[8] !== onSubmitItem || $[9] !== value) {
-    t6 = () => {
-      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;
-    };
-    t7 = [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] = t6;
-    $[11] = t7;
-  } else {
-    t6 = $[10];
-    t7 = $[11];
-  }
-  useEffect(t6, t7);
-  const isMountedRef = useRef(false);
-  let t8;
-  let t9;
-  if ($[12] !== isOpen) {
-    t8 = () => {
-      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();
-        }
-      }
-    };
-    t9 = [isOpen];
-    $[12] = isOpen;
-    $[13] = t8;
-    $[14] = t9;
-  } else {
-    t8 = $[13];
-    t9 = $[14];
-  }
-  useEffect(t8, t9);
-  let t10;
-  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = () => {
-      setIsOpen(false);
-      setIsOpening(false);
-      mouseDownPositionRef.current = null;
-      if (closingTimerRef.current) {
-        clearTimeout(closingTimerRef.current);
-        closingTimerRef.current = null;
-      }
-    };
-    $[15] = t10;
-  } else {
-    t10 = $[15];
-  }
-  const closeDropdown = t10;
-  let t11;
-  if ($[16] !== dropdownElement) {
-    t11 = (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 (onSubmitItemRef.current) {
-        onSubmitItemRef.current({
-          element,
-          event,
-          label: itemLabel,
-          value: nextValue
-        });
-      }
-    };
-    $[16] = dropdownElement;
-    $[17] = t11;
-  } else {
-    t11 = $[17];
-  }
-  const handleSubmitItem = t11;
-  let t12;
-  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = (t132) => {
-      const {
-        clientX,
-        clientY
-      } = t132;
-      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] = t12;
-  } else {
-    t12 = $[18];
-  }
-  const handleMouseMove = t12;
-  let t13;
-  if ($[19] !== dropdownElement || $[20] !== onActiveItem) {
-    t13 = (event_0) => {
-      if (!hasItemsRef.current) {
-        return;
-      }
-      if (currentInputMethodRef.current !== "mouse") {
-        return;
-      }
-      if (!dropdownElement) {
-        return;
-      }
-      const itemElements = getItemElements(dropdownElement);
-      if (!itemElements) {
-        return;
-      }
-      const eventTarget = event_0.target;
-      const item = eventTarget.closest(ITEM_SELECTOR);
-      const element_0 = item ?? eventTarget;
-      for (const itemElement of itemElements) {
-        if (itemElement === element_0) {
-          setActiveItem({
-            dropdownElement,
-            element: element_0,
-            event: event_0,
-            onActiveItem
-          });
-          return;
-        }
-      }
-    };
-    $[19] = dropdownElement;
-    $[20] = onActiveItem;
-    $[21] = t13;
-  } else {
-    t13 = $[21];
-  }
-  const handleMouseOver = t13;
-  let t14;
-  if ($[22] !== dropdownElement) {
-    t14 = (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] = t14;
-  } else {
-    t14 = $[23];
-  }
-  const handleMouseOut = t14;
-  let t15;
-  if ($[24] !== onMouseDown) {
-    t15 = (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] = t15;
-  } else {
-    t15 = $[25];
-  }
-  const handleMouseDown = t15;
-  let t16;
-  if ($[26] !== handleSubmitItem || $[27] !== onMouseUp) {
-    t16 = (event_3) => {
-      if (onMouseUp) {
-        onMouseUp(event_3);
-      }
-      if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current) {
-        return;
-      }
-      const eventTarget_0 = event_3.target;
-      if (!eventTarget_0.closest(BODY_SELECTOR)) {
-        if (!isOpeningRef.current && inputElementRef.current !== eventTarget_0.ownerDocument.activeElement) {
-          closeDropdown();
-        }
-        return;
-      }
-      if (!hasItemsRef.current) {
-        return;
-      }
-      handleSubmitItem(event_3);
-    };
-    $[26] = handleSubmitItem;
-    $[27] = onMouseUp;
-    $[28] = t16;
-  } else {
-    t16 = $[28];
-  }
-  const handleMouseUp = t16;
-  let t17;
-  if ($[29] !== dropdownElement || $[30] !== handleSubmitItem || $[31] !== onActiveItem) {
-    t17 = (event_4) => {
-      const {
-        altKey,
-        ctrlKey,
-        key,
-        metaKey
-      } = event_4;
-      const eventTarget_1 = event_4.target;
-      if (!dropdownElement) {
-        return;
-      }
-      const onEventHandled = () => {
-        event_4.stopPropagation();
-        event_4.preventDefault();
-        currentInputMethodRef.current = "keyboard";
-      };
-      const isEventTargetingDropdown = dropdownElement.contains(eventTarget_1);
-      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) {
-            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] = t17;
-  } else {
-    t17 = $[32];
-  }
-  const handleKeyDown = t17;
-  let t18;
-  if ($[33] !== handleKeyDown) {
-    t18 = {
-      ignoreUsedKeyboardEvents: false,
-      onKeyDown: handleKeyDown
-    };
-    $[33] = handleKeyDown;
-    $[34] = t18;
-  } else {
-    t18 = $[34];
-  }
-  useKeyboardEvents(t18);
-  let t19;
-  if ($[35] !== isOpenOnMount || $[36] !== onActiveItem) {
-    t19 = (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 = (t202) => {
-        const {
-          target
-        } = t202;
-        const eventTarget_2 = target;
-        if (!ref.contains(eventTarget_2)) {
-          closeDropdown();
-        }
-      };
-      const handleGlobalMouseUp = (t212) => {
-        const {
-          target: target_0
-        } = t212;
-        if (!isOpenRef.current || closingTimerRef.current) {
-          return;
-        }
-        if (isOpeningRef.current) {
-          setIsOpening(false);
-          if (isOpeningTimerRef.current) {
-            clearTimeout(isOpeningTimerRef.current);
-            isOpeningTimerRef.current = null;
-          }
-          return;
-        }
-        const eventTarget_3 = target_0;
-        if (!ref.contains(eventTarget_3)) {
-          closeDropdown();
-        }
-      };
-      const handleGlobalFocusIn = (t222) => {
-        const {
-          target: target_1
-        } = t222;
-        if (!isOpenRef.current) {
-          return;
-        }
-        const eventTarget_4 = target_1;
-        if (ref.contains(eventTarget_4) || eventTarget_4.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] = t19;
-  } else {
-    t19 = $[37];
-  }
-  const handleRef = t19;
-  if (!isValidElement(trigger)) {
-    if (isSearchable) {
-      const t202 = value ?? "";
-      let t212;
-      if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
-        t212 = () => setIsOpen(true);
-        $[38] = t212;
-      } else {
-        t212 = $[38];
-      }
-      let t222;
-      if ($[39] !== disabled || $[40] !== name || $[41] !== placeholder || $[42] !== t202 || $[43] !== tabIndex) {
-        t222 = /* @__PURE__ */ jsx("input", { autoComplete: "off", className: TRIGGER_CLASS_NAME, defaultValue: t202, disabled, name, onFocus: t212, placeholder, ref: inputElementRef, tabIndex, type: "text" });
-        $[39] = disabled;
-        $[40] = name;
-        $[41] = placeholder;
-        $[42] = t202;
-        $[43] = tabIndex;
-        $[44] = t222;
-      } else {
-        t222 = $[44];
-      }
-      trigger = t222;
-    } else {
-      let t202;
-      if ($[45] !== trigger) {
-        t202 = /* @__PURE__ */ jsx("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0, type: "button", children: trigger });
-        $[45] = trigger;
-        $[46] = t202;
-      } else {
-        t202 = $[46];
-      }
-      trigger = t202;
-    }
-  }
-  if (label) {
-    let t202;
-    if ($[47] !== label) {
-      t202 = /* @__PURE__ */ jsx("div", { className: LABEL_TEXT_CLASS_NAME, children: label });
-      $[47] = label;
-      $[48] = t202;
-    } else {
-      t202 = $[48];
-    }
-    let t212;
-    if ($[49] !== t202 || $[50] !== trigger) {
-      t212 = /* @__PURE__ */ jsxs("label", { className: LABEL_CLASS_NAME, children: [
-        t202,
-        trigger
-      ] });
-      $[49] = t202;
-      $[50] = trigger;
-      $[51] = t212;
-    } else {
-      t212 = $[51];
-    }
-    trigger = t212;
-  }
-  const dropdownRect = useBoundingClientRect(dropdownElement);
-  const dropdownBodyRect = useBoundingClientRect(dropdownBodyElement);
-  let t20;
-  if ($[52] !== dropdownBodyElement) {
-    t20 = getBoundingAncestor(dropdownBodyElement);
-    $[52] = dropdownBodyElement;
-    $[53] = t20;
-  } else {
-    t20 = $[53];
-  }
-  const boundingElement = t20;
-  const boundingElementRect = useBoundingClientRect(boundingElement);
-  let maxHeight;
-  let maxWidth;
-  if (dropdownBodyRect.top != null && dropdownRect.top != null && boundingElementRect.top != null) {
-    const maxHeightUp = dropdownBodyRect.bottom - boundingElementRect.top;
-    const maxHeightDown = boundingElementRect.bottom - dropdownBodyRect.top;
-    let t212;
-    if ($[54] !== dropdownBodyRect.top || $[55] !== dropdownRect.top || $[56] !== maxHeightDown || $[57] !== maxHeightUp) {
-      t212 = Math.round(dropdownBodyRect.top > dropdownRect.top ? maxHeightDown : maxHeightUp);
-      $[54] = dropdownBodyRect.top;
-      $[55] = dropdownRect.top;
-      $[56] = maxHeightDown;
-      $[57] = maxHeightUp;
-      $[58] = t212;
-    } else {
-      t212 = $[58];
-    }
-    maxHeight = t212;
-    const maxWidthLeft = dropdownBodyRect.right - boundingElementRect.left;
-    const maxWidthRight = boundingElementRect.right - dropdownBodyRect.left;
-    let t222;
-    if ($[59] !== dropdownBodyRect.left || $[60] !== dropdownRect.left || $[61] !== maxWidthLeft || $[62] !== maxWidthRight) {
-      t222 = Math.round(dropdownBodyRect.left > dropdownRect.left ? maxWidthRight : maxWidthLeft);
-      $[59] = dropdownBodyRect.left;
-      $[60] = dropdownRect.left;
-      $[61] = maxWidthLeft;
-      $[62] = maxWidthRight;
-      $[63] = t222;
-    } else {
-      t222 = $[63];
-    }
-    maxWidth = t222;
-  }
-  let t21;
-  if ($[64] !== maxHeight || $[65] !== minHeightBody) {
-    t21 = maxHeight != null && maxHeight > minHeightBody ? {
-      [BODY_MAX_HEIGHT_VAR]: `calc(${maxHeight}px - var(--uktdd-body-buffer))`
-    } : null;
-    $[64] = maxHeight;
-    $[65] = minHeightBody;
-    $[66] = t21;
-  } else {
-    t21 = $[66];
-  }
-  let t22;
-  if ($[67] !== maxWidth || $[68] !== minWidthBody) {
-    t22 = maxWidth != null && maxWidth > minWidthBody ? {
-      [BODY_MAX_WIDTH_VAR]: `calc(${maxWidth}px - var(--uktdd-body-buffer))`
-    } : null;
-    $[67] = maxWidth;
-    $[68] = minWidthBody;
-    $[69] = t22;
-  } else {
-    t22 = $[69];
-  }
-  let t23;
-  if ($[70] !== styleFromProps || $[71] !== t21 || $[72] !== t22) {
-    t23 = {
-      ...styleFromProps,
-      ...t21,
-      ...t22
-    };
-    $[70] = styleFromProps;
-    $[71] = t21;
-    $[72] = t22;
-    $[73] = t23;
-  } else {
-    t23 = $[73];
-  }
-  const style = t23;
-  const anchorStyles = `[data-ukt-id="${id}"] > :first-child {
-  anchor-name: --uktdd-anchor${id};
-}
-[data-ukt-id="${id}"] ${BODY_SELECTOR} {
-  position-anchor: --uktdd-anchor${id};
-}`;
-  let t24;
-  if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
-    t24 = /* @__PURE__ */ jsx(Style, { href: "@acusti/dropdown/Dropdown", children: STYLES });
-    $[74] = t24;
-  } else {
-    t24 = $[74];
-  }
-  const t25 = `@acusti/dropdown/Dropdown/${id}`;
-  let t26;
-  if ($[75] !== anchorStyles || $[76] !== t25) {
-    t26 = /* @__PURE__ */ jsx(Style, { href: t25, children: anchorStyles });
-    $[75] = anchorStyles;
-    $[76] = t25;
-    $[77] = t26;
-  } else {
-    t26 = $[77];
-  }
-  let t27;
-  if ($[78] !== className || $[79] !== disabled || $[80] !== isOpen || $[81] !== isSearchable) {
-    t27 = clsx(ROOT_CLASS_NAME, className, {
-      disabled,
-      "is-open": isOpen,
-      "is-searchable": isSearchable
-    });
-    $[78] = className;
-    $[79] = disabled;
-    $[80] = isOpen;
-    $[81] = isSearchable;
-    $[82] = t27;
-  } else {
-    t27 = $[82];
-  }
-  let t28;
-  if ($[83] !== children || $[84] !== childrenCount || $[85] !== isOpen) {
-    t28 = isOpen ? /* @__PURE__ */ jsx("div", { className: BODY_CLASS_NAME, ref: setDropdownBodyElement, children: childrenCount > 1 ? children[1] : children }) : null;
-    $[83] = children;
-    $[84] = childrenCount;
-    $[85] = isOpen;
-    $[86] = t28;
-  } else {
-    t28 = $[86];
-  }
-  let t29;
-  if ($[87] !== handleMouseDown || $[88] !== handleMouseOut || $[89] !== handleMouseOver || $[90] !== handleMouseUp || $[91] !== handleRef || $[92] !== id || $[93] !== onClick || $[94] !== style || $[95] !== t27 || $[96] !== t28 || $[97] !== trigger) {
-    t29 = /* @__PURE__ */ jsxs("div", { className: t27, "data-ukt-id": id, onClick, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseOut: handleMouseOut, onMouseOver: handleMouseOver, onMouseUp: handleMouseUp, ref: handleRef, style, children: [
-      trigger,
-      t28
-    ] });
-    $[87] = handleMouseDown;
-    $[88] = handleMouseOut;
-    $[89] = handleMouseOver;
-    $[90] = handleMouseUp;
-    $[91] = handleRef;
-    $[92] = id;
-    $[93] = onClick;
-    $[94] = style;
-    $[95] = t27;
-    $[96] = t28;
-    $[97] = trigger;
-    $[98] = t29;
-  } else {
-    t29 = $[98];
-  }
-  let t30;
-  if ($[99] !== t26 || $[100] !== t29) {
-    t30 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t24,
-      t26,
-      t29
-    ] });
-    $[99] = t26;
-    $[100] = t29;
-    $[101] = t30;
-  } else {
-    t30 = $[101];
-  }
-  return t30;
+	const $ = c(86);
+	const { allowCreate, allowEmpty: t1, children, className, disabled, hasItems: t2, isOpenOnMount, isSearchable, keepOpenOnSubmit: t3, label, minHeightBody: t4, minWidthBody: t5, 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 minHeightBody = t4 === void 0 ? 30 : t4;
+	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 [dropdownBodyElement, setDropdownBodyElement] = useState(null);
+	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 t6;
+	let t7;
+	if ($[0] !== allowCreate || $[1] !== allowEmpty || $[2] !== hasItems || $[3] !== isOpen || $[4] !== isOpening || $[5] !== keepOpenOnSubmit || $[6] !== onClose || $[7] !== onOpen || $[8] !== onSubmitItem || $[9] !== value) {
+		t6 = () => {
+			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;
+		};
+		t7 = [
+			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] = t6;
+		$[11] = t7;
+	} else {
+		t6 = $[10];
+		t7 = $[11];
+	}
+	useEffect(t6, t7);
+	const isMountedRef = useRef(false);
+	let t8;
+	let t9;
+	if ($[12] !== isOpen) {
+		t8 = () => {
+			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();
+		};
+		t9 = [isOpen];
+		$[12] = isOpen;
+		$[13] = t8;
+		$[14] = t9;
+	} else {
+		t8 = $[13];
+		t9 = $[14];
+	}
+	useEffect(t8, t9);
+	let t10;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = () => {
+			setIsOpen(false);
+			setIsOpening(false);
+			mouseDownPositionRef.current = null;
+			if (closingTimerRef.current != null) {
+				clearTimeout(closingTimerRef.current);
+				closingTimerRef.current = null;
+			}
+		};
+		$[15] = t10;
+	} else t10 = $[15];
+	const closeDropdown = t10;
+	let t11;
+	if ($[16] !== dropdownElement) {
+		t11 = (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] = t11;
+	} else t11 = $[17];
+	const handleSubmitItem = t11;
+	let t12;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (t13) => {
+			const { clientX, clientY } = t13;
+			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] = t12;
+	} else t12 = $[18];
+	const handleMouseMove = t12;
+	let t13;
+	if ($[19] !== dropdownElement || $[20] !== onActiveItem) {
+		t13 = (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] = t13;
+	} else t13 = $[21];
+	const handleMouseOver = t13;
+	let t14;
+	if ($[22] !== dropdownElement) {
+		t14 = (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] = t14;
+	} else t14 = $[23];
+	const handleMouseOut = t14;
+	let t15;
+	if ($[24] !== onMouseDown) {
+		t15 = (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] = t15;
+	} else t15 = $[25];
+	const handleMouseDown = t15;
+	let t16;
+	if ($[26] !== handleSubmitItem || $[27] !== onMouseUp) {
+		t16 = (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(BODY_SELECTOR)) {
+				if (!isOpeningRef.current && inputElementRef.current !== eventTarget_1.ownerDocument.activeElement) closeDropdown();
+				return;
+			}
+			if (!hasItemsRef.current) return;
+			handleSubmitItem(event_3);
+		};
+		$[26] = handleSubmitItem;
+		$[27] = onMouseUp;
+		$[28] = t16;
+	} else t16 = $[28];
+	const handleMouseUp = t16;
+	let t17;
+	if ($[29] !== dropdownElement || $[30] !== handleSubmitItem || $[31] !== onActiveItem) {
+		t17 = (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] = t17;
+	} else t17 = $[32];
+	const handleKeyDown = t17;
+	let t18;
+	if ($[33] !== handleKeyDown) {
+		t18 = {
+			ignoreUsedKeyboardEvents: false,
+			onKeyDown: handleKeyDown
+		};
+		$[33] = handleKeyDown;
+		$[34] = t18;
+	} else t18 = $[34];
+	useKeyboardEvents(t18);
+	let t19;
+	if ($[35] !== isOpenOnMount || $[36] !== onActiveItem) {
+		t19 = (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 = (t20) => {
+				const { target } = t20;
+				const eventTarget_3 = target;
+				if (!ref.contains(eventTarget_3)) closeDropdown();
+			};
+			const handleGlobalMouseUp = (t21) => {
+				const { target: target_0 } = t21;
+				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 = (t22) => {
+				const { target: target_1 } = t22;
+				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] = t19;
+	} else t19 = $[37];
+	const handleRef = t19;
+	if (!isValidElement(trigger)) if (isSearchable) {
+		const t20 = value ?? "";
+		let t21;
+		if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+			t21 = () => setIsOpen(true);
+			$[38] = t21;
+		} else t21 = $[38];
+		let t22;
+		if ($[39] !== disabled || $[40] !== name || $[41] !== placeholder || $[42] !== t20 || $[43] !== tabIndex) {
+			t22 = /* @__PURE__ */ jsx("input", {
+				autoComplete: "off",
+				className: TRIGGER_CLASS_NAME,
+				defaultValue: t20,
+				disabled,
+				name,
+				onFocus: t21,
+				placeholder,
+				ref: inputElementRef,
+				tabIndex,
+				type: "text"
+			});
+			$[39] = disabled;
+			$[40] = name;
+			$[41] = placeholder;
+			$[42] = t20;
+			$[43] = tabIndex;
+			$[44] = t22;
+		} else t22 = $[44];
+		trigger = t22;
+	} else {
+		let t20;
+		if ($[45] !== trigger) {
+			t20 = /* @__PURE__ */ jsx("button", {
+				className: TRIGGER_CLASS_NAME,
+				tabIndex: 0,
+				type: "button",
+				children: trigger
+			});
+			$[45] = trigger;
+			$[46] = t20;
+		} else t20 = $[46];
+		trigger = t20;
+	}
+	if (label) {
+		let t20;
+		if ($[47] !== label) {
+			t20 = /* @__PURE__ */ jsx("div", {
+				className: LABEL_TEXT_CLASS_NAME,
+				children: label
+			});
+			$[47] = label;
+			$[48] = t20;
+		} else t20 = $[48];
+		let t21;
+		if ($[49] !== t20 || $[50] !== trigger) {
+			t21 = /* @__PURE__ */ jsxs("label", {
+				className: LABEL_CLASS_NAME,
+				children: [t20, trigger]
+			});
+			$[49] = t20;
+			$[50] = trigger;
+			$[51] = t21;
+		} else t21 = $[51];
+		trigger = t21;
+	}
+	const dropdownRect = useBoundingClientRect(dropdownElement);
+	const dropdownBodyRect = useBoundingClientRect(dropdownBodyElement);
+	let t20;
+	if ($[52] !== dropdownBodyElement) {
+		t20 = getBoundingAncestor(dropdownBodyElement);
+		$[52] = dropdownBodyElement;
+		$[53] = t20;
+	} else t20 = $[53];
+	const boundingElementRect = useBoundingClientRect(t20);
+	let maxHeight;
+	if (dropdownBodyRect.top != null && dropdownRect.top != null && boundingElementRect.top != null) {
+		const maxHeightUp = dropdownBodyRect.bottom - boundingElementRect.top;
+		const maxHeightDown = boundingElementRect.bottom - dropdownBodyRect.top;
+		let t21;
+		if ($[54] !== dropdownBodyRect.top || $[55] !== dropdownRect.top || $[56] !== maxHeightDown || $[57] !== maxHeightUp) {
+			t21 = Math.round(dropdownBodyRect.top > dropdownRect.top ? maxHeightDown : maxHeightUp);
+			$[54] = dropdownBodyRect.top;
+			$[55] = dropdownRect.top;
+			$[56] = maxHeightDown;
+			$[57] = maxHeightUp;
+			$[58] = t21;
+		} else t21 = $[58];
+		maxHeight = t21;
+	}
+	let t21;
+	if ($[59] !== maxHeight || $[60] !== minHeightBody) {
+		t21 = maxHeight != null && maxHeight > minHeightBody ? { [BODY_MAX_HEIGHT_VAR]: `calc(${maxHeight}px - var(--uktdd-body-buffer))` } : null;
+		$[59] = maxHeight;
+		$[60] = minHeightBody;
+		$[61] = t21;
+	} else t21 = $[61];
+	let t22;
+	if ($[62] !== styleFromProps || $[63] !== t21) {
+		t22 = {
+			...styleFromProps,
+			...t21
+		};
+		$[62] = styleFromProps;
+		$[63] = t21;
+		$[64] = t22;
+	} else t22 = $[64];
+	const style = t22;
+	let t23;
+	if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = /* @__PURE__ */ jsx(Style, {
+			href: "@acusti/dropdown/Dropdown",
+			children: STYLES
+		});
+		$[65] = t23;
+	} else t23 = $[65];
+	let t24;
+	if ($[66] !== className || $[67] !== disabled || $[68] !== isOpen || $[69] !== isSearchable) {
+		t24 = clsx(ROOT_CLASS_NAME, className, {
+			disabled,
+			"is-open": isOpen,
+			"is-searchable": isSearchable
+		});
+		$[66] = className;
+		$[67] = disabled;
+		$[68] = isOpen;
+		$[69] = isSearchable;
+		$[70] = t24;
+	} else t24 = $[70];
+	let t25;
+	if ($[71] !== children || $[72] !== childrenCount || $[73] !== isOpen) {
+		t25 = isOpen ? /* @__PURE__ */ jsx("div", {
+			className: BODY_CLASS_NAME,
+			ref: setDropdownBodyElement,
+			children: childrenCount > 1 ? children[1] : children
+		}) : null;
+		$[71] = children;
+		$[72] = childrenCount;
+		$[73] = isOpen;
+		$[74] = t25;
+	} else t25 = $[74];
+	let t26;
+	if ($[75] !== handleMouseDown || $[76] !== handleMouseOut || $[77] !== handleMouseOver || $[78] !== handleMouseUp || $[79] !== handleRef || $[80] !== onClick || $[81] !== style || $[82] !== t24 || $[83] !== t25 || $[84] !== trigger) {
+		t26 = /* @__PURE__ */ jsxs(Fragment, { children: [t23, /* @__PURE__ */ jsxs("div", {
+			className: t24,
+			onClick,
+			onMouseDown: handleMouseDown,
+			onMouseMove: handleMouseMove,
+			onMouseOut: handleMouseOut,
+			onMouseOver: handleMouseOver,
+			onMouseUp: handleMouseUp,
+			ref: handleRef,
+			style,
+			children: [trigger, t25]
+		})] });
+		$[75] = handleMouseDown;
+		$[76] = handleMouseOut;
+		$[77] = handleMouseOver;
+		$[78] = handleMouseUp;
+		$[79] = handleRef;
+		$[80] = onClick;
+		$[81] = style;
+		$[82] = t24;
+		$[83] = t25;
+		$[84] = trigger;
+		$[85] = t26;
+	} else t26 = $[85];
+	return t26;
 }
 function getBoundingAncestor(element) {
-  while (element?.parentElement) {
-    if (element.parentElement.tagName === "BODY") return element.parentElement;
-    if (getComputedStyle(element.parentElement).overflowX !== "visible") {
-      return element.parentElement;
-    }
-    element = element.parentElement;
-  }
-  return null;
+	while (element?.parentElement) {
+		if (element.parentElement.tagName === "BODY") return element.parentElement;
+		if (getComputedStyle(element.parentElement).overflowX !== "visible") return element.parentElement;
+		element = element.parentElement;
+	}
+	return null;
 }
-export {
-  Dropdown as default
-};
-//# sourceMappingURL=Dropdown.js.map
+export { Dropdown as default };
+
+//# sourceMappingURL=Dropdown.js.map