@carbon/react
Version:
React components for the Carbon Design System
84 lines (82 loc) • 2.61 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* 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 { usePrefix } from "../../internal/usePrefix.js";
import { ArrowDown, ArrowUp } from "../../internal/keyboard/keys.js";
import { match } from "../../internal/keyboard/match.js";
import { AriaLabelPropType } from "../../prop-types/AriaPropTypes.js";
import Link from "./Link.js";
import classNames from "classnames";
import { forwardRef } from "react";
import PropTypes from "prop-types";
import { jsx } from "react/jsx-runtime";
//#region src/components/UIShell/SwitcherItem.tsx
/**
* Copyright IBM Corp. 2023, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const SwitcherItem = 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();
const classNames$1 = classNames(`${prefix}--switcher__item`, { [customClassName || ""]: !!customClassName });
const accessibilityLabel = {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy
};
const linkClassName = classNames(`${prefix}--switcher__item-link`, { [`${prefix}--switcher__item-link--selected`]: isSelected });
function setTabFocus(evt) {
if (match(evt, ArrowDown)) {
evt.preventDefault();
handleSwitcherItemFocus?.({
currentIndex: index || -1,
direction: 1
});
}
if (match(evt, ArrowUp)) {
evt.preventDefault();
handleSwitcherItemFocus?.({
currentIndex: index || -1,
direction: -1
});
}
}
return /* @__PURE__ */ jsx("li", {
className: classNames$1,
children: /* @__PURE__ */ jsx(Link, {
onKeyDown: (evt) => {
setTabFocus(evt);
onKeyDown(evt);
},
href,
target,
rel,
ref: forwardRef,
...rest,
className: linkClassName,
tabIndex,
...accessibilityLabel,
children
})
});
});
SwitcherItem.displayName = "SwitcherItem";
SwitcherItem.propTypes = {
...AriaLabelPropType,
children: PropTypes.node.isRequired,
className: PropTypes.string,
handleSwitcherItemFocus: PropTypes.func,
href: PropTypes.string,
index: PropTypes.number,
onClick: PropTypes.func,
onKeyDown: PropTypes.func,
tabIndex: PropTypes.number,
target: PropTypes.string,
rel: PropTypes.string
};
//#endregion
export { SwitcherItem as default };