@zohodesk/dot 1.0.0-temp-181.3 → 1.0.0-temp-181.5

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,

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/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/v1/DotWrapper/DotWrapper.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = DotWrapper;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _dynamicImports = require("./libraryChunks/dynamicImports");
 
@@ -27,45 +29,35 @@ require("@zohodesk/components/lib/common/boxShadow.module.css");
 
 require("../../common/dot_boxShadow.module.css");
 
-require("@zohodesk-private/desk-components/es/common/Dc_boxShadow.module.css");
-
 var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-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 _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 DotWrapper(props) {
-  var children = props.children,
-      appearance = props.appearance,
+  var appearance = props.appearance,
       theme = props.theme,
       library = props.library,
       baseZoomSize = props.baseZoomSize,
       baseFontSize = props.baseFontSize,
-      className = props.className;
-  (0, _dynamicImports.getAppearance)(appearance, library);
-  (0, _dynamicImports.getTheme)(appearance, theme, library);
-  baseZoomSize && (0, _dynamicImports.getZoomSize)();
-  baseFontSize && (0, _dynamicImports.getFontSize)();
-  var baseZoom = {
-    '--zd_baseSize': baseZoomSize
-  };
-  var baseFont = {
-    '--zd_baseFontSize': baseFontSize
-  };
-
-  var combinedStyles = _objectSpread(_objectSpread({}, baseZoom), baseFont);
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "rootWrapper ".concat(className),
-    style: combinedStyles
-  }, children);
+      selector = props.selector;
+  (0, _react.useEffect)(function () {
+    if (selector === 'libraryWrapper') {
+      (0, _dynamicImports.getAppearance)(appearance, library);
+      (0, _dynamicImports.getTheme)(appearance, theme, library);
+      baseZoomSize && (0, _dynamicImports.getZoomSize)();
+      baseFontSize && (0, _dynamicImports.getFontSize)();
+      var wrapperElements = document.querySelectorAll("[selector=\"".concat(selector, "\"]"));
+      wrapperElements.forEach(function (element) {
+        element.style.setProperty('--zd_baseSize', baseZoomSize);
+        element.style.setProperty('--zd_baseFontSize', baseFontSize);
+      });
+    }
+  }, [appearance, theme, library, baseZoomSize, baseFontSize, selector]);
+  return null;
 }
 
 DotWrapper.propTypes = _propTypes.propTypes;

package/lib/v1/DotWrapper/props/defaultProps.js

@@ -8,6 +8,6 @@ var defaultProps = {
   appearance: 'light',
   theme: 'blue',
   library: ['component'],
-  className: ''
+  selector: ''
 };
 exports.defaultProps = defaultProps;

package/lib/v1/DotWrapper/props/propTypes.js

@@ -10,12 +10,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
-  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]),
   appearance: _propTypes["default"].oneOf(['light', 'dark', 'pureDark']),
   theme: _propTypes["default"].oneOf(['blue', 'green', 'orange', 'red', 'yellow']),
-  library: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['component', 'dot', 'svg', 'deskComponents'])),
+  library: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['component', 'dot', 'svg'])),
   baseZoomSize: _propTypes["default"].number,
   baseFontSize: _propTypes["default"].number,
-  className: _propTypes["default"].string
+  selector: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/v1/DotWrapper/utils/appearanceProperties.js

@@ -56,21 +56,6 @@ var appearanceImports = {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('../libraryChunks/appearance/svg/PureDarkMode_SVG'));
     });
-  },
-  Lib_LightMode_DeskComponent: function Lib_LightMode_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/appearance/desk-components/LightMode_DeskComponent'));
-    });
-  },
-  Lib_DarkMode_DeskComponent: function Lib_DarkMode_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/appearance/desk-components/DarkMode_DeskComponent'));
-    });
-  },
-  Lib_PureDarkMode_DeskComponent: function Lib_PureDarkMode_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/appearance/desk-components/PureDarkMode_DeskComponent'));
-    });
   }
 };
 exports.appearanceImports = appearanceImports;
@@ -89,11 +74,6 @@ var appearanceMapping = {
     light: 'Lib_LightMode_SVG',
     dark: 'Lib_DarkMode_SVG',
     pureDark: 'Lib_PureDarkMode_SVG'
-  },
-  deskComponents: {
-    light: 'Lib_LightMode_DeskComponent',
-    dark: 'Lib_DarkMode_DeskComponent',
-    pureDark: 'Lib_PureDarkMode_DeskComponent'
   }
 };
 exports.appearanceMapping = appearanceMapping;

package/lib/v1/DotWrapper/utils/themeProperties.js

@@ -236,81 +236,6 @@ var themeImports = {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG'));
     });
-  },
-  Lib_Blue_Light_DeskComponent: function Lib_Blue_Light_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/blue/Blue_Light_DeskComponent'));
-    });
-  },
-  Lib_Blue_Dark_DeskComponent: function Lib_Blue_Dark_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/blue/Blue_Dark_DeskComponent'));
-    });
-  },
-  Lib_Blue_PureDark_DeskComponent: function Lib_Blue_PureDark_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/blue/Blue_PureDark_DeskComponent'));
-    });
-  },
-  Lib_Green_Light_DeskComponent: function Lib_Green_Light_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/green/Green_Light_DeskComponent'));
-    });
-  },
-  Lib_Green_Dark_DeskComponent: function Lib_Green_Dark_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/green/Green_Dark_DeskComponent'));
-    });
-  },
-  Lib_Green_PureDark_DeskComponent: function Lib_Green_PureDark_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/green/Green_PureDark_DeskComponent'));
-    });
-  },
-  Lib_Orange_Light_DeskComponent: function Lib_Orange_Light_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/orange/Orange_Light_DeskComponent'));
-    });
-  },
-  Lib_Orange_Dark_DeskComponent: function Lib_Orange_Dark_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/orange/Orange_Dark_DeskComponent'));
-    });
-  },
-  Lib_Orange_PureDark_DeskComponent: function Lib_Orange_PureDark_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/orange/Orange_PureDark_DeskComponent'));
-    });
-  },
-  Lib_Red_Light_DeskComponent: function Lib_Red_Light_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/red/Red_Light_DeskComponent'));
-    });
-  },
-  Lib_Red_Dark_DeskComponent: function Lib_Red_Dark_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/red/Red_Dark_DeskComponent'));
-    });
-  },
-  Lib_Red_PureDark_DeskComponent: function Lib_Red_PureDark_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/red/Red_PureDark_DeskComponent'));
-    });
-  },
-  Lib_Yellow_Light_DeskComponent: function Lib_Yellow_Light_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/yellow/Yellow_Light_DeskComponent'));
-    });
-  },
-  Lib_Yellow_Dark_DeskComponent: function Lib_Yellow_Dark_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/yellow/Yellow_Dark_DeskComponent'));
-    });
-  },
-  Lib_Yellow_PureDark_DeskComponent: function Lib_Yellow_PureDark_DeskComponent() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../libraryChunks/themes/desk-components/yellow/Yellow_PureDark_DeskComponent'));
-    });
   }
 };
 exports.themeImports = themeImports;
@@ -395,33 +320,6 @@ var themeMapping = {
       dark: 'Lib_Yellow_Dark_SVG',
       pureDark: 'Lib_Yellow_PureDark_SVG'
     }
-  },
-  deskComponents: {
-    blue: {
-      light: 'Lib_Blue_Light_DeskComponent',
-      dark: 'Lib_Blue_Dark_DeskComponent',
-      pureDark: 'Lib_Blue_PureDark_DeskComponent'
-    },
-    green: {
-      light: 'Lib_Green_Light_DeskComponent',
-      dark: 'Lib_Green_Dark_DeskComponent',
-      pureDark: 'Lib_Green_PureDark_DeskComponent'
-    },
-    orange: {
-      light: 'Lib_Orange_Light_DeskComponent',
-      dark: 'Lib_Orange_Dark_DeskComponent',
-      pureDark: 'Lib_Orange_PureDark_DeskComponent'
-    },
-    red: {
-      light: 'Lib_Red_Light_DeskComponent',
-      dark: 'Lib_Red_Dark_DeskComponent',
-      pureDark: 'Lib_Red_PureDark_DeskComponent'
-    },
-    yellow: {
-      light: 'Lib_Yellow_Light_DeskComponent',
-      dark: 'Lib_Yellow_Dark_DeskComponent',
-      pureDark: 'Lib_Yellow_PureDark_DeskComponent'
-    }
   }
 };
 exports.themeMapping = themeMapping;

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,