@zohodesk/dot 1.0.0-beta.251 → 1.0.0-beta.253

package/README.md

@@ -2,6 +2,17 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.253
+
+- **FreezeLayer** - onClick event issue solved
+- cancelBubblingEffect function replaced to all stopPropagation used placed
+
+# 1.0.0-beta.252
+
+- **ToggleDropdown**  - customClass (customDropBox and customListBox) Support added.
+
+- **StatusDropdown** - align item value changed (center => baseline) and Line-height changed(18px => 20px)
+
 # 1.0.0-beta.251
 
 - **ToggleDropdown, StatusDropdown, StatusListItem**  - Added New Prop `needMultiLineText`

package/css_error.log

@@ -0,0 +1 @@
+DOT Package error log:

package/es/Drawer/Drawer.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from './props/defaultProps';
 import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from './props/propTypes';
 import FreezeLayer from '../FreezeLayer/FreezeLayer';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
 import FormAction from '../FormAction/FormAction';
@@ -166,7 +167,7 @@ export default class Drawer extends React.Component {
       eleRef: this.createRef
     }, /*#__PURE__*/React.createElement(Card, {
       onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
+        cancelBubblingEffect(e);
         onBodyClick(e);
       }
     }, childrenWithProps));
@@ -178,7 +179,7 @@ export default class Drawer extends React.Component {
     }, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Container, {
       className: styleByResolutions,
       onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
+        cancelBubblingEffect(e);
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true

package/es/FreezeLayer/useFreezeLayer.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { isTextSelected } from '@zohodesk/components/es/utils/Common';
+import { isTextSelected, cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { getDotLibraryConfig } from '../Provider/Config';
 export default function useFreezeLayer(_ref) {
   let {
@@ -9,9 +9,11 @@ export default function useFreezeLayer(_ref) {
   const [isActive, setActive] = useState(propsActive);
   const [isChildActive, setChildActive] = useState(false);
   let isFreezeLayerEnabled = useRef(false);
-  function handleClick() {
+  function handleClick(e) {
     if (onClick && !isTextSelected()) {
-      onClick();
+      onClick(e);
+    } else {
+      cancelBubblingEffect(e);
     }
   }
   function enableFreeze() {

package/es/Link/Link.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import style from './Link.module.css';
 import LinkContext from './LinkContext';
 export default class Link extends React.Component {
@@ -19,14 +20,14 @@ export default class Link extends React.Component {
       onCallBack
     } = this.context.options;
     if (e && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
-      e && e.stopPropagation();
+      cancelBubblingEffect(e);
       return;
     }
     onClick && onClick(e);
     if (!hasReload && target != '_blank') {
       e && e.preventDefault();
     }
-    e && e.stopPropagation();
+    cancelBubblingEffect(e);
     !onClick && onCallBack && onCallBack(urlOutput, href, e);
   }
   addHttp(url) {

package/es/ToastMessage/ToastMessage.js

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 //components
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
@@ -11,10 +12,6 @@ import AutoClose from '../actions/AutoClose';
 import a11yStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 //style
 import style from './ToastMessage.module.css';
-function removeClose(e) {
-  e && e.stopPropagation && e.stopPropagation();
-  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-}
 function ToastMessageUI(props) {
   let [messageState, setMessageState] = useState(props.messageState);
   let {
@@ -54,7 +51,7 @@ function ToastMessageUI(props) {
     onClose && onClose();
   }
   function changeMessageState(e) {
-    removeClose(e);
+    cancelBubblingEffect(e);
     setMessageState(!messageState);
   }
   let animateClass = isClose ? style.rightanimate : style.leftanimate;

package/es/actions/AutoClose.js

@@ -1,10 +1,7 @@
 import React, { useState, useEffect } from 'react';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-function removeClose(e) {
-  e && e.stopPropagation && e.stopPropagation();
-  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-}
 export default function AutoClose(props) {
   let {
     Element,
@@ -15,7 +12,7 @@ export default function AutoClose(props) {
   } = props;
   let [isClose, setClose] = useState(givenClose);
   function onClose(e) {
-    removeClose(e);
+    cancelBubblingEffect(e);
     onPortalClose && onPortalClose();
   }
   useEffect(() => {

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -520,7 +520,8 @@ export class ToggleDropDown extends Component {
       palette,
       getFooter,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      customClass
     } = this.props;
     let {
       ToggleDropDownProps = {},
@@ -529,6 +530,10 @@ export class ToggleDropDown extends Component {
       ListItemWithIconProps = {},
       ListItemProps = {}
     } = customProps;
+    let {
+      customDropBox = '',
+      customListBox = ''
+    } = customClass;
     const isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
     const Component = isToggleStateNeeded ? children.type : null,
       componentProps = isToggleStateNeeded ? children.props : null;
@@ -613,7 +618,8 @@ export class ToggleDropDown extends Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer
+          customDropBoxWrap: style.dropBoxContainer,
+          customDropBox: customDropBox
         },
         needResponsive: needResponsive,
         isPadding: isPadding,
@@ -659,7 +665,7 @@ export class ToggleDropDown extends Component {
         scroll: "vertical",
         preventParentScroll: "vertical",
         dataId: `${dataId}_list`,
-        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt} ${customListBox}`,
         eleRef: this.scrollContentRef,
         onScroll: this.handleScroll,
         role: isSearch ? 'listbox' : undefined,

package/es/dropdown/ToggleDropDown/props/defaultProps.js

@@ -22,5 +22,6 @@ export const defaultProps = {
   customProps: {},
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: {}
 };

package/es/dropdown/ToggleDropDown/props/propTypes.js

@@ -68,5 +68,9 @@ export const propTypes = {
     ListItemProps: PropTypes.object
   }),
   preventPopupClose: PropTypes.bool,
-  needMultiLineText: PropTypes.bool
+  needMultiLineText: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customDropBox: PropTypes.string,
+    customListBox: PropTypes.string
+  })
 };

package/es/list/status/StatusListItem/StatusListItem.js

@@ -77,7 +77,7 @@ export default class StatusListItem extends React.Component {
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
-      align: "vertical",
+      align: "baseline",
       alignBox: "row",
       className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
       dataId: String(value).replace("'", '_'),

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -3,6 +3,7 @@
   font-size: var(--zd_font_size13);
   position: relative;
   list-style: none;
+  min-height: var(--zd_size35);
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -12,13 +13,13 @@
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
 [dir=ltr] .small {
-  padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
+  padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .small {
-  padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+  padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  padding: var(--zd_size9) var(--zd_size20);
+  padding: var(--zd_size7) var(--zd_size20);
 }
 .large {
   height: var(--zd_size48);
@@ -29,13 +30,14 @@
 [dir=rtl] .large {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
+.value,.multiLineValue {
+  line-height: var(--zd_size20);
+}
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 .multiLineValue{
   word-break: break-word;
-  line-height: var(--zd_size18);
   composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {

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

@@ -14,6 +14,7 @@ import ToggleDropDown from '../../../dropdown/ToggleDropDown/ToggleDropDown';
 
 /** * Methods ** */
 import { debounce } from '@zohodesk/components/lib/utils/debounce';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 
 /** * CSS ** */
 import style from './LookupSearch.module.css';
@@ -104,10 +105,6 @@ class SearchUI extends Component {
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleSearch = debounce(this.handleSearch.bind(this), 500);
   }
-  cancelBubblingEffect(e) {
-    e && e.stopPropagation && e.stopPropagation();
-    e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-  }
   handleSearch() {
     const {
       onSearch
@@ -140,7 +137,7 @@ class SearchUI extends Component {
     const {
       onChange
     } = this.props;
-    this.cancelBubblingEffect(e);
+    cancelBubblingEffect(e);
     onChange && onChange('');
     this.handleSearch();
   }
@@ -196,16 +193,16 @@ class SearchUI extends Component {
       placeHolder: placeHolder,
       value: searchStr,
       onChange: this.handleChange,
-      onClick: this.cancelBubblingEffect,
+      onClick: cancelBubblingEffect,
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: this.handleKeyDown,
-      onMouseDown: this.cancelBubblingEffect,
+      onMouseDown: cancelBubblingEffect,
       dataId: dataId,
       size: "small",
       inputRef: getRef,
       onClear: this.handleClear,
-      onClearMouseDown: this.cancelBubblingEffect
+      onClearMouseDown: cancelBubblingEffect
     })));
   }
 }

package/lib/Drawer/Drawer.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _FreezeLayer = _interopRequireDefault(require("../FreezeLayer/FreezeLayer"));
+var _Common = require("@zohodesk/components/es/utils/Common");
 var _Layout = require("@zohodesk/components/lib/Layout");
 var _Card = require("@zohodesk/components/lib/Card");
 var _FormAction = _interopRequireDefault(require("../FormAction/FormAction"));
@@ -221,7 +222,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
         eleRef: this.createRef
       }, /*#__PURE__*/_react["default"].createElement(_Card.Card, {
         onClick: function onClick(e) {
-          e && e.stopPropagation && e.stopPropagation();
+          (0, _Common.cancelBubblingEffect)(e);
           onBodyClick(e);
         }
       }, childrenWithProps));
@@ -233,7 +234,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
       }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveSender, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         className: styleByResolutions,
         onClick: function onClick(e) {
-          e && e.stopPropagation && e.stopPropagation();
+          (0, _Common.cancelBubblingEffect)(e);
         }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true

package/lib/FreezeLayer/useFreezeLayer.js

@@ -28,9 +28,11 @@ function useFreezeLayer(_ref) {
     isChildActive = _useState4[0],
     setChildActive = _useState4[1];
   var isFreezeLayerEnabled = (0, _react.useRef)(false);
-  function handleClick() {
+  function handleClick(e) {
     if (onClick && !(0, _Common.isTextSelected)()) {
-      onClick();
+      onClick(e);
+    } else {
+      (0, _Common.cancelBubblingEffect)(e);
     }
   }
   function enableFreeze() {

package/lib/Link/Link.js

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
+var _Common = require("@zohodesk/components/es/utils/Common");
 var _LinkModule = _interopRequireDefault(require("./Link.module.css"));
 var _LinkContext = _interopRequireDefault(require("./LinkContext"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -43,14 +44,14 @@ var Link = /*#__PURE__*/function (_React$Component) {
         target = _this$props.target;
       var onCallBack = this.context.options.onCallBack;
       if (e && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
-        e && e.stopPropagation();
+        (0, _Common.cancelBubblingEffect)(e);
         return;
       }
       onClick && onClick(e);
       if (!hasReload && target != '_blank') {
         e && e.preventDefault();
       }
-      e && e.stopPropagation();
+      (0, _Common.cancelBubblingEffect)(e);
       !onClick && onCallBack && onCallBack(urlOutput, href, e);
     }
   }, {

package/lib/ToastMessage/ToastMessage.js

@@ -8,6 +8,7 @@ exports["default"] = ToastMessage;
 var _react = _interopRequireWildcard(require("react"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
+var _Common = require("@zohodesk/components/es/utils/Common");
 var _icons = require("@zohodesk/icons");
 var _Layout = require("@zohodesk/components/lib/Layout");
 var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
@@ -25,10 +26,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function removeClose(e) {
-  e && e.stopPropagation && e.stopPropagation();
-  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-}
 function ToastMessageUI(props) {
   var _useState = (0, _react.useState)(props.messageState),
     _useState2 = _slicedToArray(_useState, 2),
@@ -69,7 +66,7 @@ function ToastMessageUI(props) {
     onClose && onClose();
   }
   function changeMessageState(e) {
-    removeClose(e);
+    (0, _Common.cancelBubblingEffect)(e);
     setMessageState(!messageState);
   }
   var animateClass = isClose ? _ToastMessageModule["default"].rightanimate : _ToastMessageModule["default"].leftanimate;

package/lib/actions/AutoClose.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = AutoClose;
 var _react = _interopRequireWildcard(require("react"));
+var _Common = require("@zohodesk/components/es/utils/Common");
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 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); }
@@ -16,10 +17,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function removeClose(e) {
-  e && e.stopPropagation && e.stopPropagation();
-  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-}
 function AutoClose(props) {
   var Element = props.Element,
     givenClose = props.isClose,
@@ -31,7 +28,7 @@ function AutoClose(props) {
     isClose = _useState2[0],
     setClose = _useState2[1];
   function onClose(e) {
-    removeClose(e);
+    (0, _Common.cancelBubblingEffect)(e);
     onPortalClose && onPortalClose();
   }
   (0, _react.useEffect)(function () {

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -569,7 +569,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         palette = _this$props12.palette,
         getFooter = _this$props12.getFooter,
         customProps = _this$props12.customProps,
-        needMultiLineText = _this$props12.needMultiLineText;
+        needMultiLineText = _this$props12.needMultiLineText,
+        customClass = _this$props12.customClass;
       var _customProps$ToggleDr = customProps.ToggleDropDownProps,
         ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr,
         _customProps$DropBoxP = customProps.DropBoxProps,
@@ -580,6 +581,10 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         ListItemWithIconProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$ListItem2 = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem2 === void 0 ? {} : _customProps$ListItem2;
+      var _customClass$customDr = customClass.customDropBox,
+        customDropBox = _customClass$customDr === void 0 ? '' : _customClass$customDr,
+        _customClass$customLi = customClass.customListBox,
+        customListBox = _customClass$customLi === void 0 ? '' : _customClass$customLi;
       var isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
       var Component = isToggleStateNeeded ? children.type : null,
         componentProps = isToggleStateNeeded ? children.props : null;
@@ -661,7 +666,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           isAnimate: true,
           getRef: getContainerRef,
           customClass: {
-            customDropBoxWrap: _ToggleDropDownModule["default"].dropBoxContainer
+            customDropBoxWrap: _ToggleDropDownModule["default"].dropBoxContainer,
+            customDropBox: customDropBox
           },
           needResponsive: needResponsive,
           isPadding: isPadding,
@@ -707,7 +713,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           scroll: "vertical",
           preventParentScroll: "vertical",
           dataId: "".concat(dataId, "_list"),
-          className: "".concat(tabletMode ? _ToggleDropDownModule["default"].responsivemaxHgt : _ToggleDropDownModule["default"].maxHgt),
+          className: "".concat(tabletMode ? _ToggleDropDownModule["default"].responsivemaxHgt : _ToggleDropDownModule["default"].maxHgt, " ").concat(customListBox),
           eleRef: _this6.scrollContentRef,
           onScroll: _this6.handleScroll,
           role: isSearch ? 'listbox' : undefined,

package/lib/dropdown/ToggleDropDown/props/defaultProps.js

@@ -28,6 +28,7 @@ var defaultProps = {
   customProps: {},
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: {}
 };
 exports.defaultProps = defaultProps;

package/lib/dropdown/ToggleDropDown/props/propTypes.js

@@ -75,6 +75,10 @@ var propTypes = {
     ListItemProps: _propTypes["default"].object
   }),
   preventPopupClose: _propTypes["default"].bool,
-  needMultiLineText: _propTypes["default"].bool
+  needMultiLineText: _propTypes["default"].bool,
+  customClass: _propTypes["default"].shape({
+    customDropBox: _propTypes["default"].string,
+    customListBox: _propTypes["default"].string
+  })
 };
 exports.propTypes = propTypes;

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

@@ -102,7 +102,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         role: role,
         "aria-selected": ariaSelected,
         isCover: false,
-        align: "vertical",
+        align: "baseline",
         alignBox: "row",
         className: "".concat(_StatusListItemModule["default"].list, " ").concat(_StatusListItemModule["default"][size], " ").concat(_StatusListItemModule["default"][palette], " ").concat(active ? _StatusListItemModule["default"].active : highlight && !isDisabled ? _StatusListItemModule["default"].hover : '', " ").concat(autoHover && !isDisabled ? _StatusListItemModule["default"].effect : '', " ").concat(needTick ? _StatusListItemModule["default"].withTick : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? _StatusListItemModule["default"].withBorder : ''),
         dataId: String(value).replace("'", '_'),

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

@@ -3,6 +3,7 @@
   font-size: var(--zd_font_size13);
   position: relative;
   list-style: none;
+  min-height: var(--zd_size35);
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -12,13 +13,13 @@
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
 [dir=ltr] .small {
-  padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
+  padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .small {
-  padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+  padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  padding: var(--zd_size9) var(--zd_size20);
+  padding: var(--zd_size7) var(--zd_size20);
 }
 .large {
   height: var(--zd_size48);
@@ -29,13 +30,14 @@
 [dir=rtl] .large {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
+.value,.multiLineValue {
+  line-height: var(--zd_size20);
+}
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 .multiLineValue{
   word-break: break-word;
-  line-height: var(--zd_size18);
   composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {

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

@@ -13,6 +13,7 @@ var _Layout = require("@zohodesk/components/lib/Layout");
 var _icons = require("@zohodesk/icons");
 var _ToggleDropDown = _interopRequireDefault(require("../../../dropdown/ToggleDropDown/ToggleDropDown"));
 var _debounce = require("@zohodesk/components/lib/utils/debounce");
+var _Common = require("@zohodesk/components/es/utils/Common");
 var _LookupSearchModule = _interopRequireDefault(require("./LookupSearch.module.css"));
 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); }
@@ -135,12 +136,6 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
     return _this2;
   }
   _createClass(SearchUI, [{
-    key: "cancelBubblingEffect",
-    value: function cancelBubblingEffect(e) {
-      e && e.stopPropagation && e.stopPropagation();
-      e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
-    }
-  }, {
     key: "handleSearch",
     value: function handleSearch() {
       var onSearch = this.props.onSearch;
@@ -172,7 +167,7 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
     key: "handleClear",
     value: function handleClear(e) {
       var onChange = this.props.onChange;
-      this.cancelBubblingEffect(e);
+      (0, _Common.cancelBubblingEffect)(e);
       onChange && onChange('');
       this.handleSearch();
     }
@@ -229,16 +224,16 @@ var SearchUI = /*#__PURE__*/function (_Component2) {
         placeHolder: placeHolder,
         value: searchStr,
         onChange: this.handleChange,
-        onClick: this.cancelBubblingEffect,
+        onClick: _Common.cancelBubblingEffect,
         onFocus: onFocus,
         onBlur: onBlur,
         onKeyDown: this.handleKeyDown,
-        onMouseDown: this.cancelBubblingEffect,
+        onMouseDown: _Common.cancelBubblingEffect,
         dataId: dataId,
         size: "small",
         inputRef: getRef,
         onClear: this.handleClear,
-        onClearMouseDown: this.cancelBubblingEffect
+        onClearMouseDown: _Common.cancelBubblingEffect
       })));
     }
   }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.251",
+  "version": "1.0.0-beta.253",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -17,7 +17,7 @@
     "LIBRARY"
   ],
   "scripts": {
-    "clean": "react-cli clean lib es coverage",
+    "clean": "react-cli clean lib es coverage assets && mkdir assets",
     "dubCheck": "node dubFinder  node_modules/@zohodesk/components/lib node_modules/@zohodesk/icons/lib node_modules/@zohodesk/variables/lib",
     "build": "react-cli build:component:cmjs",
     "buildlocal": " react-cli build:component:cmjs && npm run rtl",
@@ -44,7 +44,7 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-262",
+    "@zohodesk/components": "1.0.0-alpha-265",
     "@zohodesk/icons": "1.0.0-beta.119",
     "@zohodesk/svg": "1.0.0-beta.54",
     "@zohodesk/virtualizer": "1.0.3",
@@ -55,7 +55,7 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-262",
+    "@zohodesk/components": "1.0.0-alpha-265",
     "@zohodesk/icons": "1.0.0-beta.119",
     "@zohodesk/svg": "1.0.0-beta.54",
     "@zohodesk/virtualizer": "1.0.3",