@atlaskit/top-layer 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/top-layer
 
+## 0.8.0
+
+### Minor Changes
+
+- [`cce485619197c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cce485619197c) -
+  Remove arrow() implementation, as there are currently no consumers of it.
+
+## 0.7.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/cjs/internal/ensure-preset-styles.js

@@ -12,7 +12,7 @@ exports.ensurePresetStyles = ensurePresetStyles;
  *
  * Note: injected `<style>` elements and the tracking Set are append-only —
  * they are never removed. This is intentional: the number of distinct
- * presets is bounded (handful of animation + arrow presets), so the
+ * presets is bounded (handful of animation presets), so the
  * memory footprint is negligible. Removing styles would risk breaking
  * other instances of the same preset that are still mounted.
  *

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

@@ -277,8 +277,7 @@ function useAnchorPosition(_ref5) {
     _ref5$placement = _ref5.placement,
     placement = _ref5$placement === void 0 ? {} : _ref5$placement,
     _ref5$forceFallbackPo = _ref5.forceFallbackPositioning,
-    forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo,
-    arrow = _ref5.arrow;
+    forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo;
   var id = (0, _react.useId)();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
@@ -315,9 +314,7 @@ function useAnchorPosition(_ref5) {
         })
       }, {
         property: 'position-try-fallbacks',
-        value: arrow ? arrow.getTryFallbacks({
-          placement: stablePlacement
-        }) : placementToTryFallbacks({
+        value: placementToTryFallbacks({
           placement: stablePlacement
         })
       },
@@ -380,19 +377,6 @@ function useAnchorPosition(_ref5) {
           value: crossAxisShiftActive.value
         });
       }
-      if (arrow) {
-        // Set the arrow size variable used by the injected arrow CSS
-        // and the @position-try rules for margin values.
-        popoverStyles.push({
-          property: '--ds-arrow-size',
-          value: gapCssValue
-        });
-        // Mark the popover root as the arrow host. The ARROW_CSS targets
-        // [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
-        // and box-shadow: none. Must be on the popover root (not a child)
-        // because that's where useAnchorPosition sets the margin gap.
-        popover.setAttribute('data-ds-popover-arrow', '');
-      }
 
       /**
        * **We are never cleaning up anchor names**
@@ -415,9 +399,7 @@ function useAnchorPosition(_ref5) {
       var _undoPositioning = (0, _combine.combine)((0, _setStyle.setStyle)({
         el: popover,
         styles: popoverStyles
-      }), arrow ? function () {
-        return popover.removeAttribute('data-ds-popover-arrow');
-      } : function () {});
+      }));
       return _undoPositioning;
     }
 
@@ -566,5 +548,5 @@ function useAnchorPosition(_ref5) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, arrow, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
 }

package/dist/cjs/internal/use-preset-styles.js

@@ -11,7 +11,7 @@ var _ensurePresetStyles = require("./ensure-preset-styles");
  * is injected once into `document.head`.
  *
  * Works with any preset that has `{ css, name }` — animation presets
- * (TAnimationPreset) and arrow presets (TArrowPreset) both satisfy this shape.
+ * (TAnimationPreset) satisfies this shape.
  */
 function usePresetStyles(_ref) {
   var preset = _ref.preset;

package/dist/cjs/popup/popup-content.js

@@ -13,7 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _roleTypes = require("../internal/role-types");
 var _useAnchorPosition = require("../internal/use-anchor-position");
-var _usePresetStyles = require("../internal/use-preset-styles");
 var _useWidthFromAnchor = require("../internal/use-width-from-anchor");
 var _popover = require("../popover/popover");
 var _popupContext = require("./popup-context");
@@ -32,7 +31,6 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     label = _ref.label,
     labelledBy = _ref.labelledBy,
     animate = _ref.animate,
-    arrow = _ref.arrow,
     mode = _ref.mode,
     _ref$widthFromAnchor = _ref.widthFromAnchor,
     widthFromAnchor = _ref$widthFromAnchor === void 0 ? 'none' : _ref$widthFromAnchor,
@@ -129,17 +127,13 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
   // reach the same DOM element for togglePopover). Otherwise use a local ref.
   var localRef = (0, _react.useRef)(null);
   var popoverRef = (_ctx$popoverRef = ctx === null || ctx === void 0 ? void 0 : ctx.popoverRef) !== null && _ctx$popoverRef !== void 0 ? _ctx$popoverRef : localRef;
-  var arrowPreset = (0, _usePresetStyles.usePresetStyles)({
-    preset: arrow
-  });
   (0, _useAnchorPosition.useAnchorPosition)({
     anchorRef: triggerRef !== null && triggerRef !== void 0 ? triggerRef : {
       current: null
     },
     popoverRef: popoverRef,
     placement: placement,
-    forceFallbackPositioning: forceFallbackPositioning,
-    arrow: arrowPreset !== null && arrowPreset !== void 0 ? arrowPreset : undefined
+    forceFallbackPositioning: forceFallbackPositioning
   });
   (0, _useWidthFromAnchor.useWidthFromAnchor)({
     mode: widthFromAnchor,

package/dist/es2019/internal/ensure-preset-styles.js

@@ -6,7 +6,7 @@
  *
  * Note: injected `<style>` elements and the tracking Set are append-only —
  * they are never removed. This is intentional: the number of distinct
- * presets is bounded (handful of animation + arrow presets), so the
+ * presets is bounded (handful of animation presets), so the
  * memory footprint is negligible. Removing styles would risk breaking
  * other instances of the same preset that are still mounted.
  *

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

@@ -269,8 +269,7 @@ export function useAnchorPosition({
   anchorRef,
   popoverRef,
   placement = {},
-  forceFallbackPositioning = false,
-  arrow
+  forceFallbackPositioning = false
 }) {
   const id = useId();
   // Stabilize `placement` object so the same object literal
@@ -308,9 +307,7 @@ export function useAnchorPosition({
         })
       }, {
         property: 'position-try-fallbacks',
-        value: arrow ? arrow.getTryFallbacks({
-          placement: stablePlacement
-        }) : placementToTryFallbacks({
+        value: placementToTryFallbacks({
           placement: stablePlacement
         })
       },
@@ -373,19 +370,6 @@ export function useAnchorPosition({
           value: crossAxisShiftActive.value
         });
       }
-      if (arrow) {
-        // Set the arrow size variable used by the injected arrow CSS
-        // and the @position-try rules for margin values.
-        popoverStyles.push({
-          property: '--ds-arrow-size',
-          value: gapCssValue
-        });
-        // Mark the popover root as the arrow host. The ARROW_CSS targets
-        // [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
-        // and box-shadow: none. Must be on the popover root (not a child)
-        // because that's where useAnchorPosition sets the margin gap.
-        popover.setAttribute('data-ds-popover-arrow', '');
-      }
 
       /**
        * **We are never cleaning up anchor names**
@@ -408,7 +392,7 @@ export function useAnchorPosition({
       const undoPositioning = combine(setStyle({
         el: popover,
         styles: popoverStyles
-      }), arrow ? () => popover.removeAttribute('data-ds-popover-arrow') : () => {});
+      }));
       return undoPositioning;
     }
 
@@ -546,5 +530,5 @@ export function useAnchorPosition({
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, arrow, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
 }

package/dist/es2019/internal/use-preset-styles.js

@@ -5,7 +5,7 @@ import { ensurePresetStyles } from './ensure-preset-styles';
  * is injected once into `document.head`.
  *
  * Works with any preset that has `{ css, name }` — animation presets
- * (TAnimationPreset) and arrow presets (TArrowPreset) both satisfy this shape.
+ * (TAnimationPreset) satisfies this shape.
  */
 export function usePresetStyles({
   preset

package/dist/es2019/popup/popup-content.js

@@ -5,7 +5,6 @@ import React, { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { roleToAriaHasPopup } from '../internal/role-types';
 import { useAnchorPosition } from '../internal/use-anchor-position';
-import { usePresetStyles } from '../internal/use-preset-styles';
 import { useWidthFromAnchor } from '../internal/use-width-from-anchor';
 import { Popover } from '../popover/popover';
 import { useMaybePopupContext } from './popup-context';
@@ -22,7 +21,6 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
   label,
   labelledBy,
   animate,
-  arrow,
   mode,
   widthFromAnchor = 'none',
   xcss,
@@ -120,17 +118,13 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
   // reach the same DOM element for togglePopover). Otherwise use a local ref.
   const localRef = useRef(null);
   const popoverRef = (_ctx$popoverRef = ctx === null || ctx === void 0 ? void 0 : ctx.popoverRef) !== null && _ctx$popoverRef !== void 0 ? _ctx$popoverRef : localRef;
-  const arrowPreset = usePresetStyles({
-    preset: arrow
-  });
   useAnchorPosition({
     anchorRef: triggerRef !== null && triggerRef !== void 0 ? triggerRef : {
       current: null
     },
     popoverRef,
     placement,
-    forceFallbackPositioning,
-    arrow: arrowPreset !== null && arrowPreset !== void 0 ? arrowPreset : undefined
+    forceFallbackPositioning
   });
   useWidthFromAnchor({
     mode: widthFromAnchor,

package/dist/esm/internal/ensure-preset-styles.js

@@ -6,7 +6,7 @@
  *
  * Note: injected `<style>` elements and the tracking Set are append-only —
  * they are never removed. This is intentional: the number of distinct
- * presets is bounded (handful of animation + arrow presets), so the
+ * presets is bounded (handful of animation presets), so the
  * memory footprint is negligible. Removing styles would risk breaking
  * other instances of the same preset that are still mounted.
  *

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

@@ -263,8 +263,7 @@ export function useAnchorPosition(_ref5) {
     _ref5$placement = _ref5.placement,
     placement = _ref5$placement === void 0 ? {} : _ref5$placement,
     _ref5$forceFallbackPo = _ref5.forceFallbackPositioning,
-    forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo,
-    arrow = _ref5.arrow;
+    forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo;
   var id = useId();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
@@ -301,9 +300,7 @@ export function useAnchorPosition(_ref5) {
         })
       }, {
         property: 'position-try-fallbacks',
-        value: arrow ? arrow.getTryFallbacks({
-          placement: stablePlacement
-        }) : placementToTryFallbacks({
+        value: placementToTryFallbacks({
           placement: stablePlacement
         })
       },
@@ -366,19 +363,6 @@ export function useAnchorPosition(_ref5) {
           value: crossAxisShiftActive.value
         });
       }
-      if (arrow) {
-        // Set the arrow size variable used by the injected arrow CSS
-        // and the @position-try rules for margin values.
-        popoverStyles.push({
-          property: '--ds-arrow-size',
-          value: gapCssValue
-        });
-        // Mark the popover root as the arrow host. The ARROW_CSS targets
-        // [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
-        // and box-shadow: none. Must be on the popover root (not a child)
-        // because that's where useAnchorPosition sets the margin gap.
-        popover.setAttribute('data-ds-popover-arrow', '');
-      }
 
       /**
        * **We are never cleaning up anchor names**
@@ -401,9 +385,7 @@ export function useAnchorPosition(_ref5) {
       var _undoPositioning = combine(setStyle({
         el: popover,
         styles: popoverStyles
-      }), arrow ? function () {
-        return popover.removeAttribute('data-ds-popover-arrow');
-      } : function () {});
+      }));
       return _undoPositioning;
     }
 
@@ -552,5 +534,5 @@ export function useAnchorPosition(_ref5) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, arrow, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
 }

package/dist/esm/internal/use-preset-styles.js

@@ -5,7 +5,7 @@ import { ensurePresetStyles } from './ensure-preset-styles';
  * is injected once into `document.head`.
  *
  * Works with any preset that has `{ css, name }` — animation presets
- * (TAnimationPreset) and arrow presets (TArrowPreset) both satisfy this shape.
+ * (TAnimationPreset) satisfies this shape.
  */
 export function usePresetStyles(_ref) {
   var preset = _ref.preset;

package/dist/esm/popup/popup-content.js

@@ -5,7 +5,6 @@ import React, { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { roleToAriaHasPopup } from '../internal/role-types';
 import { useAnchorPosition } from '../internal/use-anchor-position';
-import { usePresetStyles } from '../internal/use-preset-styles';
 import { useWidthFromAnchor } from '../internal/use-width-from-anchor';
 import { Popover } from '../popover/popover';
 import { useMaybePopupContext } from './popup-context';
@@ -23,7 +22,6 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
     label = _ref.label,
     labelledBy = _ref.labelledBy,
     animate = _ref.animate,
-    arrow = _ref.arrow,
     mode = _ref.mode,
     _ref$widthFromAnchor = _ref.widthFromAnchor,
     widthFromAnchor = _ref$widthFromAnchor === void 0 ? 'none' : _ref$widthFromAnchor,
@@ -120,17 +118,13 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
   // reach the same DOM element for togglePopover). Otherwise use a local ref.
   var localRef = useRef(null);
   var popoverRef = (_ctx$popoverRef = ctx === null || ctx === void 0 ? void 0 : ctx.popoverRef) !== null && _ctx$popoverRef !== void 0 ? _ctx$popoverRef : localRef;
-  var arrowPreset = usePresetStyles({
-    preset: arrow
-  });
   useAnchorPosition({
     anchorRef: triggerRef !== null && triggerRef !== void 0 ? triggerRef : {
       current: null
     },
     popoverRef: popoverRef,
     placement: placement,
-    forceFallbackPositioning: forceFallbackPositioning,
-    arrow: arrowPreset !== null && arrowPreset !== void 0 ? arrowPreset : undefined
+    forceFallbackPositioning: forceFallbackPositioning
   });
   useWidthFromAnchor({
     mode: widthFromAnchor,

package/dist/types/internal/use-anchor-position.d.ts

@@ -13,7 +13,6 @@
  * is never painted at the wrong location.
  */
 import { type RefObject } from 'react';
-import { type TArrowPreset } from '../arrow/types';
 import { type TPlacementOptions } from '../internal/resolve-placement';
 export { getPlacement } from './resolve-placement';
 /**
@@ -91,7 +90,7 @@ export declare function placementToTryFallbacks({ placement }: {
  * comparison is used internally so re-runs are skipped when the resolved
  * placement shape is unchanged.
  */
-export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, arrow, }: {
+export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, }: {
     /**
      * Element to position relative to.
      */
@@ -127,13 +126,4 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, fo
      * behavior in any environment, including production.
      */
     forceFallbackPositioning?: boolean;
-    /**
-     * Arrow preset from `@atlaskit/top-layer/arrow`. When provided, uses
-     * the preset's named `@position-try` rules (which update both
-     * `position-area` and `margin` on flip) and sets `--ds-arrow-size`.
-     *
-     * Pass `null` to disable. Has no effect in the JS fallback path -
-     * arrows are CSS-only.
-     */
-    arrow?: TArrowPreset | null;
 }): void;

package/dist/types/internal/use-preset-styles.d.ts

@@ -7,7 +7,7 @@ type TPresetWithCssAndName = {
  * is injected once into `document.head`.
  *
  * Works with any preset that has `{ css, name }` — animation presets
- * (TAnimationPreset) and arrow presets (TArrowPreset) both satisfy this shape.
+ * (TAnimationPreset) satisfies this shape.
  */
 export declare function usePresetStyles<T extends TPresetWithCssAndName>({ preset, }: {
     preset: T | false | null | undefined;

package/dist/types/popover/types.d.ts

@@ -41,8 +41,7 @@ type TPopoverBaseProps = {
     children: ReactNode;
     /**
      * Additional CSS styles applied to the popover root element.
-     * Use to set `backgroundColor` so arrow pseudo-elements (which use
-     * `background: inherit`) match the popup surface colour.
+     * Use to set `backgroundColor` to match the popup surface colour.
      */
     xcss?: StrictXCSSProp<'backgroundColor', never>;
     /**

package/dist/types/popup/types.d.ts

@@ -1,7 +1,6 @@
 import { type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
 import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TAnimationPreset } from '../animations/types';
-import { type TArrowPreset } from '../arrow/types';
 import { type TPlacementOptions } from '../internal/resolve-placement';
 import { type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
 import { type TPopoverCloseReason, type TWidthFromAnchorMode } from '../popover/types';
@@ -131,14 +130,10 @@ type TPopupContentBaseProps = {
      * Applies additional CSS styles to the popover root element using
      * design-system-safe xcss.
      *
-     * **Required when using `arrow`:** the arrow pseudo-elements use
-     * `background: inherit` to pick up their color from the popover root.
-     * Without setting `backgroundColor` here, the arrow tip will be transparent.
-     *
      * @example
      * ```tsx
      * const styles = cssMap({ surface: { backgroundColor: token('elevation.surface.overlay') } });
-     * <Popup.Content xcss={styles.surface} arrow={arrowPreset} ... />
+     * <Popup.Content xcss={styles.surface} ... />
      * ```
      */
     xcss?: StrictXCSSProp<'backgroundColor', never>;
@@ -173,28 +168,6 @@ type TPopupContentBaseProps = {
      * behavior in any environment, including production.
      */
     forceFallbackPositioning?: boolean;
-    /**
-     * Arrow preset from `@atlaskit/top-layer/arrow`.
-     *
-     * When provided, renders CSS arrows that automatically flip when the
-     * popover flips via `@position-try` fallbacks. The arrows inherit
-     * their background color from the popover element.
-     *
-     * @example
-     * ```tsx
-     * import { arrow } from '@atlaskit/top-layer/arrow';
-     *
-     * const myArrow = arrow();
-     * <Popup.Content arrow={myArrow} />
-     * ```
-     *
-     * Constraints:
-     * - `box-shadow` is disabled on the popover (incompatible with the
-     *   `clip-path: inset() margin-box` technique)
-     * - `::before` and `::after` pseudo-elements are consumed by the arrows
-     * - Only works with CSS Anchor Positioning; no arrow in the JS fallback
-     */
-    arrow?: false | TArrowPreset;
     /**
      * Native popover attribute value. Default is `'auto'`.
      *

package/dist/types-ts4.5/internal/use-anchor-position.d.ts

@@ -13,7 +13,6 @@
  * is never painted at the wrong location.
  */
 import { type RefObject } from 'react';
-import { type TArrowPreset } from '../arrow/types';
 import { type TPlacementOptions } from '../internal/resolve-placement';
 export { getPlacement } from './resolve-placement';
 /**
@@ -91,7 +90,7 @@ export declare function placementToTryFallbacks({ placement }: {
  * comparison is used internally so re-runs are skipped when the resolved
  * placement shape is unchanged.
  */
-export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, arrow, }: {
+export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, }: {
     /**
      * Element to position relative to.
      */
@@ -127,13 +126,4 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, fo
      * behavior in any environment, including production.
      */
     forceFallbackPositioning?: boolean;
-    /**
-     * Arrow preset from `@atlaskit/top-layer/arrow`. When provided, uses
-     * the preset's named `@position-try` rules (which update both
-     * `position-area` and `margin` on flip) and sets `--ds-arrow-size`.
-     *
-     * Pass `null` to disable. Has no effect in the JS fallback path -
-     * arrows are CSS-only.
-     */
-    arrow?: TArrowPreset | null;
 }): void;

package/dist/types-ts4.5/internal/use-preset-styles.d.ts

@@ -7,7 +7,7 @@ type TPresetWithCssAndName = {
  * is injected once into `document.head`.
  *
  * Works with any preset that has `{ css, name }` — animation presets
- * (TAnimationPreset) and arrow presets (TArrowPreset) both satisfy this shape.
+ * (TAnimationPreset) satisfies this shape.
  */
 export declare function usePresetStyles<T extends TPresetWithCssAndName>({ preset, }: {
     preset: T | false | null | undefined;

package/dist/types-ts4.5/popover/types.d.ts

@@ -41,8 +41,7 @@ type TPopoverBaseProps = {
     children: ReactNode;
     /**
      * Additional CSS styles applied to the popover root element.
-     * Use to set `backgroundColor` so arrow pseudo-elements (which use
-     * `background: inherit`) match the popup surface colour.
+     * Use to set `backgroundColor` to match the popup surface colour.
      */
     xcss?: StrictXCSSProp<'backgroundColor', never>;
     /**

package/dist/types-ts4.5/popup/types.d.ts

@@ -1,7 +1,6 @@
 import { type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
 import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TAnimationPreset } from '../animations/types';
-import { type TArrowPreset } from '../arrow/types';
 import { type TPlacementOptions } from '../internal/resolve-placement';
 import { type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
 import { type TPopoverCloseReason, type TWidthFromAnchorMode } from '../popover/types';
@@ -131,14 +130,10 @@ type TPopupContentBaseProps = {
      * Applies additional CSS styles to the popover root element using
      * design-system-safe xcss.
      *
-     * **Required when using `arrow`:** the arrow pseudo-elements use
-     * `background: inherit` to pick up their color from the popover root.
-     * Without setting `backgroundColor` here, the arrow tip will be transparent.
-     *
      * @example
      * ```tsx
      * const styles = cssMap({ surface: { backgroundColor: token('elevation.surface.overlay') } });
-     * <Popup.Content xcss={styles.surface} arrow={arrowPreset} ... />
+     * <Popup.Content xcss={styles.surface} ... />
      * ```
      */
     xcss?: StrictXCSSProp<'backgroundColor', never>;
@@ -173,28 +168,6 @@ type TPopupContentBaseProps = {
      * behavior in any environment, including production.
      */
     forceFallbackPositioning?: boolean;
-    /**
-     * Arrow preset from `@atlaskit/top-layer/arrow`.
-     *
-     * When provided, renders CSS arrows that automatically flip when the
-     * popover flips via `@position-try` fallbacks. The arrows inherit
-     * their background color from the popover element.
-     *
-     * @example
-     * ```tsx
-     * import { arrow } from '@atlaskit/top-layer/arrow';
-     *
-     * const myArrow = arrow();
-     * <Popup.Content arrow={myArrow} />
-     * ```
-     *
-     * Constraints:
-     * - `box-shadow` is disabled on the popover (incompatible with the
-     *   `clip-path: inset() margin-box` technique)
-     * - `::before` and `::after` pseudo-elements are consumed by the arrows
-     * - Only works with CSS Anchor Positioning; no arrow in the JS fallback
-     */
-    arrow?: false | TArrowPreset;
     /**
      * Native popover attribute value. Default is `'auto'`.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -34,7 +34,7 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/browser-apis": "^0.0.1",
+		"@atlaskit/browser-apis": "^0.0.2",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/layering": "^3.7.0",

package/arrow/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@atlaskit/top-layer/arrow",
-  "main": "../dist/cjs/entry-points/arrow.js",
-  "module": "../dist/esm/entry-points/arrow.js",
-  "module:es2019": "../dist/es2019/entry-points/arrow.js",
-  "sideEffects": [
-    "*.compiled.css"
-  ],
-  "types": "../dist/types/entry-points/arrow.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/arrow.d.ts"
-      ]
-    }
-  }
-}