@zohodesk/dot 1.9.15 → 1.9.16

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();
+  });
 });

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,286 @@ 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 hasFreezeLayer=false 1`] = `
+<DocumentFragment>
+  <div
+    class="overlayLayer  flex cover rowdir hCenter"
+    data-id="fldValue"
+    data-selector-id="container"
+    data-test-id="fldValue"
+  >
+    <div
+      aria-modal="true"
+      class="box mediumSize topCenterBox "
+      data-a11y-need-focus-style="false"
+      role="dialog"
+      tabindex="-1"
+    >
+      <div
+        class="coverwrap containerWidth undefined flex coldir"
+        data-drag-container="true"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      />
+    </div>
+  </div>
+</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 placement=center 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex cover rowdir both"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Lookup snapshot -  Render with placement=topCenter 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/defaultProps.js

@@ -8,9 +8,10 @@ var defaultProps = {
   size: 'medium',
   customClass: '',
   a11y: {},
-  childAnimationName: 'flyDown',
   needFocusScope: false,
   customProps: {},
-  isMinHeight: false
+  isMinHeight: false,
+  placement: 'topCenter',
+  hasFreezeLayer: true
 };
 exports.defaultProps = defaultProps;

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

@@ -7,6 +7,12 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/props/propTypes"));
+
+var _propTypes3 = _interopRequireDefault(require("@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/props/propTypes"));
+
+var _propTypes4 = _interopRequireDefault(require("../../../FreezeLayer/props/propTypes"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
@@ -18,6 +24,7 @@ var propTypes = {
   htmlId: _propTypes["default"].string,
   a11y: _propTypes["default"].shape({
     role: _propTypes["default"].string,
+    ariaLabel: _propTypes["default"].string,
     ariaLabelledby: _propTypes["default"].string,
     ariaDescribedby: _propTypes["default"].string,
     ariaModal: _propTypes["default"].bool
@@ -25,12 +32,18 @@ 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(_propTypes4["default"]),
+    velocityAnimationProps: _propTypes["default"].shape(_propTypes3["default"])
+  }),
   forwardRef: _propTypes["default"].object,
   onClick: _propTypes["default"].func,
   onClose: _propTypes["default"].func,
   isMinHeight: _propTypes["default"].bool,
   containerClass: _propTypes["default"].string,
-  lookupClass: _propTypes["default"].string
+  lookupClass: _propTypes["default"].string,
+  placement: _propTypes["default"].oneOf(['topCenter', 'center']),
+  hasFreezeLayer: _propTypes["default"].bool
 };
 exports.propTypes = propTypes;

package/lib/lookup/Section/Section.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _defaultProps = require("./props/defaultProps");
+
 var _Layout = require("@zohodesk/components/es/Layout");
 
 var _LookupSectionModule = _interopRequireDefault(require("./LookupSection.module.css"));
@@ -21,6 +23,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -57,13 +61,16 @@ var Section = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
           alignBox = _this$props.alignBox,
-          className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          className = _this$props.className,
+          customProps = _this$props.customProps;
+      var containerProps = customProps.container,
+          wrapperProps = customProps.wrapper;
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({}, containerProps, {
         alignBox: alignBox,
         className: "".concat(_LookupSectionModule["default"].section, " ").concat(className ? className : '')
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
         flexible: true
-      }, this.props.children));
+      }, wrapperProps), this.props.children));
     }
   }]);
 
@@ -71,4 +78,5 @@ var Section = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 exports["default"] = Section;
-Section.propTypes = _propTypes.propTypes;
+Section.propTypes = _propTypes.propTypes;
+Section.defaultProps = _defaultProps.defaultProps;

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

@@ -8,11 +8,50 @@ var _Section = _interopRequireDefault(require("../Section"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+afterEach(_react2.cleanup);
+var alignBoxValues = ['row', 'column', 'row-reverse', 'column-reverse'];
 describe('Section', function () {
-  test('rendering the defult props', function () {
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Section["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(alignBoxValues)('Render with alignBox as %s', function (alignBox) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Section["default"], {
+      alignBox: alignBox
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with className', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Section["default"], {
+      className: "custom-class"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Section["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "child content"))),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Section["default"], {
+      customProps: {
+        container: {
+          align: 'vertical'
+        },
+        wrapper: {
+          scroll: 'vertical'
+        }
+      }
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });