@zohodesk/components 1.0.0-temp-189.1 → 1.0.0-temp-189.2

package/README.md

@@ -32,6 +32,21 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 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)
+
 # 1.2.25
 
 - **RippleEffect** - cssClassPropOfChild prop added

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/DateTime/DateWidget.js

@@ -909,7 +909,8 @@ class DateWidgetComponent extends React.Component {
     if (isAllowedDateType) {
       // if (focusOrder !== oldFocusOrder) {
       const {
-        dateFormatSelection = {}
+        dateFormatSelection = {},
+        isFocused
       } = this.state;
       const {
         order = []
@@ -931,9 +932,17 @@ class DateWidgetComponent extends React.Component {
 
       if (isPopupOpen) {
         if (yearViewTypes.indexOf(focusedType) >= 0 && (!isYearView || isMonthOpen !== oldIsMonthOpen)) {
-          this.DateTimeYearViewToggle(true, isMonthOpen);
-        } else if (yearViewTypes.indexOf(focusedType) === -1 && isYearView) {
-          this.DateTimeYearViewToggle(false, false);
+          if (!isFocused && isYearView) {
+            this.DateTimeYearViewToggle(true, oldIsMonthOpen);
+          } else {
+            this.DateTimeYearViewToggle(true, isMonthOpen);
+          }
+        } else if (yearViewTypes.indexOf(focusedType) === -1) {
+          if (!isFocused && isYearView) {
+            this.DateTimeYearViewToggle(isYearView, oldIsMonthOpen);
+          } else {
+            this.DateTimeYearViewToggle(false, false);
+          }
         }
       } // }
 

package/es/DropBox/DropBox.js

@@ -1,15 +1,16 @@
 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, { useRef, Fragment, useContext } from 'react';
+import React, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-import Modal from '../Modal/Modal';
-import { getLibraryConfig } from '../Provider/Config';
+import Modal from '../Modal/Modal'; // import { getLibraryConfig } from '../Provider/Config';
+
 import LibraryContext from '../Provider/LibraryContextInit';
 import cssJSLogic from './css/cssJSLogic';
 import DropBoxElement from './DropBoxElement/DropBoxElement';
 import { DropBoxDefaultProps } from './props/defaultProps';
 import { DropBoxPropTypes } from './props/propTypes';
 import { stopPropagation } from './../utils/Common';
+import isMobilePopover from './utils/isMobilePopover';
 import style from './css/DropBox.module.css';
 export default function DropBox(props) {
   const dropBoxRef = useRef(null);
@@ -37,18 +38,7 @@ export default function DropBox(props) {
   const {
     direction
   } = DropBoxContext || {};
-  let windowWidth,
-      mobileWidth = getLibraryConfig('mobileWidth'),
-      isModel = false;
-
-  if (needResponsive) {
-    windowWidth = window.innerWidth;
-
-    if (windowWidth <= mobileWidth) {
-      isModel = true;
-    }
-  }
-
+  let isModel = isMobilePopover(needResponsive);
   const {
     zIndexStyle
   } = cssJSLogic(props);

package/es/DropBox/utils/isMobilePopover.js

@@ -0,0 +1,17 @@
+import { getLibraryConfig } from '../../Provider/Config';
+export default function isMobilePopover(needResponsive) {
+  //   let { needResponsive } = props;
+  let windowWidth,
+      mobileWidth = getLibraryConfig('mobileWidth'),
+      isModel = false;
+
+  if (needResponsive) {
+    windowWidth = window.innerWidth;
+
+    if (windowWidth <= mobileWidth) {
+      isModel = true;
+    }
+  }
+
+  return isModel ? true : false;
+}

package/es/MultiSelect/MultiSelect.js

@@ -14,10 +14,11 @@ import Suggestions from './Suggestions';
 import EmptyState from './EmptyState';
 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 MultiSelectHeader from './MultiSelectHeader';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import isMobilePopover from '../DropBox/utils/isMobilePopover';
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';
@@ -838,17 +839,6 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   getSelectionUI() {
     let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     let {
@@ -1021,6 +1011,7 @@ export class MultiSelectComponent extends React.Component {
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
       noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
     });
+    let isModel = isMobilePopover(needResponsive);
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -1028,85 +1019,77 @@ export class MultiSelectComponent extends React.Component {
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId
-    }, this.getSelectionUI(), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        animationStyle: animationStyle,
-        boxPosition: position || `${defaultDropBoxPosition}`,
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: isAnimate,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        isPadding: false,
-        isBoxPaddingNeed: isBoxPaddingNeed,
-        palette: palette,
-        htmlId: setAriaId,
-        a11y: {
-          role: 'listbox',
-          ariaMultiselectable: true
-        },
-        size: boxSize,
-        alignBox: "row",
-        isResponsivePadding: getFooter ? false : true
-      }, /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        customClass: `${style.box} ${style[`${palette}Box`]}`,
-        onScroll: this.handleScroll
-      }, tabletMode && /*#__PURE__*/React.createElement(MobileHeader, {
-        selectedOptions: selectedOptions,
-        i18nKeys: i18nKeys,
-        onClick: this.handlePopupClose
-      }, /*#__PURE__*/React.createElement("div", {
-        className: style.effect
-      }, this.getSelectionUI(true))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        onSelect: this.handleSelectAll,
-        selectAllText: selectAllText,
-        suggestions: suggestions,
-        dataId: dataId
-      })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, isSearching ? /*#__PURE__*/React.createElement("div", {
-        className: style[palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverOption,
-        onClick: this.handleSelectOption,
-        onMouseEnter: this.handleMouseEnter,
-        needBorder: false,
-        dataId: `${dataId}_Options`,
-        palette: palette,
-        selectedOptions: selectedOptionIds,
-        a11y: {
-          role: 'option'
-        }
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        palette: palette,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
-    }) : null);
+    }, this.getSelectionUI(), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      animationStyle: animationStyle,
+      boxPosition: position || `${defaultDropBoxPosition}`,
+      getRef: getContainerRef,
+      isActive: isPopupReady,
+      isAnimate: isAnimate,
+      isArrow: false,
+      onClick: removeClose,
+      needResponsive: needResponsive,
+      isPadding: false,
+      isBoxPaddingNeed: isBoxPaddingNeed,
+      palette: palette,
+      htmlId: setAriaId,
+      a11y: {
+        role: 'listbox',
+        ariaMultiselectable: true
+      },
+      size: boxSize,
+      alignBox: "row",
+      isResponsivePadding: getFooter ? false : true
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, {
+      customClass: `${style.box} ${style[`${palette}Box`]}`,
+      onScroll: this.handleScroll
+    }, isModel ? /*#__PURE__*/React.createElement(MobileHeader, {
+      selectedOptions: selectedOptions,
+      i18nKeys: i18nKeys,
+      onClick: this.handlePopupClose
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.effect
+    }, this.getSelectionUI(true))) : null, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      onSelect: this.handleSelectAll,
+      selectAllText: selectAllText,
+      suggestions: suggestions,
+      dataId: dataId
+    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true,
+      customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
+      eleRef: this.suggestionContainerRef
+    }, isSearching ? /*#__PURE__*/React.createElement("div", {
+      className: style[palette]
+    }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: suggestions,
+      getRef: this.suggestionItemRef,
+      hoverOption: hoverOption,
+      onClick: this.handleSelectOption,
+      onMouseEnter: this.handleMouseEnter,
+      needBorder: false,
+      dataId: `${dataId}_Options`,
+      palette: palette,
+      selectedOptions: selectedOptionIds,
+      a11y: {
+        role: 'option'
+      }
+    }) : /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: isFetchingOptions,
+      options: options,
+      searchString: searchStr,
+      suggestions: suggestions,
+      dataId: dataId,
+      palette: palette,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null))) : null);
   }
 
 }

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -15,10 +15,11 @@ import Suggestions from './Suggestions';
 import EmptyState from './EmptyState';
 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 MultiSelectHeader from './MultiSelectHeader';
