@atlaskit/top-layer 4.4.2 → 4.4.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/top-layer
 
+## 4.4.3
+
+### Patch Changes
+
+- [`25d19b9cc0200`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/25d19b9cc0200) -
+  Handle non-tabbable focus origins and skip hidden, disabled, or inert elements when wrapping focus
+
 ## 4.4.2
 
 ### Patch Changes

package/dist/cjs/focus/get-closest-layer.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getClosestLayer = getClosestLayer;
+function getClosestLayer(_ref) {
+  var element = _ref.element;
+  return element.closest('[popover], dialog');
+}

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

@@ -4,10 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFocusables = getFocusables;
-var _isInSameLayer = require("./is-in-same-layer");
-var _selectors = require("./selectors");
+var _getClosestLayer = require("./get-closest-layer");
+var focusableExclusions = ['[tabindex="-1"]', ':disabled', '[aria-disabled="true"]', '[aria-hidden="true"]'];
+var exclusionSelector = focusableExclusions.map(function (selector) {
+  return ":not(".concat(selector, ")");
+}).join('');
+var focusableSelector = ['a[href]', 'area[href]', 'input:not([type="hidden"])', 'select', 'textarea', 'button', 'iframe', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', '[tabindex]'].map(function (selector) {
+  return "".concat(selector).concat(exclusionSelector);
+}).join(',');
+function isVisible(element) {
+  // Visibility filtering must not break focus navigation when the API is unsupported.
+  if (typeof element.checkVisibility !== 'function') {
+    return true;
+  }
+  try {
+    // Exclude elements hidden by display, content-visibility or visibility because
+    // they cannot receive focus. Offscreen, occluded and opacity-zero elements can
+    // receive focus, so they intentionally remain included.
+    return element.checkVisibility({
+      checkVisibilityCSS: true
+    });
+  } catch (_unused) {
+    return true;
+  }
+}
+
 /**
  * Returns all focusable HTMLElements within the container, optionally filtered.
+ * Elements with `tabindex="-1"` are excluded because they can be focused
+ * programmatically but are not sequential focus navigation destinations.
  *
  * Focusables that belong to a nested top-layer scope (a `[popover]` or
  * `<dialog>` descendant of the container) are excluded - those elements
@@ -17,14 +42,24 @@ var _selectors = require("./selectors");
 function getFocusables(_ref) {
   var container = _ref.container,
     filter = _ref.filter;
-  return Array.from(container.querySelectorAll(_selectors.selectors.focusable)).filter(function (element) {
-    return element instanceof HTMLElement;
-  }).filter(function (element) {
-    return (0, _isInSameLayer.isInSameLayer)({
-      element: element,
-      container: container
-    });
-  }).filter(function (element) {
+  var containerLayer = (0, _getClosestLayer.getClosestLayer)({
+    element: container
+  });
+  return Array.from(container.querySelectorAll(focusableSelector)).filter(function (element) {
+    if (!(element instanceof HTMLElement)) {
+      return false;
+    }
+    if ((0, _getClosestLayer.getClosestLayer)({
+      element: element
+    }) !== containerLayer) {
+      return false;
+    }
+    if (element.closest('[inert]')) {
+      return false;
+    }
+    if (!isVisible(element)) {
+      return false;
+    }
     return !filter || filter(element, container);
   });
 }

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

@@ -5,17 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getNextFocusable = getNextFocusable;
 var _getFocusables = require("./get-focusables");
-var _selectors = require("./selectors");
 /**
  * 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.
+ * The currently focused element does not need to be tabbable. This prevents
+ * navigation from getting stuck on an element that was programmatically or
+ * pointer focused with `tabindex="-1"`. Negative-tab-index elements remain
+ * excluded as destinations.
+ *
+ * Returns `null` if there is no focused element within the container.
  */
 
 function getNextFocusable(_ref) {
-  var _all$nextIndex;
+  var _all3;
   var container = _ref.container,
     direction = _ref.direction,
     filter = _ref.filter;
@@ -23,21 +26,43 @@ function getNextFocusable(_ref) {
     container: container,
     filter: filter
   });
