@zohodesk/dot 1.4.13 → 1.4.14

package/lib/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -5,7 +5,6 @@
   display: inline;
 }
 .icon{
-  /* css:theme-validation:ignore */
   color:var(--label_text_color);
   display: inline-block;
   margin: 0 var(--zd_size5) ;

package/lib/layout/SubtabLayout/SubtabLayout.module.css

@@ -48,7 +48,6 @@
 }
 
 .tertiary_borderStyle {
-  /* css:theme-validation:ignore */
   border-bottom: 1px solid var(--borderColor);
 }
 
@@ -150,7 +149,6 @@
 
 .footer {
   composes: varClass;
-  /* css:theme-validation:ignore */
   border-top: 1px solid var(--borderColor);
 }
 

package/lib/list/Comment/Comment.module.css

@@ -5,7 +5,6 @@
   composes: varClass;
   composes: inlineBlockMiddle from '../listCommon.module.css';
   position: relative;
-  /* css:theme-validation:ignore */
   color: var(--icon_color);
   padding: 0 var(--zd_size2) ;
   cursor: pointer;

package/lib/list/Dot/Dot.module.css

@@ -4,7 +4,6 @@
 .dot {
   composes: varClass;
   font-size: var(--zd_font_size16) ;
-  /* css:theme-validation:ignore */
   color: var(--dotColor);
   transform: perspective(1px);
 }

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

@@ -45,12 +45,6 @@
   border-bottom: 1px dotted var(--listBorder);
 }
 
-.compact,
-.classic,
-.superCompact {
-  /* css:theme-validation:ignore */
-}
-
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
   border-left: var(--zd_size2) solid transparent;
 }

package/lib/list/Subject/Subject.module.css

@@ -1,28 +1,35 @@
 .varClass {
   --subject_text: var(--zdt_subject_text);
 }
+
 .subject {
   composes: varClass;
   /* css:theme-validation:ignore */
   color: var(--subject_text);
   display: block;
 }
+
 .dotted {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .font_regular {
   font-family: var(--zd_regular);
 }
+
 .font_semibold {
   font-family: var(--zd_semibold);
 }
+
 .font_bold {
   font-family: var(--zd_bold);
 }
+
 .font_semibold,
 .font_bold {
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .cursorPointer {
   cursor: pointer;
-}
+}

package/lib/list/Thread/Thread.module.css

@@ -4,7 +4,6 @@
 .container {
   composes: varClass;
   position: relative;
-  /* css:theme-validation:ignore */
   color: var(--icon_color);
   cursor: pointer;
 }

package/lib/lookup/Lookup/Lookup.js

@@ -109,7 +109,8 @@ var Lookup = /*#__PURE__*/function (_Component) {
           onClose = _this$props.onClose,
           needFocusScope = _this$props.needFocusScope,
           customProps = _this$props.customProps,
-          isMinHeight = _this$props.isMinHeight;
+          isMinHeight = _this$props.isMinHeight,
+          lookupClass = _this$props.lookupClass;
 
       var _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'dialog' : _a11y$role,
@@ -143,7 +144,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
         "aria-label": ariaLabel,
         "aria-modal": ariaModal,
         id: htmlId,
-        className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")]),
+        className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")], " ").concat(lookupClass ? lookupClass : ''),
         "data-id": dataId,
         "data-test-id": dataId
       }, a11yAttributes), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/lookup/Lookup/Lookup.module.css

@@ -35,7 +35,10 @@
 .largeSize {
   max-width: 70% ;
 }
+.xlargeSize {
+  max-width: 80% ;
+}
 
 .fullSize {
   max-width: 90% ;
-}
+}

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

