@zohodesk/dot 1.9.18 → 1.9.19

package/es/FormAction/FormAction.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./FormAction.module.css";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 export const LeftSide = props => {
@@ -43,7 +44,7 @@ export default class FormAction extends React.Component {
     let hasRightChild = rightbuttonGroup.length > 0;
     let hasCenterChild = centerbuttonGroup.length > 0;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.wrapperDiv,
+      className: cn(style.wrapperDiv),
       "data-selector-id": dataSelectorId,
       "data-test-id": testId,
       "data-id": customId
@@ -60,28 +61,24 @@ export default class FormAction extends React.Component {
       dataId: customId ? `${customId}_leftElement` : undefined,
       testId: testId ? `${testId}_leftElement` : undefined
     }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight,
+      className: cn(style.marginRight),
       key: index
     }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
       shrink: hasRightChild && !hasLeftChild ? true : false,
       dataId: customId ? `${customId}_rightElement` : undefined,
       testId: testId ? `${testId}_rightElement` : undefined
     }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight,
+      className: cn(style.marginRight),
       key: index
     }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, {
       dataId: customId ? `${customId}_centerElement` : undefined,
       testId: testId ? `${testId}_centerElement` : undefined
     }, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight,
+      className: cn(style.marginRight),
       key: index
     }, item)) : centerbuttonGroup[0]) : null));
   }
 
 }
 FormAction.propTypes = propTypes;
-FormAction.defaultProps = defaultProps; // if (__DOCS__) {
-//   FormAction.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+FormAction.defaultProps = defaultProps;

package/es/FormAction/FormAction.module.css

