@carbon/react/lib/components/UIShell/SwitcherItem.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 React = require('react');
var cx = require('classnames');
var PropTypes = require('prop-types');
var Link = require('./Link.js');
var usePrefix = require('../../internal/usePrefix.js');
var keys = require('../../internal/keyboard/keys.js');
var match = require('../../internal/keyboard/match.js');
var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');

const SwitcherItem = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
  const {
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledBy,
    className: customClassName,
    children,
    isSelected,
    expanded,
    tabIndex = expanded ? 0 : -1,
    index,
    handleSwitcherItemFocus,
    onKeyDown = () => {},
    href,
    target,
    rel,
    ...rest
  } = props;
  const prefix = usePrefix.usePrefix();
  const classNames = cx(`${prefix}--switcher__item`, {
    [customClassName || '']: !!customClassName
  });
  const accessibilityLabel = {
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledBy
  };
  const linkClassName = cx(`${prefix}--switcher__item-link`, {
    [`${prefix}--switcher__item-link--selected`]: isSelected
  });
  function setTabFocus(evt) {
    if (match.match(evt, keys.ArrowDown)) {
      evt.preventDefault();
      handleSwitcherItemFocus?.({
        currentIndex: index || -1,
        direction: 1
      });
    }
    if (match.match(evt, keys.ArrowUp)) {
      evt.preventDefault();
      handleSwitcherItemFocus?.({
        currentIndex: index || -1,
        direction: -1
      });
    }
  }
  return /*#__PURE__*/React.createElement("li", {
    className: classNames
  }, /*#__PURE__*/React.createElement(Link.default, _rollupPluginBabelHelpers.extends({
    onKeyDown: evt => {
      setTabFocus(evt);
      onKeyDown(evt);
    },
    href: href,
    target: target,
    rel: rel
    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
    ,
    ref: forwardRef
  }, rest, {
    className: linkClassName,
    tabIndex: tabIndex
  }, accessibilityLabel), children));
});
SwitcherItem.displayName = 'SwitcherItem';
SwitcherItem.propTypes = {
  ...AriaPropTypes.AriaLabelPropType,
  /**
   * Specify the text content for the link
   */
  children: PropTypes.node.isRequired,
  /**
   * Optionally provide a custom class to apply to the underlying `<li>` node
   */
  className: PropTypes.string,
  /**
   * event handlers
   */
  handleSwitcherItemFocus: PropTypes.func,
  /**
   * Optionally provide an href for the underlying li`
   */
  href: PropTypes.string,
  /**
   * Specify the index of the SwitcherItem
   */
  index: PropTypes.number,
  /**
   * event handlers
   */
  onClick: PropTypes.func,
  /**
   * event handlers
   */
  onKeyDown: PropTypes.func,
  /**
   * Specify the tab index of the Link
   */
  tabIndex: PropTypes.number,
  /**
   * Specify where to open the link.
   */
  target: PropTypes.string,
  /**
   * The rel property for the link.
   */
  rel: PropTypes.string
};

exports.default = SwitcherItem;