@awsui/components-react/button-dropdown/internal.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 { __assign, __rest } from "tslib";
import React, { useEffect, useRef } from 'react';
import clsx from 'clsx';
import styles from './styles.css.js';
import { getBaseProps } from '../internal/base-component';
import Dropdown from '../internal/components/dropdown';
import ItemsList from './items-list';
import { useButtonDropdown } from './utils/use-button-dropdown';
import OptionsList from '../internal/components/options-list';
import { InternalButton } from '../button/internal';
import { useMobile } from '../internal/hooks/use-mobile';
import useForwardFocus from '../internal/hooks/forward-focus';
import { usePrevious } from '../internal/hooks/use-previous';
var InternalButtonDropdown = React.forwardRef(function (_a, ref) {
    var items = _a.items, _b = _a.variant, variant = _b === void 0 ? 'normal' : _b, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.expandableGroups, expandableGroups = _e === void 0 ? false : _e, children = _a.children, onItemClick = _a.onItemClick, customTriggerBuilder = _a.customTriggerBuilder, _f = _a.allowHref, allowHref = _f === void 0 ? false : _f, props = __rest(_a, ["items", "variant", "loading", "disabled", "expandableGroups", "children", "onItemClick", "customTriggerBuilder", "allowHref"]);
    var isInRestrictedView = useMobile();
    var usingMouse = useRef(true);
    var _g = useButtonDropdown({
        items: items,
        onItemClick: onItemClick,
        hasExpandableGroups: expandableGroups,
        isInRestrictedView: isInRestrictedView,
        usingMouse: usingMouse
    }), isOpen = _g.isOpen, highlightedItem = _g.highlightedItem, expandedItem = _g.expandedItem, onKeyDown = _g.onKeyDown, onKeyUp = _g.onKeyUp, onItemActivate = _g.onItemActivate, toggleDropdown = _g.toggleDropdown, onTriggerClick = _g.onTriggerClick, closeExpanded = _g.closeExpanded;
    var handleMouseEvent = function () {
        usingMouse.current = true;
    };
    var baseProps = getBaseProps(props);
    var dropdownRef = useRef(null);
    useForwardFocus(ref, dropdownRef);
    var clickHandler = function (event) {
        event.preventDefault();
        if (!usingMouse.current) {
            return;
        }
        if (!loading && !disabled) {
            toggleDropdown();
            closeExpanded();
            onTriggerClick();
            if (dropdownRef.current) {
                dropdownRef.current.focus();
            }
        }
    };
    var canBeOpened = !loading && !disabled;
    var wasOpen = usePrevious(isOpen);
    useEffect(function () {
        if (!isOpen && dropdownRef.current && wasOpen) {
            dropdownRef.current.focus();
        }
    }, [isOpen]);
    var trigger = customTriggerBuilder ? (customTriggerBuilder(clickHandler, dropdownRef, disabled, isOpen)) : (React.createElement(InternalButton, { ref: dropdownRef, iconName: "caret-down-filled", iconAlign: "right", iconClass: canBeOpened && isOpen ? styles['rotate-up'] : styles['rotate-down'], variant: variant, loading: loading, disabled: disabled, onClick: clickHandler, "aria-haspopup": true, "aria-expanded": canBeOpened && isOpen ? true : undefined, formAction: "none" }, children));
    return (React.createElement("div", __assign({}, baseProps, { onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseDown: handleMouseEvent, className: clsx(styles['button-dropdown'], baseProps.className) }),
        React.createElement(Dropdown, { open: canBeOpened && isOpen, stretchWidth: false, onDropdownClose: function () {
                toggleDropdown();
                closeExpanded();
            }, trigger: trigger },
            React.createElement(OptionsList, { open: canBeOpened && isOpen, position: "static", role: "menu", decreaseTopMargin: true },
                React.createElement(ItemsList, { items: items, onItemActivate: onItemActivate, hasExpandableGroups: expandableGroups, expandedItem: expandedItem, highlightedItem: highlightedItem, onItemClick: onItemClick, allowHref: allowHref })))));
});
export default InternalButtonDropdown;