@zohodesk/components 1.0.0-temp-190.2 → 1.0.0-temp-191

package/es/MultiSelect/MultiSelect.module.css

@@ -1,110 +1,122 @@
 .wrapper {
   position: relative;
 }
-.disabled, .readOnly {
+
+.disabled,
+.readOnly {
   cursor: not-allowed;
 }
+
 .container {
-  max-height: var(--zd_size120) ;
+  max-height: 120px;
   composes: oflowy from '../common/common.module.css';
 }
+
 .hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
+  transition: border var(--zd_transition2) linear 0s;
 }
+
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
 }
+
 .effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
 }
+
 .effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_multiselect_transparent_active_border);
 }
+
 .borderColor_default {
   border-bottom-color: var(--zdt_multiselect_default_border);
 }
+
 .effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_multiselect_default_hover_border);
 }
+
 .effect .borderColor_default.active {
   border-bottom-color: var(--zdt_multiselect_default_active_border);
 }
+
 .borderColor_dark {
   border-bottom-color: var(--zdt_multiselect_dark_border);
 }
+
 .effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_multiselect_dark_hover_border);
 }
+
 .effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_multiselect_dark_active_border);
 }
 
 .container.medium {
-  padding-bottom: var(--zd_size8) ;
+  padding-bottom: 8px;
 }
 
 .container.xmedium {
-  min-height: var(--zd_size30) ;
-  padding-bottom: var(--zd_size3) ;
+  padding-bottom: 3px;
+  min-height: 30px;
 }
 
 .delete {
-  font: inherit;
-  padding: var(--zd_size2) var(--zd_size6) ;
+  padding: 2px 6px;
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
+  font: inherit;
 }
+
 .delete,
 .defaultDelete {
   color: var(--zdt_multiselect_delete_text);
 }
+
 .darkDelete {
   color: var(--zdt_multiselect_darkdelete_text);
 }
 
 .delete:hover,
 .defaultDelete:hover {
-  color: var(--zdt_multiselect_delete_hover_text);
+  color: var(--zdt_base_color);
 }
+
 .darkDelete:hover {
   color: var(--zdt_multiselect_darkdelete_hover_text);
 }
+
 .transparentContainer .delete {
   opacity: 0;
   visibility: hidden;
 }
+
 .transparentContainer:hover .delete {
   opacity: 1;
   visibility: visible;
 }
 
 .tag {
-  max-width: 100% ;
+  max-width: 100%;
 }
 
