import _extends from "@babel/runtime/helpers/esm/extends"; import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; var _excluded = ["as", "disabled", "onKeyDown"]; import React from 'react'; import createChainedFunction from './createChainedFunction'; function isTrivialHref(href) { return !href || href.trim() === '#'; } /** * There are situations due to browser quirks or Bootstrap CSS where * an anchor tag is needed, when semantically a button tag is the * better choice. SafeAnchor ensures that when an anchor is used like a * button its accessible. It also emulates input `disabled` behavior for * links, which is usually desirable for Buttons, NavItems, DropdownItems, etc. */ var SafeAnchor = /*#__PURE__*/React.forwardRef(function (_ref, ref) { var _ref$as = _ref.as, Component = _ref$as === void 0 ? 'a' : _ref$as, disabled = _ref.disabled, onKeyDown = _ref.onKeyDown, props = _objectWithoutPropertiesLoose(_ref, _excluded); var handleClick = function handleClick(event) { var href = props.href, onClick = props.onClick; if (disabled || isTrivialHref(href)) { event.preventDefault(); } if (disabled) { event.stopPropagation(); return; } if (onClick) { onClick(event); } }; var handleKeyDown = function handleKeyDown(event) { if (event.key === ' ') { event.preventDefault(); handleClick(event); } }; if (isTrivialHref(props.href)) { props.role = props.role || 'button'; // we want to make sure there is a href attribute on the node // otherwise, the cursor incorrectly styled (except with role='button') props.href = props.href || '#'; } if (disabled) { props.tabIndex = -1; props['aria-disabled'] = true; } return /*#__PURE__*/React.createElement(Component, _extends({ ref: ref }, props, { onClick: handleClick, onKeyDown: createChainedFunction(handleKeyDown, onKeyDown) })); }); SafeAnchor.displayName = 'SafeAnchor'; export default SafeAnchor;