@zohodesk/dot 1.4.9 → 1.4.11

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

@@ -77,20 +77,20 @@
   background-color: transparent;
 }
 
-.small :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
-.small :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel {
+.small :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
+.small :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel {
   color: var(--zdt_texteditor_default_text);
 }
 
-.small :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .small :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .medium :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .medium :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .large :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .large :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel {
+.small :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .small :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .large :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .large :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel {
   background-color: var(--zdt_texteditor_menu_li_bg);
 }
 
@@ -101,10 +101,10 @@
 /* large type editor - ticket add form editor */
 .large :global .KB_Editor,
 .large :global .KB_Editor_menus .KB_Editor_MultiTools,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools>li,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
 .default :global .KB_Editor,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -160,24 +160,24 @@
   min-height: inherit ;
 }
 
-.large :global .KB_Editor_menus .KB_Editor_MultiTools>li,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.large :global .KB_Editor_menus .KB_Editor_MultiTools>li, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   padding: 0 ;
   float: unset;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-right: 0 ;
 }
 
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-left: 0 ;
 }
 
@@ -190,14 +190,14 @@
   float: unset !important;
 }
 
-.large :global .KB_Editor_menus>ul>li>span>svg,
-.default :global .KB_Editor_menus>ul>li>span>svg {
+.large :global .KB_Editor_menus > ul > li > span > svg,
+.default :global .KB_Editor_menus > ul > li > span > svg {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
 }
 
-.large :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg,
-.default :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
+.large :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg,
+.default :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
@@ -241,18 +241,18 @@
   left: 0 ;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-right: var(--zd_size2) ;
 }
 
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-left: var(--zd_size2) ;
 }
 
 /* xlarge type editor - reply area, blue print cases - full height hover style */
 .xlarge :global .KB_Editor,
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -293,7 +293,7 @@
   min-height: inherit ;
 }
 
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -302,11 +302,11 @@
   float: unset;
 }
 
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-right: 0 ;
 }
 
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-left: 0 ;
 }
 
