@awsui/components-react/expandable-section/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 from 'react';
import clsx from 'clsx';
import useFocusVisible from '../internal/hooks/focus-visible';
import Container from '../container';
import Icon from '../icon';
import styles from './styles.css.js';
export var ExpandableSectionContainer = function (_a) {
    var className = _a.className, children = _a.children, header = _a.header, variant = _a.variant, expanded = _a.expanded, disableContentPaddings = _a.disableContentPaddings, rest = __rest(_a, ["className", "children", "header", "variant", "expanded", "disableContentPaddings"]);
    if (variant === 'container') {
        return (React.createElement(Container, __assign({}, rest, { className: className, header: header, disableContentPaddings: disableContentPaddings || !expanded, disableHeaderPaddings: true }), children));
    }
    return (React.createElement("div", __assign({ className: className }, rest),
        header,
        children));
};
export var ExpandableSectionHeader = function (_a) {
    var id = _a.id, className = _a.className, variant = _a.variant, children = _a.children, expanded = _a.expanded, ariaControls = _a.ariaControls, ariaLabelledBy = _a.ariaLabelledBy, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onClick = _a.onClick;
    var focusVisible = useFocusVisible();
    var icon = React.createElement(Icon, { className: clsx(styles.icon, expanded && styles.expanded), name: "caret-down-filled" });
    var ariaAttributes = {
        'override-focus': 'true',
        'aria-controls': ariaControls,
        'aria-expanded': expanded
    };
    var triggerClassName = clsx(styles.trigger, styles["trigger-" + variant], expanded && styles['trigger-expanded']);
    if (variant === 'navigation') {
        return (React.createElement("div", { id: id, className: clsx(className, triggerClassName), onClick: onClick },
            React.createElement("button", __assign({ className: styles['icon-container'], type: "button", "aria-labelledby": ariaLabelledBy }, focusVisible, ariaAttributes), icon),
            children));
    }
    return (React.createElement("div", __assign({ id: id, role: "button", className: clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded), tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick }, focusVisible, ariaAttributes),
        React.createElement("div", { className: styles['icon-container'] }, icon),
        children));
};