@atlaskit/page-layout 4.3.0 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/page-layout
 
+## 4.3.2
+
+### Patch Changes
+
+- [`40a0c6a050287`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/40a0c6a050287) -
+  Add deprecation notices to code exports
+
+## 4.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.3.0
 
 ### Minor Changes

package/dist/cjs/common/constants.js

@@ -48,10 +48,29 @@ var RESIZE_CONTROL_SELECTOR = exports.RESIZE_CONTROL_SELECTOR = 'data-resize-con
 var PAGE_LAYOUT_SLOT_SELECTOR = exports.PAGE_LAYOUT_SLOT_SELECTOR = 'data-ds--page-layout--slot';
 var DEFAULT_I18N_PROPS_SKIP_LINKS = exports.DEFAULT_I18N_PROPS_SKIP_LINKS = 'Skip to:';
 var PAGE_LAYOUT_CONTAINER_SELECTOR = exports.PAGE_LAYOUT_CONTAINER_SELECTOR = 'data-layout-container';
+
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 var LEFT_PANEL_WIDTH = exports.LEFT_PANEL_WIDTH = "var(--".concat(VAR_LEFT_PANEL_WIDTH, ", 0px)");
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 var RIGHT_PANEL_WIDTH = exports.RIGHT_PANEL_WIDTH = "var(--".concat(VAR_RIGHT_PANEL_WIDTH, ", 0px)");
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 var LEFT_SIDEBAR_WIDTH = exports.LEFT_SIDEBAR_WIDTH = "var(--".concat(VAR_LEFT_SIDEBAR_WIDTH, ", 0px)");
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 var RIGHT_SIDEBAR_WIDTH = exports.RIGHT_SIDEBAR_WIDTH = "var(--".concat(VAR_RIGHT_SIDEBAR_WIDTH, ", 0px)");
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 var TOP_NAVIGATION_HEIGHT = exports.TOP_NAVIGATION_HEIGHT = "var(--".concat(VAR_TOP_NAVIGATION_HEIGHT, ", 0px)");
+/**
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 var BANNER_HEIGHT = exports.BANNER_HEIGHT = "var(--".concat(VAR_BANNER_HEIGHT, ", 0px)");
 var LEFT_SIDEBAR_FLYOUT_WIDTH = exports.LEFT_SIDEBAR_FLYOUT_WIDTH = "var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px)");

package/dist/cjs/common/get-grid-state-from-storage.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGridStateFromStorage = void 0;
+var _constants = require("./constants");
+var _safeLocalStorage = _interopRequireDefault(require("./safe-local-storage"));
+var getGridStateFromStorage = exports.getGridStateFromStorage = function getGridStateFromStorage(key) {
+  var storageValue = JSON.parse((0, _safeLocalStorage.default)().getItem(_constants.PAGE_LAYOUT_LS_KEY) || '{}');
+  return storageValue[key];
+};

package/dist/cjs/common/get-left-panel-width.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLeftPanelWidth = void 0;
+var _constants = require("./constants");
+var getLeftPanelWidth = exports.getLeftPanelWidth = function getLeftPanelWidth() {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+  return parseInt(window.getComputedStyle(document.documentElement).getPropertyValue("--".concat(_constants.LEFT_PANEL_WIDTH)), 10) || 0;
+};

package/dist/cjs/common/get-left-sidebar-percentage.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLeftSidebarPercentage = void 0;
+var _constants = require("./constants");
+var getLeftSidebarPercentage = exports.getLeftSidebarPercentage = function getLeftSidebarPercentage(currentWidth, maxWidth) {
+  var total = (currentWidth - _constants.DEFAULT_LEFT_SIDEBAR_WIDTH) / (maxWidth - _constants.DEFAULT_LEFT_SIDEBAR_WIDTH);
+  if (total < 0) {
+    return 0;
+  }
+  if (total > 1) {
+    return 100;
+  }
+  return Math.floor(total * 100);
+};

package/dist/cjs/common/get-page-layout-slot-css-selector.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPageLayoutSlotCSSSelector = void 0;
+var _constants = require("./constants");
+var getPageLayoutSlotCSSSelector = exports.getPageLayoutSlotCSSSelector = function getPageLayoutSlotCSSSelector(slotName) {
+  return "[".concat(_constants.PAGE_LAYOUT_SLOT_SELECTOR, "='").concat(slotName, "']");
+};

package/dist/cjs/common/get-page-layout-slot-selector.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPageLayoutSlotSelector = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _constants = require("./constants");
+var getPageLayoutSlotSelector = exports.getPageLayoutSlotSelector = function getPageLayoutSlotSelector(slotName) {
+  return (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_SLOT_SELECTOR, slotName);
+};

package/dist/cjs/common/merge-grid-state-into-storage.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeGridStateIntoStorage = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _constants = require("./constants");
+var _safeLocalStorage = _interopRequireDefault(require("./safe-local-storage"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var mergeGridStateIntoStorage = exports.mergeGridStateIntoStorage = function mergeGridStateIntoStorage(key, value) {
+  var storageValue = JSON.parse((0, _safeLocalStorage.default)().getItem(_constants.PAGE_LAYOUT_LS_KEY) || '{}');
+  if (value !== null && (0, _typeof2.default)(value) === 'object') {
+    storageValue[key] = _objectSpread(_objectSpread({}, storageValue[key]), value);
+  } else {
+    storageValue[key] = value;
+  }
+  (0, _safeLocalStorage.default)().setItem(_constants.PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
+};

package/dist/cjs/common/remove-from-grid-state-in-storage.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeFromGridStateInStorage = void 0;
+var _constants = require("./constants");
+var _safeLocalStorage = _interopRequireDefault(require("./safe-local-storage"));
+var removeFromGridStateInStorage = exports.removeFromGridStateInStorage = function removeFromGridStateInStorage(key, secondKey) {
+  var storageValue = JSON.parse((0, _safeLocalStorage.default)().getItem(_constants.PAGE_LAYOUT_LS_KEY) || '{}');
+  if (secondKey && storageValue[key]) {
+    delete storageValue[key][secondKey];
+  } else {
+    delete storageValue[key];
+  }
+  (0, _safeLocalStorage.default)().setItem(_constants.PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
+};

package/dist/cjs/common/resolve-dimension.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveDimension = void 0;
+var _getGridStateFromStorage = require("./get-grid-state-from-storage");
+var resolveDimension = exports.resolveDimension = function resolveDimension(key) {
+  var dimension = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var shouldPersist = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (shouldPersist) {
+    var cachedGridState = (0, _getGridStateFromStorage.getGridStateFromStorage)('gridState');
+    return cachedGridState && Object.keys(cachedGridState).length > 0 && cachedGridState[key] ? cachedGridState[key] : dimension;
+  }
+  return dimension;
+};

package/dist/cjs/components/resize-control/index.js

@@ -14,7 +14,8 @@ var _bindEventListener = require("bind-event-listener");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("../../common/constants");
-var _utils = require("../../common/utils");
+var _getLeftPanelWidth = require("../../common/get-left-panel-width");
+var _getLeftSidebarPercentage = require("../../common/get-left-sidebar-percentage");
 var _sidebarResizeContext = require("../../controllers/sidebar-resize-context");
 var _grabArea = _interopRequireDefault(require("./grab-area"));
 var _resizeButton = _interopRequireDefault(require("./resize-button"));
@@ -121,7 +122,7 @@ var ResizeControl = function ResizeControl(_ref) {
       // the resize will be cancelled by our global event listeners
       return;
     }
-    offset.current = event.clientX - leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH] - (0, _utils.getLeftPanelWidth)();
+    offset.current = event.clientX - leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH] - (0, _getLeftPanelWidth.getLeftPanelWidth)();
     unbindEvents.current = (0, _bindEventListener.bindAll)(window, [{
       type: 'mousemove',
       listener: function listener(event) {
@@ -207,7 +208,7 @@ var ResizeControl = function ResizeControl(_ref) {
         var clientX = _ref2.clientX;
         // Allow the sidebar to be 50% of the available page width
         var maxWidth = Math.round(window.innerWidth / 2);
-        var leftPanelWidth = (0, _utils.getLeftPanelWidth)();
+        var leftPanelWidth = (0, _getLeftPanelWidth.getLeftPanelWidth)();
         var leftSidebarWidth = stableSidebarState.current.leftSidebarWidth;
         var hasResizedOffLeftOfScreen = clientX < 0;
         if (hasResizedOffLeftOfScreen) {
@@ -293,7 +294,7 @@ var ResizeControl = function ResizeControl(_ref) {
       var step = 10;
       var stepValue = isLeftOrTopArrow ? -step : step;
       var leftSidebarWidth = leftSidebarState.leftSidebarWidth;
-      var maxWidth = Math.round(window.innerWidth / 2) - (0, _utils.getLeftPanelWidth)();
+      var maxWidth = Math.round(window.innerWidth / 2) - (0, _getLeftPanelWidth.getLeftPanelWidth)();
       var hasModifierKey = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
       var width = leftSidebarWidth + stepValue;
       if (width <= _constants.DEFAULT_LEFT_SIDEBAR_WIDTH) {
@@ -341,9 +342,9 @@ var ResizeControl = function ResizeControl(_ref) {
   // however this comes with a substantial performance gain and so is considered acceptable.
   var maxAriaWidth = (0, _react.useMemo)(function () {
     var innerWidth = typeof window === 'undefined' ? 0 : window.innerWidth;
-    return Math.round(innerWidth / 2) - (0, _utils.getLeftPanelWidth)();
+    return Math.round(innerWidth / 2) - (0, _getLeftPanelWidth.getLeftPanelWidth)();
   }, []);
-  var leftSidebarPercentageExpanded = (0, _utils.getLeftSidebarPercentage)(leftSidebarState.leftSidebarWidth, maxAriaWidth);
+  var leftSidebarPercentageExpanded = (0, _getLeftSidebarPercentage.getLeftSidebarPercentage)(leftSidebarState.leftSidebarWidth, maxAriaWidth);
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), (0, _react2.jsx)(_shadow.default, {

package/dist/cjs/components/skip-links/skip-link-components.js

@@ -1,182 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SkipLinkWrapper = exports.SkipLink = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
-var _link = _interopRequireDefault(require("@atlaskit/link"));
-var _motion = require("@atlaskit/motion");
-var _constants = require("../../common/constants");
-var _controllers = require("../../controllers");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */ /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
-var skipLinkStyles = (0, _react.css)({
-  margin: "var(--ds-space-250, 20px)",
-  padding: '0.8rem 1rem',
-  position: 'fixed',
-  zIndex: -1,
-  background: "var(--ds-surface-overlay, #FFFFFF)",
-  border: 'none',
-  borderRadius: "var(--ds-radius-small, 3px)",
-  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
-  insetInlineStart: -999999,
-  opacity: 0,
-  transform: 'translateY(-50%)',
-  transition: "transform 0.3s ".concat(_motion.easeOut),
-  '&:focus-within': {
-    zIndex: 2147483640,
-    insetInlineStart: 0,
-    opacity: 1,
-    transform: 'translateY(0%)'
+Object.defineProperty(exports, "SkipLink", {
+  enumerable: true,
+  get: function get() {
+    return _skipLink.SkipLink;
   }
 });
-var skipLinkHeadingStyles = (0, _react.css)({
-  fontWeight: "var(--ds-font-weight-semibold, 600)"
-});
-var skipLinkListStyles = (0, _react.css)({
-  listStylePosition: 'outside',
-  listStyleType: 'none',
-  marginBlockStart: "var(--ds-space-050, 4px)",
-  paddingInlineStart: 0
-});
-var skipLinkListItemStyles = (0, _react.css)({
-  marginBlockStart: 0
-});
-var _assignIndex = function assignIndex(num, arr) {
-  if (!arr.includes(num)) {
-    return num;
-  }
-  return _assignIndex(num + 1, arr);
-};
-
-/**
- * The default label will be used when the `skipLinksLabel` attribute is not
- * provided or the attribute is an empty string. If a string comprised only of
- * spaces is provided, the skip link heading element will be removed, but the
- * default label will still be used in `title` attribute of the skip links
- * themselves.
- */
-var SkipLinkWrapper = exports.SkipLinkWrapper = function SkipLinkWrapper(_ref) {
-  var skipLinksLabel = _ref.skipLinksLabel;
-  var _useSkipLinks = (0, _controllers.useSkipLinks)(),
-    skipLinksData = _useSkipLinks.skipLinksData;
-  if (skipLinksData.length === 0) {
-    return null;
+Object.defineProperty(exports, "SkipLinkWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _skipLinkWrapper.SkipLinkWrapper;
   }
-  var sortSkipLinks = function sortSkipLinks(arr) {
-    var customLinks = arr.filter(function (link) {
-      return Number.isInteger(link.listIndex);
-    });
-    if (customLinks.length === 0) {
-      return arr;
-    }
-    var usedIndexes = customLinks.map(function (a) {
-      return a.listIndex;
-    });
-    var regularLinksWithIdx = arr.filter(function (link) {
-      return link.listIndex === undefined;
-    }).map(function (link, idx) {
-      var listIndex = _assignIndex(idx, usedIndexes);
-      usedIndexes.push(listIndex);
-      return _objectSpread(_objectSpread({}, link), {}, {
-        listIndex: listIndex
-      });
-    });
-    return [].concat((0, _toConsumableArray2.default)(customLinks), (0, _toConsumableArray2.default)(regularLinksWithIdx)).sort(function (a, b) {
-      return a.listIndex - b.listIndex;
-    });
-  };
-  var escapeHandler = function escapeHandler(event) {
-    if (event.keyCode === 27) {
-      var container = document.querySelector("[".concat(_constants.PAGE_LAYOUT_CONTAINER_SELECTOR, "=\"true\"]") // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-      );
-      if (container !== null) {
-        container.focus();
-      }
-    }
-  };
-  var attachEscHandler = function attachEscHandler() {
-    return window.addEventListener('keydown', escapeHandler, false);
-  };
-  var removeEscHandler = function removeEscHandler() {
-    return window.removeEventListener('keydown', escapeHandler, false);
-  };
-  var emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
-  var label = skipLinksLabel || _constants.DEFAULT_I18N_PROPS_SKIP_LINKS;
-  return (0, _react.jsx)("div", {
-    onFocus: attachEscHandler,
-    onBlur: removeEscHandler,
-    css: [skipLinkStyles, prefersReducedMotionStyles],
-    "data-skip-link-wrapper": true
-  }, emptyLabelOverride ? null : (0, _react.jsx)("p", {
-    css: skipLinkHeadingStyles
-  }, label), (0, _react.jsx)("ol", {
-    css: skipLinkListStyles
-  }, sortSkipLinks(skipLinksData).map(function (_ref2) {
-    var id = _ref2.id,
-      skipLinkTitle = _ref2.skipLinkTitle;
-    return (0, _react.jsx)(SkipLink, {
-      key: id,
-      href: "#".concat(id),
-      isFocusable: true
-    }, skipLinkTitle);
-  })));
-};
-var _handleBlur = function handleBlur(event) {
-  // @ts-ignore
-  event.target.removeAttribute('tabindex');
-  // @ts-ignore
-  event.target.removeEventListener('blur', _handleBlur);
-};
-var focusTargetRef = function focusTargetRef(href) {
-  return function (event) {
-    event.preventDefault();
-    var targetRef = document.querySelector(href);
-
-    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-    // @ts-ignore
-    var key = event.which || event.keycode;
-    // if it is a keypress and the key is not
-    // space or enter, just ignore it.
-    if (key && key !== 13 && key !== 32) {
-      return;
-    }
-    if (targetRef) {
-      targetRef.setAttribute('tabindex', '-1');
-      // @ts-ignore
-      targetRef.addEventListener('blur', _handleBlur);
-      // @ts-ignore
-      targetRef.focus();
-      document.activeElement && document.activeElement.scrollIntoView({
-        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-        behavior: 'smooth'
-        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-      });
-      window.scrollTo(0, 0);
-    }
-    return false;
-  };
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-var SkipLink = exports.SkipLink = function SkipLink(_ref3) {
-  var href = _ref3.href,
-    children = _ref3.children,
-    isFocusable = _ref3.isFocusable;
-  return (0, _react.jsx)("li", {
-    css: skipLinkListItemStyles
-  }, (0, _react.jsx)(_link.default, {
-    tabIndex: isFocusable ? 0 : -1,
-    href: href,
-    onClick: focusTargetRef(href)
-  }, children));
-};
+});
+var _skipLinkWrapper = require("./skip-link-wrapper");
+var _skipLink = require("./skip-link");

package/dist/cjs/components/skip-links/skip-link-wrapper.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkipLinkWrapper = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _motion = require("@atlaskit/motion");
+var _constants = require("../../common/constants");
+var _controllers = require("../../controllers");
+var _skipLink = require("./skip-link");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */ /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
+var skipLinkStyles = (0, _react.css)({
+  margin: "var(--ds-space-250, 20px)",
+  padding: '0.8rem 1rem',
+  position: 'fixed',
+  zIndex: -1,
+  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
+  border: 'none',
+  borderRadius: "var(--ds-radius-small, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
+  insetInlineStart: -999999,
+  opacity: 0,
+  transform: 'translateY(-50%)',
+  transition: "transform 0.3s ".concat(_motion.easeOut),
+  '&:focus-within': {
+    zIndex: 2147483640,
+    insetInlineStart: 0,
+    opacity: 1,
+    transform: 'translateY(0%)'
+  }
+});
+var skipLinkHeadingStyles = (0, _react.css)({
+  fontWeight: "var(--ds-font-weight-semibold, 600)"
+});
+var skipLinkListStyles = (0, _react.css)({
+  listStylePosition: 'outside',
+  listStyleType: 'none',
+  marginBlockStart: "var(--ds-space-050, 4px)",
+  paddingInlineStart: 0
+});
+var _assignIndex = function assignIndex(num, arr) {
+  if (!arr.includes(num)) {
+    return num;
+  }
+  return _assignIndex(num + 1, arr);
+};
+
+/**
+ * The default label will be used when the `skipLinksLabel` attribute is not
+ * provided or the attribute is an empty string. If a string comprised only of
+ * spaces is provided, the skip link heading element will be removed, but the
+ * default label will still be used in `title` attribute of the skip links
+ * themselves.
+ */
+var SkipLinkWrapper = exports.SkipLinkWrapper = function SkipLinkWrapper(_ref) {
+  var skipLinksLabel = _ref.skipLinksLabel;
+  var _useSkipLinks = (0, _controllers.useSkipLinks)(),
+    skipLinksData = _useSkipLinks.skipLinksData;
+  if (skipLinksData.length === 0) {
+    return null;
+  }
+  var sortSkipLinks = function sortSkipLinks(arr) {
+    var customLinks = arr.filter(function (link) {
+      return Number.isInteger(link.listIndex);
+    });
+    if (customLinks.length === 0) {
+      return arr;
+    }
+    var usedIndexes = customLinks.map(function (a) {
+      return a.listIndex;
+    });
+    var regularLinksWithIdx = arr.filter(function (link) {
+      return link.listIndex === undefined;
+    }).map(function (link, idx) {
+      var listIndex = _assignIndex(idx, usedIndexes);
+      usedIndexes.push(listIndex);
+      return _objectSpread(_objectSpread({}, link), {}, {
+        listIndex: listIndex
+      });
+    });
+    return [].concat((0, _toConsumableArray2.default)(customLinks), (0, _toConsumableArray2.default)(regularLinksWithIdx)).sort(function (a, b) {
+      return a.listIndex - b.listIndex;
+    });
+  };
+  var escapeHandler = function escapeHandler(event) {
+    if (event.keyCode === 27) {
+      var container = document.querySelector("[".concat(_constants.PAGE_LAYOUT_CONTAINER_SELECTOR, "=\"true\"]") // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+      );
+      if (container !== null) {
+        container.focus();
+      }
+    }
+  };
+  var attachEscHandler = function attachEscHandler() {
+    return window.addEventListener('keydown', escapeHandler, false);
+  };
+  var removeEscHandler = function removeEscHandler() {
+    return window.removeEventListener('keydown', escapeHandler, false);
+  };
+  var emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
+  var label = skipLinksLabel || _constants.DEFAULT_I18N_PROPS_SKIP_LINKS;
+  return (0, _react.jsx)("div", {
+    onFocus: attachEscHandler,
+    onBlur: removeEscHandler,
+    css: [skipLinkStyles, prefersReducedMotionStyles],
+    "data-skip-link-wrapper": true
+  }, emptyLabelOverride ? null : (0, _react.jsx)("p", {
+    css: skipLinkHeadingStyles
+  }, label), (0, _react.jsx)("ol", {
+    css: skipLinkListStyles
+  }, sortSkipLinks(skipLinksData).map(function (_ref2) {
+    var id = _ref2.id,
+      skipLinkTitle = _ref2.skipLinkTitle;
+    return (0, _react.jsx)(_skipLink.SkipLink, {
+      key: id,
+      href: "#".concat(id),
+      isFocusable: true
+    }, skipLinkTitle);
+  })));
+};

package/dist/cjs/components/skip-links/skip-link.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkipLink = void 0;
+var _react = require("@emotion/react");
+var _link = _interopRequireDefault(require("@atlaskit/link"));
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+var skipLinkListItemStyles = (0, _react.css)({
+  marginBlockStart: 0
+});
+var focusTargetRef = function focusTargetRef(href) {
+  return function (event) {
+    event.preventDefault();
+    var targetRef = document.querySelector(href);
+
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+    // @ts-ignore
+    var key = event.which || event.keycode;
+    // if it is a keypress and the key is not
+    // space or enter, just ignore it.
+    if (key && key !== 13 && key !== 32) {
+      return;
+    }
+    if (targetRef) {
+      targetRef.setAttribute('tabindex', '-1');
+      // @ts-ignore
+      targetRef.addEventListener('blur', handleBlur);
+      // @ts-ignore
+      targetRef.focus();
+      document.activeElement && document.activeElement.scrollIntoView({
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        behavior: 'smooth'
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+      });
+      window.scrollTo(0, 0);
+    }
+    return false;
+  };
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var SkipLink = exports.SkipLink = function SkipLink(_ref) {
+  var href = _ref.href,
+    children = _ref.children,
+    isFocusable = _ref.isFocusable;
+  return (0, _react.jsx)("li", {
+    css: skipLinkListItemStyles
+  }, (0, _react.jsx)(_link.default, {
+    tabIndex: isFocusable ? 0 : -1,
+    href: href,
+    onClick: focusTargetRef(href)
+  }, children));
+};

package/dist/cjs/components/skip-links/use-custom-skip-link.js

@@ -11,6 +11,11 @@ var _controllers = require("../../controllers");
  * @jsx jsx
  */
 
+/**
+ * __useCustomSkipLink__
+ *
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
+ */
 var useCustomSkipLink = exports.useCustomSkipLink = function useCustomSkipLink(id, skipLinkTitle) {
   var listIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var _useSkipLinks = (0, _controllers.useSkipLinks)(),