@zohodesk/dot 1.4.11 → 1.4.13

package/es/v1/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -13,13 +13,13 @@ import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import CssProvider from '@zohodesk/components/es/v1/Provider/CssProvider';
+import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
 import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common';
-import { getUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 import RippleEffect from '@zohodesk/components/es/v1/RippleEffect/RippleEffect';
 import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import style from '../../../dropdown/ToggleDropDown/ToggleDropDown.module.css';
 export class ToggleDropDown extends Component {
   constructor(props) {
@@ -522,6 +522,10 @@ export class ToggleDropDown extends Component {
       getFooter,
       customProps,
       needMultiLineText,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       customClass
     } = this.props;
     let {
@@ -624,6 +628,10 @@ export class ToggleDropDown extends Component {
         palette: palette,
         isResponsivePadding: true,
         needFocusScope: true,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         customProps: {
           focusScopeProps: {
             loadNextOptions: this.handleGetNextOptions,

package/es/v1/dropdown/ToggleDropDown/props/defaultProps.js

@@ -23,5 +23,7 @@ export const defaultProps = {
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
   needMultiLineText: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   customClass: {}
 };

package/es/v1/dropdown/ToggleDropDown/props/propTypes.js

@@ -74,6 +74,10 @@ export const propTypes = {
     customListBox: PropTypes.string
   }),
   onSelectLabel: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   from: PropTypes.string,
   top: PropTypes.number
 };

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/CurrencyField/CurrencyField.js

@@ -9,7 +9,7 @@ import { propTypes } from './props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 

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

@@ -9,7 +9,7 @@ import { propTypes } from './props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import DateWidget from '@zohodesk/components/es/v1/DateTime/DateWidget';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 

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

@@ -9,7 +9,7 @@ import { propTypes } from './props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import MultiSelect from '@zohodesk/components/es/v1/MultiSelect/MultiSelect';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /** CSS */
 

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,19 @@ 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,
+      tooltip,
       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 +93,32 @@ const RadioField = props => {
       text: text,
       labelPalette: labelPalette,
       labelSize: labelSize,
-      active: isActive,
-      disabled: isDisabled,
+      active: isActive || isBoxStyle && isChecked,
+      disabled: disabled || isDisabled,
+      disabledTitle: tooltip,
+      title: tooltip,
       onChange: handleChange,
+      getRef: handleGetRef,
       size: size,
-      checked: selectedValue == value,
+      checked: isChecked,
       dataId: dataId,
       isReadOnly: isReadOnly,
       variant: variant
-    }, RadioProps)), !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, _extends({
+    }, RadioProps, {
+      a11y: {
+        tabIndex: !!selectedValue ? isChecked ? '0' : '-1' : index === 0 ? '0' : '-1',
+        ...RadioProps.a11y
+      },
+      customClass: {
+        customRadioWrap: `${isBoxStyle ? style.radioBox : ''} ${isBoxStyle && isChecked ? style.radioBoxActive : ''}`,
+        ...RadioProps.customClass
+      }
+    }), !!infoTooltip ? /*#__PURE__*/React.createElement(Icon, _extends({
       name: "ZD-GN-info",
       size: "16",
       title: infoTooltip,
       iconClass: style.infoIcon
-    }, InfoIconProps)) : null);
+    }, InfoIconProps)) : null));
   })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
     text: validationMessage,
     palette: validationPalette,

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

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

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

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

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

@@ -0,0 +1,44 @@
+import { useRef, useEffect } from 'react';
+export default function useRadio(_ref) {
+  let {
+    id,
+    onChange,
+    getRef,
+    options,
+    selectedValue
+  } = _ref;
+
+  const handleChange = value => {
+    onChange && onChange(id, value);
+  };
+
+  const radioRef = useRef({
+    radios: {},
+    focus: () => {}
+  }).current;
+  const firstRadioValue = options[0].value;
+
+  function handleGetRef(ele, val) {
+    radioRef.radios[val] = ele;
+  }
+
+  function handleFocus() {
+    if (!!selectedValue) {
+      radioRef.radios[selectedValue].focus();
+    } else {
+      radioRef.radios[firstRadioValue].focus();
+    }
+  }
+
+  useEffect(() => {
+    radioRef.focus = handleFocus;
+    getRef && getRef(radioRef, id);
+    return () => {
+      getRef && getRef(null, id);
+    };
+  }, [getRef]);
+  return {
+    handleGetRef,
+    handleChange
+  };
+}

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

