@zohodesk/dot 1.0.0-temp.999 → 1.0.0-test.239

package/es/form/fields/DateField/DateField.js

@@ -1,21 +1,17 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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 PropTypes from 'prop-types';
-/**** Components ****/
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 
+/**** Components ****/
 import Label from '@zohodesk/components/lib/Label/Label';
 import DateWidget from '@zohodesk/components/lib/DateTime/DateWidget';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/**** props ****/
 
-import { FieldCommonDefaultProps } from '../props/FieldCommonDefaultProps';
-import { FieldCommonPropTypes } from '../props/FieldCommonPropTypes';
 /**** CSS ****/
-
 import style from '../Fields.module.css';
 export default class DateField extends PureComponent {
   constructor(props) {
@@ -26,7 +22,6 @@ export default class DateField extends PureComponent {
     this.getNextId = getUniqueId(this);
     this.openPopup = this.openPopup.bind(this);
   }
-
   handleChange(value) {
     let {
       id,
@@ -34,7 +29,6 @@ export default class DateField extends PureComponent {
     } = this.props;
     onChange && onChange(id, value);
   }
-
   handleGetRef(el) {
     let {
       getRef,
@@ -43,16 +37,13 @@ export default class DateField extends PureComponent {
     this.dateField = el;
     getRef && getRef(el, id);
   }
-
   componentDidMount() {
     this.openPopup();
   }
-
   openPopup() {
     let {
       openPopupOnMount
     } = this.props;
-
     if (openPopupOnMount) {
       setTimeout(() => {
         this.dateField && this.dateField.click && this.dateField.click();
@@ -60,7 +51,6 @@ export default class DateField extends PureComponent {
       }, 100);
     }
   }
-
   componentDidUpdate(prevProps) {
     let {
       openPopupOnMount: prevOpenPopupOnMount
@@ -68,22 +58,18 @@ export default class DateField extends PureComponent {
     let {
       openPopupOnMount
     } = this.props;
-
     if (openPopupOnMount !== prevOpenPopupOnMount) {
       this.openPopup();
     }
   }
-
   handleLabelClick() {
     let {
       isFocusOnLabelClick
     } = this.props;
-
     if (isFocusOnLabelClick && this.dateField && this.dateField.focus) {
       this.dateField.focus();
     }
   }
-
   render() {
     let {
       labelName,
@@ -179,63 +165,9 @@ export default class DateField extends PureComponent {
       dataId: `${dataId}_ValidationRuleMessage`
     }, ValidationMessageProps2))));
   }
-
 }
-DateField.propTypes = {
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  datePattern: PropTypes.string,
-  errorType: PropTypes.oneOf(['primary', 'secondary']),
-  fieldSize: PropTypes.oneOf(['small', 'medium']),
-  getRef: PropTypes.func,
-  id: PropTypes.string,
-  isDateTime: PropTypes.bool,
-  isFocusOnLabelClick: PropTypes.bool,
-  labelCustomClass: PropTypes.string,
-  labelName: PropTypes.string,
-  labelPalette: PropTypes.string,
-  lockedValueText: PropTypes.string,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  openPopupOnMount: PropTypes.bool,
-  popupGroup: PropTypes.string,
-  textBoxSize: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  title: PropTypes.string,
-  validationMessage: PropTypes.string,
-  validationPalette: PropTypes.string,
-  validationRuleMessage: PropTypes.string,
-  validationRulePalette: PropTypes.string,
-  value: PropTypes.string,
-  htmlId: PropTypes.string,
-  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  i18nKeys: PropTypes.object,
-  iconOnHover: PropTypes.bool,
-  customProps: PropTypes.shape({
-    LabelProps: PropTypes.object,
-    DateWidgetProps: PropTypes.object,
-    ValidationMessageProps1: PropTypes.object,
-    ValidationMessageProps2: PropTypes.object
-  }),
-  ...FieldCommonPropTypes()
-};
-DateField.defaultProps = {
-  errorType: 'primary',
-  openPopupOnMount: false,
-  isDateTime: true,
-  textBoxSize: 'xmedium',
-  textBoxVariant: 'primary',
-  borderColor: 'default',
-  fieldSize: 'medium',
-  isFocusOnLabelClick: true,
-  labelPalette: 'default',
-  labelCustomClass: '',
-  timeZone: null,
-  i18nKeys: {},
-  dataId: 'dateField',
-  customProps: {},
-  ...FieldCommonDefaultProps()
-};
-
+DateField.propTypes = propTypes;
+DateField.defaultProps = defaultProps;
 if (false) {
   DateField.docs = {
     componentGroup: 'Form Fields',

package/es/form/fields/DateField/props/defaultProps.js

@@ -0,0 +1,18 @@
+import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
+export const defaultProps = {
+  errorType: 'primary',
+  openPopupOnMount: false,
+  isDateTime: true,
+  textBoxSize: 'xmedium',
+  textBoxVariant: 'primary',
+  borderColor: 'default',
+  fieldSize: 'medium',
+  isFocusOnLabelClick: true,
+  labelPalette: 'default',
+  labelCustomClass: '',
+  timeZone: null,
+  i18nKeys: {},
+  dataId: 'dateField',
+  customProps: {},
+  ...FieldCommonDefaultProps()
+};

package/es/form/fields/DateField/props/propTypes.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import { FieldCommonPropTypes } from '../../props/FieldCommonPropTypes';
+export const propTypes = {
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  datePattern: PropTypes.string,
+  errorType: PropTypes.oneOf(['primary', 'secondary']),
+  fieldSize: PropTypes.oneOf(['small', 'medium']),
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  isDateTime: PropTypes.bool,
+  isFocusOnLabelClick: PropTypes.bool,
+  labelCustomClass: PropTypes.string,
+  labelName: PropTypes.string,
+  labelPalette: PropTypes.string,
+  lockedValueText: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  openPopupOnMount: PropTypes.bool,
+  popupGroup: PropTypes.string,
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  title: PropTypes.string,
+  validationMessage: PropTypes.string,
+  validationPalette: PropTypes.string,
+  validationRuleMessage: PropTypes.string,
+  validationRulePalette: PropTypes.string,
+  value: PropTypes.string,
+  htmlId: PropTypes.string,
+  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  i18nKeys: PropTypes.object,
+  iconOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    LabelProps: PropTypes.object,
+    DateWidgetProps: PropTypes.object,
+    ValidationMessageProps1: PropTypes.object,
+    ValidationMessageProps2: PropTypes.object
+  }),
+  ...FieldCommonPropTypes()
+};

package/es/form/fields/FieldContainer/FieldContainer.js

@@ -1,22 +1,18 @@
 /**** Libraries ****/
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { FieldCommonDefaultProps } from '../props/FieldCommonDefaultProps';
-import { FieldCommonPropTypes } from '../props/FieldCommonPropTypes';
-/**** Components ****/
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 
+/**** Components ****/
 import { Container } from '@zohodesk/components/lib/Layout';
 /**** Icons ****/
-
 import Icon from '@zohodesk/icons/lib/Icon';
 /**** CSS ****/
-
 import style from '../Fields.module.css';
 export default class FieldContainer extends PureComponent {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       children,
@@ -58,22 +54,9 @@ export default class FieldContainer extends PureComponent {
       className: style.ePhiTag
     }, ePhiText) : null, renderEnd ? renderEnd() : null);
   }
-
 }
-FieldContainer.propTypes = { ...FieldCommonPropTypes(),
-  children: PropTypes.node,
-  alignContainer: PropTypes.oneOf('vertical', 'baseline'),
-  renderProps: PropTypes.shape({
-    start: PropTypes.func,
-    middle: PropTypes.func,
-    end: PropTypes.func
-  })
-};
-FieldContainer.defaultProps = { ...FieldCommonDefaultProps(),
-  renderProps: {},
-  alignContainer: 'vertical'
-};
-
+FieldContainer.propTypes = propTypes;
+FieldContainer.defaultProps = defaultProps;
 if (false) {
   FieldContainer.docs = {
     componentGroup: 'Form Fields',

package/es/form/fields/FieldContainer/props/defaultProps.js

@@ -0,0 +1,6 @@
+import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
+export const defaultProps = {
+  ...FieldCommonDefaultProps(),
+  renderProps: {},
+  alignContainer: 'vertical'
+};

package/es/form/fields/FieldContainer/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+import { FieldCommonPropTypes } from '../../props/FieldCommonPropTypes';
+export const propTypes = {
+  ...FieldCommonPropTypes(),
+  children: PropTypes.node,
+  alignContainer: PropTypes.oneOf('vertical', 'baseline'),
+  renderProps: PropTypes.shape({
+    start: PropTypes.func,
+    middle: PropTypes.func,
+    end: PropTypes.func
+  })
+};

package/es/form/fields/Fields.module.css

@@ -34,15 +34,19 @@
   -webkit-line-clamp: 2;
 }
 .checkboxText {
-  padding-left: var(--zd_size6);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: normal;
 }
+[dir=ltr] .checkboxText {
+  padding-left: var(--zd_size6);
+}
+[dir=rtl] .checkboxText {
+  padding-right: var(--zd_size6);
+}
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled,
-.readonly {
+.disabled, .readonly {
   cursor: not-allowed;
 }
 .cbTextReadonly,
@@ -50,12 +54,18 @@
 .readonly .fieldLabel {
   --label_cursor: not-allowed;
 }
-.radio {
+[dir=ltr] .radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;
 }
-.duration {
+[dir=rtl] .radio {
+  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32);
+}
+[dir=ltr] .duration {
   margin-right: var(--zd_size15);
 }
+[dir=rtl] .duration {
+  margin-left: var(--zd_size15);
+}
 .durationWidth {
   width: var(--zd_size94);
 }
@@ -69,8 +79,8 @@
 }
 .phoneIcon {
   color: var(--zdt_fields_phoneicon_icon);
-  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
   display: inline-block;
+  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
   cursor: pointer;
 }
 .phoneIcon:hover {
@@ -89,9 +99,14 @@
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
-  margin-left: var(--zd_size5);
   composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
 }
+[dir=ltr] .lockIcon, [dir=ltr] .infoIcon {
+  margin-left: var(--zd_size5);
+}
+[dir=rtl] .lockIcon, [dir=rtl] .infoIcon {
+  margin-right: var(--zd_size5);
+}
 /* .infoIcon {
   opacity: 0;
   visibility: hidden;
@@ -108,15 +123,25 @@
 }
 .timeFormat {
   font-size: var(--zd_font_size11);
-  margin-left: var(--zd_size4);
   color: var(--zdt_fields_lockicon_icon);
 }
+[dir=ltr] .timeFormat {
+  margin-left: var(--zd_size4);
+}
+[dir=rtl] .timeFormat {
+  margin-right: var(--zd_size4);
+}
 .newTab {
-  margin-left: var(--zd_size6);
-  cursor: pointer;
   color: var(--zdt_fields_lockicon_icon);
   font-size: 0;
   display: none;
+  cursor: pointer;
+}
+[dir=ltr] .newTab {
+  margin-left: var(--zd_size6);
+}
+[dir=rtl] .newTab {
+  margin-right: var(--zd_size6);
 }
 .newTab:hover {
   color: var(--zdt_fields_phoneicon_icon);
@@ -131,18 +156,28 @@
 }
 .labelMandatory:after {
   content: '*';
-  padding-left: var(--zd_size2);
   color: var(--zdt_fields_lockicon_hover_icon);
 }
+[dir=ltr] .labelMandatory:after {
+  padding-left: var(--zd_size2);
+}
+[dir=rtl] .labelMandatory:after {
+  padding-right: var(--zd_size2);
+}
 .ePhiTag {
   composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
   color: var(--zdt_fields_phitag_text);
+  font-size: var(--zd_font_size12);
+  height: var(--zd_size18);
+  line-height: var(--zd_size18);
   background-color: var(--zdt_fields_phitag_bg);
   border: 1px solid var(--zdt_fields_phitag_border);
-  font-size: var(--zd_font_size12);
   padding: 0 var(--zd_size5);
   border-radius: var(--zd_size3);
+}
+[dir=ltr] .ePhiTag {
   margin-left: var(--zd_size8);
-  height: var(--zd_size18);
-  line-height: var(--zd_size18);
+}
+[dir=rtl] .ePhiTag {
+  margin-right: var(--zd_size8);
 }

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -1,34 +1,29 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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 PropTypes from 'prop-types';
-/**** Components ****/
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 
+/**** Components ****/
 import Label from '@zohodesk/components/lib/Label/Label';
 import MultiSelect from '@zohodesk/components/lib/MultiSelect/MultiSelect';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/**** props ****/
 
-import { FieldCommonDefaultProps } from '../props/FieldCommonDefaultProps';
-import { FieldCommonPropTypes } from '../props/FieldCommonPropTypes';
 /** CSS */
-
 import style from '../Fields.module.css';
 export default class MultiSelectField extends PureComponent {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
     this.handleGetRef = this.handleGetRef.bind(this);
-    this.onDropBoxOpen = this.onDropBoxOpen.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
-
+    this.onDropBoxOpen = this.onDropBoxOpen.bind(this);
+    // this.handleLabelClick = this.handleLabelClick.bind(this);
     this.onSearch = this.onSearch.bind(this);
     this.getNextOptions = this.getNextOptions.bind(this);
     this.getNextId = getUniqueId(this);
   }
-
   handleChange(selectedValueIds, selectedValues) {
     let {
       id,
@@ -36,7 +31,6 @@ export default class MultiSelectField extends PureComponent {
     } = this.props;
     onChange && onChange(id, selectedValueIds, selectedValues);
   }
-
   onDropBoxOpen() {
     let {
       onDropBoxOpen,
@@ -44,7 +38,6 @@ export default class MultiSelectField extends PureComponent {
     } = this.props;
     return onDropBoxOpen && onDropBoxOpen(id);
   }
-
   onSearch(searchStr) {
     let {
       onSearch,
@@ -54,7 +47,6 @@ export default class MultiSelectField extends PureComponent {
       id
     });
   }
-
   getNextOptions(searchStr) {
     let {
       getNextOptions,
@@ -64,7 +56,6 @@ export default class MultiSelectField extends PureComponent {
       id
     });
   }
-
   handleGetRef(el) {
     let {
       getRef,
@@ -72,7 +63,9 @@ export default class MultiSelectField extends PureComponent {
     } = this.props;
     this.multiSelectBox = el;
     getRef && getRef(el, id);
-  } // handleLabelClick() {
+  }
+
+  // handleLabelClick() {
   //   let { isFocusOnLabelClick } = this.props;
   //   if (
   //     isFocusOnLabelClick &&
@@ -83,7 +76,6 @@ export default class MultiSelectField extends PureComponent {
   //   }
   // }
 
-
   render() {
     let {
       labelName,
@@ -150,7 +142,8 @@ export default class MultiSelectField extends PureComponent {
       text: labelName,
       id: id,
       size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+      palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette
+      // onClick={this.handleLabelClick}
       ,
       customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
@@ -201,72 +194,9 @@ export default class MultiSelectField extends PureComponent {
       htmlFor: uniqueId
     }, ValidationMessageProps2)));
   }
-
 }
-MultiSelectField.propTypes = {
-  animationStyle: PropTypes.string,
-  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
-  emptyMessage: PropTypes.string,
-  errorType: PropTypes.oneOf(['primary', 'secondary']),
-  fieldSize: PropTypes.oneOf(['small', 'medium']),
-  getNextOptions: PropTypes.func,
-  getRef: PropTypes.func,
-  id: PropTypes.string,
-  isAnimate: PropTypes.bool,
-  isFocusOnLabelClick: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isSearching: PropTypes.bool,
-  labelName: PropTypes.string,
-  labelPalette: PropTypes.string,
-  needSelectAll: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  onDropBoxOpen: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onSearch: PropTypes.func,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)]).isRequired,
-  palette: PropTypes.string,
-  placeHolder: PropTypes.string,
-  popupGroup: PropTypes.string,
-  selectAllText: PropTypes.string,
-  selectedOptions: PropTypes.arrayOf(PropTypes.string).isRequired,
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.string,
-  textField: PropTypes.string,
-  title: PropTypes.string,
-  validationMessage: PropTypes.string,
-  validationPalette: PropTypes.string,
-  validationRuleMessage: PropTypes.string,
-  validationRulePalette: PropTypes.string,
-  valueField: PropTypes.string,
-  variant: PropTypes.string,
-  children: PropTypes.node,
-  customChildrenClass: PropTypes.string,
-  onFocus: PropTypes.func,
-  customProps: PropTypes.shape({
-    LabelProps: PropTypes.object,
-    MultiSelectProps: PropTypes.object,
-    ValidationMessageProps1: PropTypes.object,
-    ValidationMessageProps2: PropTypes.object
-  }),
-  i18nKeys: PropTypes.object,
-  ...FieldCommonPropTypes()
-};
-MultiSelectField.defaultProps = {
-  errorType: 'primary',
-  isAnimate: false,
-  needSelectAll: false,
-  size: 'medium',
-  textBoxSize: 'medium',
-  variant: 'default',
-  borderColor: 'default',
-  fieldSize: 'medium',
-  isFocusOnLabelClick: true,
-  labelPalette: 'default',
-  customProps: {},
-  i18nKeys: {},
-  ...FieldCommonDefaultProps()
-};
-
+MultiSelectField.propTypes = propTypes;
+MultiSelectField.defaultProps = defaultProps;
 if (false) {
   MultiSelectField.docs = {
     componentGroup: 'Form Fields',

package/es/form/fields/MultiSelectField/props/defaultProps.js

@@ -0,0 +1,16 @@
+import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
+export const defaultProps = {
+  errorType: 'primary',
+  isAnimate: false,
+  needSelectAll: false,
+  size: 'medium',
+  textBoxSize: 'medium',
+  variant: 'default',
+  borderColor: 'default',
+  fieldSize: 'medium',
+  isFocusOnLabelClick: true,
+  labelPalette: 'default',
+  customProps: {},
+  i18nKeys: {},
+  ...FieldCommonDefaultProps()
+};

package/es/form/fields/MultiSelectField/props/propTypes.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import { FieldCommonPropTypes } from '../../props/FieldCommonPropTypes';
+export const propTypes = {
+  animationStyle: PropTypes.string,
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  emptyMessage: PropTypes.string,
+  errorType: PropTypes.oneOf(['primary', 'secondary']),
+  fieldSize: PropTypes.oneOf(['small', 'medium']),
+  getNextOptions: PropTypes.func,
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isFocusOnLabelClick: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isSearching: PropTypes.bool,
+  labelName: PropTypes.string,
+  labelPalette: PropTypes.string,
+  needSelectAll: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxOpen: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)]).isRequired,
+  palette: PropTypes.string,
+  placeHolder: PropTypes.string,
+  popupGroup: PropTypes.string,
+  selectAllText: PropTypes.string,
+  selectedOptions: PropTypes.arrayOf(PropTypes.string).isRequired,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.string,
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  validationMessage: PropTypes.string,
+  validationPalette: PropTypes.string,
+  validationRuleMessage: PropTypes.string,
+  validationRulePalette: PropTypes.string,
+  valueField: PropTypes.string,
+  variant: PropTypes.string,
+  children: PropTypes.node,
+  customChildrenClass: PropTypes.string,
+  onFocus: PropTypes.func,
+  customProps: PropTypes.shape({
+    LabelProps: PropTypes.object,
+    MultiSelectProps: PropTypes.object,
+    ValidationMessageProps1: PropTypes.object,
+    ValidationMessageProps2: PropTypes.object
+  }),
+  i18nKeys: PropTypes.object,
+  ...FieldCommonPropTypes()
+};