@zohodesk/dot 1.9.17 → 1.9.19

package/es/list/status/StatusListItem/__tests__/__snapshots__/StatusListItem.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`StatusListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li
-    class="flex row alignItems_center list medium default withBorder"
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="undefined"
     data-selector-id="container"
@@ -11,37 +11,37 @@ exports[`StatusListItem rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="noShrink contentWrapper"
+      class="d-flex-shrink-0 contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="noShrink alignSelf_start statusType black"
+        class="d-flex-shrink-0 d-self-start statusType black"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="flexible basis_zero shrink"
+        class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex fullSize row alignItems_center"
+          class="d-flex d-h-full d-w-full d-flex-row d-items-center"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="shrink value"
+            class="d-min-w-0 d-flex-shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           />
           <div
-            class="noShrink"
+            class="d-flex-shrink-0"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"

package/es/lookup/EmptyPage/EmptyPage.js

@@ -8,6 +8,7 @@ import EmptyContact from '@zohodesk/svg/es/emptystate/version3/EmptyContact';
 import EmptyProducts from '@zohodesk/svg/es/emptystate/version3/EmptyProducts';
 /*** CSS ***/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./LookupEmptyPage.module.css";
 export default class EmptyPage extends Component {
   constructor(props) {
@@ -48,18 +49,14 @@ export default class EmptyPage extends Component {
       title
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
+      className: cn(style.container),
       "data-id": `empty_${type}`,
       "data-test-id": `empty_${type}`
     }, this.renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
-      className: style.contentDiv
+      className: cn(style.contentDiv)
     }, title));
   }
 
 }
 EmptyPage.propTypes = propTypes;
-EmptyPage.defaultProps = defaultProps; // if (__DOCS__) {
-//   EmptyPage.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+EmptyPage.defaultProps = defaultProps;

package/es/lookup/EmptyPage/LookupEmptyPage.module.css