@@ -14,7 +14,7 @@ var propTypes = {
   customClass: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   isActive: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
+  size: _propTypes["default"].oneOf(['small', 'xmedium', 'medium', 'large', 'xlarge', 'full']),
   htmlId: _propTypes["default"].string,
   a11y: _propTypes["default"].shape({
     role: _propTypes["default"].string,
@@ -29,6 +29,7 @@ var propTypes = {
   forwardRef: _propTypes["default"].object,
   onClick: _propTypes["default"].func,
   onClose: _propTypes["default"].func,
-  isMinHeight: _propTypes["default"].bool
+  isMinHeight: _propTypes["default"].bool,
+  lookupClass: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

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

@@ -23,6 +23,8 @@ var _ViewDropDown = _interopRequireDefault(require("../ViewDropDown/ViewDropDown
 
 var _Layout = require("@zohodesk/components/lib/Layout");
 
+var _useDragger = _interopRequireDefault(require("../../../Hooks/Dragger/useDragger"));
+
 var _lookupHeaderCommonModule = _interopRequireDefault(require("../lookupHeaderCommon.module.css"));
 
 var _lookupHeaderCommonResponsiveModule = _interopRequireDefault(require("../lookupHeaderCommonResponsive.module.css"));
@@ -35,117 +37,102 @@ 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 _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); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+/*** Libraries ***/
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+/*** Components ***/
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+/*** CSS ***/
 
 /* eslint-disable react/forbid-component-props */
-var TicketHeader = /*#__PURE__*/function (_Component) {
-  _inherits(TicketHeader, _Component);
-
-  var _super = _createSuper(TicketHeader);
-
-  function TicketHeader() {
-    _classCallCheck(this, TicketHeader);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(TicketHeader, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          needSearch = _this$props.needSearch,
-          onLookupClose = _this$props.onLookupClose,
-          searchStr = _this$props.searchStr,
-          onSearchChange = _this$props.onSearchChange,
-          searchPlaceHolder = _this$props.searchPlaceHolder,
-          title = _this$props.title,
-          selectedViewId = _this$props.selectedViewId,
-          onSelectView = _this$props.onSelectView,
-          allViews = _this$props.allViews,
-          onSearch = _this$props.onSearch,
-          needOnTypeSearch = _this$props.needOnTypeSearch,
-          getSearchBoxRef = _this$props.getSearchBoxRef,
-          needViewsList = _this$props.needViewsList,
-          i18nKeys = _this$props.i18nKeys,
-          palette = _this$props.palette;
-      var _i18nKeys$menuEmptyMe = i18nKeys.menuEmptyMessage,
-          menuEmptyMessage = _i18nKeys$menuEmptyMe === void 0 ? 'No matches found' : _i18nKeys$menuEmptyMe;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        align: "vertical",
-        alignBox: "row",
-        className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)], " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
-        isCover: false,
-        wrap: "wrap"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _lookupHeaderCommonModule["default"].closeContainer
-      }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
-        onClose: onLookupClose,
-        dataId: "close"
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "column",
-        className: "".concat(_TicketHeaderModule["default"].innerContainer),
-        isCover: false,
-        wrap: "wrap",
-        dataId: "lookupView"
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _lookupHeaderCommonModule["default"].title
-      }, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
-        text: title
-      })), needViewsList ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_TicketHeaderModule["default"].dropdown),
-        dataId: "filterIdselected"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TicketHeaderModule["default"].menuWrapper
-      }, /*#__PURE__*/_react["default"].createElement(_ViewDropDown["default"], {
-        dropBoxSize: "small",
-        emptyMessage: menuEmptyMessage,
-        needSearch: true,
-        onChange: onSelectView,
-        options: allViews,
-        textField: "displayLabel",
-        selectedValue: selectedViewId,
-        needCloseOnSelect: true
-      }))) : null)), needSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_lookupHeaderCommonModule["default"].searchContainer, " ").concat(_lookupHeaderCommonResponsiveModule["default"].searchContainer, " ").concat(_TicketHeaderModule["default"].searchContainer)
-      }, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
-        onSearch: onSearch,
-        searchStr: searchStr,
-        onChange: onSearchChange,
-        placeHolder: searchPlaceHolder,
-        dataId: "search",
-        needOnTypeSearch: needOnTypeSearch,
-        getRef: getSearchBoxRef
-      })) : null);
-    }
-  }]);
-
-  return TicketHeader;
-}(_react.Component);
-
-exports["default"] = TicketHeader;
+function TicketHeader(props) {
+  var needSearch = props.needSearch,
+      onLookupClose = props.onLookupClose,
+      searchStr = props.searchStr,
+      onSearchChange = props.onSearchChange,
+      searchPlaceHolder = props.searchPlaceHolder,
+      title = props.title,
+      selectedViewId = props.selectedViewId,
+      onSelectView = props.onSelectView,
+      allViews = props.allViews,
+      onSearch = props.onSearch,
+      needOnTypeSearch = props.needOnTypeSearch,
+      getSearchBoxRef = props.getSearchBoxRef,
+      needViewsList = props.needViewsList,
+      i18nKeys = props.i18nKeys,
+      palette = props.palette,
+      dragBoundaryLimit = props.dragBoundaryLimit;
+  var _i18nKeys$menuEmptyMe = i18nKeys.menuEmptyMessage,
+      menuEmptyMessage = _i18nKeys$menuEmptyMe === void 0 ? 'No matches found' : _i18nKeys$menuEmptyMe;
+  var dragRef = (0, _react.useRef)(null); //dragRef
+
+  (0, _useDragger["default"])({
+    isActive: true,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  }); //custom Hook
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)], " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
+    isCover: false,
+    wrap: "wrap",
+    eleRef: dragRef,
+    "data-drag-hook": "true"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "column",
+    className: "".concat(_TicketHeaderModule["default"].innerContainer),
+    isCover: false,
+    wrap: "wrap",
+    dataId: "lookupView"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _lookupHeaderCommonModule["default"].title
+  }, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
+    text: title
+  })), needViewsList ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_TicketHeaderModule["default"].dropdown),
+    dataId: "filterIdselected"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _TicketHeaderModule["default"].menuWrapper
+  }, /*#__PURE__*/_react["default"].createElement(_ViewDropDown["default"], {
+    dropBoxSize: "small",
+    emptyMessage: menuEmptyMessage,
+    needSearch: true,
+    onChange: onSelectView,
+    options: allViews,
+    textField: "displayLabel",
+    selectedValue: selectedViewId,
+    needCloseOnSelect: true
+  }))) : null)), needSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_lookupHeaderCommonModule["default"].searchContainer, " ").concat(_lookupHeaderCommonResponsiveModule["default"].searchContainer, " ").concat(_TicketHeaderModule["default"].searchContainer)
+  }, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
+    onSearch: onSearch,
+    searchStr: searchStr,
+    onChange: onSearchChange,
+    placeHolder: searchPlaceHolder,
+    dataId: "search",
+    needOnTypeSearch: needOnTypeSearch,
+    getRef: getSearchBoxRef
+  })) : null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _lookupHeaderCommonModule["default"].closeContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
+    onClose: onLookupClose,
+    dataId: "close"
+  })));
+}
+
 TicketHeader.propTypes = _propTypes.propTypes;
