@zohodesk/dot 1.0.0-temp-224.1 → 1.0.0-temp-187.22

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

@@ -7,6 +7,8 @@ exports.Website_propTypes = exports.TicketId_propTypes = exports.StatusText_prop
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("@zohodesk/components/es/Typography/props/propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var AccountName_propTypes = {
@@ -24,6 +26,8 @@ var AccountName_propTypes = {
   secondaryAccountHref: _propTypes["default"].string,
   secondaryAccountClick: _propTypes["default"].func,
   secondaryAccountText: _propTypes["default"].string,
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig,
   customProps: _propTypes["default"].shape({
     LinkProps: _propTypes["default"].object,
     TextProps: _propTypes["default"].object,
@@ -53,6 +57,8 @@ var ContactName_propTypes = {
     }),
     paidTitle: _propTypes["default"].string
   }),
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig,
   customProps: _propTypes["default"].shape({
     LinkProps: _propTypes["default"].object,
     TextProps: _propTypes["default"].object
@@ -63,6 +69,8 @@ var DepartmentText_propTypes = {
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   dataTitle: _propTypes["default"].string,
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig,
   text: _propTypes["default"].string
 };
 exports.DepartmentText_propTypes = DepartmentText_propTypes;
@@ -76,6 +84,8 @@ var Email_propTypes = {
   title: _propTypes["default"].string,
   urlData: _propTypes["default"].object,
   urlName: _propTypes["default"].string,
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig,
   customProps: _propTypes["default"].shape({
     LinkProps: _propTypes["default"].object,
     TextProps: _propTypes["default"].object
@@ -100,6 +110,8 @@ var PhoneNumber_propTypes = {
   title: _propTypes["default"].string,
   urlData: _propTypes["default"].object,
   urlName: _propTypes["default"].string,
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig,
   customProps: _propTypes["default"].shape({
     LinkProps: _propTypes["default"].object,
     TextProps: _propTypes["default"].object
@@ -111,6 +123,8 @@ var PriorityText_propTypes = {
   color: _propTypes["default"].oneOf(['red', 'green', 'gray', 'orange']),
   dataId: _propTypes["default"].string,
   dataTitle: _propTypes["default"].string,
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig,
   text: _propTypes["default"].string
 };
 exports.PriorityText_propTypes = PriorityText_propTypes;
@@ -120,6 +134,8 @@ var SecondaryText_propTypes = {
   dataTitle: _propTypes["default"].string,
   onClick: _propTypes["default"].func,
   text: _propTypes["default"].string,
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig,
   customProps: _propTypes["default"].shape({
     SecondaryTextProps: _propTypes["default"].object
   })
@@ -131,6 +147,8 @@ var StatusText_propTypes = {
   dataId: _propTypes["default"].string,
   dataTitle: _propTypes["default"].string,
   fontWeight: _propTypes["default"].oneOf(['regular', 'semibold', 'bold']),
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig,
   text: _propTypes["default"].string
 };
 exports.StatusText_propTypes = StatusText_propTypes;
@@ -145,6 +163,8 @@ var TicketId_propTypes = {
   url: _propTypes["default"].string,
   urlData: _propTypes["default"].string,
   urlName: _propTypes["default"].string,
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig,
   customProps: _propTypes["default"].shape({
     TicketIdProps: _propTypes["default"].object,
     LinkProps: _propTypes["default"].object
@@ -158,6 +178,8 @@ var Website_propTypes = {
   isLink: _propTypes["default"].bool,
   target: _propTypes["default"].string,
   text: _propTypes["default"].string,
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig,
   title: _propTypes["default"].string
 };
 exports.Website_propTypes = Website_propTypes;

package/lib/list/Subject/Subject.js

@@ -13,6 +13,10 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typography/Typography"));
+
+var _Common = require("@zohodesk/components/es/utils/Common");
+
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 
 var _cssUtils = require("@zohodesk/components/es/utils/cssUtils");
@@ -27,6 +31,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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); } }
@@ -75,28 +85,45 @@ var Subject = /*#__PURE__*/function (_Component) {
           isDotted = _this$props.isDotted,
           children = _this$props.children,
           customProps = _this$props.customProps,
-          whiteSpace = _this$props.whiteSpace;
+          whiteSpace = _this$props.whiteSpace,
+          isHighlighted = _this$props.isHighlighted,
+          highlightData = _this$props.highlightData;
       var _customProps$LinkProp = customProps.LinkProps,
           LinkProps = _customProps$LinkProp === void 0 ? {} : _customProps$LinkProp,
           _customProps$TextProp = customProps.TextProps,
           TextProps = _customProps$TextProp === void 0 ? {} : _customProps$TextProp;
+
+      var tagAttributesText = _objectSpread(_objectSpread({}, TextProps), {}, {
+        'data-title-wrap': whiteSpace
+      });
+
+      var linkTagAttributes = {
+        'data-title-wrap': whiteSpace
+      };
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
         urlName: urlName,
         href: href,
         urlData: urlData,
         onClick: onClick,
-        className: "".concat(_SubjectModule["default"].subject, " ").concat(isDotted ? _SubjectModule["default"].dotted : '', " ").concat(_cssUtils.whiteSpaceClassMapping[whiteSpace], " ").concat(className, " ").concat(_SubjectModule["default"]["font_".concat(fontWeight)], " ").concat(_SubjectModule["default"].cursorPointer),
-        dataId: dataId,
-        title: text,
-        target: target,
-        "data-title-wrap": whiteSpace
-      }, LinkProps), children ? children : text) : /*#__PURE__*/_react["default"].createElement("span", _extends({
-        className: "".concat(_SubjectModule["default"].subject, " ").concat(isDotted ? _SubjectModule["default"].dotted : '', " ").concat(_cssUtils.whiteSpaceClassMapping[whiteSpace], " ").concat(className, " ").concat(_SubjectModule["default"]["font_".concat(fontWeight)]),
-        "data-title": text,
-        "data-id": dataId,
-        "data-test-id": dataId,
-        "data-title-wrap": whiteSpace
-      }, TextProps), text));
+        target: target
+      }, LinkProps), children ? children : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $tagAttributes_text: linkTagAttributes,
+        $i18n_dataTitle: text,
+        $ui_className: "".concat(_SubjectModule["default"].subject, " ").concat(_cssUtils.whiteSpaceClassMapping[whiteSpace], " ").concat(className, " ").concat(_SubjectModule["default"].cursorPointer),
+        customId: dataId,
+        $flag_dotted: isDotted,
+        $ui_weight: fontWeight,
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
+      }, text)) : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        $tagAttributes_text: tagAttributesText,
+        $ui_className: "".concat(_SubjectModule["default"].subject, " ").concat(className, " ").concat(_cssUtils.whiteSpaceClassMapping[whiteSpace]),
+        $flag_dotted: isDotted,
+        $ui_weight: fontWeight,
+        $i18n_dataTitle: text,
+        customId: dataId,
+        testId: dataId,
+        $ui_highlightConfig: isHighlighted ? highlightData : _Common.DUMMY_OBJECT
+      }, text));
     }
   }]);
 

