@carbon/react/lib/components/UIShell/SideNavLink.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var Link = require('./Link.js');
var SideNavIcon = require('./SideNavIcon.js');
var SideNavItem = require('./SideNavItem.js');
var SideNavLinkText = require('./SideNavLinkText.js');
var usePrefix = require('../../internal/usePrefix.js');
var SideNav = require('./SideNav.js');

// First define a non-generic base component to work with forwardRef

const frFn = React.forwardRef;
const SideNavLink = frFn((props, ref) => {
  const {
    children,
    className: customClassName,
    renderIcon: IconElement,
    isActive,
    isSideNavExpanded,
    large = false,
    tabIndex,
    ...rest
  } = props;
  const isRail = React.useContext(SideNav.SideNavContext);
  const prefix = usePrefix.usePrefix();
  const className = cx({
    [`${prefix}--side-nav__link`]: true,
    [`${prefix}--side-nav__link--current`]: isActive,
    [customClassName]: !!customClassName
  });
  return /*#__PURE__*/React.createElement(SideNavItem.default, {
    large: large
  }, /*#__PURE__*/React.createElement(Link.default, _rollupPluginBabelHelpers.extends({}, rest, {
    className: className,
    ref: ref,
    tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
  }), IconElement && /*#__PURE__*/React.createElement(SideNavIcon.default, {
    small: true
  }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(SideNavLinkText.default, null, children)));
  // Cast preserves the generic call signature for consumers after forwardRef.
});
SideNavLink.displayName = 'SideNavLink';
SideNavLink.propTypes = {
  ...Link.LinkPropTypes,
  /**
   * Specify the text content for the link
   */
  children: PropTypes.node.isRequired,
  /**
   * Provide an optional class to be applied to the containing node
   */
  className: PropTypes.string,
  /**
   * Specify whether the link is the current page
   */
  isActive: PropTypes.bool,
  /**
   * Property to indicate if the side nav container is open (or not). Use to
   * keep local state and styling in step with the SideNav expansion state.
   */
  isSideNavExpanded: PropTypes.bool,
  /**
   * Specify if this is a large variation of the SideNavLink
   */
  large: PropTypes.bool,
  /**
   * A component used to render an icon.
   */
  // @ts-expect-error - PropTypes are unable to cover this case.
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  /**
   * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
   */
  tabIndex: PropTypes.number
};

exports.default = SideNavLink;