@dreamtree-org/twreact-ui 1.3.11 → 2.0.0

package/dist/esm/components/feedback/sheetCore.js

@@ -0,0 +1,494 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useId, useRef, useState, useCallback, useMemo, useEffect, useSyncExternalStore, createContext } from 'react';
+import { X } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import { setRefs } from '../../utils/position.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import Portal from '../utility/Portal.js';
+import { getFocusable, useFocusTrap } from '../../hooks/useFocusTrap.js';
+import { useScrollLock } from '../../hooks/useScrollLock.js';
+import { usePresence } from '../../hooks/usePresence.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { useSheetDrag, rubberBand, FLICK_VELOCITY } from '../../hooks/useSheetDrag.js';
+
+var _excluded = ["open", "onClose", "placement", "snapPoints", "activeSnap", "defaultSnap", "onSnapChange", "dismissible", "dragEnabled", "handle", "scaleBackground", "initialFocus", "hasTitle", "hasDescription", "idPrefix", "testIdPrefix", "panelClassName", "handleBarClassName", "renderHeader", "children", "className", "style"];
+// Internal (not exported from the package). The shared sheet core behind
+// `Sheet` and `Drawer` (ADR 0001 §1): portal, backdrop, presence (enter/exit
+// motion), drag to dismiss + snap points, focus trap, scroll lock,
+// keyboard-aware sizing and the optional background scale. The public
+// components only decide their chrome: panel classes, header and labels.
+var SHEET_PLACEMENTS = ["bottom", "top", "left", "right"];
+var EXIT_MS = 200; // matches `animate-sheet-out` / duration-base
+var DISMISS_DISTANCE = 80; // px past the resting (or lowest) position
+var FLICK_MIN_DISTANCE = 16; // px; a flick shorter than this is a tap
+var UPWARD_STRETCH = 24; // px; rubber band limit when pulling a content-height sheet away from its edge
+var VIEWPORT_GAP = 16; // px kept free above a full-height sheet (1rem)
+// Off-screen resting transform for the enter/exit transition.
+var OFFSCREEN = {
+  bottom: "translate-y-full",
+  top: "-translate-y-full",
+  right: "translate-x-full",
+  left: "-translate-x-full"
+};
+// Classes put on the consumer's [data-sheet-background] wrapper while open.
+var BACKGROUND_CLASSES = ["origin-top", "scale-[0.94]", "rounded-sheet", "overflow-hidden", "transition-transform", "duration-slow", "ease-emphasized"];
+var translateFor = function translateFor(side, px) {
+  if (!px) return undefined;
+  if (side === "bottom") return "translateY(".concat(px, "px)");
+  if (side === "top") return "translateY(".concat(-px, "px)");
+  if (side === "right") return "translateX(".concat(px, "px)");
+  return "translateX(".concat(-px, "px)");
+};
+function readViewport() {
+  if (typeof window === "undefined") return {
+    height: 0,
+    offset: 0
+  };
+  var inner = window.innerHeight || 0;
+  var vv = window.visualViewport;
+  if (!vv) return {
+    height: inner,
+    offset: 0
+  };
+  // `offset` is the part of the layout viewport the on-screen keyboard covers.
+  var offset = Math.max(0, Math.round(inner - vv.height - (vv.offsetTop || 0)));
+  return {
+    height: vv.height || inner,
+    offset: offset
+  };
+}
+var isTextEntry = function isTextEntry(el) {
+  return !!el && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName || ""));
+};
+var SERVER_VIEWPORT = {
+  height: 0,
+  offset: 0
+};
+var viewportCache = SERVER_VIEWPORT;
+// Stable snapshot for useSyncExternalStore: a new object only when it changes.
+function getViewportSnapshot() {
+  var next = readViewport();
+  if (next.height !== viewportCache.height || next.offset !== viewportCache.offset) viewportCache = next;
+  return viewportCache;
+}
+var getServerViewport = function getServerViewport() {
+  return SERVER_VIEWPORT;
+};
+/**
+ * Tracks the visual viewport (keyboard-aware) while `active`. On resize it
+ * also keeps a focused field inside `panel` scrolled into view.
+ */
+function useViewport(active, panel) {
+  var subscribe = useCallback(function (onChange) {
+    var _vv$addEventListener, _vv$addEventListener2;
+    if (!active || typeof window === "undefined") return function () {};
+    var vv = window.visualViewport;
+    var update = function update() {
+      onChange();
+      var focused = document.activeElement;
+      if (isTextEntry(focused) && panel !== null && panel !== void 0 && panel.contains(focused)) {
+        var _focused$scrollIntoVi;
+        (_focused$scrollIntoVi = focused.scrollIntoView) === null || _focused$scrollIntoVi === void 0 || _focused$scrollIntoVi.call(focused, {
+          block: "nearest"
+        });
+      }
+    };
+    vv === null || vv === void 0 || (_vv$addEventListener = vv.addEventListener) === null || _vv$addEventListener === void 0 || _vv$addEventListener.call(vv, "resize", update);
+    vv === null || vv === void 0 || (_vv$addEventListener2 = vv.addEventListener) === null || _vv$addEventListener2 === void 0 || _vv$addEventListener2.call(vv, "scroll", update);
+    window.addEventListener("resize", update);
+    return function () {
+      var _vv$removeEventListen, _vv$removeEventListen2;
+      vv === null || vv === void 0 || (_vv$removeEventListen = vv.removeEventListener) === null || _vv$removeEventListen === void 0 || _vv$removeEventListen.call(vv, "resize", update);
+      vv === null || vv === void 0 || (_vv$removeEventListen2 = vv.removeEventListener) === null || _vv$removeEventListen2 === void 0 || _vv$removeEventListen2.call(vv, "scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [active, panel]);
+  return useSyncExternalStore(subscribe, getViewportSnapshot, getServerViewport);
+}
+/** Opt-in iOS-style background scale (ADR 0001 §4). No-op under reduced motion. */
+function useScaleBackground(active) {
+  useEffect(function () {
+    var _el$classList;
+    if (!active || typeof document === "undefined") return undefined;
+    var el = document.querySelector("[data-sheet-background]");
+    if (!el) return undefined;
+    var added = BACKGROUND_CLASSES.filter(function (c) {
+      return !el.classList.contains(c);
+    });
+    (_el$classList = el.classList).add.apply(_el$classList, _toConsumableArray(added));
+    el.setAttribute("data-sheet-scaled", "true");
+    return function () {
+      var _el$classList2;
+      (_el$classList2 = el.classList).remove.apply(_el$classList2, _toConsumableArray(added));
+      el.removeAttribute("data-sheet-scaled");
+    };
+  }, [active]);
+}
+/** Calls the consumer's handler first, then ours. */
+function mergeHandlers(ours, theirs) {
+  var merged = {};
+  Object.keys(ours).forEach(function (key) {
+    merged[key] = function (e) {
+      var _theirs$key;
+      (_theirs$key = theirs[key]) === null || _theirs$key === void 0 || _theirs$key.call(theirs, e);
+      ours[key](e);
+    };
+  });
+  return merged;
+}
+/**
+ * Context for parts rendered inside the core: drag handlers for the grab zone
+ * (header) and the scrolling body, ids, and `requestClose(reason)`.
+ */
+var SheetContext = /*#__PURE__*/createContext(null);
+/**
+ * The shared sheet core. Internal: `Sheet` and `Drawer` wrap it.
+ *
+ * Beyond Sheet's own props it takes the chrome its wrappers vary:
+ * - `dragEnabled` (default true): turns the drag gesture on.
+ * - `hasTitle` / `hasDescription`: wire `aria-labelledby` / `aria-describedby`.
+ * - `idPrefix`, `testIdPrefix`: ids (`<prefix>-title-…`) and test ids
+ *   (`<prefix>-backdrop`, `<prefix>-handle`).
+ * - `panelClassName`: base + placement + size classes for the panel.
+ * - `handleBarClassName`: the grab handle's bar.
+ * - `renderHeader({ titleId, descriptionId, requestClose, showHandle, side })`:
+ *   rendered before `children`, inside the context.
+ */
+var SheetCore = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
+    snapPoints = _ref.snapPoints,
+    activeSnap = _ref.activeSnap,
+    _ref$defaultSnap = _ref.defaultSnap,
+    defaultSnap = _ref$defaultSnap === void 0 ? 0 : _ref$defaultSnap,
+    onSnapChange = _ref.onSnapChange,
+    _ref$dismissible = _ref.dismissible,
+    dismissible = _ref$dismissible === void 0 ? true : _ref$dismissible,
+    _ref$dragEnabled = _ref.dragEnabled,
+    dragEnabled = _ref$dragEnabled === void 0 ? true : _ref$dragEnabled,
+    handle = _ref.handle,
+    _ref$scaleBackground = _ref.scaleBackground,
+    scaleBackground = _ref$scaleBackground === void 0 ? false : _ref$scaleBackground,
+    initialFocus = _ref.initialFocus,
+    _ref$hasTitle = _ref.hasTitle,
+    hasTitle = _ref$hasTitle === void 0 ? false : _ref$hasTitle,
+    _ref$hasDescription = _ref.hasDescription,
+    hasDescription = _ref$hasDescription === void 0 ? false : _ref$hasDescription,
+    _ref$idPrefix = _ref.idPrefix,
+    idPrefix = _ref$idPrefix === void 0 ? "sheet" : _ref$idPrefix,
+    _ref$testIdPrefix = _ref.testIdPrefix,
+    testIdPrefix = _ref$testIdPrefix === void 0 ? "sheet" : _ref$testIdPrefix,
+    panelClassName = _ref.panelClassName,
+    _ref$handleBarClassNa = _ref.handleBarClassName,
+    handleBarClassName = _ref$handleBarClassNa === void 0 ? "bg-muted/40" : _ref$handleBarClassNa,
+    renderHeader = _ref.renderHeader,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var shown = Boolean(open);
+  var side = SHEET_PLACEMENTS.includes(placement) ? placement : "bottom";
+  var vertical = side === "bottom" || side === "top";
+  var snaps = vertical && Array.isArray(snapPoints) && snapPoints.length > 0 ? snapPoints : null;
+  var showHandle = handle !== null && handle !== void 0 ? handle : side === "bottom";
+  var id = useId();
+  var titleId = "".concat(idPrefix, "-title-").concat(id);
+  var descriptionId = "".concat(idPrefix, "-description-").concat(id);
+  var panelRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    bodyEl = _useState2[0],
+    setBodyEl = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    closedByDrag = _useState4[0],
+    setClosedByDrag = _useState4[1];
+  // The panel node, once the Portal has rendered it (never on the server).
+  // Focus management waits for it.
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    panelEl = _useState6[0],
+    setPanelEl = _useState6[1];
+  var onCloseRef = useLatestRef(onClose);
+  var reducedMotion = useReducedMotion();
+  var presence = usePresence(shown, {
+    duration: EXIT_MS
+  });
+  var panelCallbackRef = useCallback(function (node) {
+    return setRefs(node, panelRef, ref, setPanelEl);
+  }, [ref]);
+  var ready = panelEl != null;
+  var visible = presence.mounted;
+  // Snap index: controlled via `activeSnap`, else internal (reset on reopen).
+  var _useState7 = useState(defaultSnap),
+    _useState8 = _slicedToArray(_useState7, 2),
+    internalSnap = _useState8[0],
+    setInternalSnap = _useState8[1];
+  var _useState9 = useState(shown),
+    _useState0 = _slicedToArray(_useState9, 2),
+    prevShown = _useState0[0],
+    setPrevShown = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    entered = _useState10[0],
+    setEntered = _useState10[1];
+  if (prevShown !== shown) {
+    setPrevShown(shown);
+    if (shown) {
+      setInternalSnap(defaultSnap);
+      setClosedByDrag(false);
+    } else {
+      setEntered(false);
+    }
+  }
+  var rawSnap = activeSnap !== null && activeSnap !== void 0 ? activeSnap : internalSnap;
+  var snapIndex = snaps ? Math.min(Math.max(0, Number(rawSnap) || 0), snaps.length - 1) : 0;
+  var setSnap = function setSnap(next) {
+    if (!snaps || next === snapIndex || next < 0 || next >= snaps.length) return;
+    if (activeSnap === undefined) setInternalSnap(next);
+    onSnapChange === null || onSnapChange === void 0 || onSnapChange(next);
+  };
+  var requestClose = function requestClose(reason) {
+    var _onCloseRef$current;
+    setClosedByDrag(reason === "drag");
+    (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, reason);
+  };
+  var viewport = useViewport(ready, panelEl);
+  var vh = viewport.height;
+  var cap = Math.max(0, vh - VIEWPORT_GAP);
+  var heights = snaps ? snaps.map(function (f) {
+    return Math.min(cap, Math.max(0, Number(f) || 0) * vh);
+  }) : null;
+  var minHeight = heights ? Math.min.apply(Math, _toConsumableArray(heights)) : 0;
+  var maxHeight = heights ? Math.max.apply(Math, _toConsumableArray(heights)) : 0;
+  // Snap indexes ordered from smallest to largest height.
+  var order = heights ? heights.map(function (h, i) {
+    return [h, i];
+  }).sort(function (a, b) {
+    return a[0] - b[0];
+  }).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      i = _ref3[1];
+    return i;
+  }) : [];
+  var panelSize = function panelSize() {
+    var _panelEl$getBoundingC;
+    var rect = panelEl === null || panelEl === void 0 || (_panelEl$getBoundingC = panelEl.getBoundingClientRect) === null || _panelEl$getBoundingC === void 0 ? void 0 : _panelEl$getBoundingC.call(panelEl);
+    var size = rect ? vertical ? rect.height : rect.width : 0;
+    return size > 0 ? size : DISMISS_DISTANCE * 2;
+  };
+  var onRelease = function onRelease(_ref4) {
+    var delta = _ref4.delta,
+      velocity = _ref4.velocity;
+    var flick = velocity >= FLICK_VELOCITY && delta > FLICK_MIN_DISTANCE;
+    if (!heights) {
+      var threshold = Math.min(DISMISS_DISTANCE, panelSize() / 2);
+      if (dismissible && (flick || delta >= threshold)) requestClose("drag");
+      return; // otherwise the sheet springs back to rest
+    }
+    var target = heights[snapIndex] - delta;
+    var below = minHeight - target;
+    if (dismissible && (flick || below >= Math.min(DISMISS_DISTANCE, minHeight / 2))) {
+      requestClose("drag");
+      return;
+    }
+    var nearest = snapIndex;
+    heights.forEach(function (h, i) {
+      if (Math.abs(h - target) < Math.abs(heights[nearest] - target)) nearest = i;
+    });
+    setSnap(nearest);
+  };
+  var canDrag = dragEnabled && ready && shown;
+  var drag = useSheetDrag({
+    edge: side,
+    enabled: canDrag,
+    onRelease: onRelease,
+    bodyEl: bodyEl
+  });
+  // Where the panel sits while dragging: height (snap sheets) + translate.
+  var height = heights ? heights[snapIndex] : undefined;
+  var translate = 0;
+  if (drag.dragging) {
+    var d = drag.delta;
+    if (heights) {
+      var target = heights[snapIndex] - d;
+      if (target > maxHeight) {
+        height = maxHeight + rubberBand(target - maxHeight, vh || maxHeight);
+      } else if (target < minHeight) {
+        height = minHeight;
+        translate = dismissible ? minHeight - target : rubberBand(minHeight - target, minHeight);
+      } else {
+        height = target;
+      }
+    } else if (d > 0) {
+      translate = dismissible ? d : rubberBand(d, panelSize());
+    } else {
+      translate = -rubberBand(-d, UPWARD_STRETCH);
+    }
+  }
+  useScrollLock(shown);
+  var focusTarget = useMemo(function () {
+    return {
+      get current() {
+        var _getFocusable$find;
+        if (initialFocus !== null && initialFocus !== void 0 && initialFocus.current) return initialFocus.current;
+        var panel = panelRef.current;
+        return (_getFocusable$find = getFocusable(panel).find(function (el) {
+          return !el.hasAttribute("data-sheet-handle");
+        })) !== null && _getFocusable$find !== void 0 ? _getFocusable$find : panel;
+      }
+    };
+  }, [initialFocus]);
+  useFocusTrap(panelRef, {
+    active: shown && ready,
+    initialFocusRef: focusTarget,
+    onEscape: function onEscape() {
+      if (dismissible) requestClose("escape");
+    }
+  });
+  useScaleBackground(scaleBackground && shown && ready && !reducedMotion);
+  // Transform-based enter for top/left/right (bottom uses animate-sheet-in):
+  // render off-screen once, then let the transition bring it in.
+  useEffect(function () {
+    if (!ready || !shown || entered) return undefined;
+    if (typeof window.requestAnimationFrame !== "function") {
+      var timer = setTimeout(function () {
+        return setEntered(true);
+      }, 16);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    var frame = window.requestAnimationFrame(function () {
+      return setEntered(true);
+    });
+    return function () {
+      var _window$cancelAnimati, _window;
+      return (_window$cancelAnimati = (_window = window).cancelAnimationFrame) === null || _window$cancelAnimati === void 0 ? void 0 : _window$cancelAnimati.call(_window, frame);
+    };
+  }, [ready, shown, entered]);
+  var exiting = presence.state === "exiting";
+  var useKeyframes = side === "bottom" && !closedByDrag;
+  var motionClass = "";
+  if (!reducedMotion) {
+    if (side === "bottom" && presence.state === "entering") motionClass = "animate-sheet-in motion-reduce:animate-none";else if (exiting && useKeyframes) motionClass = "animate-sheet-out motion-reduce:animate-none";else if (exiting || side !== "bottom" && !entered) motionClass = OFFSCREEN[side];
+  }
+  var panelStyle = _objectSpread2({}, style);
+  if (height !== undefined) panelStyle.height = "".concat(height, "px");
+  var transform = translateFor(side, translate);
+  if (transform) panelStyle.transform = transform;
+  if (viewport.offset > 0) {
+    var room = "calc(".concat(vh, "px - env(safe-area-inset-top, 0px) - 1rem)");
+    if (side === "bottom") {
+      panelStyle.bottom = "".concat(viewport.offset, "px");
+      panelStyle.maxHeight = room;
+    } else if (side === "top") {
+      panelStyle.maxHeight = room;
+    } else {
+      panelStyle.height = "".concat(vh, "px");
+    }
+  }
+  var onHandleKeyDown = function onHandleKeyDown(e) {
+    if (!snaps) return;
+    var grow = side === "bottom" ? "ArrowUp" : "ArrowDown";
+    var shrink = side === "bottom" ? "ArrowDown" : "ArrowUp";
+    if (e.key !== grow && e.key !== shrink) return;
+    e.preventDefault();
+    var pos = order.indexOf(snapIndex);
+    var next = order[pos + (e.key === grow ? 1 : -1)];
+    if (next !== undefined) setSnap(next);
+  };
+  var grabClass = canDrag ? "touch-none cursor-grab" : "";
+  var context = {
+    titleId: titleId,
+    descriptionId: descriptionId,
+    grabClass: grabClass,
+    headerDragProps: drag.dragProps,
+    bodyDragProps: drag.bodyDragProps,
+    setBodyEl: setBodyEl,
+    requestClose: requestClose
+  };
+  var handleBar = jsx("span", {
+    "aria-hidden": "true",
+    className: cn("h-1.5 w-10 rounded-pill", handleBarClassName)
+  });
+  var handleNode = showHandle ? snaps ? jsx("button", _objectSpread2(_objectSpread2({
+    type: "button",
+    "aria-label": "Resize sheet",
+    "aria-keyshortcuts": "ArrowUp ArrowDown",
+    "data-sheet-handle": "",
+    "data-testid": "".concat(testIdPrefix, "-handle"),
+    onKeyDown: onHandleKeyDown
+  }, drag.dragProps), {}, {
+    className: cn("flex w-full shrink-0 justify-center pb-1 pt-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500", side === "top" && "pb-3 pt-1", grabClass),
+    children: handleBar
+  })) : jsx("div", _objectSpread2(_objectSpread2({
+    "aria-hidden": "true",
+    "data-sheet-handle": "",
+    "data-testid": "".concat(testIdPrefix, "-handle")
+  }, drag.dragProps), {}, {
+    className: cn("flex shrink-0 justify-center pb-1 pt-3", side === "top" && "pb-3 pt-1", grabClass),
+    children: handleBar
+  })) : null;
+  return jsx(Portal, {
+    children: visible && jsx(SheetContext.Provider, {
+      value: context,
+      children: jsxs("div", {
+        className: cn("fixed inset-0 z-modal", exiting && "pointer-events-none"),
+        children: [jsx("div", {
+          "aria-hidden": "true",
+          "data-testid": "".concat(testIdPrefix, "-backdrop"),
+          className: cn("absolute inset-0 bg-black/50 motion-reduce:animate-none", exiting ? "animate-fade-out" : "animate-fade-in"),
+          onClick: function onClick() {
+            return dismissible && requestClose("backdrop");
+          }
+        }), jsxs("div", _objectSpread2(_objectSpread2({
+          ref: panelCallbackRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": hasTitle ? titleId : undefined,
+          "aria-describedby": hasDescription ? descriptionId : undefined,
+          tabIndex: -1,
+          "data-placement": side,
+          "data-state": presence.state,
+          "data-snap": snaps ? snapIndex : undefined,
+          "data-dragging": drag.dragging ? "" : undefined,
+          className: cn("absolute flex flex-col overflow-hidden shadow-overlay focus:outline-none", panelClassName, !drag.dragging && "transition-[transform,height] duration-base ease-standard motion-reduce:transition-none", motionClass, className),
+          style: panelStyle
+        }, props), {}, {
+          children: [side !== "top" && handleNode, renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader({
+            titleId: titleId,
+            descriptionId: descriptionId,
+            requestClose: requestClose,
+            showHandle: showHandle,
+            side: side
+          }), children, side === "top" && handleNode]
+        }))]
+      })
+    })
+  });
+});
+SheetCore.displayName = "SheetCore";
+/** The shared close (X) button: token colours, 44×44px touch target on coarse pointers. */
+var SheetCloseButton = function SheetCloseButton(_ref5) {
+  var onClick = _ref5.onClick,
+    label = _ref5.label,
+    className = _ref5.className;
+  return jsx("button", {
+    type: "button",
+    onClick: onClick,
+    "aria-label": label,
+    className: cn("inline-flex shrink-0 items-center justify-center rounded-control p-1 text-muted", "hover:bg-line/50 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET, className),
+    children: jsx(X, {
+      className: "h-5 w-5",
+      "aria-hidden": "true"
+    })
+  });
+};
+
+export { SHEET_PLACEMENTS, SheetCloseButton, SheetContext, SheetCore, mergeHandlers };

package/dist/esm/components/navigation/Dropdown.js

@@ -44,7 +44,7 @@ var Dropdown = function Dropdown(_ref) {
       },
       children: trigger
     }), isOpen && jsx("div", {
-      className: "absolute z-50 bg-surface text-foreground border border-line rounded-md shadow-lg ".concat(placementClasses[placement], " min-w-48"),
+      className: "absolute z-dropdown bg-surface text-foreground border border-line rounded-md shadow-lg ".concat(placementClasses[placement], " min-w-48"),
       children: children
     })]
   }));