@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.1

package/es/version2/lookup/AlertHeader/css/cssJSLogic.js

@@ -1,4 +1,4 @@
-import { compileClassNames } from '@zohodesk/utils';
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
 export default function cssJSLogic({
   props,
   style
@@ -6,12 +6,17 @@ export default function cssJSLogic({
   let {
     children,
     type,
-    title
+    title,
+    customClass
   } = props;
+  let {
+    container
+  } = customClass;
   let alertHeaderContainerClass = compileClassNames({
     [style.container]: true,
     [style.headerLayout]: !!title || !!children,
-    [style[type]]: !!type
+    [style[type]]: !!type,
+    [container]: !!container
   });
   return {
     alertHeaderContainerClass

package/es/version2/lookup/AlertHeader/props/defaultProps.js

@@ -1,8 +1,11 @@
+import { DUMMY_OBJECT } from "@zohodesk/dotkit/es/utils/constants";
 export default {
   needIcon: true,
   type: 'danger',
   breakChildren: false,
   dataId: 'alertHeader',
+  isDraggable: true,
+  customClass: DUMMY_OBJECT,
   dragBoundaryLimit: {
     top: 0,
     left: 50,

package/es/version2/lookup/AlertHeader/props/propTypes.js

@@ -8,6 +8,15 @@ export default {
   onClose: PropTypes.func,
   title: PropTypes.string,
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification']),
+  isDraggable: PropTypes.bool,
+  customClass: PropTypes.shape({
+    container: PropTypes.string,
+    title: PropTypes.string,
+    iconContainer: PropTypes.string,
+    close: PropTypes.string
+  }),
+  renderSecondaryContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  renderRightActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   htmlId: PropTypes.string,
   customStyle: PropTypes.object,
   dragBoundaryLimit: PropTypes.shape({

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -4,17 +4,23 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+/**** Library Components ****/
+
+import Button from '@zohodesk/components/es/Button/Button';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+/**** Utils ****/
+
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
+import renderNode from '@zohodesk/utils/es/renderNode';
 /**** Components ****/
 
 import Lookup from "../../../lookup/Lookup/Lookup";
 import AlertHeader from "../AlertHeader/AlertHeader";
-import Button from '@zohodesk/components/es/Button/Button';
 import Section from "../../../lookup/Section/Section";
 import FormAction from "../../../FormAction/FormAction";
-import { Container, Box } from '@zohodesk/components/es/Layout';
-import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./AlertLookupNew.module.css";
 let buttonPaletteObject = {
   success: {
@@ -94,6 +100,7 @@ export default class AlertLookup extends Component {
       needIcon,
       a11y,
       customProps,
+      renderFooterNode,
       align,
       childAnimationName,
       isHtmlContent,
@@ -153,7 +160,7 @@ export default class AlertLookup extends Component {
     }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
+      className: cn(`${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`)
     }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
       id: ariaMessageId,
       dangerouslySetInnerHTML: {
@@ -163,10 +170,10 @@ export default class AlertLookup extends Component {
       id: ariaMessageId
     }, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
       id: ariaConfirmMsgId,
-      className: `${message ? style.confirmMsgText : ''}`
-    }, confirmationMessage)))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-      className: style.footer
-    }, /*#__PURE__*/React.createElement(FormAction, {
+      className: cn(`${message ? style.confirmMsgText : ''}`)
+    }, confirmationMessage)))), renderFooterNode || submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      className: cn(style.footer)
+    }, renderNode(renderFooterNode) || /*#__PURE__*/React.createElement(FormAction, {
       size: "small",
       paddingLeftSize: "xmedium"
     }, /*#__PURE__*/React.createElement(Button, _extends({

package/es/version2/lookup/AlertLookup/__tests__/__snapshots__/AlertLookup.spec.js.snap

@@ -8,7 +8,7 @@ exports[`AlertLookup rendering isActive is true defult 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex cover rowdir hCenter"
+      class="flex fullSize row justifyContent_center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"

package/es/version2/lookup/AlertLookup/props/defaultProps.js

@@ -5,6 +5,7 @@ export const defaultProps = {
   dataId: 'alertPopup',
   isDefaultFocus: true,
   customProps: {},
+  renderFooterNode: null,
   align: 'top',
   childAnimationName: 'flyDown',
   isHtmlContent: false,

package/es/version2/lookup/AlertLookup/props/propTypes.js

@@ -27,6 +27,7 @@ export const propTypes = {
     PrimaryButtonProps: PropTypes.object,
     SecondaryButtonProps: PropTypes.object
   }),
+  renderFooterNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   align: PropTypes.oneOf(['top', 'vertical']),
   childAnimationName: PropTypes.oneOf(['expand', 'flyDown']),
   isHtmlContent: PropTypes.bool,

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -10,6 +10,7 @@ import Button from '@zohodesk/components/es/Button/Button';
 import FormAction from "../../../FormAction/FormAction";
 import DesktopNotificationHeader from "../DesktopNotificationHeader/DesktopNotificationHeader";
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { cn } from "@dot-system/css-utility";
 import style from "./DesktopNotification.module.css";
 let buttonPaletteObject = {
   success: {
@@ -106,7 +107,7 @@ export function DesktopNotificationUI(props) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: style.parentElement,
+    className: cn(style.parentElement),
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {},
@@ -118,7 +119,7 @@ export function DesktopNotificationUI(props) {
     uptoTablet
   }) => /*#__PURE__*/React.createElement(Container, _extends({
     className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
-            ${isShrinkView ? style.globalNotify : ''} ${containerClass}  ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
+            ${isShrinkView ? style.globalNotify : ''}  ${uptoTablet ? style.tapWidth : style[`${size}`]} ${containerClass} `,
     isCover: false,
     dataId: dataId,
     isInline: uiVariantTwo
@@ -136,17 +137,17 @@ export function DesktopNotificationUI(props) {
   }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.section} ${style.infoText}`
+    className: cn(`${style.section} ${style.infoText}`)
   }, subTitle && /*#__PURE__*/React.createElement("div", {
-    className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
+    className: cn(`${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`)
   }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
-    className: `${info ? style.secondaryInfo : ''}`
+    className: cn(`${info ? style.secondaryInfo : ''}`)
   }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-    className: style.footer
+    className: cn(style.footer)
   }, isMore ? /*#__PURE__*/React.createElement("div", {
-    className: `${style.message}`,
+    className: cn(`${style.message}`),
     tagName: "p"
   }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
     size: "small",

package/es/version2/notification/DesktopNotification/__tests__/__snapshots__/DesktopNotification.spec.js.snap

@@ -8,20 +8,19 @@ exports[`DesktopNotification rendering the defult props 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="container leftanimate
-             undefined  undefined flex coldir"
+      class="flex column container leftanimate"
       data-id="toastMessage"
       data-selector-id="container"
       data-test-id="toastMessage"
     >
       <div
-        class="shrinkOff"
+        class="noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="container primary_header undefined flex rowdir wrap vCenter"
+          class="flex row wrap alignItems_center container primary_header"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
@@ -101,37 +100,37 @@ exports[`DesktopNotification rendering the defult props 1`] = `
             </div>
           </div>
           <div
-            class="grow basis shrinkOff"
+            class="flexible basis_zero noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="flex cover rowdir"
+              class="flex fullSize row"
               data-id="containerComponent"
               data-selector-id="container"
               data-test-id="containerComponent"
             >
               <div
-                class="shrinkOn"
+                class="shrink"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <h1
-                  class="reset size18 lineheight_1_2 font_bold title wordBreak_breakWord"
+                  class="reset size18 lineheight_1_2 font_bold wordBreak_breakWord title"
                 />
               </div>
             </div>
           </div>
           <div
-            class="close shrinkOff"
+            class="noShrink close"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="close light  inflex rowdir both"
+              class="inlineFlex row alignItems_center justifyContent_center close light"
               data-id="toastMessage_close"
               data-selector-id="container"
               data-test-id="toastMessage_close"
@@ -139,14 +138,14 @@ exports[`DesktopNotification rendering the defult props 1`] = `
               tabindex="0"
             >
               <div
-                class="shrinkOff"
+                class="noShrink"
                 data-id="boxComponent"
                 data-selector-id="box"
                 data-test-id="boxComponent"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-Cross fbold closeIcon  "
+                  class="zd_font_icons basic icon-Cross fbold closeIcon"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -158,13 +157,13 @@ exports[`DesktopNotification rendering the defult props 1`] = `
         </div>
       </div>
       <div
-        class="shrinkOff"
+        class="noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex cover coldir"
+          class="flex fullSize column"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -6,6 +6,7 @@ import AlertClose from "../../AlertClose/AlertClose";
 import AlertIcons from "../../alertIcons/AlertIcons";
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import Typography from '@zohodesk/components/es/Typography/Typography';
+import { cn } from "@dot-system/css-utility";
 import style from "./DesktopNotificationHeader.module.css";
 export default class DesktopNotificationHeader extends Component {
   constructor(props) {
@@ -47,7 +48,7 @@ export default class DesktopNotificationHeader extends Component {
     }, ({
       uptoTablet
     }) => /*#__PURE__*/React.createElement(React.Fragment, null, needIcon ? /*#__PURE__*/React.createElement("div", {
-      className: style.iconContainer
+      className: cn(style.iconContainer)
     }, /*#__PURE__*/React.createElement(AlertIcons, {
       type: type
     })) : null, /*#__PURE__*/React.createElement(Box, {

package/es/version2/notification/DesktopNotificationHeader/__tests__/__snapshots__/DesktopNotificationHeader.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DesktopNotificationHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container primary_header undefined flex rowdir wrap vCenter"
+    class="flex row wrap alignItems_center container primary_header"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
@@ -83,51 +83,51 @@ exports[`DesktopNotificationHeader rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover rowdir"
+        class="flex fullSize row"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrinkOn"
+          class="shrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <h1
-            class="reset size18 lineheight_1_2 font_bold title wordBreak_breakWord"
+            class="reset size18 lineheight_1_2 font_bold wordBreak_breakWord title"
           />
         </div>
       </div>
     </div>
     <div
-      class="close shrinkOff"
+      class="noShrink close"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="close light  inflex rowdir both"
+        class="inlineFlex row alignItems_center justifyContent_center close light"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
         tabindex="0"
       >
         <div
-          class="shrinkOff"
+          class="noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-Cross fbold closeIcon  "
+            class="zd_font_icons basic icon-Cross fbold closeIcon"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/lib/ActionButton/ActionButton.js

@@ -129,7 +129,7 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
-        className: " ".concat(_ActionButtonModule["default"].container, " ").concat(_ActionButtonModule["default"][palette + 'Box'], " ").concat(_ActionButtonModule["default"][size], " ").concat(className, " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisabled') : '', " ").concat(!onClick ? _ActionButtonModule["default"].wholeDiv : '', " "),
+        className: " ".concat(_ActionButtonModule["default"].container, " ").concat(_ActionButtonModule["default"][palette + 'Box'], " ").concat(_ActionButtonModule["default"][size], "  ").concat(isDisabled ? (0, _CssProvider["default"])('isDisabled') : '', " ").concat(!onClick ? _ActionButtonModule["default"].wholeDiv : '', " ").concat(className),
         onClick: onHover ? removeClose : !onClick ? this.handleTogglePopup : undefined,
         onMouseEnter: !onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: !onClick ? onHover && this.handleTogglePopup : undefined,
@@ -150,7 +150,7 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         onClick: onClick,
         dataId: dataId,
-        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"].contentBox, " ").concat(_ActionButtonModule["default"][palette + 'Btn'], " ").concat(_ActionButtonModule["default"][size + '_btnBox'], " ").concat(children ? _ActionButtonModule["default"].contentBoxBdr : _ActionButtonModule["default"].contentBoxBdrRds, " ").concat(_ActionButtonModule["default"].clickable, " ").concat(innerClassName, " "),
+        className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"].contentBox, " ").concat(_ActionButtonModule["default"][palette + 'Btn'], " ").concat(_ActionButtonModule["default"][size + '_btnBox'], " ").concat(children ? _ActionButtonModule["default"].contentBoxBdr : _ActionButtonModule["default"].contentBoxBdrRds, " ").concat(_ActionButtonModule["default"].clickable, " ").concat(innerClassName),
         "data-title": dataTitle,
         tagName: "button"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {