@acusti/dropdown 0.46.1 → 0.48.0

package/dist/Dropdown.js

@@ -1,487 +1,1023 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/mouse-events-have-key-events, jsx-a11y/no-static-element-interactions */
-import { Style } from '@acusti/styling';
-import useIsOutOfBounds from '@acusti/use-is-out-of-bounds';
-import useKeyboardEvents, { isEventTargetUsingKeyEvent, } from '@acusti/use-keyboard-events';
-import clsx from 'clsx';
-import * as React from 'react';
-import { getActiveItemElement, getItemElements, ITEM_SELECTOR, setActiveItem, } from './helpers.js';
-import { BODY_CLASS_NAME, BODY_MAX_HEIGHT_VAR, BODY_MAX_WIDTH_VAR, BODY_SELECTOR, LABEL_CLASS_NAME, LABEL_TEXT_CLASS_NAME, ROOT_CLASS_NAME, STYLES, TRIGGER_CLASS_NAME, } from './styles.js';
-const { Children, Fragment, useCallback, useEffect, useMemo, useRef, useState } = React;
-const noop = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function
-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';
-export default function Dropdown({ allowCreate, allowEmpty = true, children, className, disabled, hasItems = true, isOpenOnMount, isSearchable, keepOpenOnSubmit = !hasItems, label, name, onClick, onClose, onMouseDown, onMouseUp, onOpen, onSubmitItem, placeholder, style: styleFromProps, tabIndex, value, }) {
-    const childrenCount = Children.count(children);
-    if (childrenCount !== 1 && childrenCount !== 2) {
-        if (childrenCount === 0) {
-            throw new Error(CHILDREN_ERROR + ' Received no children.');
+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 * as React from "react";
+import { getBestMatch } from "@acusti/matchmaking";
+const ROOT_CLASS_NAME = "uktdropdown";
+const ROOT_SELECTOR = `.${ROOT_CLASS_NAME}`;
+const BODY_CLASS_NAME = `${ROOT_CLASS_NAME}-body`;
+const LABEL_CLASS_NAME = `${ROOT_CLASS_NAME}-label`;
+const LABEL_TEXT_CLASS_NAME = `${ROOT_CLASS_NAME}-label-text`;
+const TRIGGER_CLASS_NAME = `${ROOT_CLASS_NAME}-trigger`;
+const BODY_SELECTOR = `.${BODY_CLASS_NAME}`;
+const LABEL_SELECTOR = `.${LABEL_CLASS_NAME}`;
+const LABEL_TEXT_SELECTOR = `.${LABEL_TEXT_CLASS_NAME}`;
+const TRIGGER_SELECTOR = `.${TRIGGER_CLASS_NAME}`;
+const BODY_MAX_HEIGHT_VAR = "--uktdd-body-max-height";
+const BODY_MAX_WIDTH_VAR = "--uktdd-body-max-width";
+const STYLES = `
+:root {
+  --uktdd-font-family: ${SYSTEM_UI_FONT};
+  --uktdd-body-bg-color: #fff;
+  --uktdd-body-bg-color-hover: rgb(105,162,249);
+  --uktdd-body-color-hover: #fff;
+  --uktdd-body-buffer: 10px;
+  ${BODY_MAX_HEIGHT_VAR}: calc(100vh - var(--uktdd-body-buffer));
+  ${BODY_MAX_WIDTH_VAR}: calc(100vw - var(--uktdd-body-buffer));
+  --uktdd-body-pad-bottom: 9px;
+  --uktdd-body-pad-left: 12px;
+  --uktdd-body-pad-right: 12px;
+  --uktdd-body-pad-top: 9px;
+  --uktdd-label-pad-right: 10px;
+}
+${ROOT_SELECTOR},
+${TRIGGER_SELECTOR} {
+  font-family: var(--uktdd-font-family);
+}
+${ROOT_SELECTOR} {
+  width: max-content;
+}
+${ROOT_SELECTOR}.disabled {
+  pointer-events: none;
+}
+${ROOT_SELECTOR} > * {
+  cursor: default;
+}
+${LABEL_SELECTOR} {
+  display: flex;
+  align-items: center;
+}
+${LABEL_TEXT_SELECTOR} {
+  padding-right: var(--uktdd-label-pad-right);
+}
+${BODY_SELECTOR} {
+  box-sizing: border-box;
+  position: absolute;
+  top: anchor(bottom);
+  left: anchor(left);
+  position-try-fallbacks: --uktdd-top-left, --uktdd-bottom-right, --uktdd-top-right;
+  min-height: 50px;
+  max-height: var(${BODY_MAX_HEIGHT_VAR});
+  min-width: min(50px, 100%);
+  max-width: var(${BODY_MAX_WIDTH_VAR});
+  overflow: auto;
+  z-index: 2;
+  padding: var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);
+  background-color: var(--uktdd-body-bg-color);
+  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
+}
+@position-try --uktdd-top-left {
+  bottom: anchor(top);
+  left: anchor(left);
+  top: revert;
+  right: revert;
+}
+@position-try --uktdd-bottom-right {
+  top: anchor(bottom);
+  right: anchor(right);
+  bottom: revert;
+  left: revert;
+}
+@position-try --uktdd-top-right {
+  bottom: anchor(top);
+  right: anchor(right);
+  top: revert;
+  left: revert;
+}
+${BODY_SELECTOR}.has-items {
+  user-select: none;
+}
+${BODY_SELECTOR} [data-ukt-active] {
+  background-color: var(--uktdd-body-bg-color-hover);
+  color: var(--uktdd-body-color-hover);
+}
+`;
+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;
+};
+const getActiveItemElement = (dropdownElement) => {
+  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;
+    }
+  });
+};
+const setActiveItem = ({
+  dropdownElement,
+  element,
+  index,
+  indexAddend,
+  isExactMatch,
+  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;
+    }
+    if (nextActiveIndex < 0) {
+      nextActiveIndex = 0;
+    } else if (nextActiveIndex > lastIndex) {
+      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);
+    }
+  }
+  if (nextActiveIndex === -1 || nextActiveIndex === currentActiveIndex) return;
+  clearItemElementsState(itemElements);
+  const nextActiveItem = items[nextActiveIndex];
+  if (nextActiveItem != null) {
+    nextActiveItem.setAttribute("data-ukt-active", "");
+    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;
         }
-        console.error(`${CHILDREN_ERROR} Received ${childrenCount} children.`);
+        scrollableParent.scrollTop = scrollTop;
+      }
     }
-    let trigger;
-    if (childrenCount > 1) {
-        trigger = children[0];
+  }
+};
+const {
+  Children,
+  Fragment,
+  useEffect,
+  useRef,
+  useState
+} = React;
+const noop = () => {
+};
+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";
+let idCounter = 0;
+function Dropdown(t0) {
+  const $ = c(106);
+  const {
+    allowCreate,
+    allowEmpty: t1,
+    children,
+    className,
+    disabled,
+    hasItems: t2,
+    isOpenOnMount,
+    isSearchable,
+    keepOpenOnSubmit: t3,
+    label,
+    name,
+    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.");
     }
-    const isTriggerFromProps = React.isValidElement(trigger);
-    const [isOpen, setIsOpen] = useState(isOpenOnMount !== null && isOpenOnMount !== void 0 ? isOpenOnMount : false);
-    const [isOpening, setIsOpening] = useState(!isOpenOnMount);
-    const [dropdownBodyElement, setDropdownBodyElement] = useState(null);
-    const dropdownElementRef = useRef(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 outOfBounds = useIsOutOfBounds(dropdownBodyElement);
-    const setDropdownOpenRef = useRef(() => setIsOpen(true));
-    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);
-    useEffect(() => {
-        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;
-    }, [
-        allowCreate,
-        allowEmpty,
-        hasItems,
-        isOpen,
-        isOpening,
-        keepOpenOnSubmit,
-        onClose,
-        onOpen,
-        onSubmitItem,
-        value,
-    ]);
-    const isMountedRef = useRef(false);
-    useEffect(() => {
-        if (!isMountedRef.current) {
-            isMountedRef.current = true;
-            // If isOpenOnMount, trigger onOpen right away
-            if (isOpenRef.current && onOpenRef.current) {
-                onOpenRef.current();
-            }
-            return;
+    console.error(`${CHILDREN_ERROR} Received ${childrenCount} children.`);
+  }
+  let trigger;
+  if (childrenCount > 1) {
+    trigger = children[0];
+  }
+  let t4;
+  if ($[0] !== trigger) {
+    t4 = React.isValidElement(trigger);
+    $[0] = trigger;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const isTriggerFromProps = t4;
+  const [isOpen, setIsOpen] = useState(isOpenOnMount ?? false);
+  const [isOpening, setIsOpening] = useState(!isOpenOnMount);
+  const [dropdownElement, setDropdownElement] = useState(null);
+  const [dropdownBodyElement, setDropdownBodyElement] = useState(null);
+  const [id] = useState(_temp);
+  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 t5;
+  let t6;
+  if ($[2] !== allowCreate || $[3] !== allowEmpty || $[4] !== hasItems || $[5] !== isOpen || $[6] !== isOpening || $[7] !== keepOpenOnSubmit || $[8] !== onClose || $[9] !== onOpen || $[10] !== onSubmitItem || $[11] !== value) {
+    t5 = () => {
+      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;
+    };
+    t6 = [allowCreate, allowEmpty, hasItems, isOpen, isOpening, keepOpenOnSubmit, onClose, onOpen, onSubmitItem, value];
+    $[2] = allowCreate;
+    $[3] = allowEmpty;
+    $[4] = hasItems;
+    $[5] = isOpen;
+    $[6] = isOpening;
+    $[7] = keepOpenOnSubmit;
+    $[8] = onClose;
+    $[9] = onOpen;
+    $[10] = onSubmitItem;
+    $[11] = value;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t5 = $[12];
+    t6 = $[13];
+  }
+  useEffect(t5, t6);
+  const isMountedRef = useRef(false);
+  let t7;
+  let t8;
+  if ($[14] !== isOpen) {
+    t7 = () => {
+      if (!isMountedRef.current) {
+        isMountedRef.current = true;
+        if (isOpenRef.current && onOpenRef.current) {
+          onOpenRef.current();
         }
-        if (isOpen && onOpenRef.current) {
-            onOpenRef.current();
+        return;
+      }
+      if (isOpen && onOpenRef.current) {
+        onOpenRef.current();
+      } else {
+        if (!isOpen && onCloseRef.current) {
+          onCloseRef.current();
         }
-        else if (!isOpen && onCloseRef.current) {
-            onCloseRef.current();
+      }
+    };
+    t8 = [isOpen];
+    $[14] = isOpen;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t7 = $[15];
+    t8 = $[16];
+  }
+  useEffect(t7, t8);
+  let t9;
+  if ($[17] !== setIsOpen || $[18] !== setIsOpening) {
+    t9 = () => {
+      setIsOpen(false);
+      setIsOpening(false);
+      mouseDownPositionRef.current = null;
+      if (closingTimerRef.current) {
+        clearTimeout(closingTimerRef.current);
+        closingTimerRef.current = null;
+      }
+    };
+    $[17] = setIsOpen;
+    $[18] = setIsOpening;
+    $[19] = t9;
+  } else {
+    t9 = $[19];
+  }
+  const closeDropdown = t9;
+  let t10;
+  if ($[20] !== closeDropdown || $[21] !== dropdownElement) {
+    t10 = (event) => {
+      var _a;
+      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;
         }
-    }, [isOpen]);
-    const closeDropdown = useCallback(() => {
-        setIsOpen(false);
-        setIsOpening(false);
-        mouseDownPositionRef.current = null;
-        if (closingTimerRef.current) {
-            clearTimeout(closingTimerRef.current);
-            closingTimerRef.current = null;
+        if ((_a = inputElementRef.current) == null ? void 0 : _a.value) {
+          return;
         }
-    }, []);
-    const handleSubmitItem = useCallback((event) => {
-        var _a, _b, _c;
-        const eventTarget = event.target;
-        if (isOpenRef.current && !keepOpenOnSubmitRef.current) {
-            const keepOpen = eventTarget.closest('[data-ukt-keep-open]');
-            // Don’t close dropdown if event occurs w/in data-ukt-keep-open element
-            if (!(keepOpen === null || keepOpen === void 0 ? void 0 : keepOpen.dataset.uktKeepOpen) ||
-                keepOpen.dataset.uktKeepOpen === 'false') {
-                // A short timeout before closing is better UX when user selects an item so dropdown
-                // doesn’t close before expected. It also enables using <Link />s in the dropdown body.
-                closingTimerRef.current = setTimeout(closeDropdown, 90);
-            }
+      }
+      let itemLabel = (element == null ? void 0 : element.innerText) ?? "";
+      if (inputElementRef.current) {
+        if (!element) {
+          itemLabel = inputElementRef.current.value;
+        } else {
+          inputElementRef.current.value = itemLabel;
         }
-        if (!hasItemsRef.current)
-            return;
-        const element = getActiveItemElement(dropdownElementRef.current);
-        if (!element && !allowCreateRef.current) {
-            // If not allowEmpty, don’t allow submitting an empty item
-            if (!allowEmptyRef.current)
-                return;
-            // If we have an input element as trigger & the user didn’t clear the text, do nothing
-            if ((_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.value)
-                return;
+        if (inputElementRef.current === inputElementRef.current.ownerDocument.activeElement) {
+          inputElementRef.current.blur();
         }
-        let itemLabel = (_b = element === null || element === void 0 ? void 0 : element.innerText) !== null && _b !== void 0 ? _b : '';
-        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 == null ? void 0 : element.dataset.uktValue) ?? itemLabel;
+      if (valueRef.current && valueRef.current === nextValue) {
+        return;
+      }
+      if (onSubmitItemRef.current) {
+        onSubmitItemRef.current({
+          element,
+          event,
+          label: itemLabel,
+          value: nextValue
+        });
+      }
+    };
+    $[20] = closeDropdown;
+    $[21] = dropdownElement;
+    $[22] = t10;
+  } else {
+    t10 = $[22];
+  }
+  const handleSubmitItem = t10;
+  let t11;
+  if ($[23] !== setIsOpening) {
+    t11 = (t122) => {
+      const {
+        clientX,
+        clientY
+      } = t122;
+      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);
+    };
+    $[23] = setIsOpening;
+    $[24] = t11;
+  } else {
+    t11 = $[24];
+  }
+  const handleMouseMove = t11;
+  let t12;
+  if ($[25] !== dropdownElement) {
+    t12 = (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
+          });
+          return;
         }
-        const nextValue = (_c = element === null || element === void 0 ? void 0 : element.dataset.uktValue) !== null && _c !== void 0 ? _c : itemLabel;
-        // If parent is controlling Dropdown via props.value and nextValue is the same, do nothing
-        if (valueRef.current && valueRef.current === nextValue)
-            return;
-        if (onSubmitItemRef.current) {
-            onSubmitItemRef.current({
-                element,
-                event,
-                label: itemLabel,
-                value: nextValue,
-            });
+      }
+    };
+    $[25] = dropdownElement;
+    $[26] = t12;
+  } else {
+    t12 = $[26];
+  }
+  const handleMouseOver = t12;
+  let t13;
+  if ($[27] !== dropdownElement) {
+    t13 = (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;
+    };
+    $[27] = dropdownElement;
+    $[28] = t13;
+  } else {
+    t13 = $[28];
+  }
+  const handleMouseOut = t13;
+  let t14;
+  if ($[29] !== onMouseDown || $[30] !== setIsOpen || $[31] !== setIsOpening) {
+    t14 = (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);
+    };
+    $[29] = onMouseDown;
+    $[30] = setIsOpen;
+    $[31] = setIsOpening;
+    $[32] = t14;
+  } else {
+    t14 = $[32];
+  }
+  const handleMouseDown = t14;
+  let t15;
+  if ($[33] !== closeDropdown || $[34] !== handleSubmitItem || $[35] !== onMouseUp) {
+    t15 = (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();
         }
-    }, [closeDropdown]);
-    const handleMouseMove = useCallback(({ clientX, clientY }) => {
-        currentInputMethodRef.current = 'mouse';
-        const initialPosition = mouseDownPositionRef.current;
-        if (!initialPosition)
-            return;
-        if (Math.abs(initialPosition.clientX - clientX) < 12 &&
-            Math.abs(initialPosition.clientY - clientY) < 12) {
-            return;
+        return;
+      }
+      if (!hasItemsRef.current) {
+        return;
+      }
+      handleSubmitItem(event_3);
+    };
+    $[33] = closeDropdown;
+    $[34] = handleSubmitItem;
+    $[35] = onMouseUp;
+    $[36] = t15;
+  } else {
+    t15 = $[36];
+  }
+  const handleMouseUp = t15;
+  let t16;
+  if ($[37] !== closeDropdown || $[38] !== dropdownElement || $[39] !== handleSubmitItem || $[40] !== setIsOpen) {
+    t16 = (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;
         }
-        setIsOpening(false);
-    }, []);
-    const handleMouseOver = useCallback((event) => {
-        if (!hasItemsRef.current)
-            return;
-        // If user isn’t currently using the mouse to navigate the dropdown, do nothing
-        if (currentInputMethodRef.current !== 'mouse')
-            return;
-        // Ensure we have the dropdown root HTMLElement
-        const dropdownElement = dropdownElementRef.current;
-        if (!dropdownElement)
-            return;
-        const itemElements = getItemElements(dropdownElement);
-        if (!itemElements)
-            return;
-        const eventTarget = event.target;
-        const item = eventTarget.closest(ITEM_SELECTOR);
-        const element = item !== null && item !== void 0 ? item : eventTarget;
-        for (const itemElement of itemElements) {
-            if (itemElement === element) {
-                setActiveItem({ dropdownElement, element });
-                return;
-            }
+        if (key === " " || key === "Enter" || hasItemsRef.current && (key === "ArrowUp" || key === "ArrowDown")) {
+          onEventHandled();
+          setIsOpen(true);
         }
-    }, []);
-    const handleMouseOut = useCallback((event) => {
-        if (!hasItemsRef.current)
-            return;
-        const activeItem = getActiveItemElement(dropdownElementRef.current);
-        if (!activeItem)
-            return;
-        const eventRelatedTarget = event.relatedTarget;
-        if (activeItem !== event.target || activeItem.contains(eventRelatedTarget)) {
-            return;
+        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 user moused out of activeItem (not into a descendant), it’s no longer active
-        delete activeItem.dataset.uktActive;
-    }, []);
-    const handleMouseDown = useCallback((event) => {
-        if (onMouseDown)
-            onMouseDown(event);
-        if (isOpenRef.current)
-            return;
-        setIsOpen(true);
-        setIsOpening(true);
-        mouseDownPositionRef.current = {
-            clientX: event.clientX,
-            clientY: event.clientY,
-        };
-        isOpeningTimerRef.current = setTimeout(() => {
-            setIsOpening(false);
-            isOpeningTimerRef.current = null;
-        }, 1000);
-    }, [onMouseDown]);
-    const handleMouseUp = useCallback((event) => {
-        if (onMouseUp)
-            onMouseUp(event);
-        // If dropdown is still opening or isn’t open or is closing, do nothing
-        if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current) {
-            return;
+        if (isEditingCharacters) {
+          onEventHandled();
+          if (key === "Backspace") {
+            enteredCharactersRef.current = enteredCharactersRef.current.slice(0, -1);
+          } else {
+            enteredCharactersRef.current = enteredCharactersRef.current + key;
+          }
+          setActiveItem({
+            dropdownElement,
+            isExactMatch: allowCreateRef.current,
+            text: enteredCharactersRef.current
+          });
+          if (clearEnteredCharactersTimerRef.current) {
+            clearTimeout(clearEnteredCharactersTimerRef.current);
+          }
+          clearEnteredCharactersTimerRef.current = setTimeout(() => {
+            enteredCharactersRef.current = "";
+            clearEnteredCharactersTimerRef.current = null;
+          }, 1500);
+          return;
         }
-        const eventTarget = event.target;
-        // If click was outside dropdown body, don’t trigger submit
-        if (!eventTarget.closest(BODY_SELECTOR)) {
-            // Don’t close dropdown if isOpening or search input is focused
-            if (!isOpeningRef.current &&
-                inputElementRef.current !== eventTarget.ownerDocument.activeElement) {
-                closeDropdown();
-            }
-            return;
+      }
+      if (key === "Enter" || key === " " && !inputElementRef.current) {
+        onEventHandled();
+        handleSubmitItem(event_4);
+        return;
+      }
+      if (key === "Escape" || isEventTargetingDropdown && key === " " && !hasItemsRef.current) {
+        if (hasItemsRef.current || !isTargetUsingKeyEvents) {
+          closeDropdown();
         }
-        // If dropdown has no items and click was within dropdown body, do nothing
-        if (!hasItemsRef.current)
-            return;
-        handleSubmitItem(event);
-    }, [closeDropdown, handleSubmitItem, onMouseUp]);
-    const handleKeyDown = useCallback((event) => {
-        const { altKey, ctrlKey, key, metaKey } = event;
-        const eventTarget = event.target;
-        const dropdownElement = dropdownElementRef.current;
-        if (!dropdownElement)
-            return;
-        const onEventHandled = () => {
-            event.stopPropagation();
-            event.preventDefault();
-            currentInputMethodRef.current = 'keyboard';
-        };
-        const isEventTargetingDropdown = dropdownElement.contains(eventTarget);
-        if (!isOpenRef.current) {
-            // If dropdown is closed, don’t handle key events if event target isn’t within dropdown
-            if (!isEventTargetingDropdown)
-                return;
-            // Open the dropdown on spacebar, enter, or if isSearchable and user hits the ↑/↓ arrows
-            if (key === ' ' ||
-                key === 'Enter' ||
-                (hasItemsRef.current && (key === 'ArrowUp' || key === 'ArrowDown'))) {
-                onEventHandled();
-                setIsOpen(true);
-            }
-            return;
+        return;
+      }
+      if (hasItemsRef.current) {
+        if (key === "ArrowUp") {
+          onEventHandled();
+          if (altKey || metaKey) {
+            setActiveItem({
+              dropdownElement,
+              index: 0
+            });
+          } else {
+            setActiveItem({
+              dropdownElement,
+              indexAddend: -1
+            });
+          }
+          return;
         }
-        const isTargetUsingKeyEvents = isEventTargetUsingKeyEvent(event);
-        // If dropdown isOpen + hasItems & eventTargetNotUsingKeyEvents, handle characters
-        if (hasItemsRef.current && !isTargetUsingKeyEvents) {
-            let isEditingCharacters = !ctrlKey && !metaKey && /^[A-Za-z0-9]$/.test(key);
-            // User could also be editing characters if there are already characters entered
-            // and they are hitting delete or spacebar
-            if (!isEditingCharacters && enteredCharactersRef.current) {
-                isEditingCharacters = key === ' ' || key === 'Backspace';
-            }
-            if (isEditingCharacters) {
-                onEventHandled();
-                if (key === 'Backspace') {
-                    enteredCharactersRef.current = enteredCharactersRef.current.slice(0, -1);
-                }
-                else {
-                    enteredCharactersRef.current += key;
-                }
-                setActiveItem({
-                    dropdownElement,
-                    // If props.allowCreate, only override the input’s value with an
-                    // exact text match so user can enter a value not in items
-                    isExactMatch: allowCreateRef.current,
-                    text: enteredCharactersRef.current,
-                });
-                if (clearEnteredCharactersTimerRef.current) {
-                    clearTimeout(clearEnteredCharactersTimerRef.current);
-                }
-                clearEnteredCharactersTimerRef.current = setTimeout(() => {
-                    enteredCharactersRef.current = '';
-                    clearEnteredCharactersTimerRef.current = null;
-                }, 1500);
-                return;
-            }
+        if (key === "ArrowDown") {
+          onEventHandled();
+          if (altKey || metaKey) {
+            setActiveItem({
+              dropdownElement,
+              index: -1
+            });
+          } else {
+            setActiveItem({
+              dropdownElement,
+              indexAddend: 1
+            });
+          }
+          return;
         }
-        // If dropdown isOpen, handle submitting the value
-        if (key === 'Enter' || (key === ' ' && !inputElementRef.current)) {
-            onEventHandled();
-            handleSubmitItem(event);
-            return;
+      }
+    };
+    $[37] = closeDropdown;
+    $[38] = dropdownElement;
+    $[39] = handleSubmitItem;
+    $[40] = setIsOpen;
+    $[41] = t16;
+  } else {
+    t16 = $[41];
+  }
+  const handleKeyDown = t16;
+  let t17;
+  if ($[42] !== handleKeyDown) {
+    t17 = {
+      ignoreUsedKeyboardEvents: false,
+      onKeyDown: handleKeyDown
+    };
+    $[42] = handleKeyDown;
+    $[43] = t17;
+  } else {
+    t17 = $[43];
+  }
+  useKeyboardEvents(t17);
+  const cleanupEventListenersRef = useRef(noop);
+  let t18;
+  if ($[44] !== closeDropdown || $[45] !== isOpenOnMount || $[46] !== isTriggerFromProps || $[47] !== setDropdownElement || $[48] !== setIsOpen || $[49] !== setIsOpening) {
+    t18 = (ref) => {
+      setDropdownElement(ref);
+      if (!ref) {
+        cleanupEventListenersRef.current();
+        cleanupEventListenersRef.current = noop;
+        return;
+      }
+      const {
+        ownerDocument
+      } = ref;
+      let inputElement = inputElementRef.current;
+      if (isTriggerFromProps && !inputElement && ref.firstElementChild) {
+        if (ref.firstElementChild.matches(TEXT_INPUT_SELECTOR)) {
+          inputElement = ref.firstElementChild;
+        } else {
+          inputElement = ref.firstElementChild.querySelector(TEXT_INPUT_SELECTOR);
         }
-        // If dropdown isOpen, handle closing it on escape or spacebar if !hasItems
-        if (key === 'Escape' ||
-            (isEventTargetingDropdown && key === ' ' && !hasItemsRef.current)) {
-            // Close dropdown if hasItems or event target not using key events
-            if (hasItemsRef.current || !isTargetUsingKeyEvents) {
-                closeDropdown();
-            }
-            return;
+        inputElementRef.current = inputElement;
+      }
+      const handleGlobalMouseDown = (t192) => {
+        const {
+          target
+        } = t192;
+        const eventTarget_2 = target;
+        if (!ref.contains(eventTarget_2)) {
+          closeDropdown();
         }
-        // Handle ↑/↓ arrows
-        if (hasItemsRef.current) {
-            if (key === 'ArrowUp') {
-                onEventHandled();
-                if (altKey || metaKey) {
-                    setActiveItem({ dropdownElement, index: 0 });
-                }
-                else {
-                    setActiveItem({ dropdownElement, indexAddend: -1 });
-                }
-                return;
-            }
-            if (key === 'ArrowDown') {
-                onEventHandled();
-                if (altKey || metaKey) {
-                    // Using a negative index counts back from the end
-                    setActiveItem({ dropdownElement, index: -1 });
-                }
-                else {
-                    setActiveItem({ dropdownElement, indexAddend: 1 });
-                }
-                return;
-            }
+      };
+      const handleGlobalMouseUp = (t202) => {
+        const {
+          target: target_0
+        } = t202;
+        if (!isOpenRef.current || closingTimerRef.current) {
+          return;
         }
-    }, [closeDropdown, handleSubmitItem]);
-    useKeyboardEvents({ ignoreUsedKeyboardEvents: false, onKeyDown: handleKeyDown });
-    const cleanupEventListenersRef = useRef(noop);
-    const handleRef = useCallback((ref) => {
-        dropdownElementRef.current = ref;
-        if (!ref) {
-            // If component was unmounted, cleanup handlers
-            cleanupEventListenersRef.current();
-            cleanupEventListenersRef.current = noop;
-            return;
+        if (isOpeningRef.current) {
+          setIsOpening(false);
+          if (isOpeningTimerRef.current) {
+            clearTimeout(isOpeningTimerRef.current);
+            isOpeningTimerRef.current = null;
+          }
+          return;
         }
-        const { ownerDocument } = ref;
-        let inputElement = inputElementRef.current;
-        // Check if trigger from props is a textual input or textarea element
-        if (isTriggerFromProps && !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 eventTarget_3 = target_0;
+        if (!ref.contains(eventTarget_3)) {
+          closeDropdown();
         }
-        const handleGlobalMouseDown = ({ target }) => {
-            const eventTarget = target;
-            if (dropdownElementRef.current &&
-                !dropdownElementRef.current.contains(eventTarget)) {
-                // Close dropdown on an outside click
-                closeDropdown();
-            }
-        };
-        const handleGlobalMouseUp = ({ target }) => {
-            var _a;
-            if (!isOpenRef.current || closingTimerRef.current)
-                return;
-            // If still isOpening (gets set false 1s after open triggers), set it to false onMouseUp
-            if (isOpeningRef.current) {
-                setIsOpening(false);
-                if (isOpeningTimerRef.current) {
-                    clearTimeout(isOpeningTimerRef.current);
-                    isOpeningTimerRef.current = null;
-                }
-                return;
-            }
-            const eventTarget = target;
-            // Only handle mouseup events from outside the dropdown here
-            if (!((_a = dropdownElementRef.current) === null || _a === void 0 ? void 0 : _a.contains(eventTarget))) {
-                closeDropdown();
-            }
-        };
-        // Close dropdown if any element is focused outside of this dropdown
-        const handleGlobalFocusIn = ({ target }) => {
-            if (!isOpenRef.current)
-                return;
-            const eventTarget = target;
-            // If focused element is a descendant or a parent of the dropdown, do nothing
-            if (!dropdownElementRef.current ||
-                dropdownElementRef.current.contains(eventTarget) ||
-                eventTarget.contains(dropdownElementRef.current)) {
-                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);
+      };
+      const handleGlobalFocusIn = (t212) => {
+        const {
+          target: target_1
+        } = t212;
+        if (!isOpenRef.current) {
+          return;
         }
-        // If dropdown should be open on mount, focus it
-        if (isOpenOnMount) {
-            ref.focus();
+        const eventTarget_4 = target_1;
+        if (ref.contains(eventTarget_4) || eventTarget_4.contains(ref)) {
+          return;
         }
-        const handleInput = (event) => {
-            const dropdownElement = dropdownElementRef.current;
-            if (!dropdownElement)
-                return;
-            if (!isOpenRef.current)
-                setIsOpen(true);
-            const input = event.target;
-            const isDeleting = enteredCharactersRef.current.length > input.value.length;
-            enteredCharactersRef.current = input.value;
-            // When deleting text, if there’s already an active item and
-            // input isn’t empty, preserve the active item, else update it
-            if (isDeleting &&
-                input.value.length &&
-                getActiveItemElement(dropdownElement)) {
-                return;
-            }
-            setActiveItem({
-                dropdownElement,
-                // If props.allowCreate, only override the input’s value with an
-                // exact text match so user can enter a value not in items
-                isExactMatch: allowCreateRef.current,
-                text: enteredCharactersRef.current,
-            });
-        };
-        if (inputElement) {
-            inputElement.addEventListener('input', handleInput);
+        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;
         }
-        cleanupEventListenersRef.current = () => {
-            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);
-            }
-        };
-    }, [closeDropdown, isOpenOnMount, isTriggerFromProps]);
-    if (!isTriggerFromProps) {
-        if (isSearchable) {
-            trigger = (React.createElement("input", { autoComplete: "off", className: TRIGGER_CLASS_NAME, defaultValue: value !== null && value !== void 0 ? value : '', disabled: disabled, name: name, onFocus: setDropdownOpenRef.current, placeholder: placeholder, ref: inputElementRef, tabIndex: tabIndex, type: "text" }));
+        setActiveItem({
+          dropdownElement: ref,
+          isExactMatch: allowCreateRef.current,
+          text: enteredCharactersRef.current
+        });
+      };
+      if (inputElement) {
+        inputElement.addEventListener("input", handleInput);
+      }
+      cleanupEventListenersRef.current = () => {
+        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);
         }
-        else {
-            trigger = (React.createElement("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0 }, trigger));
+        if (inputElement) {
+          inputElement.removeEventListener("input", handleInput);
         }
+      };
+    };
+    $[44] = closeDropdown;
+    $[45] = isOpenOnMount;
+    $[46] = isTriggerFromProps;
+    $[47] = setDropdownElement;
+    $[48] = setIsOpen;
+    $[49] = setIsOpening;
+    $[50] = t18;
+  } else {
+    t18 = $[50];
+  }
+  const handleRef = t18;
+  if (!isTriggerFromProps) {
+    if (isSearchable) {
+      const t192 = value ?? "";
+      let t202;
+      if ($[51] !== setIsOpen) {
+        t202 = () => setIsOpen(true);
+        $[51] = setIsOpen;
+        $[52] = t202;
+      } else {
+        t202 = $[52];
+      }
+      let t212;
+      if ($[53] !== disabled || $[54] !== name || $[55] !== placeholder || $[56] !== t192 || $[57] !== t202 || $[58] !== tabIndex) {
+        t212 = /* @__PURE__ */ jsx("input", { autoComplete: "off", className: TRIGGER_CLASS_NAME, defaultValue: t192, disabled, name, onFocus: t202, placeholder, ref: inputElementRef, tabIndex, type: "text" });
+        $[53] = disabled;
+        $[54] = name;
+        $[55] = placeholder;
+        $[56] = t192;
+        $[57] = t202;
+        $[58] = tabIndex;
+        $[59] = t212;
+      } else {
+        t212 = $[59];
+      }
+      trigger = t212;
+    } else {
+      let t192;
+      if ($[60] !== trigger) {
+        t192 = /* @__PURE__ */ jsx("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0, children: trigger });
+        $[60] = trigger;
+        $[61] = t192;
+      } else {
+        t192 = $[61];
+      }
+      trigger = t192;
     }
-    if (label) {
-        trigger = (React.createElement("label", { className: LABEL_CLASS_NAME },
-            React.createElement("div", { className: LABEL_TEXT_CLASS_NAME }, label),
-            trigger));
+  }
+  if (label) {
+    let t192;
+    if ($[62] !== label) {
+      t192 = /* @__PURE__ */ jsx("div", { className: LABEL_TEXT_CLASS_NAME, children: label });
+      $[62] = label;
+      $[63] = t192;
+    } else {
+      t192 = $[63];
     }
-    const style = useMemo(() => (Object.assign(Object.assign(Object.assign({}, styleFromProps), (outOfBounds.maxHeight != null && outOfBounds.maxHeight > 0
-        ? {
-            [BODY_MAX_HEIGHT_VAR]: `calc(${outOfBounds.maxHeight}px - var(--uktdd-body-buffer))`,
-        }
-        : null)), (outOfBounds.maxWidth != null && outOfBounds.maxWidth > 0
-        ? {
-            [BODY_MAX_WIDTH_VAR]: `calc(${outOfBounds.maxWidth}px - var(--uktdd-body-buffer))`,
-        }
-        : null))), [outOfBounds.maxHeight, outOfBounds.maxWidth, styleFromProps]);
-    return (React.createElement(Fragment, null,
-        React.createElement(Style, { href: "@acusti/dropdown/Dropdown" }, STYLES),
-        React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className, {
-                disabled,
-                'is-open': isOpen,
-                'is-searchable': isSearchable,
-            }), onClick: onClick, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseOut: handleMouseOut, onMouseOver: handleMouseOver, onMouseUp: handleMouseUp, ref: handleRef, style: style },
-            trigger,
-            isOpen ? (React.createElement("div", { className: clsx(BODY_CLASS_NAME, {
-                    'calculating-position': !outOfBounds.hasLayout,
-                    'has-items': hasItems,
-                    'out-of-bounds-bottom': outOfBounds.bottom && !outOfBounds.top,
-                    'out-of-bounds-left': outOfBounds.left && !outOfBounds.right,
-                    'out-of-bounds-right': outOfBounds.right && !outOfBounds.left,
-                    'out-of-bounds-top': outOfBounds.top && !outOfBounds.bottom,
-                }), ref: setDropdownBodyElement }, childrenCount > 1 ? children[1] : children)) : null)));
+    let t202;
+    if ($[64] !== t192 || $[65] !== trigger) {
+      t202 = /* @__PURE__ */ jsxs("label", { className: LABEL_CLASS_NAME, children: [
+        t192,
+        trigger
+      ] });
+      $[64] = t192;
+      $[65] = trigger;
+      $[66] = t202;
+    } else {
+      t202 = $[66];
+    }
+    trigger = t202;
+  }
+  const dropdownRect = useBoundingClientRect(dropdownElement);
+  const dropdownBodyRect = useBoundingClientRect(dropdownBodyElement);
+  let t19;
+  if ($[67] !== dropdownBodyElement) {
+    t19 = getBoundingAncestor(dropdownBodyElement);
+    $[67] = dropdownBodyElement;
+    $[68] = t19;
+  } else {
+    t19 = $[68];
+  }
+  const boundingElement = t19;
+  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;
+    maxHeight = dropdownBodyRect.top > dropdownRect.top ? maxHeightDown : maxHeightUp;
+    const maxWidthLeft = dropdownBodyRect.right - boundingElementRect.left;
+    const maxWidthRight = boundingElementRect.right - dropdownBodyRect.left;
+    maxWidth = dropdownBodyRect.left > dropdownRect.left ? maxWidthRight : maxWidthLeft;
+  }
+  let t20;
+  if ($[69] !== maxHeight) {
+    t20 = maxHeight != null && maxHeight > 0 ? {
+      [BODY_MAX_HEIGHT_VAR]: `calc(${maxHeight}px - var(--uktdd-body-buffer))`
+    } : null;
+    $[69] = maxHeight;
+    $[70] = t20;
+  } else {
+    t20 = $[70];
+  }
+  let t21;
+  if ($[71] !== maxWidth) {
+    t21 = maxWidth != null && maxWidth > 0 ? {
+      [BODY_MAX_WIDTH_VAR]: `calc(${maxWidth}px - var(--uktdd-body-buffer))`
+    } : null;
+    $[71] = maxWidth;
+    $[72] = t21;
+  } else {
+    t21 = $[72];
+  }
+  let t22;
+  if ($[73] !== styleFromProps || $[74] !== t20 || $[75] !== t21) {
+    t22 = {
+      ...styleFromProps,
+      ...t20,
+      ...t21
+    };
+    $[73] = styleFromProps;
+    $[74] = t20;
+    $[75] = t21;
+    $[76] = t22;
+  } else {
+    t22 = $[76];
+  }
+  const style = t22;
+  let t23;
+  if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = /* @__PURE__ */ jsx(Style, { href: "@acusti/dropdown/Dropdown", children: STYLES });
+    $[77] = t23;
+  } else {
+    t23 = $[77];
+  }
+  const t24 = `
+[data-ukt-id="${id}"] > :first-child {
+  anchor-name: --uktdd-anchor${id};
+}
+[data-ukt-id="${id}"] ${BODY_SELECTOR} {
+  position-anchor: --uktdd-anchor${id};
+}
+`;
+  let t25;
+  if ($[78] !== t24) {
+    t25 = /* @__PURE__ */ jsx(Style, { children: t24 });
+    $[78] = t24;
+    $[79] = t25;
+  } else {
+    t25 = $[79];
+  }
+  let t26;
+  if ($[80] !== className || $[81] !== disabled || $[82] !== isOpen || $[83] !== isSearchable) {
+    t26 = clsx(ROOT_CLASS_NAME, className, {
+      disabled,
+      "is-open": isOpen,
+      "is-searchable": isSearchable
+    });
+    $[80] = className;
+    $[81] = disabled;
+    $[82] = isOpen;
+    $[83] = isSearchable;
+    $[84] = t26;
+  } else {
+    t26 = $[84];
+  }
+  let t27;
+  if ($[85] !== children || $[86] !== childrenCount || $[87] !== isOpen || $[88] !== setDropdownBodyElement) {
+    t27 = isOpen ? /* @__PURE__ */ jsx("div", { className: BODY_CLASS_NAME, ref: setDropdownBodyElement, children: childrenCount > 1 ? children[1] : children }) : null;
+    $[85] = children;
+    $[86] = childrenCount;
+    $[87] = isOpen;
+    $[88] = setDropdownBodyElement;
+    $[89] = t27;
+  } else {
+    t27 = $[89];
+  }
+  let t28;
+  if ($[90] !== handleMouseDown || $[91] !== handleMouseMove || $[92] !== handleMouseOut || $[93] !== handleMouseOver || $[94] !== handleMouseUp || $[95] !== handleRef || $[96] !== id || $[97] !== onClick || $[98] !== style || $[99] !== t26 || $[100] !== t27 || $[101] !== trigger) {
+    t28 = /* @__PURE__ */ jsxs("div", { className: t26, "data-ukt-id": id, onClick, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseOut: handleMouseOut, onMouseOver: handleMouseOver, onMouseUp: handleMouseUp, ref: handleRef, style, children: [
+      trigger,
+      t27
+    ] });
+    $[90] = handleMouseDown;
+    $[91] = handleMouseMove;
+    $[92] = handleMouseOut;
+    $[93] = handleMouseOver;
+    $[94] = handleMouseUp;
+    $[95] = handleRef;
+    $[96] = id;
+    $[97] = onClick;
+    $[98] = style;
+    $[99] = t26;
+    $[100] = t27;
+    $[101] = trigger;
+    $[102] = t28;
+  } else {
+    t28 = $[102];
+  }
+  let t29;
+  if ($[103] !== t25 || $[104] !== t28) {
+    t29 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t23,
+      t25,
+      t28
+    ] });
+    $[103] = t25;
+    $[104] = t28;
+    $[105] = t29;
+  } else {
+    t29 = $[105];
+  }
+  return t29;
+}
+function _temp() {
+  idCounter = idCounter >= 999999 ? 0 : idCounter + 1;
+  return idCounter;
+}
+function getBoundingAncestor(element) {
+  while (element == null ? void 0 : element.parentElement) {
+    if (element.parentElement.tagName === "BODY") return element.parentElement;
+    if (getComputedStyle(element.parentElement).overflowX !== "visible") {
+      return element.parentElement;
+    }
+    element = element.parentElement;
+  }
+  return null;
 }
-//# sourceMappingURL=Dropdown.js.map
+export {
+  Dropdown as default
+};
+//# sourceMappingURL=Dropdown.js.map