-  var current = container.querySelector(_selectors.selectors.focused);
-  if (!(current instanceof HTMLElement)) {
+  var first = all[0];
+  var last = all[all.length - 1];
+
+  // Checking the elements directly narrows types from `HTMLElement | undefined`.
+  if (!first || !last) {
     return null;
   }
-  var index = all.indexOf(current);
-  if (index === -1) {
+  var current = container.ownerDocument.activeElement;
+  if (!(current instanceof HTMLElement) || !container.contains(current)) {
     return null;
   }
-  var nextIndex = function () {
+  var index = all.indexOf(current);
+
+  // The focused element can be absent from `all` when it is non-tabbable or
+  // excluded by the filter. Find the first focusable element that follows it in
+  // the DOM, which identifies the nearest focusable destination in either direction.
+  if (index === -1) {
+    var _all;
+    var followingIndex = all.findIndex(function (element) {
+      return Boolean(current.compareDocumentPosition(element) & current.DOCUMENT_POSITION_FOLLOWING);
+    });
     if (direction === 'forwards') {
-      return (index + 1) % all.length;
+      var _all$followingIndex;
+      // If nothing follows the current element, then wrap to the start.
+      return (_all$followingIndex = all[followingIndex]) !== null && _all$followingIndex !== void 0 ? _all$followingIndex : first;
     }
-    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;
+
+    // The closest preceding element is immediately before the first following one.
+    // A missing adjacent entry means the backward sequence wraps to the end.
+    return (_all = all[followingIndex - 1]) !== null && _all !== void 0 ? _all : last;
+  }
+
+  // The current element is tabbable, so use its adjacent list entry and wrap
+  // when it is already at the boundary.
+  if (direction === 'forwards') {
+    var _all2;
+    return (_all2 = all[index + 1]) !== null && _all2 !== void 0 ? _all2 : first;
+  }
+  return (_all3 = all[index - 1]) !== null && _all3 !== void 0 ? _all3 : last;
 }

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

@@ -4,17 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isNestedLayerFocused = isNestedLayerFocused;
-var _browserApis = require("@atlaskit/browser-apis");
-var _isInSameLayer = require("./is-in-same-layer");
+var _getClosestLayer = require("./get-closest-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`).
+ * descendant of `container` (a `[popover]` or `<dialog>` that is itself a
+ * descendant of `container`).
  */
 function isNestedLayerFocused(_ref) {
-  var _getDocument;
   var container = _ref.container;
-  var focused = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
+  var focused = container.ownerDocument.activeElement;
   if (!(focused instanceof HTMLElement)) {
     return false;
   }
@@ -25,8 +23,9 @@ function isNestedLayerFocused(_ref) {
   }
 
   // If not in the same layer, must be in a nested layer
-  return !(0, _isInSameLayer.isInSameLayer)({
-    element: focused,
-    container: container
+  return (0, _getClosestLayer.getClosestLayer)({
+    element: focused
+  }) !== (0, _getClosestLayer.getClosestLayer)({
+    element: container
   });
 }

package/dist/es2019/focus/get-closest-layer.js

@@ -0,0 +1,5 @@
+export function getClosestLayer({
+  element
+}) {
+  return element.closest('[popover], dialog');
+}

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

@@ -1,7 +1,28 @@
-import { isInSameLayer } from './is-in-same-layer';
-import { selectors } from './selectors';
+import { getClosestLayer } from './get-closest-layer';
+const focusableExclusions = ['[tabindex="-1"]', ':disabled', '[aria-disabled="true"]', '[aria-hidden="true"]'];
+const exclusionSelector = focusableExclusions.map(selector => `:not(${selector})`).join('');
+const focusableSelector = ['a[href]', 'area[href]', 'input:not([type="hidden"])', 'select', 'textarea', 'button', 'iframe', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', '[tabindex]'].map(selector => `${selector}${exclusionSelector}`).join(',');
+function isVisible(element) {
+  // Visibility filtering must not break focus navigation when the API is unsupported.
+  if (typeof element.checkVisibility !== 'function') {
+    return true;
+  }
+  try {
+    // Exclude elements hidden by display, content-visibility or visibility because
+    // they cannot receive focus. Offscreen, occluded and opacity-zero elements can
+    // receive focus, so they intentionally remain included.
+    return element.checkVisibility({
+      checkVisibilityCSS: true
+    });
+  } catch {
+    return true;
+  }
+}
+
 /**
  * Returns all focusable HTMLElements within the container, optionally filtered.
+ * Elements with `tabindex="-1"` are excluded because they can be focused
+ * programmatically but are not sequential focus navigation destinations.
  *
  * Focusables that belong to a nested top-layer scope (a `[popover]` or
  * `<dialog>` descendant of the container) are excluded - those elements
@@ -12,8 +33,24 @@ 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));
+  const containerLayer = getClosestLayer({
+    element: container
+  });
+  return Array.from(container.querySelectorAll(focusableSelector)).filter(element => {
+    if (!(element instanceof HTMLElement)) {
+      return false;
+    }
+    if (getClosestLayer({
+      element
+    }) !== containerLayer) {
+      return false;
+    }
+    if (element.closest('[inert]')) {
+      return false;
+    }
+    if (!isVisible(element)) {
+      return false;
+    }
+    return !filter || filter(element, container);
+  });
 }

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

@@ -2,37 +2,60 @@
  * 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.
+ * The currently focused element does not need to be tabbable. This prevents
+ * navigation from getting stuck on an element that was programmatically or
+ * pointer focused with `tabindex="-1"`. Negative-tab-index elements remain
+ * excluded as destinations.
+ *
+ * Returns `null` if there is no focused element within the container.
  */
 
 import { getFocusables } from './get-focusables';
-import { selectors } from './selectors';
 export function getNextFocusable({
   container,
   direction,
   filter
 }) {
-  var _all$nextIndex;
+  var _all3;
   const all = getFocusables({
     container,
     filter
   });
-  const current = container.querySelector(selectors.focused);
-  if (!(current instanceof HTMLElement)) {
+  const first = all[0];
+  const last = all[all.length - 1];
+
+  // Checking the elements directly narrows types from `HTMLElement | undefined`.
+  if (!first || !last) {
     return null;
   }
-  const index = all.indexOf(current);
-  if (index === -1) {
+  const current = container.ownerDocument.activeElement;
+  if (!(current instanceof HTMLElement) || !container.contains(current)) {
     return null;
   }
-  const nextIndex = (() => {
+  const index = all.indexOf(current);
+
+  // The focused element can be absent from `all` when it is non-tabbable or
+  // excluded by the filter. Find the first focusable element that follows it in
+  // the DOM, which identifies the nearest focusable destination in either direction.
+  if (index === -1) {
+    var _all;
+    const followingIndex = all.findIndex(element => Boolean(current.compareDocumentPosition(element) & current.DOCUMENT_POSITION_FOLLOWING));
     if (direction === 'forwards') {
-      return (index + 1) % all.length;
+      var _all$followingIndex;
+      // If nothing follows the current element, then wrap to the start.
+      return (_all$followingIndex = all[followingIndex]) !== null && _all$followingIndex !== void 0 ? _all$followingIndex : first;
     }
-    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;
+
+    // The closest preceding element is immediately before the first following one.
+    // A missing adjacent entry means the backward sequence wraps to the end.
+    return (_all = all[followingIndex - 1]) !== null && _all !== void 0 ? _all : last;
+  }
+
+  // The current element is tabbable, so use its adjacent list entry and wrap
+  // when it is already at the boundary.
+  if (direction === 'forwards') {
+    var _all2;
+    return (_all2 = all[index + 1]) !== null && _all2 !== void 0 ? _all2 : first;
+  }
+  return (_all3 = all[index - 1]) !== null && _all3 !== void 0 ? _all3 : last;
 }

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

@@ -1,16 +1,14 @@
-import { getDocument } from '@atlaskit/browser-apis';
-import { isInSameLayer } from './is-in-same-layer';
+import { getClosestLayer } from './get-closest-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`).
+ * descendant of `container` (a `[popover]` or `<dialog>` 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;
+  const focused = container.ownerDocument.activeElement;
   if (!(focused instanceof HTMLElement)) {
     return false;
   }
@@ -21,8 +19,9 @@ export function isNestedLayerFocused({
   }
 
   // If not in the same layer, must be in a nested layer
-  return !isInSameLayer({
-    element: focused,
-    container
+  return getClosestLayer({
+    element: focused
+  }) !== getClosestLayer({
+    element: container
   });
 }

package/dist/esm/focus/get-closest-layer.js

@@ -0,0 +1,4 @@
+export function getClosestLayer(_ref) {
+  var element = _ref.element;
+  return element.closest('[popover], dialog');
+}

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

@@ -1,7 +1,32 @@
-import { isInSameLayer } from './is-in-same-layer';
-import { selectors } from './selectors';
+import { getClosestLayer } from './get-closest-layer';
+var focusableExclusions = ['[tabindex="-1"]', ':disabled', '[aria-disabled="true"]', '[aria-hidden="true"]'];
+var exclusionSelector = focusableExclusions.map(function (selector) {
+  return ":not(".concat(selector, ")");
+}).join('');
+var focusableSelector = ['a[href]', 'area[href]', 'input:not([type="hidden"])', 'select', 'textarea', 'button', 'iframe', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', '[tabindex]'].map(function (selector) {
+  return "".concat(selector).concat(exclusionSelector);
+}).join(',');
+function isVisible(element) {
+  // Visibility filtering must not break focus navigation when the API is unsupported.
+  if (typeof element.checkVisibility !== 'function') {
+    return true;
+  }
+  try {
+    // Exclude elements hidden by display, content-visibility or visibility because
+    // they cannot receive focus. Offscreen, occluded and opacity-zero elements can
+    // receive focus, so they intentionally remain included.
+    return element.checkVisibility({
+      checkVisibilityCSS: true
+    });
+  } catch (_unused) {
+    return true;
+  }
+}
+
 /**
  * Returns all focusable HTMLElements within the container, optionally filtered.
+ * Elements with `tabindex="-1"` are excluded because they can be focused
+ * programmatically but are not sequential focus navigation destinations.
  *
  * Focusables that belong to a nested top-layer scope (a `[popover]` or
  * `<dialog>` descendant of the container) are excluded - those elements
@@ -11,14 +36,24 @@ import { selectors } from './selectors';
 export function getFocusables(_ref) {
   var container = _ref.container,
     filter = _ref.filter;
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (element) {
-    return element instanceof HTMLElement;
-  }).filter(function (element) {
-    return isInSameLayer({
-      element: element,
-      container: container
-    });
-  }).filter(function (element) {
+  var containerLayer = getClosestLayer({
+    element: container
+  });
+  return Array.from(container.querySelectorAll(focusableSelector)).filter(function (element) {
+    if (!(element instanceof HTMLElement)) {
+      return false;
+    }
+    if (getClosestLayer({
+      element: element
+    }) !== containerLayer) {
+      return false;
+    }
+    if (element.closest('[inert]')) {
+      return false;
+    }
+    if (!isVisible(element)) {
+      return false;
+    }
     return !filter || filter(element, container);
   });
 }

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

@@ -2,14 +2,17 @@
  * 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.
+ * The currently focused element does not need to be tabbable. This prevents
+ * navigation from getting stuck on an element that was programmatically or
+ * pointer focused with `tabindex="-1"`. Negative-tab-index elements remain
+ * excluded as destinations.
+ *
+ * Returns `null` if there is no focused element within the container.
  */
 
 import { getFocusables } from './get-focusables';
-import { selectors } from './selectors';
 export function getNextFocusable(_ref) {
-  var _all$nextIndex;
+  var _all3;
   var container = _ref.container,
     direction = _ref.direction,
     filter = _ref.filter;
@@ -17,21 +20,43 @@ export function getNextFocusable(_ref) {
     container: container,
     filter: filter
   });
-  var current = container.querySelector(selectors.focused);
-  if (!(current instanceof HTMLElement)) {
+  var first = all[0];
+  var last = all[all.length - 1];
+
+  // Checking the elements directly narrows types from `HTMLElement | undefined`.
+  if (!first || !last) {
     return null;
   }
-  var index = all.indexOf(current);
-  if (index === -1) {
+  var current = container.ownerDocument.activeElement;
+  if (!(current instanceof HTMLElement) || !container.contains(current)) {
     return null;
   }
-  var nextIndex = function () {
+  var index = all.indexOf(current);
+
+  // The focused element can be absent from `all` when it is non-tabbable or
+  // excluded by the filter. Find the first focusable element that follows it in
+  // the DOM, which identifies the nearest focusable destination in either direction.
+  if (index === -1) {
+    var _all;
+    var followingIndex = all.findIndex(function (element) {
+      return Boolean(current.compareDocumentPosition(element) & current.DOCUMENT_POSITION_FOLLOWING);
+    });
     if (direction === 'forwards') {
-      return (index + 1) % all.length;
+      var _all$followingIndex;
+      // If nothing follows the current element, then wrap to the start.
+      return (_all$followingIndex = all[followingIndex]) !== null && _all$followingIndex !== void 0 ? _all$followingIndex : first;
     }
-    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;
+
+    // The closest preceding element is immediately before the first following one.
+    // A missing adjacent entry means the backward sequence wraps to the end.
+    return (_all = all[followingIndex - 1]) !== null && _all !== void 0 ? _all : last;
+  }
+
+  // The current element is tabbable, so use its adjacent list entry and wrap
+  // when it is already at the boundary.
+  if (direction === 'forwards') {
+    var _all2;
+    return (_all2 = all[index + 1]) !== null && _all2 !== void 0 ? _all2 : first;
+  }
+  return (_all3 = all[index - 1]) !== null && _all3 !== void 0 ? _all3 : last;
 }

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

@@ -1,15 +1,13 @@
-import { getDocument } from '@atlaskit/browser-apis';
-import { isInSameLayer } from './is-in-same-layer';
+import { getClosestLayer } from './get-closest-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`).
+ * descendant of `container` (a `[popover]` or `<dialog>` that is itself a
+ * descendant of `container`).
  */
 export function isNestedLayerFocused(_ref) {
-  var _getDocument;
   var container = _ref.container;
-  var focused = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
+  var focused = container.ownerDocument.activeElement;
   if (!(focused instanceof HTMLElement)) {
     return false;
   }
@@ -20,8 +18,9 @@ export function isNestedLayerFocused(_ref) {
   }
 
   // If not in the same layer, must be in a nested layer
-  return !isInSameLayer({
-    element: focused,
-    container: container
+  return getClosestLayer({
+    element: focused
+  }) !== getClosestLayer({
+    element: container
   });
 }

package/dist/types/focus/get-closest-layer.d.ts

@@ -0,0 +1,3 @@
+export declare function getClosestLayer({ element }: {
+    element: HTMLElement;
+}): Element | null;

package/dist/types/focus/get-focusables.d.ts

@@ -1,6 +1,8 @@
 import type { TFocusableFilter } from './types';
 /**
  * Returns all focusable HTMLElements within the container, optionally filtered.
+ * Elements with `tabindex="-1"` are excluded because they can be focused
+ * programmatically but are not sequential focus navigation destinations.
  *
  * Focusables that belong to a nested top-layer scope (a `[popover]` or
  * `<dialog>` descendant of the container) are excluded - those elements

package/dist/types/focus/get-next-focusable.d.ts

@@ -2,8 +2,12 @@
  * 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.
+ * The currently focused element does not need to be tabbable. This prevents
+ * navigation from getting stuck on an element that was programmatically or
+ * pointer focused with `tabindex="-1"`. Negative-tab-index elements remain
+ * excluded as destinations.
+ *
+ * Returns `null` if there is no focused element within the container.
  */
 import type { TFocusableFilter } from './types';
 export declare function getNextFocusable({ container, direction, filter, }: {

package/dist/types/focus/is-nested-layer-focused.d.ts

@@ -1,7 +1,7 @@
 /**
  * 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`).
+ * descendant of `container` (a `[popover]` or `<dialog>` that is itself a
+ * descendant of `container`).
  */
 export declare function isNestedLayerFocused({ container }: {
     container: HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "4.4.2",
+	"version": "4.4.3",
 	"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",
@@ -36,11 +36,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/browser-apis": "^1.2.0",
-		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
-		"@atlaskit/layering": "^5.1.0",
+		"@atlaskit/layering": "^5.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^16.8.0",
+		"@atlaskit/tokens": "^16.11.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -53,12 +53,15 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^25.2.0",
-		"@atlaskit/heading": "^7.1.0",
-		"@atlaskit/lozenge": "^15.3.0",
-		"@atlaskit/primitives": "^22.4.0",
+		"@atlaskit/button": "^25.3.0",
+		"@atlaskit/checkbox": "^19.2.0",
+		"@atlaskit/heading": "^7.2.0",
+		"@atlaskit/lozenge": "^15.4.0",
+		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/select": "^22.11.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/textfield": "^10.1.0",
+		"@atlaskit/textfield": "^10.2.0",
+		"@atlaskit/toggle": "^17.3.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/testing-library": "^0.11.0",
 		"@testing-library/jest-dom": "^6.4.5",

package/dist/cjs/focus/is-in-same-layer.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isInSameLayer = isInSameLayer;
-var 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).
- */
-function isInSameLayer(_ref) {
-  var element = _ref.element,
-    container = _ref.container;
-  return element.closest(topLayerSelector) === container.closest(topLayerSelector);
-}

package/dist/cjs/focus/selectors.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.selectors = void 0;
-var selectors = exports.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)];
-  return {
-    focusable: focusable.join(','),
-    // Build the `:focus` selector
-    focused: focusable.map(function (selector) {
-      return "".concat(selector, ":focus");
-    }).join(',')
-  };
-}();

package/dist/es2019/focus/is-in-same-layer.js

@@ -1,12 +0,0 @@
-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
-}) {
-  return element.closest(topLayerSelector) === container.closest(topLayerSelector);
-}

package/dist/es2019/focus/selectors.js

@@ -1,11 +0,0 @@
-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}`];
-  return {
-    focusable: focusable.join(','),
-    // Build the `:focus` selector
-    focused: focusable.map(selector => `${selector}:focus`).join(',')
-  };
-})();

package/dist/esm/focus/is-in-same-layer.js

@@ -1,11 +0,0 @@
-var 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(_ref) {
-  var element = _ref.element,
-    container = _ref.container;
-  return element.closest(topLayerSelector) === container.closest(topLayerSelector);
-}

package/dist/esm/focus/selectors.js

@@ -1,13 +0,0 @@
-export 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)];
-  return {
-    focusable: focusable.join(','),
-    // Build the `:focus` selector
-    focused: focusable.map(function (selector) {
-      return "".concat(selector, ":focus");
-    }).join(',')
-  };
-}();

package/dist/types/focus/is-in-same-layer.d.ts

@@ -1,8 +0,0 @@
-/**
- * Returns true when `element` and `container` resolve to the same nearest
- * top-layer host (or both resolve to `null`, meaning the document layer).
- */
-export declare function isInSameLayer({ element, container, }: {
-    element: HTMLElement;
-    container: HTMLElement;
-}): boolean;

package/dist/types/focus/selectors.d.ts

@@ -1,4 +0,0 @@
-export declare const selectors: {
-    focusable: string;
-    focused: string;
-};