eidos-ui 0.1.0

package/dist/chunk-KV2FG7AN.cjs

@@ -0,0 +1,401 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Dropdown/Dropdown.context.types.ts
+var _react = require('react');
+var DropdownContext = _react.createContext.call(void 0, { level: 0 });
+
+// src/components/Dropdown/Dropdown.context.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var DropdownProvider = ({
+  children,
+  level = 0
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownContext.Provider, { value: { level }, children });
+};
+
+// src/components/Dropdown/Dropdown.hooks.ts
+
+var useDropdownContext = () => {
+  return _react.useContext.call(void 0, DropdownContext);
+};
+
+// src/components/Dropdown/Dropdown.component.tsx
+
+var _reactdom = require('react-dom');
+
+var DropdownInternal = ({
+  trigger,
+  content,
+  placement: preferredPlacement = "bottom",
+  align = "start",
+  delay = 0,
+  disabled = false,
+  defaultOpen = false,
+  triggerClassName = "",
+  contentClassName = "",
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  autoWidth = true,
+  fullWidth = false,
+  triggerRef: externalTriggerRef,
+  isNested = false,
+  dropdownLevel,
+  dropdownGroup
+}) => {
+  const context = useDropdownContext();
+  const actualLevel = dropdownLevel !== void 0 ? dropdownLevel : context.level;
+  const [dropdownState, setDropdownState] = _react.useState.call(void 0, {
+    isVisible: defaultOpen,
+    isPositioned: false,
+    position: { top: 0, left: 0, placement: preferredPlacement }
+  });
+  const triggerRef = _react.useRef.call(void 0, null);
+  const contentRef = _react.useRef.call(void 0, null);
+  const timeoutRef = _react.useRef.call(void 0, void 0);
+  const animationFrameRef = _react.useRef.call(void 0, void 0);
+  const isScrollingRef = _react.useRef.call(void 0, false);
+  const getTriggerElement = _react.useCallback.call(void 0, 
+    () => _nullishCoalesce(_optionalChain([externalTriggerRef, 'optionalAccess', _ => _.current]), () => ( triggerRef.current)),
+    [externalTriggerRef]
+  );
+  const calculateDynamicSizing = _react.useCallback.call(void 0, 
+    (triggerRect) => {
+      const styles = { width: "max-content" };
+      if (autoWidth && (_optionalChain([externalTriggerRef, 'optionalAccess', _2 => _2.current]) || triggerRef.current)) {
+        const triggerWidth = triggerRect.width;
+        styles.minWidth = triggerWidth;
+      }
+      if (minWidth !== void 0) {
+        styles.minWidth = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
+      }
+      if (maxWidth !== void 0) {
+        if (maxWidth === "auto") {
+          styles.maxWidth = "none";
+        } else {
+          styles.maxWidth = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+        }
+      }
+      if (minHeight !== void 0) {
+        styles.minHeight = typeof minHeight === "number" ? `${minHeight}px` : minHeight;
+      }
+      if (maxHeight !== void 0) {
+        if (maxHeight === "auto") {
+          styles.maxHeight = "none";
+        } else {
+          styles.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+        }
+      }
+      const hasHeightConstraint = minHeight !== void 0 || maxHeight !== void 0;
+      if (hasHeightConstraint) {
+        styles.overflowY = "auto";
+      } else {
+        styles.overflowY = "visible";
+      }
+      return styles;
+    },
+    [autoWidth, externalTriggerRef, minWidth, maxWidth, minHeight, maxHeight]
+  );
+  const calculateOptimalPosition = _react.useCallback.call(void 0, 
+    (triggerRect, contentRect) => {
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const gap = 8;
+      let placement = preferredPlacement;
+      let top = 0;
+      let left = 0;
+      const alignedLeft = (() => {
+        switch (align) {
+          case "end":
+            return triggerRect.right - contentRect.width;
+          case "center":
+            return triggerRect.left + (triggerRect.width - contentRect.width) / 2;
+          default:
+            return triggerRect.left;
+        }
+      })();
+      const alignedTop = (() => {
+        switch (align) {
+          case "end":
+            return triggerRect.bottom - contentRect.height;
+          case "center":
+            return triggerRect.top + (triggerRect.height - contentRect.height) / 2;
+          default:
+            return triggerRect.top;
+        }
+      })();
+      switch (preferredPlacement) {
+        case "top":
+          top = triggerRect.top - contentRect.height - gap;
+          left = alignedLeft;
+          break;
+        case "bottom":
+          top = triggerRect.bottom + gap;
+          left = alignedLeft;
+          break;
+        case "left":
+          top = alignedTop;
+          left = triggerRect.left - contentRect.width - gap;
+          break;
+        case "right":
+          top = alignedTop;
+          left = triggerRect.right + gap;
+          break;
+      }
+      if (placement === "top" && top < gap) {
+        placement = "bottom";
+        top = triggerRect.bottom + gap;
+      } else if (placement === "bottom" && top + contentRect.height > viewportHeight - gap) {
+        placement = "top";
+        top = triggerRect.top - contentRect.height - gap;
+      } else if (placement === "left" && left < gap) {
+        placement = "right";
+        left = triggerRect.right + gap;
+      } else if (placement === "right" && left + contentRect.width > viewportWidth - gap) {
+        placement = "left";
+        left = triggerRect.left - contentRect.width - gap;
+      }
+      top = Math.max(gap, Math.min(top, viewportHeight - contentRect.height - gap));
+      left = Math.max(gap, Math.min(left, viewportWidth - contentRect.width - gap));
+      return { top, left, placement };
+    },
+    [preferredPlacement, align]
+  );
+  const handleScroll = _react.useCallback.call(void 0, () => {
+    if (!dropdownState.isVisible || !dropdownState.isPositioned || isScrollingRef.current) return;
+    isScrollingRef.current = true;
+    animationFrameRef.current = requestAnimationFrame(() => {
+      const triggerElement = getTriggerElement();
+      if (triggerElement && contentRef.current) {
+        const triggerRect = triggerElement.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);
+        setDropdownState((prev) => ({
+          ...prev,
+          position: { top, left, placement }
+        }));
+      }
+      isScrollingRef.current = false;
+    });
+  }, [
+    dropdownState.isVisible,
+    dropdownState.isPositioned,
+    calculateOptimalPosition,
+    getTriggerElement
+  ]);
+  const handleTriggerClick = _react.useCallback.call(void 0, () => {
+    if (disabled) return;
+    if (dropdownState.isVisible) {
+      setDropdownState((prev) => ({
+        ...prev,
+        isVisible: false,
+        isPositioned: false
+      }));
+    } else {
+      if (dropdownGroup) {
+        const siblingDropdowns = document.querySelectorAll(
+          `[data-dropdown-group="${dropdownGroup}"][data-dropdown-content]`
+        );
+        siblingDropdowns.forEach((dropdown) => {
+          const dropdownElement = dropdown;
+          dropdownElement.dispatchEvent(new CustomEvent("closeSibling"));
+        });
+      }
+      if (delay > 0) {
+        timeoutRef.current = setTimeout(() => {
+          setDropdownState((prev) => ({
+            ...prev,
+            isVisible: true,
+            isPositioned: false
+          }));
+        }, delay);
+      } else {
+        setDropdownState((prev) => ({
+          ...prev,
+          isVisible: true,
+          isPositioned: false
+        }));
+      }
+    }
+  }, [disabled, dropdownState.isVisible, delay, dropdownGroup]);
+  _react.useEffect.call(void 0, () => {
+    const handleCloseSibling = () => {
+      if (dropdownState.isVisible) {
+        setDropdownState((prev) => ({
+          ...prev,
+          isVisible: false,
+          isPositioned: false
+        }));
+      }
+    };
+    const currentContentRef = contentRef.current;
+    if (currentContentRef) {
+      currentContentRef.addEventListener("closeSibling", handleCloseSibling);
+    }
+    return () => {
+      if (currentContentRef) {
+        currentContentRef.removeEventListener("closeSibling", handleCloseSibling);
+      }
+    };
+  }, [dropdownState.isVisible]);
+  const handleClickOutside = _react.useCallback.call(void 0, 
+    (event) => {
+      if (!closeOnClickOutside || !dropdownState.isVisible) return;
+      const target = event.target;
+      if (_optionalChain([contentRef, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.contains, 'call', _5 => _5(target)])) {
+        return;
+      }
+      if (_optionalChain([getTriggerElement, 'call', _6 => _6(), 'optionalAccess', _7 => _7.contains, 'call', _8 => _8(target)])) {
+        return;
+      }
+      const allDropdowns = document.querySelectorAll("[data-dropdown-content]");
+      for (const dropdown of allDropdowns) {
+        if (dropdown === contentRef.current) continue;
+        if (dropdown.contains(target)) {
+          const clickedDropdownLevel = parseInt(
+            dropdown.getAttribute("data-dropdown-level") || "0"
+          );
+          if (clickedDropdownLevel > actualLevel) {
+            return;
+          }
+        }
+      }
+      setDropdownState((prev) => ({
+        ...prev,
+        isVisible: false,
+        isPositioned: false
+      }));
+    },
+    [closeOnClickOutside, dropdownState.isVisible, actualLevel, getTriggerElement]
+  );
+  const handleEscapeKey = _react.useCallback.call(void 0, 
+    (event) => {
+      if (closeOnEscape && event.key === "Escape" && dropdownState.isVisible) {
+        setDropdownState((prev) => ({
+          ...prev,
+          isVisible: false,
+          isPositioned: false
+        }));
+      }
+    },
+    [closeOnEscape, dropdownState.isVisible]
+  );
+  _react.useEffect.call(void 0, () => {
+    const triggerElement = getTriggerElement();
+    if (dropdownState.isVisible && !dropdownState.isPositioned && contentRef.current && triggerElement) {
+      const triggerRect = triggerElement.getBoundingClientRect();
+      const contentRect = contentRef.current.getBoundingClientRect();
+      const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);
+      setDropdownState((prev) => ({
+        ...prev,
+        position: { top, left, placement },
+        isPositioned: true
+      }));
+    }
+  }, [
+    dropdownState.isVisible,
+    dropdownState.isPositioned,
+    calculateOptimalPosition,
+    getTriggerElement
+  ]);
+  _react.useEffect.call(void 0, () => {
+    const handleResize = () => {
+      const triggerElement = getTriggerElement();
+      if (dropdownState.isVisible && dropdownState.isPositioned && contentRef.current && triggerElement) {
+        const triggerRect = triggerElement.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);
+        setDropdownState((prev) => ({
+          ...prev,
+          position: { top, left, placement }
+        }));
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [
+    dropdownState.isVisible,
+    dropdownState.isPositioned,
+    calculateOptimalPosition,
+    getTriggerElement
+  ]);
+  _react.useEffect.call(void 0, () => {
+    if (dropdownState.isVisible) {
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      document.body.addEventListener("scroll", handleScroll, { passive: true });
+    }
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      document.body.removeEventListener("scroll", handleScroll);
+    };
+  }, [dropdownState.isVisible, handleScroll]);
+  _react.useEffect.call(void 0, () => {
+    if (dropdownState.isVisible) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [dropdownState.isVisible, handleClickOutside, handleEscapeKey]);
+  _react.useEffect.call(void 0, () => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleTriggerClick,
+        className: `eidos-dropdown-trigger ${fullWidth ? "eidos-dropdown-trigger--fullWidth" : ""} ${triggerClassName}`,
+        role: "button",
+        tabIndex: -1,
+        children: trigger
+      }
+    ),
+    dropdownState.isVisible && _reactdom.createPortal.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          ref: contentRef,
+          "data-dropdown-content": true,
+          "data-dropdown-level": actualLevel,
+          "data-dropdown-group": dropdownGroup || "",
+          className: `eidos-dropdown-content eidos-dropdown-content--${dropdownState.position.placement} ${isNested ? "eidos-dropdown-content--nested" : ""} ${dropdownState.isPositioned ? "eidos-dropdown-content--positioned" : ""} ${contentClassName || ""}`,
+          style: {
+            top: dropdownState.position.top,
+            left: dropdownState.position.left,
+            ...calculateDynamicSizing(
+              _optionalChain([getTriggerElement, 'call', _9 => _9(), 'optionalAccess', _10 => _10.getBoundingClientRect, 'call', _11 => _11()]) || new DOMRect()
+            )
+          },
+          role: "menu",
+          children: content
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+var Dropdown = (props) => {
+  const context = useDropdownContext();
+  const nextLevel = props.dropdownLevel !== void 0 ? props.dropdownLevel : context.level + 1;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownProvider, { level: nextLevel, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownInternal, { ...props }) });
+};
+Dropdown.displayName = "Dropdown";
+
+
+
+
+
+exports.DropdownProvider = DropdownProvider; exports.useDropdownContext = useDropdownContext; exports.Dropdown = Dropdown;
+//# sourceMappingURL=chunk-KV2FG7AN.cjs.map

