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

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

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

const SwitcherItem = /*#__PURE__*/React.forwardRef(function SwitcherItem(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__default["default"](`${prefix}--switcher__item`, {
    [customClassName || '']: !!customClassName
  });
  const accessibilityLabel = {
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledBy
  };
  const linkClassName = cx__default["default"](`${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__default["default"].createElement("li", {
    className: classNames
  }, /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({
    onKeyDown: evt => {
      setTabFocus(evt);
      onKeyDown(evt);
    },
    href: href,
    target: target,
    rel: rel,
    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__default["default"].node.isRequired,
  /**
   * Optionally provide a custom class to apply to the underlying `<li>` node
   */
  className: PropTypes__default["default"].string,
  /**
   * event handlers
   */
  handleSwitcherItemFocus: PropTypes__default["default"].func,
  /**
   * Optionally provide an href for the underlying li`
   */
  href: PropTypes__default["default"].string,
  /**
   * Specify the index of the SwitcherItem
   */
  index: PropTypes__default["default"].number,
  /**
   * event handlers
   */
  onClick: PropTypes__default["default"].func,
  /**
   * event handlers
   */
  onKeyDown: PropTypes__default["default"].func,
  /**
   * Specify the tab index of the Link
   */
  tabIndex: PropTypes__default["default"].number,
  /**
   * Specify where to open the link.
   */
  target: PropTypes__default["default"].string,
  /**
   * The rel property for the link.
   */
  rel: PropTypes__default["default"].string
};

exports["default"] = SwitcherItem;