@atlaskit/top-layer 0.12.2 → 0.14.0

package/dist/cjs/internal/should-focus-into-popover.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
+var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
+
+/**
+ * Returns `true` when the given popover role moves focus into the popover
+ * on open, and `false` otherwise (including when `role` is `undefined`).
+ */
+function shouldFocusIntoPopover(_ref) {
+  var role = _ref.role;
+  if (!role) {
+    return false;
+  }
+  return rolesThatMoveFocus.has(role);
+}

package/dist/cjs/internal/slot.js

@@ -52,7 +52,7 @@ function isSlotChild(child) {
 var Slot = exports.Slot = /*#__PURE__*/(0, _react.forwardRef)(function Slot(slotProps, ref) {
   var rawChildren = slotProps.children,
     props = (0, _objectWithoutProperties2.default)(slotProps, _excluded);
-  // `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
+  // `SlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
   var children = rawChildren;
   if (!isSlotChild(children)) {
     return children;

package/dist/cjs/internal/use-anchor-position-at-point.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnchorPositionAtPoint = useAnchorPositionAtPoint;
+var _react = require("react");
+var _useAnchorPosition = require("./use-anchor-position");
+/**
+ * A point in viewport coordinates (CSS pixels) at which the synthetic
+ * anchor should be placed.
+ *
+ * Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
+ * shape is unambiguous in RTL writing modes — there is no ambiguity
+ * about whether a coordinate is logical (`inline-start`/`block-start`)
+ * or physical (`left`/`top`). Viewport coordinates are always
+ * physical, so we name them with the physical axis labels.
+ */
+
+/**
+ * Styles the synthetic anchor as an invisible, zero-size point.
+ * Dynamic `inset-*` overrides are written by the positioning effect.
+ *
+ * Uses `Object.assign` rather than Compiled CSS (element is outside the React tree)
+ * or the internal `setStyle` helper (we own this element entirely — it is created
+ * and removed by this hook — so the snapshot/restore semantics `setStyle`
+ * provides for caller-owned elements would be dead work here).
+ */
+function applyStaticAnchorStyles(el) {
+  Object.assign(el.style, {
+    position: 'fixed',
+    // `top`/`left` rather than `inset-block-start`/`inset-inline-start`
+    // for consistency with the dynamic positioning effect below, which
+    // uses physical properties (see comment there for the rationale).
+    top: '0',
+    left: '0',
+    // Zero size — placement decides which side the popover sits on.
+    width: '0',
+    height: '0',
+    // Prevent the overlay from intercepting pointer events.
+    pointerEvents: 'none'
+  });
+}
+
+// `useAnchorPosition` requires a real DOM element. When the caller only
+// has a viewport coordinate (e.g. cursor at hover time), this hook
+// manages a hidden `<div>` at that point and delegates the rest.
+//
+// The `<div>` is appended directly to `document.body` to escape any
+// transformed ancestor, which would otherwise break `position: fixed`
+// viewport-relative resolution.
+
+/**
+ * Positions a popover at a consumer-supplied viewport coordinate using a
+ * hidden synthetic anchor.
+ *
+ * @example
+ * ```tsx
+ * function PointPositionedPopover({ popoverRef, placement, mousePos }) {
+ *   useAnchorPositionAtPoint({
+ *     popoverRef,
+ *     placement,
+ *     isEnabled: Boolean(mousePos),
+ *     getPoint: () => {
+ *       if (!mousePos) return null;
+ *       return { x: mousePos.clientX, y: mousePos.clientY };
+ *     },
+ *   });
+ *   return <Popover ref={popoverRef}>...</Popover>;
+ * }
+ * ```
+ */
+function useAnchorPositionAtPoint(_ref) {
+  var popoverRef = _ref.popoverRef,
+    placement = _ref.placement,
+    getPoint = _ref.getPoint,
+    _ref$isEnabled = _ref.isEnabled,
+    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+  var syntheticAnchorRef = (0, _react.useRef)(null);
+
+  // `getPoint` is kept in a ref so the layout effect can call the
+  // latest version without listing it as a dep — that would re-fire
+  // on every render and re-latch the point.
+  var getPointRef = (0, _react.useRef)(getPoint);
+  getPointRef.current = getPoint;
+
+  // Lazy element creation: the `<div>` is only created when both
+  // `isEnabled` is true AND `getPoint()` returns a non-null point.
+  // `useLayoutEffect` ensures the element exists before the inner
+  // `useAnchorPosition` (also a layout effect) reads the ref.
+  (0, _react.useLayoutEffect)(function () {
+    if (!isEnabled) {
+      return;
+    }
+    var point = getPointRef.current();
+    if (!point) {
+      return;
+    }
+    var anchor = document.createElement('div');
+    anchor.setAttribute('aria-hidden', 'true');
+    applyStaticAnchorStyles(anchor);
+    // `point.x`/`y` are physical viewport coordinates (from
+    // `MouseEvent.clientX/Y`), so map directly onto physical
+    // `left`/`top`. This is RTL-safe: `position: fixed` + physical
+    // insets is direction-independent. Using logical
+    // `inset-inline-start` would need `viewportWidth - point.x` in
+    // RTL to land at the same physical pixel.
+    anchor.style.top = "".concat(point.y, "px");
+    anchor.style.left = "".concat(point.x, "px");
+    document.body.appendChild(anchor);
+    syntheticAnchorRef.current = anchor;
+    return function cleanup() {
+      anchor.remove();
+      syntheticAnchorRef.current = null;
+    };
+  }, [isEnabled]);
+
+  // Mirror `isEnabled` so both hooks stay in sync — when disabled,
+  // neither this hook nor the inner one touches the popover, leaving
+  // any other positioning the consumer has set up free to take effect.
+  (0, _useAnchorPosition.useAnchorPosition)({
+    anchorRef: syntheticAnchorRef,
+    popoverRef: popoverRef,
+    placement: placement,
+    isEnabled: isEnabled
+  });
+}

package/dist/cjs/internal/use-anchor-position.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAnchorPosition = useAnchorPosition;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
@@ -35,15 +37,25 @@ var _setStyle = require("./set-style");
 // from `./resolve-placement` so search-and-jump lands at the source of truth.
 
 /**
- * Module-scope no-op `ResizeObserver` stub used in non-DOM jest environments where
+ * Module-scope no-op `ResizeObserver` used in non-DOM jest environments where
  * `ResizeObserver` is `undefined`. Hoisted out of the effect to avoid
- * re-allocating on every run.
+ * allocating a new class declaration on every run.
  */
-var noopResizeObserver = {
-  observe: function observe() {},
-  unobserve: function unobserve() {},
-  disconnect: function disconnect() {}
-};
+var NoopResizeObserver = /*#__PURE__*/function () {
+  function NoopResizeObserver() {
+    (0, _classCallCheck2.default)(this, NoopResizeObserver);
+  }
+  return (0, _createClass2.default)(NoopResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+}();
 
 /**
  * Returns true when the popover is currently open. Wrapped because the
@@ -207,12 +219,17 @@ function useAnchorPosition(_ref3) {
     _ref3$placement = _ref3.placement,
     placement = _ref3$placement === void 0 ? {} : _ref3$placement,
     _ref3$forceFallbackPo = _ref3.forceFallbackPositioning,
-    forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo;
+    forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo,
+    _ref3$isEnabled = _ref3.isEnabled,
+    isEnabled = _ref3$isEnabled === void 0 ? true : _ref3$isEnabled;
   var id = (0, _react.useId)();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
   var stablePlacement = useStablePlacement(placement);
   (0, _react.useLayoutEffect)(function () {
+    if (!isEnabled) {
+      return;
+    }
     var trigger = anchorRef.current;
     var popover = popoverRef.current;
     if (!trigger || !popover) {
@@ -402,17 +419,20 @@ function useAnchorPosition(_ref3) {
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
     // `ResizeObserver` is missing in some non-DOM jest environments
-    // (e.g. post-office's `node` environment). Fall back to the
-    // module-scope `noopResizeObserver` stub there. The scroll/resize
-    // listeners below still keep the popover positioned in the rare
-    // case the consumer also polyfilled `showPopover` but not
-    // `ResizeObserver`. Real browsers always have it.
-    var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
+    // (e.g. post-office's `node` environment). Fall back to a no-op
+    // observer there. The scroll/resize listeners below still keep
+    // the popover positioned in the rare case the consumer also
+    // polyfilled `showPopover` but not `ResizeObserver`. Real
+    // browsers always have it. The `NoopResizeObserver` class is
+    // hoisted to module scope (see top of file) so we do not allocate
+    // a new constructor on every effect run.
+    var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
+    var resizeObserver = new ResizeObserverImpl(function () {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();
       }
-    }) : noopResizeObserver;
+    });
 
     // If the popover is already open by the time this effect runs (for
     // example, the parent `useAnchorPosition` effect runs after the child
@@ -461,5 +481,5 @@ function useAnchorPosition(_ref3) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id]);
 }

package/dist/cjs/internal/use-focus-wrap.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFocusWrap = useFocusWrap;
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
-var _focus = require("../focus/focus");
+var _getFirstFocusable = require("../focus/get-first-focusable");
+var _getLastFocusable = require("../focus/get-last-focusable");
+var _getNextFocusable = require("../focus/get-next-focusable");
+var _isNestedLayerFocused = require("../focus/is-nested-layer-focused");
 /**
  * Roles that require focus wrapping per WAI-ARIA APG.
  *
@@ -62,7 +65,7 @@ function useFocusWrap(_ref) {
 
         // If focus is already in a nested layer, then
         // we continue to let that nested layer own focus
-        if ((0, _focus.isNestedLayerFocused)({
+        if ((0, _isNestedLayerFocused.isNestedLayerFocused)({
           container: element
         })) {
           return;
@@ -75,7 +78,7 @@ function useFocusWrap(_ref) {
 
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
-        var next = (0, _focus.getNextFocusable)({
+        var next = (0, _getNextFocusable.getNextFocusable)({
           container: element,
           direction: direction
         });
@@ -87,9 +90,9 @@ function useFocusWrap(_ref) {
         // Nothing is currently focused inside the container (or the
         // focused element is not in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
-        var fallback = direction === 'forwards' ? (0, _focus.getFirstFocusable)({
+        var fallback = direction === 'forwards' ? (0, _getFirstFocusable.getFirstFocusable)({
           container: element
-        }) : (0, _focus.getLastFocusable)({
+        }) : (0, _getLastFocusable.getLastFocusable)({
           container: element
         });
         if (fallback) {

package/dist/cjs/internal/use-initial-focus.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useInitialFocus = useInitialFocus;
 var _react = require("react");
-var _focus = require("../focus/focus");
+var _getFirstFocusable = require("../focus/get-first-focusable");
 /**
  * Determines the correct element to receive initial focus within a popover,
  * based on its ARIA role.
@@ -33,7 +33,7 @@ function getInitialFocusTarget(_ref) {
       return autofocusEl;
     }
     // Fall back to first focusable element
-    return (0, _focus.getFirstFocusable)({
+    return (0, _getFirstFocusable.getFirstFocusable)({
       container: container
     });
   }
@@ -44,7 +44,7 @@ function getInitialFocusTarget(_ref) {
     // of the consumer component (e.g. dropdown-menu), because menu keyboard
     // behavior varies by context (orientation, nesting, item type, control
     // pattern). See: notes/outputs/menu-keyboard-decision.md
-    return (0, _focus.getFirstFocusable)({
+    return (0, _getFirstFocusable.getFirstFocusable)({
       container: container
     });
   }
@@ -54,7 +54,7 @@ function getInitialFocusTarget(_ref) {
     if (selectedOption) {
       return selectedOption;
     }
-    return (0, _focus.getFirstFocusable)({
+    return (0, _getFirstFocusable.getFirstFocusable)({
       container: container
     });
   }

package/dist/cjs/placement-map/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.fromLegacyPlacement = fromLegacyPlacement;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _legacyPlacements = require("./legacy-placements");
+var _placementMapping = require("./placement-mapping");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -54,7 +54,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function fromLegacyPlacement(_ref) {
   var legacy = _ref.legacy,
     offset = _ref.offset;
-  var basePlacement = _legacyPlacements.placementMapping[legacy];
+  var basePlacement = _placementMapping.placementMapping[legacy];
   if (!offset) {
     return basePlacement;
   }

package/dist/cjs/placement-map/legacy-placements.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placementMapping = exports.LEGACY_PLACEMENTS = void 0;
+exports.LEGACY_PLACEMENTS = void 0;
 /**
  * Legacy Popper.js placement values (used by `@atlaskit/popper`,
  * `@atlaskit/popup`, `@atlaskit/tooltip`, etc.). Re-exported from
@@ -11,103 +11,4 @@ exports.placementMapping = exports.LEGACY_PLACEMENTS = void 0;
  * to enumerate every placement (e.g. for a settings dropdown). New code
  * should use the object-based `TPlacementOptions` directly.
  */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-var LEGACY_PLACEMENTS = exports.LEGACY_PLACEMENTS = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
-/**
- * The full mapping record. Internal - use `fromLegacyPlacement` from the
- * public entry-point so the offset-tuple translation is applied consistently.
- *
- * Note: `auto`, `auto-start`, `auto-end` map to `block-end` placements. This
- * is a reduction in expressiveness vs Popper.js (which picked the best
- * placement at runtime). CSS `position-try-fallbacks` flips at the edge but
- * the initial placement is fixed. Migration consumers who relied on Popper's
- * dynamic auto-flip should pick an explicit placement instead.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-var placementMapping = exports.placementMapping = {
-  top: {
-    axis: 'block',
-    edge: 'start',
-    align: 'center'
-  },
-  'top-start': {
-    axis: 'block',
-    edge: 'start',
-    align: 'start'
-  },
-  'top-center': {
-    axis: 'block',
-    edge: 'start',
-    align: 'center'
-  },
-  'top-end': {
-    axis: 'block',
-    edge: 'start',
-    align: 'end'
-  },
-  bottom: {
-    axis: 'block',
-    edge: 'end',
-    align: 'center'
-  },
-  'bottom-start': {
-    axis: 'block',
-    edge: 'end',
-    align: 'start'
-  },
-  'bottom-center': {
-    axis: 'block',
-    edge: 'end',
-    align: 'center'
-  },
-  'bottom-end': {
-    axis: 'block',
-    edge: 'end',
-    align: 'end'
-  },
-  right: {
-    axis: 'inline',
-    edge: 'end',
-    align: 'center'
-  },
-  'right-start': {
-    axis: 'inline',
-    edge: 'end',
-    align: 'start'
-  },
-  'right-end': {
-    axis: 'inline',
-    edge: 'end',
-    align: 'end'
-  },
-  left: {
-    axis: 'inline',
-    edge: 'start',
-    align: 'center'
-  },
-  'left-start': {
-    axis: 'inline',
-    edge: 'start',
-    align: 'start'
-  },
-  'left-end': {
-    axis: 'inline',
-    edge: 'start',
-    align: 'end'
-  },
-  auto: {
-    axis: 'block',
-    edge: 'end',
-    align: 'center'
-  },
-  'auto-start': {
-    axis: 'block',
-    edge: 'end',
-    align: 'start'
-  },
-  'auto-end': {
-    axis: 'block',
-    edge: 'end',
-    align: 'end'
-  }
-};
+var LEGACY_PLACEMENTS = exports.LEGACY_PLACEMENTS = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];

package/dist/cjs/placement-map/placement-mapping.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placementMapping = void 0;
+/**
+ * The full mapping record. Internal - use `fromLegacyPlacement` from the
+ * public entry-point so the offset-tuple translation is applied consistently.
+ *
+ * Note: `auto`, `auto-start`, `auto-end` map to `block-end` placements. This
+ * is a reduction in expressiveness vs Popper.js (which picked the best
+ * placement at runtime). CSS `position-try-fallbacks` flips at the edge but
+ * the initial placement is fixed. Migration consumers who relied on Popper's
+ * dynamic auto-flip should pick an explicit placement instead.
+ */
+var placementMapping = exports.placementMapping = {
+  top: {
+    axis: 'block',
+    edge: 'start',
+    align: 'center'
+  },
+  'top-start': {
+    axis: 'block',
+    edge: 'start',
+    align: 'start'
+  },
+  'top-center': {
+    axis: 'block',
+    edge: 'start',
+    align: 'center'
+  },
+  'top-end': {
+    axis: 'block',
+    edge: 'start',
+    align: 'end'
+  },
+  bottom: {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'bottom-start': {
+    axis: 'block',
+    edge: 'end',
+    align: 'start'
+  },
+  'bottom-center': {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'bottom-end': {
+    axis: 'block',
+    edge: 'end',
+    align: 'end'
+  },
+  right: {
+    axis: 'inline',
+    edge: 'end',
+    align: 'center'
+  },
+  'right-start': {
+    axis: 'inline',
+    edge: 'end',
+    align: 'start'
+  },
+  'right-end': {
+    axis: 'inline',
+    edge: 'end',
+    align: 'end'
+  },
+  left: {
+    axis: 'inline',
+    edge: 'start',
+    align: 'center'
+  },
+  'left-start': {
+    axis: 'inline',
+    edge: 'start',
+    align: 'start'
+  },
+  'left-end': {
+    axis: 'inline',
+    edge: 'start',
+    align: 'end'
+  },
+  auto: {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'auto-start': {
+    axis: 'block',
+    edge: 'end',
+    align: 'start'
+  },
+  'auto-end': {
+    axis: 'block',
+    edge: 'end',
+    align: 'end'
+  }
+};