@awsui/components-react/expandable-section/index.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, { useCallback } from 'react';
import { CSSTransition } from 'react-transition-group';
import clsx from 'clsx';
import { getBaseProps } from '../internal/base-component';
import { useControllable } from '../internal/hooks/use-controllable';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import { KeyCode } from '../internal/keycode';
import { fireNonCancelableEvent } from '../internal/events';
import { ExpandableSectionContainer, ExpandableSectionHeader } from './internal';
import styles from './styles.css.js';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var ExpandableSection = function (_a) {
    var controlledExpanded = _a.expanded, defaultExpanded = _a.defaultExpanded, onChange = _a.onChange, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, children = _a.children, header = _a.header, disableContentPaddings = _a.disableContentPaddings, rest = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "disableContentPaddings"]);
    useTelemetry('ExpandableSection');
    var controlId = useUniqueId();
    var triggerControlId = controlId + "-trigger";
    var baseProps = getBaseProps(rest);
    var _c = useControllable(controlledExpanded, onChange, defaultExpanded, {
        componentName: 'ExpandableSection',
        controlledProp: 'expanded',
        changeHandler: 'onChange'
    }), expanded = _c[0], setExpanded = _c[1];
    var onExpandChange = useCallback(function (expanded) {
        setExpanded(expanded);
        fireNonCancelableEvent(onChange, { expanded: expanded });
    }, [onChange, setExpanded]);
    var onClick = useCallback(function () {
        onExpandChange(!expanded);
    }, [onExpandChange, expanded]);
    var onKeyUp = useCallback(function (event) {
        var interactionKeys = [KeyCode.enter, KeyCode.space];
        if (interactionKeys.indexOf(event.keyCode) !== -1) {
            onExpandChange(!expanded);
        }
    }, [onExpandChange, expanded]);
    var onKeyDown = useCallback(function (event) {
        if (event.keyCode === KeyCode.space) {
            event.preventDefault();
        }
    }, []);
    var triggerProps = {
        ariaControls: controlId,
        ariaLabelledBy: triggerControlId,
        onKeyUp: onKeyUp,
        onKeyDown: onKeyDown,
        onClick: onClick
    };
    return (React.createElement(ExpandableSectionContainer, __assign({}, baseProps, { expanded: expanded, className: clsx(baseProps.className, styles.root), variant: variant, disableContentPaddings: disableContentPaddings, header: React.createElement(ExpandableSectionHeader, __assign({ id: triggerControlId, className: clsx(styles.header, styles["header-" + variant]), variant: variant, expanded: !!expanded }, triggerProps), header) }),
        React.createElement(CSSTransition, { "in": expanded, timeout: 30, classNames: { enter: styles['content-enter'] } },
            React.createElement("div", { id: controlId, className: clsx(styles.content, styles["content-" + variant], expanded && styles['content-expanded']), "aria-labelledby": triggerControlId }, children))));
};
export default ExpandableSection;