@atlaskit/page-layout 1.3.7 → 1.3.9

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

@@ -1,42 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _bindEventListener = require("bind-event-listener");
-
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
-
 var _constants = require("../../common/constants");
-
 var _utils = require("../../common/utils");
-
 var _sidebarResizeContext = require("../../controllers/sidebar-resize-context");
-
 var _grabArea = _interopRequireDefault(require("./grab-area"));
-
 var _resizeButton2 = _interopRequireDefault(require("./resize-button"));
-
 var _shadow = _interopRequireDefault(require("./shadow"));
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_CONTROL_SELECTOR, true);
 var resizeControlStyles = (0, _react2.css)({
   position: 'absolute',
@@ -48,62 +31,52 @@ var resizeControlStyles = (0, _react2.css)({
 var showResizeButtonStyles = (0, _react2.css)({
   '--ds--resize-button--opacity': 1
 });
-
 var ResizeControl = function ResizeControl(_ref) {
   var testId = _ref.testId,
-      overrides = _ref.overrides,
-      _ref$resizeButtonLabe = _ref.resizeButtonLabel,
-      resizeButtonLabel = _ref$resizeButtonLabe === void 0 ? '' : _ref$resizeButtonLabe,
-      _ref$resizeGrabAreaLa = _ref.resizeGrabAreaLabel,
-      resizeGrabAreaLabel = _ref$resizeGrabAreaLa === void 0 ? 'Resize' : _ref$resizeGrabAreaLa,
-      onResizeStart = _ref.onResizeStart,
-      onResizeEnd = _ref.onResizeEnd;
-
+    overrides = _ref.overrides,
+    _ref$resizeButtonLabe = _ref.resizeButtonLabel,
+    resizeButtonLabel = _ref$resizeButtonLabe === void 0 ? '' : _ref$resizeButtonLabe,
+    _ref$resizeGrabAreaLa = _ref.resizeGrabAreaLabel,
+    resizeGrabAreaLabel = _ref$resizeGrabAreaLa === void 0 ? 'Resize' : _ref$resizeGrabAreaLa,
+    onResizeStart = _ref.onResizeStart,
+    onResizeEnd = _ref.onResizeEnd;
   var _useContext = (0, _react.useContext)(_sidebarResizeContext.SidebarResizeContext),
-      expandLeftSidebar = _useContext.expandLeftSidebar,
-      collapseLeftSidebar = _useContext.collapseLeftSidebar,
-      leftSidebarState = _useContext.leftSidebarState,
-      setLeftSidebarState = _useContext.setLeftSidebarState;
-
+    expandLeftSidebar = _useContext.expandLeftSidebar,
+    collapseLeftSidebar = _useContext.collapseLeftSidebar,
+    leftSidebarState = _useContext.leftSidebarState,
+    setLeftSidebarState = _useContext.setLeftSidebarState;
   var isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
-      isResizing = leftSidebarState.isResizing;
-  var x = (0, _react.useRef)(leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH]); // Distance of mouse from left sidebar onMouseDown
-
+    isResizing = leftSidebarState.isResizing;
+  var x = (0, _react.useRef)(leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH]);
+  // Distance of mouse from left sidebar onMouseDown
   var offset = (0, _react.useRef)(0);
   var keyboardEventTimeout = (0, _react.useRef)();
-
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isGrabAreaFocused = _useState2[0],
-      setIsGrabAreaFocused = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isGrabAreaFocused = _useState2[0],
+    setIsGrabAreaFocused = _useState2[1];
   var unbindEvents = (0, _react.useRef)(null);
-
   var toggleSideBar = function toggleSideBar(e) {
     if (isResizing) {
       return;
     }
-
     if (isLeftSidebarCollapsed) {
       expandLeftSidebar();
     } else {
       collapseLeftSidebar();
-    } // Bring focus to the resize button if the grab area is
-    // "clicked" using enter/space on keyboard.
-
+    }
 
+    // Bring focus to the resize button if the grab area is
+    // "clicked" using enter/space on keyboard.
     if (e && e.nativeEvent.detail === 0) {
       var _resizeButton = document.querySelector("[".concat(_constants.RESIZE_BUTTON_SELECTOR, "]"));
-
       _resizeButton && _resizeButton.focus();
     }
   };
-
   var onMouseDown = function onMouseDown(event) {
     if (isLeftSidebarCollapsed) {
       return;
     }
-
     offset.current = event.clientX - leftSidebarState[_constants.VAR_LEFT_SIDEBAR_WIDTH] - (0, _utils.getLeftPanelWidth)();
     unbindEvents.current = (0, _bindEventListener.bindAll)(document, [{
       type: 'mousemove',
@@ -113,18 +86,14 @@ var ResizeControl = function ResizeControl(_ref) {
       listener: onMouseUp
     }]);
     document.documentElement.setAttribute(_constants.IS_SIDEBAR_DRAGGING, 'true');
-
     var newLeftbarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, {
       isResizing: true
     });
-
     setLeftSidebarState(newLeftbarState);
     onResizeStart && onResizeStart(newLeftbarState);
   };
-
   var cancelDrag = function cancelDrag(shouldCollapse) {
     var _unbindEvents$current;
-
     onMouseMove.cancel();
     (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
     unbindEvents.current = null;
@@ -132,51 +101,44 @@ var ResizeControl = function ResizeControl(_ref) {
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
   };
-
   var onMouseMove = (0, _rafSchd.default)(function (event) {
     // Allow the sidebar to be 50% of the available page width
     var maxWidth = Math.round(window.innerWidth / 2);
     var leftPanelWidth = (0, _utils.getLeftPanelWidth)();
     var leftSidebarWidth = leftSidebarState.leftSidebarWidth;
     var invalidDrag = event.clientX < 0;
-
     if (invalidDrag) {
       cancelDrag();
     }
-
     var delta = Math.max(Math.min(event.clientX - leftSidebarWidth - leftPanelWidth, maxWidth - leftSidebarWidth - leftPanelWidth), _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH - leftSidebarWidth - leftPanelWidth);
     x.current = Math.max(leftSidebarWidth + delta - offset.current, _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH);
     document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(x.current, "px"));
   });
-
   var cleanupAfterResize = function cleanupAfterResize() {
     var _unbindEvents$current2;
-
     x.current = 0;
     offset.current = 0;
     (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
     unbindEvents.current = null;
   };
-
   var updatedLeftSidebarState = {};
-
   var onMouseUp = function onMouseUp(event) {
     if (isLeftSidebarCollapsed) {
       return;
     }
+    document.documentElement.removeAttribute(_constants.IS_SIDEBAR_DRAGGING);
 
-    document.documentElement.removeAttribute(_constants.IS_SIDEBAR_DRAGGING); // If it is dragged to below the threshold,
+    // If it is dragged to below the threshold,
     // collapse the navigation
-
     if (x.current < _constants.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
       document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px"));
       collapseLeftSidebar(undefined, true);
-    } // If it is dragged to position in between the
+    }
+    // If it is dragged to position in between the
     // min threshold and default width
     // expand the nav to the default width
     else if (x.current > _constants.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD && x.current < _constants.DEFAULT_LEFT_SIDEBAR_WIDTH) {
       var _objectSpread2;
-
       document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(_constants.DEFAULT_LEFT_SIDEBAR_WIDTH, "px"));
       updatedLeftSidebarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, (_objectSpread2 = {
         isResizing: false
@@ -184,14 +146,12 @@ var ResizeControl = function ResizeControl(_ref) {
       setLeftSidebarState(updatedLeftSidebarState);
     } else {
       var _objectSpread3;
-
       // otherwise resize it to the desired width
       updatedLeftSidebarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, (_objectSpread3 = {
         isResizing: false
       }, (0, _defineProperty2.default)(_objectSpread3, _constants.VAR_LEFT_SIDEBAR_WIDTH, x.current), (0, _defineProperty2.default)(_objectSpread3, "lastLeftSidebarWidth", x.current), _objectSpread3));
       setLeftSidebarState(updatedLeftSidebarState);
     }
-
     requestAnimationFrame(function () {
       onMouseMove.cancel();
       setIsGrabAreaFocused(false);
@@ -199,25 +159,20 @@ var ResizeControl = function ResizeControl(_ref) {
       cleanupAfterResize();
     });
   };
-
   var onKeyDown = function onKeyDown(event) {
     if (isLeftSidebarCollapsed || !isGrabAreaFocused) {
       return false;
     }
-
     var key = event.key;
     var isLeftOrTopArrow = key === 'ArrowLeft' || key === 'ArrowUp' || key === 'Left' || key === 'Up';
     var isRightOrBottomArrow = key === 'ArrowRight' || key === 'ArrowDown' || key === 'Right' || key === 'Down';
     var isSpaceOrEnter = key === 'Enter' || key === 'Spacebar' || key === ' ';
-
     if (isSpaceOrEnter) {
       toggleSideBar(event);
       event.preventDefault();
     }
-
     if (isLeftOrTopArrow || isRightOrBottomArrow) {
       event.preventDefault(); // prevent content scroll
-
       onResizeStart && onResizeStart(leftSidebarState);
       var step = 10;
       var stepValue = isLeftOrTopArrow ? -step : step;
@@ -225,7 +180,6 @@ var ResizeControl = function ResizeControl(_ref) {
       var maxWidth = Math.round(window.innerWidth / 2) - (0, _utils.getLeftPanelWidth)();
       var hasModifierKey = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
       var width = leftSidebarWidth + stepValue;
-
       if (width <= _constants.DEFAULT_LEFT_SIDEBAR_WIDTH) {
         width = _constants.DEFAULT_LEFT_SIDEBAR_WIDTH;
         document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(_constants.DEFAULT_LEFT_SIDEBAR_WIDTH - 20, "px"));
@@ -234,49 +188,44 @@ var ResizeControl = function ResizeControl(_ref) {
         document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(maxWidth + 20, "px"));
       } else if (hasModifierKey) {
         width = isRightOrBottomArrow ? maxWidth : _constants.DEFAULT_LEFT_SIDEBAR_WIDTH;
-      } // Nesting the setTimeout within requestAnimationFrame helps
-      // the browser schedule the setTimeout call in an efficient manner
-
+      }
 
+      // Nesting the setTimeout within requestAnimationFrame helps
+      // the browser schedule the setTimeout call in an efficient manner
       requestAnimationFrame(function () {
         keyboardEventTimeout.current = window.setTimeout(function () {
           var _objectSpread4;
-
           keyboardEventTimeout.current && clearTimeout(keyboardEventTimeout.current);
           document.documentElement.style.setProperty("--".concat(_constants.VAR_LEFT_SIDEBAR_WIDTH), "".concat(width, "px"));
-
           var updatedLeftSidebarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, (_objectSpread4 = {}, (0, _defineProperty2.default)(_objectSpread4, _constants.VAR_LEFT_SIDEBAR_WIDTH, width), (0, _defineProperty2.default)(_objectSpread4, "lastLeftSidebarWidth", width), _objectSpread4));
-
           setLeftSidebarState(updatedLeftSidebarState);
           onResizeEnd && onResizeEnd(updatedLeftSidebarState);
         }, 50);
       });
     }
   };
-
   var onFocus = (0, _react.useCallback)(function () {
     setIsGrabAreaFocused(true);
   }, []);
   var onBlur = (0, _react.useCallback)(function () {
     setIsGrabAreaFocused(false);
   }, []);
-
   var resizeButton = _objectSpread({
     render: function render(Component, props) {
       return (0, _react2.jsx)(Component, props);
     }
-  }, overrides && overrides.ResizeButton); // This width is calculated once only on mount.
+  }, overrides && overrides.ResizeButton);
+
+  // This width is calculated once only on mount.
   // This means resizing the window will cause this value to be incorrect for screen reader users,
   // 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)();
   }, []);
   var leftSidebarPercentageExpanded = (0, _utils.getLeftSidebarPercentage)(leftSidebarState.leftSidebarWidth, maxAriaWidth);
