@zohodesk/dot 1.4.14 → 1.4.16

package/lib/list/status/StatusDropdown/StatusDropdown.module.css

@@ -80,13 +80,4 @@
   height: var(--zd_size1) ;
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
   margin: var(--zd_size9) 0 var(--zd_size10) ;
-}
-.hiddenInput {
-  width: 0 ;
-  height: 0 ;
-  opacity: 0;
-}
-.hiddenInput > input {
-  width: 100% ;
-  padding: 0 ;
-}
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _StatusDropdown = _interopRequireDefault(require("../StatusDropdown"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('StatusDropdown', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_StatusDropdown["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusDropdown rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="posRel"
+  >
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      class="container   cursor  buttonReset flex rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+      tabindex="0"
+    >
+      <span
+        class="value toggleDropText shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      />
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-down  toggleDropIcon arrow default_arrow  "
+        data-id="statusdownarrow"
+        data-selector-id="fontIcon"
+        data-test-id="statusdownarrow"
+        style="--zd-iconfont-size: var(--zd_font_size7);"
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;

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

@@ -21,6 +21,7 @@ var defaultProps = {
   boxSize: 'medium',
   needExternalPopupState: false,
   statusColor: 'statusColor',
-  needMultiLineText: false
+  needMultiLineText: false,
+  isFetchingOptions: false
 };
 exports.defaultProps = defaultProps;

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

@@ -30,5 +30,5 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isNextOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _propTypes);
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;

package/lib/list/status/StatusListItem/StatusListItem.js

@@ -119,7 +119,10 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
       var role = a11y.role,
           ariaSelected = a11y.ariaSelected,
           _a11y$ariaHidden = a11y.ariaHidden,
-          ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
+          ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden,
+          ariaLabel = a11y.ariaLabel,
+          _a11y$insetFocus = a11y.insetFocus,
+          insetFocus = _a11y$insetFocus === void 0 ? true : _a11y$insetFocus;
 
       if (isLink) {
         options.href = href;
@@ -129,6 +132,8 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         role: role,
         "aria-selected": ariaSelected,
+        "aria-label": ariaLabel,
+        "data-a11y-inset-focus": insetFocus,
         isCover: false,
         align: "baseline",
         alignBox: "row",

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _StatusListItem = _interopRequireDefault(require("../StatusListItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('StatusListItem', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/list/status/StatusListItem/__tests__/__snapshots__/StatusListItem.spec.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusListItem rendering the defult props 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium default     withBorder  flex rowdir baseline"
+    data-a11y-inset-focus="true"
+    data-id="undefined"
+    data-selector-id="container"
+    data-test-id="undefined"
+    tabindex="0"
+  >
+    <div
+      class="statusType black shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        />
+        <div
+          class="shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        />
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _EmptyPage = _interopRequireDefault(require("../EmptyPage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('EmptyPage', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_EmptyPage["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmptyPage rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+    data-id="empty_search"
+    data-test-id="empty_search"
+  >
+    <div
+      aria-hidden="true"
+      class="large image default svgCenter "
+    >
+      <svg
+        data-id="emptySearch"
+        data-test-id="emptySearch"
+        height="100%"
+        viewBox="0 0 200 200"
+        width="100%"
+      >
+        <defs>
+          <style>
+            .EmptySearch_svg__cls-4,.EmptySearch_svg__cls-5,.EmptySearch_svg__cls-6,.EmptySearch_svg__cls-7,.EmptySearch_svg__cls-8{fill:none}.EmptySearch_svg__cls-4{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptySearch_svg__cls-7{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptySearch_svg__cls-5,.EmptySearch_svg__cls-6{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptySearch_svg__cls-6{stroke:var(--zd_emptysvg_primary_stroke)}.EmptySearch_svg__cls-8{stroke:var(--zd_emptysvg_small_circle);stroke-linecap:round;stroke-linejoin:round}
+          </style>
+        </defs>
+        <path
+          d="M86.51 62.52S133.43 31.67 157.17 41s40 87.37-26.06 122.41S35.22 122.19 35 108.68c-.28-13.07 0-44.23 51.51-46.16z"
+          fill="var(--zd_emptysvg_primary_fill)"
+          opacity="0.05"
+        />
+        <ellipse
+          cx="156.04"
+          cy="31.69"
+          fill="none"
+          rx="3.54"
+          ry="3.51"
+          stroke="var(--zd_emptysvg_medium_circle)"
+          stroke-miterlimit="10"
+        />
+        <ellipse
+          class="EmptySearch_svg__cls-4"
+          cx="79.62"
+          cy="29.6"
+          rx="2.12"
+          ry="2.1"
+        />
+        <path
+          class="EmptySearch_svg__cls-5"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          class="EmptySearch_svg__cls-8"
+          cx="165.88"
+          cy="154.09"
+          rx="2.45"
+          ry="2.43"
+        />
+        <path
+          class="EmptySearch_svg__cls-7"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          d="M101.35 87.13s4.94 2.24 6.06 9.58"
+          fill="none"
+          stroke="var(--zd_emptysvg_circle_fill)"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+        <ellipse
+          cx="95.28"
+          cy="96.71"
+          fill="var(--zd_emptysvg_secondary_fill)"
+          rx="21.41"
+          ry="21.23"
+        />
+        <path
+          class="EmptySearch_svg__cls-6"
+          d="M33.71 102.31H56.2a7.33 7.33 0 007.28-6.64c.75-7.62 4.37-20 19-27.59 22.32-11.51 51.78 10.62 43.75 37.18l-3.57 7.67 27.38 27.15s4.11 6.77 0 10.62-8 1.77-12.21-1.18S112 124.14 112 124.14s-26.19 12.4-42.26-8.26c0 0-1-1.53-2.09-3.42-2.2-3.73 1.4-8.42 5.52-7a3.11 3.11 0 011.5 1c2.19 2.85 9.2 15.31 25.23 12.24s19.48-19.7 15.81-32.18-25.88-16.08-34.38-8-9.65 18.57-5.6 22 7-.57 8.31-5.93 4.41-8.81 8.38-8.81 7.84-2.11 5.72-5.75-12.51-.82-16 2.68c-5.32 5.28-9.27 17.71-1 26.19s19.7 5.22 22.6 3.69 6.4-7.8 7.92-8.62"
+        />
+      </svg>
+    </div>
+    <div
+      class="contentDiv"
+    >
+      No Results Found
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+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 _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isActive is true', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Lookup["default"], {
+      isActive: true
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Lookup rendering isActive is 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 rendering the defult props 1`] = `<DocumentFragment />`;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Section = _interopRequireDefault(require("../Section"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Section', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Section["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Section rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Close = _interopRequireDefault(require("../Close"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('AlphabeticList', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Close["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlphabeticList rendering the defult props 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="closeButton"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="closeButton"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-cross    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size11);"
+    />
+  </button>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ModuleHeader = _interopRequireDefault(require("../ModuleHeader"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('ModuleHeader', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ModuleHeader["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModuleHeader rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container default flex rowdir wrap vCenter"
+    data-drag-hook="true"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="title"
+      >
+        <span
+          class="title default "
+          data-title=""
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/lookup/header/Search/__tests__/Search.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Search = _interopRequireDefault(require("../Search"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Search', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="searchStyle    flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container effect    flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            class="  container small  default  effect  borderColor_default  "
+            data-a11y-autofocus="true"
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            maxlength="250"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+        <div
+          class="line borderColor_default "
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/lookup/header/TicketHeader/__tests__/TicketHeader.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _TicketHeader = _interopRequireDefault(require("../TicketHeader"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('TicketHeader', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TicketHeader["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TicketHeader rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container default undefined container flex rowdir wrap vCenter"
+    data-drag-hook="true"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="innerContainer flex coldir wrap"
+        data-id="lookupView"
+        data-selector-id="container"
+        data-test-id="lookupView"
+      >
+        <div
+          class="title shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title default "
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="closeContainer"
+    >
+      <button
+        aria-pressed="false"
+        class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+        data-id="close"
+        data-ishtml="false"
+        data-selector-id="iconButton"
+        data-test-id="close"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-cross    "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size11);"
+        />
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/lookup/header/Title/__tests__/Titles.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Title = _interopRequireDefault(require("../Title"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Title', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Title["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});