@zohodesk/dot 1.9.15 → 1.9.16

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

@@ -1,6 +1,307 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FormAction rendering the defult props 1`] = `
+exports[`FormAction Render with Center children 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent  
+
+                        mediumFooter
+                     flex rowdir around"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Submit
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with LeftSide children 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent mediumPadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Save
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with LeftSide, Center and RightSide children 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent  
+
+                        mediumFooter
+                     flex rowdir around"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Save
+        </button>
+      </div>
+      <div
+        class="shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Cancel
+        </button>
+      </div>
+      <div
+        class="shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Preview
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with RightSide children 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent mediumPadding 
+
+                        mediumFooter
+                     flex rowdir right"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with customId and testId 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-id="form-action-customId"
+    data-selector-id="formAction"
+    data-test-id="form-action-testId"
+  >
+    <div
+      class="footerParent  
+
+                        mediumFooter
+                     flex rowdir around"
+      data-id="form-action-customId_container"
+      data-selector-id="container"
+      data-test-id="form-action-testId_container"
+    >
+      <div
+        class="grow basis shrinkOff"
+        data-id="form-action-customId_leftElement"
+        data-selector-id="box"
+        data-test-id="form-action-testId_leftElement"
+      >
+        <button>
+          Save
+        </button>
+      </div>
+      <div
+        class="shrinkOff"
+        data-id="form-action-customId_rightElement"
+        data-selector-id="box"
+        data-test-id="form-action-testId_rightElement"
+      >
+        <button>
+          Cancel
+        </button>
+      </div>
+      <div
+        class="shrinkOff"
+        data-id="form-action-customId_centerElement"
+        data-selector-id="box"
+        data-test-id="form-action-testId_centerElement"
+      >
+        <button>
+          Preview
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with dataSelectorId 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="form-action-dataSelectorId"
+  >
+    <div
+      class="footerParent mediumPadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent mediumPadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with direct child (defaults to left group) 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent mediumPadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button>
+          Standalone
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with multiple children in Center 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent  
+
+                        mediumFooter
+                     flex rowdir around"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="marginRight"
+        >
+          <button>
+            Submit
+          </button>
+        </div>
+        <div
+          class="marginRight"
+        >
+          <button>
+            Preview
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with multiple children in LeftSide 1`] = `
 <DocumentFragment>
   <div
     class="wrapperDiv"
@@ -14,6 +315,240 @@ exports[`FormAction rendering the defult props 1`] = `
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
+    >
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="marginRight"
+        >
+          <button>
+            Save
+          </button>
+        </div>
+        <div
+          class="marginRight"
+        >
+          <button>
+            Draft
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with multiple children in RightSide 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent mediumPadding 
+
+                        mediumFooter
+                     flex rowdir right"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="marginRight"
+        >
+          <button>
+            Cancel
+          </button>
+        </div>
+        <div
+          class="marginRight"
+        >
+          <button>
+            Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingLeftSize as large 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent largePadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingLeftSize as medium 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent mediumPadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingLeftSize as small 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent smallPadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingLeftSize as xmedium 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent xmediumPadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingLeftSize as xsmall 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent xsmallPadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with paddingRightClass 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent mediumPadding customPaddingRight
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with size as large 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent largePadding 
+
+                        largeFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with size as medium 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent mediumPadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormAction Render with size as small 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent smallPadding 
+
+                        smallFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
     />
   </div>
 </DocumentFragment>

package/es/FormAction/props/propTypes.js

@@ -4,5 +4,7 @@ export const propTypes = {
   paddingLeftSize: PropTypes.oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
   paddingRightClass: PropTypes.string,
   size: PropTypes.oneOf(['large', 'medium', 'small']),
+  testId: PropTypes.string,
+  customId: PropTypes.string,
   dataSelectorId: PropTypes.string
 };

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% ;
 }