@zohodesk/components 1.0.0-temp-666 → 1.0.0-temp-69

package/es/MultiSelect/props/propTypes.js

@@ -0,0 +1,360 @@
+import PropTypes from 'prop-types';
+export const AdvancedGroupMultiSelect_propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string.isRequired,
+  getContainerRef: PropTypes.func,
+  getFooter: PropTypes.func,
+  groupedOptions: PropTypes.array.required,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  isDataLoaded: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isPadding: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  notifyPopupToggle: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectAllText: PropTypes.string,
+  selectedGroupOptions: PropTypes.array.isRequired,
+  selectedOptionDetails: PropTypes.object,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  title: PropTypes.string,
+  variant: PropTypes.string,
+  htmlId: PropTypes.string,
+  isSearchClearOnSelect: PropTypes.bool,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  needEffect: true
+};
+export const AdvancedMultiSelect_propTypes = {
+  id: PropTypes.string.isRequired,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  getNextOptions: PropTypes.func,
+  selectedOptionsLimit: PropTypes.number,
+  getSelectedOptionDetails: PropTypes.func,
+  emptyMessage: PropTypes.string.isRequired,
+  getRef: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  isNextOptions: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onSearch: PropTypes.func,
+  searchEmptyMessage: PropTypes.string,
+  placeHolder: PropTypes.string,
+  selectAllText: PropTypes.string,
+  textField: PropTypes.string,
+  valueField: PropTypes.string,
+  imageField: PropTypes.string,
+  iconName: PropTypes.string,
+  prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  //For grouping multiSelect
+  getPublicMethods: PropTypes.func,
+  optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
+  needEffect: PropTypes.bool,
+  animationStyle: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  isAnimate: PropTypes.bool,
+  onFocus: PropTypes.func,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  title: PropTypes.string,
+  variant: PropTypes.string,
+  dataIdClearIcon: PropTypes.string,
+  dataIdLoading: PropTypes.string,
+  dataIdMultiSelectComp: PropTypes.string,
+  dataIdNoMreOptionMsg: PropTypes.string,
+  dataIdSelectAllEle: PropTypes.string,
+  isSearchClearOnClose: PropTypes.bool,
+
+  /**** Popup Props ****/
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  togglePopup: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  closePopupOnly: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  htmlId: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string,
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  isBoxPaddingNeed: PropTypes.bool,
+  isSearchClearOnSelect: PropTypes.bool,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  getFooter: PropTypes.func,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  })
+};
+export const EmptyState_propTypes = {
+  dataId: PropTypes.string,
+  emptyMessage: PropTypes.string,
+  getCustomEmptyState: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  palette: PropTypes.oneOf(['default', 'dark']),
+  isLoading: PropTypes.bool,
+  noMoreOptionsMessage: PropTypes.string,
+  options: PropTypes.array,
+  searchEmptyMessage: PropTypes.string,
+  searchString: PropTypes.string,
+  suggestions: PropTypes.array,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  })
+};
+export const MultiSelect_propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.string,
+  disableAction: PropTypes.bool,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string.isRequired,
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getPublicMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string,
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  isAnimate: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  isSearching: PropTypes.bool,
+  needAutoFocus: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  needToCloseOnSelect: PropTypes.bool,
+  //For Group multiSelect
+  noMoreOptionsMessage: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  openPopupOnly: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }))]).isRequired,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  prefixText: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectAllText: PropTypes.string,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxClass: PropTypes.string,
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  valueField: PropTypes.string,
+  variant: PropTypes.string,
+  htmlId: PropTypes.string,
+  isSearchClearOnSelect: PropTypes.bool,
+  children: PropTypes.node,
+  customChildrenClass: PropTypes.string,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  getFooter: PropTypes.func,
+  needEffect: PropTypes.bool,
+  boxSize: PropTypes.string
+};
+export const MultiSelectHeader_propTypes = {
+  dataId: PropTypes.string,
+  needSelectAll: PropTypes.bool,
+  onSelect: PropTypes.func,
+  selectAllText: PropTypes.string,
+  suggestions: PropTypes.array
+};
+export const MultiSelectWithAvatar_propTypes = {
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  placeHolder: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  emptyMessage: PropTypes.string.isRequired,
+  valueField: PropTypes.string,
+  textField: PropTypes.string,
+  imageField: PropTypes.string,
+  isReadOnly: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  selectAllText: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  onDropBoxOpen: PropTypes.func,
+  onDropBoxClose: PropTypes.func,
+  onSearch: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  isNextOptions: PropTypes.bool,
+  getNextOptions: PropTypes.func,
+  needLocalSearch: PropTypes.bool,
+  searchEmptyMessage: PropTypes.string,
+  noMoreOptionsMessage: PropTypes.string,
+  getRef: PropTypes.func,
+  isAnimate: PropTypes.bool,
+  animationStyle: PropTypes.string,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  variant: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  title: PropTypes.string,
+  needResponsive: PropTypes.bool,
+  dataId: PropTypes.string,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  textBoxClass: PropTypes.string,
+  needBorder: PropTypes.bool,
+  disableAction: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  htmlId: PropTypes.string,
+  isBoxPaddingNeed: PropTypes.bool,
+  needEffect: PropTypes.bool,
+
+  /**** Popup props ****/
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  togglePopup: PropTypes.func,
+  removeClose: PropTypes.func,
+  closePopupOnly: PropTypes.func,
+  position: PropTypes.string,
+  getTargetRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string,
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  children: PropTypes.node,
+  customChildrenClass: PropTypes.string,
+  isSearchClearOnSelect: PropTypes.bool,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string)
+};
+export const SelectedOptions_propTypes = {
+  getRef: PropTypes.func,
+  highLightedSelectOptions: PropTypes.array,
+  isReadOnly: PropTypes.bool,
+  onRemove: PropTypes.func,
+  onSelect: PropTypes.func,
+  selectedOptions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string,
+    logo: PropTypes.string,
+    optionType: PropTypes.string
+  })),
+  size: PropTypes.oneOf(['medium', 'xmedium'])
+};
+export const Suggestions_propTypes = {
+  a11y: PropTypes.shape({
+    ariaParentRole: PropTypes.string,
+    ariaMultiselectable: PropTypes.bool
+  }),
+  activeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  avatarPalette: PropTypes.string,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getRef: PropTypes.func,
+  hoverId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hoverOption: PropTypes.number,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  palette: PropTypes.string,
+  selectedOptions: PropTypes.array,
+  htmlId: PropTypes.string,
+  suggestions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string,
+    logo: PropTypes.string,
+    optionType: PropTypes.string,
+    listItemProps: PropTypes.object
+  }))
+};

