@acusti/dropdown 0.47.0 → 0.49.0

package/dist/Dropdown.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { SYSTEM_UI_FONT, Style } from "@acusti/styling";
-import useIsOutOfBounds from "@acusti/use-is-out-of-bounds";
+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";
@@ -38,8 +38,7 @@ ${TRIGGER_SELECTOR} {
   font-family: var(--uktdd-font-family);
 }
 ${ROOT_SELECTOR} {
-  position: relative;
-  display: inline-block;
+  width: max-content;
 }
 ${ROOT_SELECTOR}.disabled {
   pointer-events: none;
@@ -49,6 +48,7 @@ ${ROOT_SELECTOR} > * {
 }
 ${LABEL_SELECTOR} {
   display: flex;
+  align-items: center;
 }
 ${LABEL_TEXT_SELECTOR} {
   padding-right: var(--uktdd-label-pad-right);
@@ -56,31 +56,38 @@ ${LABEL_TEXT_SELECTOR} {
 ${BODY_SELECTOR} {
   box-sizing: border-box;
   position: absolute;
-  top: 100%;
-  max-height: var(${BODY_MAX_HEIGHT_VAR});
+  top: anchor(bottom);
+  left: anchor(left);
+  bottom: auto;
+  right: auto;
+  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});
-  min-width: 100%;
   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);
 }