-TicketHeader.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
+TicketHeader.defaultProps = _defaultProps.defaultProps;
+var MemoizedTicketHeader = /*#__PURE__*/(0, _react.memo)(TicketHeader);
+MemoizedTicketHeader.propTypes = _propTypes.propTypes;
+MemoizedTicketHeader.defaultProps = _defaultProps.defaultProps;
+MemoizedTicketHeader.displayName = 'TicketHeader';
+var _default = MemoizedTicketHeader; // if (__DOCS__) {
 //   TicketHeader.docs = {
 //     componentGroup: 'Lookup'
 //   };
-// }
+// }
+
+exports["default"] = _default;

package/lib/lookup/header/TicketHeader/props/defaultProps.js

@@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultProps = void 0;
 var defaultProps = {
   i18nKeys: {},
-  palette: 'default'
+  palette: 'default',
+  dragBoundaryLimit: {
+    top: 0,
+    left: 50,
+    right: 50,
+    bottom: 50
+  }
 };
 exports.defaultProps = defaultProps;

package/lib/lookup/header/TicketHeader/props/propTypes.js

@@ -26,6 +26,7 @@ var propTypes = {
   i18nKeys: _propTypes["default"].shape({
     menuEmptyMessage: _propTypes["default"].string
   }),
-  palette: _propTypes["default"].oneOf(['default', 'white'])
+  palette: _propTypes["default"].oneOf(['default', 'white']),
+  dragBoundaryLimit: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/lib/v1/lookup/Lookup/Lookup.js

@@ -53,7 +53,8 @@ function Lookup(props) {
       needFocusScope = props.needFocusScope,
       customProps = props.customProps,
       onKeyDown = props.onKeyDown,
-      isMinHeight = props.isMinHeight;
+      isMinHeight = props.isMinHeight,
+      lookupClass = props.lookupClass;
 
   var _a11y$role = a11y.role,
       role = _a11y$role === void 0 ? 'dialog' : _a11y$role,
@@ -103,7 +104,7 @@ function Lookup(props) {
     "aria-label": ariaLabel,
     "aria-modal": ariaModal,
     id: htmlId,
-    className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")]),
+    className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")], " ").concat(lookupClass ? lookupClass : ''),
     "data-id": dataId,
     "data-test-id": dataId
   }, a11yAttributes), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

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

@@ -14,7 +14,7 @@ var propTypes = {
   customClass: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   isActive: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
+  size: _propTypes["default"].oneOf(['small', 'xmedium', 'medium', 'large', 'xlarge', 'full']),
   htmlId: _propTypes["default"].string,
   a11y: _propTypes["default"].shape({
     role: _propTypes["default"].string,
@@ -29,6 +29,7 @@ var propTypes = {
   forwardRef: _propTypes["default"].object,
   onClick: _propTypes["default"].func,
   onClose: _propTypes["default"].func,
-  isMinHeight: _propTypes["default"].bool
+  isMinHeight: _propTypes["default"].bool,
+  lookupClass: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/v1/lookup/header/TicketHeader/TicketHeader.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = TicketHeader;
+exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
 
@@ -21,6 +23,8 @@ var _ViewDropDown = _interopRequireDefault(require("../../../../lookup/header/Vi
 
 var _Layout = require("@zohodesk/components/es/v1/Layout");
 
+var _useDragger = _interopRequireDefault(require("../../../../Hooks/Dragger/useDragger"));
+
 var _lookupHeaderCommonModule = _interopRequireDefault(require("../../../../lookup/header/lookupHeaderCommon.module.css"));
 
 var _lookupHeaderCommonResponsiveModule = _interopRequireDefault(require("../../../../lookup/header/lookupHeaderCommonResponsive.module.css"));
@@ -29,6 +33,10 @@ var _TicketHeaderModule = _interopRequireDefault(require("../../../../lookup/hea
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
 /*** Libraries ***/
 
 /*** Components ***/
@@ -51,21 +59,27 @@ function TicketHeader(props) {
       getSearchBoxRef = props.getSearchBoxRef,
       needViewsList = props.needViewsList,
       i18nKeys = props.i18nKeys,
-      palette = props.palette;
+      palette = props.palette,
+      dragBoundaryLimit = props.dragBoundaryLimit;
   var _i18nKeys$menuEmptyMe = i18nKeys.menuEmptyMessage,
       menuEmptyMessage = _i18nKeys$menuEmptyMe === void 0 ? 'No matches found' : _i18nKeys$menuEmptyMe;
+  var dragRef = (0, _react.useRef)(null); //dragRef
+
+  (0, _useDragger["default"])({
+    isActive: true,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  }); //custom Hook
+
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     align: "vertical",
     alignBox: "row",
     className: "".concat(_lookupHeaderCommonModule["default"].container, " ").concat(_lookupHeaderCommonModule["default"]["".concat(palette)], " ").concat(_lookupHeaderCommonResponsiveModule["default"].container, " ").concat(_TicketHeaderModule["default"].container),
     isCover: false,
-    wrap: "wrap"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _lookupHeaderCommonModule["default"].closeContainer
-  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
-    onClose: onLookupClose,
-    dataId: "close"
-  })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    wrap: "wrap",
+    ref: dragRef,
+    "data-drag-hook": "true"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "column",
@@ -101,8 +115,19 @@ function TicketHeader(props) {
     dataId: "search",
     needOnTypeSearch: needOnTypeSearch,
     getRef: getSearchBoxRef
-  })) : null);
+  })) : null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _lookupHeaderCommonModule["default"].closeContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
+    onClose: onLookupClose,
+    dataId: "close"
+  })));
 }
 
 TicketHeader.propTypes = _propTypes.propTypes;
-TicketHeader.defaultProps = _defaultProps.defaultProps;
+TicketHeader.defaultProps = _defaultProps.defaultProps;
+var MemoizedTicketHeader = /*#__PURE__*/(0, _react.memo)(TicketHeader);
+MemoizedTicketHeader.propTypes = _propTypes.propTypes;
+MemoizedTicketHeader.defaultProps = _defaultProps.defaultProps;
+MemoizedTicketHeader.displayName = 'TicketHeader';
+var _default = MemoizedTicketHeader;
+exports["default"] = _default;

package/lib/v1/lookup/header/TicketHeader/props/defaultProps.js

@@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultProps = void 0;
 var defaultProps = {
   i18nKeys: {},
-  palette: 'default'
+  palette: 'default',
+  dragBoundaryLimit: {
+    top: 0,
+    left: 50,
+    right: 50,
+    bottom: 50
+  }
 };
 exports.defaultProps = defaultProps;

package/lib/v1/lookup/header/TicketHeader/props/propTypes.js

@@ -26,6 +26,7 @@ var propTypes = {
   i18nKeys: _propTypes["default"].shape({
     menuEmptyMessage: _propTypes["default"].string
   }),
-  palette: _propTypes["default"].oneOf(['default', 'white'])
+  palette: _propTypes["default"].oneOf(['default', 'white']),
+  dragBoundaryLimit: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/lib/version2/GlobalNotification/GlobalNotification.module.css

@@ -29,7 +29,6 @@
 .stackShadowTwo::before {
   content: '';
   position: absolute;
-  /* css:theme-validation:ignore */
   height: var(--zd_size20) ;
 }
 
@@ -78,9 +77,6 @@
 .container {
   position: relative;
   pointer-events: initial;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   color: var(--globalnotification_text_color);
   z-index: 1;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';

package/lib/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -4,7 +4,6 @@
 .container {
   composes: varClass;
   position: relative;
-  /* css:theme-validation:ignore */
   background-color: var(--zdt_alertlookup_bg);
   border-style: solid;
   border-color: var(--commonalert_border_color);

package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -5,8 +5,6 @@
     composes: varClass;
     min-height: var(--zd_size54) ;
     position: relative;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
     color: var(--zdt_desktopnotification_text);
     background-color: var(--alert_lookup_bg_color);
     border-style: solid;