@elastic/eui
Version:
Elastic UI Component Library
102 lines (98 loc) • 5.75 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.POSITIONS = exports.EuiSkipLink = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _tabbable = require("tabbable");
var _services = require("../../../services");
var _button = require("../../button/button");
var _screen_reader_only = require("../screen_reader_only");
var _skip_link = require("./skip_link.styles");
var _react2 = require("@emotion/react");
var _excluded = ["destinationId", "fallbackDestination", "overrideLinkBehavior", "tabIndex", "position", "children", "className", "onClick"];
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var POSITIONS = ['static', 'fixed', 'absolute'];
exports.POSITIONS = POSITIONS;
var EuiSkipLink = function EuiSkipLink(_ref) {
var destinationId = _ref.destinationId,
_ref$fallbackDestinat = _ref.fallbackDestination,
fallbackDestination = _ref$fallbackDestinat === void 0 ? 'main' : _ref$fallbackDestinat,
overrideLinkBehavior = _ref.overrideLinkBehavior,
tabIndex = _ref.tabIndex,
_ref$position = _ref.position,
position = _ref$position === void 0 ? 'static' : _ref$position,
children = _ref.children,
className = _ref.className,
_onClick = _ref.onClick,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var euiTheme = (0, _services.useEuiTheme)();
var styles = (0, _skip_link.euiSkipLinkStyles)(euiTheme);
var classes = (0, _classnames.default)('euiSkipLink', className);
var cssStyles = [styles.euiSkipLink, position !== 'static' ? styles[position] : undefined];
var onClick = (0, _react.useCallback)(function (e) {
var destinationEl = null;
// Check if the destination ID is valid
destinationEl = document.getElementById(destinationId);
var hasValidId = !!destinationEl;
// Check the fallback destination if not
if (!destinationEl && fallbackDestination) {
if (Array.isArray(fallbackDestination)) {
for (var i = 0; i < fallbackDestination.length; i++) {
destinationEl = document.querySelector(fallbackDestination[i]);
if (destinationEl) break; // Stop once the first fallback has been found
}
} else {
destinationEl = document.querySelector(fallbackDestination);
}
}
if ((overrideLinkBehavior || !hasValidId) && destinationEl) {
e.preventDefault();
// Scroll to the top of the destination content only if it's ~mostly out of view
var destinationY = destinationEl.getBoundingClientRect().top;
var halfOfViewportHeight = window.innerHeight / 2;
if (destinationY >= halfOfViewportHeight || window.scrollY >= destinationY + halfOfViewportHeight) {
destinationEl.scrollIntoView();
}
// Ensure the destination content is focusable
if (!(0, _tabbable.isTabbable)(destinationEl)) {
destinationEl.tabIndex = -1;
destinationEl.addEventListener('blur', function () {
var _destinationEl;
return (_destinationEl = destinationEl) === null || _destinationEl === void 0 ? void 0 : _destinationEl.removeAttribute('tabindex');
}, {
once: true
});
}
destinationEl.focus({
preventScroll: true
}); // Scrolling is already handled above, and focus autoscroll behaves oddly on Chrome around fixed headers
}
_onClick === null || _onClick === void 0 ? void 0 : _onClick(e);
}, [overrideLinkBehavior, destinationId, fallbackDestination, _onClick]);
return (0, _react2.jsx)(_screen_reader_only.EuiScreenReaderOnly, {
showOnFocus: true
}, (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
css: cssStyles,
className: classes,
tabIndex: position === 'fixed' ? 0 : tabIndex,
size: "s",
fill: true,
href: "#".concat(destinationId),
onClick: onClick
}, rest), children));
};
exports.EuiSkipLink = EuiSkipLink;