@zohodesk/components 1.6.26 → 1.6.28

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/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`

package/es/Select/SelectWithIcon.js

@@ -20,6 +20,7 @@ import Loader from '@zohodesk/svg/lib/Loader/Loader';
 
 import { scrollTo, findScrollEnd, getSearchString } from "../utils/Common.js";
 import { isObjectContainsSearchString } from "../utils/dropDownUtils.js";
+import { isRenderable, renderNode } from '@zohodesk/utils';
 /**** CSS ****/
 
 import { cn } from "@dot-system/css-utility";
@@ -351,6 +352,7 @@ class SelectWithIcon extends Component {
       dropBoxSize,
       emptyMessage,
       renderCustomEmptyState,
+      renderCustomSelectedValue,
       needIcon,
       iconName,
       iconSize,
@@ -396,7 +398,27 @@ class SelectWithIcon extends Component {
       ref: getTargetRef,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, isRenderable(renderCustomSelectedValue) ? renderNode(renderCustomSelectedValue, {
+      iconName,
+      iconSize,
+      iconClass,
+      needIcon,
+      isDisabled,
+      isReadOnly,
+      isPopupOpen,
+      isActive: isPopupReady,
+      size,
+      option: this.props.options.find(option => option[idKey] === selectedId) || DUMMY_OBJECT,
+      selectedId,
+      selectedValue,
+      placeHolder,
+      htmlId,
+      maxLength,
+      dataId,
+      getRef: this.inputRef,
+      onKeyDown: this.handleKeyDown,
+      ariaControlsId: setAriaId
+    }) : /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"
     }, needIcon ? /*#__PURE__*/React.createElement(Container, {
       align: "both",

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

@@ -9,4 +9,21 @@ describe('SelectWithAvatar', () => {
     } = render( /*#__PURE__*/React.createElement(SelectWithAvatar, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', () => {
+    const options = [{
+      id: '1',
+      text: 'Option 1'
+    }, {
+      id: '2',
+      text: 'Option 2'
+    }];
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectWithAvatar, {
+      options: options,
+      selectedValue: "1",
+      renderCustomSelectedValue: tagProps => /*#__PURE__*/React.createElement("div", null, tagProps.text, " - Custom Tag")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -11,4 +11,22 @@ describe('SelectWithIcon', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render with renderCustomSelectedValue', () => {
+    const options = [{
+      id: '1',
+      value: 'Option 1'
+    }, {
+      id: '2',
+      value: 'Option 2'
+    }];
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectWithIcon, {
+      options: options,
+      selectedId: "1",
+      selectedValue: "Option 1",
+      renderCustomSelectedValue: valueProps => /*#__PURE__*/React.createElement("div", null, valueProps.selectedValue, " - Custom Value")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -329,6 +329,7 @@ export const SelectWithIcon_propTypes = {
   boxSize: PropTypes.string,
   emptyMessage: PropTypes.string,
   renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   positionsOffset: PropTypes.object,

package/es/Tooltip/Tooltip.js

@@ -136,7 +136,10 @@ export default class Tooltip extends React.Component {
   handleOver(e, targetElement) {
     let containerElement = this.tooltipContainerEl;
     let element = e.target;
-    let titleDiv = element.hasAttribute('data-title') || element.hasAttribute('title') ? element : element.closest('[data-title]') || element.closest('[title]');
+
+    let hasTitleValue = el => el.hasAttribute('data-title') && el.getAttribute('data-title') !== '' || el.hasAttribute('title') && el.getAttribute('title') !== '';
+
+    let titleDiv = hasTitleValue(element) ? element : element.closest('[data-title]:not([data-title=""])') || element.closest('[title]:not([title=""])');
 
     if (titleDiv) {
       let title = titleDiv.getAttribute('data-title') || titleDiv.getAttribute('title');