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

package/lib/list/TagNew/TagNew.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _TagNewModule = _interopRequireDefault(require("./TagNew.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -62,7 +64,7 @@ var TagNew = /*#__PURE__*/function (_Component) {
           onClick = _this$props.onClick,
           dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagNewModule["default"].tagStyle, " ").concat(animate ? _TagNewModule["default"].bounceIn : '', " ").concat(className ? className : ''),
+        className: (0, _cssUtility.cn)("".concat(_TagNewModule["default"].tagStyle, " ").concat(animate ? _TagNewModule["default"].bounceIn : '', " ").concat(className ? className : '')),
         onClick: onClick,
         "data-id": dataId,
         "data-test-id": dataId

package/lib/list/TagNew/__tests__/__snapshots__/TagNew.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`TagNew rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="tagStyle  "
+    class="tagStyle"
     data-id="TagNew"
     data-test-id="TagNew"
   />

package/lib/list/Thread/Thread.js

@@ -17,6 +17,8 @@ var _icons = require("@zohodesk/icons");
 
 var _Button = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/Button"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _ThreadModule = _interopRequireDefault(require("./Thread.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -76,7 +78,7 @@ var Thread = /*#__PURE__*/function (_Component) {
         name: "ZD-TK-thread",
         size: "9"
       }), /*#__PURE__*/_react["default"].createElement("span", {
-        className: _ThreadModule["default"].count
+        className: (0, _cssUtility.cn)(_ThreadModule["default"].count)
       }, count));
     }
   }]);

package/lib/list/Thread/__tests__/__snapshots__/Thread.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Thread rendering the defult props 1`] = `
 <DocumentFragment>
   <button
-    class="buttonReset container align_left "
+    class="buttonReset container align_left"
     data-id="semanticButton"
     data-test-id="semanticButton"
     type="button"
@@ -11,7 +11,7 @@ exports[`Thread rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-thread    rtl "
+      class="zd_font_icons rtl basic icon-thread"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

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

@@ -31,6 +31,8 @@ var _CommonEmptyState = _interopRequireDefault(require("../../../emptystate/Comm
 
 var _StatusListItem = _interopRequireDefault(require("../StatusListItem/StatusListItem"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _commonModule = _interopRequireDefault(require("@zohodesk/components/es/common/common.module.css"));
 
 var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox"));
@@ -257,10 +259,10 @@ 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,
+        className: (0, _cssUtility.cn)(_StatusDropdownModule["default"].posRel),
         onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
         onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
       }, renderTargetElement ? renderTargetElement({
@@ -270,7 +272,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,
@@ -405,7 +407,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           size: "small",
           getEmptyState: _this2.emptySearchSVG
         }) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _StatusDropdownModule["default"].loader
+          className: (0, _cssUtility.cn)(_StatusDropdownModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), renderFooterElement ? renderFooterElement : null));
       }) : null);
     }

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

@@ -6,6 +6,8 @@ var _react2 = require("@testing-library/react");
 
 var _StatusDropdown = _interopRequireDefault(require("../StatusDropdown"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('StatusDropdown', function () {
@@ -18,7 +20,7 @@ describe('StatusDropdown', function () {
     var renderTargetElement = function renderTargetElement(_ref) {
       var isPopupOpen = _ref.isPopupOpen;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: isPopupOpen ? 'popupOpened' : 'popupClosed'
+        className: (0, _cssUtility.cn)(isPopupOpen ? 'popupOpened' : 'popupClosed')
       }, "Target Element");
     };
 

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/StatusListItem.js

@@ -19,6 +19,8 @@ var _icons = require("@zohodesk/icons");
 
 var _CssProvider = _interopRequireDefault(require("@zohodesk/components/es/Provider/CssProvider"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _StatusListItemModule = _interopRequireDefault(require("./StatusListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -162,7 +164,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         shrink: true,
         className: needMultiLineText ? _StatusListItemModule["default"].multiLineValue : _StatusListItemModule["default"].value
       }, value), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, children && children))), needTick && active ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _StatusListItemModule["default"].tickIcon,
+        className: (0, _cssUtility.cn)(_StatusListItemModule["default"].tickIcon),
         "aria-hidden": ariaHidden
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",

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/EmptyPage.js

@@ -21,6 +21,8 @@ var _EmptyContact = _interopRequireDefault(require("@zohodesk/svg/es/emptystate/
 
 var _EmptyProducts = _interopRequireDefault(require("@zohodesk/svg/es/emptystate/version3/EmptyProducts"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LookupEmptyPageModule = _interopRequireDefault(require("./LookupEmptyPage.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -99,11 +101,11 @@ var EmptyPage = /*#__PURE__*/function (_Component) {
           type = _this$props.type,
           title = _this$props.title;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _LookupEmptyPageModule["default"].container,
+        className: (0, _cssUtility.cn)(_LookupEmptyPageModule["default"].container),
         "data-id": "empty_".concat(type),
         "data-test-id": "empty_".concat(type)
       }, this.renderEmptyState(type), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _LookupEmptyPageModule["default"].contentDiv
+        className: (0, _cssUtility.cn)(_LookupEmptyPageModule["default"].contentDiv)
       }, title));
     }
   }]);

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,10 @@ var _FreezeLayer = _interopRequireDefault(require("../../FreezeLayer/FreezeLayer
 
 var _Layout = require("@zohodesk/components/es/Layout");
 
+var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup"));
+
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LookupModule = _interopRequireDefault(require("./Lookup.module.css"));
 
 var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
@@ -56,6 +60,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 +112,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 +139,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 +163,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: (0, _cssUtility.cn)("".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 +172,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 +180,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();
+  });
 });