package/lib/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -2,8 +2,8 @@
 
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_pre  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -11,8 +11,8 @@ exports[`Subject rendering the defult props 1`] = `
 
 exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_breakSpaces  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_breakSpaces"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -20,8 +20,8 @@ exports[`Subject rendering the whiteSpace of -break-spaces 1`] = `
 
 exports[`Subject rendering the whiteSpace of -normal 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_normal  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_normal"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -29,8 +29,8 @@ exports[`Subject rendering the whiteSpace of -normal 1`] = `
 
 exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_nowrap  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_nowrap"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -38,8 +38,8 @@ exports[`Subject rendering the whiteSpace of -nowrap 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_pre  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -47,8 +47,8 @@ exports[`Subject rendering the whiteSpace of -pre 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_preLine  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_preLine"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -56,8 +56,8 @@ exports[`Subject rendering the whiteSpace of -pre-line 1`] = `
 
 exports[`Subject rendering the whiteSpace of -pre-wrap 1`] = `
 <DocumentFragment>
-  <span
-    class="subject dotted whiteSpace_preWrap  font_regular"
+  <div
+    class="dotted font_regular subject  whiteSpace_preWrap"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>

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

@@ -10,6 +10,8 @@ var defaultProps = {
   className: '',
   isDotted: true,
   customProps: {},
-  whiteSpace: 'pre'
+  whiteSpace: 'pre',
+  isHighlighted: false,
+  highlightData: {}
 };
 exports.defaultProps = defaultProps;

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

@@ -7,6 +7,8 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("@zohodesk/components/es/Typography/props/propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
@@ -26,6 +28,9 @@ var propTypes = {
     LinkProps: _propTypes["default"].object,
     TextProps: _propTypes["default"].object
   }),
-  whiteSpace: _propTypes["default"].oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
+  whiteSpace: _propTypes["default"].oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces']),
+  // Highlight props
+  isHighlighted: _propTypes["default"].bool,
+  highlightData: _propTypes2.propTypes.$ui_highlightConfig
 };
 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.js

