@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');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

// 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 = React.useContext(SideNav.SideNavContext);
  const prefix = usePrefix.usePrefix();
  const className = cx__default["default"]({
    [`${prefix}--side-nav__link`]: true,
    [`${prefix}--side-nav__link--current`]: isActive,
    [customClassName]: !!customClassName
  });
  return /*#__PURE__*/React__default["default"].createElement(SideNavItem["default"], {
    large: large
  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
    className: className,
    ref: ref,
    tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
  }), IconElement && /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
    small: true
  }, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(SideNavLinkText["default"], null, children)));
};

// Use forwardRef with the non-generic function and cast to the generic component type
const SideNavLink = /*#__PURE__*/React.forwardRef(SideNavLinkBase);
SideNavLink.displayName = 'SideNavLink';
SideNavLink.propTypes = {
  ...Link.LinkPropTypes,
  /**
   * Specify the text content for the link
   */
  children: PropTypes__default["default"].node.isRequired,
  /**
   * Provide an optional class to be applied to the containing node
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify whether the link is the current page
   */
  isActive: PropTypes__default["default"].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__default["default"].bool,
  /**
   * Specify if this is a large variation of the SideNavLink
   */
  large: PropTypes__default["default"].bool,
  /**
   * A component used to render an icon.
   */
  // @ts-expect-error - PropTypes are unable to cover this case.
  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
  /**
   * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
   */
  tabIndex: PropTypes__default["default"].number
};

exports["default"] = SideNavLink;