@zohodesk/dot 1.0.0-temp-226.1 → 1.0.0-temp-227

package/lib/list/ListLayout/ListLayout.module.css

@@ -1,80 +1,80 @@
-.varClass {
-  --listBorder: var(--zdt_listLayout_border)
-}
-
-.container {
-  position: relative;
-  composes: varClass;
-}
-
-.listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
-  background-color: var(--zdt_listLayout_hover_bg);
-}
-
-.active, .active:hover {
-  background-color: var(--zdt_listLayout_active_bg);
-}
-
-.cursorPointer {
-  cursor: pointer
-}
-
-/* View */
-.classic .innerContainer {
-  min-height: var(--zd_size70) ;
-  padding: var(--zd_size13) 0 ;
-}
-
-.compact .innerContainer {
-  min-height: var(--zd_size41) ;
-  padding: var(--zd_size5) 0 ;
-}
-
-.superCompact .innerContainer {
-  min-height: var(--zd_size35) ;
-  padding: var(--zd_size2) 0 ;
-}
-
-.compact .innerContainer,
-.classic .innerContainer,
-.superCompact .innerContainer {
-  /* css:theme-validation:ignore */
-}
-
-.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
-  border-bottom: 1px dotted var(--listBorder);
-}
-
-[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
-  border-left: var(--zd_size2) solid transparent;
-}
-
-[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
-  border-right: var(--zd_size2) solid transparent;
-}
-
-[dir=ltr] .keyboardActive, [dir=ltr] .active {
-  border-top-left-radius: var(--zd_size5);
-  border-bottom-left-radius: var(--zd_size5);
-}
-
-[dir=rtl] .keyboardActive, [dir=rtl] .active {
-  border-top-right-radius: var(--zd_size5);
-  border-bottom-right-radius: var(--zd_size5);
-}
-
-[dir=ltr] .keyboardActive {
-  border-left-color: var(--zdt_listLayout_keyboard_active_border);
-}
-
-[dir=rtl] .keyboardActive {
-  border-right-color: var(--zdt_listLayout_keyboard_active_border);
-}
-
-[dir=ltr] .active {
-  border-left-color: var(--zdt_listLayout_active_border);
-}
-
-[dir=rtl] .active {
-  border-right-color: var(--zdt_listLayout_active_border);
+.varClass {
+  --listBorder: var(--zdt_listLayout_border)
+}
+
+.container {
+  position: relative;
+  composes: varClass;
+}
+
+.listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
+  background-color: var(--zdt_listLayout_hover_bg);
+}
+
+.active, .active:hover {
+  background-color: var(--zdt_listLayout_active_bg);
+}
+
+.cursorPointer {
+  cursor: pointer
+}
+
+/* View */
+.classic .innerContainer {
+  min-height: var(--zd_size70) ;
+  padding: var(--zd_size13) 0 ;
+}
+
+.compact .innerContainer {
+  min-height: var(--zd_size41) ;
+  padding: var(--zd_size5) 0 ;
+}
+
+.superCompact .innerContainer {
+  min-height: var(--zd_size35) ;
+  padding: var(--zd_size2) 0 ;
+}
+
+.compact .innerContainer,
+.classic .innerContainer,
+.superCompact .innerContainer {
+  /* css:theme-validation:ignore */
+}
+
+.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
+  border-bottom: 1px dotted var(--listBorder);
+}
+
+[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
+  border-left: var(--zd_size2) solid transparent;
+}
+
+[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
+  border-right: var(--zd_size2) solid transparent;
+}
+
+[dir=ltr] .keyboardActive, [dir=ltr] .active {
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+
+[dir=rtl] .keyboardActive, [dir=rtl] .active {
+  border-top-right-radius: var(--zd_size5);
+  border-bottom-right-radius: var(--zd_size5);
+}
+
+[dir=ltr] .keyboardActive {
+  border-left-color: var(--zdt_listLayout_keyboard_active_border);
+}
+
+[dir=rtl] .keyboardActive {
+  border-right-color: var(--zdt_listLayout_keyboard_active_border);
+}
+
+[dir=ltr] .active {
+  border-left-color: var(--zdt_listLayout_active_border);
+}
+
+[dir=rtl] .active {
+  border-right-color: var(--zdt_listLayout_active_border);
 }

package/lib/lookup/Lookup/Lookup.js

@@ -123,7 +123,8 @@ 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;
       var _focusScopeProps$need = focusScopeProps.needAutoFocus,
           needAutoFocus = _focusScopeProps$need === void 0 ? true : _focusScopeProps$need,
           _focusScopeProps$need2 = focusScopeProps.needRestoreFocus,
@@ -154,16 +155,17 @@ 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"], {
+      return /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], _extends({
         align: "horizontal",
         animationName: "fade",
+        palette: "snow"
+      }, freezeLayerProps, {
         childAnimationName: childAnimationName,
         isActive: isActive,
-        palette: "snow",
         forwardRef: forwardRef,
         onClick: onClick,
         customClass: customClass
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         className: _LookupModule["default"].container,
         dataId: "fldValue"

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

@@ -8,19 +8,116 @@ 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'];
+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('Render with isActive=true', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isMinHeight=true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      isMinHeight: true
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lookup child content"))),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with custom classes', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      customClass: "lookup-freeze-layer",
+      containerClass: "lookup-container",
+      lookupClass: "lookup-box"
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      customProps: {
+        freezeLayerProps: {
+          palette: 'plain'
+        }
+      }
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      dataId: "lookup-data-id"
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlId', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true,
+      htmlId: "lookup-html-id"
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', function () {
+    var _render11 = (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 = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/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"
@@ -17,4 +17,225 @@ 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 cover rowdir hCenter"
+      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 cover rowdir hCenter"
+      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 lookup-freeze-layer index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex cover rowdir hCenter"
+      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 cover rowdir hCenter"
+      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 cover rowdir hCenter"
+      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 htmlId 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex cover rowdir hCenter"
+      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 cover rowdir hCenter"
+      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 cover rowdir hCenter"
+      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 cover rowdir hCenter"
+      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 cover rowdir hCenter"
+      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 cover rowdir hCenter"
+      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 cover rowdir hCenter"
+      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 cover rowdir hCenter"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;

package/lib/lookup/Lookup/props/propTypes.js

@@ -7,6 +7,10 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/props/propTypes"));
+
+var _propTypes3 = _interopRequireDefault(require("../../../FreezeLayer/props/propTypes"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
@@ -25,7 +29,10 @@ var propTypes = {
   onKeyDown: _propTypes["default"].func,
   childAnimationName: _propTypes["default"].oneOf(['expand', 'flyDown']),
   needFocusScope: _propTypes["default"].bool,
-  customProps: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    focusScopeProps: _propTypes["default"].shape(_propTypes2["default"]),
+    freezeLayerProps: _propTypes["default"].shape(_propTypes3["default"])
+  }),
   forwardRef: _propTypes["default"].object,
   onClick: _propTypes["default"].func,
   onClose: _propTypes["default"].func,

package/lib/lookup/header/ModuleHeader/ModuleHeader.js

@@ -59,30 +59,38 @@ function ModuleHeader(props) {
       closeTitle = props.closeTitle,
       onSearchKeyDown = props.onSearchKeyDown,
       palette = props.palette,
+      isDraggable = props.isDraggable,
       dragBoundaryLimit = props.dragBoundaryLimit,
       children = props.children,
+      customClass = props.customClass,
       childNearTitle = props.childNearTitle;
   var dragRef = (0, _react.useRef)(null); //dragRef
 
   (0, _useDragger["default"])({
-    isActive: true,
+    isActive: isDraggable,
     ChildRef: dragRef,
     boundaryLimit: dragBoundaryLimit
   }); //custom Hook
 
+  var _customClass$containe = customClass.container,
+      customContainerClass = _customClass$containe === void 0 ? '' : _customClass$containe,
+      _customClass$title = customClass.title,
+      customTitleClass = _customClass$title === void 0 ? '' : _customClass$title,
+      _customClass$close = customClass.close,
+      customCloseClass = _customClass$close === void 0 ? '' : _customClass$close;
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     align: "vertical",
     alignBox: "row",
-    className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)]),
+    className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)], " ").concat(customContainerClass),
     isCover: false,
     wrap: "wrap",
     dataId: dataId,
-    "data-drag-hook": "true",
+    "data-drag-hook": isDraggable ? 'true' : 'false',
     eleRef: dragRef
   }, childNearTitle ? childNearTitle : '', /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _lookupHeaderCommonModule["default"].title
+    className: "".concat(_lookupHeaderCommonModule["default"].title, " ").concat(customTitleClass)
   }, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
     text: title
   })), miniDescription && /*#__PURE__*/_react["default"].createElement("div", {
@@ -99,7 +107,7 @@ function ModuleHeader(props) {
     getRef: getSearchBoxRef,
     onKeyDown: onSearchKeyDown
   })), children ? children : '', onLookupClose ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _lookupHeaderCommonModule["default"].closeContainer
+    className: "".concat(_lookupHeaderCommonModule["default"].closeContainer, " ").concat(customCloseClass)
   }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
     dataId: "close",
     onClose: onLookupClose,