@procore/core-react/dist/AnchorNavigation/AnchorNavigation.js

React library of Procore Design Guidelines

import React from 'react';
import { useI18nContext } from '../_hooks/I18n';
import { StyledAnchor, StyledAnchorNavigation, StyledAnchorNavigationLandmark, StyledAnchorSection } from './AnchorNavigation.styles';
var Anchor = function Anchor(_ref) {
  var label = _ref.label,
    selected = _ref.selected,
    onClick = _ref.onClick;
  var handleKeyDown = function handleKeyDown(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      onClick();
    }
  };
  return /*#__PURE__*/React.createElement(StyledAnchorSection, {
    $selected: selected,
    onClick: onClick,
    onKeyDown: handleKeyDown
  }, /*#__PURE__*/React.createElement(StyledAnchor, {
    "aria-current": selected ? 'page' : undefined,
    $selected: selected,
    tabIndex: 0
  }, label));
};
export var AnchorNavigation = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
  var sections = _ref2.sections,
    selected = _ref2.selected,
    onSelect = _ref2.onSelect,
    ariaLabelProp = _ref2['aria-label'];
  var i18n = useI18nContext();
  var navigationAriaLabel = ariaLabelProp !== null && ariaLabelProp !== void 0 ? ariaLabelProp : i18n.t('core.anchorNavigation.landmarkLabel');
  return /*#__PURE__*/React.createElement(StyledAnchorNavigationLandmark, {
    "aria-label": navigationAriaLabel
  }, /*#__PURE__*/React.createElement(StyledAnchorNavigation, {
    ref: ref
  }, sections.map(function (_ref3) {
    var id = _ref3.id,
      label = _ref3.label;
    return /*#__PURE__*/React.createElement(Anchor, {
      key: id,
      onClick: function onClick() {
        return onSelect(id);
      },
      selected: selected === id,
      label: label
    });
  })));
});
//# sourceMappingURL=AnchorNavigation.js.map