@zohodesk/dot 1.9.15 → 1.9.17

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -257,7 +257,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           ariaLabel = a11y.ariaLabel;
       var isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
       var searchString = this.state.searchString;
-      var containerClass = "".concat(className ? className : '', " ").concat(isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? _StatusDropdownModule["default"].hoverIcon : '', " ").concat(isDisabled ? _commonModule["default"].disabled : isReadOnly ? _StatusDropdownModule["default"].readOnly : !isEditable ? _StatusDropdownModule["default"].cursorDefault : !showOnHover ? "".concat(_StatusDropdownModule["default"].cursor, " ").concat(hoverStyle ? hoverStyle : '') : "".concat(hoverStyle ? hoverStyle : '', " ").concat(_StatusDropdownModule["default"].cursorDefault));
+      var containerClass = "".concat(isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? _StatusDropdownModule["default"].hoverIcon : '', " ").concat(isDisabled ? _commonModule["default"].disabled : isReadOnly ? _StatusDropdownModule["default"].readOnly : !isEditable ? _StatusDropdownModule["default"].cursorDefault : !showOnHover ? "".concat(_StatusDropdownModule["default"].cursor, " ").concat(hoverStyle ? hoverStyle : '') : "".concat(hoverStyle ? hoverStyle : '', " ").concat(_StatusDropdownModule["default"].cursorDefault), " ").concat(className ? className : '');
       var ariaTitleId = this.getAriaId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: _StatusDropdownModule["default"].posRel,
@@ -270,7 +270,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
       }) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         tagName: "button",
         alignBox: "row",
-        className: "".concat(_StatusDropdownModule["default"].container, " ").concat(containerClass, " ").concat(_semanticButtonModule["default"].buttonReset),
+        className: "".concat(_StatusDropdownModule["default"].container, " ").concat(_semanticButtonModule["default"].buttonReset, " ").concat(containerClass),
         onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
         eleRef: getTargetRef,
         align: targetAlign,

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

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

@@ -8,19 +8,135 @@ var _Lookup = _interopRequireDefault(require("../Lookup"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Lookup', function () {
-  test('rendering the defult props', function () {
+var SIZE_VALUES = ['small', 'xmedium', 'large', 'xlarge', 'full'];
+var CHILD_ANIMATION_NAME_VALUES = ['expand'];
+var PLACEMENT_VALUES = ['topCenter', 'center'];
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
+describe('Lookup snapshot - ', function () {
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering isActive is true', function () {
+  test.each(SIZE_VALUES)('Render with size=%s', function (size) {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
-      isActive: true
+      isActive: true,
+      size: size
     })),
         asFragment = _render2.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(CHILD_ANIMATION_NAME_VALUES)('Render with childAnimationName=%s', function (childAnimationName) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      childAnimationName: childAnimationName
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(PLACEMENT_VALUES)('Render with placement=%s', function (placement) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      placement: placement
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isActive=true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isMinHeight=true', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      isMinHeight: true
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with hasFreezeLayer=false', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      hasFreezeLayer: false
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lookup child content"))),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with custom classes', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      customClass: "lookup-freeze-layer",
+      containerClass: "lookup-container",
+      lookupClass: "lookup-box"
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      customProps: {
+        freezeLayerProps: {
+          palette: 'plain'
+        }
+      }
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      dataId: "lookup-data-id"
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlId', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      htmlId: "lookup-html-id"
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      a11y: {
+        role: 'region',
+        ariaLabelledby: 'lookup-title',
+        ariaDescribedby: 'lookup-description',
+        ariaLabel: 'Lookup Dialog',
+        ariaModal: true
+      }
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });