@atlaskit/top-layer 0.12.2 → 0.13.0

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'
+  }
+};

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

@@ -12,7 +12,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _reducedMotion = require("../internal/reduced-motion");
-var _roleTypes = require("../internal/role-types");
+var _roleToAriaHasPopup = require("../internal/role-to-aria-has-popup");
+var _shouldFocusIntoPopover = require("../internal/should-focus-into-popover");
 var _useAnchorPosition = require("../internal/use-anchor-position");
 var _useWidthFromAnchor = require("../internal/use-width-from-anchor");
 var _popover = require("../popover/popover");
@@ -100,7 +101,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
   // Sync aria-haspopup on the trigger with the content's role
   var setAriaHasPopup = ctx === null || ctx === void 0 ? void 0 : ctx.setAriaHasPopup;
   (0, _react.useLayoutEffect)(function () {
-    setAriaHasPopup === null || setAriaHasPopup === void 0 || setAriaHasPopup((0, _roleTypes.roleToAriaHasPopup)({
+    setAriaHasPopup === null || setAriaHasPopup === void 0 || setAriaHasPopup((0, _roleToAriaHasPopup.roleToAriaHasPopup)({
       role: role
     }));
   }, [role, setAriaHasPopup]);
@@ -151,7 +152,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
       // Single source of truth for "this role moves focus on open
       // and therefore needs to be restored on close" - see
       // `shouldFocusIntoPopover` in `internal/role-types.tsx`.
-      if (focusStillInPopover && (0, _roleTypes.shouldFocusIntoPopover)({
+      if (focusStillInPopover && (0, _shouldFocusIntoPopover.shouldFocusIntoPopover)({
         role: role
       })) {
         trigger.focus({

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

@@ -8,7 +8,9 @@ var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _browserApis = require("@atlaskit/browser-apis");
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
-var _focus = require("../focus");
+var _getFirstFocusable2 = require("../focus/get-first-focusable");
+var _getLastFocusable2 = require("../focus/get-last-focusable");
+var _getNextFocusable3 = require("../focus/get-next-focusable");
 var menuScope = '[role="menu"]';
 
 /**
@@ -96,7 +98,7 @@ function useArrowNavigation(_ref) {
       var _getNextFocusable;
       // Prevent page scroll while navigating menu items.
       event.preventDefault();
-      (_getNextFocusable = (0, _focus.getNextFocusable)({
+      (_getNextFocusable = (0, _getNextFocusable3.getNextFocusable)({
         container: container,
         direction: 'forwards',
         filter: filter
@@ -107,7 +109,7 @@ function useArrowNavigation(_ref) {
       var _getNextFocusable2;
       // Prevent page scroll while navigating menu items.
       event.preventDefault();
-      (_getNextFocusable2 = (0, _focus.getNextFocusable)({
+      (_getNextFocusable2 = (0, _getNextFocusable3.getNextFocusable)({
         container: container,
         direction: 'backwards',
         filter: filter
@@ -118,7 +120,7 @@ function useArrowNavigation(_ref) {
       var _getFirstFocusable;
       // Prevent browser default (e.g. scrolling to top of page).
       event.preventDefault();
-      (_getFirstFocusable = (0, _focus.getFirstFocusable)({
+      (_getFirstFocusable = (0, _getFirstFocusable2.getFirstFocusable)({
         container: container,
         filter: filter
       })) === null || _getFirstFocusable === void 0 || _getFirstFocusable.focus();
@@ -128,7 +130,7 @@ function useArrowNavigation(_ref) {
       var _getLastFocusable;
       // Prevent browser default (e.g. scrolling to bottom of page).
       event.preventDefault();
-      (_getLastFocusable = (0, _focus.getLastFocusable)({
+      (_getLastFocusable = (0, _getLastFocusable2.getLastFocusable)({
         container: container,
         filter: filter
       })) === null || _getLastFocusable === void 0 || _getLastFocusable.focus();

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

@@ -1 +1,3 @@
-export { getFirstFocusable, getLastFocusable, getNextFocusable } from '../focus';
+export { getFirstFocusable } from '../focus/get-first-focusable';
+export { getLastFocusable } from '../focus/get-last-focusable';
+export { getNextFocusable } from '../focus/get-next-focusable';

package/dist/es2019/entry-points/use-anchor-position-at-point.js

@@ -0,0 +1 @@
+export { useAnchorPositionAtPoint } from '../internal/use-anchor-position-at-point';

package/dist/es2019/focus/get-first-focusable.js

@@ -0,0 +1,14 @@
+import { getFocusables } from './get-focusables';
+/**
+ * Returns the first focusable element within the container.
+ */
+export function getFirstFocusable({
+  container,
+  filter
+}) {
+  const items = getFocusables({
+    container,
+    filter
+  });
+  return items.length > 0 ? items[0] : null;
+}

package/dist/es2019/focus/get-focusables.js

@@ -0,0 +1,19 @@
+import { isInSameLayer } from './is-in-same-layer';
+import { selectors } from './selectors';
+/**
+ * Returns all focusable HTMLElements within the container, optionally filtered.
+ *
+ * Focusables that belong to a nested top-layer scope (a `[popover]` or
+ * `<dialog>` descendant of the container) are excluded - those elements
+ * are owned by the inner layer's focus management. The container itself
+ * is allowed to be a popover/dialog; only nested ones are filtered.
+ */
+export function getFocusables({
+  container,
+  filter
+}) {
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(element => element instanceof HTMLElement).filter(element => isInSameLayer({
+    element,
+    container
+  })).filter(element => !filter || filter(element, container));
+}

package/dist/es2019/focus/get-last-focusable.js

@@ -0,0 +1,14 @@
+import { getFocusables } from './get-focusables';
+/**
+ * Returns the last focusable element within the container.
+ */
+export function getLastFocusable({
+  container,
+  filter
+}) {
+  const items = getFocusables({
+    container,
+    filter
+  });
+  return items.length > 0 ? items[items.length - 1] : null;
+}

package/dist/es2019/focus/get-next-focusable.js

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+import { getFocusables } from './get-focusables';
+import { selectors } from './selectors';
+export function getNextFocusable({
+  container,
+  direction,
+  filter
+}) {
+  var _all$nextIndex;
+  const all = getFocusables({
+    container,
+    filter
+  });
+  const current = container.querySelector(selectors.focused);
+  if (!(current instanceof HTMLElement)) {
+    return null;
+  }
+  const index = all.indexOf(current);
+  if (index === -1) {
+    return null;
+  }
+  const nextIndex = (() => {
+    if (direction === 'forwards') {
+      return (index + 1) % all.length;
+    }
+    const 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/es2019/focus/is-in-same-layer.js

@@ -0,0 +1,18 @@
+const topLayerSelector = '[popover], dialog, [role="dialog"], [role="alertdialog"]';
+
+/**
+ * Returns true when `element` and `container` resolve to the same nearest
+ * top-layer host (or both resolve to `null`, meaning the document layer).
+ */
+export function isInSameLayer({
+  element,
+  container
+}) {
+  const elementLayer = element.closest(topLayerSelector);
+  const containerLayer = container.closest(topLayerSelector);
+  // Both elements are in the "document" layer
+  if (!elementLayer && !containerLayer) {
+    return true;
+  }
+  return elementLayer === containerLayer;
+}

package/dist/es2019/focus/is-nested-layer-focused.js

@@ -0,0 +1,28 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { isInSameLayer } from './is-in-same-layer';
+
+/**
+ * Returns `true` when `document.activeElement` is inside a nested top-layer
+ * descendant of `container` (a `[popover]`, `<dialog>`, `[role="dialog"]` or
+ * `[role="alertdialog"]` that is itself a descendant of `container`).
+ */
+export function isNestedLayerFocused({
+  container
+}) {
+  var _getDocument;
+  const focused = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
+  if (!(focused instanceof HTMLElement)) {
+    return false;
+  }
+
+  // Cannot be in a nested layer if it is not in the container
+  if (!container.contains(focused)) {
+    return false;
+  }
+
+  // If not in the same layer, must be in a nested layer
+  return !isInSameLayer({
+    element: focused,
+    container
+  });
+}

package/dist/es2019/focus/selectors.js

@@ -0,0 +1,11 @@
+export const selectors = (() => {
+  // Common exclusion filter applied to every selector.
+  const not = ':not([tabindex="-1"]):not([aria-disabled="true"]):not([aria-hidden="true"])';
+  const notDisabled = `:not([disabled])${not}`;
+  const focusable = [`a[href]${not}`, `area[href]${not}`, `input${notDisabled}:not([type="hidden"])`, `select${notDisabled}`, `textarea${notDisabled}`, `button${notDisabled}`, `iframe${not}`, `audio[controls]${not}`, `video[controls]${not}`, `[contenteditable]:not([contenteditable="false"])${not}`, `[tabindex]${notDisabled}${not}`];
+  return {
+    focusable: focusable.join(','),
+    // Build the `:focus` selector
+    focused: focusable.map(selector => `${selector}:focus`).join(',')
+  };
+})();

package/dist/es2019/internal/role-to-aria-has-popup.js

@@ -0,0 +1,32 @@
+/**
+ * Maps a popover content role to the correct `aria-haspopup` value
+ * for its trigger element.
+ *
+ * Returns `undefined` for roles that are not popups in the ARIA sense
+ * (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
+ * should not announce a popup at all - emitting `aria-haspopup="dialog"`
+ * on a tooltip trigger would mislead assistive technology.
+ */
+export function roleToAriaHasPopup({
+  role
+}) {
+  if (role === 'menu') {
+    return 'menu';
+  }
+  if (role === 'listbox') {
+    return 'listbox';
+  }
+  if (role === 'tree') {
+    return 'tree';
+  }
+  if (role === 'grid') {
+    return 'grid';
+  }
+  if (role === 'dialog' || role === 'alertdialog') {
+    return 'dialog';
+  }
+  // Non-popup roles (tooltip, note, status, alert, log) and the
+  // no-role case: omit `aria-haspopup` entirely. React drops the
+  // attribute when the value is `undefined`.
+  return undefined;
+}

package/dist/es2019/internal/role-types.js

@@ -1,92 +0,0 @@
-/**
- * Valid values for the `aria-haspopup` attribute.
- *
- * Derived from the HTML spec - maps popover roles to what the trigger
- * announces. `undefined` means the attribute is omitted entirely (used for
- * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
- * `aria-haspopup` would be misleading).
- *
- * `true` is intentionally NOT in the union - the runtime only ever produces
- * the explicit string forms, so widening the type would invite consumers to
- * pass `true` and get an `aria-haspopup="true"` serialisation that the
- * runtime no longer emits.
- */
-
-/**
- * Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
- * Without a name, assistive technology cannot identify these landmarks.
- */
-
-/**
- * Roles where the accessible name is derived from content or provided externally
- * (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
- */
-
-// Shared ARIA role discrimination types
-//
-// These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
-// and `menu` MUST have an accessible name (either `label` or `labelledBy`).
-// TypeScript enforces this at compile time via discriminated unions.
-
-/**
- * ARIA role props where a role is always required.
- *
- * Used by `TPopupContentProps`. Popup content must always declare
- * its role so assistive technology can identify the layer.
- */
-
-/**
- * ARIA role props where a role is optional.
- *
- * Used by `TPopoverProps`. The low-level primitive allows omitting
- * the role for cases where it is set externally or not needed.
- */
-
-/**
- * Maps a popover content role to the correct `aria-haspopup` value
- * for its trigger element.
- *
- * Returns `undefined` for roles that are not popups in the ARIA sense
- * (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
- * should not announce a popup at all - emitting `aria-haspopup="dialog"`
- * on a tooltip trigger would mislead assistive technology.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function roleToAriaHasPopup({
-  role
-}) {
-  if (role === 'menu') {
-    return 'menu';
-  }
-  if (role === 'listbox') {
-    return 'listbox';
-  }
-  if (role === 'tree') {
-    return 'tree';
-  }
-  if (role === 'grid') {
-    return 'grid';
-  }
-  if (role === 'dialog' || role === 'alertdialog') {
-    return 'dialog';
-  }
-  // Non-popup roles (tooltip, note, status, alert, log) and the
-  // no-role case: omit `aria-haspopup` entirely. React drops the
-  // attribute when the value is `undefined`.
-  return undefined;
-}
-const 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`).
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function shouldFocusIntoPopover({
-  role
-}) {
-  if (!role) {
-    return false;
-  }
-  return rolesThatMoveFocus.has(role);
-}

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

@@ -0,0 +1,14 @@
+const 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`).
+ */
+export function shouldFocusIntoPopover({
+  role
+}) {
+  if (!role) {
+    return false;
+  }
+  return rolesThatMoveFocus.has(role);
+}