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

@wix/design-system

import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import { st, classes } from './FieldSet.st.css.js';
import { ALIGNMENT, DIRECTION, GAP, LEGEND_ALIGNMENT, LEGEND_PLACEMENT, LEGEND_SIZE, STATUS_TYPE, dataHooks, } from './constants';
import Label from './components/Label';
import Suffix from './components/Suffix';
import StatusMessage from './components/StatusMessage';
import InlineLabelWrapper from './components/InlineLabelWrapper';
import { FieldSetContext } from './FieldSet.context';
import _uniqueId from 'lodash/uniqueId';
const FieldSet = ({ dataHook, children, legend: label, legendPlacement: labelPlacement = LEGEND_PLACEMENT.TOP, legendAlignment: labelAlignment = LEGEND_ALIGNMENT.MIDDLE, legendSize: labelSize = LEGEND_SIZE.SMALL, required = false, infoContent, infoTooltipProps, suffix, charCount, status, statusMessage, statusId, alignment = ALIGNMENT.START, direction = DIRECTION.HORIZONTAL, gap = GAP.SMALL, columns, ellipsis, maxLines = 1, }) => {
    const hasSuffix = !!(suffix || charCount !== undefined);
    const hasOnlySuffix = labelPlacement === LEGEND_PLACEMENT.NONE && hasSuffix;
    const hasInlineElements = labelPlacement === LEGEND_PLACEMENT.LEFT ||
        labelPlacement === LEGEND_PLACEMENT.RIGHT;
    const SuffixWithProps = hasSuffix ? (React.createElement(Suffix, { suffix: suffix, charCount: charCount, labelPlacement: labelPlacement, hasInlineElements: hasInlineElements, labelSize: labelSize })) : null;
    // TODO: useId() hook, when React@18
    const { current: uniqueStatusMessageId } = useRef(_uniqueId('fieldset-status-message-'));
    return (React.createElement("fieldset", { "data-hook": dataHook, "data-legend-placement": labelPlacement, "data-legend-alignment": labelAlignment, "data-status": status, "data-alignment": alignment, "data-direction": direction, "data-gap": gap, className: st(classes.root, {
            labelSize,
            hasInlineElements,
            labelPlacement,
            labelAlignment,
            required,
            hasOnlySuffix,
            minLabelHeight: !children,
        }) },
        React.createElement("legend", { className: classes.visuallyHidden }, label),
        labelPlacement === LEGEND_PLACEMENT.TOP && (React.createElement("div", { className: classes.labelRow },
            React.createElement("div", { className: classes.labelRowMain },
                React.createElement(Label, { dataHook: dataHooks.label, label: label, labelSize: labelSize, ellipsis: ellipsis ?? true, maxLines: maxLines, required: required, infoContent: infoContent, infoTooltipProps: infoTooltipProps, "aria-hidden": true })),
            SuffixWithProps)),
        hasOnlySuffix && (React.createElement("div", { className: st(classes.suffixRow) }, SuffixWithProps)),
        children && (React.createElement(FieldSetContext.Provider, { value: statusId ? {} : { status, statusId: uniqueStatusMessageId } },
            React.createElement("div", { "data-hook": dataHooks.children, className: st(classes.children, {
                    childrenWithInlineLabel: hasInlineElements,
                    alignment,
                    direction,
                    gap,
                }), style: {
                    gridTemplateColumns: direction === DIRECTION.HORIZONTAL ? columns : undefined,
                } }, children))),
        hasInlineElements && (React.createElement(InlineLabelWrapper, { suffix: suffix, charCount: charCount, labelPlacement: labelPlacement, labelSize: labelSize },
            React.createElement(Label, { dataHook: dataHooks.label, label: label, labelSize: labelSize, ellipsis: ellipsis, maxLines: maxLines, required: required, infoContent: infoContent, infoTooltipProps: infoTooltipProps, "aria-hidden": true }),
            SuffixWithProps)),
        statusMessage && (React.createElement(StatusMessage, { statusId: statusId || uniqueStatusMessageId, status: status, statusMessage: statusMessage, labelSize: "tiny", labelPlacement: labelPlacement }))));
};
FieldSet.displayName = 'FieldSet';
FieldSet.propTypes = {
    dataHook: PropTypes.string,
    children: PropTypes.node,
    legend: PropTypes.node.isRequired,
    legendPlacement: PropTypes.oneOf(Object.values(LEGEND_PLACEMENT)),
    legendAlignment: PropTypes.oneOf(Object.values(LEGEND_ALIGNMENT)),
    legendSize: PropTypes.oneOf(Object.values(LEGEND_SIZE)),
    required: PropTypes.bool,
    infoContent: PropTypes.node,
    infoTooltipProps: PropTypes.shape(TooltipCommonProps),
    suffix: PropTypes.node,
    charCount: PropTypes.number,
    status: PropTypes.oneOf(Object.values(STATUS_TYPE)),
    statusMessage: PropTypes.node,
    statusId: PropTypes.string,
    alignment: PropTypes.oneOf(Object.values(ALIGNMENT)),
    direction: PropTypes.oneOf(Object.values(DIRECTION)),
    gap: PropTypes.oneOf(Object.values(GAP)),
    columns: PropTypes.string,
};
export default FieldSet;
//# sourceMappingURL=FieldSet.js.map