@zohodesk/dot 1.4.10 → 1.4.12

package/lib/v1/form/fields/CheckBoxField/CheckBoxField.js

@@ -59,6 +59,7 @@ function CheckBoxField(props) {
       customProps = props.customProps,
       renderLabelProps = props.renderLabelProps,
       getRef = props.getRef,
+      getContainerRef = props.getContainerRef,
       onChange = props.onChange;
   var _customProps$LabelPro = customProps.LabelProps,
       LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
@@ -119,7 +120,8 @@ function CheckBoxField(props) {
     disabled: removeEvent,
     checked: checked,
     getRef: handleGetRef,
-    dataId: dataId
+    dataId: dataId,
+    getContainerRef: getContainerRef
   }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true
   }, labelElement)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({

package/lib/v1/form/fields/CheckBoxField/props/propTypes.js

@@ -23,6 +23,7 @@ var propTypes = _objectSpread({
   errorType: _propTypes["default"].oneOf(['primary', 'secondary']),
   fieldSize: _propTypes["default"].oneOf(['small', 'medium']),
   getRef: _propTypes["default"].func,
+  getContainerRef: _propTypes["default"].func,
   id: _propTypes["default"].string.isRequired,
   labelCustomClass: _propTypes["default"].string,
   labelName: _propTypes["default"].string,

package/lib/v1/form/fields/RadioField/RadioField.js

@@ -21,6 +21,8 @@ var _Radio = _interopRequireDefault(require("@zohodesk/components/es/v1/Radio/Ra
 
 var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
 
+var _useRadio2 = _interopRequireDefault(require("./useRadio"));
+
 var _FieldsModule = _interopRequireDefault(require("../../../../form/fields/Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -29,6 +31,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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); }
 
 var RadioField = function RadioField(props) {
@@ -46,11 +54,13 @@ var RadioField = function RadioField(props) {
       size = props.size,
       selectedValue = props.selectedValue,
       isActive = props.isActive,
+      getRef = props.getRef,
       dataId = props.dataId,
       dataSelectorId = props.dataSelectorId,
       validationRuleMessage = props.validationRuleMessage,
       validationRulePalette = props.validationRulePalette,
       isReadOnly = props.isReadOnly,
+      isBoxStyle = props.isBoxStyle,
       variant = props.variant,
       customProps = props.customProps,
       onChange = props.onChange;
@@ -65,9 +75,15 @@ var RadioField = function RadioField(props) {
       _customProps$Validati2 = customProps.ValidationMessageProps2,
       ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
 
-  var handleChange = function handleChange(value) {
-    onChange && onChange(id, value);
-  };
+  var _useRadio = (0, _useRadio2["default"])({
+    id: id,
+    onChange: onChange,
+    getRef: getRef,
+    options: options,
+    selectedValue: selectedValue
+  }),
+      handleGetRef = _useRadio.handleGetRef,
+      handleChange = _useRadio.handleChange;
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
@@ -81,14 +97,17 @@ var RadioField = function RadioField(props) {
     customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
     dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
   }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
+    className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
   }, options.map(function (option, index) {
     var text = option.text,
         value = option.value,
+        _option$disabled = option.disabled,
+        disabled = _option$disabled === void 0 ? false : _option$disabled,
         infoTooltip = option.infoTooltip;
+    var isChecked = selectedValue == value;
     return /*#__PURE__*/_react["default"].createElement("span", {
       key: index,
-      className: "".concat(_FieldsModule["default"].radio, " ").concat(!!infoTooltip ? _FieldsModule["default"].labelContainer : '')
+      className: "".concat(!isBoxStyle ? _FieldsModule["default"].radio : '', " ").concat(_FieldsModule["default"].radioWrap)
     }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], _extends({
       id: index,
       value: value,
@@ -96,20 +115,28 @@ var RadioField = function RadioField(props) {
       text: text,
       labelPalette: labelPalette,
       labelSize: labelSize,
-      active: isActive,
-      disabled: isDisabled,
+      active: isActive || isBoxStyle && isChecked,
+      disabled: disabled || isDisabled,
       onChange: handleChange,
+      getRef: handleGetRef,
       size: size,
-      checked: selectedValue == value,
+      checked: isChecked,
       dataId: dataId,
       isReadOnly: isReadOnly,
       variant: variant
-    }, RadioProps)), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+    }, RadioProps, {
+      a11y: _objectSpread({
+        tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1'
+      }, RadioProps.a11y),
+      customClass: _objectSpread({
+        customRadioWrap: "".concat(isBoxStyle ? _FieldsModule["default"].radioBox : '', " ").concat(isBoxStyle && isChecked ? _FieldsModule["default"].radioBoxActive : '')
+      }, RadioProps.customClass)
+    }), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
       name: "ZD-GN-info",
       size: "16",
       title: infoTooltip,
       iconClass: _FieldsModule["default"].infoIcon
-    }, InfoIconProps)) : null);
+    }, InfoIconProps)) : null));
   })), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
     text: validationMessage,
     palette: validationPalette,

