@atlaskit/top-layer 0.1.0

package/dist/cjs/dialog/dialog-content.compiled.css

@@ -0,0 +1,14 @@
+
+._19itglyw{border:none}._18u01wug{margin-left:auto}
+._19pk1wug{margin-top:auto}
+._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._2hwx1wug{margin-right:auto}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._bfhk1j28{background-color:transparent}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._c71lglyw{max-height:none}
+._otyr1wug{margin-bottom:auto}
+._p12fglyw{max-width:none}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}

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

@@ -0,0 +1,144 @@
+/* dialog-content.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dialog = void 0;
+require("./dialog-content.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _useAnimatedVisibility = require("../internal/use-animated-visibility");
+var _useFocusWrap = require("../internal/use-focus-wrap");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- dialog reset requires values not in cssMap's type union
+var styles = {
+  dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _1ltk1i5c"
+};
+
+/**
+ * Low-level `<dialog>` primitive. No visual opinions — no width, height,
+ * background, border-radius, or layout. Consumers provide their own styling.
+ *
+ * Visibility is controlled declaratively via `isOpen`:
+ * - `isOpen={true}` calls `.showModal()` (entry animation via `@starting-style`)
+ * - `isOpen={false}` calls `.close()` (exit animation via `allow-discrete`)
+ *
+ * Handles native `cancel` event (Escape) and backdrop click detection.
+ *
+ * Close flow: we never call `dialog.close()` from event handlers. We always call
+ * `onClose`; the consumer decides whether to set `isOpen={false}`.
+ */
+var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialog(_ref, ref) {
+  var children = _ref.children,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onExitFinish = _ref.onExitFinish,
+    animate = _ref.animate,
+    style = _ref.style,
+    testId = _ref.testId,
+    providedId = _ref.id,
+    label = _ref.label,
+    labelledBy = _ref.labelledBy,
+    shouldHideBackdrop = _ref.shouldHideBackdrop;
+  var generatedId = (0, _react.useId)();
+  var dialogId = providedId !== null && providedId !== void 0 ? providedId : generatedId;
+  var ownRef = (0, _react.useRef)(null);
+  var combinedRef = (0, _mergeRefs.default)([ownRef, ref]);
+
+  // ── Animation lifecycle ──
+  var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
+      isOpen: isOpen,
+      animate: animate,
+      elementRef: ownRef,
+      onExitFinish: onExitFinish
+    }),
+    showChildren = _useAnimatedVisibilit.showChildren,
+    preset = _useAnimatedVisibilit.preset;
+
+  // ── Focus wrap ──
+  // Native <dialog>.showModal() traps focus but wraps through <body> at
+  // the boundary (A → B → C → body → A). This hook intercepts Tab to
+  // wrap directly (A → B → C → A), matching the WAI-ARIA APG pattern.
+  (0, _useFocusWrap.useFocusWrap)({
+    elementRef: ownRef,
+    role: 'dialog'
+  });
+
+  // Show/hide the dialog in response to isOpen changes.
+  (0, _react.useLayoutEffect)(function () {
+    var dialog = ownRef.current;
+    if (!dialog) {
+      return;
+    }
+    if (isOpen) {
+      if (!dialog.open) {
+        dialog.showModal();
+      }
+      return function () {
+        if (dialog.open) {
+          dialog.close();
+        }
+      };
+    }
+    if (dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+
+  // ── Handle native Escape (cancel event) ──
+  var handleCancel = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    onClose({
+      reason: 'escape'
+    });
+  }, [onClose]);
+
+  // ── Handle backdrop click ──
+  // Attached via bind-event-listener rather than a React prop so we avoid
+  // a11y lint suppressions on the <dialog> element.
+  // Keyboard dismiss is already handled natively (Escape → onCancel above).
+  (0, _react.useEffect)(function () {
+    var dialog = ownRef.current;
+    if (!dialog) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(dialog, {
+      type: 'click',
+      listener: function listener(event) {
+        if (event.target === event.currentTarget) {
+          onClose({
+            reason: 'overlay-click'
+          });
+        }
+      }
+    });
+  }, [onClose]);
+
+  // Atomic CSS (Compiled) deduplicates ::backdrop { background-color }
+  // into a single class, making it impossible to toggle between two values
+  // via cssMap entries. An ID-scoped <style> has higher specificity than
+  // any atomic class, so the override always wins.
+  var escapedId = CSS.escape(dialogId);
+  return /*#__PURE__*/_react.default.createElement("dialog", (0, _extends2.default)({
+    ref: combinedRef,
+    id: dialogId,
+    "aria-label": label,
+    "aria-labelledby": label ? undefined : labelledBy,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: style,
+    onCancel: handleCancel,
+    "data-testid": testId
+  }, preset ? (0, _defineProperty2.default)({}, "data-ds-".concat(preset.name), '') : undefined, {
+    className: (0, _runtime.ax)([styles.dialog])
+  }), shouldHideBackdrop &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
+  _react.default.createElement("style", null, "#".concat(escapedId, "::backdrop{background-color:transparent}")), showChildren ? children : null);
+});

package/dist/cjs/dialog/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function get() {
+    return _dialogContent.Dialog;
+  }
+});
+Object.defineProperty(exports, "createCloseEvent", {
+  enumerable: true,
+  get: function get() {
+    return _createCloseEvent.createCloseEvent;
+  }
+});
+var _createCloseEvent = require("./create-close-event");
+var _dialogContent = require("./dialog-content");

package/dist/cjs/dialog/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/dialog-scroll-lock/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogScrollLock = DialogScrollLock;
+var _react = require("react");
+var _browserApis = require("@atlaskit/browser-apis");
+/**
+ * __DialogScrollLock__
+ *
+ * Prevents background page scrolling while mounted. Designed to be rendered
+ * inside a `Dialog` so that the scroll lock is automatically removed when the
+ * dialog closes (unmounts its children).
+ *
+ * Native `<dialog>.showModal()` makes background content _inert_ (not
+ * focusable/clickable), but does **not** prevent scroll events from reaching
+ * the document body. This component fills that gap by setting
+ * `overflow: hidden` on `document.body`.
+ *
+ * @example
+ * ```tsx
+ * import { Dialog } from '@atlaskit/top-layer/dialog';
+ * import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
+ *
+ * <Dialog isOpen={isOpen} onClose={onClose}>
+ *   <DialogScrollLock />
+ *   {children}
+ * </Dialog>
+ * ```
+ */
+function DialogScrollLock() {
+  (0, _react.useLayoutEffect)(function () {
+    var _getDocument;
+    var body = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.body;
+    if (!body) {
+      return;
+    }
+    var previousOverflow = body.style.overflow;
+    body.style.overflow = 'hidden';
+    return function () {
+      body.style.overflow = previousOverflow;
+    };
+  }, []);
+  return null;
+}

package/dist/cjs/entry-points/animations.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "dialogFade", {
+  enumerable: true,
+  get: function get() {
+    return _presets.dialogFade;
+  }
+});
+Object.defineProperty(exports, "dialogSlideUpAndFade", {
+  enumerable: true,
+  get: function get() {
+    return _presets.dialogSlideUpAndFade;
+  }
+});
+Object.defineProperty(exports, "fade", {
+  enumerable: true,
+  get: function get() {
+    return _presets.fade;
+  }
+});
+Object.defineProperty(exports, "scaleAndFade", {
+  enumerable: true,
+  get: function get() {
+    return _presets.scaleAndFade;
+  }
+});
+Object.defineProperty(exports, "slideAndFade", {
+  enumerable: true,
+  get: function get() {
+    return _presets.slideAndFade;
+  }
+});
+var _presets = require("../animations/presets");

package/dist/cjs/entry-points/arrow.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "arrow", {
+  enumerable: true,
+  get: function get() {
+    return _arrow.arrow;
+  }
+});
+var _arrow = require("../arrow");

package/dist/cjs/entry-points/create-close-event.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createCloseEvent", {
+  enumerable: true,
+  get: function get() {
+    return _dialog.createCloseEvent;
+  }
+});
+Object.defineProperty(exports, "createPopoverCloseEvent", {
+  enumerable: true,
+  get: function get() {
+    return _createCloseEvent.createPopoverCloseEvent;
+  }
+});
+var _dialog = require("../dialog");
+var _createCloseEvent = require("../popover/create-close-event");

package/dist/cjs/entry-points/dialog-scroll-lock.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DialogScrollLock", {
+  enumerable: true,
+  get: function get() {
+    return _dialogScrollLock.DialogScrollLock;
+  }
+});
+var _dialogScrollLock = require("../dialog-scroll-lock");

package/dist/cjs/entry-points/dialog.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function get() {
+    return _dialog.Dialog;
+  }
+});
+var _dialog = require("../dialog");

package/dist/cjs/entry-points/focus.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getFirstFocusable", {
+  enumerable: true,
+  get: function get() {
+    return _focus.getFirstFocusable;
+  }
+});
+Object.defineProperty(exports, "getLastFocusable", {
+  enumerable: true,
+  get: function get() {
+    return _focus.getLastFocusable;
+  }
+});
+Object.defineProperty(exports, "getNextFocusable", {
+  enumerable: true,
+  get: function get() {
+    return _focus.getNextFocusable;
+  }
+});
+var _focus = require("../focus");

package/dist/cjs/entry-points/placement-map.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "fromLegacyPlacement", {
+  enumerable: true,
+  get: function get() {
+    return _placementMap.fromLegacyPlacement;
+  }
+});
+Object.defineProperty(exports, "placementMapping", {
+  enumerable: true,
+  get: function get() {
+    return _placementMap.placementMapping;
+  }
+});
+var _placementMap = require("../placement-map");

package/dist/cjs/entry-points/popover.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function get() {
+    return _popover.Popover;
+  }
+});
+var _popover = require("../popover");

package/dist/cjs/entry-points/popup-surface.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PopupSurface", {
+  enumerable: true,
+  get: function get() {
+    return _popupSurface.PopupSurface;
+  }
+});
+var _popupSurface = require("../popup/popup-surface");

package/dist/cjs/entry-points/popup.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Popup", {
+  enumerable: true,
+  get: function get() {
+    return _popup.Popup;
+  }
+});
+var _popup = require("../popup");

package/dist/cjs/entry-points/use-anchor-position.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useAnchorPosition", {
+  enumerable: true,
+  get: function get() {
+    return _useAnchorPositioning.useAnchorPosition;
+  }
+});
+var _useAnchorPositioning = require("../internal/use-anchor-positioning");

package/dist/cjs/entry-points/use-arrow-navigation.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "isAtCurrentMenuLevel", {
+  enumerable: true,
+  get: function get() {
+    return _useArrowNavigation.isAtCurrentMenuLevel;
+  }
+});
+Object.defineProperty(exports, "useArrowNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _useArrowNavigation.useArrowNavigation;
+  }
+});
+var _useArrowNavigation = require("../use-arrow-navigation");

package/dist/cjs/entry-points/use-simple-light-dismiss.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useSimpleLightDismiss", {
+  enumerable: true,
+  get: function get() {
+    return _useSimpleLightDismiss.useSimpleLightDismiss;
+  }
+});
+var _useSimpleLightDismiss = require("../use-simple-light-dismiss");

package/dist/cjs/focus/focus.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFirstFocusable = getFirstFocusable;
+exports.getLastFocusable = getLastFocusable;
+exports.getNextFocusable = getNextFocusable;
+/**
+ * Focusable element selectors and navigation helpers.
+ *
+ * Uses CSS selectors to discover focusable elements within a container,
+ * avoiding the need for a manual registration system. Disabled elements
+ * (both HTML `disabled` attribute and `aria-disabled="true"`) and elements
+ * with `tabindex="-1"` are excluded automatically.
+ *
+ * All public functions accept an optional `filter` callback to further
+ * restrict which focusable elements are included.
+ */
+
+var selectors = function () {
+  // Common exclusion filter applied to every selector.
+  var not = ':not([tabindex="-1"]):not([aria-disabled="true"]):not([aria-hidden="true"])';
+  var notDisabled = ":not([disabled])".concat(not);
+  var focusable = ["a[href]".concat(not), "area[href]".concat(not), "input".concat(notDisabled, ":not([type=\"hidden\"])"), "select".concat(notDisabled), "textarea".concat(notDisabled), "button".concat(notDisabled), "iframe".concat(not), "audio[controls]".concat(not), "video[controls]".concat(not), "[contenteditable]:not([contenteditable=\"false\"])".concat(not), "[tabindex]".concat(notDisabled).concat(not)];
+  return {
+    focusable: focusable.join(','),
+    focused: focusable.join(':focus,') + ':focus'
+  };
+}();
+
+/**
+ * An optional callback to restrict which focusable elements are included.
+ * Return `true` to include the element, `false` to skip it.
+ */
+
+/**
+ * Returns all focusable HTMLElements within the container, optionally filtered.
+ *
+ * Note: this searches the full subtree and does not stop at nested
+ * popover/dialog boundaries. In practice this is fine because nested
+ * popovers are not rendered until they are opened, so their content
+ * is not in the DOM when the parent's initial focus runs. If that
+ * assumption changes, this would need to be scoped to the current layer.
+ */
+function getFocusables(_ref) {
+  var container = _ref.container,
+    filter = _ref.filter;
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (el) {
+    return el instanceof HTMLElement;
+  }).filter(function (el) {
+    return !filter || filter(el, container);
+  });
+}
+
+/**
+ * Returns the first focusable element within the container.
+ */
+function getFirstFocusable(_ref2) {
+  var container = _ref2.container,
+    filter = _ref2.filter;
+  var items = getFocusables({
+    container: container,
+    filter: filter
+  });
+  return items.length > 0 ? items[0] : null;
+}
+
+/**
+ * Returns the last focusable element within the container.
+ */
+function getLastFocusable(_ref3) {
+  var container = _ref3.container,
+    filter = _ref3.filter;
+  var items = getFocusables({
+    container: container,
+    filter: filter
+  });
+  return items.length > 0 ? items[items.length - 1] : null;
+}
+
+/**
+ * Returns the next focusable element in the given direction relative to the
+ * currently focused element within the container. Wraps around at both ends.
+ *
+ * Returns `null` if there is no focused element within the container or if
+ * the focused element is not in the list of focusable elements.
+ */
+function getNextFocusable(_ref4) {
+  var _all$nextIndex;
+  var container = _ref4.container,
+    direction = _ref4.direction,
+    filter = _ref4.filter;
+  var all = getFocusables({
+    container: container,
+    filter: filter
+  });
+  var current = container.querySelector(selectors.focused);
+  if (!(current instanceof HTMLElement)) {
+    return null;
+  }
+  var index = all.indexOf(current);
+  if (index === -1) {
+    return null;
+  }
+  var nextIndex = function () {
+    if (direction === 'forwards') {
+      return (index + 1) % all.length;
+    }
+    var proposed = index - 1;
+    // if going into negative numbers, loop back to the last item
+    return proposed < 0 ? all.length - 1 : proposed;
+  }();
+  return (_all$nextIndex = all[nextIndex]) !== null && _all$nextIndex !== void 0 ? _all$nextIndex : null;
+}

package/dist/cjs/focus/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getFirstFocusable", {
+  enumerable: true,
+  get: function get() {
+    return _focus.getFirstFocusable;
+  }
+});
+Object.defineProperty(exports, "getLastFocusable", {
+  enumerable: true,
+  get: function get() {
+    return _focus.getLastFocusable;
+  }
+});
+Object.defineProperty(exports, "getNextFocusable", {
+  enumerable: true,
+  get: function get() {
+    return _focus.getNextFocusable;
+  }
+});
+var _focus = require("./focus");

package/dist/cjs/index.js

@@ -0,0 +1,8 @@
+// This file exists for module resolution purposes.
+// Not exporting anything from the root entry point.
+// Please use individual entry points for minimum bundle size:
+//
+//   import { Popup } from '@atlaskit/top-layer/popup';
+//   import { Dialog } from '@atlaskit/top-layer/dialog';
+//   import { Popover } from '@atlaskit/top-layer/popover';
+"use strict";