-[dir=ltr] .container.xmedium .tag {
-  margin: var(--zd_size2) var(--zd_size10) 0 0 ;
+.container.xmedium .tag {
+  margin: 2px 10px 0 0;
 }
 
-[dir=rtl] .container.xmedium .tag {
-  margin: var(--zd_size2) 0 0 var(--zd_size10) ;
+.container.medium .tag {
+  margin: 5px 10px 0 0;
 }
 
-[dir=ltr] .container.medium .tag {
-  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
+.responsiveParent {
+  width: 100%;
 }
 
-[dir=rtl] .container.medium .tag {
-  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
-}
-.responsiveParent{
-  width: 100% ;
-}
 .box {
-  background: var(--zdt_multiselect_box_bg);
+  background: var(--zdt_base_bg);
 }
 
 .selectAll:hover {
@@ -112,41 +124,43 @@
 }
 
 .small {
-  max-height: var(--zd_size200) ;
+  max-height: 200px;
 }
 
 .medium {
-  max-height: var(--zd_size350) ;
+  max-height: 350px;
 }
 
 .large {
-  max-height: var(--zd_size400) ;
+  max-height: 400px;
 }
 
 .commonMessage {
-  font-size: var(--zd_font_size14) ;
+  font-size: 14px;
   composes: semibold from '../common/common.module.css';
-  padding: var(--zd_size12) var(--zd_size15) ;
+  padding: 12px 15px;
 }
+
 .default,
 .dark {
   composes: commonMessage;
 }
+
 .default,
 .defaultBox {
   color: var(--zdt_multiselect_message_text);
 }
+
 .dark,
 .darkBox {
-  color: var(--zdt_multiselect_darkmsg_text);
-}
-.dark, .darkBox {
   background: var(--zdt_multiselect_darkmsg_bg);
+  color: var(--zdt_multiselect_darkmsg_text);
 }
 
 .hide {
   composes: vishidden from '../common/common.module.css';
 }
+
 .custmSpan {
   display: inline-block;
   vertical-align: middle;
@@ -154,51 +168,51 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100% ;
+  max-width: 100%;
   visibility: hidden;
 }
+
 .custmSpanMedium {
-  height: var(--zd_size35) ;
+  height: 35px;
 }
+
 .custmSpanXmedium {
-  height: var(--zd_size28) ;
+  height: 28px;
 }
+
 .custmInputWrapper {
   position: absolute;
-  top: 0 ;
-  width: 100% ;
-}
-[dir=ltr] .custmInputWrapper {
-  left: 0 ;
-}
-[dir=rtl] .custmInputWrapper {
-  right: 0 ;
+  top: 0;
+  left: 0;
+  width: 100%;
 }
+
 .title {
-  margin-bottom: var(--zd_size6) ;
+  margin-bottom: 6px;
 }
+
 .groupTitle {
-  margin: var(--zd_size6) 0 ;
+  margin: 6px 0;
 }
+
 .loader {
-  padding: var(--zd_size10) ;
+  padding: 10px;
 }
+
 .iconContainer {
-  padding-top: var(--zd_size3) 
+  padding-top: 3px
 }
-[dir=ltr] .clearIconSpace {
-  padding-right: var(--zd_size37) 
-}
-[dir=rtl] .clearIconSpace {
-  padding-left: var(--zd_size37) 
+
+.clearIconSpace {
+  padding-right: 37px
 }
 
 .more {
-  font-size: var(--zd_font_size14) ;
+  font-size: 14px;
   color: var(--zdt_multiselect_more_text);
-  font-family: inherit;
   cursor: pointer;
-  margin-top: var(--zd_size5) ;
+  margin-top: 5px;
+  font-family: inherit;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0;
-}
+}

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /**** Libraries ****/
 import React from 'react';
 import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
@@ -157,7 +155,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       shrink: true,
       customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
-    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
       needTick: keepSelectedOptions,
       suggestions: suggestions,
       getRef: this.suggestionItemRef,
@@ -170,8 +168,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      }
-    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+      },
+      ...SuggestionsProps
+    }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,
       searchString: searchStr,

package/es/MultiSelect/SelectedOptions.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /**** Libraries ****/
 import React from 'react';
 import { SelectedOptions_propTypes } from './props/propTypes';
@@ -52,28 +50,28 @@ export default class SelectedOptions extends React.PureComponent {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
           key: `${id}photoTag`
-        }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
+        }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           hasAvatar: true,
           imageURL: photoURL
-        })));
+        }));
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
           key: `${id}iconTag`
-        }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
+        }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           iconName: icon,
           iconSize: iconSize
-        })));
+        }));
       }
 
       return /*#__PURE__*/React.createElement(Box, {
         className: `${style.tag} ${style[size]}`,
         key: `${id}tag`
-      }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
+      }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
         active: highLightedSelectOptions.indexOf(id) >= 0
-      })));
+      }));
     }));
   }
 

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,9 @@
 .tag {
-  max-width: 100% ;
+  max-width: 100%;
 }
