@zohodesk/components 1.0.0-temp-199.5 → 1.0.0-temp-215

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -876,11 +876,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       needEffect,
       autoComplete,
       getTargetRef,
-      customProps
+      isFocus
     } = this.props;
-    const {
-      suggestionsProps
-    } = customProps;
     let {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -908,6 +905,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     const isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
+    const isEditable = !(isReadOnly || isDisabled);
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -924,7 +922,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     }, children) : /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${isActive && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${style[`borderColor_${borderColor}`]} ${customClass}`,
+      className: `${style.container} ${style[size]} ${isActive && needBorder || isEditable && isFocus && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${style[`borderColor_${borderColor}`]} ${customClass}`,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {
@@ -1059,8 +1057,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...suggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -372,7 +372,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isAbsolutePositioningNeeded,
       positionsOffset,
       targetOffset,
-      isRestrictScroll
+      isRestrictScroll,
+      isFocus
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -414,6 +415,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions
     });
     let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
+    const isEditable = !(isReadOnly || isDisabled);
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`,
       "data-id": dataIdMultiSelectComp,
@@ -424,7 +426,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${isActive && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${needBorder ? !isDisabled ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''}`,
+      className: `${style.container} ${style[size]} ${isActive && needBorder || isEditable && isFocus && needBorder ? style.active : ''} ${needBorder ? style.hasBorder : ''} ${needBorder ? !isDisabled ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''}`,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {
@@ -549,8 +551,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'option'
         },
         dataId: `${dataIdMultiSelectComp}_Options`,
-        ...SuggestionsProps,
-        needMultiLineText: true
+        ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/MultiSelect/MultiSelect.js

@@ -877,7 +877,8 @@ export class MultiSelectComponent extends React.Component {
       setAriaId,
       isPopupOpen,
       ariaErrorId,
-      customProps
+      customProps,
+      isFocus
     } = this.props;
     let {
       isActive,
@@ -899,13 +900,14 @@ export class MultiSelectComponent extends React.Component {
       disabledOptions
     });
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
+    const isEditable = !(isReadOnly || isDisabled || disableAction);
     let {
       TextBoxIconProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
-      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
+      className: `${style.container} ${style[size]} ${needBorder ? !disableAction ? style[`borderColor_${borderColor}`] : style.borderColor_transparent : ''} ${isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? style.active : ''} ${textBoxClass} ${needBorder ? style.hasBorder : ''}`,
       eleRef: this.selectedOptionContainerRef,
       wrap: "wrap"
     }, /*#__PURE__*/React.createElement(SelectedOptions, {
@@ -1015,12 +1017,8 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll,
-      customProps
+      needSelectAll
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1110,8 +1108,7 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      },
-      ...suggestionsProps
+      }
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/Suggestions.js

@@ -27,8 +27,7 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y,
-      needMultiLineText
+      a11y
     } = this.props;
     const {
       ariaParentRole,
@@ -93,8 +92,7 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -114,8 +112,7 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       }
 
@@ -134,8 +131,7 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y,
-        needMultiLineText: needMultiLineText
+        a11y: list_a11y
       });
     })));
   }

package/es/MultiSelect/props/defaultProps.js

@@ -37,8 +37,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {}
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -155,14 +154,13 @@ export const MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
-  needResponsive: true,
-  customProps: {}
+  customProps: {},
+  needResponsive: true
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium',
   dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
-  a11y: {},
-  needMultiLineText: false
+  a11y: {}
 };

package/es/MultiSelect/props/propTypes.js

@@ -110,9 +110,9 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object,
-    suggestionsProps: PropTypes.object
-  })
+    TextBoxIconProps: PropTypes.object
+  }),
+  isFocus: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -177,8 +177,7 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  })),
-  needMultiLineText: PropTypes.bool
+  }))
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -249,7 +248,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   searchStr: PropTypes.string,
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
-  customProps: PropTypes.string
+  isFocus: PropTypes.bool
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,
@@ -324,5 +323,6 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  customClass: PropTypes.object
+  customClass: PropTypes.object,
+  isFocus: PropTypes.bool
 };

package/es/Popup/Popup.js

@@ -9,6 +9,7 @@ import viewPort from "./viewPort";
 import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "./PositionMapping.js";
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
 import { addIntersectionObserver, removeIntersectionObserver } from "./intersectionObserver";
+import { positionMapping } from "../DropBox/DropBoxPositionMapping.js";
 let lastOpenedGroup = [];
 let popups = {};
 
@@ -95,7 +96,15 @@ const Popup = function (Component) {
       this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
       this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
       this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
+      this.handleAddingScrollBlock = this.handleAddingScrollBlock.bind(this);
+      this.handleRemovingScrollBlock = this.handleRemovingScrollBlock.bind(this);
       this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
+      this.updateVisibilityOnIntersection = this.updateVisibilityOnIntersection.bind(this);
+      this.handleAddingScrollToUpdatePosition = this.handleAddingScrollToUpdatePosition.bind(this);
+      this.handleRemovingScrollToUpdatePosition = this.handleRemovingScrollToUpdatePosition.bind(this);
+      this.updatePositionOnScroll = this.updatePositionOnScroll.bind(this);
+      this.setContainerDynamicPositioning = this.setContainerDynamicPositioning.bind(this);
+      this.positionRef = /*#__PURE__*/React.createRef();
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
       this.size = null;
@@ -152,9 +161,7 @@ const Popup = function (Component) {
         dropElement
       } = this;
       const {
-        needResizeHandling: propResizeHandling,
-        isAbsolutePositioningNeeded,
-        isOutsideScrollBlocked
+        needResizeHandling: propResizeHandling
       } = this.props;
 
       if (oldStateOpen !== isPopupReady) {
@@ -165,14 +172,12 @@ const Popup = function (Component) {
           this.popupObserver.disconnect();
         }
 
-        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
-          if (isPopupReady) {
-            addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-            this.addScrollBlockListeners();
-          } else {
-            removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-            this.removeScrollBlockListeners();
-          }
+        if (isPopupReady) {
+          this.handleAddingScrollBlock();
+          this.handleAddingScrollToUpdatePosition();
+        } else {
+          this.handleRemovingScrollBlock();
+          this.handleRemovingScrollToUpdatePosition();
         }
       }
     }
@@ -189,8 +194,7 @@ const Popup = function (Component) {
 
         return res;
       }, popups);
-      removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-      this.removeScrollBlockListeners();
+      this.handleRemovingScrollBlock();
       let noPopups = true;
 
       for (const i in popups) {
@@ -215,6 +219,110 @@ const Popup = function (Component) {
       }
     }
 
+    handleAddingScrollBlock() {
+      const {
+        isAbsolutePositioningNeeded,
+        fixedPopupScrollBehavior
+      } = this.props;
+
+      if (fixedPopupScrollBehavior === 'block' && !isAbsolutePositioningNeeded) {
+        addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+        this.addScrollBlockListeners();
+      }
+    }
+
+    handleRemovingScrollBlock() {
+      const {
+        isAbsolutePositioningNeeded,
+        fixedPopupScrollBehavior
+      } = this.props;
+
+      if (fixedPopupScrollBehavior === 'block' && !isAbsolutePositioningNeeded) {
+        removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+        this.removeScrollBlockListeners();
+      }
+    }
+
+    handleAddingScrollToUpdatePosition() {
+      const {
+        isAbsolutePositioningNeeded,
+        fixedPopupScrollBehavior
+      } = this.props;
+
+      if (fixedPopupScrollBehavior === 'scroll' && !isAbsolutePositioningNeeded) {
+        addIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
+        document.addEventListener('scroll', this.updatePositionOnScroll, {
+          capture: true,
+          passive: false
+        });
+      }
+    }
+
+    handleRemovingScrollToUpdatePosition() {
+      const {
+        isAbsolutePositioningNeeded,
+        fixedPopupScrollBehavior
+      } = this.props;
+
+      if (fixedPopupScrollBehavior === 'scroll' && !isAbsolutePositioningNeeded) {
+        removeIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
+        document.removeEventListener('scroll', this.updatePositionOnScroll, {
+          capture: true,
+          passive: false
+        });
+      }
+    }
+
+    setContainerDynamicPositioning() {
+      const {
+        placeHolderElement,
+        dropElement,
+        defaultPosition
+      } = this;
+
+      if (!dropElement) {
+        return;
+      }
+
+      const needArrow = this.getNeedArrow(this);
+      const isAbsolute = this.getIsAbsolutePopup(this);
+      const customOrder = this.getCustomPositionOrder(this);
+      const styleToApply = {
+        top: '',
+        left: '',
+        right: '',
+        bottom: ''
+      };
+      requestAnimationFrame(() => {
+        const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, '', {
+          needArrow,
+          isAbsolute,
+          customOrder
+        });
+        const {
+          view,
+          viewsOffset
+        } = betterPosition || {};
+        Object.assign(styleToApply, viewsOffset[view]);
+        Object.assign(dropElement.style, {
+          inset: `${styleToApply.top !== '' ? `${styleToApply.top}px` : 'auto'} ${styleToApply.right !== '' ? `${styleToApply.right}px` : 'auto'} ${styleToApply.bottom !== '' ? `${styleToApply.bottom}px` : 'auto'} ${styleToApply.left !== '' ? `${styleToApply.left}px` : 'auto'}`
+        });
+
+        if (this.positionRef.current !== view) {
+          dropElement.setAttribute('data-position', `${view}`);
+          dropElement.setAttribute('data-direction', `${positionMapping[view].direction}`);
+        }
+      });
+    }
+
+    updatePositionOnScroll(e) {
+      if (e.target.contains(this.placeHolderElement)) {
+        // Set position for the dropbox
+        this.setContainerDynamicPositioning();
+        return;
+      }
+    }
+
     addScrollBlockListeners() {
       document.addEventListener('wheel', this.handleBlockScroll, {
         capture: true,
@@ -291,6 +399,20 @@ const Popup = function (Component) {
       }
     }
 
+    updateVisibilityOnIntersection(entry) {
+      const {
+        dropElement
+      } = this;
+
+      if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
+        dropElement.setAttribute('data-visible', 'hidden');
+      }
+
+      if (entry.isIntersecting === true) {
+        dropElement.setAttribute('data-visible', 'visible');
+      }
+    }
+
     getGroup() {
       const {
         popupGroup
@@ -519,6 +641,10 @@ const Popup = function (Component) {
         placeHolderElement,
         dropElement
       } = this;
+      const {
+        fixedPopupScrollBehavior,
+        isAbsolutePositioningNeeded
+      } = this.props;
       const needArrow = this.getNeedArrow(this);
       const isAbsolute = this.getIsAbsolutePopup(this);
       const customOrder = this.getCustomPositionOrder(this);
@@ -548,29 +674,41 @@ const Popup = function (Component) {
             isPopupReady
           } = this.state;
           const scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
-          const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
-            needArrow,
-            isAbsolute,
-            customOrder
-          });
-          const {
-            view,
-            views,
-            viewsOffset,
-            targetOffset,
-            popupOffset
-          } = betterPosition || {};
-
-          if (position !== view || !isPopupReady) {
-            this.setState({
-              isPopupReady: true,
-              position: view,
-              positions: views,
-              positionsOffset: viewsOffset,
-              targetOffset,
-              popupOffset,
-              isAbsolutePositioningNeeded: isAbsolute
+
+          if (fixedPopupScrollBehavior === 'scroll' && !isAbsolutePositioningNeeded) {
+            if (!isPopupReady) {
+              this.setState({
+                isPopupReady: true,
+                isAbsolutePositioningNeeded: isAbsolute
+              });
+            }
+
+            this.setContainerDynamicPositioning();
+          } else {
+            const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
+              needArrow,
+              isAbsolute,
+              customOrder
             });
+            const {
+              view,
+              views,
+              viewsOffset,
+              targetOffset,
+              popupOffset
+            } = betterPosition || {};
+
+            if (position !== view || !isPopupReady) {
+              this.setState({
+                isPopupReady: true,
+                position: view,
+                positions: views,
+                positionsOffset: viewsOffset,
+                targetOffset,
+                popupOffset,
+                isAbsolutePositioningNeeded: isAbsolute
+              });
+            }
           }
         });
       };

package/es/Popup/intersectionObserver.js

@@ -2,38 +2,48 @@ let observerCallbacks = null;
 let intersectionObserver = null;
 
 function handleObserverCallbacks(entries) {
-  entries.map((entry, i) => {
+  entries.forEach(entry => {
     let oldCallbacks = observerCallbacks.get(entry.target);
-    oldCallbacks.length && oldCallbacks.forEach(callback => {
-      callback && callback(entry);
-    });
+
+    if (Array.isArray(oldCallbacks) && oldCallbacks.length) {
+      oldCallbacks.forEach(callback => {
+        callback && callback(entry);
+      });
+    }
   });
 }
 
 export function addIntersectionObserver(element, callback, options) {
-  if (intersectionObserver === null && observerCallbacks === null) {
-    intersectionObserver = new IntersectionObserver(entries => {
-      handleObserverCallbacks(entries);
-    }, options);
-    observerCallbacks = new Map();
-  }
+  if (!!element && typeof callback == 'function') {
+    if (intersectionObserver === null && observerCallbacks === null) {
+      intersectionObserver = new IntersectionObserver(entries => {
+        handleObserverCallbacks(entries);
+      }, options);
+      observerCallbacks = new Map();
+    }
 
-  intersectionObserver.observe(element);
-  let oldCallbacks = observerCallbacks.get(element) || [];
-  observerCallbacks.set(element, [...oldCallbacks, callback]);
+    intersectionObserver.observe(element);
+    let oldCallbacks = observerCallbacks.get(element) || [];
+    observerCallbacks.set(element, [...oldCallbacks, callback]);
+  }
 }
 export function removeIntersectionObserver(element, callback) {
-  let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : [];
-  oldCallbacks = oldCallbacks.filter(handler => handler !== callback);
+  if (!!element && typeof callback == 'function') {
+    let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : null;
 
-  if (intersectionObserver && oldCallbacks.length === 0) {
-    observerCallbacks.delete(element);
-    intersectionObserver.unobserve(element);
-  }
+    if (Array.isArray(oldCallbacks)) {
+      let callbacks = oldCallbacks.filter(handler => handler !== callback);
+
+      if (intersectionObserver && callbacks.length === 0) {
+        observerCallbacks.delete(element);
+        intersectionObserver.unobserve(element);
+      }
+    }
 
-  if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
-    intersectionObserver.disconnect();
-    intersectionObserver = null;
-    observerCallbacks = null;
+    if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
+      intersectionObserver.disconnect();
+      intersectionObserver = null;
+      observerCallbacks = null;
+    }
   }
 }

package/es/Popup/props/propTypes.js

@@ -7,7 +7,7 @@ export const PopupPropTypes = {
   isArrow: PropTypes.bool,
   isPopupOpen: PropTypes.bool,
   closeOnScroll: PropTypes.bool,
-  isOutsideScrollBlocked: PropTypes.bool,
+  fixedPopupScrollBehavior: PropTypes.oneOf(['scroll', 'block', 'none']),
   needResizeHandling: PropTypes.bool,
   isAbsolutePositioningNeeded: PropTypes.bool,
   scrollDebounceTime: PropTypes.number,

package/es/Radio/Radio.js

@@ -4,6 +4,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Label from "../Label/Label";
 import { Container, Box } from "../Layout";
+import CssProvider from "../Provider/CssProvider";
 import style from "./Radio.module.css";
 export default class Radio extends React.Component {
   constructor(props) {
@@ -57,8 +58,9 @@ export default class Radio extends React.Component {
       customRadio = '',
       customLabel = ''
     } = customClass;
-    let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
+    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
+    const isEditable = !(isReadOnly || disabled);
     let {
       ariaHidden,
       role = 'radio',
@@ -66,7 +68,7 @@ export default class Radio extends React.Component {
       ariaChecked = checked,
       ariaLabel,
       ariaLabelledby,
-      ariaReadonly = isReadOnly || disabled ? true : false
+      ariaReadonly = !isEditable ? true : false
     } = a11y;
     let {
       ContainerProps = {},
@@ -78,11 +80,11 @@ export default class Radio extends React.Component {
       isInline: text ? false : true,
       alignBox: "row",
       align: "both",
-      className: `${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${isReadOnly || disabled ? '' : style.hoverEfffect} ${checked ? style.checked : ''} ${customRadioWrap}`,
+      className: `${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${!isEditable ? '' : style.hoverEfffect} ${checked ? style.checked : ''} ${customRadioWrap}`,
       "data-title": toolTip,
       onClick: !isReadOnly && !disabled ? this.onChange : '',
       "aria-checked": ariaChecked,
-      tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+      tabindex: !isEditable || ariaHidden ? '-1' : tabIndex || '0',
       eleRef: this.handleGetRef,
       role: role,
       "aria-Hidden": ariaHidden,
@@ -92,7 +94,7 @@ export default class Radio extends React.Component {
       ...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}`
+            ${!isEditable ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio} ${!isEditable ? `${style.disabled}` : ''}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
       id: id,
@@ -115,7 +117,7 @@ export default class Radio extends React.Component {
       className: `${style.centerPath}`
     }) : null))), text && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.text
+      className: `${style.text} ${disabled ? `${style.disabled}` : ''}`
     }, /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: labelPalette,
@@ -126,7 +128,7 @@ export default class Radio extends React.Component {
       variant: variant,
       title: toolTip ? toolTip : text,
       customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} 
-              ${style[`${palette}Label`]} ${accessMode} ${customLabel}`,
+              ${style[`${palette}Label`]} ${isEditable ? style.pointer : ''} ${isReadOnly ? style.readonly : ''}  ${customLabel}`,
       ...LabelProps
     })), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }

package/es/Radio/Radio.module.css

@@ -19,7 +19,7 @@
   cursor: pointer;
 }
 .readonly, .disabled {
-  cursor: not-allowed;
+  cursor: default;
 }
 .disabled {
   opacity: 0.7