@zohodesk/dot 1.0.0-temp-199 → 1.0.0-temp-199.1

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

@@ -1,13 +1,196 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Search rendering the customized style search 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper searchWrapperClass borderType 
+          
+          
+         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>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Search rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="searchStyle    flex rowdir vCenter"
+    class="wrapper borderType 
+          
+          
+         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>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the prop hasSeparator is false 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper borderType 
+          
+          
+         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>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the prop hasSeparator is true 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper borderType 
+          
+          
+         flex rowdir vCenter"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
+    <div
+      class="separator"
+    />
     <div
       class="grow basis shrinkOff"
       data-id="boxComponent"
@@ -50,9 +233,139 @@ exports[`Search rendering the defult props 1`] = `
             data-test-id="containerComponent"
           />
         </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the renderChildren props via function 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper"
+    data-selector-id="toggleDropdown"
+  >
+    <div
+      class="flex rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper borderType 
+          
+          
+         flex rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div>
+          All Fields
+        </div>
         <div
-          class="line borderColor_default "
-        />
+          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>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Search rendering the search active 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper borderType 
+          active 
+          focusWidth
+         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 effectFocused   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>
     </div>
   </div>

package/es/lookup/header/Search/props/defaultProps.js

@@ -2,5 +2,6 @@ export const SearchUI_defaultProps = {
   activeClass: '',
   isBoxed: false,
   isSearchIconNeed: false,
-  isActive: false
+  isActive: false,
+  hasSeparator: false
 };

package/es/lookup/header/Search/props/propTypes.js

@@ -25,8 +25,8 @@ export const SearchUI_propTypes = {
   placeHolder: PropTypes.string,
   searchStr: PropTypes.string,
   title: PropTypes.string,
-  renderChildren: PropTypes.func,
   isActive: PropTypes.bool,
+  hasSeparator: PropTypes.bool,
   renderChildren: PropTypes.func,
   customStyle: PropTypes.object
 };

package/lib/Drawer/Drawer.js

@@ -256,7 +256,8 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           onClose = _this$props4.onClose,
           needFocusScope = _this$props4.needFocusScope,
           customProps = _this$props4.customProps,
-          a11y = _this$props4.a11y;
+          a11y = _this$props4.a11y,
+          customDrawerClass = _this$props4.customDrawerClass;
       var _customProps$focusSco = customProps.focusScopeProps,
           focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
       var _focusScopeProps$need = focusScopeProps.needAutoFocus,
@@ -284,7 +285,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
       });
 
       var content = /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
-        className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size]),
+        className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size], " ").concat(customDrawerClass),
         "data-a11y-need-focus-style": "false",
         tabindex: -1,
         eleRef: this.createRef
@@ -394,8 +395,4 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
 
 exports["default"] = Drawer;
 Drawer.propTypes = _propTypes.Drawer_propTypes;
-Drawer.defaultProps = _defaultProps.Drawer_defaultProps; // if (__DOCS__) {
-//   Drawer.docs = {
-//     componentGroup: 'Template'
-//   };
-// }
+Drawer.defaultProps = _defaultProps.Drawer_defaultProps;

package/lib/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap

@@ -12,7 +12,7 @@ exports[`Drawer rendering the isActive true 1`] = `
     style="z-index: 4;"
   >
     <div
-      class="container columns drawerModal small shrinkOff"
+      class="container columns drawerModal small  shrinkOff"
       data-a11y-need-focus-style="false"
       data-id="boxComponent"
       data-selector-id="box"

package/lib/Drawer/props/defaultProps.js

