@carbon/react/es/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.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React, { forwardRef, useContext } from 'react';
import Link, { LinkPropTypes } from './Link.js';
import SideNavIcon from './SideNavIcon.js';
import SideNavItem from './SideNavItem.js';
import SideNavLinkText from './SideNavLinkText.js';
import { usePrefix } from '../../internal/usePrefix.js';
import { SideNavContext } from './SideNav.js';

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

const SideNavLinkBase = ({
  children,
  className: customClassName,
  renderIcon: IconElement,
  isActive,
  isSideNavExpanded,
  large = false,
  tabIndex,
  ...rest
}, ref) => {
  const isRail = useContext(SideNavContext);
  const prefix = usePrefix();
  const className = cx({
    [`${prefix}--side-nav__link`]: true,
    [`${prefix}--side-nav__link--current`]: isActive,
    [customClassName]: !!customClassName
  });
  return /*#__PURE__*/React.createElement(SideNavItem, {
    large: large
  }, /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
    className: className,
    ref: ref,
    tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
  }), IconElement && /*#__PURE__*/React.createElement(SideNavIcon, {
    small: true
  }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
};

// Use forwardRef with the non-generic function and cast to the generic component type
const SideNavLink = /*#__PURE__*/forwardRef(SideNavLinkBase);
SideNavLink.displayName = 'SideNavLink';
SideNavLink.propTypes = {
  ...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
};

export { SideNavLink as default };