@zohodesk/dot 1.9.15 → 1.9.17-exp-1

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

@@ -192,7 +192,7 @@ 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,
@@ -205,7 +205,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,

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/__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/__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,21 @@ 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 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 +56,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 +81,9 @@ export default class Lookup extends Component {
       ...a11yAttributes
     } = a11y;
     const {
-      focusScopeProps = {}
+      focusScopeProps = {},
+      freezeLayerProps,
+      velocityAnimationProps
     } = customProps;
     const {
       needAutoFocus = true,
@@ -89,7 +102,7 @@ export default class Lookup extends Component {
       "aria-label": ariaLabel,
       "aria-modal": ariaModal,
       id: htmlId,
-      className: `${style.box} ${style[`${size}Size`]} ${lookupClass ? lookupClass : ''}`,
+      className: `${style.box} ${style[`${size}Size`]} ${style[`${placement}Box`]} ${lookupClass ? lookupClass : ''}`,
       "data-id": dataId,
       "data-test-id": dataId
     }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
@@ -97,20 +110,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 +118,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();
   });

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Lookup rendering isActive is true 1`] = `
+exports[`Lookup snapshot -  Render with a11y attributes 1`] = `
 <DocumentFragment>
   <div
     class="container index5 snow"
@@ -8,7 +8,7 @@ exports[`Lookup rendering isActive is true 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"
@@ -17,4 +17,286 @@ exports[`Lookup rendering isActive is true 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Lookup rendering the defult props 1`] = `<DocumentFragment />`;
+exports[`Lookup snapshot -  Render with childAnimationName=expand 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with children 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with custom classes 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow lookup-freeze-layer"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with customProps 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 plain"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with dataId 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+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"
+    data-id="fldValue"
+    data-selector-id="container"
+    data-test-id="fldValue"
+  >
+    <div
+      aria-modal="true"
+      class="box mediumSize topCenterBox"
+      data-a11y-need-focus-style="false"
+      role="dialog"
+      tabindex="-1"
+    >
+      <div
+        class="flex column coverwrap containerWidth"
+        data-drag-container="true"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with htmlId 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with isActive=true 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with isMinHeight=true 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with placement=center 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row alignItems_center justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with placement=topCenter 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with size=full 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with size=large 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with size=small 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with size=xlarge 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with size=xmedium 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;