@wix/design-system/dist/esm/Collapse/Collapse.js

@wix/design-system

import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import Toggle from '../Transition/Toggle';
import { timingMap } from '../Transition/constants';
import { st, classes } from './Collapse.st.css.js';
/** Use `<Collapse/>` for hideable content.
 *
 * For example, create an accordion within `<Card/>` to collapse its `<Card.Content/>`
 * or to wrap <TopBanner/>.
 */
const Collapse = ({ children, open = true, position = 'static', dataHook, mountOnEnter = true, unmountOnExit = true, onExpandAnimationEnd, onCollapseAnimationEnd, }) => {
    const wrapperRef = useRef(null);
    return (React.createElement("div", { "data-hook": dataHook, "data-open": open, ref: wrapperRef, className: st(classes.root, { position }) },
        React.createElement(Toggle, { timeout: timingMap['medium01'], show: open, unmountOnExit: unmountOnExit, mountOnEnter: mountOnEnter, onStart: onExpandAnimationEnd, onEnd: onCollapseAnimationEnd }, children)));
};
Collapse.displayName = 'Collapse';
Collapse.propTypes = {
    children: PropTypes.node,
    open: PropTypes.bool,
    position: PropTypes.oneOf(['static', 'sticky']),
    dataHook: PropTypes.string,
    mountOnEnter: PropTypes.bool,
    unmountOnExit: PropTypes.bool,
    onExpandAnimationEnd: PropTypes.func,
    onCollapseAnimationEnd: PropTypes.func,
};
export default Collapse;
//# sourceMappingURL=Collapse.js.map