-${BODY_SELECTOR}.calculating-position {
-  visibility: hidden;
-}
-${BODY_SELECTOR}.out-of-bounds-bottom:not(.out-of-bounds-top) {
+@position-try --uktdd-top-left {
+  bottom: anchor(top);
+  left: anchor(left);
   top: auto;
-  bottom: 100%;
+  right: auto;
 }
-${BODY_SELECTOR}.out-of-bounds-right:not(.out-of-bounds-left) {
+@position-try --uktdd-bottom-right {
+  top: anchor(bottom);
+  right: anchor(right);
+  bottom: auto;
   left: auto;
-  right: 0px;
 }
-${LABEL_SELECTOR} + ${BODY_SELECTOR} {
+@position-try --uktdd-top-right {
+  bottom: anchor(top);
+  right: anchor(right);
+  top: auto;
   left: auto;
-  right: 0;
 }
 ${BODY_SELECTOR}.has-items {
   user-select: none;
@@ -216,8 +223,9 @@ 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(97);
+  const $ = c(119);
   const {
     allowCreate,
     allowEmpty: t1,
@@ -229,6 +237,8 @@ function Dropdown(t0) {
     isSearchable,
     keepOpenOnSubmit: t3,
     label,
+    minHeightBody: t4,
+    minWidthBody: t5,
     name,
     onClick,
     onClose,
@@ -244,6 +254,8 @@ function Dropdown(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) {
@@ -255,19 +267,20 @@ function Dropdown(t0) {
   if (childrenCount > 1) {
     trigger = children[0];
   }
-  let t4;
+  let t6;
   if ($[0] !== trigger) {
-    t4 = React.isValidElement(trigger);
+    t6 = React.isValidElement(trigger);
     $[0] = trigger;
-    $[1] = t4;
+    $[1] = t6;
   } else {
-    t4 = $[1];
+    t6 = $[1];
   }
-  const isTriggerFromProps = t4;
+  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 dropdownElementRef = useRef(null);
+  const [id] = useState(_temp);
   const inputElementRef = useRef(null);
   const closingTimerRef = useRef(null);
   const isOpeningTimerRef = useRef(null);
@@ -275,7 +288,6 @@ function Dropdown(t0) {
   const clearEnteredCharactersTimerRef = useRef(null);
   const enteredCharactersRef = useRef("");
   const mouseDownPositionRef = useRef(null);
-  const outOfBounds = useIsOutOfBounds(dropdownBodyElement);
   const allowCreateRef = useRef(allowCreate);
   const allowEmptyRef = useRef(allowEmpty);
   const hasItemsRef = useRef(hasItems);
@@ -286,10 +298,10 @@ function Dropdown(t0) {
   const onOpenRef = useRef(onOpen);
   const onSubmitItemRef = useRef(onSubmitItem);
   const valueRef = useRef(value);
-  let t5;
-  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) {
-    t5 = () => {
+    t7 = () => {
       allowCreateRef.current = allowCreate;
       allowEmptyRef.current = allowEmpty;
       hasItemsRef.current = hasItems;
@@ -301,7 +313,7 @@ function Dropdown(t0) {
       onSubmitItemRef.current = onSubmitItem;
       valueRef.current = value;
     };
-    t6 = [allowCreate, allowEmpty, hasItems, isOpen, isOpening, keepOpenOnSubmit, onClose, onOpen, onSubmitItem, value];
+    t8 = [allowCreate, allowEmpty, hasItems, isOpen, isOpening, keepOpenOnSubmit, onClose, onOpen, onSubmitItem, value];
     $[2] = allowCreate;
     $[3] = allowEmpty;
     $[4] = hasItems;
@@ -312,18 +324,18 @@ function Dropdown(t0) {
     $[9] = onOpen;
     $[10] = onSubmitItem;
     $[11] = value;
-    $[12] = t5;
-    $[13] = t6;
+    $[12] = t7;
+    $[13] = t8;
   } else {
-    t5 = $[12];
-    t6 = $[13];
+    t7 = $[12];
+    t8 = $[13];
   }
-  useEffect(t5, t6);
+  useEffect(t7, t8);
   const isMountedRef = useRef(false);
-  let t7;
-  let t8;
+  let t10;
+  let t9;
   if ($[14] !== isOpen) {
-    t7 = () => {
+    t9 = () => {
       if (!isMountedRef.current) {
         isMountedRef.current = true;
         if (isOpenRef.current && onOpenRef.current) {
@@ -339,18 +351,18 @@ function Dropdown(t0) {
         }
       }
     };
-    t8 = [isOpen];
+    t10 = [isOpen];
     $[14] = isOpen;
-    $[15] = t7;
-    $[16] = t8;
+    $[15] = t10;
+    $[16] = t9;
   } else {
-    t7 = $[15];
-    t8 = $[16];
+    t10 = $[15];
+    t9 = $[16];
   }
-  useEffect(t7, t8);
-  let t9;
+  useEffect(t9, t10);
+  let t11;
   if ($[17] !== setIsOpen || $[18] !== setIsOpening) {
-    t9 = () => {
+    t11 = () => {
       setIsOpen(false);
       setIsOpening(false);
       mouseDownPositionRef.current = null;
@@ -361,26 +373,22 @@ function Dropdown(t0) {
     };
     $[17] = setIsOpen;
     $[18] = setIsOpening;
-    $[19] = t9;
+    $[19] = t11;
   } else {
-    t9 = $[19];
+    t11 = $[19];
   }
-  const closeDropdown = t9;
-  let t10;
-  if ($[20] !== closeDropdown) {
-    t10 = (event) => {
+  const closeDropdown = t11;
+  let t12;
+  if ($[20] !== closeDropdown || $[21] !== dropdownElement) {
+    t12 = (event) => {
       var _a;
-      const eventTarget = event.target;
       if (isOpenRef.current && !keepOpenOnSubmitRef.current) {
-        const keepOpen = eventTarget.closest("[data-ukt-keep-open]");
-        if (!(keepOpen == null ? void 0 : keepOpen.dataset.uktKeepOpen) || keepOpen.dataset.uktKeepOpen === "false") {
-          closingTimerRef.current = setTimeout(closeDropdown, 90);
-        }
+        closingTimerRef.current = setTimeout(closeDropdown, 90);
       }
       if (!hasItemsRef.current) {
         return;
       }
-      const element = getActiveItemElement(dropdownElementRef.current);
+      const element = getActiveItemElement(dropdownElement);
       if (!element && !allowCreateRef.current) {
         if (!allowEmptyRef.current) {
           return;
@@ -414,18 +422,19 @@ function Dropdown(t0) {
       }
     };
     $[20] = closeDropdown;
-    $[21] = t10;
+    $[21] = dropdownElement;
+    $[22] = t12;
   } else {
-    t10 = $[21];
+    t12 = $[22];
   }
-  const handleSubmitItem = t10;
-  let t11;
-  if ($[22] !== setIsOpening) {
-    t11 = (t122) => {
+  const handleSubmitItem = t12;
+  let t13;
+  if ($[23] !== setIsOpening) {
+    t13 = (t142) => {
       const {
         clientX,
         clientY
-      } = t122;
+      } = t142;
       currentInputMethodRef.current = "mouse";
       const initialPosition = mouseDownPositionRef.current;
       if (!initialPosition) {
@@ -436,22 +445,21 @@ function Dropdown(t0) {
       }
       setIsOpening(false);
     };
-    $[22] = setIsOpening;
-    $[23] = t11;
+    $[23] = setIsOpening;
+    $[24] = t13;
   } else {
-    t11 = $[23];
+    t13 = $[24];
   }
-  const handleMouseMove = t11;
-  let t12;
-  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = (event_0) => {
+  const handleMouseMove = t13;
+  let t14;
+  if ($[25] !== dropdownElement) {
+    t14 = (event_0) => {
       if (!hasItemsRef.current) {
         return;
       }
       if (currentInputMethodRef.current !== "mouse") {
         return;
       }
-      const dropdownElement = dropdownElementRef.current;
       if (!dropdownElement) {
         return;
       }
@@ -459,9 +467,9 @@ function Dropdown(t0) {
       if (!itemElements) {
         return;
       }
-      const eventTarget_0 = event_0.target;
-      const item = eventTarget_0.closest(ITEM_SELECTOR);
-      const element_0 = item ?? eventTarget_0;
+      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({
@@ -472,18 +480,19 @@ function Dropdown(t0) {
         }
       }
     };
-    $[24] = t12;
+    $[25] = dropdownElement;
+    $[26] = t14;
   } else {
-    t12 = $[24];
+    t14 = $[26];
   }
-  const handleMouseOver = t12;
-  let t13;
-  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = (event_1) => {
+  const handleMouseOver = t14;
+  let t15;
+  if ($[27] !== dropdownElement) {
+    t15 = (event_1) => {
       if (!hasItemsRef.current) {
         return;
       }
-      const activeItem = getActiveItemElement(dropdownElementRef.current);
+      const activeItem = getActiveItemElement(dropdownElement);
       if (!activeItem) {
         return;
       }
@@ -493,14 +502,15 @@ function Dropdown(t0) {
       }
       delete activeItem.dataset.uktActive;
     };
-    $[25] = t13;
+    $[27] = dropdownElement;
+    $[28] = t15;
   } else {
-    t13 = $[25];
+    t15 = $[28];
   }
-  const handleMouseOut = t13;
-  let t14;
-  if ($[26] !== onMouseDown || $[27] !== setIsOpen || $[28] !== setIsOpening) {
-    t14 = (event_2) => {
+  const handleMouseOut = t15;
+  let t16;
+  if ($[29] !== onMouseDown || $[30] !== setIsOpen || $[31] !== setIsOpening) {
+    t16 = (event_2) => {
       if (onMouseDown) {
         onMouseDown(event_2);
       }
@@ -518,26 +528,26 @@ function Dropdown(t0) {
         isOpeningTimerRef.current = null;
       }, 1e3);
     };
-    $[26] = onMouseDown;
-    $[27] = setIsOpen;
-    $[28] = setIsOpening;
-    $[29] = t14;
+    $[29] = onMouseDown;
+    $[30] = setIsOpen;
+    $[31] = setIsOpening;
+    $[32] = t16;
   } else {
-    t14 = $[29];
+    t16 = $[32];
   }
-  const handleMouseDown = t14;
-  let t15;
-  if ($[30] !== closeDropdown || $[31] !== handleSubmitItem || $[32] !== onMouseUp) {
-    t15 = (event_3) => {
+  const handleMouseDown = t16;
+  let t17;
+  if ($[33] !== closeDropdown || $[34] !== handleSubmitItem || $[35] !== onMouseUp) {
+    t17 = (event_3) => {
       if (onMouseUp) {
         onMouseUp(event_3);
       }
       if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current) {
         return;
       }
-      const eventTarget_1 = event_3.target;
-      if (!eventTarget_1.closest(BODY_SELECTOR)) {
-        if (!isOpeningRef.current && inputElementRef.current !== eventTarget_1.ownerDocument.activeElement) {
+      const eventTarget_0 = event_3.target;
+      if (!eventTarget_0.closest(BODY_SELECTOR)) {
+        if (!isOpeningRef.current && inputElementRef.current !== eventTarget_0.ownerDocument.activeElement) {
           closeDropdown();
         }
         return;
@@ -547,26 +557,25 @@ function Dropdown(t0) {
       }
       handleSubmitItem(event_3);
     };
-    $[30] = closeDropdown;
-    $[31] = handleSubmitItem;
-    $[32] = onMouseUp;
-    $[33] = t15;
+    $[33] = closeDropdown;
+    $[34] = handleSubmitItem;
+    $[35] = onMouseUp;
+    $[36] = t17;
   } else {
-    t15 = $[33];
+    t17 = $[36];
   }
-  const handleMouseUp = t15;
-  let t16;
-  if ($[34] !== closeDropdown || $[35] !== handleSubmitItem || $[36] !== setIsOpen) {
-    t16 = (event_4) => {
+  const handleMouseUp = t17;
+  let t18;
+  if ($[37] !== closeDropdown || $[38] !== dropdownElement || $[39] !== handleSubmitItem || $[40] !== setIsOpen) {
+    t18 = (event_4) => {
       const {
         altKey,
         ctrlKey,
         key,
         metaKey
       } = event_4;
-      const eventTarget_2 = event_4.target;
-      const dropdownElement_0 = dropdownElementRef.current;
-      if (!dropdownElement_0) {
+      const eventTarget_1 = event_4.target;
+      if (!dropdownElement) {
         return;
       }
       const onEventHandled = () => {
@@ -574,7 +583,7 @@ function Dropdown(t0) {
         event_4.preventDefault();
         currentInputMethodRef.current = "keyboard";
       };
-      const isEventTargetingDropdown = dropdownElement_0.contains(eventTarget_2);
+      const isEventTargetingDropdown = dropdownElement.contains(eventTarget_1);
       if (!isOpenRef.current) {
         if (!isEventTargetingDropdown) {
           return;
@@ -599,7 +608,7 @@ function Dropdown(t0) {
             enteredCharactersRef.current = enteredCharactersRef.current + key;
           }
           setActiveItem({
-            dropdownElement: dropdownElement_0,
+            dropdownElement,
             isExactMatch: allowCreateRef.current,
             text: enteredCharactersRef.current
           });
@@ -629,12 +638,12 @@ function Dropdown(t0) {
           onEventHandled();
           if (altKey || metaKey) {
             setActiveItem({
-              dropdownElement: dropdownElement_0,
+              dropdownElement,
               index: 0
             });
           } else {
             setActiveItem({
-              dropdownElement: dropdownElement_0,
+              dropdownElement,
               indexAddend: -1
             });
           }
@@ -644,12 +653,12 @@ function Dropdown(t0) {
           onEventHandled();
           if (altKey || metaKey) {
             setActiveItem({
-              dropdownElement: dropdownElement_0,
+              dropdownElement,
               index: -1
             });
           } else {
             setActiveItem({
-              dropdownElement: dropdownElement_0,
+              dropdownElement,
               indexAddend: 1
             });
           }
@@ -657,31 +666,32 @@ function Dropdown(t0) {
         }
       }
     };
-    $[34] = closeDropdown;
-    $[35] = handleSubmitItem;
-    $[36] = setIsOpen;
-    $[37] = t16;
+    $[37] = closeDropdown;
+    $[38] = dropdownElement;
+    $[39] = handleSubmitItem;
+    $[40] = setIsOpen;
+    $[41] = t18;
   } else {
-    t16 = $[37];
+    t18 = $[41];
   }
-  const handleKeyDown = t16;
-  let t17;
-  if ($[38] !== handleKeyDown) {
-    t17 = {
+  const handleKeyDown = t18;
+  let t19;
+  if ($[42] !== handleKeyDown) {
+    t19 = {
       ignoreUsedKeyboardEvents: false,
       onKeyDown: handleKeyDown
     };
-    $[38] = handleKeyDown;
-    $[39] = t17;
+    $[42] = handleKeyDown;
+    $[43] = t19;
   } else {
-    t17 = $[39];
+    t19 = $[43];
   }
-  useKeyboardEvents(t17);
+  useKeyboardEvents(t19);
   const cleanupEventListenersRef = useRef(noop);
-  let t18;
-  if ($[40] !== closeDropdown || $[41] !== isOpenOnMount || $[42] !== isTriggerFromProps || $[43] !== setIsOpen || $[44] !== setIsOpening) {
-    t18 = (ref) => {
-      dropdownElementRef.current = ref;
+  let t20;
+  if ($[44] !== closeDropdown || $[45] !== isOpenOnMount || $[46] !== isTriggerFromProps || $[47] !== setDropdownElement || $[48] !== setIsOpen || $[49] !== setIsOpening) {
+    t20 = (ref) => {
+      setDropdownElement(ref);
       if (!ref) {
         cleanupEventListenersRef.current();
         cleanupEventListenersRef.current = noop;
@@ -699,20 +709,19 @@ function Dropdown(t0) {
         }
         inputElementRef.current = inputElement;
       }
-      const handleGlobalMouseDown = (t192) => {
+      const handleGlobalMouseDown = (t212) => {
         const {
           target
-        } = t192;
-        const eventTarget_3 = target;
-        if (dropdownElementRef.current && !dropdownElementRef.current.contains(eventTarget_3)) {
+        } = t212;
+        const eventTarget_2 = target;
+        if (!ref.contains(eventTarget_2)) {
           closeDropdown();
         }
       };
-      const handleGlobalMouseUp = (t202) => {
-        var _a;
+      const handleGlobalMouseUp = (t222) => {
         const {
           target: target_0
-        } = t202;
+        } = t222;
         if (!isOpenRef.current || closingTimerRef.current) {
           return;
         }
@@ -724,20 +733,20 @@ function Dropdown(t0) {
           }
           return;
         }
-        const eventTarget_4 = target_0;
-        if (!((_a = dropdownElementRef.current) == null ? void 0 : _a.contains(eventTarget_4))) {
+        const eventTarget_3 = target_0;
+        if (!ref.contains(eventTarget_3)) {
           closeDropdown();
         }
       };
-      const handleGlobalFocusIn = (t212) => {
+      const handleGlobalFocusIn = (t232) => {
         const {
           target: target_1
-        } = t212;
+        } = t232;
         if (!isOpenRef.current) {
           return;
         }
-        const eventTarget_5 = target_1;
-        if (!dropdownElementRef.current || dropdownElementRef.current.contains(eventTarget_5) || eventTarget_5.contains(dropdownElementRef.current)) {
+        const eventTarget_4 = target_1;
+        if (ref.contains(eventTarget_4) || eventTarget_4.contains(ref)) {
           return;
         }
         closeDropdown();
@@ -754,21 +763,17 @@ function Dropdown(t0) {
         ref.focus();
       }
       const handleInput = (event_5) => {
-        const dropdownElement_1 = dropdownElementRef.current;
-        if (!dropdownElement_1) {
-          return;
-        }
         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(dropdownElement_1)) {
+        if (isDeleting && input.value.length && getActiveItemElement(ref)) {
           return;
         }
         setActiveItem({
-          dropdownElement: dropdownElement_1,
+          dropdownElement: ref,
           isExactMatch: allowCreateRef.current,
           text: enteredCharactersRef.current
         });
@@ -790,180 +795,257 @@ function Dropdown(t0) {
         }
       };
     };
-    $[40] = closeDropdown;
-    $[41] = isOpenOnMount;
-    $[42] = isTriggerFromProps;
-    $[43] = setIsOpen;
-    $[44] = setIsOpening;
-    $[45] = t18;
+    $[44] = closeDropdown;
+    $[45] = isOpenOnMount;
+    $[46] = isTriggerFromProps;
+    $[47] = setDropdownElement;
+    $[48] = setIsOpen;
+    $[49] = setIsOpening;
+    $[50] = t20;
   } else {
-    t18 = $[45];
+    t20 = $[50];
   }
-  const handleRef = t18;
+  const handleRef = t20;
   if (!isTriggerFromProps) {
     if (isSearchable) {
-      const t192 = value ?? "";
-      let t202;
-      if ($[46] !== setIsOpen) {
-        t202 = () => setIsOpen(true);
-        $[46] = setIsOpen;
-        $[47] = t202;
+      const t212 = value ?? "";
+      let t222;
+      if ($[51] !== setIsOpen) {
+        t222 = () => setIsOpen(true);
+        $[51] = setIsOpen;
+        $[52] = t222;
       } else {
-        t202 = $[47];
+        t222 = $[52];
       }
-      let t212;
-      if ($[48] !== disabled || $[49] !== name || $[50] !== placeholder || $[51] !== t192 || $[52] !== t202 || $[53] !== tabIndex) {
-        t212 = /* @__PURE__ */ jsx("input", { autoComplete: "off", className: TRIGGER_CLASS_NAME, defaultValue: t192, disabled, name, onFocus: t202, placeholder, ref: inputElementRef, tabIndex, type: "text" });
-        $[48] = disabled;
-        $[49] = name;
-        $[50] = placeholder;
-        $[51] = t192;
-        $[52] = t202;
-        $[53] = tabIndex;
-        $[54] = t212;
+      let t232;
+      if ($[53] !== disabled || $[54] !== name || $[55] !== placeholder || $[56] !== t212 || $[57] !== t222 || $[58] !== tabIndex) {
+        t232 = /* @__PURE__ */ jsx("input", { autoComplete: "off", className: TRIGGER_CLASS_NAME, defaultValue: t212, disabled, name, onFocus: t222, placeholder, ref: inputElementRef, tabIndex, type: "text" });
+        $[53] = disabled;
+        $[54] = name;
+        $[55] = placeholder;
+        $[56] = t212;
+        $[57] = t222;
+        $[58] = tabIndex;
+        $[59] = t232;
       } else {
-        t212 = $[54];
+        t232 = $[59];
       }
-      trigger = t212;
+      trigger = t232;
     } else {
-      let t192;
-      if ($[55] !== trigger) {
-        t192 = /* @__PURE__ */ jsx("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0, children: trigger });
-        $[55] = trigger;
-        $[56] = t192;
+      let t212;
+      if ($[60] !== trigger) {
+        t212 = /* @__PURE__ */ jsx("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0, children: trigger });
+        $[60] = trigger;
+        $[61] = t212;
       } else {
-        t192 = $[56];
+        t212 = $[61];
       }
-      trigger = t192;
+      trigger = t212;
     }
   }
   if (label) {
-    let t192;
-    if ($[57] !== label) {
-      t192 = /* @__PURE__ */ jsx("div", { className: LABEL_TEXT_CLASS_NAME, children: label });
-      $[57] = label;
-      $[58] = t192;
+    let t212;
+    if ($[62] !== label) {
+      t212 = /* @__PURE__ */ jsx("div", { className: LABEL_TEXT_CLASS_NAME, children: label });
+      $[62] = label;
+      $[63] = t212;
     } else {
-      t192 = $[58];
+      t212 = $[63];
     }
-    let t202;
-    if ($[59] !== t192 || $[60] !== trigger) {
-      t202 = /* @__PURE__ */ jsxs("label", { className: LABEL_CLASS_NAME, children: [
-        t192,
+    let t222;
+    if ($[64] !== t212 || $[65] !== trigger) {
+      t222 = /* @__PURE__ */ jsxs("label", { className: LABEL_CLASS_NAME, children: [
+        t212,
         trigger
       ] });
-      $[59] = t192;
-      $[60] = trigger;
-      $[61] = t202;
+      $[64] = t212;
+      $[65] = trigger;
+      $[66] = t222;
     } else {
-      t202 = $[61];
+      t222 = $[66];
     }
-    trigger = t202;
+    trigger = t222;
   }
-  let t19;
-  if ($[62] !== outOfBounds.maxHeight) {
-    t19 = outOfBounds.maxHeight != null && outOfBounds.maxHeight > 0 ? {
-      [BODY_MAX_HEIGHT_VAR]: `calc(${outOfBounds.maxHeight}px - var(--uktdd-body-buffer))`
+  const dropdownRect = useBoundingClientRect(dropdownElement);
+  const dropdownBodyRect = useBoundingClientRect(dropdownBodyElement);
+  let t21;
+  if ($[67] !== dropdownBodyElement) {
+    t21 = getBoundingAncestor(dropdownBodyElement);
+    $[67] = dropdownBodyElement;
+    $[68] = t21;
+  } else {
+    t21 = $[68];
+  }
+  const boundingElement = t21;
+  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;
+    if ($[69] !== dropdownBodyRect.top || $[70] !== dropdownRect.top || $[71] !== maxHeightDown || $[72] !== maxHeightUp) {
+      t222 = Math.round(dropdownBodyRect.top > dropdownRect.top ? maxHeightDown : maxHeightUp);
+      $[69] = dropdownBodyRect.top;
+      $[70] = dropdownRect.top;
+      $[71] = maxHeightDown;
+      $[72] = maxHeightUp;
+      $[73] = t222;
+    } else {
+      t222 = $[73];
+    }
+    maxHeight = t222;
+    const maxWidthLeft = dropdownBodyRect.right - boundingElementRect.left;
+    const maxWidthRight = boundingElementRect.right - dropdownBodyRect.left;
+    let t232;
+    if ($[74] !== dropdownBodyRect.left || $[75] !== dropdownRect.left || $[76] !== maxWidthLeft || $[77] !== maxWidthRight) {
+      t232 = Math.round(dropdownBodyRect.left > dropdownRect.left ? maxWidthRight : maxWidthLeft);
+      $[74] = dropdownBodyRect.left;
+      $[75] = dropdownRect.left;
+      $[76] = maxWidthLeft;
+      $[77] = maxWidthRight;
+      $[78] = t232;
+    } else {
+      t232 = $[78];
+    }
+    maxWidth = t232;
+  }
+  let t22;
+  if ($[79] !== maxHeight || $[80] !== minHeightBody) {
+    t22 = maxHeight != null && maxHeight > minHeightBody ? {
+      [BODY_MAX_HEIGHT_VAR]: `calc(${maxHeight}px - var(--uktdd-body-buffer))`
     } : null;
-    $[62] = outOfBounds.maxHeight;
-    $[63] = t19;
+    $[79] = maxHeight;
+    $[80] = minHeightBody;
+    $[81] = t22;
   } else {
-    t19 = $[63];
+    t22 = $[81];
   }
-  let t20;
-  if ($[64] !== outOfBounds.maxWidth) {
-    t20 = outOfBounds.maxWidth != null && outOfBounds.maxWidth > 0 ? {
-      [BODY_MAX_WIDTH_VAR]: `calc(${outOfBounds.maxWidth}px - var(--uktdd-body-buffer))`
+  let t23;
+  if ($[82] !== maxWidth || $[83] !== minWidthBody) {
+    t23 = maxWidth != null && maxWidth > minWidthBody ? {
+      [BODY_MAX_WIDTH_VAR]: `calc(${maxWidth}px - var(--uktdd-body-buffer))`
     } : null;
-    $[64] = outOfBounds.maxWidth;
-    $[65] = t20;
+    $[82] = maxWidth;
+    $[83] = minWidthBody;
+    $[84] = t23;
   } else {
-    t20 = $[65];
+    t23 = $[84];
   }
-  let t21;
-  if ($[66] !== styleFromProps || $[67] !== t19 || $[68] !== t20) {
-    t21 = {
+  let t24;
+  if ($[85] !== styleFromProps || $[86] !== t22 || $[87] !== t23) {
+    t24 = {
       ...styleFromProps,
-      ...t19,
-      ...t20
+      ...t22,
+      ...t23
     };
-    $[66] = styleFromProps;
-    $[67] = t19;
-    $[68] = t20;
-    $[69] = t21;
+    $[85] = styleFromProps;
+    $[86] = t22;
+    $[87] = t23;
+    $[88] = t24;
   } else {
-    t21 = $[69];
+    t24 = $[88];
   }
-  const style = t21;
-  let t22;
-  if ($[70] === Symbol.for("react.memo_cache_sentinel")) {
-    t22 = /* @__PURE__ */ jsx(Style, { href: "@acusti/dropdown/Dropdown", children: STYLES });
-    $[70] = t22;
+  const style = t24;
+  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;
+  if ($[89] === Symbol.for("react.memo_cache_sentinel")) {
+    t25 = /* @__PURE__ */ jsx(Style, { href: "@acusti/dropdown/Dropdown", children: STYLES });
+    $[89] = t25;
   } else {
-    t22 = $[70];
+    t25 = $[89];
   }
-  let t23;
-  if ($[71] !== className || $[72] !== disabled || $[73] !== isOpen || $[74] !== isSearchable) {
-    t23 = clsx(ROOT_CLASS_NAME, className, {
+  const t26 = `@acusti/dropdown/Dropdown/${id}`;
+  let t27;
+  if ($[90] !== anchorStyles || $[91] !== t26) {
+    t27 = /* @__PURE__ */ jsx(Style, { href: t26, children: anchorStyles });
+    $[90] = anchorStyles;
+    $[91] = t26;
+    $[92] = t27;
+  } else {
+    t27 = $[92];
+  }
+  let t28;
+  if ($[93] !== className || $[94] !== disabled || $[95] !== isOpen || $[96] !== isSearchable) {
+    t28 = clsx(ROOT_CLASS_NAME, className, {
       disabled,
       "is-open": isOpen,
       "is-searchable": isSearchable
     });
-    $[71] = className;
-    $[72] = disabled;
-    $[73] = isOpen;
-    $[74] = isSearchable;
-    $[75] = t23;
+    $[93] = className;
+    $[94] = disabled;
+    $[95] = isOpen;
+    $[96] = isSearchable;
+    $[97] = t28;
   } else {
-    t23 = $[75];
+    t28 = $[97];
   }
-  let t24;
-  if ($[76] !== children || $[77] !== childrenCount || $[78] !== hasItems || $[79] !== isOpen || $[80] !== outOfBounds.bottom || $[81] !== outOfBounds.hasLayout || $[82] !== outOfBounds.left || $[83] !== outOfBounds.right || $[84] !== outOfBounds.top || $[85] !== setDropdownBodyElement) {
-    t24 = isOpen ? /* @__PURE__ */ jsx("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, children: childrenCount > 1 ? children[1] : children }) : null;
-    $[76] = children;
-    $[77] = childrenCount;
-    $[78] = hasItems;
-    $[79] = isOpen;
-    $[80] = outOfBounds.bottom;
-    $[81] = outOfBounds.hasLayout;
-    $[82] = outOfBounds.left;
-    $[83] = outOfBounds.right;
-    $[84] = outOfBounds.top;
-    $[85] = setDropdownBodyElement;
-    $[86] = t24;
+  let t29;
+  if ($[98] !== children || $[99] !== childrenCount || $[100] !== isOpen || $[101] !== setDropdownBodyElement) {
+    t29 = isOpen ? /* @__PURE__ */ jsx("div", { className: BODY_CLASS_NAME, ref: setDropdownBodyElement, children: childrenCount > 1 ? children[1] : children }) : null;
+    $[98] = children;
+    $[99] = childrenCount;
+    $[100] = isOpen;
+    $[101] = setDropdownBodyElement;
+    $[102] = t29;
   } else {
-    t24 = $[86];
+    t29 = $[102];
   }
-  let t25;
-  if ($[87] !== handleMouseDown || $[88] !== handleMouseMove || $[89] !== handleMouseUp || $[90] !== handleRef || $[91] !== onClick || $[92] !== style || $[93] !== t23 || $[94] !== t24 || $[95] !== trigger) {
-    t25 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t22,
-      /* @__PURE__ */ jsxs("div", { className: t23, onClick, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseOut: handleMouseOut, onMouseOver: handleMouseOver, onMouseUp: handleMouseUp, ref: handleRef, style, children: [
-        trigger,
-        t24
-      ] })
+  let t30;
+  if ($[103] !== handleMouseDown || $[104] !== handleMouseMove || $[105] !== handleMouseOut || $[106] !== handleMouseOver || $[107] !== handleMouseUp || $[108] !== handleRef || $[109] !== id || $[110] !== onClick || $[111] !== style || $[112] !== t28 || $[113] !== t29 || $[114] !== 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: [
+      trigger,
+      t29
+    ] });
+    $[103] = handleMouseDown;
+    $[104] = handleMouseMove;
+    $[105] = handleMouseOut;
+    $[106] = handleMouseOver;
+    $[107] = handleMouseUp;
+    $[108] = handleRef;
+    $[109] = id;
+    $[110] = onClick;
+    $[111] = style;
+    $[112] = t28;
+    $[113] = t29;
+    $[114] = trigger;
+    $[115] = t30;
+  } else {
+    t30 = $[115];
+  }
+  let t31;
+  if ($[116] !== t27 || $[117] !== t30) {
+    t31 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t25,
+      t27,
+      t30
     ] });
-    $[87] = handleMouseDown;
-    $[88] = handleMouseMove;
-    $[89] = handleMouseUp;
-    $[90] = handleRef;
-    $[91] = onClick;
-    $[92] = style;
-    $[93] = t23;
-    $[94] = t24;
-    $[95] = trigger;
-    $[96] = t25;
+    $[116] = t27;
+    $[117] = t30;
+    $[118] = t31;
   } else {
-    t25 = $[96];
+    t31 = $[118];
+  }
+  return t31;
+}
+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 t25;
+  return null;
 }
 export {
   Dropdown as default