@@ -324,12 +324,12 @@
   padding: var(--zd_size6) ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span>svg {
+.xlarge :global .KB_Editor_menus > ul > li > span > svg {
   width: var(--zd_size22) ;
   height: var(--zd_size22) ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
+.xlarge :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
@@ -354,13 +354,13 @@
   left: 0 ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span.SnippetIcon svg {
+.xlarge :global .KB_Editor_menus > ul > li > span.SnippetIcon svg {
   width: var(--zd_size17) ;
   height: var(--zd_size21) ;
   padding: 0 var(--zd_size7) ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span.TemplateIcon svg {
+.xlarge :global .KB_Editor_menus > ul > li > span.TemplateIcon svg {
   width: var(--zd_size16) ;
   height: var(--zd_size16) ;
   padding: 0 var(--zd_size9) ;
@@ -393,16 +393,31 @@
   padding: 0 var(--zd_size7) ;
 }
 
-.xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
+.xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon > svg {
   width: var(--zd_size12) ;
   height: var(--zd_size12) ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon):not(.KB_Editor_Richtext):not(.KB_Editor_PlainText) {
+.xlarge
+  :global
+  .KB_Editor_menus
+  > ul
+  > li
+  > span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(
+    .TemplateIcon
+  ):not(.KB_Editor_Richtext):not(.KB_Editor_PlainText) {
   height: var(--zd_size21) ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon)>svg {
+.xlarge
+  :global
+  .KB_Editor_menus
+  > ul
+  > li
+  > span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(
+    .TemplateIcon
+  )
+  > svg {
   width: var(--zd_size21) ;
   height: var(--zd_size21) ;
   padding: 0 var(--zd_size4) ;
@@ -427,7 +442,7 @@
 /* medium type editor - snippet, bug tracker cases */
 .medium :global .KB_Editor,
 .medium :global .KB_Editor_menus .KB_Editor_MultiTools,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -468,7 +483,7 @@
   min-height: inherit ;
 }
 
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -481,21 +496,21 @@
   line-height: 0;
 }
 
-.medium :global .KB_Editor_menus>ul>li>span>svg {
+.medium :global .KB_Editor_menus > ul > li > span > svg {
   width: var(--zd_size22) ;
   height: var(--zd_size22) ;
 }
 
-.medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
+.medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
 
-[dir=ltr] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
+[dir=ltr] .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   padding: 0 0 0 var(--zd_size2) ;
 }
 
-[dir=rtl] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
+[dir=rtl] .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   padding: 0 var(--zd_size2) 0 0 ;
 }
 
@@ -532,7 +547,7 @@
   padding: 0 var(--zd_size3) ;
 }
 
-.medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
+.medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon > svg {
   width: var(--zd_size12) ;
   height: var(--zd_size12) ;
 }
@@ -612,13 +627,13 @@
   line-height: 0;
 }
 
-.small :global .KB_Editor_menus>ul>li>span>svg,
-.mini :global .KB_Editor_menus>ul>li>span>svg {
+.small :global .KB_Editor_menus > ul > li > span > svg,
+.mini :global .KB_Editor_menus > ul > li > span > svg {
   width: var(--zd_size25) ;
   height: var(--zd_size25) ;
 }
 
-.small :global .KB_Editor_menus>ul>li>span>svg, .mini :global .KB_Editor_menus>ul>li>span>svg {
+.small :global .KB_Editor_menus > ul > li > span > svg, .mini :global .KB_Editor_menus > ul > li > span > svg {
   padding: 0 var(--zd_size6) ;
 }
 
@@ -759,7 +774,8 @@
   position: absolute !important;
   top: 0 ;
   opacity: 0;
-  visibility: hidden;
+  /* visibility: hidden; */
+  z-index: -1;
 }
 
 [dir=ltr] .editorHide :global .KB_Editor {
@@ -768,4 +784,4 @@
 
 [dir=rtl] .editorHide :global .KB_Editor {
   right: 0 ;
-}
+}

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

@@ -11,8 +11,6 @@ import Select from '@zohodesk/components/es/v1/Select/Select';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/**** props ****/
-
 /** CSS */
 
 import style from '../../../../form/fields/Fields.module.css';
@@ -84,13 +82,7 @@ const SelectField = props => {
 
   const handleGetRef = el => {
     getRef && getRef(el, id);
-  }; // handleLabelClick() {
-  //   let { isFocusOnLabelClick } = this.props;
-  //   if (isFocusOnLabelClick && this.selectBox && this.selectBox.focus) {
-  //     this.selectBox.focus();
-  //   }
-  // }
-
+  };
 
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,

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

@@ -1,3 +1,5 @@
+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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -11,6 +13,7 @@ import DropDownSeparator from '@zohodesk/components/es/v1/DropDown/DropDownSepar
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import MultiSelectHeader from '@zohodesk/components/es/v1/MultiSelect/MultiSelectHeader';
 import { stopBubbling } from '../../../../utils/General';
 import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common.js';
 import style from '../../../../form/fields/TagsMultiSelect/TagsMultiSelect.module.css';
@@ -140,14 +143,29 @@ export default class TagsMultiSelect extends React.Component {
       boxSize,
       onSelectTag,
       clickableTag,
-      dataSelectorId
+      dataSelectorId,
+      handleSelectAll,
+      selectAllText,
+      needSelectAll,
+      customClass,
+      customProps
     } = this.props;
     let {
       showAll
     } = this.state;
     let chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
+    let {
+      tagCustomClass = '',
+      listItemClass = '',
+      textBoxIconWrapperClass = ''
+    } = customClass;
+    const {
+      TextBoxIconProps = {},
+      TagWrapperProps = {},
+      TagProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: ` ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
+      className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
               ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder ? style.active : ''}` : ''} ${className}`,
       onClick: stopBubbling,
       "data-id": `${dataId}_tagsContainer`,
@@ -157,7 +175,7 @@ export default class TagsMultiSelect extends React.Component {
       alignBox: "row",
       align: "vertical",
       isCover: false,
-      className: style.tagDiv,
+      className: `${style.tagDiv} ${textBoxIconWrapperClass}`,
       wrap: "wrap",
       eleRef: getTargetRef,
       scroll: "vertical"
@@ -165,20 +183,23 @@ export default class TagsMultiSelect extends React.Component {
       let {
         name,
         tagType,
-        id
+        id,
+        boxCustomProps,
+        tagCustomProps
       } = tag;
-      return index < chipLimit ? /*#__PURE__*/React.createElement(Box, {
+      return index < chipLimit ? /*#__PURE__*/React.createElement(Box, _extends({
         className: style.tag,
         key: index
-      }, /*#__PURE__*/React.createElement(Tag, {
+      }, TagWrapperProps, boxCustomProps), /*#__PURE__*/React.createElement(Tag, _extends({
         id: id,
         text: name,
         onRemove: isReadOnly ? null : deleteTag.bind(this, 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.createElement(Box, {
       className: style.moreLess,
       dataId: `${dataId}_tagsMore`,
@@ -190,7 +211,7 @@ export default class TagsMultiSelect extends React.Component {
       className: style.inputWrapper
     }, /*#__PURE__*/React.createElement("span", {
       className: style.custmSpan
-    }, name), /*#__PURE__*/React.createElement(TextBoxIcon, {
+    }, name), /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       htmlId: htmlId,
       dataId: `${dataId}_tagInp`,
       value: name,
@@ -207,7 +228,7 @@ export default class TagsMultiSelect extends React.Component {
       },
       size: "xsmall",
       inputRef: this.textInputRef
-    }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }, TextBoxIconProps), getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {
@@ -231,7 +252,12 @@ export default class TagsMultiSelect extends React.Component {
         alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
-      }, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
+      }, needSelectAll ? /*#__PURE__*/React.createElement(MultiSelectHeader, {
+        onSelect: handleSelectAll,
+        selectAllText: selectAllText,
+        suggestions: searchList,
+        dataId: `${dataId}_selectAll`
+      }) : null, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: `${tabletMode ? '' : style.viewpopNew}`
       }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
@@ -245,7 +271,8 @@ export default class TagsMultiSelect extends React.Component {
       }, searchList.map((item, index) => {
         let {
           name,
-          isNew
+          isNew,
+          listItemProps
         } = item;
         return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
           key: index,
@@ -257,7 +284,9 @@ export default class TagsMultiSelect extends React.Component {
           needTick: true,
           highlight: selectSearchIndex === index,
           getRef: this.getSelectedItemRef,
-          isDisabled: listDisabled
+          isDisabled: listDisabled,
+          customProps: listItemProps,
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

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

@@ -7,5 +7,8 @@ export const defaultProps = {
   dataId: '',
   boxSize: 'default',
   clickableTag: false,
-  dataSelectorId: 'tagsMultiSelectField'
+  dataSelectorId: 'tagsMultiSelectField',
+  needSelectAll: false,
+  customClass: {},
+  customProps: {}
 };

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

@@ -40,5 +40,14 @@ export const propTypes = {
   boxSize: PropTypes.string,
   onSelectTag: PropTypes.func,
   clickableTag: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  handleSelectAll: PropTypes.func,
+  selectAllText: PropTypes.string,
+  needSelectAll: PropTypes.bool,
+  customClass: PropTypes.object,
+  customProps: PropTypes.shape({
+    TextBoxIconProps: PropTypes.object,
+    TagWrapperProps: PropTypes.object,
+    TagProps: PropTypes.object
+  })
 };

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

@@ -75,7 +75,11 @@ const TagsMultiSelectField = props => {
     value,
     selectedValueCount,
     validationMessage,
-    options
+    options,
+    infoText,
+    isLocked,
+    lockedInfoText,
+    alignField
   } = fieldProperties;
   options = options || [];
 
@@ -191,7 +195,10 @@ const TagsMultiSelectField = props => {
     "data-selector-id": dataSelectorId
   }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
     ePhiData: ePhiData,
-    alignContainer: "baseline",
+    alignContainer: alignField,
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
     renderProps: {
       end: renderEnd
     }

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

@@ -2,7 +2,9 @@ import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
 export const defaultProps = {
   fieldProperties: {
     isDisabled: false,
-    isMandatory: false
+    isMandatory: false,
+    isLocked: false,
+    alignField: 'baseline'
   },
   styleProperties: {
     containerClass: '',

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

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