@awsui/components-react/button-dropdown/item-element/item-element.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import React, { useEffect, useRef } from 'react';
import clsx from 'clsx';
import styles from './styles.css.js';
import { isLinkItem } from '../utils/utils';
var ItemElement = function (_a) {
    var _b;
    var item = _a.item, disabled = _a.disabled, onItemActivate = _a.onItemActivate, highlighted = _a.highlighted, last = _a.last, hasCategoryHeader = _a.hasCategoryHeader, _c = _a.allowHref, allowHref = _c === void 0 ? false : _c;
    var isAllowedLink = allowHref && isLinkItem(item);
    var onClick = function (event) {
        !isAllowedLink && event.preventDefault();
        !disabled && onItemActivate(item, event);
    };
    var itemRef = useRef(null);
    useEffect(function () {
        if (highlighted && itemRef.current) {
            itemRef.current.focus();
        }
    }, [highlighted]);
    return (React.createElement("li", { className: clsx(styles['item-element'], (_b = {},
            _b[styles.highlighted] = highlighted,
            _b[styles.disabled] = disabled,
            _b[styles.last] = last,
            _b[styles['has-category-header']] = hasCategoryHeader,
            _b[styles['item-link']] = isAllowedLink,
            _b)), role: "menuitem", "aria-label": "" + item.text + (item.description ? " " + item.description : ''), "data-testid": item.id, "data-description": item.description, "aria-disabled": disabled ? 'true' : undefined, tabIndex: disabled ? undefined : highlighted ? 0 : -1, onClick: isAllowedLink ? undefined : onClick, ref: isAllowedLink ? undefined : itemRef }, isAllowedLink ? (React.createElement("a", { href: item.href, onClick: onClick, ref: itemRef }, item.text)) : (item.text)));
};
export default ItemElement;