package/es/PopOver/PopOver.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+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';
@@ -107,54 +108,8 @@ class PopOver extends React.Component {
 
 }
 
-PopOver.defaultProps = {
-  isAnimate: false,
-  isArrow: false
-};
-PopOver.propTypes = {
-  arrowBottom: PropTypes.string,
-  arrowLeft: PropTypes.string,
-  arrowPosition: PropTypes.string,
-  arrowRight: PropTypes.string,
-  arrowTop: PropTypes.string,
-  bottom: PropTypes.string,
-  boxPosition: PropTypes.string,
-  children: PropTypes.node,
-  getContainerRef: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  isAnimate: PropTypes.bool,
-  isArrow: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  left: PropTypes.string,
-  onClick: PropTypes.func,
-  onPopupClose: PropTypes.func,
-  onPopupOpen: PropTypes.func,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  right: PropTypes.string,
-  size: PropTypes.string,
-  togglePopup: PropTypes.func,
-  top: PropTypes.string
-}; // PopOver.propTypesDescription = {
-//   right: ' ',
-//   left: ' ',
-//   top: ' ',
-//   bottom: ' ',
-//   arrowRight: ' ',
-//   arrowLeft: ' ',
-//   arrowTop: ' ',
-//   arrowBottom: ' ',
-//   arrowPosition: ' ',
-//   boxPosition: ' ',
-//   size: ' ',
-//   children: ' ',
-//   onPopupOpen: ' ',
-//   isPopupOpen: ' ',
-//   onPopupClose: ' ',
-//   getTargetRef: ' ',
-//   getContainerRef: ' '
-// };
+PopOver.defaultProps = PopOver_defaultProps;
+PopOver.propTypes = PopOver_propTypes;
 
 if (false) {
   PopOver.docs = {
@@ -192,11 +147,7 @@ export class PopOverTarget extends React.Component {
   }
 
 }
-PopOverTarget.propTypes = {
-  children: PropTypes.node,
-  getRef: PropTypes.func,
-  togglePopup: PropTypes.func
-};
+PopOverTarget.propTypes = PopOverTarget_propTypes;
 export class PopOverContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -266,27 +217,5 @@ export class PopOverContainer extends React.Component {
   }
 
 }