package/dist/chunk-KV2FG7AN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-KV2FG7AN.cjs","../src/components/Dropdown/Dropdown.context.types.ts","../src/components/Dropdown/Dropdown.context.tsx","../src/components/Dropdown/Dropdown.hooks.ts","../src/components/Dropdown/Dropdown.component.tsx"],"names":["jsx"],"mappings":"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","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-KV2FG7AN.cjs","sourcesContent":[null,"import { createContext } from 'react';\r\n\r\nexport interface DropdownContextValue {\r\n  level: number;\r\n}\r\n\r\nexport const DropdownContext = createContext<DropdownContextValue>({ level: 0 });\r\n","import React from 'react';\r\nimport { DropdownContext } from './Dropdown.context.types';\r\n\r\nexport const DropdownProvider: React.FC<{ children: React.ReactNode; level?: number }> = ({\r\n  children,\r\n  level = 0,\r\n}) => {\r\n  return <DropdownContext.Provider value={{ level }}>{children}</DropdownContext.Provider>;\r\n};\r\n","import { useContext } from 'react';\r\nimport { DropdownContext } from './Dropdown.context.types';\r\n\r\nexport const useDropdownContext = () => {\r\n  return useContext(DropdownContext);\r\n};\r\n","import React, { useState, useRef, useCallback, useEffect } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\r\nimport { DropdownProvider } from './Dropdown.context';\r\nimport { useDropdownContext } from './Dropdown.hooks';\r\n\r\nconst DropdownInternal: React.FC<DropdownProps> = ({\r\n  trigger,\r\n  content,\r\n  placement: preferredPlacement = 'bottom',\r\n  align = 'start',\r\n  delay = 0,\r\n  disabled = false,\r\n  defaultOpen = false,\r\n  triggerClassName = '',\r\n  contentClassName = '',\r\n  closeOnClickOutside = true,\r\n  closeOnEscape = true,\r\n  minWidth,\r\n  maxWidth,\r\n  minHeight,\r\n  maxHeight,\r\n  autoWidth = true,\r\n  fullWidth = false,\r\n  triggerRef: externalTriggerRef,\r\n  isNested = false,\r\n  dropdownLevel,\r\n  dropdownGroup,\r\n}) => {\r\n  const context = useDropdownContext();\r\n  const actualLevel = dropdownLevel !== undefined ? dropdownLevel : context.level;\r\n  const [dropdownState, setDropdownState] = useState<DropdownState>({\r\n    isVisible: defaultOpen,\r\n    isPositioned: false,\r\n    position: { top: 0, left: 0, placement: preferredPlacement },\r\n  });\r\n  const triggerRef = useRef<HTMLDivElement>(null);\r\n  const contentRef = useRef<HTMLDivElement>(null);\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\r\n  const animationFrameRef = useRef<number | undefined>(undefined);\r\n  const isScrollingRef = useRef(false);\r\n\r\n  // The element to actually measure/anchor against. When a consumer passes\r\n  // `triggerRef`, that's an explicit statement of \"this is what I want the\r\n  // dropdown positioned relative to\" - it must win over the internal wrapper\r\n  // div, not just inform sizing. Consumers occasionally need `trigger` to be\r\n  // a small anchor node (e.g. a 0-height span) sitting inside a larger,\r\n  // variable-content field (chips, wrapped text); anchoring position to the\r\n  // wrapper instead of that field silently drifts as soon as the field's\r\n  // internal layout changes, since the wrapper only ever contains `trigger`\r\n  // itself, never the field around it.\r\n  const getTriggerElement = useCallback(\r\n    (): HTMLElement | null => externalTriggerRef?.current ?? triggerRef.current,\r\n    [externalTriggerRef],\r\n  );\r\n\r\n  const calculateDynamicSizing = useCallback(\r\n    (triggerRect: DOMRect) => {\r\n      // Shrink the panel to its content by default. This prevents the\r\n      // position:fixed element from expanding to viewport width when children\r\n      // use `width:100%` or `flex:1`. `minWidth` (set below) still wins when\r\n      // the trigger is wider than the content, as CSS min-width overrides width.\r\n      const styles: Record<string, string | number> = { width: 'max-content' };\r\n\r\n      if (autoWidth && (externalTriggerRef?.current || triggerRef.current)) {\r\n        const triggerWidth = triggerRect.width;\r\n        styles.minWidth = triggerWidth;\r\n      }\r\n\r\n      if (minWidth !== undefined) {\r\n        styles.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\r\n      }\r\n      if (maxWidth !== undefined) {\r\n        if (maxWidth === 'auto') {\r\n          styles.maxWidth = 'none';\r\n        } else {\r\n          styles.maxWidth = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\r\n        }\r\n      }\r\n      if (minHeight !== undefined) {\r\n        styles.minHeight = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\r\n      }\r\n      if (maxHeight !== undefined) {\r\n        if (maxHeight === 'auto') {\r\n          styles.maxHeight = 'none';\r\n        } else {\r\n          styles.maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\r\n        }\r\n      }\r\n\r\n      const hasHeightConstraint = minHeight !== undefined || maxHeight !== undefined;\r\n      if (hasHeightConstraint) {\r\n        styles.overflowY = 'auto';\r\n      } else {\r\n        styles.overflowY = 'visible';\r\n      }\r\n\r\n      return styles;\r\n    },\r\n    [autoWidth, externalTriggerRef, minWidth, maxWidth, minHeight, maxHeight],\r\n  );\r\n\r\n  const calculateOptimalPosition = useCallback(\r\n    (triggerRect: DOMRect, contentRect: DOMRect) => {\r\n      const viewportWidth = window.innerWidth;\r\n      const viewportHeight = window.innerHeight;\r\n      const gap = 8;\r\n\r\n      let placement: 'top' | 'bottom' | 'left' | 'right' = preferredPlacement;\r\n      let top = 0;\r\n      let left = 0;\r\n\r\n      // Helpers for cross-axis alignment\r\n      const alignedLeft = (() => {\r\n        switch (align) {\r\n          case 'end':\r\n            return triggerRect.right - contentRect.width;\r\n          case 'center':\r\n            return triggerRect.left + (triggerRect.width - contentRect.width) / 2;\r\n          default:\r\n            return triggerRect.left; // \"start\"\r\n        }\r\n      })();\r\n      const alignedTop = (() => {\r\n        switch (align) {\r\n          case 'end':\r\n            return triggerRect.bottom - contentRect.height;\r\n          case 'center':\r\n            return triggerRect.top + (triggerRect.height - contentRect.height) / 2;\r\n          default:\r\n            return triggerRect.top; // \"start\"\r\n        }\r\n      })();\r\n\r\n      switch (preferredPlacement) {\r\n        case 'top':\r\n          top = triggerRect.top - contentRect.height - gap;\r\n          left = alignedLeft;\r\n          break;\r\n        case 'bottom':\r\n          top = triggerRect.bottom + gap;\r\n          left = alignedLeft;\r\n          break;\r\n        case 'left':\r\n          top = alignedTop;\r\n          left = triggerRect.left - contentRect.width - gap;\r\n          break;\r\n        case 'right':\r\n          top = alignedTop;\r\n          left = triggerRect.right + gap;\r\n          break;\r\n      }\r\n\r\n      if (placement === 'top' && top < gap) {\r\n        placement = 'bottom';\r\n        top = triggerRect.bottom + gap;\r\n      } else if (placement === 'bottom' && top + contentRect.height > viewportHeight - gap) {\r\n        placement = 'top';\r\n        top = triggerRect.top - contentRect.height - gap;\r\n      } else if (placement === 'left' && left < gap) {\r\n        placement = 'right';\r\n        left = triggerRect.right + gap;\r\n      } else if (placement === 'right' && left + contentRect.width > viewportWidth - gap) {\r\n        placement = 'left';\r\n        left = triggerRect.left - contentRect.width - gap;\r\n      }\r\n\r\n      // Always clamp to both viewport edges - not just the near one - regardless\r\n      // of whether an explicit min/max size was passed. `autoWidth` consumers\r\n      // (Combobox, Select, TagInput suggestions, Menu, ...) never set\r\n      // minWidth/maxWidth, so gating this on those props left the far edge\r\n      // (right/bottom) completely unclamped and let content overflow the\r\n      // viewport whenever it rendered wider/taller than its trigger.\r\n      top = Math.max(gap, Math.min(top, viewportHeight - contentRect.height - gap));\r\n\r\n      left = Math.max(gap, Math.min(left, viewportWidth - contentRect.width - gap));\r\n\r\n      return { top, left, placement };\r\n    },\r\n    [preferredPlacement, align],\r\n  );\r\n\r\n  const handleScroll = useCallback(() => {\r\n    if (!dropdownState.isVisible || !dropdownState.isPositioned || isScrollingRef.current) return;\r\n\r\n    isScrollingRef.current = true;\r\n\r\n    animationFrameRef.current = requestAnimationFrame(() => {\r\n      const triggerElement = getTriggerElement();\r\n      if (triggerElement && contentRef.current) {\r\n        const triggerRect = triggerElement.getBoundingClientRect();\r\n        const contentRect = contentRef.current.getBoundingClientRect();\r\n\r\n        const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);\r\n\r\n        setDropdownState((prev) => ({\r\n          ...prev,\r\n          position: { top, left, placement },\r\n        }));\r\n      }\r\n\r\n      isScrollingRef.current = false;\r\n    });\r\n  }, [\r\n    dropdownState.isVisible,\r\n    dropdownState.isPositioned,\r\n    calculateOptimalPosition,\r\n    getTriggerElement,\r\n  ]);\r\n\r\n  const handleTriggerClick = useCallback(() => {\r\n    if (disabled) return;\r\n\r\n    if (dropdownState.isVisible) {\r\n      setDropdownState((prev) => ({\r\n        ...prev,\r\n        isVisible: false,\r\n        isPositioned: false,\r\n      }));\r\n    } else {\r\n      if (dropdownGroup) {\r\n        const siblingDropdowns = document.querySelectorAll(\r\n          `[data-dropdown-group=\"${dropdownGroup}\"][data-dropdown-content]`,\r\n        );\r\n        siblingDropdowns.forEach((dropdown) => {\r\n          const dropdownElement = dropdown as HTMLElement;\r\n\r\n          dropdownElement.dispatchEvent(new CustomEvent('closeSibling'));\r\n        });\r\n      }\r\n\r\n      if (delay > 0) {\r\n        timeoutRef.current = setTimeout(() => {\r\n          setDropdownState((prev) => ({\r\n            ...prev,\r\n            isVisible: true,\r\n            isPositioned: false,\r\n          }));\r\n        }, delay);\r\n      } else {\r\n        setDropdownState((prev) => ({\r\n          ...prev,\r\n          isVisible: true,\r\n          isPositioned: false,\r\n        }));\r\n      }\r\n    }\r\n  }, [disabled, dropdownState.isVisible, delay, dropdownGroup]);\r\n\r\n  useEffect(() => {\r\n    const handleCloseSibling = () => {\r\n      if (dropdownState.isVisible) {\r\n        setDropdownState((prev) => ({\r\n          ...prev,\r\n          isVisible: false,\r\n          isPositioned: false,\r\n        }));\r\n      }\r\n    };\r\n\r\n    const currentContentRef = contentRef.current;\r\n    if (currentContentRef) {\r\n      currentContentRef.addEventListener('closeSibling', handleCloseSibling);\r\n    }\r\n\r\n    return () => {\r\n      if (currentContentRef) {\r\n        currentContentRef.removeEventListener('closeSibling', handleCloseSibling);\r\n      }\r\n    };\r\n  }, [dropdownState.isVisible]);\r\n\r\n  const handleClickOutside = useCallback(\r\n    (event: MouseEvent) => {\r\n      if (!closeOnClickOutside || !dropdownState.isVisible) return;\r\n\r\n      const target = event.target as Node;\r\n\r\n      if (contentRef.current?.contains(target)) {\r\n        return;\r\n      }\r\n\r\n      if (getTriggerElement()?.contains(target)) {\r\n        return;\r\n      }\r\n\r\n      const allDropdowns = document.querySelectorAll('[data-dropdown-content]');\r\n      for (const dropdown of allDropdowns) {\r\n        if (dropdown === contentRef.current) continue;\r\n\r\n        if (dropdown.contains(target)) {\r\n          const clickedDropdownLevel = parseInt(\r\n            dropdown.getAttribute('data-dropdown-level') || '0',\r\n          );\r\n\r\n          if (clickedDropdownLevel > actualLevel) {\r\n            return;\r\n          }\r\n        }\r\n      }\r\n\r\n      setDropdownState((prev) => ({\r\n        ...prev,\r\n        isVisible: false,\r\n        isPositioned: false,\r\n      }));\r\n    },\r\n    [closeOnClickOutside, dropdownState.isVisible, actualLevel, getTriggerElement],\r\n  );\r\n\r\n  const handleEscapeKey = useCallback(\r\n    (event: KeyboardEvent) => {\r\n      if (closeOnEscape && event.key === 'Escape' && dropdownState.isVisible) {\r\n        setDropdownState((prev) => ({\r\n          ...prev,\r\n          isVisible: false,\r\n          isPositioned: false,\r\n        }));\r\n      }\r\n    },\r\n    [closeOnEscape, dropdownState.isVisible],\r\n  );\r\n\r\n  useEffect(() => {\r\n    const triggerElement = getTriggerElement();\r\n    if (\r\n      dropdownState.isVisible &&\r\n      !dropdownState.isPositioned &&\r\n      contentRef.current &&\r\n      triggerElement\r\n    ) {\r\n      const triggerRect = triggerElement.getBoundingClientRect();\r\n      const contentRect = contentRef.current.getBoundingClientRect();\r\n\r\n      const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);\r\n\r\n      setDropdownState((prev) => ({\r\n        ...prev,\r\n        position: { top, left, placement },\r\n        isPositioned: true,\r\n      }));\r\n    }\r\n  }, [\r\n    dropdownState.isVisible,\r\n    dropdownState.isPositioned,\r\n    calculateOptimalPosition,\r\n    getTriggerElement,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    const handleResize = () => {\r\n      const triggerElement = getTriggerElement();\r\n      if (\r\n        dropdownState.isVisible &&\r\n        dropdownState.isPositioned &&\r\n        contentRef.current &&\r\n        triggerElement\r\n      ) {\r\n        const triggerRect = triggerElement.getBoundingClientRect();\r\n        const contentRect = contentRef.current.getBoundingClientRect();\r\n\r\n        const { top, left, placement } = calculateOptimalPosition(triggerRect, contentRect);\r\n\r\n        setDropdownState((prev) => ({\r\n          ...prev,\r\n          position: { top, left, placement },\r\n        }));\r\n      }\r\n    };\r\n\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, [\r\n    dropdownState.isVisible,\r\n    dropdownState.isPositioned,\r\n    calculateOptimalPosition,\r\n    getTriggerElement,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    if (dropdownState.isVisible) {\r\n      window.addEventListener('scroll', handleScroll, { passive: true });\r\n\r\n      document.body.addEventListener('scroll', handleScroll, { passive: true });\r\n    }\r\n\r\n    return () => {\r\n      window.removeEventListener('scroll', handleScroll);\r\n      document.body.removeEventListener('scroll', handleScroll);\r\n    };\r\n  }, [dropdownState.isVisible, handleScroll]);\r\n\r\n  useEffect(() => {\r\n    if (dropdownState.isVisible) {\r\n      document.addEventListener('mousedown', handleClickOutside);\r\n      document.addEventListener('keydown', handleEscapeKey);\r\n    }\r\n\r\n    return () => {\r\n      document.removeEventListener('mousedown', handleClickOutside);\r\n      document.removeEventListener('keydown', handleEscapeKey);\r\n    };\r\n  }, [dropdownState.isVisible, handleClickOutside, handleEscapeKey]);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) {\r\n        clearTimeout(timeoutRef.current);\r\n      }\r\n      if (animationFrameRef.current) {\r\n        cancelAnimationFrame(animationFrameRef.current);\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        ref={triggerRef}\r\n        onClick={handleTriggerClick}\r\n        className={`eidos-dropdown-trigger ${fullWidth ? 'eidos-dropdown-trigger--fullWidth' : ''} ${triggerClassName}`}\r\n        role=\"button\"\r\n        tabIndex={-1}\r\n      >\r\n        {trigger}\r\n      </div>\r\n      {dropdownState.isVisible &&\r\n        createPortal(\r\n          <div\r\n            ref={contentRef}\r\n            data-dropdown-content\r\n            data-dropdown-level={actualLevel}\r\n            data-dropdown-group={dropdownGroup || ''}\r\n            className={`eidos-dropdown-content eidos-dropdown-content--${dropdownState.position.placement} ${isNested ? 'eidos-dropdown-content--nested' : ''} ${dropdownState.isPositioned ? 'eidos-dropdown-content--positioned' : ''} ${contentClassName || ''}`}\r\n            style={{\r\n              top: dropdownState.position.top,\r\n              left: dropdownState.position.left,\r\n              ...calculateDynamicSizing(\r\n                getTriggerElement()?.getBoundingClientRect() || new DOMRect(),\r\n              ),\r\n            }}\r\n            role=\"menu\"\r\n          >\r\n            {content}\r\n          </div>,\r\n          document.body,\r\n        )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport const Dropdown: React.FC<DropdownProps> = (props) => {\r\n  const context = useDropdownContext();\r\n  const nextLevel = props.dropdownLevel !== undefined ? props.dropdownLevel : context.level + 1;\r\n\r\n  return (\r\n    <DropdownProvider level={nextLevel}>\r\n      <DropdownInternal {...props} />\r\n    </DropdownProvider>\r\n  );\r\n};\r\n\r\nDropdown.displayName = 'Dropdown';\r\n"]}