@@ -9,7 +9,7 @@ import { propTypes } from './props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import Select from '@zohodesk/components/es/v1/Select/Select';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /** CSS */
 

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

@@ -12,7 +12,7 @@ import Loader from '@zohodesk/svg/lib/Loader/Loader';
 import DropDownSeparator from '@zohodesk/components/es/v1/DropDown/DropDownSeparator';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import MultiSelectHeader from '@zohodesk/components/es/v1/MultiSelect/MultiSelectHeader';
 import { stopBubbling } from '../../../../utils/General';
 import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common.js';

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

@@ -9,7 +9,7 @@ import { propTypes } from './props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 

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

@@ -9,7 +9,7 @@ import { propTypes } from './props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import Textarea from '@zohodesk/components/es/v1/Textarea/Textarea';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 
@@ -37,6 +37,7 @@ const TextareaField = props => {
     validationRuleMessage,
     validationRulePalette,
     // onKeyDown,
+    onFocus,
     infoText,
     borderColor,
     fieldSize,
@@ -103,6 +104,7 @@ const TextareaField = props => {
     text: value,
     placeHolder: placeHolder,
     dataId: `property(${dataId})`,
+    onFocus: onFocus,
     onBlur: handleBlur,
     borderColor: borderColor,
     needEffect: isReadOnly || isDisabled ? false : true,

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

@@ -12,6 +12,7 @@ export const propTypes = {
   labelName: PropTypes.string,
   labelPalette: PropTypes.string,
   maxLength: PropTypes.number,
+  onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   placeHolder: PropTypes.string,

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -15,8 +15,8 @@ import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptySt
 import StatusListItem from '../StatusListItem/StatusListItem';
 import commonStyle from '@zohodesk/components/es/common/common.module.css';
 import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 import style from '../../../../list/status/StatusDropdown/StatusDropdown.module.css';
 

package/es/v1/list/status/StatusListItem/StatusListItem.js

@@ -8,7 +8,7 @@ import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
-import CssProvider from '@zohodesk/components/es/v1/Provider/CssProvider';
+import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
 /**** CSS ****/
 
 import style from '../../../../list/status/StatusListItem/StatusListItem.module.css';

package/es/v1/lookup/header/ViewDropDown/ViewDropDown.js

@@ -10,7 +10,7 @@ import ListItem from '@zohodesk/components/es/v1/ListItem/ListItem';
 import DropDownSearch from '@zohodesk/components/es/v1/DropDown/DropDownSearch';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/es/v1/Card';
 import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';

package/es/v1/notification/DesktopNotification/DesktopNotification.js

@@ -4,7 +4,7 @@ import React from 'react';
 import defaultProps from './props/defaultProps';
 import { propTypes, DesktopNotificationUI_propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
-import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import AutoClose from '../../../actions/AutoClose';
 import Button from '@zohodesk/components/es/v1/Button/Button';
 import FormAction from '../../../FormAction/FormAction';

package/es/v1/notification/DesktopNotification/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getDotLibraryConfig } from '../../../Provider/Config';
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export default {
   isMore: false,
   isAnimate: true,

package/es/v1/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getDotLibraryConfig } from '../../../Provider/Config';
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export default {
   needIcon: true,
   variant: 'primary',

package/lib/FreezeLayer/FreezeLayer.js

@@ -21,7 +21,7 @@ var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider"
 
 var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _useFreezeLayer2 = _interopRequireDefault(require("./useFreezeLayer"));
+var _useFreezeLayer2 = _interopRequireDefault(require("../Hooks/useFreezeLayer"));
 
 var _FreezeLayerModule = _interopRequireDefault(require("./css/FreezeLayer.module.css"));
 

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -590,6 +590,10 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           getFooter = _this$props9.getFooter,
           customProps = _this$props9.customProps,
           needMultiLineText = _this$props9.needMultiLineText,
+          isAbsolutePositioningNeeded = _this$props9.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props9.positionsOffset,
+          targetOffset = _this$props9.targetOffset,
+          isRestrictScroll = _this$props9.isRestrictScroll,
           customClass = _this$props9.customClass;
       var _customProps$ToggleDr = customProps.ToggleDropDownProps,
           ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr,
@@ -691,6 +695,10 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           palette: palette,
           isResponsivePadding: true,
           needFocusScope: true,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll,
           customProps: {
             focusScopeProps: {
               loadNextOptions: _this5.handleGetNextOptions,

package/lib/dropdown/ToggleDropDown/props/defaultProps.js

@@ -29,6 +29,8 @@ var defaultProps = {
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
   needMultiLineText: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   customClass: {}
 };
 exports.defaultProps = defaultProps;

package/lib/dropdown/ToggleDropDown/props/propTypes.js

@@ -84,6 +84,10 @@ var propTypes = {
     customListBox: _propTypes["default"].string
   }),
   onSelectLabel: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
   from: _propTypes["default"].string,
   top: _propTypes["default"].number
 };

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,11 @@ 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,
+            tooltip = option.tooltip,
+            infoTooltip = option.infoTooltip;
         return /*#__PURE__*/_react["default"].createElement("span", {
           key: index,
           className: "".concat(_FieldsModule["default"].radio)
@@ -134,14 +142,21 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           labelPalette: labelPalette,
           labelSize: labelSize,
           active: isActive,
-          disabled: isDisabled,
+          disabled: disabled || isDisabled,
+          disabledTitle: tooltip,
+          title: tooltip,
           onChange: _this2.handleChange,
           size: size,
           checked: selectedValue == value,
           dataId: dataId,
           isReadOnly: isReadOnly,
           variant: variant
-        }, RadioProps)));
+        }, RadioProps), !!infoTooltip ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+          name: "ZD-GN-info",
+          size: "16",
+          title: infoTooltip,
+          iconClass: _FieldsModule["default"].infoIcon
+        }, InfoIconProps)) : null));
       })), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,

