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

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -10,6 +10,7 @@ import Loader from '@zohodesk/svg/es/Loader/Loader';
 import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
 import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
 import StatusListItem from "../StatusListItem/StatusListItem";
+import { cn } from "@dot-system/css-utility";
 import commonStyle from '@zohodesk/components/es/common/common.module.css';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
@@ -192,10 +193,10 @@ export class StatusDropdown extends React.Component {
     let {
       searchString
     } = this.state;
-    let containerClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
+    let containerClass = `${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`} ${className ? className : ''}`;
     let ariaTitleId = this.getAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: style.posRel,
+      className: cn(style.posRel),
       onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
       onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
     }, renderTargetElement ? renderTargetElement({
@@ -205,7 +206,7 @@ export class StatusDropdown extends React.Component {
     }) : /*#__PURE__*/React.createElement(Container, {
       tagName: "button",
       alignBox: "row",
-      className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
+      className: `${style.container} ${btnStyle.buttonReset} ${containerClass}`,
       onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
       eleRef: getTargetRef,
       align: targetAlign,
@@ -340,7 +341,7 @@ export class StatusDropdown extends React.Component {
       size: "small",
       getEmptyState: this.emptySearchSVG
     }) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null))) : null);
   }
 

package/es/list/status/StatusDropdown/__tests__/StatusDropdown.spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import StatusDropdown from "../StatusDropdown";
+import { cn } from "@dot-system/css-utility";
 describe('StatusDropdown', () => {
   test('rendering the defult props', () => {
     const {
@@ -12,7 +13,7 @@ describe('StatusDropdown', () => {
       isPopupOpen
     }) => {
       return /*#__PURE__*/React.createElement("div", {
-        className: isPopupOpen ? 'popupOpened' : 'popupClosed'
+        className: cn(isPopupOpen ? 'popupOpened' : 'popupClosed')
       }, "Target Element");
     };
 

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

@@ -23,21 +23,21 @@ exports[`StatusDropdown rendering the defult props 1`] = `
       aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
-      class="container   cursor  buttonReset flex rowdir vCenter"
+      class="flex row alignItems_center container buttonReset cursor"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
       tabindex="0"
     >
       <span
-        class="value toggleDropText shrinkOn"
+        class="shrink value toggleDropText"
         data-id="undefined_value"
         data-selector-id="box"
         data-test-id="undefined_value"
       />
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-down  toggleDropIcon arrow default_arrow  "
+        class="zd_font_icons basic icon-down toggleDropIcon arrow default_arrow"
         data-id="statusdownarrow"
         data-selector-id="fontIcon"
         data-test-id="statusdownarrow"

package/es/list/status/StatusListItem/StatusListItem.js