@@ -23,6 +23,7 @@ var Drawer_defaultProps = {
   subDrawerActive: false,
   subDrawerClass: '',
   customClass: '',
+  customDrawerClass: '',
   needAutoZindex: true,
   onBodyClick: function onBodyClick() {},
   needFocusScope: false,

package/lib/Drawer/props/propTypes.js

@@ -45,6 +45,7 @@ exports.Footer_propTypes = Footer_propTypes;
 var Drawer_propTypes = {
   children: _propTypes["default"].node,
   customClass: _propTypes["default"].string,
+  customDrawerClass: _propTypes["default"].string,
   forwardRef: _propTypes["default"].object,
   isActive: _propTypes["default"].bool,
   needAutoZindex: _propTypes["default"].bool,

package/lib/lookup/header/Search/LookupSearch.module.css

@@ -27,21 +27,12 @@
   position: relative;
   height: var(--zd_size28) ;
   cursor: pointer;
-  padding: 0 var(--zd_size9) ;
 }
-.drpSearchBox::after {
-  content: '';
-  position: absolute;
-  top: var(--zd_size4) ;
-  bottom: var(--zd_size4) ;
+[dir=ltr] .drpSearchBox {
+  padding-left: var(--zd_size12) ;
 }
-[dir=ltr] .drpSearchBox::after {
-  right: var(--zd_size6) ;
-  border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
-}
-[dir=rtl] .drpSearchBox::after {
-  left: var(--zd_size6) ;
-  border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
+[dir=rtl] .drpSearchBox {
+  padding-right: var(--zd_size12) ;
 }
 [dir=ltr] .searchIcon {
   padding-right: var(--zd_size8) ;
@@ -49,9 +40,24 @@
 [dir=rtl] .searchIcon {
   padding-left: var(--zd_size8) ;
 }
+[dir=ltr] .searchIconBox {
+  padding-left: var(--zd_size12) ;
+}
+[dir=rtl] .searchIconBox {
+  padding-right: var(--zd_size12) ;
+}
 .active, .boxStyle.active, .lineActive.drpSearchBox::after {
   border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
 }
-.iconArrow {
-  margin: 0 var(--zd_size6) ;
+[dir=ltr] .iconArrow {
+  margin-left: var(--zd_size6) ;
+}
+[dir=rtl] .iconArrow {
+  margin-right: var(--zd_size6) ;
+}
+.separator {
+  width: var(--zd_size1) ;
+  height: var(--zd_size20) ;
+  margin: 0 var(--zd_size12) ;
+  background-color: var(--zdt_lookupsearch_boxstyle_border);
 }

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

@@ -106,21 +106,18 @@ var Search = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleRenderChildren",
     value: function handleRenderChildren(_ref) {
-      var isActive = _ref.isActive;
+      var isActive = _ref.isActive,
+          isFocus = _ref.isFocus;
       var _this$props = this.props,
           value = _this$props.value,
           selectedId = _this$props.selectedId,
           renderChildren = _this$props.renderChildren;
-
-      if (renderChildren) {
-        return renderChildren({
-          isActive: isActive,
-          value: value,
-          selectedId: selectedId
-        });
-      }
-
-      return null;
+      return renderChildren({
+        isActive: isActive,
+        isFocus: isFocus,
+        value: value,
+        selectedId: selectedId
+      });
     }
   }, {
     key: "render",
@@ -138,7 +135,7 @@ var Search = /*#__PURE__*/function (_Component) {
         onBlur: this.handleTextBoxBlur,
         getRef: this.handleGetTextBoxRef,
         value: value,
-        renderChildren: renderChildren ? this.handleRenderChildren : null
+        renderChildren: typeof renderChildren == 'function' ? this.handleRenderChildren : undefined
       };
       return options ? /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
         value: value,
@@ -231,19 +228,21 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
           onBlur = _this$props5.onBlur,
           renderChildren = _this$props5.renderChildren,
           isActive = _this$props5.isActive,
+          hasSeparator = _this$props5.hasSeparator,
           customStyle = _this$props5.customStyle;
-      var isInActiveState = isFocus || isActive;
-      var isFocusWidth = isFocus || searchStr || isActive;
+      var isActiveState = isFocus || isActive;
+      var isFocusWidth = isActiveState || searchStr;
       var style = (0, _utils.mergeStyle)(_LookupSearchModule["default"], customStyle);
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         alignBox: "row",
         align: "vertical",
-        className: "\n          ".concat(style.wrapper, " ").concat(isBoxed ? style.boxType : style.borderType, " \n          ").concat(isInActiveState ? "".concat(style.active, " ").concat(activeClass || '') : '', "\n          ").concat(isFocusWidth ? style.focusWidth : '', "\n        ")
-      }, renderChildren && options ? renderChildren({
-        isActive: isActive
+        className: "\n          ".concat(style.wrapper, " ").concat(isBoxed ? style.boxType : style.borderType, " \n          ").concat(isActiveState ? "".concat(style.active, " ").concat(activeClass || '') : '', "\n          ").concat(isFocusWidth ? style.focusWidth : '', "\n        ")
+      }, typeof renderChildren == 'function' ? renderChildren({
+        isActive: isActive,
+        isFocus: isFocus
       }) : options ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        className: "".concat(style.drpSearchBox, " ").concat(isInActiveState ? style.lineActive : ''),
+        className: "".concat(style.drpSearchBox, " ").concat(isActiveState ? style.lineActive : ''),
         isCover: false,
         align: "vertical",
         alignBox: "row",
@@ -258,7 +257,9 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
       })) : isSearchIconNeed ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-search",
         size: "11",
-        iconClass: style.searchIcon
+        iconClass: "".concat(style.searchIcon, " ").concat(isBoxed ? style.searchIconBox : '')
+      }) : null, hasSeparator ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: style.separator
       }) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {

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

@@ -8,6 +8,7 @@ var _Search = _interopRequireDefault(require("../Search"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+afterEach(_react2.cleanup);
 describe('Search', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], null)),
@@ -15,4 +16,68 @@ describe('Search', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the search active', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], null)),
+        asFragment = _render2.asFragment,
+        getByRole = _render2.getByRole;
+
+    _react2.fireEvent.focus(getByRole('textbox'));
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the prop hasSeparator is true', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], {
+      hasSeparator: true
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the prop hasSeparator is false', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], {
+      hasSeparator: false
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the renderChildren props via function', function () {
+    var options = [{
+      value: 'All Fields',
+      id: '1'
+    }, {
+      value: 'Account',
+      id: '3'
+    }, {
+      value: 'Customer Place',
+      id: '4'
+    }, {
+      value: 'Conatct ID',
+      id: '5'
+    }];
+
+    function renderChildren(_ref) {
+      var value = _ref.value;
+      return /*#__PURE__*/_react["default"].createElement("div", null, value);
+    }
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], {
+      value: "All Fields",
+      renderChildren: renderChildren,
+      options: options
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customized style search', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Search["default"], {
+      customStyle: {
+        wrapper: "searchWrapperClass"
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });