@zohodesk/components 1.2.27 → 1.2.29

package/README.md

@@ -32,17 +32,24 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.29
+
+- Common providers update for v1 components
+
+# 1.2.28
+
+- **CheckBox** - getContainerRef prop supported
+- **Radio** - children, customProps, getRef props supported. tabIndex option supported inside a11y prop
+
 # 1.2.27
 
 - **DateWidget** -  The issue with the YearView Open State Reset on Blur Event in DidMount has been resolved
 
-
 # 1.2.26
 
-- ** MultiSelect, MultiSelectWithAvatar  ** - Mobile Header Render Issue in Mobile Responsive Fixed.
-- ** isMobilePopover ** - Function added in Dropbox.
-- ** Tag ** -  closeTitle not working issue fixed ( because value sends in wrong prop key data-title)
-
+- **MultiSelect, MultiSelectWithAvatar** - Mobile Header Render Issue in Mobile Responsive Fixed.
+- **isMobilePopover** - Function added in Dropbox.
+- **Tag** -  closeTitle not working issue fixed ( because value sends in wrong prop key data-title)
 
 # 1.2.25
 

package/es/CheckBox/CheckBox.js

@@ -11,6 +11,7 @@ export default class CheckBox extends React.Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
+    this.handleGetContainerRef = this.handleGetContainerRef.bind(this);
   }
 
   onChange(e) {
@@ -21,6 +22,14 @@ export default class CheckBox extends React.Component {
     onChange && onChange(!checked, e);
   }
 
+  handleGetContainerRef(ele) {
+    let {
+      getContainerRef,
+      id
+    } = this.props;
+    getContainerRef && getContainerRef(ele, id);
+  }
+
   render() {
     let {
       id,
@@ -78,6 +87,7 @@ export default class CheckBox extends React.Component {
       onClick: isReadOnly || disabled ? null : this.onChange,
       tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
       "aria-checked": ariaChecked,
+      eleRef: this.handleGetContainerRef,
       role: role,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,

package/es/CheckBox/props/propTypes.js

@@ -8,6 +8,7 @@ export const propTypes = {
   disabled: PropTypes.bool,
   disabledTitle: PropTypes.string,
   getRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
   id: PropTypes.string,
   isFilled: PropTypes.bool,
   isClipped: PropTypes.bool,

package/es/Radio/Radio.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); }
+
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium'] }] */
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -9,6 +11,7 @@ export default class Radio extends React.Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this);
   }
 
   onChange(e) {
@@ -19,6 +22,14 @@ export default class Radio extends React.Component {
     onChange && onChange(value, e);
   }
 
+  handleGetRef(ele) {
+    let {
+      getRef,
+      value
+    } = this.props;
+    getRef && getRef(ele, value);
+  }
+
   render() {
     let {
       id,
@@ -38,6 +49,8 @@ export default class Radio extends React.Component {
       active,
       isFilled,
       customClass,
+      customProps,
+      children,
       a11y
     } = this.props;
     let {
@@ -50,12 +63,17 @@ export default class Radio extends React.Component {
     let {
       ariaHidden,
       role = 'radio',
+      tabIndex,
       ariaChecked = checked,
       ariaLabel,
       ariaLabelledby,
       ariaReadonly = isReadOnly || disabled ? true : false
     } = a11y;
-    return /*#__PURE__*/React.createElement(Container, {
+    let {
+      ContainerProps = {},
+      LabelProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(Container, _extends({
       dataId: value ? value.toLowerCase() : 'RadioComp',
       isCover: false,
       isInline: text ? false : true,
@@ -65,13 +83,14 @@ export default class Radio extends React.Component {
       "data-title": toolTip,
       onClick: !isReadOnly && !disabled ? this.onChange : '',
       "aria-checked": ariaChecked,
-      tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+      tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+      eleRef: this.handleGetRef,
       role: role,
       "aria-Hidden": ariaHidden,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       "aria-readonly": ariaReadonly
-    }, /*#__PURE__*/React.createElement(Box, {
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
             ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
     }, /*#__PURE__*/React.createElement("input", {
@@ -97,18 +116,18 @@ export default class Radio extends React.Component {
     }) : null))), text && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.text
-    }, /*#__PURE__*/React.createElement(Label, {
+    }, /*#__PURE__*/React.createElement(Label, _extends({
       text: text,
-      palette: disabled ? 'disable' : labelPalette,
+      palette: labelPalette,
       size: labelSize,
       type: "title",
       clipped: true,
       dataId: `${text}_label`,
       variant: variant,
       title: toolTip ? toolTip : text,
-      customClass: `${checked && active && !disabled ? `${style[`${palette}checkedActive`]}` : ''} 
+      customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} 
               ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
-    })));
+    }, LabelProps))), children);
   }
 
 }

package/es/Radio/Radio.module.css

@@ -21,6 +21,9 @@
 .readonly, .disabled {
   cursor: not-allowed;
 }
+.disabled {
+  opacity: 0.7
+}
 .radio {
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);

package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap

@@ -1145,7 +1145,7 @@ exports[`Radio rendering the accessMode when disabled  1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               primaryLabel disabled  "
         data-id="RadioText_label"
@@ -1505,7 +1505,7 @@ exports[`Radio rendering the disabled is true 1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               undefined disabled  "
         data-id="RadioText_label"
@@ -1567,7 +1567,7 @@ exports[`Radio rendering the disabledTitle 1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               primaryLabel disabled  "
         data-id="RadioText_label"

package/es/Radio/props/defaultProps.js

@@ -10,5 +10,6 @@ export const defaultProps = {
   variant: 'default',
   isFilled: true,
   customClass: {},
+  customProps: {},
   a11y: {}
 };

package/es/Radio/props/propTypes.js

@@ -4,6 +4,7 @@ export const propTypes = {
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   disabledTitle: PropTypes.string,
+  getRef: PropTypes.func,
   id: PropTypes.string,
   isFilled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
@@ -20,14 +21,20 @@ export const propTypes = {
     customRadio: PropTypes.string,
     customLabel: PropTypes.string
   }),
+  customProps: PropTypes.exact({
+    ContainerProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  }),
   a11y: PropTypes.shape({
     ariaChecked: PropTypes.bool,
     ariaHidden: PropTypes.bool,
     role: PropTypes.string,
+    tabIndex: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
     ariaLabelledby: PropTypes.string,
     ariaLabel: PropTypes.string,
     ariaReadonly: PropTypes.bool
   }),
+  children: PropTypes.node,
   onChange: PropTypes.func,
   text: PropTypes.string
 };

package/es/v1/Animation/Animation.js

@@ -17,7 +17,7 @@ export default function Animation(props) {
   } = props;
   let newClassNames = delayClassName ? Object.assign({}, animationStyle[name], {
     exit: `${delayClassName} ${animationStyle[name].exit}`
-  }) : animaanimationStyletion[name];
+  }) : animationStyle[name];
   return /*#__PURE__*/React.createElement(CSSTransition, {
     classNames: newClassNames && newClassNames,
     in: isActive,

package/es/v1/Card/Card.js

@@ -3,7 +3,7 @@ import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
 import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
 import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from './props/defaultProps';
 import { Container, Box } from '../Layout';
-import { getLibraryConfig } from '../Provider/Config';
+import { getLibraryConfig } from '../../Provider/Config';
 import style from '../../Card/Card.module.css';
 /* eslint-disable react/forbid-component-props */
 

package/es/v1/CheckBox/CheckBox.js

@@ -5,7 +5,7 @@ import { propTypes } from './props/propTypes';
 import { defaultProps } from './props/defaultProps';
 import Label from '../Label/Label';
 import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
+import CssProvider from '../../Provider/CssProvider';
 import style from '../../CheckBox/CheckBox.module.css';
 
 const CheckBox = props => {
@@ -24,6 +24,7 @@ const CheckBox = props => {
     isFilled,
     isClipped,
     getRef,
+    getContainerRef,
     variant,
     active,
     dataId,
@@ -42,6 +43,10 @@ const CheckBox = props => {
     onChange && onChange(!checked, e);
   }
 
+  function handleGetContainerRef(ele) {
+    getContainerRef && getContainerRef(ele, id);
+  }
+
   let {
     CheckBoxProps = {},
     LabelProps = {}
@@ -73,6 +78,7 @@ const CheckBox = props => {
     onClick: isReadOnly || disabled ? null : onChange,
     tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
     "aria-checked": ariaChecked,
+    eleRef: handleGetContainerRef,
     role: role,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,

package/es/v1/CheckBox/props/propTypes.js

@@ -8,6 +8,7 @@ export const propTypes = {
   disabled: PropTypes.bool,
   disabledTitle: PropTypes.string,
   getRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
   id: PropTypes.string,
   isFilled: PropTypes.bool,
   isClipped: PropTypes.bool,

package/es/v1/DropBox/utils/isMobilePopover.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from '../../Provider/Config';
+import { getLibraryConfig } from '../../../Provider/Config';
 export default function isMobilePopover(needResponsive) {
   //   let { needResponsive } = props;
   let windowWidth,

package/es/v1/ListItem/ListContainer.js

@@ -7,7 +7,7 @@ import CssProvider from '../../Provider/CssProvider';
 import style from '../../ListItem/ListItem.module.css';
 import { ListContainerDefaultProps } from './props/defaultProps';
 import { ListContainer_Props } from './props/propTypes';
-import { useResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { useResponsiveReceiver } from '../../Responsive/CustomResponsive';
 
 const ListContainer = props => {
   const {

package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -15,7 +15,7 @@ import EmptyState from './EmptyState';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
 import { getUniqueId } from '../../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';

package/es/v1/MultiSelect/AdvancedMultiSelect.js

@@ -18,7 +18,7 @@ import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
 import { Icon } from '@zohodesk/icons';
 import { getUniqueId } from '../../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** CSS ****/
 

package/es/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -17,7 +17,7 @@ import MobileHeader from './MobileHeader/MobileHeader';
 import MultiSelectHeader from './MultiSelectHeader';
 import CssProvider from '../../Provider/CssProvider';
 import { getUniqueId } from '../../Provider/IdProvider';
-import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox'; // import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox'; // import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 import isMobilePopover from '../DropBox/utils/isMobilePopover';

package/es/v1/MultiSelect/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from '../../Provider/Config';
+import { getLibraryConfig } from '../../../Provider/Config';
 export const AdvancedGroupMultiSelect_defaultProps = {
   animationStyle: 'bounce',
   autoComplete: getLibraryConfig('autoComplete'),

package/es/v1/Radio/Radio.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';
@@ -24,6 +26,9 @@ const Radio = props => {
     active,
     isFilled,
     customClass,
+    customProps,
+    getRef,
+    children,
     a11y
   } = props;
   let {
@@ -36,11 +41,16 @@ const Radio = props => {
   let {
     ariaHidden,
     role = 'radio',
+    tabIndex,
     ariaChecked = checked,
     ariaLabel,
     ariaLabelledby,
     ariaReadonly = isReadOnly || disabled ? true : false
   } = a11y;
+  let {
+    ContainerProps = {},
+    LabelProps = {}
+  } = customProps;
 
   function onChange(e) {
     const {
@@ -49,7 +59,11 @@ const Radio = props => {
     onChange && onChange(value, e);
   }
 
-  return /*#__PURE__*/React.createElement(Container, {
+  function handleGetRef(ele) {
+    getRef && getRef(ele, value);
+  }
+
+  return /*#__PURE__*/React.createElement(Container, _extends({
     dataId: value ? value.toLowerCase() : 'RadioComp',
     isCover: false,
     isInline: text ? false : true,
@@ -59,13 +73,14 @@ const Radio = props => {
     "data-title": toolTip,
     onClick: !isReadOnly && !disabled ? onChange : '',
     "aria-checked": ariaChecked,
-    tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+    tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+    eleRef: handleGetRef,
     role: role,
     "aria-Hidden": ariaHidden,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-readonly": ariaReadonly
-  }, /*#__PURE__*/React.createElement(Box, {
+  }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
     className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''}
           ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
   }, /*#__PURE__*/React.createElement("input", {
@@ -91,18 +106,18 @@ const Radio = props => {
   }) : null))), text && /*#__PURE__*/React.createElement(Box, {
     flexible: true,
     className: style.text
-  }, /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React.createElement(Label, _extends({
     text: text,
-    palette: disabled ? 'disable' : labelPalette,
+    palette: labelPalette,
     size: labelSize,
     type: "title",
     clipped: true,
     dataId: `${text}_label`,
     variant: variant,
     title: toolTip ? toolTip : text,
-    customClass: `${checked && active && !disabled ? `${style[`${palette}checkedActive`]}` : ''}
+    customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''}
             ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
-  })));
+  }, LabelProps))), children);
 };
 
 export default Radio;

package/es/v1/Radio/props/defaultProps.js

@@ -10,5 +10,6 @@ export const defaultProps = {
   variant: 'default',
   isFilled: true,
   customClass: {},
+  customProps: {},
   a11y: {}
 };

package/es/v1/Radio/props/propTypes.js

@@ -4,6 +4,7 @@ export const propTypes = {
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   disabledTitle: PropTypes.string,
+  getRef: PropTypes.func,
   id: PropTypes.string,
   isFilled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
@@ -20,14 +21,20 @@ export const propTypes = {
     customRadio: PropTypes.string,
     customLabel: PropTypes.string
   }),
+  customProps: PropTypes.exact({
+    ContainerProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  }),
   a11y: PropTypes.shape({
     ariaChecked: PropTypes.bool,
     ariaHidden: PropTypes.bool,
     role: PropTypes.string,
+    tabIndex: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
     ariaLabelledby: PropTypes.string,
     ariaLabel: PropTypes.string,
     ariaReadonly: PropTypes.bool
   }),
+  children: PropTypes.node,
   onChange: PropTypes.func,
   text: PropTypes.string
 };

package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js

@@ -5,7 +5,7 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import DropBox from '../DropBox/DropBox';
 import { Container } from '../Layout';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import style from '../../ResponsiveDropBox/ResponsiveDropBox.module.css';
 export default function ResponsiveDropBox(props) {
   const {

package/es/v1/Select/GroupSelect.js

@@ -16,7 +16,7 @@ import DropDownHeading from '../DropDown/DropDownHeading';
 import { Container, Box } from '../Layout';
 import { getUniqueId } from '../../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import style from '../../Select/Select.module.css';
 /**** Methods ****/
 

package/es/v1/Select/Select.js

@@ -16,7 +16,7 @@ import EmptyState from '../MultiSelect/EmptyState';
 import { getUniqueId } from '../../Provider/IdProvider';
 import { Icon } from '@zohodesk/icons';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
 

package/es/v1/Select/SelectWithAvatar.js

@@ -16,7 +16,7 @@ import EmptyState from '../MultiSelect/EmptyState';
 import DropDownHeading from '../DropDown/DropDownHeading';
 import { getUniqueId } from '../../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** CSS ****/
 

package/es/v1/Select/SelectWithIcon.js

@@ -12,7 +12,7 @@ import EmptyState from '../MultiSelect/EmptyState';
 import { Container, Box } from '../Layout';
 import { getUniqueId } from '../../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
 

package/es/v1/Select/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from '../../Provider/Config';
+import { getLibraryConfig } from '../../../Provider/Config';
 export const Select_defaultProps = {
   animationStyle: 'bounce',
   autoComplete: getLibraryConfig('autoComplete'),

package/es/v1/Tab/Tabs.js

@@ -7,13 +7,13 @@ import { Tabs_defaultProps } from './props/defaultProps';
 import { Tabs_propTypes } from './props/propTypes';
 import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from '../../utils/Common';
 import { Box, Container } from '../Layout';
-import ResizeObserver from '../Responsive/ResizeObserver';
+import ResizeObserver from '../../Responsive/ResizeObserver';
 import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
 import tabsStyle from './v1Tabs.module.css';
 import Popup from '../Popup/Popup';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import btnstyle from '../../semantic/Button/semanticButton.module.css';
 
 const Tabs = props => {

package/es/v1/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { getLibraryConfig } from '../../Provider/Config';
 import style from '../../Tooltip/Tooltip.module.css';
-import ResizeObserver from '../Responsive/ResizeObserver';
+import ResizeObserver from '../../Responsive/ResizeObserver';
 import selectn from 'selectn';
 export default class Tooltip extends React.Component {
   constructor(props) {

package/lib/CheckBox/CheckBox.js

@@ -57,6 +57,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.handleGetContainerRef = _this.handleGetContainerRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -68,33 +69,41 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           checked = _this$props.checked;
       onChange && onChange(!checked, e);
     }
+  }, {
+    key: "handleGetContainerRef",
+    value: function handleGetContainerRef(ele) {
+      var _this$props2 = this.props,
+          getContainerRef = _this$props2.getContainerRef,
+          id = _this$props2.id;
+      getContainerRef && getContainerRef(ele, id);
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          checked = _this$props2.checked,
-          disabled = _this$props2.disabled,
-          isReadOnly = _this$props2.isReadOnly,
-          disabledTitle = _this$props2.disabledTitle,
-          title = _this$props2.title,
-          palette = _this$props2.palette,
-          text = _this$props2.text,
-          size = _this$props2.size,
-          labelPalette = _this$props2.labelPalette,
-          labelSize = _this$props2.labelSize,
-          isFilled = _this$props2.isFilled,
-          isClipped = _this$props2.isClipped,
-          getRef = _this$props2.getRef,
-          variant = _this$props2.variant,
-          active = _this$props2.active,
-          dataId = _this$props2.dataId,
-          name = _this$props2.name,
-          activeStyle = _this$props2.activeStyle,
-          a11y = _this$props2.a11y,
-          customClass = _this$props2.customClass,
-          customProps = _this$props2.customProps,
-          dataSelectorId = _this$props2.dataSelectorId;
+      var _this$props3 = this.props,
+          id = _this$props3.id,
+          checked = _this$props3.checked,
+          disabled = _this$props3.disabled,
+          isReadOnly = _this$props3.isReadOnly,
+          disabledTitle = _this$props3.disabledTitle,
+          title = _this$props3.title,
+          palette = _this$props3.palette,
+          text = _this$props3.text,
+          size = _this$props3.size,
+          labelPalette = _this$props3.labelPalette,
+          labelSize = _this$props3.labelSize,
+          isFilled = _this$props3.isFilled,
+          isClipped = _this$props3.isClipped,
+          getRef = _this$props3.getRef,
+          variant = _this$props3.variant,
+          active = _this$props3.active,
+          dataId = _this$props3.dataId,
+          name = _this$props3.name,
+          activeStyle = _this$props3.activeStyle,
+          a11y = _this$props3.a11y,
+          customClass = _this$props3.customClass,
+          customProps = _this$props3.customProps,
+          dataSelectorId = _this$props3.dataSelectorId;
       var _customProps$CheckBox = customProps.CheckBoxProps,
           CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
           _customProps$LabelPro = customProps.LabelProps,
@@ -127,6 +136,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         onClick: isReadOnly || disabled ? null : this.onChange,
         tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
         "aria-checked": ariaChecked,
+        eleRef: this.handleGetContainerRef,
         role: role,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,