@@ -11,6 +11,7 @@ import { Icon } from '@zohodesk/icons';
 import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./StatusListItem.module.css";
 export default class StatusListItem extends React.Component {
   constructor(props) {
@@ -119,7 +120,7 @@ export default class StatusListItem extends React.Component {
       shrink: true,
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value), /*#__PURE__*/React.createElement(Box, null, children && children))), needTick && active ? /*#__PURE__*/React.createElement("div", {
-      className: style.tickIcon,
+      className: cn(style.tickIcon),
       "aria-hidden": ariaHidden
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",

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

@@ -3,7 +3,7 @@
 exports[`StatusListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li
-    class="list medium default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_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="contentWrapper shrinkOff"
+      class="noShrink contentWrapper"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="statusType black shrinkOff selfStart"
+        class="noShrink alignSelf_start statusType black"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       />
       <div
-        class="grow basis shrinkOn"
+        class="flexible basis_zero shrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex cover rowdir vCenter"
+          class="flex fullSize row alignItems_center"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="value shrinkOn"
+            class="shrink value"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           />
           <div
-            class="shrinkOff"
+            class="noShrink"
             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,11 +49,11 @@ 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));
   }
 

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

@@ -9,7 +9,7 @@ exports[`EmptyPage rendering the defult props 1`] = `
   >
     <div
       aria-hidden="true"
-      class="large image default svgCenter "
+      class="large default svgCenter image"
     >
       <svg
         data-id="emptySearch"

package/es/lookup/Lookup/Lookup.js

@@ -8,12 +8,22 @@ import { propTypes } from "./props/propTypes";
 
 import FreezeLayer from "../../FreezeLayer/FreezeLayer";
 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 */
 
+const placementToAlignMap = {
+  topCenter: 'horizontal',
+  center: 'both'
+};
+const defaultAnimationMap = {
+  topCenter: 'flyDown',
+  center: 'expand'
+};
 export default class Lookup extends Component {
   constructor(props) {
     super(props);
@@ -47,13 +57,15 @@ export default class Lookup extends Component {
       isActive,
       children,
       size,
+      hasFreezeLayer,
+      placement,
       dataId,
       forwardRef,
       onClick,
       customClass,
       htmlId,
       a11y,
-      childAnimationName,
+      childAnimationName = defaultAnimationMap[placement],
       onClose,
       needFocusScope,
       customProps,
@@ -70,7 +82,9 @@ export default class Lookup extends Component {
       ...a11yAttributes
     } = a11y;
     const {
-      focusScopeProps = {}
+      focusScopeProps = {},
+      freezeLayerProps,
+      velocityAnimationProps
     } = customProps;
     const {
       needAutoFocus = true,
@@ -89,7 +103,7 @@ export default class Lookup extends Component {
       "aria-label": ariaLabel,
       "aria-modal": ariaModal,
       id: htmlId,
-      className: `${style.box} ${style[`${size}Size`]} ${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, {
@@ -97,20 +111,7 @@ export default class Lookup extends Component {
       isCover: false,
       className: `${isMinHeight ? style.wrapper : style.coverwrap} ${style.containerWidth} ${containerClass}`
     }, children));
-    return /*#__PURE__*/React.createElement(FreezeLayer, {
-      align: "horizontal",
-      animationName: "fade",
-      childAnimationName: childAnimationName,
-      isActive: isActive,
-      palette: "snow",
-      forwardRef: forwardRef,
-      onClick: onClick,
-      customClass: customClass
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      className: style.container,
-      dataId: "fldValue"
-    }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+    const childrenElement = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
       needFocusLoop: needFocusLoop,
       needListNavigation: needListNavigation,
       elementRef: this.createRef,
@@ -118,7 +119,36 @@ export default class Lookup extends Component {
       needRestoreFocus: needRestoreFocus,
       onClose: onClose,
       needEnterAction: needEnterAction
-    }, content) : content));
+    }, content) : content;
+
+    if (hasFreezeLayer) {
+      return /*#__PURE__*/React.createElement(FreezeLayer, _extends({
+        animationName: "fade",
+        palette: "snow"
+      }, freezeLayerProps, {
+        align: placementToAlignMap[placement],
+        childAnimationName: childAnimationName,
+        isActive: isActive,
+        forwardRef: forwardRef,
+        onClick: onClick,
+        customClass: customClass
+      }), /*#__PURE__*/React.createElement(Container, {
+        alignBox: "row",
+        className: style.container,
+        dataId: "fldValue"
+      }, childrenElement));
+    }
+
+    return /*#__PURE__*/React.createElement(VelocityAnimationGroup, _extends({}, velocityAnimationProps, {
+      name: childAnimationName,
+      isActive: isActive
+    }), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: placementToAlignMap[placement],
+      eleRef: forwardRef,
+      className: `${style.overlayLayer} ${customClass}`,
+      dataId: "fldValue"
+    }, childrenElement));
   }
 
 }

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

@@ -12,13 +12,32 @@
   font-size: var(--zd_font_size16) ;
 }
 
+.overlayLayer {
+  position: absolute;
+  inset: 0 ;
+  composes: blockEvent from '~@zohodesk/components/es/common/common.module.css';
+}
+
 .box {
   position: relative;
+}
+
+.topCenterBox {
   height: 100% ;
   width: 100% ;
   margin: auto ;
 }
 
+.centerBox {
+  max-height: 100% ;
+  width: 100% ;
+  margin: auto ;
+}
+
+.overlayLayer > .box {
+  pointer-events: initial;
+}
+
 .containerWidth {
   width: 100% ;
 }

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

@@ -1,18 +1,134 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { cleanup, render } from '@testing-library/react';
 import Lookup from "../Lookup";
-describe('Lookup', () => {
-  test('rendering the defult props', () => {
+const SIZE_VALUES = ['small', 'xmedium', 'large', 'xlarge', 'full'];
+const CHILD_ANIMATION_NAME_VALUES = ['expand'];
+const PLACEMENT_VALUES = ['topCenter', 'center'];
+afterEach(() => {
+  cleanup();
+});
+describe('Lookup snapshot - ', () => {
+  test('Render with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Lookup, null));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering isActive is true', () => {
+  test.each(SIZE_VALUES)('Render with size=%s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true,
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(CHILD_ANIMATION_NAME_VALUES)('Render with childAnimationName=%s', childAnimationName => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true,
+      childAnimationName: childAnimationName
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(PLACEMENT_VALUES)('Render with placement=%s', placement => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true,
+      placement: placement
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isActive=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isMinHeight=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true,
+      isMinHeight: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with hasFreezeLayer=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true,
+      hasFreezeLayer: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Lookup, {
       isActive: true
+    }, /*#__PURE__*/React.createElement("div", null, "Lookup child content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with custom classes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true,
+      customClass: "lookup-freeze-layer",
+      containerClass: "lookup-container",
+      lookupClass: "lookup-box"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true,
+      customProps: {
+        freezeLayerProps: {
+          palette: 'plain'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true,
+      dataId: "lookup-data-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true,
+      htmlId: "lookup-html-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Lookup, {
+      isActive: true,
+      a11y: {
+        role: 'region',
+        ariaLabelledby: 'lookup-title',
+        ariaDescribedby: 'lookup-description',
+        ariaLabel: 'Lookup Dialog',
+        ariaModal: true
+      }
     }));
     expect(asFragment()).toMatchSnapshot();
   });