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

package/lib/MultiSelect/MultiSelect.module.css

@@ -1,122 +1,110 @@
 .wrapper {
   position: relative;
 }
-
-.disabled,
-.readOnly {
+.disabled, .readOnly {
   cursor: not-allowed;
 }
-
 .container {
-  max-height: 120px;
+  max-height: var(--zd_size120) ;
   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: 8px;
+  padding-bottom: var(--zd_size8) ;
 }
 
 .container.xmedium {
-  padding-bottom: 3px;
-  min-height: 30px;
+  min-height: var(--zd_size30) ;
+  padding-bottom: var(--zd_size3) ;
 }
 
 .delete {
-  padding: 2px 6px;
+  font: inherit;
+  padding: var(--zd_size2) var(--zd_size6) ;
   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_base_color);
+  color: var(--zdt_multiselect_delete_hover_text);
 }
-
 .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% ;
 }
 
-.container.xmedium .tag {
-  margin: 2px 10px 0 0;
+[dir=ltr] .container.xmedium .tag {
+  margin: var(--zd_size2) var(--zd_size10) 0 0 ;
 }
 
-.container.medium .tag {
-  margin: 5px 10px 0 0;
+[dir=rtl] .container.xmedium .tag {
+  margin: var(--zd_size2) 0 0 var(--zd_size10) ;
 }
 
-.responsiveParent {
-  width: 100%;
+[dir=ltr] .container.medium .tag {
+  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
 }
 
+[dir=rtl] .container.medium .tag {
+  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
+}
+.responsiveParent{
+  width: 100% ;
+}
 .box {
-  background: var(--zdt_base_bg);
+  background: var(--zdt_multiselect_box_bg);
 }
 
 .selectAll:hover {
@@ -124,43 +112,41 @@
 }
 
 .small {
-  max-height: 200px;
+  max-height: var(--zd_size200) ;
 }
 
 .medium {
-  max-height: 350px;
+  max-height: var(--zd_size350) ;
 }
 
 .large {
-  max-height: 400px;
+  max-height: var(--zd_size400) ;
 }
 
 .commonMessage {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   composes: semibold from '../common/common.module.css';
-  padding: 12px 15px;
+  padding: var(--zd_size12) var(--zd_size15) ;
 }
-
 .default,
 .dark {
   composes: commonMessage;
 }
-
 .default,
 .defaultBox {
   color: var(--zdt_multiselect_message_text);
 }
-
 .dark,
 .darkBox {
-  background: var(--zdt_multiselect_darkmsg_bg);
   color: var(--zdt_multiselect_darkmsg_text);
 }
+.dark, .darkBox {
+  background: var(--zdt_multiselect_darkmsg_bg);
+}
 
 .hide {
   composes: vishidden from '../common/common.module.css';
 }
-
 .custmSpan {
   display: inline-block;
   vertical-align: middle;
@@ -168,51 +154,51 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
+  max-width: 100% ;
   visibility: hidden;
 }
-
 .custmSpanMedium {
-  height: 35px;
+  height: var(--zd_size35) ;
 }
-
 .custmSpanXmedium {
-  height: 28px;
+  height: var(--zd_size28) ;
 }
-
 .custmInputWrapper {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  top: 0 ;
+  width: 100% ;
+}
+[dir=ltr] .custmInputWrapper {
+  left: 0 ;
+}
+[dir=rtl] .custmInputWrapper {
+  right: 0 ;
 }
-
 .title {
-  margin-bottom: 6px;
+  margin-bottom: var(--zd_size6) ;
 }
-
 .groupTitle {
-  margin: 6px 0;
+  margin: var(--zd_size6) 0 ;
 }
-
 .loader {
-  padding: 10px;
+  padding: var(--zd_size10) ;
 }
-
 .iconContainer {
-  padding-top: 3px
+  padding-top: var(--zd_size3) 
 }
-
-.clearIconSpace {
-  padding-right: 37px
+[dir=ltr] .clearIconSpace {
+  padding-right: var(--zd_size37) 
+}
+[dir=rtl] .clearIconSpace {
+  padding-left: var(--zd_size37) 
 }
 
 .more {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
-  cursor: pointer;
-  margin-top: 5px;
   font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0;
-}
+}

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -141,6 +141,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           keepSelectedOptions = _this$props.keepSelectedOptions,
+          needMultiLineText = _this$props.needMultiLineText,
           customProps = _this$props.customProps;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
@@ -223,7 +224,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
-        }
+        },
+        needMultiLineText: needMultiLineText
       }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,

package/lib/MultiSelect/SelectedOptions.module.css

@@ -1,9 +1,15 @@
 .tag {
-  max-width: 100%;
+  max-width: 100% ;
 }
