@zohodesk/dot 1.0.0-temp-210 → 1.0.0-temp-187.16

package/lib/FreezeLayer/FreezeLayer.js

@@ -39,8 +39,7 @@ function FreezeLayer(props) {
       forwardRef = props.forwardRef,
       isSvgMask = props.isSvgMask,
       needAutoZindex = props.needAutoZindex,
-      customStyle = props.customStyle,
-      onEnterComplete = props.onEnterComplete;
+      customStyle = props.customStyle;
   var finalStyle = (0, _utils.mergeStyle)(_FreezeLayerModule["default"], customStyle);
 
   var _cssJSLogic = (0, _cssJSLogic2["default"])({
@@ -62,8 +61,7 @@ function FreezeLayer(props) {
   return /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
     name: animationName && animationName,
     isActive: isActive,
-    runOnMount: runOnMount,
-    onEnterComplete: onEnterComplete
+    runOnMount: runOnMount
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: isActive && needAutoZindex ? {
       zIndex: "".concat(getNextIndex())
@@ -79,8 +77,7 @@ function FreezeLayer(props) {
     component: _Layout.Container,
     alignBox: "row",
     align: align,
-    dataId: "reactFreezeLayer",
-    onEnterComplete: onEnterComplete
+    dataId: "reactFreezeLayer"
   }, children) : isSvgMask ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     align: align,

package/lib/FreezeLayer/props/defaultProps.js

@@ -11,7 +11,6 @@ var defaultProps = {
   isSvgMask: false,
   customClass: '',
   customStyle: {},
-  needAutoZindex: true,
-  onEnterComplete: {}
+  needAutoZindex: true
 };
 exports.defaultProps = defaultProps;

package/lib/FreezeLayer/props/propTypes.js

@@ -24,8 +24,7 @@ var propTypes = {
   palette: _propTypes["default"].oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: _propTypes["default"].bool,
   customStyle: _propTypes["default"].object,
-  zIndex: _propTypes["default"].oneOf(['3', '5', '7', '10']),
-  onEnterComplete: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func])
+  zIndex: _propTypes["default"].oneOf(['3', '5', '7', '10'])
 };
 exports.propTypes = propTypes;
 var _default = propTypes;

package/lib/Link/__tests__/Link.spec.js

@@ -6,12 +6,138 @@ var _react2 = require("@testing-library/react");
 
 var _Link = _interopRequireDefault(require("../Link"));
 
+var _LinkContext = _interopRequireDefault(require("../LinkContext"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Link', function () {
-  test('rendering the defult props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null)),
-        asFragment = _render.asFragment;
+describe('Link Component Snapshot Tests', function () {
+  var targetOptions = ['_blank', '_self'];
+  var mockContextOptions = {
+    options: {
+      isLink: true,
+      constructURL: jest.fn(function (urlName, urlData) {
+        return "https://zoho.com/".concat(urlName, "/").concat(urlData || '');
+      })
+    }
+  };
+
+  var renderWithProvider = function renderWithProvider(component) {
+    return (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_LinkContext["default"].Provider, {
+      value: mockContextOptions
+    }, component));
+  };
+
+  test('renders with default props', function () {
+    var _renderWithProvider = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], null)),
+        asFragment = _renderWithProvider.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with children content', function () {
+    var _renderWithProvider2 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Click Here")),
+        asFragment = _renderWithProvider2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with href prop', function () {
+    var _renderWithProvider3 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      href: "https://zoho.com"
+    })),
+        asFragment = _renderWithProvider3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(targetOptions)('renders with target - %s', function (target) {
+    var _renderWithProvider4 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      target: target
+    })),
+        asFragment = _renderWithProvider4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and urlData using provider', function () {
+    var _renderWithProvider5 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      urlName: "profile",
+      urlData: {
+        id: 123
+      }
+    })),
+        asFragment = _renderWithProvider5.asFragment;
+
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith('profile', {
+      id: 123
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and undefined urlData using provider', function () {
+    var _renderWithProvider6 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      urlName: "profile"
+    })),
+        asFragment = _renderWithProvider6.asFragment;
+
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith('profile', undefined);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and urlData as undefined using provider', function () {
+    var _renderWithProvider7 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      urlName: undefined,
+      urlData: undefined
+    })),
+        asFragment = _renderWithProvider7.asFragment;
+
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith(undefined, undefined);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with custom className', function () {
+    var _renderWithProvider8 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      className: "custom-link"
+    })),
+        asFragment = _renderWithProvider8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with title prop', function () {
+    var _renderWithProvider9 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      title: "Example Title"
+    })),
+        asFragment = _renderWithProvider9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with download attribute', function () {
+    var _renderWithProvider10 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      download: true
+    })),
+        asFragment = _renderWithProvider10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with rel attribute', function () {
+    var _renderWithProvider11 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      rel: "noopener noreferrer"
+    })),
+        asFragment = _renderWithProvider11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with dataId prop', function () {
+    var _renderWithProvider12 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      dataId: "test-id"
+    })),
+        asFragment = _renderWithProvider12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customProps', function () {
+    var customProps = {
+      'data-custom': 'customValue',
+      'data-id': 'uniqueId'
+    };
+
+    var _renderWithProvider13 = renderWithProvider( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      customProps: customProps
+    })),
+        asFragment = _renderWithProvider13.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });

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

