@atlaskit/navigation-system/dist/cjs/context/skip-links/skip-links-provider.js

The latest navigation system for Atlassian apps.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SkipLinksProvider = SkipLinksProvider;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _skipLinksContainer = require("../../components/skip-links/skip-links-container");
var _skipLinksContext = require("./skip-links-context");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var getByDomOrderSortFunction = function getByDomOrderSortFunction() {
  var layoutSlots = Array.from(document.querySelectorAll("[data-layout-slot]"));
  return function (a, b) {
    var _a$listIndex, _b$listIndex;
    var indexA = (_a$listIndex = a.listIndex) !== null && _a$listIndex !== void 0 ? _a$listIndex : layoutSlots.indexOf(document.getElementById(a.id));
    var indexB = (_b$listIndex = b.listIndex) !== null && _b$listIndex !== void 0 ? _b$listIndex : layoutSlots.indexOf(document.getElementById(b.id));

    /**
     * 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;
  };
};

/**
 * Provider for skip links. Should be rendered at the top level of the application.
 *
 * - Provides the context to register/unregister skip links
 * - Renders the skip links container
 */
function SkipLinksProvider(_ref) {
  var children = _ref.children,
    label = _ref.label,
    triggerLabel = _ref.triggerLabel,
    testId = _ref.testId;
  var _useState = (0, _react.useState)([]),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    links = _useState2[0],
    setLinks = _useState2[1];
  var registerSkipLink = (0, _react.useCallback)(function (skipLinkData) {
    // Don't add duplicate skip links
    setLinks(function (oldLinks) {
      if (oldLinks.some(function (_ref2) {
        var id = _ref2.id;
        return id === skipLinkData.id;
      })) {
        if (process.env.NODE_ENV !== 'production') {
          // eslint-disable-next-line no-console
          console.warn("Tried registering duplicate skip link for ID '".concat(skipLinkData.id, "'.\n\nIf you're trying to override a slot skip link label, then use the `skipLinkLabel` prop instead.\n\nThis error will not be shown in production, and the duplicate skip link will be ignored."));
        }
        return oldLinks;
      }
      return [].concat((0, _toConsumableArray2.default)(oldLinks), [skipLinkData]).sort(getByDomOrderSortFunction());
    });
  }, []);
  var unregisterSkipLink = (0, _react.useCallback)(function (id) {
    setLinks(function (links) {
      return links.filter(function (link) {
        return link.id !== id;
      });
    });
  }, []);
  var contextValue = (0, _react.useMemo)(function () {
    var data = {
      registerSkipLink: registerSkipLink,
      unregisterSkipLink: unregisterSkipLink
    };
    return data;
  }, [registerSkipLink, unregisterSkipLink]);
  return /*#__PURE__*/_react.default.createElement(_skipLinksContext.SkipLinksContext.Provider, {
    value: contextValue
  }, /*#__PURE__*/_react.default.createElement(_skipLinksContainer.SkipLinksContainer, {
    label: label,
    triggerLabel: triggerLabel,
    testId: testId,
    links: links
  }), children);
}