package/lib/v1/form/fields/RadioField/props/defaultProps.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultProps = void 0;
 var defaultProps = {
   errorType: 'primary',
+  isBoxStyle: false,
   isMandatory: false,
   isDisabled: false,
   isReadOnly: false,

package/lib/v1/form/fields/RadioField/props/propTypes.js

@@ -12,8 +12,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var propTypes = {
   dataId: _propTypes["default"].string,
   errorType: _propTypes["default"].oneOf(['primary', 'secondary']),
+  getRef: _propTypes["default"].func,
   id: _propTypes["default"].string,
   isActive: _propTypes["default"].bool,
+  isBoxStyle: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
   isMandatory: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,

package/lib/v1/form/fields/RadioField/useRadio.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = useRadio;
+
+var _react = require("react");
+
+function useRadio(_ref) {
+  var id = _ref.id,
+      onChange = _ref.onChange,
+      getRef = _ref.getRef,
+      options = _ref.options,
+      selectedValue = _ref.selectedValue;
+
+  var handleChange = function handleChange(value) {
+    onChange && onChange(id, value);
+  };
+
+  var radioRef = (0, _react.useRef)({
+    radios: {},
+    focus: function focus() {}
+  }).current;
+  var firstRadioValue = options[0].value;
+
+  function handleGetRef(ele, val) {
+    radioRef.radios[val] = ele;
+  }
+
+  function handleFocus() {
+    if (!!selectedValue) {
+      radioRef.radios[selectedValue].focus();
+    } else {
+      radioRef.radios[firstRadioValue].focus();
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    radioRef.focus = handleFocus;
+    getRef && getRef(radioRef, id);
+    return function () {
+      getRef && getRef(null, id);
+    };
+  }, [getRef]);
+  return {
+    handleGetRef: handleGetRef,
+    handleChange: handleChange
+  };
+}

package/lib/v1/form/fields/SelectField/SelectField.js

@@ -100,13 +100,7 @@ var SelectField = function SelectField(props) {
 
   var handleGetRef = function handleGetRef(el) {
     getRef && getRef(el, id);
-  }; // handleLabelClick() {
-  //   let { isFocusOnLabelClick } = this.props;
-  //   if (isFocusOnLabelClick && this.selectBox && this.selectBox.focus) {
-  //     this.selectBox.focus();
-  //   }
-  // }
-
+  };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),

package/lib/v1/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -33,6 +33,8 @@ var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es
 
 var _CustomResponsive = require("@zohodesk/components/es/v1/Responsive/CustomResponsive");
 
+var _MultiSelectHeader = _interopRequireDefault(require("@zohodesk/components/es/v1/MultiSelect/MultiSelectHeader"));
+
 var _General = require("../../../../utils/General");
 
 var _Common = require("@zohodesk/components/es/utils/Common.js");
@@ -41,6 +43,8 @@ var _TagsMultiSelectModule = _interopRequireDefault(require("../../../../form/fi
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -200,11 +204,28 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           boxSize = _this$props3.boxSize,
           onSelectTag = _this$props3.onSelectTag,
           clickableTag = _this$props3.clickableTag,
-          dataSelectorId = _this$props3.dataSelectorId;
+          dataSelectorId = _this$props3.dataSelectorId,
+          handleSelectAll = _this$props3.handleSelectAll,
+          selectAllText = _this$props3.selectAllText,
+          needSelectAll = _this$props3.needSelectAll,
+          customClass = _this$props3.customClass,
+          customProps = _this$props3.customProps;
       var showAll = this.state.showAll;
       var chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
+      var _customClass$tagCusto = customClass.tagCustomClass,
+          tagCustomClass = _customClass$tagCusto === void 0 ? '' : _customClass$tagCusto,
+          _customClass$listItem = customClass.listItemClass,
+          listItemClass = _customClass$listItem === void 0 ? '' : _customClass$listItem,
+          _customClass$textBoxI = customClass.textBoxIconWrapperClass,
+          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI;
+      var _customProps$TextBoxI = customProps.TextBoxIconProps,
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
+          _customProps$TagWrapp = customProps.TagWrapperProps,
+          TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
+          _customProps$TagProps = customProps.TagProps,
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: " ".concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
+        className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
         onClick: _General.stopBubbling,
         "data-id": "".concat(dataId, "_tagsContainer"),
         "data-test-id": "".concat(dataId, "_tagsContainer"),
@@ -213,26 +234,29 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         alignBox: "row",
         align: "vertical",
         isCover: false,
-        className: _TagsMultiSelectModule["default"].tagDiv,
+        className: "".concat(_TagsMultiSelectModule["default"].tagDiv, " ").concat(textBoxIconWrapperClass),
         wrap: "wrap",
         eleRef: getTargetRef,
         scroll: "vertical"
       }, tagsList.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, tagsList.map(function (tag, index) {
         var name = tag.name,
             tagType = tag.tagType,
-            id = tag.id;
-        return index < chipLimit ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+            id = tag.id,
+            boxCustomProps = tag.boxCustomProps,
+            tagCustomProps = tag.tagCustomProps;
+        return index < chipLimit ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
           className: _TagsMultiSelectModule["default"].tag,
           key: index
-        }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+        }, TagWrapperProps, boxCustomProps), /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({
           id: id,
           text: name,
           onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
           closeTitle: i18nKeys.deleteText,
           palette: clickableTag ? 'defaultLink' : tagType === 'SYSTEM' ? 'primary' : 'default',
           isReadOnly: isReadOnly,
-          onSelectTag: onSelectTag ? onSelectTag : undefined
-        })) : null;
+          onSelectTag: onSelectTag ? onSelectTag : undefined,
+          customClass: tagCustomClass
+        }, TagProps, tagCustomProps))) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,
         dataId: "".concat(dataId, "_tagsMore"),