-.xmedium {
-  margin: 0 10px 2px 0;
+[dir=ltr] .xmedium {
+  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
 }
-.medium {
-  margin: 5px 10px 0 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) ;
 }

package/lib/MultiSelect/Suggestions.js

@@ -83,7 +83,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           avatarPalette = _this$props.avatarPalette,
           palette = _this$props.palette,
           htmlId = _this$props.htmlId,
-          a11y = _this$props.a11y;
+          a11y = _this$props.a11y,
+          needMultiLineText = _this$props.needMultiLineText;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -143,7 +144,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             size: listItemSize,
             avatarPalette: avatarPalette,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            needMultiLineText: needMultiLineText
           }));
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
@@ -163,7 +165,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize: iconSize,
             size: listItemSize,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            needMultiLineText: needMultiLineText
           }));
         }
 
@@ -182,7 +185,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           active: isActive,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
         }));
       })));
     }

package/lib/MultiSelect/props/defaultProps.js

@@ -43,7 +43,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect'
+  dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {}
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
 var AdvancedMultiSelect_defaultProps = {
@@ -120,7 +121,9 @@ var MultiSelect_defaultProps = {
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
-  cardHeaderName: ''
+  cardHeaderName: '',
+  needResponsive: true,
+  customProps: {}
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -156,6 +159,8 @@ var MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
+  needResponsive: true,
+  needMultiLineText: false,
   customProps: {}
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
@@ -164,6 +169,7 @@ var SelectedOptions_defaultProps = {
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
-  a11y: {}
+  a11y: {},
+  needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -7,6 +7,8 @@ exports.Suggestions_propTypes = exports.SelectedOptions_propTypes = exports.Mult
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _AdvancedGroupMultiSe;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -121,7 +123,8 @@ var MultiSelect_propTypes = {
   needSelectAll: _propTypes["default"].bool,
   selectAllText: _propTypes["default"].string,
   setAriaId: _propTypes["default"].string,
-  ariaErrorId: _propTypes["default"].string
+  ariaErrorId: _propTypes["default"].string,
+  customProps: _propTypes["default"].string
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -139,6 +142,7 @@ var MultiSelectWithAvatar_propTypes = _objectSpread({
     photoURL: _propTypes["default"].string
   }))]).isRequired,
   imageField: _propTypes["default"].string,
+  needMultiLineText: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
@@ -190,11 +194,11 @@ var Suggestions_propTypes = {
     logo: _propTypes["default"].string,
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
-  }))
+  })),
+  needMultiLineText: _propTypes["default"].bool
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
-
-var AdvancedGroupMultiSelect_propTypes = _defineProperty({
+var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   animationStyle: _propTypes["default"].string,
   autoComplete: _propTypes["default"].bool,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
@@ -258,8 +262,7 @@ var AdvancedGroupMultiSelect_propTypes = _defineProperty({
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, "dataSelectorId", _propTypes["default"].string);
-
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].string), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {

package/lib/PopOver/PopOver.module.css

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

package/lib/Radio/Radio.module.css

@@ -1,104 +1,91 @@
 .varClass {
   /* radio default variables */
-  --radio_width: 16px;
-  --radio_height: 16px;
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
   --radio_bg_color: none;
   --radio_stroke_width: 2px;
   --radio_stroke_color: var(--zdt_radio_default_stroke);
   --radio_fill: none;
   --radio_inner_stroke_width: 0;
-  --radio_label_margin: 0 0 0 6px
-    /*rtl: 0 6px 0 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;
 }
-
 .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);
+  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_base_bg);
+  --radio_bg_color: var(--zdt_radio_default_bg);
 }
 
 .medium {
-  --radio_width: 16px;
-  --radio_height: 16px;
+  --radio_width: var(--zd_size16);
+  --radio_height: var(--zd_size16);
 }
-
 .small {
-  --radio_width: 13px;
-  --radio_height: 13px;
+  --radio_width: var(--zd_size13);
+  --radio_height: var(--zd_size13);
 }
-
 .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;
-  transform-origin: center;
   stroke-width: var(--radio_inner_stroke_width);
+  transform-origin: center;
 }
-
-.checked .centerPath {
+[dir=ltr] .checked .centerPath {
+  animation: circleAnimate var(--zd_transition3) ease forwards;
+}
+[dir=rtl] .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);
 }
@@ -118,13 +105,11 @@
 .text {
   margin: var(--radio_label_margin);
 }
-
 @keyframes circleAnimate {
   0% {
     transform: scale(0);
   }
-
   100% {
     transform: scale(1);
   }
-}
+}

package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css

@@ -1,6 +1,6 @@
 .dropBoxContainer {
-  max-height: 70vh;
+  max-height: 70vh ;
 }
 .boxPadding{
-  padding-bottom: 10px;
+  padding-bottom: var(--zd_size10) ;
 }