@zohodesk/components 1.6.27 → 1.6.29

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

@@ -41,6 +41,8 @@ var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
+var _utils = require("@zohodesk/utils");
+
 var _cssUtility = require("@dot-system/css-utility");
 
 var _MultiSelectModule = _interopRequireDefault(require("../MultiSelect/MultiSelect.module.css"));
@@ -227,7 +229,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dataSelectorId = _this$props.dataSelectorId,
           getTargetRef = _this$props.getTargetRef,
           customProps = _this$props.customProps,
-          customClass = _this$props.customClass;
+          customClass = _this$props.customClass,
+          renderCustomSelectedValue = _this$props.renderCustomSelectedValue;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -269,7 +272,16 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', "  ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(textBoxClass ? textBoxClass : ''),
         eleRef: getTargetRef,
         onClick: !isDisabled && this.togglePopup
-      }, selectedId ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, selectedId ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _utils.isRenderable)(renderCustomSelectedValue) ? (0, _utils.renderNode)(renderCustomSelectedValue, {
+        avatarPalette: avatarPalette,
+        id: id,
+        imageURL: photoURL,
+        onRemove: onRemove,
+        text: text,
+        dataId: "".concat(dataId, "_SelectTag"),
+        isReadOnly: isReadOnly,
+        isDisabled: isDisabled
+      }) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"].tag,
         "data-id": "".concat(dataId, "_SelectTag"),
         "data-test-id": "".concat(dataId, "_SelectTag"),
@@ -284,7 +296,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         text: text,
         disabled: isReadOnly || isDisabled,
         size: tagSize
-      })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].textBox,
         dataId: "".concat(dataId, "_textBox")