@@ -1,5 +1,5 @@
 .container {
-  text-align: center;
+  composes: d-text-center from global;
 }
 
 .image {

package/es/lookup/EmptyPage/__tests__/__snapshots__/EmptyPage.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`EmptyPage rendering the defult props 1`] = `
 <DocumentFragment>

package/es/lookup/Lookup/Lookup.js

@@ -11,6 +11,7 @@ import { Container } from '@zohodesk/components/es/Layout';
 import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 /*** CSS ***/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./Lookup.module.css";
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 /*eslint-disable react/forbid-component-props */
@@ -102,7 +103,7 @@ export default class Lookup extends Component {
       "aria-label": ariaLabel,
       "aria-modal": ariaModal,
       id: htmlId,
-      className: `${style.box} ${style[`${size}Size`]} ${style[`${placement}Box`]} ${lookupClass ? lookupClass : ''}`,
+      className: cn(`${style.box} ${style[`${size}Size`]} ${style[`${placement}Box`]} ${lookupClass ? lookupClass : ''}`),
       "data-id": dataId,
       "data-test-id": dataId
     }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
@@ -152,8 +153,4 @@ export default class Lookup extends Component {
 
 }
 Lookup.propTypes = propTypes;
-Lookup.defaultProps = defaultProps; // if (__DOCS__) {
-//   Lookup.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+Lookup.defaultProps = defaultProps;

package/es/lookup/Lookup/Lookup.module.css

@@ -13,24 +13,22 @@
 }
 
 .overlayLayer {
-  position: absolute;
   inset: 0 ;
   composes: blockEvent from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-absolute from global;
 }
 
 .box {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .topCenterBox {
-  height: 100% ;
-  width: 100% ;
+  composes: d-size-full from global;
   margin: auto ;
 }
 
 .centerBox {
-  max-height: 100% ;
-  width: 100% ;
+  composes: d-w-full d-max-h-full from global;
   margin: auto ;
 }
 
@@ -39,7 +37,7 @@
 }
 
 .containerWidth {
-  width: 100% ;
+  composes: d-w-full from global;
 }
 
 /* Size */

package/es/lookup/Lookup/__tests__/__snapshots__/Lookup.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Lookup snapshot -  Render with a11y attributes 1`] = `
 <DocumentFragment>
@@ -8,7 +8,7 @@ exports[`Lookup snapshot -  Render with a11y attributes 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -25,7 +25,7 @@ exports[`Lookup snapshot -  Render with childAnimationName=expand 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -42,7 +42,7 @@ exports[`Lookup snapshot -  Render with children 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -59,7 +59,7 @@ exports[`Lookup snapshot -  Render with custom classes 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -76,7 +76,7 @@ exports[`Lookup snapshot -  Render with customProps 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -93,7 +93,7 @@ exports[`Lookup snapshot -  Render with dataId 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -107,7 +107,7 @@ exports[`Lookup snapshot -  Render with default props 1`] = `<DocumentFragment /
 exports[`Lookup snapshot -  Render with hasFreezeLayer=false 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row justifyContent_center overlayLayer"
+    class="d-flex d-h-full d-w-full d-flex-row d-justify-center overlayLayer"
     data-id="fldValue"
     data-selector-id="container"
     data-test-id="fldValue"
@@ -120,7 +120,7 @@ exports[`Lookup snapshot -  Render with hasFreezeLayer=false 1`] = `
       tabindex="-1"
     >
       <div
-        class="flex column coverwrap containerWidth"
+        class="d-flex d-flex-col coverwrap containerWidth"
         data-drag-container="true"
         data-id="containerComponent"
         data-selector-id="container"
@@ -139,7 +139,7 @@ exports[`Lookup snapshot -  Render with htmlId 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -156,7 +156,7 @@ exports[`Lookup snapshot -  Render with isActive=true 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -173,7 +173,7 @@ exports[`Lookup snapshot -  Render with isMinHeight=true 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -190,7 +190,7 @@ exports[`Lookup snapshot -  Render with placement=center 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -207,7 +207,7 @@ exports[`Lookup snapshot -  Render with placement=topCenter 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -224,7 +224,7 @@ exports[`Lookup snapshot -  Render with size=full 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -241,7 +241,7 @@ exports[`Lookup snapshot -  Render with size=large 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -258,7 +258,7 @@ exports[`Lookup snapshot -  Render with size=small 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -275,7 +275,7 @@ exports[`Lookup snapshot -  Render with size=xlarge 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -292,7 +292,7 @@ exports[`Lookup snapshot -  Render with size=xmedium 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex fullSize row justifyContent_center"
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"

package/es/lookup/Section/__tests__/__snapshots__/Section.spec.js.snap

@@ -1,15 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Section Render with alignBox as column 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column section"
+    class="d-flex d-h-full d-w-full d-flex-col section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      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"
@@ -21,13 +21,13 @@ exports[`Section Render with alignBox as column 1`] = `
 exports[`Section Render with alignBox as column-reverse 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize columnReverse section"
+    class="d-flex d-h-full d-w-full d-flex-col-reverse section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      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"
@@ -39,13 +39,13 @@ exports[`Section Render with alignBox as column-reverse 1`] = `
 exports[`Section Render with alignBox as row 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row section"
+    class="d-flex d-h-full d-w-full d-flex-row section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      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"
@@ -57,13 +57,13 @@ exports[`Section Render with alignBox as row 1`] = `
 exports[`Section Render with alignBox as row-reverse 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize rowReverse section"
+    class="d-flex d-h-full d-w-full d-flex-row-reverse section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      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"
@@ -75,13 +75,13 @@ exports[`Section Render with alignBox as row-reverse 1`] = `
 exports[`Section Render with children 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column section"
+    class="d-flex d-h-full d-w-full d-flex-col section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      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"
@@ -97,13 +97,13 @@ exports[`Section Render with children 1`] = `
 exports[`Section Render with className 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column section custom-class"
+    class="d-flex d-h-full d-w-full d-flex-col section custom-class"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      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"
@@ -115,13 +115,13 @@ exports[`Section Render with className 1`] = `
 exports[`Section Render with customProps 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column alignItems_center section"
+    class="d-flex d-h-full d-w-full d-flex-col d-items-center section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink scroll_vertical"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 d-overflow-y-auto d-overflow-x-hidden"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -133,13 +133,13 @@ exports[`Section Render with customProps 1`] = `
 exports[`Section Render with default props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column section"
+    class="d-flex d-h-full d-w-full d-flex-col section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      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"

package/es/lookup/header/Close/Close.js

@@ -23,8 +23,4 @@ export default class Close extends PureComponent {
 
 }
 Close.propTypes = propTypes;
-Close.defaultProps = defaultProps; // if (__DOCS__) {
-//   Close.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+Close.defaultProps = defaultProps;

package/es/lookup/header/Close/LookupClose.module.css

@@ -1,12 +1,11 @@
 .container {
+  composes: d-text-center d-cursor-pointer from global;
   width: var(--zd_size25) ;
   height: var(--zd_size25) ;
   line-height: 2.7778;
   color: var(--zdt_lookupclose_default_text);
   transition: var(--zd_transition2) cubic-bezier(0.4, 1, 0.65, 1);
   font-size: var(--zd_font_size9) ;
-  text-align: center;
-  cursor: pointer;
   border-radius: 50%;
 }
 .container:hover {

package/es/lookup/header/Close/__tests__/__snapshots__/Close.spec.js.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlphabeticList rendering the defult props 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+    class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
     data-id="closeButton"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -12,7 +12,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-cross icon_button_center"
+      class="zd_font_icons ff icon-cross basic d-inline-block d-align-middle icon_button_center"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/lookup/header/ModuleHeader/ModuleHeader.js

@@ -12,6 +12,7 @@ import Search from "../Search/Search";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 /*** CSS ***/
 
+import { cn } from "@dot-system/css-utility";
 import commonStyle from "../lookupHeaderCommon.module.css";
 import commonResponsive from "../lookupHeaderCommonResponsive.module.css"; //customHooks
 
@@ -87,7 +88,7 @@ function ModuleHeader(props) {
     text: title,
     htmlId: htmlId
   })), renderNode(renderTitleChildren)), renderNode(renderSecondaryContent), miniDescription && /*#__PURE__*/React.createElement("div", {
-    className: commonStyle.para
+    className: cn(commonStyle.para)
   }, miniDescription)), needSearch && /*#__PURE__*/React.createElement(Box, {
     className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer}`
   }, /*#__PURE__*/React.createElement(Search, _extends({
@@ -101,7 +102,7 @@ function ModuleHeader(props) {
     getRef: getSearchBoxRef,
     onKeyDown: onSearchKeyDown
   }))), children ? children : '', onLookupClose ? /*#__PURE__*/React.createElement("div", {
-    className: `${commonStyle.closeContainer} ${customCloseClass}`
+    className: cn(`${commonStyle.closeContainer} ${customCloseClass}`)
   }, /*#__PURE__*/React.createElement(Close, _extends({
     dataId: "close"
   }, customCloseProps, {