@acusti/dropdown 0.50.0 → 0.51.0

package/dist/Dropdown.js

@@ -4,7 +4,7 @@ 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, isValidElement, useState, useRef, useEffect, Fragment } from "react";
+import { Children, useState, useId, useRef, useEffect, isValidElement, Fragment } from "react";
 import { getBestMatch } from "@acusti/matchmaking";
 const ROOT_CLASS_NAME = "uktdropdown";
 const ROOT_SELECTOR = `.${ROOT_CLASS_NAME}`;
@@ -128,9 +128,11 @@ const clearItemElementsState = (itemElements) => {
 const setActiveItem = ({
   dropdownElement,
   element,
+  event,
   index,
   indexAddend,
   isExactMatch,
+  onActiveItem,
   text
 }) => {
   const items = getItemElements(dropdownElement);
@@ -151,11 +153,7 @@ const setActiveItem = ({
     } else {
       nextActiveIndex += indexAddend;
     }
-    if (nextActiveIndex < 0) {
-      nextActiveIndex = 0;
-    } else if (nextActiveIndex > lastIndex) {
-      nextActiveIndex = lastIndex;
-    }
+    nextActiveIndex = Math.max(0, Math.min(nextActiveIndex, lastIndex));
   } else if (typeof text === "string") {
     if (!text) {
       clearItemElementsState(itemElements);
@@ -176,47 +174,50 @@ const setActiveItem = ({
       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 (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;
+  }
+  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 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(102);
   const {
@@ -233,6 +234,7 @@ function Dropdown(t0) {
     minHeightBody: t4,
     minWidthBody: t5,
     name,
+    onActiveItem,
     onClick,
     onClose,
     onMouseDown,
@@ -260,20 +262,11 @@ function Dropdown(t0) {
   if (childrenCount > 1) {
     trigger = children[0];
   }
-  let t6;
-  if ($[0] !== trigger) {
-    t6 = isValidElement(trigger);
-    $[0] = trigger;
-    $[1] = t6;
-  } else {
-    t6 = $[1];
-  }
-  const isTriggerFromProps = t6;
   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 id = useId();
   const inputElementRef = useRef(null);
   const closingTimerRef = useRef(null);
   const isOpeningTimerRef = useRef(null);
@@ -291,10 +284,10 @@ function Dropdown(t0) {
   const onOpenRef = useRef(onOpen);
   const onSubmitItemRef = useRef(onSubmitItem);
   const valueRef = useRef(value);
+  let t6;
   let t7;
-  let t8;
-  if ($[2] !== allowCreate || $[3] !== allowEmpty || $[4] !== hasItems || $[5] !== isOpen || $[6] !== isOpening || $[7] !== keepOpenOnSubmit || $[8] !== onClose || $[9] !== onOpen || $[10] !== onSubmitItem || $[11] !== value) {
-    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;
@@ -306,29 +299,29 @@ function Dropdown(t0) {
       onSubmitItemRef.current = onSubmitItem;
       valueRef.current = value;
     };
-    t8 = [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] = t7;
-    $[13] = t8;
+    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 {
-    t7 = $[12];
-    t8 = $[13];
+    t6 = $[10];
+    t7 = $[11];
   }
-  useEffect(t7, t8);
+  useEffect(t6, t7);
   const isMountedRef = useRef(false);
-  let t10;
+  let t8;
   let t9;
-  if ($[14] !== isOpen) {
-    t9 = () => {
+  if ($[12] !== isOpen) {
+    t8 = () => {
       if (!isMountedRef.current) {
         isMountedRef.current = true;
         if (isOpenRef.current && onOpenRef.current) {
@@ -344,18 +337,18 @@ function Dropdown(t0) {
         }
       }
     };
-    t10 = [isOpen];
-    $[14] = isOpen;
-    $[15] = t10;
-    $[16] = t9;
+    t9 = [isOpen];
+    $[12] = isOpen;
+    $[13] = t8;
+    $[14] = t9;
   } else {
-    t10 = $[15];
-    t9 = $[16];
+    t8 = $[13];
+    t9 = $[14];
   }
-  useEffect(t9, t10);
-  let t11;
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = () => {
+  useEffect(t8, t9);
+  let t10;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = () => {
       setIsOpen(false);
       setIsOpening(false);
       mouseDownPositionRef.current = null;
@@ -364,15 +357,14 @@ function Dropdown(t0) {
         closingTimerRef.current = null;
       }
     };
-    $[17] = t11;
+    $[15] = t10;
   } else {
-    t11 = $[17];
+    t10 = $[15];
   }
-  const closeDropdown = t11;
-  let t12;
-  if ($[18] !== dropdownElement) {
-    t12 = (event) => {
-      var _a;
+  const closeDropdown = t10;
+  let t11;
+  if ($[16] !== dropdownElement) {
+    t11 = (event) => {
       if (isOpenRef.current && !keepOpenOnSubmitRef.current) {
         closingTimerRef.current = setTimeout(closeDropdown, 90);
       }
@@ -384,11 +376,11 @@ function Dropdown(t0) {
         if (!allowEmptyRef.current) {
           return;
         }
-        if ((_a = inputElementRef.current) == null ? void 0 : _a.value) {
+        if (inputElementRef.current?.value) {
           return;
         }
       }
-      let itemLabel = (element == null ? void 0 : element.innerText) ?? "";
+      let itemLabel = element?.innerText ?? "";
       if (inputElementRef.current) {
         if (!element) {
           itemLabel = inputElementRef.current.value;
@@ -399,7 +391,7 @@ function Dropdown(t0) {
           inputElementRef.current.blur();
         }
       }
-      const nextValue = (element == null ? void 0 : element.dataset.uktValue) ?? itemLabel;
+      const nextValue = element?.dataset.uktValue ?? itemLabel;
       if (valueRef.current && valueRef.current === nextValue) {
         return;
       }
@@ -412,19 +404,19 @@ function Dropdown(t0) {
         });
       }
     };
-    $[18] = dropdownElement;
-    $[19] = t12;
+    $[16] = dropdownElement;
+    $[17] = t11;
   } else {
-    t12 = $[19];
+    t11 = $[17];
   }
-  const handleSubmitItem = t12;
-  let t13;
-  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = (t142) => {
+  const handleSubmitItem = t11;
+  let t12;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = (t132) => {
       const {
         clientX,
         clientY
-      } = t142;
+      } = t132;
       currentInputMethodRef.current = "mouse";
       const initialPosition = mouseDownPositionRef.current;
       if (!initialPosition) {
@@ -435,14 +427,14 @@ function Dropdown(t0) {
       }
       setIsOpening(false);
     };
-    $[20] = t13;
+    $[18] = t12;
   } else {
-    t13 = $[20];
+    t12 = $[18];
   }
-  const handleMouseMove = t13;
-  let t14;
-  if ($[21] !== dropdownElement) {
-    t14 = (event_0) => {
+  const handleMouseMove = t12;
+  let t13;
+  if ($[19] !== dropdownElement || $[20] !== onActiveItem) {
+    t13 = (event_0) => {
       if (!hasItemsRef.current) {
         return;
       }
@@ -463,21 +455,24 @@ function Dropdown(t0) {
         if (itemElement === element_0) {
           setActiveItem({
             dropdownElement,
-            element: element_0
+            element: element_0,
+            event: event_0,
+            onActiveItem
           });
           return;
         }
       }
     };
-    $[21] = dropdownElement;
-    $[22] = t14;
+    $[19] = dropdownElement;
+    $[20] = onActiveItem;
+    $[21] = t13;
   } else {
-    t14 = $[22];
+    t13 = $[21];
   }
-  const handleMouseOver = t14;
-  let t15;
-  if ($[23] !== dropdownElement) {
-    t15 = (event_1) => {
+  const handleMouseOver = t13;
+  let t14;
+  if ($[22] !== dropdownElement) {
+    t14 = (event_1) => {
       if (!hasItemsRef.current) {
         return;
       }
@@ -491,15 +486,15 @@ function Dropdown(t0) {
       }
       delete activeItem.dataset.uktActive;
     };
-    $[23] = dropdownElement;
-    $[24] = t15;
+    $[22] = dropdownElement;
+    $[23] = t14;
   } else {
-    t15 = $[24];
+    t14 = $[23];
   }
-  const handleMouseOut = t15;
-  let t16;
-  if ($[25] !== onMouseDown) {
-    t16 = (event_2) => {
+  const handleMouseOut = t14;
+  let t15;
+  if ($[24] !== onMouseDown) {
+    t15 = (event_2) => {
       if (onMouseDown) {
         onMouseDown(event_2);
       }
@@ -517,15 +512,15 @@ function Dropdown(t0) {
         isOpeningTimerRef.current = null;
       }, 1e3);
     };
-    $[25] = onMouseDown;
-    $[26] = t16;
+    $[24] = onMouseDown;
+    $[25] = t15;
   } else {
-    t16 = $[26];
+    t15 = $[25];
   }
-  const handleMouseDown = t16;
-  let t17;
-  if ($[27] !== handleSubmitItem || $[28] !== onMouseUp) {
-    t17 = (event_3) => {
+  const handleMouseDown = t15;
+  let t16;
+  if ($[26] !== handleSubmitItem || $[27] !== onMouseUp) {
+    t16 = (event_3) => {
       if (onMouseUp) {
         onMouseUp(event_3);
       }
@@ -544,16 +539,16 @@ function Dropdown(t0) {
       }
       handleSubmitItem(event_3);
     };
-    $[27] = handleSubmitItem;
-    $[28] = onMouseUp;
-    $[29] = t17;
+    $[26] = handleSubmitItem;
+    $[27] = onMouseUp;
+    $[28] = t16;
   } else {
-    t17 = $[29];
+    t16 = $[28];
   }
-  const handleMouseUp = t17;
-  let t18;
-  if ($[30] !== dropdownElement || $[31] !== handleSubmitItem) {
-    t18 = (event_4) => {
+  const handleMouseUp = t16;
+  let t17;
+  if ($[29] !== dropdownElement || $[30] !== handleSubmitItem || $[31] !== onActiveItem) {
+    t17 = (event_4) => {
       const {
         altKey,
         ctrlKey,
@@ -595,7 +590,9 @@ function Dropdown(t0) {
           }
           setActiveItem({
             dropdownElement,
+            event: event_4,
             isExactMatch: allowCreateRef.current,
+            onActiveItem,
             text: enteredCharactersRef.current
           });
           if (clearEnteredCharactersTimerRef.current) {
@@ -625,12 +622,16 @@ function Dropdown(t0) {
           if (altKey || metaKey) {
             setActiveItem({
               dropdownElement,
-              index: 0
+              event: event_4,
+              index: 0,
+              onActiveItem
             });
           } else {
             setActiveItem({
               dropdownElement,
-              indexAddend: -1
+              event: event_4,
+              indexAddend: -1,
+              onActiveItem
             });
           }
           return;
@@ -640,52 +641,54 @@ function Dropdown(t0) {
           if (altKey || metaKey) {
             setActiveItem({
               dropdownElement,
-              index: -1
+              event: event_4,
+              index: -1,
+              onActiveItem
             });
           } else {
             setActiveItem({
               dropdownElement,
-              indexAddend: 1
+              event: event_4,
+              indexAddend: 1,
+              onActiveItem
             });
           }
           return;
         }
       }
     };
-    $[30] = dropdownElement;
-    $[31] = handleSubmitItem;
-    $[32] = t18;
+    $[29] = dropdownElement;
+    $[30] = handleSubmitItem;
+    $[31] = onActiveItem;
+    $[32] = t17;
   } else {
-    t18 = $[32];
+    t17 = $[32];
   }
-  const handleKeyDown = t18;
-  let t19;
+  const handleKeyDown = t17;
+  let t18;
   if ($[33] !== handleKeyDown) {
-    t19 = {
+    t18 = {
       ignoreUsedKeyboardEvents: false,
       onKeyDown: handleKeyDown
     };
     $[33] = handleKeyDown;
-    $[34] = t19;
+    $[34] = t18;
   } else {
-    t19 = $[34];
+    t18 = $[34];
   }
-  useKeyboardEvents(t19);
-  const cleanupEventListenersRef = useRef(noop);
-  let t20;
-  if ($[35] !== isOpenOnMount || $[36] !== isTriggerFromProps) {
-    t20 = (ref) => {
+  useKeyboardEvents(t18);
+  let t19;
+  if ($[35] !== isOpenOnMount || $[36] !== onActiveItem) {
+    t19 = (ref) => {
       setDropdownElement(ref);
       if (!ref) {
-        cleanupEventListenersRef.current();
-        cleanupEventListenersRef.current = noop;
         return;
       }
       const {
         ownerDocument
       } = ref;
       let inputElement = inputElementRef.current;
-      if (isTriggerFromProps && !inputElement && ref.firstElementChild) {
+      if (!inputElement && ref.firstElementChild) {
         if (ref.firstElementChild.matches(TEXT_INPUT_SELECTOR)) {
           inputElement = ref.firstElementChild;
         } else {
@@ -693,19 +696,19 @@ function Dropdown(t0) {
         }
         inputElementRef.current = inputElement;
       }
-      const handleGlobalMouseDown = (t212) => {
+      const handleGlobalMouseDown = (t202) => {
         const {
           target
-        } = t212;
+        } = t202;
         const eventTarget_2 = target;
         if (!ref.contains(eventTarget_2)) {
           closeDropdown();
         }
       };
-      const handleGlobalMouseUp = (t222) => {
+      const handleGlobalMouseUp = (t212) => {
         const {
           target: target_0
-        } = t222;
+        } = t212;
         if (!isOpenRef.current || closingTimerRef.current) {
           return;
         }
@@ -722,10 +725,10 @@ function Dropdown(t0) {
           closeDropdown();
         }
       };
-      const handleGlobalFocusIn = (t232) => {
+      const handleGlobalFocusIn = (t222) => {
         const {
           target: target_1
-        } = t232;
+        } = t222;
         if (!isOpenRef.current) {
           return;
         }
@@ -758,14 +761,16 @@ function Dropdown(t0) {
         }
         setActiveItem({
           dropdownElement: ref,
+          event: event_5,
           isExactMatch: allowCreateRef.current,
+          onActiveItem,
           text: enteredCharactersRef.current
         });
       };
       if (inputElement) {
         inputElement.addEventListener("input", handleInput);
       }
-      cleanupEventListenersRef.current = () => {
+      return () => {
         document.removeEventListener("focusin", handleGlobalFocusIn);
         document.removeEventListener("mousedown", handleGlobalMouseDown);
         document.removeEventListener("mouseup", handleGlobalMouseUp);
@@ -780,177 +785,177 @@ function Dropdown(t0) {
       };
     };
     $[35] = isOpenOnMount;
-    $[36] = isTriggerFromProps;
-    $[37] = t20;
+    $[36] = onActiveItem;
+    $[37] = t19;
   } else {
-    t20 = $[37];
+    t19 = $[37];
   }
-  const handleRef = t20;
-  if (!isTriggerFromProps) {
+  const handleRef = t19;
+  if (!isValidElement(trigger)) {
     if (isSearchable) {
-      const t212 = value ?? "";
-      let t222;
+      const t202 = value ?? "";
+      let t212;
       if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
-        t222 = () => setIsOpen(true);
-        $[38] = t222;
+        t212 = () => setIsOpen(true);
+        $[38] = t212;
       } else {
-        t222 = $[38];
+        t212 = $[38];
       }
-      let t232;
-      if ($[39] !== disabled || $[40] !== name || $[41] !== placeholder || $[42] !== t212 || $[43] !== tabIndex) {
-        t232 = /* @__PURE__ */ jsx("input", { autoComplete: "off", className: TRIGGER_CLASS_NAME, defaultValue: t212, disabled, name, onFocus: t222, placeholder, ref: inputElementRef, tabIndex, type: "text" });
+      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] = t212;
+        $[42] = t202;
         $[43] = tabIndex;
-        $[44] = t232;
+        $[44] = t222;
       } else {
-        t232 = $[44];
+        t222 = $[44];
       }
-      trigger = t232;
+      trigger = t222;
     } else {
-      let t212;
+      let t202;
       if ($[45] !== trigger) {
-        t212 = /* @__PURE__ */ jsx("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0, children: trigger });
+        t202 = /* @__PURE__ */ jsx("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0, type: "button", children: trigger });
         $[45] = trigger;
-        $[46] = t212;
+        $[46] = t202;
       } else {
-        t212 = $[46];
+        t202 = $[46];
       }
-      trigger = t212;
+      trigger = t202;
     }
   }
   if (label) {
-    let t212;
+    let t202;
     if ($[47] !== label) {
-      t212 = /* @__PURE__ */ jsx("div", { className: LABEL_TEXT_CLASS_NAME, children: label });
+      t202 = /* @__PURE__ */ jsx("div", { className: LABEL_TEXT_CLASS_NAME, children: label });
       $[47] = label;
-      $[48] = t212;
+      $[48] = t202;
     } else {
-      t212 = $[48];
+      t202 = $[48];
     }
-    let t222;
-    if ($[49] !== t212 || $[50] !== trigger) {
-      t222 = /* @__PURE__ */ jsxs("label", { className: LABEL_CLASS_NAME, children: [
-        t212,
+    let t212;
+    if ($[49] !== t202 || $[50] !== trigger) {
+      t212 = /* @__PURE__ */ jsxs("label", { className: LABEL_CLASS_NAME, children: [
+        t202,
         trigger
       ] });
-      $[49] = t212;
+      $[49] = t202;
       $[50] = trigger;
-      $[51] = t222;
+      $[51] = t212;
     } else {
-      t222 = $[51];
+      t212 = $[51];
     }
-    trigger = t222;
+    trigger = t212;
   }
   const dropdownRect = useBoundingClientRect(dropdownElement);
   const dropdownBodyRect = useBoundingClientRect(dropdownBodyElement);
-  let t21;
+  let t20;
   if ($[52] !== dropdownBodyElement) {
-    t21 = getBoundingAncestor(dropdownBodyElement);
+    t20 = getBoundingAncestor(dropdownBodyElement);
     $[52] = dropdownBodyElement;
-    $[53] = t21;
+    $[53] = t20;
   } else {
-    t21 = $[53];
+    t20 = $[53];
   }
-  const boundingElement = t21;
+  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 t222;
+    let t212;
     if ($[54] !== dropdownBodyRect.top || $[55] !== dropdownRect.top || $[56] !== maxHeightDown || $[57] !== maxHeightUp) {
-      t222 = Math.round(dropdownBodyRect.top > dropdownRect.top ? maxHeightDown : maxHeightUp);
+      t212 = Math.round(dropdownBodyRect.top > dropdownRect.top ? maxHeightDown : maxHeightUp);
       $[54] = dropdownBodyRect.top;
       $[55] = dropdownRect.top;
       $[56] = maxHeightDown;
       $[57] = maxHeightUp;
-      $[58] = t222;
+      $[58] = t212;
     } else {
-      t222 = $[58];
+      t212 = $[58];
     }
-    maxHeight = t222;
+    maxHeight = t212;
     const maxWidthLeft = dropdownBodyRect.right - boundingElementRect.left;
     const maxWidthRight = boundingElementRect.right - dropdownBodyRect.left;
-    let t232;
+    let t222;
     if ($[59] !== dropdownBodyRect.left || $[60] !== dropdownRect.left || $[61] !== maxWidthLeft || $[62] !== maxWidthRight) {
-      t232 = Math.round(dropdownBodyRect.left > dropdownRect.left ? maxWidthRight : maxWidthLeft);
+      t222 = Math.round(dropdownBodyRect.left > dropdownRect.left ? maxWidthRight : maxWidthLeft);
       $[59] = dropdownBodyRect.left;
       $[60] = dropdownRect.left;
       $[61] = maxWidthLeft;
       $[62] = maxWidthRight;
-      $[63] = t232;
+      $[63] = t222;
     } else {
-      t232 = $[63];
+      t222 = $[63];
     }
-    maxWidth = t232;
+    maxWidth = t222;
   }
-  let t22;
+  let t21;
   if ($[64] !== maxHeight || $[65] !== minHeightBody) {
-    t22 = maxHeight != null && maxHeight > minHeightBody ? {
+    t21 = maxHeight != null && maxHeight > minHeightBody ? {
       [BODY_MAX_HEIGHT_VAR]: `calc(${maxHeight}px - var(--uktdd-body-buffer))`
     } : null;
     $[64] = maxHeight;
     $[65] = minHeightBody;
-    $[66] = t22;
+    $[66] = t21;
   } else {
-    t22 = $[66];
+    t21 = $[66];
   }
-  let t23;
+  let t22;
   if ($[67] !== maxWidth || $[68] !== minWidthBody) {
-    t23 = maxWidth != null && maxWidth > minWidthBody ? {
+    t22 = maxWidth != null && maxWidth > minWidthBody ? {
       [BODY_MAX_WIDTH_VAR]: `calc(${maxWidth}px - var(--uktdd-body-buffer))`
     } : null;
     $[67] = maxWidth;
     $[68] = minWidthBody;
-    $[69] = t23;
+    $[69] = t22;
   } else {
-    t23 = $[69];
+    t22 = $[69];
   }
-  let t24;
-  if ($[70] !== styleFromProps || $[71] !== t22 || $[72] !== t23) {
-    t24 = {
+  let t23;
+  if ($[70] !== styleFromProps || $[71] !== t21 || $[72] !== t22) {
+    t23 = {
       ...styleFromProps,
-      ...t22,
-      ...t23
+      ...t21,
+      ...t22
     };
     $[70] = styleFromProps;
-    $[71] = t22;
-    $[72] = t23;
-    $[73] = t24;
+    $[71] = t21;
+    $[72] = t22;
+    $[73] = t23;
   } else {
-    t24 = $[73];
+    t23 = $[73];
   }
-  const style = t24;
+  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 t25;
+  let t24;
   if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
-    t25 = /* @__PURE__ */ jsx(Style, { href: "@acusti/dropdown/Dropdown", children: STYLES });
-    $[74] = t25;
+    t24 = /* @__PURE__ */ jsx(Style, { href: "@acusti/dropdown/Dropdown", children: STYLES });
+    $[74] = t24;
   } else {
-    t25 = $[74];
+    t24 = $[74];
   }
-  const t26 = `@acusti/dropdown/Dropdown/${id}`;
-  let t27;
-  if ($[75] !== anchorStyles || $[76] !== t26) {
-    t27 = /* @__PURE__ */ jsx(Style, { href: t26, children: anchorStyles });
+  const t25 = `@acusti/dropdown/Dropdown/${id}`;
+  let t26;
+  if ($[75] !== anchorStyles || $[76] !== t25) {
+    t26 = /* @__PURE__ */ jsx(Style, { href: t25, children: anchorStyles });
     $[75] = anchorStyles;
-    $[76] = t26;
-    $[77] = t27;
+    $[76] = t25;
+    $[77] = t26;
   } else {
-    t27 = $[77];
+    t26 = $[77];
   }
-  let t28;
+  let t27;
   if ($[78] !== className || $[79] !== disabled || $[80] !== isOpen || $[81] !== isSearchable) {
-    t28 = clsx(ROOT_CLASS_NAME, className, {
+    t27 = clsx(ROOT_CLASS_NAME, className, {
       disabled,
       "is-open": isOpen,
       "is-searchable": isSearchable
@@ -959,25 +964,25 @@ function Dropdown(t0) {
     $[79] = disabled;
     $[80] = isOpen;
     $[81] = isSearchable;
-    $[82] = t28;
+    $[82] = t27;
   } else {
-    t28 = $[82];
+    t27 = $[82];
   }
-  let t29;
+  let t28;
   if ($[83] !== children || $[84] !== childrenCount || $[85] !== isOpen) {
-    t29 = isOpen ? /* @__PURE__ */ jsx("div", { className: BODY_CLASS_NAME, ref: setDropdownBodyElement, children: childrenCount > 1 ? children[1] : children }) : null;
+    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] = t29;
+    $[86] = t28;
   } else {
-    t29 = $[86];
+    t28 = $[86];
   }
-  let t30;
-  if ($[87] !== handleMouseDown || $[88] !== handleMouseOut || $[89] !== handleMouseOver || $[90] !== handleMouseUp || $[91] !== handleRef || $[92] !== id || $[93] !== onClick || $[94] !== style || $[95] !== t28 || $[96] !== t29 || $[97] !== trigger) {
-    t30 = /* @__PURE__ */ jsxs("div", { className: t28, "data-ukt-id": id, onClick, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseOut: handleMouseOut, onMouseOver: handleMouseOver, onMouseUp: handleMouseUp, ref: handleRef, style, children: [
+  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,
-      t29
+      t28
     ] });
     $[87] = handleMouseDown;
     $[88] = handleMouseOut;
@@ -987,34 +992,30 @@ function Dropdown(t0) {
     $[92] = id;
     $[93] = onClick;
     $[94] = style;
-    $[95] = t28;
-    $[96] = t29;
+    $[95] = t27;
+    $[96] = t28;
     $[97] = trigger;
-    $[98] = t30;
+    $[98] = t29;
   } else {
-    t30 = $[98];
+    t29 = $[98];
   }
-  let t31;
-  if ($[99] !== t27 || $[100] !== t30) {
-    t31 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t25,
-      t27,
-      t30
+  let t30;
+  if ($[99] !== t26 || $[100] !== t29) {
+    t30 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t24,
+      t26,
+      t29
     ] });
-    $[99] = t27;
-    $[100] = t30;
-    $[101] = t31;
+    $[99] = t26;
+    $[100] = t29;
+    $[101] = t30;
   } else {
-    t31 = $[101];
+    t30 = $[101];
   }
-  return t31;
-}
-function _temp() {
-  idCounter = idCounter >= 999999 ? 0 : idCounter + 1;
-  return idCounter;
+  return t30;
 }
 function getBoundingAncestor(element) {
-  while (element == null ? void 0 : element.parentElement) {
+  while (element?.parentElement) {
     if (element.parentElement.tagName === "BODY") return element.parentElement;
     if (getComputedStyle(element.parentElement).overflowX !== "visible") {
       return element.parentElement;