@zohodesk/components 1.6.22 → 1.6.23-exp-2

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`MultiSelectHeader rendering the basic value 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium  default     withBorder selectAll"
+    class="flex row alignItems_center list medium default withBorder selectAll"
     data-a11y-inset-focus="true"
     data-id="MultiSelectHeader_selectAll"
     data-selector-id="listItemWithIcon"
@@ -31,7 +31,7 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons  basic icon-androidd   "
+            class="zd_font_icons basic icon-androidd"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap

@@ -3,13 +3,13 @@
 exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class=" wrapper     effect"
+    class="wrapper effect"
     data-id="multiSelectWithAvatar"
     data-selector-id="multiSelectWithAvatar"
     data-test-id="multiSelectWithAvatar"
   >
     <div
-      class="flex fullSize row wrap alignItems_center container medium borderColor_default  hasBorder undefined"
+      class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -21,11 +21,10 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
-          "
+          class="custmSpan custmSpanMedium"
         />
         <div
-          class="flex row varClass customContainer    effect     container  custmInputWrapper"
+          class="flex row varClass customContainer effect container custmInputWrapper"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -38,7 +37,7 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               aria-required="true"
-              class="  container medium  default  effect  borderColor_default  "
+              class="container medium default effect borderColor_default"
               data-id="multiSelectWithAvatar_textBox"
               data-selector-id="textBoxIcon"
               data-test-id="multiSelectWithAvatar_textBox"

package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap

@@ -25,7 +25,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
   >
     <div
       aria-labelledby="1"
-      class="container effect    medium lgRadius danger   "
+      class="container effect medium lgRadius danger"
       data-id="tag_Tag"
       data-selector-id="tag"
       data-test-id="tag_Tag"
@@ -49,7 +49,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
   >
     <div
       aria-labelledby="2"
-      class="container effect    medium lgRadius danger   "
+      class="container effect medium lgRadius danger"
       data-id="tag_Tag"
       data-selector-id="tag"
       data-test-id="tag_Tag"
@@ -73,7 +73,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
   >
     <div
       aria-labelledby="3"
-      class="container effect    medium lgRadius danger   "
+      class="container effect medium lgRadius danger"
       data-id="tag_Tag"
       data-selector-id="tag"
       data-test-id="tag_Tag"

package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap

@@ -18,7 +18,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
       <li
         aria-label="Suggestions Option 1"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default     withBorder"
+        class="flex row alignItems_center list medium default withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="Suggestions Option 1"
@@ -103,7 +103,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text2"
         aria-selected="true"
-        class="flex row alignItems_center list medium  default activedefault    activewithBorder"
+        class="flex row alignItems_center list medium default activedefault activewithBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text2"
@@ -141,7 +141,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text3"
         aria-selected="true"
-        class="flex row alignItems_center list medium  default activedefault    activewithBorder"
+        class="flex row alignItems_center list medium default activedefault activewithBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text3"
@@ -179,7 +179,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text4"
         aria-selected="true"
-        class="flex row alignItems_center list medium  default activedefault    activewithBorder"
+        class="flex row alignItems_center list medium default activedefault activewithBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text4"
@@ -216,7 +216,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text5"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text5"
@@ -251,7 +251,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text6"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text6"
@@ -286,7 +286,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text7"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text7"
@@ -321,7 +321,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text8"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text8"
@@ -356,7 +356,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text9"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text9"
@@ -391,7 +391,7 @@ exports[`Suggestions rendering with limit props 1`] = `
       <li
         aria-label="text10"
         aria-selected="false"
-        class="flex row alignItems_center list medium  default    disable withBorder"
+        class="flex row alignItems_center list medium default disable withBorder"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
         data-id="text10"

package/lib/PopOver/PopOver.js

@@ -19,6 +19,8 @@ var _Layout = require("../Layout");
 
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _PopOverModule = _interopRequireDefault(require("./PopOver.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -151,7 +153,7 @@ var PopOver = /*#__PURE__*/function (_React$Component) {
       });
 
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _PopOverModule["default"].popup
+        className: (0, _cssUtility.cn)(_PopOverModule["default"].popup)
       }, childrens);
     }
   }]);
@@ -194,7 +196,7 @@ var PopOverTarget = /*#__PURE__*/function (_React$Component2) {
           children = _this$props4.children,
           togglePopup = _this$props4.togglePopup;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _PopOverModule["default"].target,
+        className: (0, _cssUtility.cn)(_PopOverModule["default"].target),
         onClick: togglePopup,
         ref: this.getRef
       }, children);

package/lib/Radio/Radio.js

@@ -21,6 +21,8 @@ var _Layout = require("../Layout");
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -158,7 +160,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         name: name,
         value: value
       }), /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(_RadioModule["default"].radioLabel, " ").concat(accessMode)
+        className: (0, _cssUtility.cn)("".concat(_RadioModule["default"].radioLabel, " ").concat(accessMode))
       }, /*#__PURE__*/_react["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 40 40"
@@ -166,12 +168,12 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         cx: "20",
         cy: "20",
         r: "19",
-        className: "".concat(_RadioModule["default"].rdBox)
+        className: (0, _cssUtility.cn)("".concat(_RadioModule["default"].rdBox))
       }), checked ? /*#__PURE__*/_react["default"].createElement("circle", {
         cx: "20",
         cy: "20",
         r: "11.03",
-        className: "".concat(_RadioModule["default"].centerPath)
+        className: (0, _cssUtility.cn)("".concat(_RadioModule["default"].centerPath))
       }) : null))), (text || secondaryText) && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _RadioModule["default"].labelContainer