@oxyhq/bloom 0.89.0 → 1.0.0

package/lib/module/overlay/Overlay.js

@@ -0,0 +1,392 @@
+"use strict";
+
+/**
+ * The shared plumbing every portaled surface needs: an interactive ROOT and a
+ * press-to-dismiss BACKDROP. Dialog, BottomSheet, the image gallery, menus and
+ * toasts each used to hand-roll both, and each one got the web contract subtly
+ * wrong in its own way — and looked different while doing it (the image viewer
+ * blurred, everything else only dimmed).
+ *
+ * ## The contract these two components encode
+ *
+ * Bloom's web `Portal` renders into `#bloom-portal-root`, which is
+ * `position: fixed; inset: 0; pointer-events: none` — an idle portal must let
+ * clicks reach the app underneath. `pointer-events` INHERITS in CSS, so every
+ * portaled descendant starts out click-through and has to opt back in.
+ *
+ * The opt-in only works through the `pointerEvents` **prop**. Passing it inside
+ * a `style` object (`style={{ pointerEvents: 'box-none' }}`) does NOT reach the
+ * DOM: react-native-web resolves the RN-only `box-none`/`box-only` values in
+ * `createDOMProps`, mapping the PROP onto its own class pair
+ * (`self { none !important }` + `> * { auto }`), while a style-object value is
+ * not valid CSS and is dropped. `pointerEvents: 'auto'`/`'none'` do survive as
+ * styles, which is what makes this so easy to get wrong — the two RN-only
+ * values silently do nothing. The symptom is brutal and silent: the whole
+ * surface — backdrop AND panel — renders perfectly and is completely
+ * click-through. Backdrop taps don't dismiss, buttons don't press, and the
+ * clicks land on whatever is behind the overlay (so a tap "through" a viewer
+ * navigates the page underneath). Only keyboard paths (Escape) keep working,
+ * which is what makes it look like a dismissal bug rather than a hit-testing
+ * one.
+ *
+ * A backdrop also only dismisses what is actually ON TOP of it: a full-screen
+ * layer rendered ABOVE the backdrop (a pager, a zoom container) receives the
+ * press first and swallows it. Either that layer opts out (`pointerEvents
+ *="box-none"`) or it owns the dismiss itself — the backdrop being present is
+ * not enough.
+ *
+ * EXPO/EXPO-ROUTER APPS ONLY for `BloomProvider` — see `src/provider`; these
+ * two components are universal.
+ *
+ * Use `<OverlayRoot>` for the surface's outermost node and `<Backdrop>` for its
+ * dimming layer; do not re-implement either with raw `View`s.
+ */
+import { createContext, memo, useContext, useMemo } from 'react';
+import { BlurView } from 'expo-blur';
+import { useWindowedBlurTarget } from "../glass/blur-target.js";
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { WEB_POSITION_FIXED } from "../styles/web-view-style.js";
+import { StyledView } from "../styles/styled-primitives.js";
+import { layerForRank } from "./stack.js";
+import { useOverlayLayer } from "./use-overlay-layer.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
+
+/**
+ * The z-indices of the nearest enclosing `OverlayRoot`. Descendants that order
+ * themselves within a surface (a dialog's panel above its own backdrop) read
+ * this instead of picking their own numbers.
+ *
+ * The default is the first rank rather than 0, so a surface part rendered
+ * outside any `OverlayRoot` still lands in the overlay band instead of behind
+ * the app.
+ */
+const OverlayLayerContext = /*#__PURE__*/createContext(layerForRank(1));
+OverlayLayerContext.displayName = 'BloomOverlayLayerContext';
+
+/** Z-indices of the enclosing overlay surface. See `OverlayRoot`. */
+export function useOverlayLayerContext() {
+  return useContext(OverlayLayerContext);
+}
+
+/**
+ * One blur radius for every Bloom overlay. Surfaces differ in what they show,
+ * not in how the app behind them recedes.
+ */
+export const BACKDROP_BLUR_INTENSITY = 80;
+/**
+ * Extra dim laid OVER the blur. The blur already paints its own tint wash
+ * (`rgba(25,25,25,~0.62)` at the intensity above), so this is what takes the
+ * total to roughly 0.72 — dark enough to read a panel against, still clearly
+ * see-through. Every surface uses this one value: with each of them picking its
+ * own, menus landed at ~0.83 and read as solid black next to the image viewer's
+ * ~0.72.
+ */
+export const BACKDROP_DIM_OPACITY = 0.28;
+
+/**
+ * Outermost node of a portaled surface. Three jobs:
+ *
+ *  - Fills the viewport.
+ *  - Re-enables pointer events for its own children while empty gaps stay
+ *    click-through (`box-none`), so a surface that only covers part of the
+ *    screen never steals clicks from the app behind it.
+ *  - Takes this surface's place in the overlay stack, so a surface opened later
+ *    paints above one opened earlier (see `./stack.ts`).
+ *
+ * Because the rank is taken on MOUNT, this must be rendered inside whatever
+ * guard makes the surface appear (`if (!isOpen) return null`), which is where
+ * every Bloom surface already puts it. Descendants that need to order
+ * themselves within the surface read `useOverlayLayerContext()`.
+ */
+export function OverlayRoot({
+  children,
+  className,
+  style,
+  testID,
+  zIndex
+}) {
+  // Split into two components rather than branching on the hook: a pinned root
+  // must not CONSUME a rank either. The toast host is pinned and mounts for the
+  // whole life of the app, so holding a rank would keep the live set permanently
+  // non-empty — the counter would never reset and depths would climb for the
+  // rest of the session.
+  return zIndex === undefined ? /*#__PURE__*/_jsx(StackedOverlayRoot, {
+    className: className,
+    style: style,
+    testID: testID,
+    children: children
+  }) : /*#__PURE__*/_jsx(PinnedOverlayRoot, {
+    zIndex: zIndex,
+    className: className,
+    style: style,
+    testID: testID,
+    children: children
+  });
+}
+function StackedOverlayRoot({
+  children,
+  className,
+  style,
+  testID
+}) {
+  const layer = useOverlayLayer();
+  return /*#__PURE__*/_jsx(OverlayRootView, {
+    layer: layer,
+    className: className,
+    style: style,
+    testID: testID,
+    children: children
+  });
+}
+function PinnedOverlayRoot({
+  children,
+  className,
+  style,
+  testID,
+  zIndex
+}) {
+  // Outside the stack, so descendants must not read stack depths from it
+  // either — every slot is the pinned depth.
+  const layer = useMemo(() => ({
+    root: zIndex,
+    backdrop: zIndex,
+    surface: zIndex
+  }), [zIndex]);
+  return /*#__PURE__*/_jsx(OverlayRootView, {
+    layer: layer,
+    className: className,
+    style: style,
+    testID: testID,
+    children: children
+  });
+}
+function OverlayRootView({
+  children,
+  className,
+  style,
+  testID,
+  layer
+}) {
+  return /*#__PURE__*/_jsx(OverlayLayerContext.Provider, {
+    value: layer,
+    children: /*#__PURE__*/_jsx(StyledView, {
+      pointerEvents: "box-none",
+      className: className,
+      style: [styles.root, {
+        zIndex: layer.root
+      }, style],
+      testID: testID,
+      children: children
+    })
+  });
+}
+OverlayRoot.displayName = 'OverlayRoot';
+/**
+ * Layers fading under a shared value. Reanimated owns the opacity on both, so
+ * the fade runs off the JS thread and the caller never has to animate an
+ * ancestor (which would erase the blur — see `BackdropProps['style']`).
+ */
+function AnimatedBackdropLayers({
+  blurTarget,
+  progress,
+  blurIntensity,
+  blurTint,
+  dimColor,
+  dimOpacity,
+  staticOpacity,
+  layerStyle
+}) {
+  // The fade lives on each LAYER, never on their shared ancestor.
+  const blurFade = useAnimatedStyle(() => ({
+    opacity: progress.value * staticOpacity
+  }), [progress, staticOpacity]);
+  const dimFade = useAnimatedStyle(() => ({
+    opacity: progress.value * staticOpacity * dimOpacity
+  }), [progress, staticOpacity, dimOpacity]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [blurIntensity > 0 ? /*#__PURE__*/_jsx(AnimatedBlurView, {
+      intensity: blurIntensity,
+      tint: blurTint
+      // A blur method ONLY alongside a target. Without one expo-blur
+      // falls back to "none" and warns twice per mount, and WITH one in the
+      // wrong window it segfaults — so the two props travel together or not
+      // at all. `glass/blur-target.tsx` is what guarantees this is
+      // `undefined` anywhere it would be unsafe.
+      ,
+      ...(blurTarget ? {
+        blurMethod: 'dimezisBlurView',
+        blurTarget
+      } : null),
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, layerStyle, blurFade]
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: dimColor
+      }, layerStyle, dimFade]
+    })]
+  });
+}
+
+/**
+ * Layers with no shared value driving them: the opacity is whatever the caller
+ * asked for, and a caller that still wants movement hands a CSS transition down
+ * through `layerStyle` — which is exactly what the web side sheet does, flipping
+ * its own `opacity` between 0 and 1 and letting the browser interpolate.
+ *
+ * These MUST stay plain, non-reanimated components. On web, an animated
+ * component whose style carries `transitionProperty` is routed through
+ * reanimated's CSS transitions manager, which assigns straight into
+ * `element.style` — where `element` is whatever ref the wrapped component
+ * exposes. expo-blur's web `BlurView` exposes a `useImperativeHandle` object
+ * carrying only `setNativeProps`, so there is no `.style` on it and opening the
+ * surface throws `Cannot set properties of undefined (setting
+ * 'transitionProperty')`. A plain layer puts the transition on the DOM node
+ * itself, which is both where it belongs and the only place it works.
+ */
+function StaticBackdropLayers({
+  blurTarget,
+  blurIntensity,
+  blurTint,
+  dimColor,
+  dimOpacity,
+  staticOpacity,
+  layerStyle
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [blurIntensity > 0 ? /*#__PURE__*/_jsx(BlurView, {
+      intensity: blurIntensity,
+      tint: blurTint
+      // Blur method and target travel together — see the animated pair.
+      ,
+      ...(blurTarget ? {
+        blurMethod: 'dimezisBlurView',
+        blurTarget
+      } : null),
+      pointerEvents: "none"
+      // Opacity last, as in the animated pair: the level this component
+      // resolved wins over anything `layerStyle` happens to carry.
+      ,
+      style: [StyleSheet.absoluteFill, layerStyle, {
+        opacity: staticOpacity
+      }]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: dimColor
+      }, layerStyle, {
+        opacity: staticOpacity * dimOpacity
+      }]
+    })]
+  });
+}
+
+/**
+ * Full-bleed blur + dim that dismisses the surface when pressed.
+ *
+ * The dismiss target is a hit box that fills this component and sits BEHIND
+ * `children`, never around them. It used to wrap them, which read fine on
+ * native but is invalid on web: the hit box carries `accessibilityRole="button"`,
+ * so react-native-web renders it as a real `<button>` — and every control inside
+ * any Bloom surface (a dialog's own buttons, a menu's rows) became a nested
+ * `<button>`. React reports that as a hydration error, and the nested control's
+ * activation behaviour is undefined per the HTML spec.
+ *
+ * Hit testing is unchanged: the hit box still covers the whole area, `children`
+ * render above it and take their own presses, and a press that lands on empty
+ * space falls through to the hit box. Layout styles passed via `style` stay on
+ * the outer box, so a caller that centres its panel with this component (the
+ * centred dialog) keeps doing so.
+ */
+export const Backdrop = /*#__PURE__*/memo(function Backdrop({
+  onPress,
+  progress,
+  disabled = false,
+  blurIntensity = BACKDROP_BLUR_INTENSITY,
+  blurTint = 'dark',
+  dimColor = '#000',
+  dimOpacity = BACKDROP_DIM_OPACITY,
+  style,
+  layerStyle,
+  children,
+  accessibilityLabel = 'Dismiss',
+  testID
+}) {
+  const inert = disabled || !onPress;
+  // `undefined` unless this backdrop is inside a declared separate native
+  // window. On Android that is the difference between a real blur and a crash.
+  const blurTarget = useWindowedBlurTarget();
+
+  // The press target must stay a pure hit box. Two things a caller's `style`
+  // can carry would break the visuals if honoured there:
+  //   - `opacity`, because `backdrop-filter` samples nothing under an ancestor
+  //     that composites in isolation, so the fade would erase the blur;
+  //   - `backgroundColor`, which would paint an opaque sheet UNDER the blur —
+  //     a second backdrop, and the reason menus and sheets rendered solid black
+  //     while the image viewer (which passed no background) looked right.
+  // Both are hoisted onto the layers, where they mean what the caller intended.
+  const flat = StyleSheet.flatten(style) ?? {};
+  const {
+    opacity: styleOpacity,
+    backgroundColor: styleBackground,
+    ...rootStyle
+  } = flat;
+  const staticOpacity = typeof styleOpacity === 'number' ? styleOpacity : 1;
+  const resolvedDimColor = typeof styleBackground === 'string' ? styleBackground : dimColor;
+  const layerProps = {
+    blurTarget,
+    blurIntensity,
+    blurTint,
+    dimColor: resolvedDimColor,
+    dimOpacity,
+    staticOpacity,
+    layerStyle
+  };
+  return (
+    /*#__PURE__*/
+    // `box-none` so this box never takes a press itself: the hit box below and
+    // `children` above are what receive them.
+    _jsxs(View, {
+      pointerEvents: "box-none",
+      style: [StyleSheet.absoluteFill, rootStyle],
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        pointerEvents: "auto",
+        onPress: inert ? undefined : onPress,
+        disabled: inert
+        // A dimming layer is not a focus stop on web: Escape and the panel's own
+        // controls are the keyboard paths out. It stays labelled for screen
+        // readers that surface it as the dismiss affordance.
+        ,
+        focusable: false,
+        accessibilityRole: inert ? undefined : 'button',
+        accessibilityLabel: inert ? undefined : accessibilityLabel,
+        testID: testID,
+        style: StyleSheet.absoluteFill,
+        children: progress ? /*#__PURE__*/_jsx(AnimatedBackdropLayers, {
+          progress: progress,
+          ...layerProps
+        }) : /*#__PURE__*/_jsx(StaticBackdropLayers, {
+          ...layerProps
+        })
+      }), children]
+    })
+  );
+});
+Backdrop.displayName = 'Backdrop';
+const styles = StyleSheet.create({
+  root: {
+    // Web: the portal root is `fixed; inset: 0`, but a plain absolute child of
+    // it anchors to the document flow in some browsers once the page scrolls —
+    // pin this box to the viewport itself. Native: absolute fill inside the
+    // Outlet, which is already full-screen.
+    // `absoluteFillObject` was removed in RN 0.85 — the inset is written out.
+    position: Platform.OS === 'web' ? WEB_POSITION_FIXED : 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
+//# sourceMappingURL=Overlay.js.map

package/lib/module/overlay/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","memo","useContext","useMemo","BlurView","useWindowedBlurTarget","Platform","Pressable","StyleSheet","View","Animated","useAnimatedStyle","WEB_POSITION_FIXED","StyledView","layerForRank","useOverlayLayer","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","AnimatedBlurView","createAnimatedComponent","OverlayLayerContext","displayName","useOverlayLayerContext","BACKDROP_BLUR_INTENSITY","BACKDROP_DIM_OPACITY","OverlayRoot","children","className","style","testID","zIndex","undefined","StackedOverlayRoot","PinnedOverlayRoot","layer","OverlayRootView","root","backdrop","surface","Provider","value","pointerEvents","styles","AnimatedBackdropLayers","blurTarget","progress","blurIntensity","blurTint","dimColor","dimOpacity","staticOpacity","layerStyle","blurFade","opacity","dimFade","intensity","tint","blurMethod","absoluteFill","backgroundColor","StaticBackdropLayers","Backdrop","onPress","disabled","accessibilityLabel","inert","flat","flatten","styleOpacity","styleBackground","rootStyle","resolvedDimColor","layerProps","focusable","accessibilityRole","create","position","OS","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["overlay/Overlay.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/overlay/dropdown-placement.js

@@ -2,8 +2,17 @@
 
 /**
  * Placement arithmetic for a portaled dropdown surface — shared by the web
- * `Menu` and `ContextMenu` forks, which anchor differently (a trigger's rect
- * vs. a right-click point) but need the same fit / flip / clamp decision.
+ * `Menu`, `ContextMenu`, `Select`, `Popover` and SUBMENU forks, which anchor
+ * differently (a trigger's rect, a right-click point, a menu row) but need the
+ * same fit / flip / clamp decision.
+ *
+ * BOTH AXES GO THROUGH ONE RESOLVER. `side` names the axis: `'bottom'`/`'top'`
+ * make the surface fit-flip-clamp vertically and ALIGN horizontally, and
+ * `'right'`/`'left'` (a submenu flying out beside its row) do the same thing
+ * with the two axes swapped. They are not two code paths — the same pair of
+ * helpers is called with the anchor's edges in the other order, which is the
+ * whole reason a submenu did not need a second positioner with its own,
+ * differently-wrong clamp.
  *
  * Internal: deliberately NOT re-exported from `overlay/index.ts`. The web forks
  * import it directly, the same way `dialog/SheetShell` is shared without
@@ -16,6 +25,8 @@
 
 /** Viewport-relative box the surface is positioned against. A right-click point is a zero-area anchor. */
 
+/** The four sides a surface can prefer. `'left'`/`'right'` make the main axis horizontal. */
+
 /**
  * Clamp into `[min, max]`, resolving an inverted range to `min`.
  *
@@ -28,12 +39,56 @@ function clamp(value, min, max) {
   return Math.max(min, Math.min(value, max));
 }
 
+/**
+ * The MAIN axis: sit on the preferred side of the anchor when the surface fits
+ * there, else flip to the other side, else clamp the preferred position into the
+ * viewport.
+ *
+ * Written against a generic axis — `nearEdge`/`farEdge` are the anchor's
+ * `top`/`bottom` for a vertical side and its `left`/`right` for a horizontal
+ * one — so `'top'`, `'bottom'`, `'left'` and `'right'` are one implementation
+ * rather than two that can drift apart.
+ */
+function resolveMainAxis({
+  nearEdge,
+  farEdge,
+  extent,
+  viewportExtent,
+  offset,
+  gutter,
+  prefersNear
+}) {
+  const near = nearEdge - offset - extent;
+  const far = farEdge + offset;
+  const fitsNear = near >= gutter;
+  const fitsFar = far + extent <= viewportExtent - gutter;
+  const preferred = prefersNear ? near : far;
+  const fitsPreferred = prefersNear ? fitsNear : fitsFar;
+  const alternative = prefersNear ? far : near;
+  const fitsAlternative = prefersNear ? fitsFar : fitsNear;
+  if (fitsPreferred) return preferred;
+  if (fitsAlternative) return alternative;
+  return clamp(preferred, gutter, viewportExtent - gutter - extent);
+}
+
+/** The CROSS axis: align against the anchor, then clamp into the viewport. */
+function resolveCrossAxis({
+  startEdge,
+  endEdge,
+  extent,
+  viewportExtent,
+  gutter,
+  align
+}) {
+  const preferred = align === 'end' ? endEdge - extent : align === 'center' ? (startEdge + endEdge) / 2 - extent / 2 : startEdge;
+  return clamp(preferred, gutter, viewportExtent - gutter - extent);
+}
+
 /**
  * Resolve the viewport-relative `top`/`left` for a dropdown surface.
  *
- * Vertical: sit below the anchor when it fits, else flip above it, else clamp
- * into the viewport. Horizontal: align per `align`, then clamp into the
- * viewport.
+ * `side` picks which axis is which: a vertical side fit-flip-clamps the surface
+ * top-to-bottom and aligns it left-to-right, a horizontal one does the reverse.
  */
 export function resolveDropdownPlacement({
   anchor,
@@ -41,18 +96,33 @@ export function resolveDropdownPlacement({
   viewport,
   offset,
   gutter,
-  align
+  align,
+  side
 }) {
-  const below = anchor.bottom + offset;
-  const above = anchor.top - offset - size.height;
-  const fitsBelow = below + size.height <= viewport.height - gutter;
-  const fitsAbove = above >= gutter;
-  const top = fitsBelow ? below : fitsAbove ? above : clamp(below, gutter, viewport.height - gutter - size.height);
-  const preferredLeft = align === 'end' ? anchor.right - size.width : anchor.left;
-  const left = clamp(preferredLeft, gutter, viewport.width - gutter - size.width);
-  return {
-    top,
-    left
+  const vertical = side === 'top' || side === 'bottom';
+  const main = resolveMainAxis({
+    nearEdge: vertical ? anchor.top : anchor.left,
+    farEdge: vertical ? anchor.bottom : anchor.right,
+    extent: vertical ? size.height : size.width,
+    viewportExtent: vertical ? viewport.height : viewport.width,
+    offset,
+    gutter,
+    prefersNear: side === 'top' || side === 'left'
+  });
+  const cross = resolveCrossAxis({
+    startEdge: vertical ? anchor.left : anchor.top,
+    endEdge: vertical ? anchor.right : anchor.bottom,
+    extent: vertical ? size.width : size.height,
+    viewportExtent: vertical ? viewport.width : viewport.height,
+    gutter,
+    align
+  });
+  return vertical ? {
+    top: main,
+    left: cross
+  } : {
+    top: cross,
+    left: main
   };
 }
 //# sourceMappingURL=dropdown-placement.js.map

package/lib/module/overlay/dropdown-placement.js.map

@@ -1 +1 @@
-{"version":3,"names":["clamp","value","min","max","Math","resolveDropdownPlacement","anchor","size","viewport","offset","gutter","align","below","bottom","above","top","height","fitsBelow","fitsAbove","preferredLeft","right","width","left"],"sourceRoot":"../../../src","sources":["overlay/dropdown-placement.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AA8BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,KAAKA,CAACC,KAAa,EAAEC,GAAW,EAAEC,GAAW,EAAU;EAC9D,OAAOC,IAAI,CAACD,GAAG,CAACD,GAAG,EAAEE,IAAI,CAACF,GAAG,CAACD,KAAK,EAAEE,GAAG,CAAC,CAAC;AAC5C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,wBAAwBA,CAAC;EACvCC,MAAM;EACNC,IAAI;EACJC,QAAQ;EACRC,MAAM;EACNC,MAAM;EACNC;AACsB,CAAC,EAAqB;EAC5C,MAAMC,KAAK,GAAGN,MAAM,CAACO,MAAM,GAAGJ,MAAM;EACpC,MAAMK,KAAK,GAAGR,MAAM,CAACS,GAAG,GAAGN,MAAM,GAAGF,IAAI,CAACS,MAAM;EAE/C,MAAMC,SAAS,GAAGL,KAAK,GAAGL,IAAI,CAACS,MAAM,IAAIR,QAAQ,CAACQ,MAAM,GAAGN,MAAM;EACjE,MAAMQ,SAAS,GAAGJ,KAAK,IAAIJ,MAAM;EAEjC,MAAMK,GAAG,GAAGE,SAAS,GACjBL,KAAK,GACLM,SAAS,GACPJ,KAAK,GACLd,KAAK,CAACY,KAAK,EAAEF,MAAM,EAAEF,QAAQ,CAACQ,MAAM,GAAGN,MAAM,GAAGH,IAAI,CAACS,MAAM,CAAC;EAElE,MAAMG,aAAa,GAAGR,KAAK,KAAK,KAAK,GAAGL,MAAM,CAACc,KAAK,GAAGb,IAAI,CAACc,KAAK,GAAGf,MAAM,CAACgB,IAAI;EAC/E,MAAMA,IAAI,GAAGtB,KAAK,CAACmB,aAAa,EAAET,MAAM,EAAEF,QAAQ,CAACa,KAAK,GAAGX,MAAM,GAAGH,IAAI,CAACc,KAAK,CAAC;EAE/E,OAAO;IAAEN,GAAG;IAAEO;EAAK,CAAC;AACtB","ignoreList":[]}
+{"version":3,"names":["clamp","value","min","max","Math","resolveMainAxis","nearEdge","farEdge","extent","viewportExtent","offset","gutter","prefersNear","near","far","fitsNear","fitsFar","preferred","fitsPreferred","alternative","fitsAlternative","resolveCrossAxis","startEdge","endEdge","align","resolveDropdownPlacement","anchor","size","viewport","side","vertical","main","top","left","bottom","right","height","width","cross"],"sourceRoot":"../../../src","sources":["overlay/dropdown-placement.ts"],"mappings":"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","ignoreList":[]}