@awsui/components-react/button-dropdown/category-elements/expandable-category-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 Icon from '../../icon';
import ItemsList from '../items-list';
import Dropdown from '../../internal/components/dropdown';
import { useButtonDropdown } from '../utils/use-button-dropdown';
var ExpandableCategoryElement = function (_a) {
    var _b, _c, _d;
    var item = _a.item, onItemActivate = _a.onItemActivate, highlightedItem = _a.highlightedItem, expandedItem = _a.expandedItem, disabled = _a.disabled, onItemClick = _a.onItemClick;
    var highlighted = item === highlightedItem;
    var expanded = item === expandedItem;
    var triggerRef = React.useRef(null);
    var usingMouse = useRef(true);
    var _e = useButtonDropdown({
        items: item.items,
        hasExpandableGroups: false,
        onItemClick: onItemClick,
        isChild: true,
        usingMouse: usingMouse
    }), internalHighlightedItem = _e.highlightedItem, onKeyDown = _e.onKeyDown, onKeyUp = _e.onKeyUp, resetHighlight = _e.resetHighlight;
    useEffect(function () {
        if (item === highlightedItem && item !== expandedItem && triggerRef.current) {
            triggerRef.current.focus();
            resetHighlight();
        }
    }, [item, highlightedItem, expandedItem]);
    var triggerClickHandler = function (e) {
        if (!disabled) {
            e.preventDefault();
            onItemActivate(item);
            if (triggerRef.current) {
                triggerRef.current.focus();
                resetHighlight();
            }
        }
    };
    var trigger = item.text && (React.createElement("p", { onClick: triggerClickHandler, className: clsx(styles.header, (_b = {}, _b[styles.disabled] = disabled, _b), styles['expandable-header'], (_c = {},
            _c[styles.highlighted] = highlighted,
            _c)), "data-testid": item.id, tabIndex: item.disabled ? undefined : highlighted ? 0 : -1, ref: triggerRef },
        item.text,
        React.createElement("span", { className: clsx(styles['expand-icon'], styles['expand-icon-right']) },
            React.createElement(Icon, { name: "caret-down-filled" }))));
    return (React.createElement("li", { className: clsx(styles.category, styles.expandable, (_d = {},
            _d[styles.expanded] = expanded,
            _d[styles.disabled] = disabled,
            _d[styles.highlighted] = highlighted || expanded,
            _d)), role: "menuitem", "aria-haspopup": true, "aria-expanded": expanded, "aria-disabled": disabled ? 'true' : undefined, onKeyDown: onKeyDown, onKeyUp: onKeyUp },
        React.createElement(Dropdown, { open: expanded, stretchWidth: false, interior: true, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, expandedItem: expandedItem, highlightedItem: internalHighlightedItem, categoryDisabled: disabled, onItemClick: onItemClick }))))));
};
export default ExpandableCategoryElement;