@zohodesk/dot 1.9.15 → 1.9.16

package/lib/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/lib/FormAction/props/propTypes.js

@@ -14,6 +14,8 @@ var propTypes = {
   paddingLeftSize: _propTypes["default"].oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
   paddingRightClass: _propTypes["default"].string,
   size: _propTypes["default"].oneOf(['large', 'medium', 'small']),
+  testId: _propTypes["default"].string,
+  customId: _propTypes["default"].string,
   dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/lookup/Lookup/Lookup.js

@@ -17,6 +17,8 @@ var _FreezeLayer = _interopRequireDefault(require("../../FreezeLayer/FreezeLayer
 
 var _Layout = require("@zohodesk/components/es/Layout");
 
+var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup"));
+
 var _LookupModule = _interopRequireDefault(require("./Lookup.module.css"));
 
 var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
@@ -56,6 +58,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 /*eslint-disable react/forbid-component-props */
+var placementToAlignMap = {
+  topCenter: 'horizontal',
+  center: 'both'
+};
+var defaultAnimationMap = {
+  topCenter: 'flyDown',
+  center: 'expand'
+};
+
 var Lookup = /*#__PURE__*/function (_Component) {
   _inherits(Lookup, _Component);
 
@@ -99,13 +110,16 @@ var Lookup = /*#__PURE__*/function (_Component) {
           isActive = _this$props.isActive,
           children = _this$props.children,
           size = _this$props.size,
+          hasFreezeLayer = _this$props.hasFreezeLayer,
+          placement = _this$props.placement,
           dataId = _this$props.dataId,
           forwardRef = _this$props.forwardRef,
           onClick = _this$props.onClick,
           customClass = _this$props.customClass,
           htmlId = _this$props.htmlId,
           a11y = _this$props.a11y,
-          childAnimationName = _this$props.childAnimationName,
+          _this$props$childAnim = _this$props.childAnimationName,
+          childAnimationName = _this$props$childAnim === void 0 ? defaultAnimationMap[placement] : _this$props$childAnim,
           onClose = _this$props.onClose,
           needFocusScope = _this$props.needFocusScope,
           customProps = _this$props.customProps,
@@ -123,7 +137,9 @@ var Lookup = /*#__PURE__*/function (_Component) {
           a11yAttributes = _objectWithoutProperties(a11y, _excluded);
 
       var _customProps$focusSco = customProps.focusScopeProps,
-          focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
+          focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco,
+          freezeLayerProps = customProps.freezeLayerProps,
+          velocityAnimationProps = customProps.velocityAnimationProps;
       var _focusScopeProps$need = focusScopeProps.needAutoFocus,
           needAutoFocus = _focusScopeProps$need === void 0 ? true : _focusScopeProps$need,
           _focusScopeProps$need2 = focusScopeProps.needRestoreFocus,
@@ -145,7 +161,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
         "aria-label": ariaLabel,
         "aria-modal": ariaModal,
         id: htmlId,
-        className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")], " ").concat(lookupClass ? lookupClass : ''),
+        className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")], " ").concat(_LookupModule["default"]["".concat(placement, "Box")], " ").concat(lookupClass ? lookupClass : ''),
         "data-id": dataId,
         "data-test-id": dataId
       }, a11yAttributes), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -154,20 +170,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
         className: "".concat(isMinHeight ? _LookupModule["default"].wrapper : _LookupModule["default"].coverwrap, " ").concat(_LookupModule["default"].containerWidth, " ").concat(containerClass)
       }, children));
 
-      return /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], {
-        align: "horizontal",
-        animationName: "fade",
-        childAnimationName: childAnimationName,
-        isActive: isActive,
-        palette: "snow",
-        forwardRef: forwardRef,
-        onClick: onClick,
-        customClass: customClass
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "row",
-        className: _LookupModule["default"].container,
-        dataId: "fldValue"
-      }, needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
+      var childrenElement = needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
         needFocusLoop: needFocusLoop,
         needListNavigation: needListNavigation,
         elementRef: this.createRef,
@@ -175,7 +178,36 @@ var Lookup = /*#__PURE__*/function (_Component) {
         needRestoreFocus: needRestoreFocus,
         onClose: onClose,
         needEnterAction: needEnterAction
-      }, content) : content));
+      }, content) : content;
+
+      if (hasFreezeLayer) {
+        return /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], _extends({
+          animationName: "fade",
+          palette: "snow"
+        }, freezeLayerProps, {
+          align: placementToAlignMap[placement],
+          childAnimationName: childAnimationName,
+          isActive: isActive,
+          forwardRef: forwardRef,
+          onClick: onClick,
+          customClass: customClass
+        }), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          alignBox: "row",
+          className: _LookupModule["default"].container,
+          dataId: "fldValue"
+        }, childrenElement));
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], _extends({}, velocityAnimationProps, {
+        name: childAnimationName,
+        isActive: isActive
+      }), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: placementToAlignMap[placement],
+        eleRef: forwardRef,
+        className: "".concat(_LookupModule["default"].overlayLayer, " ").concat(customClass),
+        dataId: "fldValue"
+      }, childrenElement));
     }
   }]);
 

package/lib/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% ;
 }