@zohodesk/dot 1.9.15 → 1.9.17

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"
@@ -8,7 +8,7 @@ exports[`Lookup rendering isActive is true 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="flex cover rowdir hCenter"
+      class="flex fullSize row justifyContent_center"
       data-id="reactFreezeLayer"
       data-selector-id="container"
       data-test-id="reactFreezeLayer"
@@ -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 fullSize row justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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 index5 snow lookup-freeze-layer"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex fullSize row justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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="flex fullSize row justifyContent_center overlayLayer"
+    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="flex column coverwrap containerWidth"
+        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 fullSize row justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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 fullSize row alignItems_center justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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 fullSize row justifyContent_center"
+      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();
+  });
 });

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

@@ -1,15 +1,145 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Section rendering the defult props 1`] = `
+exports[`Section Render with alignBox as column 1`] = `
 <DocumentFragment>
   <div
-    class="section  flex cover coldir"
+    class="flex fullSize column section"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Section Render with alignBox as column-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="flex fullSize columnReverse section"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="flexible basis_zero noShrink"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Section Render with alignBox as row 1`] = `
+<DocumentFragment>
+  <div
+    class="flex fullSize row section"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="flexible basis_zero noShrink"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Section Render with alignBox as row-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="flex fullSize rowReverse section"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="flexible basis_zero noShrink"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Section Render with children 1`] = `
+<DocumentFragment>
+  <div
+    class="flex fullSize column section"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="flexible basis_zero noShrink"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        child content
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Section Render with className 1`] = `
+<DocumentFragment>
+  <div
+    class="flex fullSize column section custom-class"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="flexible basis_zero noShrink"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Section Render with customProps 1`] = `
+<DocumentFragment>
+  <div
+    class="flex fullSize column alignItems_center section"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="flexible basis_zero noShrink scroll_vertical"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Section Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex fullSize column section"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

package/lib/lookup/Section/props/defaultProps.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
+var defaultProps = {
+  customProps: _constants.DUMMY_OBJECT
+};
+exports.defaultProps = defaultProps;

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

@@ -7,11 +7,17 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("@zohodesk/components/es/Layout/props/propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
   alignBox: _propTypes["default"].string,
   children: _propTypes["default"].node,
+  customProps: _propTypes["default"].shape({
+    container: _propTypes["default"].exact(_propTypes2.ContainerProps),
+    wrapper: _propTypes["default"].exact(_propTypes2.BoxProps)
+  }),
   className: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/lookup/header/Close/__tests__/__snapshots__/Close.spec.js.snap

@@ -4,7 +4,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
     data-id="closeButton"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -12,7 +12,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-cross   icon_button_center  "
+      class="zd_font_icons basic icon-cross icon_button_center"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"