wix-style-react/dist/es/src/SidePanel/Section/Section.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import { classes } from './Section.st.css';
import { useId } from './useId';
import SectionHeader from '../../SectionHeader';
import { dataHooks } from '../constants';
const Section = ({ title, titleVisible = true, suffix, children, ariaLabel, dataHook, as, 'aria-describedby': ariaDescribedBy, id, }) => {
    const generatedId = useId('title_');
    const titleId = id || generatedId;
    const getAriaLabel = () => {
        if (typeof title !== 'string') {
            return ariaLabel;
        }
        return ariaLabel || title;
    };
    return (React.createElement("div", { "data-hook": dataHook, "data-title": typeof title === 'string' ? title : undefined, className: classes.section },
        titleVisible && (React.createElement(SectionHeader, { id: titleId, skin: "neutral", divider: "bottom", align: "start", size: "small", horizontalPadding: "large", title: title, suffix: suffix, dataHook: dataHooks.sidePanelSectionHeader, as: as, "aria-describedby": ariaDescribedBy })),
        React.createElement("div", { role: "group", "aria-label": getAriaLabel(), "aria-labelledby": titleVisible ? titleId : undefined }, children)));
};
Section.displayName = 'Section';
Section.propTypes = {
    title: PropTypes.node,
    titleVisible: PropTypes.bool,
    suffix: PropTypes.element,
    children: PropTypes.node,
    ariaLabel: PropTypes.string,
    dataHook: PropTypes.string,
    as: PropTypes.oneOf(['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
    id: PropTypes.string,
    'aria-describedby': PropTypes.string,
};
export default Section;
//# sourceMappingURL=Section.js.map