@zohodesk/components 1.6.27 → 1.6.29

package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -1,5 +1,126 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`AdvancedGroupMultiSelect Should render as disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper disabled"
+    data-id="multiSelect_disabled"
+    data-selector-id="advancedGroupMultiSelect"
+    data-test-id="multiSelect_disabled"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium hasBorder borderColor_default"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 tag medium"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="3"
+          class="container effect medium lgRadius danger disabled pointer"
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="Str_Group1_Str_group11"
+          tabindex="-1"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="3"
+          >
+            Str_Group1_Str_group11
+          </div>
+        </div>
+      </div>
+      <div
+        class="d-flex-shrink-0 tag medium"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="4"
+          class="container effect medium lgRadius danger disabled pointer"
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="Str_Group2_Str_group22"
+          tabindex="-1"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="4"
+          >
+            Str_Group2_Str_group22
+          </div>
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class="custmSpan custmSpanMedium"
+        />
+        <div
+          class="d-flex d-flex-row varClass customContainer disabled container custmInputWrapper"
+          data-selector-id="textBoxIcon"
+          data-title=""
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="container medium default effect borderColor_default"
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              disabled=""
+              maxlength="250"
+              placeholder=""
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="d-flex-shrink-0 iconContainer"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex d-h-full d-w-full d-flex-row"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div

package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -1,5 +1,102 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`AdvancedMultiSelect Should render as disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper disabled"
+    data-id="multiSelectComp"
+    data-selector-id="advancedMultiSelect"
+    data-test-id="multiSelectComp"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium hasBorder borderColor_transparent"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 tag medium"
+        data-id="multiSelectComp_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_selectedOptions"
+      >
+        <div
+          aria-labelledby="3"
+          class="container effect medium lgRadius danger disabled pointer"
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="Apple"
+          tabindex="-1"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="3"
+          >
+            Apple
+          </div>
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
+        data-id="multiSelectComp_textBox"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_textBox"
+      >
+        <span
+          class="custmSpan custmSpanMedium"
+        />
+        <div
+          class="d-flex d-flex-row varClass customContainer disabled container custmInputWrapper"
+          data-selector-id="textBoxIcon"
+          data-title=""
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="container medium default effect borderColor_default"
+              data-id="textBoxIcon"
+              data-selector-id="textBoxIcon"
+              data-test-id="textBoxIcon"
+              disabled=""
+              maxlength="250"
+              placeholder=""
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="d-flex-shrink-0 iconContainer"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex d-h-full d-w-full d-flex-row"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`AdvancedMultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div

package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap

@@ -1,5 +1,162 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`MultiSelect Should render as disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper disabled"
+    data-id="multiSelect_disabled"
+    data-selector-id="multiSelect"
+    data-test-id="multiSelect_disabled"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium borderColor_default hasBorder"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="d-flex-shrink-0 tag medium"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="3"
+          class="container effect medium lgRadius danger disabled pointer"
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text1"
+          tabindex="-1"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="3"
+          >
+            text1
+          </div>
+        </div>
+      </div>
+      <div
+        class="d-flex-shrink-0 tag medium"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="4"
+          class="container effect medium lgRadius danger disabled pointer"
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text2"
+          tabindex="-1"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="4"
+          >
+            text2
+          </div>
+        </div>
+      </div>
+      <div
+        class="d-flex-shrink-0 tag medium"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="5"
+          class="container effect medium lgRadius danger disabled pointer"
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text3"
+          tabindex="-1"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="5"
+          >
+            text3
+          </div>
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class="custmSpan custmSpanMedium"
+        />
+        <div
+          class="d-flex d-flex-row varClass customContainer disabled container custmInputWrapper"
+          data-selector-id="textBoxIcon"
+          data-title=""
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-required="true"
+              autocomplete="off"
+              class="container medium default effect borderColor_default"
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              disabled=""
+              maxlength="250"
+              placeholder=""
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="d-flex-shrink-0 iconContainer"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex d-h-full d-w-full d-flex-row"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="d-flex-shrink-0 icon"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                <div
+                  class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div

package/es/PopOver/PopOver.module.css

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

package/es/Radio/Radio.module.css

@@ -18,11 +18,12 @@
 }
 
 .pointer {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
-.readonly, .disabled {
-  cursor: default;
+.readonly,
+.disabled {
+  composes: d-cursor-default from global;
 }
 
 .disabled {
@@ -34,7 +35,7 @@
   width: var(--radio_width);
   height: var(--radio_height);
   stroke: var(--radio_stroke_color);
-  background: var(--radio_bg_color);
+  background-color: var(--radio_bg_color);
   border-radius: 50%;
 }
 
@@ -66,15 +67,14 @@
 }
 
 .radioLabel {
+  composes: d-block from global;
   font-size: 0 ;
-  display: block;
 }
 
 .rdBox {
-  fill: none;
+  composes: d-fill-none d-stroke-inherit from global;
   stroke-width: var(--radio_stroke_width);
   stroke-linecap: round;
-  stroke: inherit;
 }
 
 .centerPath {

package/es/Ribbon/Ribbon.module.css

@@ -35,7 +35,7 @@
 /* css:lineheight-validation:ignore */
 .basic {
   composes: varClass;
-  position: relative;
+  composes: d-relative d-border-solid from global;
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
@@ -44,7 +44,6 @@
   background-color: var(--ribbon_bg_color);
   box-shadow: var(--ribbon_box_shadow);
   border-width: var(--ribbon_border_width);
-  border-style: solid;
   border-color: var(--ribbon_border_color);
 }
 
@@ -60,11 +59,10 @@
 
 .default {
   composes: semibold from '../common/common.module.css';
-  display: block;
+  composes: d-block d-text-center from global;
   --ribbon_padding: var(--zd_size5) var(--zd_size20);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  text-align: center;
 }
 
 .small {
@@ -211,7 +209,7 @@
 
 .flag {
   composes: dotted from '../common/common.module.css';
-  display: block;
+  composes: d-block from global;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
 }
@@ -265,17 +263,16 @@
 }
 
 .plain {
-  display: inline-block;
   composes: semibold from '../common/common.module.css';
+  composes: d-inline-block from global;
 }
 
 .ribbon {
   composes: semibold from '../common/common.module.css';
-  display: block;
+  composes: d-block d-text-center from global;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
-  text-align: center;
 }
 
 .ribbon.small {
@@ -337,11 +334,10 @@
 
 .tag {
   composes: semibold from '../common/common.module.css';
-  display: inline-block;
+  composes: d-inline-block d-border-solid from global;
   height: var(--zd_size28) ;
   padding-block:var(--zd_size6) ;
   padding-inline:var(--zd_size5) var(--zd_size8) ;
-  border-style: solid;
   border-color: var(--zdt_ribbon_default_tag_border);
 ;
 }
@@ -390,28 +386,26 @@
 }
 
 .box {
-  display: inline-block;
+  composes: d-inline-block from global;
   --ribbon_bg_color: var(--zdt_ribbon_white_bg);
   --ribbon_padding: var(--zd_size5) var(--zd_size8);
   border-radius: 3px;
 }
 
 .stamp {
-  display: inline-block;
+  composes: d-inline-block from global;
   --ribbon_padding: var(--zd_size3) var(--zd_size5);
   --ribbon_text_transform: uppercase;
 }
 
 .sticker {
-  display: block;
+  composes: d-block d-text-center d-border-solid from global;
   height: var(--zd_size18) ;
   padding-block:var(--zd_size3) ;
   padding-inline:var(--zd_size10) ;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  text-align: center;
   border-width: 1px 0;
-  border-style: solid;
   border-color: var(--zdt_ribbon_flag_white_border);
 }
 
@@ -433,7 +427,7 @@
 
 .after,
 .before {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
   width: var(--zd_size10) ;
@@ -488,12 +482,11 @@
 }
 
 .children {
-  display: inline-block;
+  composes: d-inline-block d-align-top from global;
   margin-inline-end: var(--zd_size4) ;
-  vertical-align: top;
   line-height: 0;
 }
 
 .childText {
-  position: relative;
+  composes: d-relative from global;
 }

package/es/RippleEffect/RippleEffect.module.css

@@ -1,5 +1,5 @@
 .effect {
-  position: relative;
+  composes: d-relative from global;
   border-radius: 4px;
 }
 
@@ -121,7 +121,7 @@
 }
 
 .notAllowed {
-  cursor: not-allowed;
+  composes: d-cursor-not-allowed from global;
 }
 
 .secondary.defaultHover, .hoverEffect:hover.secondary.borderHover

package/es/Select/Select.module.css

@@ -1,5 +1,5 @@
 .input {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .small {
@@ -35,7 +35,7 @@
 }
 
 .container {
-  position: relative;
+  composes: d-relative from global;
 }
 /* css:lineheight-validation:ignore */
 .arrowIcon {
@@ -91,7 +91,7 @@
 }
 
 .leftIcon {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
   width: var(--zd_size30) ;
@@ -123,7 +123,7 @@
   transform: rotateX(180deg);
 }
 .rightPlaceholder{
-  height: 100% ;
+  composes: d-h-full from global;
 }
 
 .iconOnHoverStyle .arrowIcon,

package/es/Select/SelectWithAvatar.js

@@ -20,6 +20,7 @@ import { getUniqueId } from "../Provider/IdProvider";
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import { isRenderable, renderNode } from '@zohodesk/utils';
 /**** CSS ****/
 
 import { cn } from "@dot-system/css-utility";
@@ -175,7 +176,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       dataSelectorId,
       getTargetRef,
       customProps,
-      customClass
+      customClass,
+      renderCustomSelectedValue
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -219,7 +221,16 @@ class SelectWithAvatarComponent extends SelectComponent {
       className: `${style.container} ${style[size]} ${style[`borderColor_${borderColor}`]} ${isActive && needBorder ? style.active : ''}  ${needBorder ? style.hasBorder : ''} ${textBoxClass ? textBoxClass : ''}`,
       eleRef: getTargetRef,
       onClick: !isDisabled && this.togglePopup
-    }, selectedId ? /*#__PURE__*/React.createElement(Box, {
+    }, selectedId ? /*#__PURE__*/React.createElement(React.Fragment, null, isRenderable(renderCustomSelectedValue) ? renderNode(renderCustomSelectedValue, {
+      avatarPalette,
+      id,
+      imageURL: photoURL,
+      onRemove,
+      text,
+      dataId: `${dataId}_SelectTag`,
+      isReadOnly,
+      isDisabled
+    }) : /*#__PURE__*/React.createElement(Box, {
       className: style.tag,
       "data-id": `${dataId}_SelectTag`,
       "data-test-id": `${dataId}_SelectTag`,
@@ -234,7 +245,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       text: text,
       disabled: isReadOnly || isDisabled,
       size: tagSize
-    })) : null, /*#__PURE__*/React.createElement(Box, {
+    }))) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.textBox,
       dataId: `${dataId}_textBox`