@awsui/components-react/form-field/internal.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 from 'react';
import clsx from 'clsx';
import { getBaseProps } from '../internal/base-component';
import { FormFieldDomContext, useFormFieldContext } from '../internal/context/form-field-context';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import Grid from '../grid';
import Icon from '../icon';
import { getAriaDescribedBy, getGridDefinition, getSlotIds, joinStrings } from './util';
import styles from './styles.css.js';
export var FormFieldError = function (_a) {
    var id = _a.id, children = _a.children;
    return (React.createElement("div", { className: styles.error },
        React.createElement(Icon, { name: "status-warning", size: "small" }),
        React.createElement("span", { id: id, className: styles.error__message }, children)));
};
export default function InternalFormField(_a) {
    var controlId = _a.controlId, _b = _a.stretch, stretch = _b === void 0 ? false : _b, label = _a.label, info = _a.info, children = _a.children, secondaryControl = _a.secondaryControl, description = _a.description, constraintText = _a.constraintText, errorText = _a.errorText, hideLabel = _a.hideLabel, rest = __rest(_a, ["controlId", "stretch", "label", "info", "children", "secondaryControl", "description", "constraintText", "errorText", "hideLabel"]);
    var baseProps = getBaseProps(rest);
    var instanceUniqueId = useUniqueId('formField');
    var generatedControlId = controlId || instanceUniqueId;
    var formFieldId = controlId || generatedControlId;
    var slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);
    var ariaDescribedBy = getAriaDescribedBy(slotIds);
    var gridDefinition = getGridDefinition(stretch, !!secondaryControl);
    var _c = useFormFieldContext({}), parentAriaLabelledby = _c.ariaLabelledby, parentAriaDescribedby = _c.ariaDescribedby, parentInvalid = _c.invalid;
    var contextValuesWithoutControlId = {
        ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,
        ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,
        invalid: !!errorText || !!parentInvalid
    };
    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root) }),
        React.createElement("div", { className: clsx(hideLabel && styles['visually-hidden']) },
            label && (React.createElement("label", { className: styles.label, id: slotIds.label, htmlFor: generatedControlId }, label)),
            !hideLabel && info && React.createElement("span", { className: styles.info }, info)),
        description && (React.createElement("div", { className: styles.description, id: slotIds.description }, description)),
        React.createElement("div", { className: clsx(styles.controls, hideLabel && styles['label-hidden']) },
            React.createElement(Grid, { gridDefinition: gridDefinition },
                React.createElement(FormFieldDomContext.RootProvider, { value: __assign({ controlId: generatedControlId }, contextValuesWithoutControlId) }, children && React.createElement("div", { className: styles.control }, children)),
                secondaryControl && (React.createElement(FormFieldDomContext.RootProvider, { value: contextValuesWithoutControlId },
                    React.createElement("div", { className: styles['secondary-control'] }, secondaryControl))))),
        (constraintText || errorText) && (React.createElement("div", { className: styles.hints },
            errorText && React.createElement(FormFieldError, { id: slotIds.error }, errorText),
            constraintText && (React.createElement("div", { className: clsx(styles.constraint, errorText && styles['constraint-has-error']), id: slotIds.constraint }, constraintText))))));
}