+import isMobilePopover from '../DropBox/utils/isMobilePopover';
 /**** CSS ****/
 
 import style from './MultiSelect.module.css';
@@ -54,17 +55,6 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     });
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       isReadOnly,
@@ -117,6 +107,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
+    let isModel = isMobilePopover(needResponsive);
     return /*#__PURE__*/React.createElement("div", {
       className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -124,83 +115,75 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId
-    }, this.getSelectionUI(), popUpState ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        animationStyle: animationStyle,
-        boxPosition: position || `${defaultDropBoxPosition}Center`,
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: isAnimate,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        isPadding: false,
-        isBoxPaddingNeed: isBoxPaddingNeed,
-        palette: palette,
-        htmlId: setAriaId,
-        a11y: {
-          ariaMultiselectable: true,
-          role: 'listbox'
-        },
-        isResponsivePadding: true,
-        alignBox: "row"
-      }, /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        customClass: `${style.box} ${style[`${palette}Box`]}`,
-        onScroll: this.handleScroll
-      }, tabletMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileHeader, {
-        selectedOptions: selectedOptions,
-        i18nKeys: i18nKeys,
-        onClick: this.handlePopupClose
-      }, /*#__PURE__*/React.createElement("div", {
-        className: style.effect
-      }, this.getSelectionUI(true)))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        onSelect: this.handleSelectAll,
-        selectAllText: selectAllText,
-        suggestions: suggestions,
-        dataId: dataId
-      })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-        needTick: keepSelectedOptions,
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverOption,
-        onClick: this.handleSelectOption,
-        onMouseEnter: this.handleMouseEnter,
-        needBorder: false,
-        dataId: `${dataId}_Options`,
-        palette: palette,
-        selectedOptions: selectedOptionIds,
-        a11y: {
-          role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        palette: palette,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))))));
-    }) : null);
+    }, this.getSelectionUI(), popUpState ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      animationStyle: animationStyle,
+      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      getRef: getContainerRef,
+      isActive: isPopupReady,
+      isAnimate: isAnimate,
+      isArrow: false,
+      onClick: removeClose,
+      needResponsive: needResponsive,
+      isPadding: false,
+      isBoxPaddingNeed: isBoxPaddingNeed,
+      palette: palette,
+      htmlId: setAriaId,
+      a11y: {
+        ariaMultiselectable: true,
+        role: 'listbox'
+      },
+      isResponsivePadding: true,
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, {
+      customClass: `${style.box} ${style[`${palette}Box`]}`,
+      onScroll: this.handleScroll
+    }, isModel ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileHeader, {
+      selectedOptions: selectedOptions,
+      i18nKeys: i18nKeys,
+      onClick: this.handlePopupClose
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.effect
+    }, this.getSelectionUI(true)))) : null, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      onSelect: this.handleSelectAll,
+      selectAllText: selectAllText,
+      suggestions: suggestions,
+      dataId: dataId
+    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true,
+      customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
+      eleRef: this.suggestionContainerRef
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      needTick: keepSelectedOptions,
+      suggestions: suggestions,
+      getRef: this.suggestionItemRef,
+      hoverOption: hoverOption,
+      onClick: this.handleSelectOption,
+      onMouseEnter: this.handleMouseEnter,
+      needBorder: false,
+      dataId: `${dataId}_Options`,
+      palette: palette,
+      selectedOptions: selectedOptionIds,
+      a11y: {
+        role: 'option'
+      }
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: isFetchingOptions,
+      options: options,
+      searchString: searchStr,
+      suggestions: suggestions,
+      dataId: dataId,
+      palette: palette,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null)))))) : null);
   }
 
 }

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);