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

package/es/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/es/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/es/Select/props/defaultProps.js

@@ -35,6 +35,7 @@ export const Select_defaultProps = {
   iconOnHover: false,
   customProps: {},
   isLoading: false,
+  shouldUseInternalLoader: true,
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
@@ -75,6 +76,7 @@ export const GroupSelect_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false,
+  shouldUseInternalLoader: true,
   customProps: {},
   allowValueFallback: true,
   customClass: {}
@@ -105,6 +107,7 @@ export const SelectWithAvatar_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   customProps: {},
   customClass: {}
 };
@@ -133,6 +136,7 @@ export const SelectWithIcon_defaultProps = {
   iconSize: '14',
   i18nKeys: {},
   isLoading: false,
+  shouldUseInternalLoader: true,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   customProps: {},

package/es/Select/props/propTypes.js

@@ -92,6 +92,7 @@ export const Select_propTypes = {
     InputFieldLineProps: PropTypes.object
   }),
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   isAbsolutePositioningNeeded: PropTypes.bool,
   openPopupOnly: PropTypes.bool,
@@ -189,6 +190,7 @@ export const GroupSelect_propTypes = {
     searchEmptyText: PropTypes.string
   }),
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
@@ -316,6 +318,7 @@ export const SelectWithIcon_propTypes = {
   valueKey: PropTypes.string,
   htmlId: PropTypes.string,
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   title: PropTypes.string,
   className: PropTypes.string,

package/es/Stencils/Stencils.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [primary, secondary, small, default, medium, large, clarge, cmedium, cdefault, csmall] }] */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Stencils.module.css";
 export default class Stencils extends React.PureComponent {
   render() {
@@ -15,7 +16,7 @@ export default class Stencils extends React.PureComponent {
     } = this.props;
     size = shape === 'rect' ? style[size] : style[`size_${size}`];
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isAnimated ? style.animate : ''} ${style[shape]} ${size} ${style[palette]} ${customClass}`
+      className: cn(`${style.container} ${isAnimated ? style.animate : ''} ${style[shape]} ${size} ${style[palette]} ${customClass}`)
     });
   }
 

package/es/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/es/Switch/Switch.js

@@ -5,6 +5,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Container, Box } from "../Layout";
 import Label from "../Label/Label";
+import { cn } from "@dot-system/css-utility";
 import style from "./Switch.module.css";
 export default class Switch extends React.Component {
   constructor(props) {
@@ -55,7 +56,7 @@ export default class Switch extends React.Component {
       isCover: false,
       alignBox: "row",
       isInline: true,
-      className: `${style.container} ${customSwitchWrap} ${disabled ? style.disabled : isReadOnly ? style.readonly : style.effect}`,
+      className: `${style.container} ${disabled ? style.disabled : isReadOnly ? style.readonly : style.effect}  ${customSwitchWrap}`,
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
@@ -65,7 +66,7 @@ export default class Switch extends React.Component {
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       id: id,
-      className: `${style.input} ${checked ? style.checked : ''}`,
+      className: cn(`${style.input} ${checked ? style.checked : ''}`),
       name: name,
       value: value,
       checked: checked,
@@ -76,7 +77,7 @@ export default class Switch extends React.Component {
       htmlFor: id,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+      className: cn(`${style.label} ${style[`${size}Label`]} ${customSwitch}`),
       tabIndex: isReadOnly || disabled ? '-1' : '0'
     })), text && /*#__PURE__*/React.createElement(Label, _extends({
       text: text,