@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
63 lines (62 loc) • 3.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright 2022-2023 Wonderflow Design Team
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import clsx from 'clsx';
import { domMax, LazyMotion, m, } from 'framer-motion';
import { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
import { useUIDSeed } from 'react-uid';
import { Symbol, Text, } from '../..';
import * as styles from './disclosure.module.css';
export const Disclosure = forwardRef(({ children, open = false, padding = true, className, summary, contentMaxHeight, dimension = 'regular', iconPosition = 'left', expandable = true, style, onToggle, ...otherProps }, forwardedRef) => {
const ref = useRef(forwardedRef);
const [isOpen, setIsOpen] = useState(open);
const seedID = useUIDSeed();
useEffect(() => {
if (ref.current) {
ref.current.open = open;
}
}, [expandable, open]);
const handleOpen = useCallback(() => () => {
if (ref.current && expandable)
setIsOpen(open || ref.current.open);
if (expandable) {
onToggle?.(open || ref.current.open);
}
}, [expandable, onToggle, open]);
const dynamicStyle = {
'--max-height': contentMaxHeight,
};
const sizes = {
small: {
summary: 'subtitle-2',
icon: 12,
},
regular: {
summary: 'subtitle-1',
icon: 16,
},
big: {
summary: 'heading-6',
icon: 18,
},
};
return (_jsxs("details", { style: { ...dynamicStyle, ...style }, className: clsx(styles.Disclosure, className), "data-testid": "Disclosure", "data-disclosure-icon-position": iconPosition, "data-disclosure-dimension": dimension, "data-disclosure-expandable": expandable, onToggle: handleOpen(), ref: ref, open: isOpen, "aria-controls": seedID('disclosure-content'), ...otherProps, children: [_jsxs(Text, { as: "summary", preventResponsive: true, className: styles.Summary, id: seedID('disclosure'), variant: sizes[dimension].summary, "aria-expanded": isOpen, color: "dark", children: [summary, expandable && (_jsx(Symbol, { className: styles.ExpandIcon, source: "chevron-right", dimension: sizes[dimension].icon }))] }), _jsx(LazyMotion, { features: domMax, children: _jsx(m.div, { id: seedID('disclosure-content'), className: styles.Content, "data-disclosure-padding": padding, "data-disclosure-height": Boolean(contentMaxHeight), animate: isOpen ? {
y: 5, opacity: 1, height: 'auto', overflow: 'initial',
} : {
y: 0, opacity: 0, height: 0, overflow: 'hidden',
}, transition: { ease: 'easeOut', duration: 0.2, delay: 0 }, initial: false, role: "region", "aria-labelledby": seedID('disclosure'), children: children }) })] }));
});
Disclosure.displayName = 'Disclosure';