@atlaskit/page-layout/dist/esm/controllers/skip-link-controller.js

A collection of components which let you compose an application's page layout.

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useRef, useState } from 'react';
import { PAGE_LAYOUT_SLOT_SELECTOR } from '../common/constants';
import { SkipLinksContext } from './skip-link-context';
var byDOMOrder = function byDOMOrder(a, b) {
  var _a$listIndex, _b$listIndex;
  var elems = Array.from(document.querySelectorAll("[".concat(PAGE_LAYOUT_SLOT_SELECTOR, "]")));
  var elemA = document.getElementById(a.id);
  var elemB = document.getElementById(b.id);
  var indexA = (_a$listIndex = a.listIndex) !== null && _a$listIndex !== void 0 ? _a$listIndex : elems.indexOf(elemA);
  var indexB = (_b$listIndex = b.listIndex) !== null && _b$listIndex !== void 0 ? _b$listIndex : elems.indexOf(elemB);

  /**
   * If they are tied it is because one (or both) is
   * a custom skiplink with a set index.
   *
   * Give the custom skiplink priority.
   */
  if (indexA === indexB) {
    if (a.listIndex !== undefined) {
      return -1;
    } else {
      return 1;
    }
  }
  return indexA - indexB;
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export var SkipLinksController = function SkipLinksController(_ref) {
  var children = _ref.children;
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    links = _useState2[0],
    setLinks = _useState2[1];
  var registerSkipLink = useRef(function (skipLinkData) {
    // Don't add duplicate SkipLinks
    setLinks(function (oldLinks) {
      if (oldLinks.some(function (_ref2) {
        var id = _ref2.id;
        return id === skipLinkData.id;
      })) {
        return oldLinks;
      }
      return [].concat(_toConsumableArray(oldLinks), [skipLinkData]).sort(byDOMOrder);
    });
  });
  var unregisterSkipLink = useRef(function (id) {
    setLinks(function (links) {
      return links.filter(function (link) {
        return link.id !== id;
      });
    });
  });
  var context = {
    registerSkipLink: registerSkipLink.current,
    skipLinksData: links,
    unregisterSkipLink: unregisterSkipLink.current
  };
  return /*#__PURE__*/React.createElement(SkipLinksContext.Provider, {
    value: context
  }, children);
};