@zohodesk/components 1.6.26 → 1.6.28

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/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")

package/lib/Select/SelectWithIcon.js

@@ -39,6 +39,8 @@ var _Common = require("../utils/Common.js");
 
 var _dropDownUtils = require("../utils/dropDownUtils.js");
 
+var _utils = require("@zohodesk/utils");
+
 var _cssUtility = require("@dot-system/css-utility");
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
@@ -426,6 +428,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           dropBoxSize = _this$props7.dropBoxSize,
           emptyMessage = _this$props7.emptyMessage,
           renderCustomEmptyState = _this$props7.renderCustomEmptyState,
+          renderCustomSelectedValue = _this$props7.renderCustomSelectedValue,
           needIcon = _this$props7.needIcon,
           iconName = _this$props7.iconName,
           iconSize = _this$props7.iconSize,
@@ -471,7 +474,29 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, (0, _utils.isRenderable)(renderCustomSelectedValue) ? (0, _utils.renderNode)(renderCustomSelectedValue, {
+        iconName: iconName,
+        iconSize: iconSize,
+        iconClass: iconClass,
+        needIcon: needIcon,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isPopupOpen: isPopupOpen,
+        isActive: isPopupReady,
+        size: size,
+        option: this.props.options.find(function (option) {
+          return option[idKey] === selectedId;
+        }) || DUMMY_OBJECT,
+        selectedId: selectedId,
+        selectedValue: selectedValue,
+        placeHolder: placeHolder,
+        htmlId: htmlId,
+        maxLength: maxLength,
+        dataId: dataId,
+        getRef: this.inputRef,
+        onKeyDown: this.handleKeyDown,
+        ariaControlsId: setAriaId
+      }) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row"
       }, needIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",

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

@@ -17,4 +17,24 @@ describe('SelectWithAvatar', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', function () {
+    var options = [{
+      id: '1',
+      text: 'Option 1'
+    }, {
+      id: '2',
+      text: 'Option 2'
+    }];
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectWithAvatar["default"], {
+      options: options,
+      selectedValue: "1",
+      renderCustomSelectedValue: function renderCustomSelectedValue(tagProps) {
+        return /*#__PURE__*/_react["default"].createElement("div", null, tagProps.text, " - Custom Tag");
+      }
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -19,4 +19,25 @@ describe('SelectWithIcon', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', function () {
+    var options = [{
+      id: '1',
+      value: 'Option 1'
+    }, {
+      id: '2',
+      value: 'Option 2'
+    }];
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectWithIcon["default"], {
+      options: options,
+      selectedId: "1",
+      selectedValue: "Option 1",
+      renderCustomSelectedValue: function renderCustomSelectedValue(valueProps) {
+        return /*#__PURE__*/_react["default"].createElement("div", null, valueProps.selectedValue, " - Custom Value");
+      }
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`SelectWithAvatar Should render with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper effect"
+    data-id="selectWithAvatar"
+    data-selector-id="selectWithAvatar"
+    data-test-id="selectWithAvatar"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center container medium borderColor_default hasBorder"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div>
+        Option 1 - Custom Tag
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+        data-id="selectWithAvatar_textBox"
+        data-selector-id="box"
+        data-test-id="selectWithAvatar_textBox"
+      >
+        <input
+          aria-activedescendant="1"
+          aria-controls="1"
+          aria-expanded="false"
+          aria-haspopup="true"
+          aria-owns="1"
+          aria-readonly="true"
+          autocomplete="off"
+          class="pointer container medium default effect borderColor_default"
+          data-id="textBox"
+          data-selector-id="textBox"
+          data-test-id="textBox"
+          placeholder=""
+          readonly=""
+          role="combobox"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SelectWithAvatar rendering the defult props 1`] = `
 <DocumentFragment>
   <div

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

@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`SelectWithIcon Should render with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium"
+    data-selector-id="selectWithIcon"
+  >
+    <div
+      class=""
+      data-id="selectWithIcon"
+      data-test-id="selectWithIcon"
+    >
+      <div>
+        Option 1 - Custom Value
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SelectWithIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div

package/lib/Select/props/propTypes.js

@@ -350,6 +350,7 @@ var SelectWithIcon_propTypes = {
   boxSize: _propTypes["default"].string,
   emptyMessage: _propTypes["default"].string,
   renderCustomEmptyState: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
+  renderCustomSelectedValue: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   isRestrictScroll: _propTypes["default"].bool,
   positionsOffset: _propTypes["default"].object,

package/lib/Tooltip/Tooltip.js

@@ -197,7 +197,12 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
 
       var containerElement = this.tooltipContainerEl;
       var element = e.target;
-      var titleDiv = element.hasAttribute('data-title') || element.hasAttribute('title') ? element : element.closest('[data-title]') || element.closest('[title]');
+
+      var hasTitleValue = function hasTitleValue(el) {
+        return el.hasAttribute('data-title') && el.getAttribute('data-title') !== '' || el.hasAttribute('title') && el.getAttribute('title') !== '';
+      };
+
+      var titleDiv = hasTitleValue(element) ? element : element.closest('[data-title]:not([data-title=""])') || element.closest('[title]:not([title=""])');
 
       if (titleDiv) {
         var title = titleDiv.getAttribute('data-title') || titleDiv.getAttribute('title');