-PopOverContainer.defaultProps = {
-  isArrow: false
-};
-PopOverContainer.propTypes = {
-  animationStyle: PropTypes.string,
-  arrowBottom: PropTypes.string,
-  arrowLeft: PropTypes.string,
-  arrowPosition: PropTypes.string,
-  arrowRight: PropTypes.string,
-  arrowTop: PropTypes.string,
-  bottom: PropTypes.string,
-  boxPosition: PropTypes.string,
-  children: PropTypes.node,
-  getRef: PropTypes.func,
-  isAnimate: PropTypes.bool,
-  isArrow: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  left: PropTypes.string,
-  onClick: PropTypes.func,
-  removeClose: PropTypes.func,
-  right: PropTypes.string,
-  size: PropTypes.string,
-  top: PropTypes.string
-};
+PopOverContainer.defaultProps = PopOverContainer_defaultProps;
+PopOverContainer.propTypes = PopOverContainer_propTypes;

package/es/PopOver/PopOver.module.css

@@ -3,6 +3,6 @@
   background-color: var(--dot_white);
 }
 .target {
-  cursor: pointer;
   composes: offSelection from '../common/common.module.css';
+  cursor: pointer;
 }

package/es/PopOver/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const PopOver_defaultProps = {
+  isAnimate: false,
+  isArrow: false
+};
+export const PopOverContainer_defaultProps = {
+  isArrow: false
+};

package/es/PopOver/props/propTypes.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+export const PopOver_propTypes = {
+  arrowBottom: PropTypes.string,
+  arrowLeft: PropTypes.string,
+  arrowPosition: PropTypes.string,
+  arrowRight: PropTypes.string,
+  arrowTop: PropTypes.string,
+  bottom: PropTypes.string,
+  boxPosition: PropTypes.string,
+  children: PropTypes.node,
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  isAnimate: PropTypes.bool,
+  isArrow: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  left: PropTypes.string,
+  onClick: PropTypes.func,
+  onPopupClose: PropTypes.func,
+  onPopupOpen: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  right: PropTypes.string,
+  size: PropTypes.string,
+  togglePopup: PropTypes.func,
+  top: PropTypes.string
+};
+export const PopOverTarget_propTypes = {
+  children: PropTypes.node,
+  getRef: PropTypes.func,
+  togglePopup: PropTypes.func
+};
+export const PopOverContainer_propTypes = {
+  animationStyle: PropTypes.string,
+  arrowBottom: PropTypes.string,
+  arrowLeft: PropTypes.string,
+  arrowPosition: PropTypes.string,
+  arrowRight: PropTypes.string,
+  arrowTop: PropTypes.string,
+  bottom: PropTypes.string,
+  boxPosition: PropTypes.string,
+  children: PropTypes.node,
+  getRef: PropTypes.func,
+  isAnimate: PropTypes.bool,
+  isArrow: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  left: PropTypes.string,
+  onClick: PropTypes.func,
+  removeClose: PropTypes.func,
+  right: PropTypes.string,
+  size: PropTypes.string,
+  top: PropTypes.string
+};

package/es/Radio/Radio.js

@@ -1,6 +1,7 @@
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium'] }] */
 import React from 'react';
-import PropTypes from 'prop-types';
+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';
@@ -111,51 +112,8 @@ export default class Radio extends React.Component {
   }
 
 }
