@zohodesk/dot 1.0.0-temp-181.2 → 1.0.0-temp-181.4

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

@@ -10,6 +10,9 @@ import Icon from '@zohodesk/icons/es/Icon';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import Radio from '@zohodesk/components/es/v1/Radio/Radio';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
+/** Hook */
+
+import useRadio from './useRadio';
 /** Css */
 
 import style from '../../../../form/fields/Fields.module.css';
@@ -30,11 +33,13 @@ const RadioField = props => {
     size,
     selectedValue,
     isActive,
+    getRef,
     dataId,
     dataSelectorId,
     validationRuleMessage,
     validationRulePalette,
     isReadOnly,
+    isBoxStyle,
     variant,
     customProps,
     onChange
@@ -46,11 +51,16 @@ const RadioField = props => {
     ValidationMessageProps1 = {},
     ValidationMessageProps2 = {}
   } = customProps;
-
-  const handleChange = value => {
-    onChange && onChange(id, value);
-  };
-
+  const {
+    handleGetRef,
+    handleChange
+  } = useRadio({
+    id,
+    onChange,
+    getRef,
+    options,
+    selectedValue
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
     "data-title": isDisabled ? title : null,
@@ -63,16 +73,18 @@ const RadioField = props => {
     customClass: `${style.fieldLabel} ${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_medium : ''} ${style.radioContainer}`
+    className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
   }, options.map((option, index) => {
     let {
       text,
       value,
+      disabled = false,
       infoTooltip
     } = option;
+    let isChecked = selectedValue == value;
     return /*#__PURE__*/React.createElement("span", {
       key: index,
-      className: `${style.radio} ${!!infoTooltip ? style.labelContainer : ''}`
+      className: `${!isBoxStyle ? style.radio : ''} ${style.radioWrap}`
     }, /*#__PURE__*/React.createElement(Radio, _extends({
       id: index,
       value: value,
@@ -80,20 +92,30 @@ const 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.createElement(Icon, _extends({
+    }, RadioProps, {
+      a11y: {
+        tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
+        ...RadioProps.a11y
+      },
+      customClass: {
+        customRadioWrap: `${isBoxStyle ? style.radioBox : ''} ${isBoxStyle && isChecked ? style.radioBoxActive : ''}`,
+        ...RadioProps.customClass
+      }
+    }), !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, _extends({
       name: "ZD-GN-info",
       size: "16",
       title: infoTooltip,
       iconClass: style.infoIcon
-    }, InfoIconProps)) : null);
+    }, InfoIconProps)) : null));
   })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
     text: validationMessage,
     palette: validationPalette,

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

@@ -1,5 +1,6 @@
 export const defaultProps = {
   errorType: 'primary',
+  isBoxStyle: false,
   isMandatory: false,
   isDisabled: false,
   isReadOnly: false,

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

@@ -2,8 +2,10 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
   errorType: PropTypes.oneOf(['primary', 'secondary']),
+  getRef: PropTypes.func,
   id: PropTypes.string,
   isActive: PropTypes.bool,
+  isBoxStyle: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isMandatory: PropTypes.bool,
   isReadOnly: PropTypes.bool,

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

@@ -0,0 +1,44 @@
+import { useRef, useEffect } from 'react';
+export default function useRadio(_ref) {
+  let {
+    id,
+    onChange,
+    getRef,
+    options,
+    selectedValue
+  } = _ref;
+
+  const handleChange = value => {
+    onChange && onChange(id, value);
+  };
+
+  const radioRef = useRef({
+    radios: {},
+    focus: () => {}
+  }).current;
+  const 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();
+    }
+  }
+
+  useEffect(() => {
+    radioRef.focus = handleFocus;
+    getRef && getRef(radioRef, id);
+    return () => {
+      getRef && getRef(null, id);
+    };
+  }, [getRef]);
+  return {
+    handleGetRef,
+    handleChange
+  };
+}

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,

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

@@ -10,7 +10,8 @@ const Section = props => {
     titleClass,
     className,
     column,
-    formName
+    formName,
+    children
   } = props;
   return /*#__PURE__*/React.createElement("div", {
     "data-id": dataId,
@@ -22,7 +23,7 @@ const Section = props => {
     className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
     "data-id": formName && formName,
     "data-test-id": formName && formName
-  }, this.props.children));
+  }, children));
 };
 
 export default Section;

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

@@ -110,6 +110,7 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
           dataSelectorId = _this$props3.dataSelectorId,
           validationRuleMessage = _this$props3.validationRuleMessage,
           validationRulePalette = _this$props3.validationRulePalette,
+          getContainerRef = _this$props3.getContainerRef,
           infoText = _this$props3.infoText,
           fieldSize = _this$props3.fieldSize,
           labelPalette = _this$props3.labelPalette,
@@ -167,7 +168,8 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
         disabled: removeEvent,
         checked: checked,
         getRef: this.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/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/form/fields/Fields.module.css

@@ -60,6 +60,26 @@
 [dir=rtl] .radio {
   margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32) ;
 }
