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

package/es/MultiSelect/Suggestions.js

@@ -1,13 +1,13 @@
 /**** Libraries ****/
 import React from 'react';
-import { Suggestions_propTypes } from './props/propTypes';
-import { Suggestions_defaultProps } from './props/defaultProps';
+import { Suggestions_propTypes } from "./props/propTypes";
+import { Suggestions_defaultProps } from "./props/defaultProps";
 /**** Components ****/
 
-import ListItem from '../ListItem/ListItem';
-import ListItemWithAvatar from '../ListItem/ListItemWithAvatar';
-import ListItemWithIcon from '../ListItem/ListItemWithIcon';
-import { Container, Box } from '../Layout';
+import ListItem from "../ListItem/ListItem";
+import ListItemWithAvatar from "../ListItem/ListItemWithAvatar";
+import ListItemWithIcon from "../ListItem/ListItemWithIcon";
+import { Container, Box } from "../Layout";
 export default class Suggestions extends React.PureComponent {
   render() {
     const {

package/es/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AdvancedGroupMultiSelect from '../AdvancedGroupMultiSelect';
+import AdvancedGroupMultiSelect from "../AdvancedGroupMultiSelect";
 describe('AdvancedGroupMultiSelect', () => {
   test('rendering the defult props', () => {
     const mockOnChange = jest.fn();

package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AdvancedMultiSelect from '../AdvancedMultiSelect';
+import AdvancedMultiSelect from "../AdvancedMultiSelect";
 describe('AdvancedMultiSelect', () => {
   test('rendering the defult props', () => {
     const mockOnChange = jest.fn();

package/es/MultiSelect/__tests__/EmptyState.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import EmptyState from '../EmptyState';
+import EmptyState from "../EmptyState";
 describe('EmptyState', () => {
   test('rendering the defult props', () => {
     const {

package/es/MultiSelect/__tests__/MultiSelect.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import MultiSelect from '../MultiSelect';
+import MultiSelect from "../MultiSelect";
 describe('MultiSelect', () => {
   test('rendering the defult props', () => {
     const {

package/es/MultiSelect/__tests__/MultiSelectHeader.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import MultiSelectHeader from '../MultiSelectHeader';
+import MultiSelectHeader from "../MultiSelectHeader";
 describe('MultiSelectHeader', () => {
   test('rendering the defult props', () => {
     const {

package/es/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import MultiSelectWithAvatar from '../MultiSelectWithAvatar';
+import MultiSelectWithAvatar from "../MultiSelectWithAvatar";
 describe('MultiSelectWithAvatar', () => {
   test('rendering the defult props', () => {
     const {

package/es/MultiSelect/__tests__/SelectedOptions.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import SelectedOptions from '../SelectedOptions';
+import SelectedOptions from "../SelectedOptions";
 describe('SelectedOptions', () => {
   test('rendering the defult props', () => {
     const {

package/es/MultiSelect/__tests__/Suggestions.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Suggestions from '../Suggestions';
+import Suggestions from "../Suggestions";
 describe('Suggestions', () => {
   test('rendering the defult props', () => {
     const {

package/es/MultiSelect/index.js

@@ -1,4 +1,4 @@
-export { default as MultiSelect } from './MultiSelect';
-export { default as MultiSelectWithAvatar } from './MultiSelectWithAvatar';
-export { default as AdvancedMultiSelect } from './AdvancedMultiSelect';
-export { default as AdvancedGroupMultiSelect } from './AdvancedGroupMultiSelect';
+export { default as MultiSelect } from "./MultiSelect";
+export { default as MultiSelectWithAvatar } from "./MultiSelectWithAvatar";
+export { default as AdvancedMultiSelect } from "./AdvancedMultiSelect";
+export { default as AdvancedGroupMultiSelect } from "./AdvancedGroupMultiSelect";

package/es/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/MultiSelect/props/propTypes.js

@@ -111,7 +111,8 @@ export const MultiSelect_propTypes = {
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object
-  })
+  }),
+  isFocus: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -246,7 +247,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   needToCloseOnSelect: PropTypes.func,
   searchStr: PropTypes.string,
   children: PropTypes.node,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  isFocus: PropTypes.bool
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,
@@ -321,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/PopOver/PopOver.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { PopOver_defaultProps, PopOverContainer_defaultProps } from './props/defaultProps';
-import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes } from './props/propTypes';
-import Popup from '../Popup/Popup';
-import { Box } from '../Layout';
-import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import style from './PopOver.module.css';
+import { PopOver_defaultProps, PopOverContainer_defaultProps } from "./props/defaultProps";
+import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes } from "./props/propTypes";
+import Popup from "../Popup/Popup";
+import { Box } from "../Layout";
+import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import style from "./PopOver.module.css";
 
 class PopOver extends React.Component {
   constructor(props) {

package/es/PopOver/__tests__/PopOver.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import PopOver from '../PopOver';
+import PopOver from "../PopOver";
 describe('PopOver', () => {
   test('rendering the defult props', () => {
     const {

package/es/PopOver/index.js

@@ -1,3 +1,3 @@
-export { default as PopOver } from './PopOver';
-export { PopOverTarget } from './PopOver';
-export { PopOverContainer } from './PopOver';
+export { default as PopOver } from "./PopOver";
+export { PopOverTarget } from "./PopOver";
+export { PopOverContainer } from "./PopOver";

package/es/Popup/Popup.js

@@ -1,14 +1,15 @@
 /**** Libraries ****/
 import React from 'react';
 import hoistStatics from 'hoist-non-react-statics';
-import { PopupPropTypes, ContextTypes } from './props/propTypes';
+import { PopupPropTypes, ContextTypes } from "./props/propTypes";
 /**** Methods ****/
 
-import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from '../utils/Common.js';
-import viewPort from './viewPort';
-import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from './PositionMapping.js';
+import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from "../utils/Common.js";
+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 { addIntersectionObserver, removeIntersectionObserver } from "./intersectionObserver";
+import { positionMapping } from "../DropBox/DropBoxPositionMapping.js";
 let lastOpenedGroup = [];
 let popups = {};
 
@@ -98,6 +99,12 @@ const Popup = function (Component) {
       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;
@@ -167,8 +174,10 @@ const Popup = function (Component) {
 
         if (isPopupReady) {
           this.handleAddingScrollBlock();
+          this.handleAddingScrollToUpdatePosition();
         } else {
           this.handleRemovingScrollBlock();
+          this.handleRemovingScrollToUpdatePosition();
         }
       }
     }
@@ -213,10 +222,10 @@ const Popup = function (Component) {
     handleAddingScrollBlock() {
       const {
         isAbsolutePositioningNeeded,
-        isOutsideScrollBlocked
+        fixedPopupScrollBehavior
       } = this.props;
 
-      if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+      if (fixedPopupScrollBehavior === 'block' && !isAbsolutePositioningNeeded) {
         addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
         this.addScrollBlockListeners();
       }
@@ -225,15 +234,95 @@ const Popup = function (Component) {
     handleRemovingScrollBlock() {
       const {
         isAbsolutePositioningNeeded,
-        isOutsideScrollBlocked
+        fixedPopupScrollBehavior
       } = this.props;
 
-      if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+      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,
@@ -310,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
@@ -538,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);
@@ -567,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/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/Provider/AvatarSize.js

@@ -1,4 +1,4 @@
-import style from '../common/avatarsizes.module.css';
+import style from "../common/avatarsizes.module.css";
 let styleList = {
   small: style.small,
   xsmall: style.xsmall,

package/es/Provider/CssProvider.js

@@ -1,4 +1,4 @@
-import style from '../common/common.module.css';
+import style from "../common/common.module.css";
 let styleList = {
   hide: style.hide,
   isDisabled: style.disabled,

package/es/Provider/IdProvider.js

@@ -1,5 +1,5 @@
-import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
-import { getLibraryConfig } from './Config';
+import { useNumberGenerator, getNumberGenerators } from "./NumberGenerator/NumberGenerator";
+import { getLibraryConfig } from "./Config";
 let globalId = getLibraryConfig('idCounter'),
     deletedIndexes = [],
     globalPrefix;

package/es/Provider/LibraryContext.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import LibraryContextInit from './LibraryContextInit';
-import { getLibraryConfig } from './Config';
+import LibraryContextInit from "./LibraryContextInit";
+import { getLibraryConfig } from "./Config";
 
 const LibraryContextProvider = _ref => {
   let {

package/es/Provider/ZindexProvider.js

@@ -1,5 +1,5 @@
-import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
-import { getLibraryConfig } from './Config';
+import { useNumberGenerator, getNumberGenerators } from "./NumberGenerator/NumberGenerator";
+import { getLibraryConfig } from "./Config";
 let globalId = getLibraryConfig('zindexCounter'),
     deletedIndexes = [],
     globalPrefix;

package/es/Provider/index.js

@@ -1,4 +1,4 @@
-export { getLibraryConfig, setLibraryConfig } from './Config';
-export { default as LibraryContextProvider } from './LibraryContext';
-export { removeGlobalZIndexPrefix, setInitialZIndex, useZIndex, getZIndex } from './ZindexProvider';
-export { setGlobalIdPrefix, removeGlobalIdPrefix, useUniqueId, getUniqueId } from './IdProvider';
+export { getLibraryConfig, setLibraryConfig } from "./Config";
+export { default as LibraryContextProvider } from "./LibraryContext";
+export { removeGlobalZIndexPrefix, setInitialZIndex, useZIndex, getZIndex } from "./ZindexProvider";
+export { setGlobalIdPrefix, removeGlobalIdPrefix, useUniqueId, getUniqueId } from "./IdProvider";

package/es/Radio/Radio.js

@@ -1,10 +1,11 @@
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium'] }] */
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import Label from '../Label/Label';
-import { Container, Box } from '../Layout';
-import style from './Radio.module.css';
+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) {
     super(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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Radio from '../Radio.js';
+import Radio from "../Radio.js";
 describe('Radio', () => {
   test('rendering the defult props', () => {
     const {