@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap

@@ -1,21 +1,21 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SelectWithAvatar rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="wrapper    effect "
+    class="wrapper effect"
     data-id="selectWithAvatar"
     data-selector-id="selectWithAvatar"
     data-test-id="selectWithAvatar"
   >
     <div
-      class="container medium borderColor_default   hasBorder flex cover rowdir vCenter"
+      class="flex fullSize row alignItems_center container medium borderColor_default hasBorder"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grow basis shrinkOff"
+        class="flexible basis_zero noShrink"
         data-id="selectWithAvatar_textBox"
         data-selector-id="box"
         data-test-id="selectWithAvatar_textBox"
@@ -28,7 +28,7 @@ exports[`SelectWithAvatar rendering the defult props 1`] = `
           aria-owns="1"
           aria-readonly="true"
           autocomplete="off"
-          class=" pointer container medium  default  effect  borderColor_default  "
+          class="pointer container medium default effect borderColor_default"
           data-id="textBox"
           data-selector-id="textBox"
           data-test-id="textBox"

package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`SelectWithIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container box_medium  "
+    class="container box_medium"
     data-selector-id="selectWithIcon"
   >
     <div
@@ -12,29 +12,29 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
       data-test-id="selectWithIcon"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="leftIcon  flex cover coldir both"
+          class="flex fullSize column alignItems_center justifyContent_center leftIcon"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         />
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input iconSelect  flex rowdir"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input iconSelect"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -47,7 +47,7 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
                 aria-owns="1"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container medium  default  effect  borderColor_default  "
+                class="pointer container medium default effect borderColor_default"
                 data-id="selectWithIcon_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="selectWithIcon_textBox"
@@ -59,32 +59,32 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex both"
+                    class="inlineFlex alignItems_center justifyContent_center rightPlaceholder"
                     data-id="selectWithIcon_downIcon"
                     data-selector-id="container"
                     data-test-id="selectWithIcon_downIcon"
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-down    "
+                      class="zd_font_icons basic icon-down"
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"

package/lib/Select/props/defaultProps.js

@@ -47,6 +47,7 @@ var Select_defaultProps = {
   iconOnHover: false,
   customProps: {},
   isLoading: false,
+  shouldUseInternalLoader: true,
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
@@ -88,6 +89,7 @@ var GroupSelect_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false,
+  shouldUseInternalLoader: true,
   customProps: {},
   allowValueFallback: true,
   customClass: {}
@@ -118,7 +120,8 @@ var SelectWithAvatar_defaultProps = (_SelectWithAvatar_def = {
   i18nKeys: {},
   customProps: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  shouldUseInternalLoader: true
 }, _defineProperty(_SelectWithAvatar_def, "customProps", {}), _defineProperty(_SelectWithAvatar_def, "customClass", {}), _SelectWithAvatar_def);
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
@@ -130,5 +133,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "shouldUseInternalLoader", true), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -108,6 +108,7 @@ var Select_propTypes = {
     InputFieldLineProps: _propTypes["default"].object
   }),
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   openPopupOnly: _propTypes["default"].bool,
@@ -206,6 +207,7 @@ var GroupSelect_propTypes = {
     searchEmptyText: _propTypes["default"].string
   }),
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   isDefaultSelectValue: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
@@ -337,6 +339,7 @@ var SelectWithIcon_propTypes = {
   valueKey: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   title: _propTypes["default"].string,
   className: _propTypes["default"].string,

package/lib/Stencils/Stencils.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _StencilsModule = _interopRequireDefault(require("./Stencils.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,7 +61,7 @@ var Stencils = /*#__PURE__*/function (_React$PureComponent) {
           isAnimated = _this$props.isAnimated;
       size = shape === 'rect' ? _StencilsModule["default"][size] : _StencilsModule["default"]["size_".concat(size)];
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_StencilsModule["default"].container, " ").concat(isAnimated ? _StencilsModule["default"].animate : '', " ").concat(_StencilsModule["default"][shape], " ").concat(size, " ").concat(_StencilsModule["default"][palette], " ").concat(customClass)
+        className: (0, _cssUtility.cn)("".concat(_StencilsModule["default"].container, " ").concat(isAnimated ? _StencilsModule["default"].animate : '', " ").concat(_StencilsModule["default"][shape], " ").concat(size, " ").concat(_StencilsModule["default"][palette], " ").concat(customClass))
       });
     }
   }]);

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Stencils rendering the customClass 1`] = `
 <DocumentFragment>
