@zohodesk/dot 1.2.1 → 1.2.3

package/es/v1/form/fields/TextEditorField/TextEditorField.js

@@ -0,0 +1,178 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**** Libraries ****/
+import React, { PureComponent } from 'react';
+import { defaultProps } from '../../../../form/fields/TextEditorField/props/defaultProps';
+import { propTypes } from '../../../../form/fields/TextEditorField/props/propTypes';
+/**** Components ****/
+
+import Label from '@zohodesk/components/lib/Label/Label';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import TextEditorWrapper from '../TextEditorWrapper/TextEditorWrapper';
+import FieldContainer from '../FieldContainer/FieldContainer';
+/** Css */
+
+import style from '../../../../form/fields/Fields.module.css';
+export default class TextEditorField extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this);
+    this.handleLabelClick = this.handleLabelClick.bind(this);
+    this.renderEnd = this.renderEnd.bind(this);
+  }
+
+  handleChange(value) {
+    let {
+      id,
+      onChange
+    } = this.props;
+    onChange && onChange(id, value);
+  }
+
+  handleGetRef(el) {
+    let {
+      getRef,
+      id
+    } = this.props;
+    this.textEditor = el;
+    getRef && getRef(el, id);
+  }
+
+  handleLabelClick() {
+    let {
+      isFocusOnLabelClick,
+      isDisabled,
+      isReadOnly
+    } = this.props;
+
+    if (isFocusOnLabelClick && !isDisabled && !isReadOnly && this.textEditor && this.textEditor.focus) {
+      this.textEditor.focus();
+    }
+  }
+
+  renderEnd() {
+    let {
+      children
+    } = this.props;
+    return children ? children : null;
+  }
+
+  render() {
+    let {
+      labelName,
+      id,
+      isMandatory,
+      value,
+      validationMessage,
+      validationPalette,
+      isReadOnly,
+      onAttachmentUpload,
+      needEditor,
+      dataId,
+      dataSelectorId,
+      isDisabled,
+      fieldSize,
+      textBoxSize,
+      textBoxVariant,
+      labelPalette,
+      labelCustomClass,
+      infoText,
+      isLocked,
+      lockedInfoText,
+      errorType,
+      EDITORURL,
+      editorMode,
+      isCustomScroll,
+      initCallback,
+      loadingComponent,
+      handleAlertMessage,
+      editorCallback,
+      editorBlurCallback,
+      editorOptions,
+      onFocus,
+      isEditorDefaultOpen,
+      changeEditorContent,
+      shouldEditorUpdateContent,
+      setInlineAttachmentInProgress,
+      handleEditorDropUpload,
+      ImgLazyLoad,
+      needInlineAttachment,
+      i18nKeys,
+      className,
+      children,
+      ePhiData,
+      customProps
+    } = this.props;
+    const {
+      LabelProps = {},
+      TextEditorWrapperProps = {},
+      ValidationMessageProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`,
+      "data-selector-id": dataSelectorId
+    }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
+      infoText: infoText,
+      isLocked: isLocked,
+      lockedInfoText: lockedInfoText,
+      ePhiData: ePhiData,
+      dataId: dataId,
+      renderProps: {
+        end: this.renderEnd
+      }
+    }, /*#__PURE__*/React.createElement(Label, _extends({
+      text: labelName,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      htmlFor: !isReadOnly && !isDisabled ? id : undefined,
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      onClick: this.handleLabelClick,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+    }, LabelProps))), /*#__PURE__*/React.createElement("div", {
+      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+    }, /*#__PURE__*/React.createElement(TextEditorWrapper, _extends({
+      needEditor: needEditor,
+      onChange: this.handleChange,
+      id: id,
+      value: value,
+      isReadOnly: isReadOnly,
+      getRef: this.handleGetRef,
+      onAttachmentUpload: onAttachmentUpload,
+      dataId: dataId,
+      isDisabled: isDisabled,
+      textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+      textBoxVariant: textBoxVariant,
+      EDITORURL: EDITORURL,
+      editorMode: editorMode,
+      isCustomScroll: isCustomScroll,
+      initCallback: initCallback,
+      loadingComponent: loadingComponent,
+      handleAlertMessage: handleAlertMessage,
+      editorCallback: editorCallback,
+      i18nKeys: i18nKeys,
+      ImgLazyLoad: ImgLazyLoad,
+      editorOptions: editorOptions,
+      editorBlurCallback: editorBlurCallback,
+      onFocus: onFocus,
+      isEditorDefaultOpen: isEditorDefaultOpen,
+      changeEditorContent: changeEditorContent,
+      shouldEditorUpdateContent: shouldEditorUpdateContent,
+      setInlineAttachmentInProgress: setInlineAttachmentInProgress,
+      handleEditorDropUpload: handleEditorDropUpload,
+      needInlineAttachment: needInlineAttachment
+    }, TextEditorWrapperProps))), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+      text: validationMessage,
+      palette: validationPalette,
+      type: errorType,
+      dataId: `${dataId}_ValidationMessage`
+    }, ValidationMessageProps)));
+  }
+
+}
+TextEditorField.propTypes = propTypes;
+TextEditorField.defaultProps = defaultProps; // if (__DOCS__) {
+//   TextEditorField.docs = {
+//     componentGroup: 'Fields'
+//   };
+// }

package/es/v1/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -0,0 +1,203 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { Component } from 'react';
+import { defaultProps } from '../../../../form/fields/TextEditorWrapper/props/defaultProps';
+import { propTypes } from '../../../../form/fields/TextEditorWrapper/props/propTypes';
+/**** Components ****/
+
+import TextEditor from '../TextEditor/TextEditor';
+import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
+import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { editorContentValidate } from '../../../../utils/editorUtils';
+import style from './TextEditorWrapper.module.css';
+/* eslint-disable react/no-deprecated */
+
+export default class TextEditorWrapper extends Component {
+  constructor(props) {
+    super(props);
+    let {
+      value,
+      isEditorDefaultOpen
+    } = props;
+    this.state = {
+      isEditorShow: isEditorDefaultOpen ? true : !!value
+    };
+    this.handleTextareaFocus = this.handleTextareaFocus.bind(this);
+    this.toggleEdit = this.toggleEdit.bind(this);
+    this.focusCallback = this.focusCallback.bind(this);
+  }
+
+  handleTextareaFocus() {
+    let {
+      isReadOnly,
+      isDisabled
+    } = this.props;
+
+    if (!isReadOnly && !isDisabled) {
+      this.setState({
+        isEditorShow: true
+      }, () => {
+        setTimeout(() => {
+          editor[this.props.id].squireInstance.focus();
+        }, 300);
+      });
+    }
+  }
+
+  toggleEdit(value) {
+    this.setState({
+      isEditorShow: value
+    });
+  }
+
+  focusCallback() {
+    let {
+      onFocus
+    } = this.props;
+    this.setState({
+      isEditorFocus: true
+    });
+    onFocus && onFocus();
+  }
+
+  componentWillReceiveProps(np) {
+    let {
+      id,
+      value
+    } = this.props;
+
+    if (np.value || typeof editor != 'undefined' && editorContentValidate(editor[id])) {
+      this.setState({
+        isEditorShow: true
+      });
+    } else {
+      if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
+        this.setState({
+          isEditorShow: false
+        });
+      }
+    } // if (np.value !== value && np.value == '') {
+    //   editor[id].setContent('');
+    // }
+
+  }
+
+  render() {
+    let {
+      isEditorShow
+    } = this.state;
+    let {
+      id,
+      onChange,
+      value,
+      onAttachmentUpload,
+      needEditor,
+      dataId,
+      isReadOnly,
+      isDisabled,
+      getRef,
+      textBoxSize,
+      textBoxVariant,
+      editorMode,
+      editorSize,
+      editorBorder,
+      EDITORURL,
+      isCustomScroll,
+      initCallback,
+      loadingComponent,
+      handleAlertMessage,
+      editorCallback,
+      editorBlurCallback,
+      editorOptions,
+      changeEditorContent,
+      shouldEditorUpdateContent,
+      setInlineAttachmentInProgress,
+      handleEditorDropUpload,
+      ImgLazyLoad,
+      i18nKeys,
+      isEditorDefaultOpen,
+      needInlineAttachment,
+      customProps,
+      dataSelectorId
+    } = this.props;
+    const {
+      Textarea1Props = {},
+      Textarea2Props = {},
+      TextEditorProps = {}
+    } = customProps;
+    let defaultObj = {
+      needEditorFocus: !value
+    };
+    let editorOptionsObject = Object.assign(defaultObj, editorOptions);
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container,
+      "data-selector-id": dataSelectorId
+    }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, _extends({
+      onFocus: this.handleTextareaFocus,
+      text: value,
+      animated: !needEditor,
+      onChange: onChange,
+      dataId: dataId,
+      isReadOnly: isReadOnly,
+      isDisabled: isDisabled,
+      needEffect: !(isReadOnly || isDisabled),
+      getRef: getRef,
+      size: textBoxSize,
+      variant: textBoxVariant,
+      customClass: style.textBox
+    }, Textarea1Props)) : null, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: "slideDown",
+      runOnMount: true,
+      enterDuration: '300',
+      exitDuration: '400',
+      isActive: isEditorShow,
+      component: "div"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.textEditor
+    }, isEditorShow && needEditor ? /*#__PURE__*/React.createElement(TextEditor, _extends({
+      id: id,
+      value: value,
+      onChange: !isReadOnly && !isDisabled ? onChange : null,
+      editorOptions: editorOptionsObject,
+      onUpload: onAttachmentUpload,
+      editorMode: editorMode,
+      type: editorSize,
+      border: editorBorder,
+      dataId: dataId,
+      getRef: getRef,
+      plainTextSwitchCallback: !isReadOnly && !isDisabled ? onChange : null,
+      EDITORURL: EDITORURL,
+      isCustomScroll: isCustomScroll,
+      initCallback: initCallback,
+      loadingComponent: loadingComponent,
+      handleAlertMessage: handleAlertMessage,
+      toggleEdit: this.toggleEdit,
+      isEditorDefaultOpen: isEditorDefaultOpen,
+      editorCallback: editorCallback,
+      i18nKeys: i18nKeys,
+      ImgLazyLoad: ImgLazyLoad,
+      blurCallback: editorBlurCallback,
+      changeEditorContent: changeEditorContent,
+      shouldUpdateContent: shouldEditorUpdateContent,
+      setInlineAttachmentInProgress: setInlineAttachmentInProgress,
+      handleDropUpload: handleEditorDropUpload,
+      onFocus: this.focusCallback,
+      needInlineAttachment: needInlineAttachment
+    }, TextEditorProps)) : /*#__PURE__*/React.createElement(Textarea, _extends({
+      onFocus: this.handleTextareaFocus,
+      text: value,
+      animated: !needEditor,
+      onChange: onChange,
+      dataId: dataId,
+      isReadOnly: isReadOnly,
+      isDisabled: isDisabled,
+      needEffect: !(isReadOnly || isDisabled),
+      getRef: getRef,
+      size: textBoxSize,
+      variant: textBoxVariant
+    }, Textarea2Props)))));
+  }
+
+}
+TextEditorWrapper.propTypes = propTypes;
+TextEditorWrapper.defaultProps = defaultProps;

package/es/v1/form/fields/TextareaField/TextareaField.js

@@ -0,0 +1,161 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**** Libraries ****/
+import React, { PureComponent } from 'react';
+import { defaultProps } from '../../../../form/fields/TextareaField/props/defaultProps';
+import { propTypes } from '../../../../form/fields/TextareaField/props/propTypes';
+/**** Components ****/
+
+import Label from '@zohodesk/components/lib/Label/Label';
+import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import FieldContainer from '../FieldContainer/FieldContainer';
+/**** CSS ****/
+
+import style from '../../../../form/fields/Fields.module.css';
+export default class TextareaField extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
+
+    this.getNextId = getUniqueId(this);
+  }
+
+  handleChange(value) {
+    let {
+      id,
+      onChange
+    } = this.props;
+    onChange && onChange(id, value);
+  }
+
+  handleBlur(value) {
+    let {
+      id,
+      onBlur
+    } = this.props;
+    onBlur && onBlur(id, value);
+  }
+
+  handleGetRef(el) {
+    let {
+      getRef,
+      id
+    } = this.props;
+    this.textarea = el;
+    getRef && getRef(el, id);
+  } // handleLabelClick() {
+  //   let { isFocusOnLabelClick } = this.props;
+  //   if (isFocusOnLabelClick && this.textarea && this.textarea.focus) {
+  //     this.textarea.focus();
+  //   }
+  // }
+
+
+  render() {
+    let {
+      labelName,
+      id,
+      isMandatory,
+      textBoxSize,
+      animated,
+      textBoxVariant,
+      isReadOnly,
+      validationMessage,
+      validationPalette,
+      maxLength,
+      value,
+      errorType,
+      isDisabled,
+      title,
+      placeHolder,
+      dataId,
+      dataSelectorId,
+      validationRuleMessage,
+      validationRulePalette,
+      // onKeyDown,
+      infoText,
+      borderColor,
+      fieldSize,
+      labelPalette,
+      labelCustomClass,
+      htmlId,
+      lockedInfoText,
+      isLocked,
+      customProps,
+      renderLabelProps
+    } = this.props;
+    const {
+      LabelProps = {},
+      TextareaProps = {},
+      ValidationMessageProps1 = {},
+      ValidationMessageProps2 = {}
+    } = customProps;
+    let uniqueId = htmlId ? htmlId : this.getNextId();
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
+    }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
+      infoText: infoText,
+      isLocked: isLocked,
+      lockedInfoText: lockedInfoText,
+      renderProps: renderLabelProps
+    }, /*#__PURE__*/React.createElement(Label, _extends({
+      text: labelName,
+      id: id,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      htmlFor: uniqueId,
+      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+    }, LabelProps))), /*#__PURE__*/React.createElement("div", {
+      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+    }, /*#__PURE__*/React.createElement(Textarea, _extends({
+      onChange: this.handleChange,
+      animated: animated,
+      size: fieldSize === 'medium' ? textBoxSize : 'xmedium',
+      variant: textBoxVariant,
+      isReadOnly: isReadOnly,
+      isDisabled: isDisabled,
+      getRef: this.handleGetRef,
+      maxLength: maxLength,
+      text: value,
+      placeHolder: placeHolder,
+      dataId: `property(${dataId})`,
+      onBlur: this.handleBlur,
+      borderColor: borderColor,
+      needEffect: isReadOnly || isDisabled ? false : true,
+      resize: "vertical" // onKeyDown={onKeyDown}
+      ,
+      htmlId: uniqueId
+    }, TextareaProps, {
+      a11y: {
+        ariaLabelledby: labelName
+      }
+    })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+      text: validationMessage,
+      palette: validationPalette,
+      type: errorType,
+      htmlFor: uniqueId,
+      dataId: `${dataId}_ValidationMessage`
+    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+      text: validationRuleMessage,
+      palette: validationRulePalette,
+      type: errorType,
+      htmlFor: uniqueId,
+      dataId: `${dataId}_ValidationRuleMessage`
+    }, ValidationMessageProps2))));
+  }
+
+}
+TextareaField.propTypes = propTypes;
+TextareaField.defaultProps = defaultProps; // if (__DOCS__) {
+//   TextareaField.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

package/es/v1/form/fields/ValidationMessage/ValidationMessage.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { defaultProps } from '../../../../form/fields/ValidationMessage/props/defaultProps';
+import { propTypes } from '../../../../form/fields/ValidationMessage/props/propTypes';
+import Label from '@zohodesk/components/lib/Label/Label';
+import colors from '@zohodesk/components/lib/Label/LabelColors.module.css';
+import style from '../../../../form/fields/ValidationMessage/ValidationMessage.module.css';
+import { Icon } from '@zohodesk/icons';
+export default class ValidationMessage extends React.Component {
+  render() {
+    let {
+      palette,
+      text,
+      htmlFor,
+      onClick,
+      type,
+      size,
+      dataId,
+      clipped,
+      a11y,
+      tooltip,
+      dataSelectorId
+    } = this.props;
+    let {
+      role = 'alert'
+    } = a11y;
+    return /*#__PURE__*/React.createElement("div", {
+      role: role,
+      onClick: onClick,
+      className: `${type === 'primary' ? style.primary : style.secondary}`,
+      "data-id": "errorMsgContainer",
+      "data-test-id": "errorMsgContainer",
+      "data-selector-id": dataSelectorId
+    }, /*#__PURE__*/React.createElement(Label, {
+      text: text,
+      htmlFor: htmlFor,
+      palette: palette,
+      size: size,
+      dataId: dataId,
+      clipped: clipped,
+      title: clipped ? text : '',
+      customClass: style.lable
+    }), tooltip ? /*#__PURE__*/React.createElement("span", {
+      className: `${style.icon} ${colors[palette]}`,
+      "data-title": tooltip
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-information57",
+      size: "14"
+    })) : null);
+  }
+
+}
+ValidationMessage.propTypes = propTypes;
+ValidationMessage.defaultProps = defaultProps; // if (__DOCS__) {
+//   ValidationMessage.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/form/fields/index.js

@@ -0,0 +1,16 @@
+export { default as CheckBoxField } from './CheckBoxField/CheckBoxField';
+export { default as CurrencyField } from './CurrencyField/CurrencyField';
+export { default as DateField } from './DateField/DateField';
+export { default as FieldContainer } from './FieldContainer/FieldContainer';
+export { default as MultiSelectField } from './MultiSelectField/MultiSelectField';
+export { default as PhoneField } from './PhoneField/PhoneField';
+export { default as RadioField } from './RadioField/RadioField';
+export { default as SelectField } from './SelectField/SelectField';
+export { default as TagsMultiSelect } from './TagsMultiSelect/TagsMultiSelect';
+export { default as TagsMultiSelectField } from './TagsMultiSelectField/TagsMultiSelectField';
+export { default as TextareaField } from './TextareaField/TextareaField';
+export { default as TextBoxField } from './TextBoxField/TextBoxField';
+export { default as TextEditor } from './TextEditor/TextEditor';
+export { default as TextEditorField } from './TextEditorField/TextEditorField';
+export { default as TextEditorWrapper } from './TextEditorWrapper/TextEditorWrapper';
+export { default as ValidationMessage } from './ValidationMessage/ValidationMessage';

package/es/v1/form/layout/Field/Field.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { defaultProps } from '../../../../form/layout/Field/props/defaultProps';
+import { propTypes } from '../../../../form/layout/Field/props/propTypes';
+import style from '../../../../form/layout/Field/Field.module.css';
+export default class Field extends Component {
+  render() {
+    let {
+      width,
+      children,
+      rowBreak,
+      column,
+      className,
+      containerClass,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: `${containerClass ? containerClass : ''} ${column == 'single' ? `${style.singleColumn}` : `${style[width]} `}`,
+      "data-id": dataId,
+      "data-test-id": dataId
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${className ? className : ''} ${`fieldWidth_${width}`}`
+    }, children)), rowBreak && /*#__PURE__*/React.createElement("div", {
+      className: style.rowBreak
+    }));
+  }
+
+}
+Field.propTypes = propTypes;
+Field.defaultProps = defaultProps; // if (__DOCS__) {
+//   Field.docs = {
+//     componentGroup: 'ModuleAddForm'
+//   };
+// }

package/es/v1/form/layout/Section/Section.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { propTypes } from '../../../../form/layout/Section/props/propTypes';
+import style from '../../../../form/layout/Section/ModuleFormSection.module.css';
+export default class Section extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      title,
+      dataId,
+      containerClass,
+      titleClass,
+      className,
+      column,
+      formName
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-id": dataId,
+      "data-test-id": dataId,
+      className: containerClass ? containerClass : ''
+    }, title && /*#__PURE__*/React.createElement("div", {
+      className: titleClass ? titleClass : ''
+    }, title), /*#__PURE__*/React.createElement("div", {
+      className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
+      "data-id": formName && formName,
+      "data-test-id": formName && formName
+    }, this.props.children));
+  }
+
+}
+Section.propTypes = propTypes; // if (__DOCS__) {
+//   Section.docs = {
+//     componentGroup: 'ModuleAddForm'
+//   };
+// }

package/es/v1/form/layout/index.js

@@ -0,0 +1,2 @@
+export { default as Field } from './Field/Field';
+export { default as Section } from './Section/Section';