@@ -135,7 +135,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         "aria-label": ariaLabel,
         "data-a11y-inset-focus": insetFocus,
         isCover: false,
-        align: "baseline",
+        align: "vertical",
         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 : '', " ").concat(customClass),
         dataId: String(value).replace("'", '_'),
@@ -146,6 +146,8 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         "data-title": isDisabled ? disableTitle : null,
         tabindex: isDisabled ? '-1' : '0'
       }, options, a11y), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _StatusListItemModule["default"].contentWrapper
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_StatusListItemModule["default"].statusType, " ").concat(_StatusListItemModule["default"][bulletColor])
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
@@ -163,7 +165,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
-      })) : null);
+      })) : null));
     }
   }]);
 

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

@@ -1,9 +1,16 @@
+.varClass {
+  --statuslistitem_multiline_lineheight: 1.5385;
+  --statuslistitem_font_size: var(--zd_font_size13);
+  --statuslistitem_min_height: var(--zd_size35);
+}
+
 .list {
+  composes: varClass;
   color: var(--zdt_statuslistitem_list_text);
-  font-size: var(--zd_font_size13) ;
+  font-size: var(--statuslistitem_font_size);
   position: relative;
   list-style: none;
-  min-height: var(--zd_size35) ;
+  min-height: var(--statuslistitem_min_height);
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -22,7 +29,7 @@
   padding: var(--zd_size7) var(--zd_size20) ;
 }
 .large {
-  height: var(--zd_size48) ;
+  --statuslistitem_min_height: var(--zd_size48);
 }
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
@@ -36,9 +43,8 @@
 .value {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
-.multiLineValue{
-  word-break: break-word;
-  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
+.multiLineValue {
+  composes: lineClamp from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -88,24 +94,44 @@
 [dir=rtl] .active.withTick {
   padding-left: var(--zd_size39) ;
 }
+.contentWrapper {
+  composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
+  width: 100% ;
+}
 /* Status Type */
-.statusType {
-  width: var(--zd_size8) ;
-  height: var(--zd_size8) ;
+.statusType{
+  position: relative;
+  composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+  align-self: flex-start;
+  min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
+  min-width: var(--zd_size20) ;
+}
+.statusType::after{
+  /* css:validation:ignore */
+  --status_listitem_bullet_min_height: var(--zd_font_size8);
+  /* css:validation:ignore */
+  --status_listitem_bullet_min_width: var(--zd_font_size8);
+
+  content: '';
+  height: var(--status_listitem_bullet_min_height);
+  width: var(--status_listitem_bullet_min_width);
+  /* css:theme-validation:ignore */
   border-radius: 50%;
+  background-color: var(--zdt_statuslistitem_black_bg);
 }
-[dir=ltr] .statusType {
-  margin-right: var(--zd_size13) ;
+[dir=ltr] .statusType::after{
+  margin-right: var(--zd_size12) ;
 }
-[dir=rtl] .statusType {
-  margin-left: var(--zd_size13) ;
+[dir=rtl] .statusType::after{
+  margin-left: var(--zd_size12) ;
 }
-.black {
+
+.black.statusType::after {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
-.orange {
+.orange.statusType::after {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
-.green {
+.green.statusType::after {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-224.1",
+  "version": "1.0.0-temp-187.22",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "sstest": "react-cli sstest",
     "common_package_build": "cd ../common && npm run build && cd ../dot",
     "docs": "npm run css:review && review:props && react-cli docs",
-    "prepublishOnly": "node prePublish.js",
+    "prepublishOnly": "node prePublish.js && npm run css:review  && npm run review:props",
     "postpublish": "node postPublish.js",
     "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib &&  react-cli clean ./package-lock.json &&  react-cli clean ./result.json",
     "download": "npm run downloadOnly  && cd ../ && npm run download",
@@ -73,7 +73,7 @@
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
-    "@zohodesk/components": "1.6.0",
+    "@zohodesk/components": "../components",
     "@zohodesk/hooks": "2.0.6",
     "@zohodesk/icons": "1.1.7",
     "@zohodesk/layout": "^3.1.0",
@@ -89,7 +89,7 @@
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.2.0",
-    "@zohodesk/components": "1.6.0",
+    "@zohodesk/components": "1.6.1",
     "@zohodesk/icons": "1.1.7",
     "@zohodesk/svg": "1.3.1",
     "@zohodesk/virtualizer": "1.0.13",