@zohodesk/dot 1.4.10 → 1.4.12

package/README.md

@@ -2,11 +2,21 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.4.12
+
+- **CheckBoxField** - getContainerRef prop supported
+- **RadioField** - infoTooltip, disabled support added for the radio
+- **v1/RadioField** - getRef, isBoxStyle props supported
+
+# 1.4.11
+
+- **TagsMultiSelectField** - infoText, isLocked, lockedInfoText, alignField props added, position relative added for parent.
+- **v1/TagsMultiSelect** - handleSelectAll, needSelectAll, selectAllText, customClass, customProps props supported
+
 # 1.4.10
 
 - **TextEditor** - FireFox Focus Issue Fixed (Removed Visibility : Hidden)
 
-
 # 1.4.9
 
 - **GlobalNotification** 

package/assets/Appearance/dark/mode/Dot_DarkMode.module.css

@@ -140,6 +140,9 @@
 	--zdt_flipcard_default_text: hsla(0, 0.00%, calc(46.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* form fields */
+	--zdt_radiofield_box_border: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_radiofield_box_active_border: var(--zdt_cta_primary_border);
+	--zdt_radiofield_box_active_bg: var(--zdtm_cta_primary_light_bg_default_inverse_low);
 	--zdt_fields_phoneicon_icon: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_fields_phoneicon_hover_icon: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_fields_lockicon_icon: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -140,6 +140,9 @@
 	--zdt_flipcard_default_text: hsla(0, 0.00%, calc(46.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* form fields */
+	--zdt_radiofield_box_border: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_radiofield_box_active_border: var(--zdt_cta_primary_border);
+	--zdt_radiofield_box_active_bg: var(--zdtm_cta_primary_light_bg_default_inverse_low);
 	--zdt_fields_phoneicon_icon: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_fields_phoneicon_hover_icon: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_fields_lockicon_icon: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css

@@ -140,6 +140,9 @@
 	--zdt_flipcard_default_text: hsla(0, 0.00%, calc(46.67% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* form fields */
+	--zdt_radiofield_box_border: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_radiofield_box_active_border: var(--zdt_cta_primary_border);
+	--zdt_radiofield_box_active_bg: var(--zdtm_cta_primary_light_bg_default_inverse_low);
 	--zdt_fields_phoneicon_icon: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_fields_phoneicon_hover_icon: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_fields_lockicon_icon: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/coverage/ExternalLink/ExternalLink.js.html

@@ -214,7 +214,7 @@ ExternalLink.propTypes = propTypes;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/ExternalLink/ExternalLink.module.css.html

@@ -79,7 +79,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/ExternalLink/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/ExternalLink/props/defaultProps.js.html

@@ -85,7 +85,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/ExternalLink/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/ExternalLink/props/propTypes.js.html

@@ -109,7 +109,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/IconButton/IconButton.js.html

@@ -451,7 +451,7 @@ IconButton.defaultProps = defaultProps;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/IconButton/IconButton.module.css.html

@@ -139,7 +139,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/IconButton/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/IconButton/props/defaultProps.js.html

@@ -121,7 +121,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/IconButton/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/IconButton/props/propTypes.js.html

@@ -172,7 +172,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Image/Image.js.html

@@ -169,7 +169,7 @@ Image.defaultProps = defaultProps;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Image/Image.module.css.html

@@ -103,7 +103,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Image/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/Image/props/defaultProps.js.html

@@ -82,7 +82,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Image/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/Image/props/propTypes.js.html

@@ -112,7 +112,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html

@@ -433,7 +433,7 @@ AvatarWithTeam.propTypes = propTypes;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html

@@ -118,7 +118,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html

@@ -97,7 +97,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html

@@ -148,7 +148,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/index.html

@@ -206,7 +206,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-02-21T10:27:25.832Z
+                at 2024-03-29T10:32:42.147Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -61,6 +61,7 @@ export default class CheckBoxField extends PureComponent {
       dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
+      getContainerRef,
       infoText,
       fieldSize,
       labelPalette,
@@ -115,7 +116,8 @@ export default class CheckBoxField extends PureComponent {
       disabled: removeEvent,
       checked: checked,
       getRef: this.handleGetRef,
-      dataId: dataId
+      dataId: dataId,
+      getContainerRef: getContainerRef
     }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, labelElement)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({

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

@@ -6,6 +6,7 @@ export const propTypes = {
   errorType: PropTypes.oneOf(['primary', 'secondary']),
   fieldSize: PropTypes.oneOf(['small', 'medium']),
   getRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
   id: PropTypes.string.isRequired,
   labelCustomClass: PropTypes.string,
   labelName: PropTypes.string,

package/es/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/es/form/fields/RadioField/RadioField.js

@@ -6,6 +6,7 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /**** Components ****/
 
+import Icon from '@zohodesk/icons/es/Icon';
 import Label from '@zohodesk/components/lib/Label/Label';
 import Radio from '@zohodesk/components/lib/Radio/Radio';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
@@ -53,6 +54,7 @@ export default class RadioField extends PureComponent {
     const {
       LabelProps = {},
       RadioProps = {},
+      InfoIconProps = {},
       ValidationMessageProps1 = {},
       ValidationMessageProps2 = {}
     } = customProps;
@@ -72,7 +74,9 @@ export default class RadioField extends PureComponent {
     }, options.map((option, index) => {
       let {
         text,
-        value
+        value,
+        disabled = false,
+        infoTooltip
       } = option;
       return /*#__PURE__*/React.createElement("span", {
         key: index,
@@ -85,14 +89,19 @@ export default class RadioField extends PureComponent {
         labelPalette: labelPalette,
         labelSize: labelSize,
         active: isActive,
-        disabled: isDisabled,
+        disabled: disabled || isDisabled,
         onChange: this.handleChange,
         size: size,
         checked: selectedValue == value,
         dataId: dataId,
         isReadOnly: isReadOnly,
         variant: variant
-      }, RadioProps)));
+      }, RadioProps), !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, _extends({
+        name: "ZD-GN-info",
+        size: "16",
+        title: infoTooltip,
+        iconClass: style.infoIcon
+      }, InfoIconProps)) : null));
     })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
       text: validationMessage,
       palette: validationPalette,

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

@@ -13,9 +13,9 @@ import DropDownSeparator from '@zohodesk/components/lib/DropDown/DropDownSeparat
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import MultiSelectHeader from '@zohodesk/components/lib/MultiSelect/MultiSelectHeader';
 import { stopBubbling } from '../../../utils/General';
 import { scrollTo, findScrollEnd } from '@zohodesk/components/lib/utils/Common.js';
-import MultiSelectHeader from '@zohodesk/components/lib/MultiSelect/MultiSelectHeader';
 import style from './TagsMultiSelect.module.css';
 export default class TagsMultiSelect extends React.Component {
   constructor(props) {
@@ -165,7 +165,7 @@ export default class TagsMultiSelect extends React.Component {
       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`,
@@ -190,7 +190,7 @@ export default class TagsMultiSelect extends React.Component {
       return index < chipLimit ? /*#__PURE__*/React.createElement(Box, _extends({
         className: style.tag,
         key: index
-      }, boxCustomProps, TagWrapperProps), /*#__PURE__*/React.createElement(Tag, _extends({
+      }, TagWrapperProps, boxCustomProps), /*#__PURE__*/React.createElement(Tag, _extends({
         id: id,
         text: name,
         onRemove: isReadOnly ? null : deleteTag.bind(this, name),
@@ -199,7 +199,7 @@ export default class TagsMultiSelect extends React.Component {
         isReadOnly: isReadOnly,
         onSelectTag: onSelectTag ? onSelectTag : undefined,
         customClass: tagCustomClass
-      }, tagCustomProps, TagProps))) : null;
+      }, TagProps, tagCustomProps))) : null;
     }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
       className: style.moreLess,
       dataId: `${dataId}_tagsMore`,

package/es/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/es/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/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/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/fields/CheckBoxField/CheckBoxField.js

@@ -42,6 +42,7 @@ function CheckBoxField(props) {
     customProps,
     renderLabelProps,
     getRef,
+    getContainerRef,
     onChange
   } = props;
   const {
@@ -100,7 +101,8 @@ function CheckBoxField(props) {
     disabled: removeEvent,
     checked: checked,
     getRef: handleGetRef,
-    dataId: dataId
+    dataId: dataId,
+    getContainerRef: getContainerRef
   }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, labelElement)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({

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

@@ -6,6 +6,7 @@ export const propTypes = {
   errorType: PropTypes.oneOf(['primary', 'secondary']),
   fieldSize: PropTypes.oneOf(['small', 'medium']),
   getRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
   id: PropTypes.string.isRequired,
   labelCustomClass: PropTypes.string,
   labelName: PropTypes.string,