package/lib/form/fields/TextareaField/TextareaField.js

@@ -126,6 +126,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
           dataSelectorId = _this$props4.dataSelectorId,
           validationRuleMessage = _this$props4.validationRuleMessage,
           validationRulePalette = _this$props4.validationRulePalette,
+          onFocus = _this$props4.onFocus,
           infoText = _this$props4.infoText,
           borderColor = _this$props4.borderColor,
           fieldSize = _this$props4.fieldSize,
@@ -176,6 +177,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         text: value,
         placeHolder: placeHolder,
         dataId: "property(".concat(dataId, ")"),
+        onFocus: onFocus,
         onBlur: this.handleBlur,
         borderColor: borderColor,
         needEffect: isReadOnly || isDisabled ? false : true,

package/lib/form/fields/TextareaField/props/propTypes.js

@@ -29,6 +29,7 @@ var propTypes = _objectSpread({
   labelName: _propTypes["default"].string,
   labelPalette: _propTypes["default"].string,
   maxLength: _propTypes["default"].number,
+  onFocus: _propTypes["default"].func,
   onBlur: _propTypes["default"].func,
   onChange: _propTypes["default"].func,
   placeHolder: _propTypes["default"].string,

package/lib/v1/ActionButton/ActionButton.js

@@ -21,7 +21,7 @@ var _Layout = require("@zohodesk/components/es/v1/Layout");
 
 var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox"));
 
-var _CssProvider = _interopRequireDefault(require("@zohodesk/components/es/v1/Provider/CssProvider"));
+var _CssProvider = _interopRequireDefault(require("@zohodesk/components/es/Provider/CssProvider"));
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
 

package/lib/v1/AttachmentViewer/AttachmentViewer.js

@@ -19,9 +19,9 @@ var _icons = require("@zohodesk/icons");
 
 var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/v1/Avatar/Avatar"));
 
-var _CustomResponsive = require("@zohodesk/components/es/v1/Responsive/CustomResponsive");
+var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
-var _IdProvider = require("@zohodesk/components/es/v1/Provider/IdProvider");
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _AttachmentImage = _interopRequireDefault(require("./AttachmentImage"));