@@ -244,7 +268,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         className: _TagsMultiSelectModule["default"].inputWrapper
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: _TagsMultiSelectModule["default"].custmSpan
-      }, name), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      }, name), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: htmlId,
         dataId: "".concat(dataId, "_tagInp"),
         value: name,
@@ -261,7 +285,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         },
         size: "xsmall",
         inputRef: this.textInputRef
-      }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+      }, TextBoxIconProps), getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
       }, function (_ref2) {
@@ -283,7 +307,12 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           alignBox: "row"
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
-        }, isTagListLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+          onSelect: handleSelectAll,
+          selectAllText: selectAllText,
+          suggestions: searchList,
+          dataId: "".concat(dataId, "_selectAll")
+        }) : null, isTagListLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: "".concat(tabletMode ? '' : _TagsMultiSelectModule["default"].viewpopNew)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -296,7 +325,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           shrink: true
         }, searchList.map(function (item, index) {
           var name = item.name,
-              isNew = item.isNew;
+              isNew = item.isNew,
+              listItemProps = item.listItemProps;
           return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
             key: index,
             index: index,
@@ -307,7 +337,9 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             needTick: true,
             highlight: selectSearchIndex === index,
             getRef: _this3.getSelectedItemRef,
-            isDisabled: listDisabled
+            isDisabled: listDisabled,
+            customProps: listItemProps,
+            customClass: listItemClass
           }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
             alignBox: "row",
             align: "vertical"

package/lib/v1/form/fields/TagsMultiSelect/props/defaultProps.js

@@ -13,6 +13,9 @@ var defaultProps = {
   dataId: '',
   boxSize: 'default',
   clickableTag: false,
-  dataSelectorId: 'tagsMultiSelectField'
+  dataSelectorId: 'tagsMultiSelectField',
+  needSelectAll: false,
+  customClass: {},
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

package/lib/v1/form/fields/TagsMultiSelect/props/propTypes.js

@@ -50,6 +50,15 @@ var propTypes = {
   boxSize: _propTypes["default"].string,
   onSelectTag: _propTypes["default"].func,
   clickableTag: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  handleSelectAll: _propTypes["default"].func,
+  selectAllText: _propTypes["default"].string,
+  needSelectAll: _propTypes["default"].bool,
+  customClass: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    TextBoxIconProps: _propTypes["default"].object,
+    TagWrapperProps: _propTypes["default"].object,
+    TagProps: _propTypes["default"].object
+  })
 };
 exports.propTypes = propTypes;

package/lib/v1/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -117,7 +117,11 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
       value = fieldProperties.value,
       selectedValueCount = fieldProperties.selectedValueCount,
       validationMessage = fieldProperties.validationMessage,
-      options = fieldProperties.options;
+      options = fieldProperties.options,
+      infoText = fieldProperties.infoText,
+      isLocked = fieldProperties.isLocked,
+      lockedInfoText = fieldProperties.lockedInfoText,
+      alignField = fieldProperties.alignField;
   options = options || [];
 
   var handleKeyUp = function handleKeyUp(event) {
@@ -230,7 +234,10 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     "data-selector-id": dataSelectorId
   }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
     ePhiData: ePhiData,
-    alignContainer: "baseline",
+    alignContainer: alignField,
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
     renderProps: {
       end: renderEnd
     }

package/lib/v1/form/fields/TagsMultiSelectField/props/defaultProps.js

@@ -16,7 +16,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var defaultProps = _objectSpread({
   fieldProperties: {
     isDisabled: false,
-    isMandatory: false
+    isMandatory: false,
+    isLocked: false,
+    alignField: 'baseline'
   },
   styleProperties: {
     containerClass: '',

package/lib/v1/form/fields/TagsMultiSelectField/props/propTypes.js

@@ -22,7 +22,11 @@ var propTypes = {
     selectedValueCount: _propTypes["default"].string,
     validationMessage: _propTypes["default"].string,
     options: _propTypes["default"].array,
-    clickableTag: _propTypes["default"].bool
+    clickableTag: _propTypes["default"].bool,
+    infoText: _propTypes["default"].string,
+    isLocked: _propTypes["default"].bool,
+    lockedInfoText: _propTypes["default"].string,
+    alignField: _propTypes["default"].oneOf(['vertical', 'baseline'])
   }),
   styleProperties: _propTypes["default"].shape({
     labelSize: _propTypes["default"].string,