-[dir=ltr] .xmedium {
-  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
+.xmedium {
+  margin: 0 10px 2px 0;
 }
-[dir=rtl] .xmedium {
-  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
-}
-[dir=ltr] .medium {
-  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
-}
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
+.medium {
+  margin: 5px 10px 0 0;
 }

package/es/MultiSelect/Suggestions.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /**** Libraries ****/
 import React from 'react';
 import { Suggestions_propTypes } from './props/propTypes';
@@ -76,7 +74,7 @@ export default class Suggestions extends React.PureComponent {
       }
 
       if (optionType === 'avatar') {
-        return /*#__PURE__*/React.createElement(ListItemWithAvatar, _extends({}, commonProps, {
+        return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
           autoHover: false,
           getRef: getRef,
           highlight: isHighlight,
@@ -95,9 +93,9 @@ export default class Suggestions extends React.PureComponent {
           avatarPalette: avatarPalette,
           palette: palette,
           a11y: list_a11y
-        }));
+        });
       } else if (optionType === 'icon') {
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({}, commonProps, {
+        return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
           autoHover: false,
           getRef: getRef,
           highlight: isHighlight,
@@ -115,10 +113,10 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           palette: palette,
           a11y: list_a11y
-        }));
+        });
       }
 
-      return /*#__PURE__*/React.createElement(ListItem, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
         autoHover: false,
         getRef: getRef,
         highlight: isHighlight,
@@ -134,7 +132,7 @@ export default class Suggestions extends React.PureComponent {
         size: listItemSize,
         palette: palette,
         a11y: list_a11y
-      }));
+      });
     })));
   }
 

package/es/PopOver/PopOver.module.css

@@ -1,9 +1,9 @@
 .popup {
   position: relative;
-  /* css:theme-validation:ignore */
-  background-color: var(--dot_white);
+  background-color: var(--zdt_base_bg);
 }
+
 .target {
-  composes: offSelection from '../common/common.module.css';
   cursor: pointer;
-}
+  composes: offSelection from '../common/common.module.css';
+}

package/es/Popup/Popup.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -623,14 +621,15 @@ const Popup = function (Component) {
         isPopupOpen
       } = this.state;
       const localState = isPopupReady ? this.state : {};
-      return /*#__PURE__*/React.createElement(Component, _extends({}, this.props, this.state, {
+      return /*#__PURE__*/React.createElement(Component, { ...this.props,
+        ...this.state,
         openPopupOnly: this.openPopupOnly,
         closePopupOnly: this.closePopupOnly,
         togglePopup: this.togglePopup,
         removeClose: this.removeClose,
         getTargetRef: this.getTargetRef,
         getContainerRef: this.getContainerRef
-      }));
+      });
     }
 
   }

package/es/Radio/Radio.js