@@ -4,13 +4,13 @@
 }
 
 .wrapperDiv {
-  position: relative;
   z-index: 1;
   composes: varClass;
+  composes: d-relative from global;
 }
 
 .footerParent {
-  position: relative;
+  composes: d-relative from global;
   /* css:theme-validation:ignore */
   /* css:theme-validation:ignore */
   background-color: var(--footerBg);

package/es/FormAction/__tests__/__snapshots__/FormAction.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`FormAction Render with Center children 1`] = `
 <DocumentFragment>
@@ -7,13 +7,13 @@ exports[`FormAction Render with Center children 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row justifyContent_spaceAround footerParent mediumFooter"
+      class="d-flex d-flex-row d-justify-around footerParent mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="noShrink"
+        class="d-flex-shrink-0"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -34,13 +34,13 @@ exports[`FormAction Render with LeftSide children 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent mediumPadding mediumFooter"
+      class="d-flex d-flex-row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrink"
+        class="d-min-w-0 d-flex-shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -61,13 +61,13 @@ exports[`FormAction Render with LeftSide, Center and RightSide children 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row justifyContent_spaceAround footerParent mediumFooter"
+      class="d-flex d-flex-row d-justify-around footerParent mediumFooter"
       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"
@@ -77,7 +77,7 @@ exports[`FormAction Render with LeftSide, Center and RightSide children 1`] = `
         </button>
       </div>
       <div
-        class="noShrink"
+        class="d-flex-shrink-0"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -87,7 +87,7 @@ exports[`FormAction Render with LeftSide, Center and RightSide children 1`] = `
         </button>
       </div>
       <div
-        class="noShrink"
+        class="d-flex-shrink-0"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -108,13 +108,13 @@ exports[`FormAction Render with RightSide children 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row justifyContent_end footerParent mediumPadding mediumFooter"
+      class="d-flex d-flex-row d-justify-end footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrink"
+        class="d-min-w-0 d-flex-shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -137,13 +137,13 @@ exports[`FormAction Render with customId and testId 1`] = `
     data-test-id="form-action-testId"
   >
     <div
-      class="flex row justifyContent_spaceAround footerParent mediumFooter"
+      class="d-flex d-flex-row d-justify-around footerParent mediumFooter"
       data-id="form-action-customId_container"
       data-selector-id="container"
       data-test-id="form-action-testId_container"
     >
       <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="form-action-customId_leftElement"
         data-selector-id="box"
         data-test-id="form-action-testId_leftElement"
@@ -153,7 +153,7 @@ exports[`FormAction Render with customId and testId 1`] = `
         </button>
       </div>
       <div
-        class="noShrink"
+        class="d-flex-shrink-0"
         data-id="form-action-customId_rightElement"
         data-selector-id="box"
         data-test-id="form-action-testId_rightElement"
@@ -163,7 +163,7 @@ exports[`FormAction Render with customId and testId 1`] = `
         </button>
       </div>
       <div
-        class="noShrink"
+        class="d-flex-shrink-0"
         data-id="form-action-customId_centerElement"
         data-selector-id="box"
         data-test-id="form-action-testId_centerElement"
@@ -184,7 +184,7 @@ exports[`FormAction Render with dataSelectorId 1`] = `
     data-selector-id="form-action-dataSelectorId"
   >
     <div
-      class="flex row footerParent mediumPadding mediumFooter"
+      class="d-flex d-flex-row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -200,7 +200,7 @@ exports[`FormAction Render with default props 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent mediumPadding mediumFooter"
+      class="d-flex d-flex-row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -216,13 +216,13 @@ exports[`FormAction Render with direct child (defaults to left group) 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent mediumPadding mediumFooter"
+      class="d-flex d-flex-row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrink"
+        class="d-min-w-0 d-flex-shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -243,13 +243,13 @@ exports[`FormAction Render with multiple children in Center 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row justifyContent_spaceAround footerParent mediumFooter"
+      class="d-flex d-flex-row d-justify-around footerParent mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="noShrink"
+        class="d-flex-shrink-0"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -281,13 +281,13 @@ exports[`FormAction Render with multiple children in LeftSide 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent mediumPadding mediumFooter"
+      class="d-flex d-flex-row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrink"
+        class="d-min-w-0 d-flex-shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -319,13 +319,13 @@ exports[`FormAction Render with multiple children in RightSide 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row justifyContent_end footerParent mediumPadding mediumFooter"
+      class="d-flex d-flex-row d-justify-end footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="shrink"
+        class="d-min-w-0 d-flex-shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -357,7 +357,7 @@ exports[`FormAction Render with paddingLeftSize as large 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent largePadding mediumFooter"
+      class="d-flex d-flex-row footerParent largePadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -373,7 +373,7 @@ exports[`FormAction Render with paddingLeftSize as medium 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent mediumPadding mediumFooter"
+      class="d-flex d-flex-row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -389,7 +389,7 @@ exports[`FormAction Render with paddingLeftSize as small 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent smallPadding mediumFooter"
+      class="d-flex d-flex-row footerParent smallPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -405,7 +405,7 @@ exports[`FormAction Render with paddingLeftSize as xmedium 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent xmediumPadding mediumFooter"
+      class="d-flex d-flex-row footerParent xmediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -421,7 +421,7 @@ exports[`FormAction Render with paddingLeftSize as xsmall 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent xsmallPadding mediumFooter"
+      class="d-flex d-flex-row footerParent xsmallPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -437,7 +437,7 @@ exports[`FormAction Render with paddingRightClass 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent mediumPadding mediumFooter customPaddingRight"
+      class="d-flex d-flex-row footerParent mediumPadding mediumFooter customPaddingRight"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -453,7 +453,7 @@ exports[`FormAction Render with size as large 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent largePadding largeFooter"
+      class="d-flex d-flex-row footerParent largePadding largeFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -469,7 +469,7 @@ exports[`FormAction Render with size as medium 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent mediumPadding mediumFooter"
+      class="d-flex d-flex-row footerParent mediumPadding mediumFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -485,7 +485,7 @@ exports[`FormAction Render with size as small 1`] = `
     data-selector-id="formAction"
   >
     <div
-      class="flex row footerParent smallPadding smallFooter"
+      class="d-flex d-flex-row footerParent smallPadding smallFooter"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"

package/es/FreezeLayer/FreezeLayer.js

@@ -7,6 +7,7 @@ import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/Ve
 import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import cssJSLogic from "./css/cssJSLogic";
 import useFreezeLayer from "../Hooks/useFreezeLayer";
+import { cn } from "@dot-system/css-utility";
 import style from "./css/FreezeLayer.module.css";
 export default function FreezeLayer(props) {
   let {
@@ -50,7 +51,7 @@ export default function FreezeLayer(props) {
     style: isActive && needAutoZindex ? {
       zIndex: `${getNextIndex()}`
     } : {},
-    className: freezeClass,
+    className: cn(freezeClass),
     onClick: handleClick,
     "data-drag-parent": true,
     ref: forwardRef
@@ -72,9 +73,4 @@ export default function FreezeLayer(props) {
   }, children))));
 }
 FreezeLayer.propTypes = propTypes;
-FreezeLayer.defaultProps = defaultProps; // if (__DOCS__) {
-//   FreezeLayer.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'General'
-//   };
-// }
+FreezeLayer.defaultProps = defaultProps;

package/es/FreezeLayer/__tests__/__snapshots__/FreezeLayer.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`FreezeLayer rendering isActive is true 1`] = `
 <DocumentFragment>

package/es/FreezeLayer/css/FreezeLayer.module.css

@@ -1,8 +1,7 @@
 .container {
+  composes: d-absolute d-overflow-hidden from global;
   top: 0 ;
   bottom: 0 ;
-  position: absolute;
-  overflow: hidden;
 }[dir=ltr] .container {
   left: 0 ;
   right: 0 ;

package/es/IconButton/IconButton.js

@@ -143,8 +143,4 @@ export default class IconButton extends React.Component {
 
 }
 IconButton.propTypes = propTypes;
-IconButton.defaultProps = defaultProps; // if (__DOCS__) {
-//   IconButton.docs = {
-//     componentGroup: 'Atom'
-//   };
-// }
+IconButton.defaultProps = defaultProps;

package/es/IconButton/IconButton.module.css

@@ -5,8 +5,8 @@
 .wrapper {
   composes: offSelection from '~@zohodesk/components/es/common/common.module.css';
   composes: varClass;
+  composes: d-cursor-pointer from global;
   color: var(--iconColor);
-  cursor: pointer;
 }
 
 .xsmall {