-  /* eslint-disable jsx-a11y/role-supports-aria-props */
 
+  /* eslint-disable jsx-a11y/role-supports-aria-props */
   return (0, _react2.jsx)("div", (0, _extends2.default)({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), (0, _react2.jsx)(_shadow.default, {
@@ -302,8 +251,8 @@ var ResizeControl = function ResizeControl(_ref) {
     testId: testId && "".concat(testId, "-resize-button")
   }));
   /* eslint-enable jsx-a11y/role-supports-aria-props */
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = ResizeControl;
 exports.default = _default;

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

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("@emotion/react");
-
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
-
 var _curves = require("@atlaskit/motion/curves");
-
 var _durations = require("@atlaskit/motion/durations");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("../../common/constants");
-
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
 var increaseHitAreaStyles = (0, _react.css)({
   position: 'absolute',
@@ -43,7 +32,6 @@ var resizeIconButtonStyles = (0, _react.css)({
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   border: 0,
   borderRadius: '50%',
-
   /**
    * TODO: https://product-fabric.atlassian.net/browse/DSP-3392
    * This shadow needs further investigation,
@@ -53,7 +41,6 @@ var resizeIconButtonStyles = (0, _react.css)({
   boxShadow: "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 4px 1px ").concat(_colors.N30A),
   color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
   cursor: 'pointer',
-
   /**
    * The fallback value of 0 ensures that the button is hidden by default,
    * unless some parent (or the button itself) overrides it.
@@ -77,36 +64,34 @@ var resizeIconButtonExpandedStyles = (0, _react.css)({
   transform: 'rotate(180deg)',
   transformOrigin: 7
 });
-
 var preventDefault = function preventDefault(event) {
   return event.preventDefault();
 };
-
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_BUTTON_SELECTOR, true);
-
 var ResizeButton = function ResizeButton(_ref) {
   var isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
-      label = _ref.label,
-      testId = _ref.testId,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    label = _ref.label,
+    testId = _ref.testId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)("button", (0, _extends2.default)({}, cssSelector, {
     // DO NOT remove. used as a CSS selector.
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
     type: "button",
     css: [resizeIconButtonStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
-    "data-testid": testId // Prevents focus staying attached to the button
+    "data-testid": testId
+    // Prevents focus staying attached to the button
     // when pressed
     ,
-    onMouseDown: preventDefault // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+    onMouseDown: preventDefault
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props), (0, _react.jsx)(_chevronRight.default, {
     label: ""
   }), (0, _react.jsx)("div", {
     css: increaseHitAreaStyles
   }));
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = ResizeButton;
 exports.default = _default;

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

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _motion = require("@atlaskit/motion");
-
 var _hooks = require("../../common/hooks");
-
 /** @jsx jsx */
+
 var colorStops = "\n    rgba(0, 0, 0, 0.2) 0px,\n    rgba(0, 0, 0, 0.2) 1px,\n    rgba(0, 0, 0, 0.1) 1px,\n    rgba(0, 0, 0, 0) 100%\n  ";
 var direction = 'to left';
 var transitionDuration = '0.22s';
@@ -34,7 +31,6 @@ var draggingStyles = (0, _react.css)({
   background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
   opacity: 0.8
 });
-
 var Shadow = function Shadow(_ref) {
   var testId = _ref.testId;
   var isDragging = (0, _hooks.useIsSidebarDragging)();
@@ -42,8 +38,8 @@ var Shadow = function Shadow(_ref) {
     "data-testid": testId,
     css: [shadowStyles, isDragging && draggingStyles]
   });
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = Shadow;
 exports.default = _default;

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

@@ -21,7 +21,5 @@ Object.defineProperty(exports, "useCustomSkipLink", {
     return _useCustomSkipLink.useCustomSkipLink;
   }
 });
-
 var _skipLinkComponents = require("./skip-link-components");
-
 var _useCustomSkipLink = require("./use-custom-skip-link");

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

@@ -1,30 +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 _motion = require("@atlaskit/motion");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("../../common/constants");
-
 var _controllers = require("../../controllers");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 var skipLinkStyles = (0, _react.css)({
@@ -38,7 +27,6 @@ var skipLinkStyles = (0, _react.css)({
   borderRadius: 3,
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 10px ").concat(_colors.N30A, ", 0 0 20px -4px ").concat(_colors.N60A), ")"),
   opacity: 0,
-
   /* Do the transform when focused */
   transform: 'translateY(-50%)',
   transition: "transform 0.3s ".concat(_motion.easeOut),
@@ -65,14 +53,13 @@ var skipLinkListStyles = (0, _react.css)({
 var skipLinkListItemStyles = (0, _react.css)({
   marginTop: 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
@@ -80,27 +67,20 @@ var assignIndex = function assignIndex(num, arr) {
  * default label will still be used in `title` attribute of the skip links
  * themselves.
  */
-
-
 var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
   var skipLinksLabel = _ref.skipLinksLabel;
-
   var _useSkipLinks = (0, _controllers.useSkipLinks)(),
-      skipLinksData = _useSkipLinks.skipLinksData;
-
+    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;
     });
@@ -117,25 +97,20 @@ var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
       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\"]"));
-
       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", {
@@ -149,7 +124,7 @@ var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     css: skipLinkListStyles
   }, sortSkipLinks(skipLinksData).map(function (_ref2) {
     var id = _ref2.id,
-        skipLinkTitle = _ref2.skipLinkTitle;
+      skipLinkTitle = _ref2.skipLinkTitle;
     return (0, _react.jsx)(SkipLink, {
       key: id,
       href: "#".concat(id),
@@ -158,50 +133,46 @@ var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     }, skipLinkTitle);
   })));
 };
-
 exports.SkipLinkWrapper = SkipLinkWrapper;
-
 var handleBlur = function handleBlur(event) {
   // @ts-ignore
-  event.target.removeAttribute('tabindex'); // @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); // @ts-ignore
+    var targetRef = document.querySelector(href);
 
-    var key = event.which || event.keycode; // if it is a keypress and the key is not
+    // @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.setAttribute('tabindex', '-1');
+      // @ts-ignore
+      targetRef.addEventListener('blur', handleBlur);
+      // @ts-ignore
       targetRef.focus();
       document.activeElement && document.activeElement.scrollIntoView({
         behavior: 'smooth'
       });
       window.scrollTo(0, 0);
     }
-
     return false;
   };
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var SkipLink = function SkipLink(_ref3) {
   var href = _ref3.href,
-      children = _ref3.children,
-      isFocusable = _ref3.isFocusable,
-      title = _ref3.title;
+    children = _ref3.children,
+    isFocusable = _ref3.isFocusable,
+    title = _ref3.title;
   return (0, _react.jsx)("li", {
     css: skipLinkListItemStyles
   }, (0, _react.jsx)("a", {
@@ -211,5 +182,4 @@ var SkipLink = function SkipLink(_ref3) {
     title: title
   }, children));
 };
-
 exports.SkipLink = SkipLink;

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

@@ -4,19 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCustomSkipLink = void 0;
-
 var _react = require("react");
-
 var _controllers = require("../../controllers");
-
 /** @jsx jsx */
+
 var useCustomSkipLink = function useCustomSkipLink(id, skipLinkTitle) {
   var listIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-
   var _useSkipLinks = (0, _controllers.useSkipLinks)(),
-      registerSkipLink = _useSkipLinks.registerSkipLink,
-      unregisterSkipLink = _useSkipLinks.unregisterSkipLink;
-
+    registerSkipLink = _useSkipLinks.registerSkipLink,
+    unregisterSkipLink = _useSkipLinks.unregisterSkipLink;
   (0, _react.useEffect)(function () {
     registerSkipLink({
       id: id,
@@ -28,5 +24,4 @@ var useCustomSkipLink = function useCustomSkipLink(id, skipLinkTitle) {
     };
   }, [id, listIndex, skipLinkTitle, registerSkipLink, unregisterSkipLink]);
 };
-
 exports.useCustomSkipLink = useCustomSkipLink;