@@ -1,10 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Link rendering the defult props 1`] = `
+exports[`Link Component Snapshot Tests renders with children content 1`] = `
 <DocumentFragment>
   <a
     class="container  "
-    href="javascript:void(0);"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  >
+    Click Here
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with custom className 1`] = `
+<DocumentFragment>
+  <a
+    class="container  custom-link"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with customProps 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    data-custom="customValue"
+    data-id="uniqueId"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with dataId prop 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    data-id="test-id"
+    data-test-id="test-id"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with default props 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with download attribute 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    download=""
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with href prop 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with rel attribute 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with target - _blank 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+    target="_blank"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with target - _self 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+    target="_self"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with title prop 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    data-title="Example Title"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with urlName and undefined urlData using provider 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/profile/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with urlName and urlData as undefined using provider 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with urlName and urlData using provider 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/profile/[object Object]"
     rel="noopener noreferrer"
   />
 </DocumentFragment>

package/lib/Onboarding/Onboarding.js

@@ -41,7 +41,7 @@ var _useOnboarding2 = _interopRequireDefault(require("./hooks/useOnboarding"));
 
 var _General = require("../utils/General");
 
-var _OnboardingModule = _interopRequireDefault(require("./css/Onboarding.module.css"));
+var _CardOnboardingModule = _interopRequireDefault(require("./css/CardOnboarding.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -63,7 +63,7 @@ var Onboarding = function Onboarding(_ref) {
       onPrimaryButtonClick = _ref.onPrimaryButtonClick,
       onSecondaryButtonClick = _ref.onSecondaryButtonClick,
       customProps = _ref.customProps;
-  var style = (0, _useMergeStyle["default"])(_OnboardingModule["default"], customStyle);
+  var style = (0, _useMergeStyle["default"])(_CardOnboardingModule["default"], customStyle);
 
   var _useOnboarding = (0, _useOnboarding2["default"])(),
       state = _useOnboarding.state,

package/lib/VideoLookup/VideoLookup.js

@@ -23,7 +23,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _VideoLookupModule = _interopRequireDefault(require("./css/VideoLookup.module.css"));
+var _VideoLookupStylesModule = _interopRequireDefault(require("./css/VideoLookupStyles.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -46,7 +46,7 @@ function VideoLookup(props) {
       testId = props.testId,
       customId = props.customId,
       videoFormat = props.videoFormat;
-  var style = (0, _utils.mergeStyle)(_VideoLookupModule["default"], customStyle);
+  var style = (0, _utils.mergeStyle)(_VideoLookupStylesModule["default"], customStyle);
   var handleKeyPress = (0, _react.useCallback)(function (e) {
     if (e.keyCode == '27') {
       onClose(e);

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

@@ -218,3 +218,7 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
+
+.lineClampPickListItem{
+  --line-clamp: var(--picklist-field-line-clamp,3);
+}

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -222,13 +222,17 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customClass$listItem = customClass.listItemClass,
           listItemClass = _customClass$listItem === void 0 ? '' : _customClass$listItem,
           _customClass$textBoxI = customClass.textBoxIconWrapperClass,
-          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI;
+          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI,
+          _customClass$dropBoxC = customClass.dropBoxClass,
+          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
       var _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TagWrapp = customProps.TagWrapperProps,
           TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
           _customProps$TagProps = customProps.TagProps,
-          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps,
+          _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       var isEditable = !isReadOnly;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
@@ -306,7 +310,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           boxPosition: boxPosition,
           isPadding: false,
           customClass: {
-            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown
+            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown,
+            customDropBox: dropBoxClass
           },
           dataId: "".concat(dataId, "_dropbox"),
           isResponsivePadding: true,
@@ -338,7 +343,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           var name = item.name,
               isNew = item.isNew,
               listItemProps = item.listItemProps;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: index,
             index: index,
             autoHover: true,
@@ -351,7 +356,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             isDisabled: listDisabled,
             customProps: listItemProps,
             customClass: listItemClass
-          }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          }, ListItemProps), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
             alignBox: "row",
             align: "vertical"
           }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/form/fields/TagsMultiSelect/props/propTypes.js

@@ -62,7 +62,8 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object,
     TagWrapperProps: _propTypes["default"].object,
-    TagProps: _propTypes["default"].object
+    TagProps: _propTypes["default"].object,
+    ListItemProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool
 };

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -25,6 +25,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -100,7 +102,10 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           onSearch = _this$props3.onSearch,
           needSearchFetching = _this$props3.needSearchFetching,
           searchStr = _this$props3.searchStr,
-          i18nKeys = _this$props3.i18nKeys;
+          i18nKeys = _this$props3.i18nKeys,
+          customProps = _this$props3.customProps;
+      var _customProps$ToggleDr = customProps.ToggleDropDownProps,
+          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -109,7 +114,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
-      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({
         title: title,
         options: departmentList,
         value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
@@ -138,7 +143,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
         isNextOptions: isNextOptions,
         onSearch: onSearch,
         needSearchFetching: needSearchFetching
-      });
+      }, ToggleDropDownProps));
     }
   }]);
 

package/lib/list/DepartmentDropDown/props/defaultProps.js

@@ -9,6 +9,7 @@ var defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

package/lib/list/DepartmentDropDown/props/propTypes.js

@@ -31,5 +31,7 @@ var propTypes = (_propTypes = {
   searchEmptyText: _propTypes2["default"].string,
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
+})), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
+  ToggleDropDownProps: _propTypes2["default"].object
 })), _propTypes);
 exports.propTypes = propTypes;

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

@@ -247,7 +247,10 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           renderTargetElement = _this$props4.renderTargetElement,
           renderFooterElement = _this$props4.renderFooterElement,
           _this$props4$a11y = _this$props4.a11y,
-          a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y;
+          a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y,
+          customClass = _this$props4.customClass;
+      var _customClass$dropBoxC = customClass.dropBoxClass,
+          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
       var _a11y$tabIndex = a11y.tabIndex,
           tabIndex = _a11y$tabIndex === void 0 ? 0 : _a11y$tabIndex,
           ariaLabelledby = a11y.ariaLabelledby,
@@ -310,7 +313,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           isAnimate: true,
           getRef: getContainerRef,
           customClass: {
-            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer
+            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer,
+            customDropBox: dropBoxClass
           },
           needResponsive: needResponsive,
           isResponsivePadding: true,

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

@@ -24,6 +24,7 @@ var defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  customClass: {}
 };
 exports.defaultProps = defaultProps;

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

@@ -30,5 +30,7 @@ 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, "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), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _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), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "customClass", _propTypes2["default"].shape({
+  dropBoxClass: _propTypes2["default"].string
+})), _propTypes);
 exports.propTypes = propTypes;

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

@@ -36,9 +36,8 @@
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-.multiLineValue{
-  word-break: break-word;
-  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
+.multiLineValue {
+  composes: lineClamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -90,6 +89,10 @@
 }
 /* Status Type */
 .statusType {
+  --status_listitem_bullet_min_height: var(--zd_size8);
+  --status_listitem_bullet_min_width: var(--zd_size8);
+  min-height: var(--status_listitem_bullet_min_height);
+  min-width: var(--status_listitem_bullet_min_width);
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
   border-radius: 50%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-210",
+  "version": "1.0.0-temp-187.16",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -63,9 +63,9 @@
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.4",
-    "@zohodesk/components": "1.0.0-temp-223",
+    "@zohodesk/components": "../components",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.75",
+    "@zohodesk/icons": "1.0.76",
     "@zohodesk/layout": "^3.1.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
@@ -77,8 +77,8 @@
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/components": "1.0.0-temp-223",
-    "@zohodesk/icons": "1.0.75",
+    "@zohodesk/components": "1.3.1",
+    "@zohodesk/icons": "1.0.76",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",