@zohodesk/components 1.6.27 → 1.6.29

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/Switch/Switch.module.css

@@ -11,7 +11,7 @@
 
 .container {
   composes: varClass;
-  vertical-align: middle;
+  composes: d-align-middle from global;
 }
 
 .disabled {
@@ -23,12 +23,10 @@
 }
 
 .label {
-  display: inline-block;
-  position: relative;
+  composes: d-inline-block d-relative d-cursor-pointer from global;
   transition: box-shadow var(--zd_transition3) ease-in-out;
   background-color: var(--switch_off_bg_color);
   border-radius: 20px;
-  cursor: pointer;
 }
 
 .effect:hover .label
@@ -57,7 +55,7 @@
 }
 
 .input {
-  display: none;
+  composes: d-hidden from global;
 }
 
 .small {
@@ -99,9 +97,8 @@
 }
 
 .switch {
-  display: inline-block;
   composes: offSelection from '../common/common.module.css';
-  vertical-align: middle;
+  composes: d-inline-block d-align-middle from global;
 }
 
 .switch_small {

package/es/Tab/Tab.module.css

@@ -1,15 +1,13 @@
 .tab {
-  text-transform: uppercase;
+  composes: d-uppercase d-cursor-pointer from global;
   letter-spacing: 0.6px;
   text-decoration: none;
-  cursor: pointer;
 }
 .vertical {
-  height: 100% ;
+  composes: d-h-full from global;
 }
 .horizontal {
-  width: 100% ;
-  max-width: 100% ;
+  composes: d-w-full d-max-w-full from global;
 }
 .textContainer,
 .tabText {
@@ -19,7 +17,7 @@
   composes: dotted from '../common/common.module.css';
 }
 .disabled {
-  cursor: not-allowed;
+  composes: d-cursor-not-allowed from global;
 }
 .border {
   border-bottom: 1px solid var(--zdt_tab_default_border);
@@ -55,12 +53,12 @@
   border-color: var(--zdt_tab_delta_active_border);
 }
 .beta {
+  composes: d-capitalize from global;
   padding-inline:  var(--zd_size4) ;
   padding-block:0 ;
   font-size: var(--zd_font_size14) ;
   line-height: 4.2857;
   margin-inline-end: var(--zd_size40) ;
-  text-transform: capitalize;
 }
 .tabBeta {
   composes: beta;

package/es/Tab/TabContent.module.css

@@ -1,4 +1,4 @@
 /* $Id$ */
 .container {
-  position: relative;
+  composes: d-relative from global;
 }

package/es/Tab/Tabs.module.css

@@ -1,5 +1,5 @@
 .tab {
-  position: relative;
+  composes: d-relative from global;
   z-index: 1;
   --tab_position_gap: 22px;
 }
@@ -14,9 +14,9 @@
 }
 
 .alpha_border {
+  composes: d-border-solid from global;
   border-width: 0 0 1px 0;
   border-color: var(--zdt_tabs_alpha_border);
-  border-style: solid;
 }
 
 .alpha::after {
@@ -45,7 +45,7 @@
   width: 100% ;
   height: 100% ;
   top: 0 ;
-  background: inherit;
+  background-color: inherit;
 }
 
 [dir=ltr] .alpha:before {
@@ -87,11 +87,11 @@
 }
 
 .maxWidth {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 .highlight {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: 0 ;
   border-bottom: 1px solid var(--zdt_tabs_highlight_border);
 }
@@ -101,8 +101,7 @@
 }
 
 .menu {
-  position: relative;
-  cursor: pointer;
+  composes: d-relative d-cursor-pointer from global;
 }
 
 .menuBox {
@@ -121,7 +120,7 @@
 }
 
 .hidden {
-  visibility: hidden;
+  composes: d-invisible from global;
 }
 
 .search {
@@ -134,11 +133,11 @@
 }
 
 .emptyStateTitle {
+  composes: d-text-center from global;
   font-weight: var(--zd-fw-semibold);
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;
-  text-align: center;
 }
 
 [dir=ltr] .emptyStateTitle {

package/es/Tag/Tag.module.css

@@ -32,13 +32,11 @@
 .container {
   composes: varClass;
   composes: dInflex alignVertical flexrow from '../common/common.module.css';
-  position: relative;
-  vertical-align: middle;
+  composes: d-relative d-max-w-full d-align-middle from global;
   color: var(--tag_text_color);
   font-size: var(--tag_font_size);
   letter-spacing: var(--tag_letter_spacing);
   height: var(--tag_height);
-  max-width: 100% ;
   background-color: var(--tag_bg_color);
   border-radius: var(--tag_border_radius);
   border-width: var(--tag_border_width);
@@ -48,7 +46,7 @@
   cursor: var(--tag_cursor);
 }
 .disabled {
-  pointer-events: none;
+  composes: d-pointer-events-none from global;
   --tag_text_color: var(--zdt_tag_disabled_text);
 }
 .readonly,
@@ -123,15 +121,14 @@
   display: block;
 }
 .close {
+  composes: d-hidden d-absolute from global;
   color: var(--tag_closeicon_color);
-  display: none;
-  position: absolute;
   top: 0 ;
   bottom: 0 ;
   padding: var(--tag_closeicon_padding);
   cursor: var(--tag_closeicon_cursor);
   border-radius: var(--tag_closeicon_border_radius);
-  background: var(--tag_closeicon_bg_color);
+  background-color: var(--tag_closeicon_bg_color);
 }
 [dir=ltr] .close {
   right: 0 ;

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -6,7 +6,7 @@
 }
 .container {
   composes: varClass;
-  position: relative;
+  composes: d-relative from global;
 }
 .disabled,.readonly {
   --textboxicon_icon_cursor: not-allowed;

package/es/Textarea/Textarea.module.css

@@ -15,10 +15,10 @@
 }
 .basic {
   composes: varClass;
+  composes: d-outline-0 from global;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  outline: 0;
   letter-spacing: 0.1px;
   color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
@@ -60,19 +60,18 @@
 /* css:lineheight-validation:ignore */
 .container {
   composes: basic;
+  composes: d-max-w-full d-border-solid from global;
   transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
   width: var(--textarea_width);
-  max-width: 100% ;
   min-width: var(--zd_size100) ;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
   height: var(--textarea_height);
   -webkit-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
-  border-style: solid;
   background-color: var(--zdt_textarea_default_bg);
   border-color: var(--textarea_border_color);
   padding: var(--textarea_padding);
@@ -101,7 +100,7 @@
 }
 .xsmall,
 .xmedium {
-  vertical-align: middle;
+  composes: d-align-middle from global;
 }
 .xsmall {
   --textarea_font_size: var(--zd_font_size14);

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');

package/es/Tooltip/Tooltip.module.css

@@ -1,8 +1,7 @@
 .tooltiptext {
-  position: fixed;
+  composes: d-fixed d-pointer-events-none from global;
   z-index: 9999999;
   /*Hook for editor alert*/
-  pointer-events: none;
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   border-radius: 4px;
 }[dir=ltr] .tooltiptext {
@@ -12,6 +11,7 @@
 }
 
 .tooltipcont {
+  composes: d-overflow-hidden d-border-transparent d-border-solid from global;
   color: var(--zdt_tooltip_default_text);
   padding-block:0 ;
   padding-inline: var(--zd_size10) ;
@@ -21,10 +21,7 @@
   max-width: var(--zd_size420) ;
   line-height: 1.5385;
   min-height: var(--zd_size24) ;
-  overflow: hidden;
   background-color: var(--zdt_tooltip_default_bg);
-  border-style: solid;
-  border-color: transparent;
   border-radius: 4px;
 }
 .tooltiparrow {

package/es/Typography/css/Typography.module.css

@@ -9,15 +9,15 @@
 }
 
 .display_block {
-  display: block;
+  composes: d-block from global;
 }
 
 .display_inlineBlock {
-  display: inline-block;
+  composes: d-inline-block from global;
 }
 
 .display_inline {
-  display: inline;
+  composes: d-inline from global;
 }
 
 .display_initial {
@@ -43,11 +43,11 @@
 }
 
 .fontStyles_normal {
-  font-style: normal;
+  composes: d-not-italic from global;
 }
 
 .fontStyles_italic {
-  font-style: italic;
+  composes: d-italic from global;
 }
 
 .decoration_default {
@@ -66,50 +66,42 @@
   text-decoration: overline;
 }
 
-[dir=ltr] .textalign_left {
-  text-align: left;
+.textalign_left {
+  composes: d-text-left from global;
 }
 
-[dir=rtl] .textalign_left {
-  text-align: right;
-}
-
-[dir=ltr] .textalign_right {
-  text-align: right;
-}
-
-[dir=rtl] .textalign_right {
-  text-align: left;
+.textalign_right {
+  composes: d-text-right from global;
 }
 
 .textalign_center {
-  text-align: center;
+  composes: d-text-center from global;
 }
 
 .textalign_justify {
-  text-align: justify;
+  composes: d-text-justify from global;
 }
 
 .transform_default {
-  text-transform: none;
+  composes: d-normal-case from global;
 }
 
 .transform_upper {
-  text-transform: uppercase;
+  composes: d-uppercase from global;
 }
 
 .transform_lower {
-  text-transform: lowercase;
+  composes: d-lowercase from global;
 }
 
 .transform_capital {
-  text-transform: capitalize;
+  composes: d-capitalize from global;
 }
 
 .dotted_clamp {
+  composes: d-overflow-hidden from global;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
 .lineclamp_1 {
@@ -138,11 +130,11 @@
 }
 
 .wordBreak_breakAll {
-  word-break: break-all
+  composes: d-break-all from global;
 }
 
 .wordBreak_keepAll {
-  word-break: keep-all
+  composes: d-break-keep from global;
 }
 
 .wordBreak_breakWord {
@@ -158,27 +150,27 @@
 }
 
 .whiteSpace_normal {
-  white-space: normal
+  composes: d-whitespace-normal from global;
 }
 
 .whiteSpace_noWrap {
-  white-space: nowrap
+  composes: d-whitespace-nowrap from global;
 }
 
 .whiteSpace_pre {
-  white-space: pre
+  composes: d-whitespace-pre from global;
 }
 
 .whiteSpace_preLine {
-  white-space: pre-line
+  composes: d-whitespace-pre-line from global;
 }
 
 .whiteSpace_preWrap {
-  white-space: pre-wrap
+  composes: d-whitespace-pre-wrap from global;
 }
 
 .whiteSpace_breakSpaces {
-  white-space: break-spaces;
+  composes: d-whitespace-break-spaces from global;
 }
 
 

package/es/common/animation.module.css

@@ -34,7 +34,7 @@
   -moz-animation-fill-mode: both;
 }
 .fadeIn {
-  opacity: 0;
+  composes: d-opacity-0 from global;
 }
 [dir=ltr] .fadeIn {
   animation-name: fadeIn;
@@ -65,7 +65,7 @@
 }
 
 .slideLeft {
-  opacity: 0;
+  composes: d-opacity-0 from global;
 }
 
 [dir=ltr] .slideLeft {
@@ -103,7 +103,7 @@
 }
 
 .slideRight {
-  opacity: 1;
+  composes: d-opacity-100 from global;
   transform: translateX(0) scale(1);
 }
 
@@ -158,7 +158,7 @@
 }
 
 .slideTop {
-  opacity: 1;
+  composes: d-opacity-100 from global;
   transform: translateY(0) scale(1);
 }
 
@@ -213,7 +213,7 @@
 }
 
 .fadeInScale {
-  opacity: 0;
+  composes: d-opacity-0 from global;
   transform: scale(0.8);
 }
 
@@ -231,7 +231,7 @@
   -ms-animation-name: fadeInScale;
 }
 .zoomIn {
-  opacity: 0;
+  composes: d-opacity-0 from global;
   transform: scale(1.5);
 }
 [dir=ltr] .zoomIn {
@@ -299,7 +299,7 @@
 }
 
 .slideDown {
-  max-height: 100vh ;
+  composes: d-max-h-screen from global;
 }
 
 [dir=ltr] .slideDown {
@@ -600,8 +600,8 @@
 }
 
 .zoomout {
+  composes: d-will-change-transform from global;
   transition: transform var(--zd_transition5), opacity var(--zd_transition5);
-  will-change: transform;
 }
 
 [dir=ltr] .zoomout {