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

package/lib/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/lib/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/lib/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/lib/Radio/Radio.js

@@ -21,6 +21,8 @@ var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -53,6 +55,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.handleGetRef = _this.handleGetRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -64,28 +67,38 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           value = _this$props.value;
       onChange && onChange(value, e);
     }
+  }, {
+    key: "handleGetRef",
+    value: function handleGetRef(ele) {
+      var _this$props2 = this.props,
+          getRef = _this$props2.getRef,
+          value = _this$props2.value;
+      getRef && getRef(ele, value);
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          name = _this$props2.name,
-          value = _this$props2.value,
-          checked = _this$props2.checked,
-          disabled = _this$props2.disabled,
-          isReadOnly = _this$props2.isReadOnly,
-          palette = _this$props2.palette,
-          disabledTitle = _this$props2.disabledTitle,
-          title = _this$props2.title,
-          text = _this$props2.text,
-          labelPalette = _this$props2.labelPalette,
-          size = _this$props2.size,
-          labelSize = _this$props2.labelSize,
-          variant = _this$props2.variant,
-          active = _this$props2.active,
-          isFilled = _this$props2.isFilled,
-          customClass = _this$props2.customClass,
-          a11y = _this$props2.a11y;
+      var _this$props3 = this.props,
+          id = _this$props3.id,
+          name = _this$props3.name,
+          value = _this$props3.value,
+          checked = _this$props3.checked,
+          disabled = _this$props3.disabled,
+          isReadOnly = _this$props3.isReadOnly,
+          palette = _this$props3.palette,
+          disabledTitle = _this$props3.disabledTitle,
+          title = _this$props3.title,
+          text = _this$props3.text,
+          labelPalette = _this$props3.labelPalette,
+          size = _this$props3.size,
+          labelSize = _this$props3.labelSize,
+          variant = _this$props3.variant,
+          active = _this$props3.active,
+          isFilled = _this$props3.isFilled,
+          customClass = _this$props3.customClass,
+          customProps = _this$props3.customProps,
+          children = _this$props3.children,
+          a11y = _this$props3.a11y;
       var _customClass$customRa = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadio,
@@ -97,13 +110,18 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       var ariaHidden = a11y.ariaHidden,
           _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'radio' : _a11y$role,
+          tabIndex = a11y.tabIndex,
           _a11y$ariaChecked = a11y.ariaChecked,
           ariaChecked = _a11y$ariaChecked === void 0 ? checked : _a11y$ariaChecked,
           ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby,
           _a11y$ariaReadonly = a11y.ariaReadonly,
           ariaReadonly = _a11y$ariaReadonly === void 0 ? isReadOnly || disabled ? true : false : _a11y$ariaReadonly;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      var _customProps$Containe = customProps.ContainerProps,
+          ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
+          _customProps$LabelPro = customProps.LabelProps,
+          LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         dataId: value ? value.toLowerCase() : 'RadioComp',
         isCover: false,
         isInline: text ? false : true,
@@ -113,13 +131,14 @@ var Radio = /*#__PURE__*/function (_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
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n            ").concat(isReadOnly || disabled ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio)
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
@@ -144,17 +163,17 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _RadioModule["default"].text
-      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
-        palette: disabled ? 'disable' : labelPalette,
+        palette: labelPalette,
         size: labelSize,
         type: "title",
         clipped: true,
         dataId: "".concat(text, "_label"),
         variant: variant,
         title: toolTip ? toolTip : text,
-        customClass: "".concat(checked && active && !disabled ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
-      })));
+        customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n              ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
+      }, LabelProps))), children);
     }
   }]);
 

package/lib/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);
   }
-}
+}

package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap

@@ -1145,7 +1145,7 @@ exports[`Radio rendering the accessMode when disabled  1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               primaryLabel disabled  "
         data-id="RadioText_label"
@@ -1505,7 +1505,7 @@ exports[`Radio rendering the disabled is true 1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               undefined disabled  "
         data-id="RadioText_label"
@@ -1567,7 +1567,7 @@ exports[`Radio rendering the disabledTitle 1`] = `
       data-test-id="boxComponent"
     >
       <label
-        class="label title medium disable font_default
+        class="label title medium default font_default
           dotted cursor  
               primaryLabel disabled  "
         data-id="RadioText_label"

package/lib/Radio/props/defaultProps.js

@@ -16,6 +16,7 @@ var defaultProps = {
   variant: 'default',
   isFilled: true,
   customClass: {},
+  customProps: {},
   a11y: {}
 };
 exports.defaultProps = defaultProps;

package/lib/Radio/props/propTypes.js

@@ -14,6 +14,7 @@ var propTypes = {
   checked: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   disabledTitle: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
   id: _propTypes["default"].string,
   isFilled: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
@@ -30,14 +31,20 @@ var propTypes = {
     customRadio: _propTypes["default"].string,
     customLabel: _propTypes["default"].string
   }),
+  customProps: _propTypes["default"].exact({
+    ContainerProps: _propTypes["default"].object,
+    LabelProps: _propTypes["default"].object
+  }),
   a11y: _propTypes["default"].shape({
     ariaChecked: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool,
     role: _propTypes["default"].string,
+    tabIndex: _propTypes["default"].oneOfType(_propTypes["default"].string, _propTypes["default"].number),
     ariaLabelledby: _propTypes["default"].string,
     ariaLabel: _propTypes["default"].string,
     ariaReadonly: _propTypes["default"].bool
   }),
+  children: _propTypes["default"].node,
   onChange: _propTypes["default"].func,
   text: _propTypes["default"].string
 };

package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css

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