@@ -9,6 +9,7 @@ export default class Radio extends React.Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this);
   }
 
   onChange(e) {
@@ -19,6 +20,14 @@ export default class Radio extends React.Component {
     onChange && onChange(value, e);
   }
 
+  handleGetRef(ele) {
+    let {
+      getRef,
+      value
+    } = this.props;
+    getRef && getRef(ele, value);
+  }
+
   render() {
     let {
       id,
@@ -38,6 +47,8 @@ export default class Radio extends React.Component {
       active,
       isFilled,
       customClass,
+      customProps,
+      children,
       a11y
     } = this.props;
     let {
@@ -50,11 +61,16 @@ export default class Radio extends React.Component {
     let {
       ariaHidden,
       role = 'radio',
+      tabIndex,
       ariaChecked = checked,
       ariaLabel,
       ariaLabelledby,
       ariaReadonly = isReadOnly || disabled ? true : false
     } = a11y;
+    let {
+      ContainerProps = {},
+      LabelProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       dataId: value ? value.toLowerCase() : 'RadioComp',
       isCover: false,
@@ -65,12 +81,14 @@ export default class Radio extends React.Component {
       "data-title": toolTip,
       onClick: !isReadOnly && !disabled ? this.onChange : '',
       "aria-checked": ariaChecked,
-      tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+      tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+      eleRef: this.handleGetRef,
       role: role,
       "aria-Hidden": ariaHidden,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
-      "aria-readonly": ariaReadonly
+      "aria-readonly": ariaReadonly,
+      ...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}`
@@ -99,16 +117,17 @@ export default class Radio extends React.Component {
       className: style.text
     }, /*#__PURE__*/React.createElement(Label, {
       text: text,
-      palette: disabled ? 'disable' : labelPalette,
+      palette: labelPalette,
       size: labelSize,
       type: "title",
       clipped: true,
       dataId: `${text}_label`,
       variant: variant,
       title: toolTip ? toolTip : text,
-      customClass: `${checked && active && !disabled ? `${style[`${palette}checkedActive`]}` : ''} 
-              ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
-    })));
+      customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} 
+              ${style[`${palette}Label`]} ${accessMode} ${customLabel}`,
+      ...LabelProps
+    })), children);
   }
 
 }

package/es/Radio/Radio.module.css

@@ -1,89 +1,104 @@
 .varClass {
   /* radio default variables */
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
+  --radio_width: 16px;
+  --radio_height: 16px;
   --radio_bg_color: none;
   --radio_stroke_width: 2px;
   --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);
-}[dir=rtl] .varClass {
-  --radio_label_margin: 0 var(--zd_size6) 0 0;
+  --radio_label_margin: 0 0 0 6px
+    /*rtl: 0 6px 0 0*/
+  ;
 }
+
 .container {
   composes: varClass;
 }
+
 .pointer {
   cursor: pointer;
 }
-.readonly, .disabled {
+
+.readonly,
+.disabled {
   cursor: not-allowed;
 }
+
+.disabled {
+  opacity: 0.7
+}
+
 .radio {
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
-  /* css:theme-validation:ignore */
-  stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;
+  stroke: var(--radio_stroke_color);
 }
+
 .radio,
 .centerPath {
   fill: var(--radio_fill);
 }
+
 .filled {
-  --radio_bg_color: var(--zdt_radio_default_bg);
+  --radio_bg_color: var(--zdt_base_bg);
 }
 
 .medium {
-  --radio_width: var(--zd_size16);
-  --radio_height: var(--zd_size16);
+  --radio_width: 16px;
+  --radio_height: 16px;
 }
+
 .small {
-  --radio_width: var(--zd_size13);
-  --radio_height: var(--zd_size13);
+  --radio_width: 13px;
+  --radio_height: 13px;
 }
+
 .radioLabel {
-  font-size: 0 ;
+  font-size: 0;
   display: block;
 }
+
 .rdBox {
   fill: none;
   stroke-width: var(--radio_stroke_width);
   stroke-linecap: round;
   stroke: inherit;
 }
+
 .centerPath {
   --radio_fill: inherit;
-  stroke-width: var(--radio_inner_stroke_width);
   transform-origin: center;
+  stroke-width: var(--radio_inner_stroke_width);
 }
-[dir=ltr] .checked .centerPath {
-  animation: circleAnimate var(--zd_transition3) ease forwards;
-}
-[dir=rtl] .checked .centerPath {
+
+.checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
+
 .rdBoxprimary,
 .hoverEfffect:hover .hoverprimary
+
 /* .hoverEfffect:focus .hoverprimary  */
-{
+  {
   --radio_stroke_color: var(--zdt_radio_primary_stroke);
 }
 
 .rdBoxdanger,
 .hoverEfffect:hover .hoverdanger
+
 /* .hoverEfffect:focus .hoverdanger */
- {
+  {
   --radio_stroke_color: var(--zdt_radio_danger_stroke);
 }
 
 .centerPathprimary {
   --radio_fill: var(--zdt_radio_primary_fill);
 }
+
 .centerPathdanger {
   --radio_fill: var(--zdt_radio_danger_fill);
 }
@@ -103,11 +118,13 @@
 .text {
   margin: var(--radio_label_margin);
 }
+
 @keyframes circleAnimate {
   0% {
     transform: scale(0);
   }
+
   100% {
     transform: scale(1);
   }
-}
+}