@@ -11,7 +11,7 @@ exports[`Stencils rendering the customClass 1`] = `
 exports[`Stencils rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container animate rect medium primary"
   />
 </DocumentFragment>
 `;
@@ -19,7 +19,7 @@ exports[`Stencils rendering the defult props 1`] = `
 exports[`Stencils rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium dark "
+    class="container animate rect medium dark"
   />
 </DocumentFragment>
 `;
@@ -27,7 +27,7 @@ exports[`Stencils rendering the palette of- dark 1`] = `
 exports[`Stencils rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container animate rect medium primary"
   />
 </DocumentFragment>
 `;
@@ -35,7 +35,7 @@ exports[`Stencils rendering the palette of- primary 1`] = `
 exports[`Stencils rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium secondary "
+    class="container animate rect medium secondary"
   />
 </DocumentFragment>
 `;
@@ -43,7 +43,7 @@ exports[`Stencils rendering the palette of- secondary 1`] = `
 exports[`Stencils rendering the shape of- circle 1`] = `
 <DocumentFragment>
   <div
-    class="container animate circle size_medium primary "
+    class="container animate circle size_medium primary"
   />
 </DocumentFragment>
 `;
@@ -51,7 +51,7 @@ exports[`Stencils rendering the shape of- circle 1`] = `
 exports[`Stencils rendering the shape of- rect 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container animate rect medium primary"
   />
 </DocumentFragment>
 `;
@@ -59,7 +59,7 @@ exports[`Stencils rendering the shape of- rect 1`] = `
 exports[`Stencils rendering the shape of- square 1`] = `
 <DocumentFragment>
   <div
-    class="container animate square size_medium primary "
+    class="container animate square size_medium primary"
   />
 </DocumentFragment>
 `;
@@ -67,7 +67,7 @@ exports[`Stencils rendering the shape of- square 1`] = `
 exports[`Stencils rendering the size of- default 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect default primary "
+    class="container animate rect default primary"
   />
 </DocumentFragment>
 `;
@@ -75,7 +75,7 @@ exports[`Stencils rendering the size of- default 1`] = `
 exports[`Stencils rendering the size of- large 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect large primary "
+    class="container animate rect large primary"
   />
 </DocumentFragment>
 `;
@@ -83,7 +83,7 @@ exports[`Stencils rendering the size of- large 1`] = `
 exports[`Stencils rendering the size of- medium 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container animate rect medium primary"
   />
 </DocumentFragment>
 `;
@@ -91,7 +91,7 @@ exports[`Stencils rendering the size of- medium 1`] = `
 exports[`Stencils rendering the size of- small 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect small primary "
+    class="container animate rect small primary"
   />
 </DocumentFragment>
 `;
@@ -99,7 +99,7 @@ exports[`Stencils rendering the size of- small 1`] = `
 exports[`Stencils rendering without animation 1`] = `
 <DocumentFragment>
   <div
-    class="container  rect medium primary "
+    class="container rect medium primary"
   />
 </DocumentFragment>
 `;

package/lib/Switch/Switch.js

@@ -17,6 +17,8 @@ var _Layout = require("../Layout");
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SwitchModule = _interopRequireDefault(require("./Switch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -104,7 +106,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         isCover: false,
         alignBox: "row",
         isInline: true,
-        className: "".concat(_SwitchModule["default"].container, " ").concat(customSwitchWrap, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect),
+        className: "".concat(_SwitchModule["default"].container, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect, "  ").concat(customSwitchWrap),
         "data-title": disabled ? disableTitle : title,
         "aria-checked": checked,
         role: "switch",
@@ -114,7 +116,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "checkbox",
         id: id,
-        className: "".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : ''),
+        className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : '')),
         name: name,
         value: value,
         checked: checked,
@@ -125,7 +127,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         htmlFor: id,
         "data-id": dataId,
         "data-test-id": dataId,
-        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
+        className: (0, _cssUtility.cn)("".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch)),
         tabIndex: isReadOnly || disabled ? '-1' : '0'
       })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,