+.radio, .radioWrap {
+  max-width: 100% 
+}
+.radiosWrapper {
+  gap: var(--zd_size10) 
+}
+.radioBox {
+  max-width: 100% ;
+  height: var(--zd_size36) ;
+  transition: border var(--zd_transition3);
+  padding: 0 var(--zd_size10) ;
+  border: 1px solid var(--zdt_radiofield_box_border);
+  border-radius: 6px
+}
+.radioBox:hover, .radioBoxActive {
+  border-color: var(--zdt_radiofield_box_active_border)
+}
+.radioBoxActive {
+  background-color: var(--zdt_radiofield_box_active_bg)
+}
 [dir=ltr] .duration {
   margin-right: var(--zd_size15) ;
 }

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

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
+
 var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
 
 var _Radio = _interopRequireDefault(require("@zohodesk/components/lib/Radio/Radio"));
@@ -103,6 +105,8 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$RadioPro = customProps.RadioProps,
           RadioProps = _customProps$RadioPro === void 0 ? {} : _customProps$RadioPro,
+          _customProps$InfoIcon = customProps.InfoIconProps,
+          InfoIconProps = _customProps$InfoIcon === void 0 ? {} : _customProps$InfoIcon,
           _customProps$Validati = customProps.ValidationMessageProps1,
           ValidationMessageProps1 = _customProps$Validati === void 0 ? {} : _customProps$Validati,
           _customProps$Validati2 = customProps.ValidationMessageProps2,
@@ -122,7 +126,10 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {
         var text = option.text,
-            value = option.value;
+            value = option.value,
+            _option$disabled = option.disabled,
+            disabled = _option$disabled === void 0 ? false : _option$disabled,
+            infoTooltip = option.infoTooltip;
         return /*#__PURE__*/_react["default"].createElement("span", {
           key: index,
           className: "".concat(_FieldsModule["default"].radio)
@@ -134,14 +141,19 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           labelPalette: labelPalette,
           labelSize: labelSize,
           active: isActive,
-          disabled: isDisabled,
+          disabled: disabled || isDisabled,
           onChange: _this2.handleChange,
           size: size,
           checked: selectedValue == value,
           dataId: dataId,
           isReadOnly: isReadOnly,
           variant: variant
-        }, RadioProps)));
+        }, RadioProps), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+          name: "ZD-GN-info",
+          size: "16",
+          title: infoTooltip,
+          iconClass: _FieldsModule["default"].infoIcon
+        }, InfoIconProps)) : null));
       })), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,

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

@@ -33,12 +33,12 @@ var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/li
 
 var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
 
+var _MultiSelectHeader = _interopRequireDefault(require("@zohodesk/components/lib/MultiSelect/MultiSelectHeader"));
+
 var _General = require("../../../utils/General");
 
 var _Common = require("@zohodesk/components/lib/utils/Common.js");
 
-var _MultiSelectHeader = _interopRequireDefault(require("@zohodesk/components/lib/MultiSelect/MultiSelectHeader"));
-
 var _TagsMultiSelectModule = _interopRequireDefault(require("./TagsMultiSelect.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -225,7 +225,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _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"),
@@ -247,7 +247,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         return index < chipLimit ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
           className: _TagsMultiSelectModule["default"].tag,
           key: index
-        }, boxCustomProps, TagWrapperProps), /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({
+        }, TagWrapperProps, boxCustomProps), /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({
           id: id,
           text: name,
           onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
@@ -256,7 +256,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           isReadOnly: isReadOnly,
           onSelectTag: onSelectTag ? onSelectTag : undefined,
           customClass: tagCustomClass
-        }, tagCustomProps, TagProps))) : null;
+        }, TagProps, tagCustomProps))) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,
         dataId: "".concat(dataId, "_tagsMore"),

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -1,3 +1,6 @@
+.container {
+  position: relative;
+}
 .tag {
   max-width: 100% ;
 }
@@ -91,6 +94,12 @@
   max-width: 100% ;
   visibility: hidden;
 }
+[dir=ltr] .custmSpan {
+  padding-right: var(--zd_size28) ;
+}
+[dir=rtl] .custmSpan {
+  padding-left: var(--zd_size28) ;
+}
 .custmInp {
   position: absolute;
   top: 0 ;

package/lib/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/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/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,

package/lib/v1/DotWrapper/DotWrapper.js

@@ -9,6 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _dynamicImports = require("./libraryChunks/dynamicImports");
 
+require("@zohodesk/components/assets/Contrast/lightContrastLightness.module.css");
+
+require("@zohodesk/components/assets/Contrast/darkContrastLightness.module.css");
+
+require("@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css");
+
 require("@zohodesk/variables/assets/colorVariables.module.css");
 
 require("@zohodesk/variables/assets/dotVariables.module.css");
@@ -57,7 +63,7 @@ function DotWrapper(props) {
   var combinedStyles = _objectSpread(_objectSpread({}, baseZoom), baseFont);
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(className, " rootWrapper"),
+    className: "rootWrapper ".concat(className),
     style: combinedStyles
   }, children);
 }