@carbon/react/es/components/UIShell/Link.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 PropTypes from 'prop-types';
import React from 'react';
import { deprecate } from '../../prop-types/deprecate.js';

// First define the component without generics

const LinkBase = ({
  element,
  as: BaseComponent,
  // Captured here to prevent it from being passed into the created element.
  // See https://github.com/carbon-design-system/carbon/issues/3970
  isSideNavExpanded: _isSideNavExpanded,
  ...rest
}, ref) => {
  const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
    ref: ref
  }, rest));
};

// Use forwardRef with the non-generic function
const Link = /*#__PURE__*/React.forwardRef(LinkBase);

/**
 * Link is a custom component that allows us to supporting rendering elements
 * other than `a` in our markup. The goal is to allow users to support passing
 * in their own components to support use-cases like `react-router` or
 * `@reach/router`
 */

const LinkPropTypes = {
  /**
   * Provide a custom element or component to render the top-level node for the
   * component.
   */
  as: PropTypes.elementType,
  /**
   * The base element to use to build the link. Defaults to `a`, can also accept
   * alternative tag names or custom components like `Link` from `react-router`.
   * @deprecated Use `as` instead
   *
   */
  element: deprecate(PropTypes.elementType, 'The `element` prop for `Link` has been deprecated. Please use `as` ' + 'instead. This will be removed in the next major release.'),
  /**
   * 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
};
Link.displayName = 'Link';
Link.propTypes = LinkPropTypes;

export { LinkPropTypes, Link as default };