-Radio.defaultProps = {
-  checked: false,
-  disabled: false,
-  isReadOnly: false,
-  active: false,
-  palette: 'primary',
-  labelPalette: 'default',
-  labelSize: 'medium',
-  size: 'medium',
-  variant: 'default',
-  isFilled: true,
-  customClass: {},
-  a11y: {}
-};
-Radio.propTypes = {
-  active: PropTypes.bool,
-  checked: PropTypes.bool,
-  dataId: PropTypes.string,
-  disabled: PropTypes.bool,
-  disabledTitle: PropTypes.string,
-  id: PropTypes.string,
-  isFilled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  labelPalette: PropTypes.oneOf(['default', 'primary', 'danger', 'mandatory']),
-  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  name: PropTypes.string,
-  palette: PropTypes.oneOf(['primary', 'danger']),
-  size: PropTypes.oneOf(['small', 'medium']),
-  title: PropTypes.string,
-  value: PropTypes.string,
-  variant: PropTypes.oneOf(['primary', 'default']),
-  customClass: PropTypes.shape({
-    customRadioWrap: PropTypes.string,
-    customRadio: PropTypes.string,
-    customLabel: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    ariaChecked: PropTypes.bool,
-    ariaHidden: PropTypes.bool,
-    role: PropTypes.string,
-    ariaLabelledby: PropTypes.string,
-    ariaLabel: PropTypes.string,
-    ariaReadonly: PropTypes.bool
-  })
-};
+Radio.defaultProps = defaultProps;
+Radio.propTypes = propTypes;
 
 if (false) {
   Radio.docs = {

package/es/Radio/Radio.module.css

@@ -7,7 +7,10 @@
   --radio_stroke_color: var(--zdt_radio_default_stroke);
   --radio_fill: none;
   --radio_inner_stroke_width: 0;
+}[dir=ltr] .varClass {
   --radio_label_margin: 0 0 0 var(--zd_size6)/*rtl: 0 var(--zd_size6) 0 0*/;
+}[dir=rtl] .varClass {
+  --radio_label_margin: 0 var(--zd_size6) 0 0;
 }
 .container {
   composes: varClass;
@@ -15,16 +18,16 @@
 .pointer {
   cursor: pointer;
 }
-.readonly,.disabled {
+.readonly, .disabled {
   cursor: not-allowed;
 }
 .radio {
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
+  stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;
-  stroke: var(--radio_stroke_color);
 }
 .radio,
 .centerPath {
@@ -54,21 +57,26 @@
 }
 .centerPath {
   --radio_fill: inherit;
-  transform-origin: center;
   stroke-width: var(--radio_inner_stroke_width);
+  transform-origin: center;
+}
+[dir=ltr] .checked .centerPath {
+  animation: circleAnimate var(--zd_transition3) ease forwards;
 }
-.checked .centerPath {
+[dir=rtl] .checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
 .rdBoxprimary,
-.hoverEfffect:hover .hoverprimary,
-.hoverEfffect:focus .hoverprimary {
+.hoverEfffect:hover .hoverprimary
+/* .hoverEfffect:focus .hoverprimary  */
+{
   --radio_stroke_color: var(--zdt_radio_primary_stroke);
 }
 
 .rdBoxdanger,
-.hoverEfffect:hover .hoverdanger,
-.hoverEfffect:focus .hoverdanger {
+.hoverEfffect:hover .hoverdanger
+/* .hoverEfffect:focus .hoverdanger */
+ {
   --radio_stroke_color: var(--zdt_radio_danger_stroke);
 }
 
@@ -80,13 +88,13 @@
 }
 
 .active:hover .primaryLabel,
-.active:focus .primaryLabel,
+/* .active:focus .primaryLabel, */
 .primarycheckedActive {
   --label_text_color: var(--zdt_radio_label_primary_text);
 }
 
 .active:hover .dangerLabel,
-.active:focus .dangerLabel,
+/* .active:focus .dangerLabel, */
 .dangercheckedActive {
   --label_text_color: var(--zdt_radio_label_danger_text);
 }

package/es/Radio/props/defaultProps.js

@@ -0,0 +1,14 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  isReadOnly: false,
+  active: false,
+  palette: 'primary',
+  labelPalette: 'default',
+  labelSize: 'medium',
+  size: 'medium',
+  variant: 'default',
+  isFilled: true,
+  customClass: {},
+  a11y: {}
+};