@s-ui/react-molecule-field/lib/index.js

`MoleculeField` is a component that wraps a composition of Label + some input (input, textarea, ...) + Validation Messages.

import _extends from "@babel/runtime/helpers/esm/extends";
import { Children, cloneElement } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import AtomHelpText from '@s-ui/react-atom-help-text';
import AtomValidationText, { AtomValidationTextTypes } from '@s-ui/react-atom-validation-text';
import { BASE_CLASS, CLASS_AUTO_HIDE, CLASS_FULLWIDTH, CLASS_INLINE, CLASS_INLINE_REVERSE, CLASS_INPUT_CONTAINER, CLASS_LABEL_CONTAINER } from './config.js';
import MoleculeLabel from './Label.js';
import useStatusValidationText from './useStatusValidationText.js';
import useTypeValidationLabel from './useTypeValidationLabel.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var MoleculeField = function MoleculeField(_ref) {
  var disabled = _ref.disabled,
    inline = _ref.inline,
    reverse = _ref.reverse,
    errorText = _ref.errorText,
    successText = _ref.successText,
    alertText = _ref.alertText,
    label = _ref.label,
    nodeLabel = _ref.nodeLabel,
    fullWidth = _ref.fullWidth,
    useContrastLabel = _ref.useContrastLabel,
    helpText = _ref.helpText,
    name = _ref.name,
    status = _ref.status,
    statusText = _ref.statusText,
    onClickLabel = _ref.onClickLabel,
    onChangeFromProps = _ref.onChange,
    children = _ref.children,
    autoHideHelpText = _ref.autoHideHelpText,
    isAligned = _ref.isAligned;
  var className = cx(BASE_CLASS, inline && CLASS_INLINE, inline && reverse && CLASS_INLINE_REVERSE, autoHideHelpText && CLASS_AUTO_HIDE, fullWidth && CLASS_FULLWIDTH);
  var typeValidationLabel = useTypeValidationLabel({
    useContrastLabel: useContrastLabel,
    errorText: errorText,
    successText: successText,
    alertText: alertText,
    disabled: disabled,
    status: status
  });
  var _useStatusValidationT = useStatusValidationText({
      successText: successText,
      errorText: errorText,
      alertText: alertText,
      status: status,
      statusText: statusText
    }),
    validationTextValue = _useStatusValidationT.text,
    validationTextStatus = _useStatusValidationT.status;
  var helpTextId = name + "-help-text";
  var isHelpOrValidationText = helpText || validationTextValue;
  var extendedChildren = Children.toArray(children).filter(Boolean).map(function (child, index) {
    var _ref2;
    return /*#__PURE__*/cloneElement(child, _extends({
      onChange: onChangeFromProps
    }, isHelpOrValidationText && (_ref2 = {}, _ref2["aria-describedby"] = helpTextId, _ref2)));
  });
  return /*#__PURE__*/_jsxs("div", _extends({
    className: className
  }, validationTextStatus && Object.values(AtomValidationTextTypes).includes(validationTextStatus) && {
    'data-status': validationTextStatus
  }, {
    children: [(label || nodeLabel) && /*#__PURE__*/_jsxs("div", {
      className: CLASS_LABEL_CONTAINER,
      children: [inline && extendedChildren, /*#__PURE__*/_jsx(MoleculeLabel, {
        type: typeValidationLabel,
        name: name,
        onClick: onClickLabel,
        children: label || nodeLabel
      })]
    }), /*#__PURE__*/_jsxs("div", {
      className: cx(CLASS_INPUT_CONTAINER, isAligned && CLASS_INPUT_CONTAINER + "--aligned"),
      children: [!inline && extendedChildren, !disabled && validationTextValue && /*#__PURE__*/_jsx(AtomValidationText, _extends({
        id: helpTextId,
        text: validationTextValue,
        type: validationTextStatus
      }, validationTextStatus === AtomValidationTextTypes.ERROR && {
        role: 'alert'
      })), helpText && /*#__PURE__*/_jsx(AtomHelpText, {
        id: helpTextId,
        text: helpText
      })]
    })]
  }));
};
MoleculeField.displayName = 'MoleculeField';
export default MoleculeField;
export { AtomValidationTextTypes as moleculeFieldStatus };