@zohodesk/components 1.0.0-temp-134 → 1.0.0-temp-136

package/es/index.js

@@ -1,51 +1,41 @@
-import * as _Layout from './Layout';
-export { _Layout as Layout };
-export { default as AppContainer } from './AppContainer/AppContainer';
-export { default as Accordion } from './Accordion/Accordion';
+export * from './Accordion';
 export { default as Animation } from './Animation/Animation';
-export { default as Card } from './Card/Card';
+export { default as AppContainer } from './AppContainer/AppContainer';
 export { default as Avatar } from './Avatar/Avatar';
 export { default as AvatarTeam } from './AvatarTeam/AvatarTeam';
 export { default as Button } from './Button/Button';
 export { default as Buttongroup } from './Buttongroup/Buttongroup';
-export { default as Switch } from './Switch/Switch';
-export { default as Radio } from './Radio/Radio';
-export { default as Textarea } from './Textarea/Textarea';
-export { default as Label } from './Label/Label';
-export { default as DropDownHeading } from './DropDown/DropDownHeading';
+export * from './Card';
 export { default as CheckBox } from './CheckBox/CheckBox';
+export * from './DateTime';
+export { default as DropBox } from './DropBox/DropBox';
+export * from './DropDown';
+export { default as Heading } from './Heading/Heading';
+export { default as Label } from './Label/Label';
+export * from './Layout';
+export * from './ListItem';
+export { default as Modal } from './Modal/Modal';
+export * from './MultiSelect';
+import * as _PopOver from './PopOver';
+export { _PopOver as PopOver };
+export { default as Popup } from './Popup/Popup';
+import * as _Providers from './Provider';
+export { _Providers as Providers };
+export { default as Radio } from './Radio/Radio';
+export * from './Responsive';
+export { default as ResponsiveDropBox } from './ResponsiveDropBox/ResponsiveDropBox';
 export { default as Ribbon } from './Ribbon/Ribbon';
-export { default as Tag } from './Tag/Tag';
+export { default as RippleEffect } from './RippleEffect/RippleEffect';
+export * from './Select';
+export { default as Stencils } from './Stencils/Stencils';
+export { default as Switch } from './Switch/Switch';
 export * from './Tab';
+export { default as Tag } from './Tag/Tag';
+export { default as Textarea } from './Textarea/Textarea';
 export { default as TextBox } from './TextBox/TextBox';
 export { default as TextBoxIcon } from './TextBoxIcon/TextBoxIcon';
 export { default as Tooltip } from './Tooltip/Tooltip';
-export { default as Select } from './Select/Select';
-export { default as SelectWithIcon } from './Select/SelectWithIcon';
-export { default as GroupSelect } from './Select/GroupSelect';
-export { default as SelectWithAvatar } from './Select/SelectWithAvatar';
-export { default as MultiSelect } from './MultiSelect/MultiSelect';
-export { default as AdvancedMultiSelect } from './MultiSelect/AdvancedMultiSelect';
-export { default as AdvancedGroupMultiSelect } from './MultiSelect/AdvancedGroupMultiSelect';
-export { default as MultiSelectWithAvatar } from './MultiSelect/MultiSelectWithAvatar';
-export { default as DateWidget } from './DateTime/DateWidget';
-export { default as ListItem } from './ListItem/ListItem';
-export { default as ListItemWithIcon } from './ListItem/ListItemWithIcon';
-export { default as ListItemWithCheckBox } from './ListItem/ListItemWithCheckBox';
-export { default as ListItemWithRadio } from './ListItem/ListItemWithRadio';
-export { default as ListItemWithAvatar } from './ListItem/ListItemWithAvatar';
-export { default as DropBox } from './DropBox/DropBox';
-export { default as PopOver } from './PopOver/PopOver';
-export { default as Stencils } from './Stencils/Stencils';
-export { default as Modal } from './Modal/Modal';
-export * from './Responsive';
-export { default as RippleEffect } from './RippleEffect/RippleEffect';
-export { default as PortalLayer } from './deprecated/PortalLayer/PortalLayer';
-export { default as VelocityAnimation } from './VelocityAnimation/VelocityAnimation/VelocityAnimation';
-export { default as VelocityAnimationGroup } from './VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-export { Provider } from './Provider/IdProvider';
-
-//semantic//
-export { default as SemanticButton } from './semantic/Button/Button';
-export { default as ResponsiveDropBox } from './ResponsiveDropBox/ResponsiveDropBox';
-export { default as Heading } from './Heading/Heading';
+import * as _utils from './utils';
+export { _utils as utils };
+export * from './VelocityAnimation';
+export * from './semantic';

package/es/semantic/index.js

@@ -0,0 +1 @@
+export { default as SemanticButton } from './Button/Button';

package/es/utils/css/compileClassNames.js

@@ -0,0 +1,23 @@
+import { dataTypes, isDataTypeOf } from './utils';
+const collectClassNames = function (processedClassNameList) {
+  for (let index = 0; index < (arguments.length <= 1 ? 0 : arguments.length - 1); index++) {
+    let classInfo = index + 1 < 1 || arguments.length <= index + 1 ? undefined : arguments[index + 1];
+    if (!classInfo) {
+      continue;
+    } else if (isDataTypeOf(classInfo, dataTypes.object)) {
+      for (let property in classInfo) {
+        if (Object.hasOwnProperty.call(classInfo, property) && property !== 'undefined' && property !== 'null' && classInfo[property] && !processedClassNameList.includes(property)) {
+          processedClassNameList.push(property);
+        }
+      }
+    }
+  }
+};
+export default function compileClassNames() {
+  let resultClassNameList = [];
+  for (var _len = arguments.length, classinfoList = new Array(_len), _key = 0; _key < _len; _key++) {
+    classinfoList[_key] = arguments[_key];
+  }
+  collectClassNames(resultClassNameList, ...classinfoList);
+  return resultClassNameList.filter(a => a !== '').join(' ');
+}

package/es/utils/css/mergeStyle.js

@@ -0,0 +1,42 @@
+const REPLACER_SYMBOL = '$';
+
+// $ startWith is used for replace the existing style.
+// all other will be append
+
+export default function mergeStyle(defaultStyle, customStyle) {
+  let additionalStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  // if(!Object.keys(defaultStyle).includes('base')) {
+  //   throw new Error(`STYLE CUSTOMIZATION RULE - Your style sheet should have "base" class name for customization`);
+  // }
+
+  return Object.keys(customStyle).reduce((res, next) => {
+    if (next.startsWith(REPLACER_SYMBOL)) {
+      let styleValue = customStyle[next];
+      let styleName = next.replace(REPLACER_SYMBOL, '');
+      if (!defaultStyle[styleName] && !additionalStyle.includes(styleName)) {
+        // return res;
+        throw new Error(`UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${styleName}" is not available in that component style`);
+      }
+      let val = defaultStyle[styleName];
+      Object.keys(res).map(keyName => {
+        let styleKey = res[keyName];
+        if (styleKey.includes(val)) {
+          res[keyName] = styleKey.replace(val, styleValue);
+        }
+      });
+    } else if (defaultStyle[next] || additionalStyle.includes(next)) {
+      let val = defaultStyle[next];
+      Object.keys(res).map(keyName => {
+        if (res[keyName].includes(val)) {
+          res[keyName] = res[keyName] + ' ' + customStyle[next];
+        }
+      });
+    } else if (!defaultStyle[next] && !additionalStyle.includes(next)) {
+      // res[next] = customStyle[next];
+      `UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${next}" is not available in that component style`;
+    }
+    return res;
+  }, {
+    ...defaultStyle
+  });
+}

package/es/utils/css/utils.js

@@ -0,0 +1,23 @@
+export const dataTypes = {
+  number: 'number',
+  array: 'array',
+  string: 'string',
+  object: 'object',
+  bigint: 'bigint',
+  symbol: 'symbol',
+  undefined: 'undefined',
+  function: 'function',
+  boolean: 'boolean'
+};
+export const getDataType = data => {
+  let typeofData = typeof data;
+  let isArrayDataType = Array.isArray(data);
+  if (isArrayDataType) {
+    return dataTypes.array;
+  } else {
+    return dataTypes[typeofData];
+  }
+};
+export const isDataTypeOf = (data, type) => {
+  return getDataType(data) === type;
+};

package/es/utils/dropDownUtils.js

@@ -21,10 +21,9 @@ const getSelectedValue = props => getIsEmptyValue(props.selectedValue) ? '' : pr
 const getSelectedFormatOptions = props => props.selectedFormatOptions || dummyObj;
 export const getPrefixText = props => props.prefixText || '';
 const getIsStartWithSearch = props => props.isStartsWithSearch;
-const getIsNeedTick = props => props.isNeedTick;
 const getDisabledOptions = props => props.disabledOptions || dummyArray;
 const getListItemProps = props => props.listItemProps || '';
-export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getIsNeedTick], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, isNeedTick) => {
+export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch) => {
   const suggestions = [];
   const suggestionIds = [];
   options.forEach(option => {
@@ -35,7 +34,7 @@ export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOpti
     const valueString = getSearchString(value);
     const searchString = getSearchString(searchStr);
     const isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
-    if (selectedOptions.indexOf(id) === -1 && isMatch || isNeedTick) {
+    if (selectedOptions.indexOf(id) === -1 && isMatch) {
       suggestions.push(option);
       suggestionIds.push(id);
     }

package/es/utils/index.js

@@ -0,0 +1,3 @@
+export { default as compileClassNames } from './css/compileClassNames';
+export { default as mergeStyle } from './css/mergeStyle';
+export { stopAllEventPropagation, capitalize, getFullName, bytesToSize, getMemSize, checkIsImageFile, getFullDateString, format12Hour, getDateOnly, doAfterScrollEnd, debounce, throttle, getElementSpace, getSearchString, findScrollEnd, isTextSelected } from './Common';

package/lib/DateTime/DateTimePopupHeader.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Layout = require("../Layout");
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _Heading = _interopRequireDefault(require("../Heading/Heading"));
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -97,7 +97,7 @@ var DateTimePopupHeader = /*#__PURE__*/function (_PureComponent) {
         a11y: {
           tabindex: '0'
         }
-      }), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-GN-dropdown",
         size: "12",
         iconClass: _DateTimeModule["default"].downArrow
@@ -110,7 +110,7 @@ var DateTimePopupHeader = /*#__PURE__*/function (_PureComponent) {
         type: "previousMonth",
         ariaLabel: "prevMonth",
         tabindex: "0"
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-arrowLeft3",
         isBold: true
       })), /*#__PURE__*/_react["default"].createElement(Span, {
@@ -121,7 +121,7 @@ var DateTimePopupHeader = /*#__PURE__*/function (_PureComponent) {
         className: _DateTimeModule["default"].navigation,
         ariaLabel: "nextMonth",
         tabindex: "0"
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-arrowRight3",
         isBold: true
       }))) : null);

package/lib/DateTime/DateWidget.js

@@ -11,7 +11,7 @@ var _defaultProps = require("./props/defaultProps");
 var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 var _DateTime = _interopRequireDefault(require("./DateTime"));
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _Layout = require("../Layout");
 var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
 var _DateWidgetModule = _interopRequireDefault(require("./DateWidget.module.css"));
@@ -962,7 +962,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-datepicker",
         size: "12"
       })))), isReadOnly || isDisabled ? null : /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {

package/lib/DateTime/YearView.js

@@ -10,7 +10,7 @@ var _propTypes = require("./props/propTypes");
 var _defaultProps = require("./props/defaultProps");
 var _virtualizer = require("@zohodesk/virtualizer");
 var _Layout = require("../Layout");
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _Heading = _interopRequireDefault(require("../Heading/Heading"));
 var _YearViewModule = _interopRequireDefault(require("./YearView.module.css"));
 var _dateFormatUtils = require("./dateFormatUtils");
@@ -79,7 +79,7 @@ var Year = /*#__PURE__*/function (_React$PureComponent) {
           tabindex: '0'
         },
         tagName: "h4"
-      })), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      })), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-arrowDownSingle",
         size: "7",
         isBold: true,

package/lib/DateTime/index.js

@@ -9,5 +9,5 @@ Object.defineProperty(exports, "DateWidget", {
     return _DateWidget["default"];
   }
 });
-var _DateWidget = _interopRequireDefault(require("./DateWidget.js"));
+var _DateWidget = _interopRequireDefault(require("./DateWidget"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/DropBox/DropBox.module.css

@@ -65,7 +65,6 @@
 }
 .xxlarge {
   width: var(--zd_size364);
-  max-width: var(--zd_size364);
 }
 .default {
   width: 100%;

package/lib/DropDown/index.js

@@ -0,0 +1,56 @@
+"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
+});
+Object.defineProperty(exports, "DropDown", {
+  enumerable: true,
+  get: function get() {
+    return _DropDown["default"];
+  }
+});
+Object.defineProperty(exports, "DropDownHeading", {
+  enumerable: true,
+  get: function get() {
+    return _DropDownHeading["default"];
+  }
+});
+Object.defineProperty(exports, "DropDownItem", {
+  enumerable: true,
+  get: function get() {
+    return _DropDownItem["default"];
+  }
+});
+Object.defineProperty(exports, "DropDownItemContainer", {
+  enumerable: true,
+  get: function get() {
+    return _DropDown.DropDownItemContainer;
+  }
+});
+Object.defineProperty(exports, "DropDownSearch", {
+  enumerable: true,
+  get: function get() {
+    return _DropDownSearch["default"];
+  }
+});
+Object.defineProperty(exports, "DropDownSeparator", {
+  enumerable: true,
+  get: function get() {
+    return _DropDownSeparator["default"];
+  }
+});
+Object.defineProperty(exports, "DropDownTarget", {
+  enumerable: true,
+  get: function get() {
+    return _DropDown.DropDownTarget;
+  }
+});
+var _DropDown = _interopRequireWildcard(require("./DropDown"));
+var _DropDownHeading = _interopRequireDefault(require("./DropDownHeading"));
+var _DropDownItem = _interopRequireDefault(require("./DropDownItem"));
+var _DropDownSearch = _interopRequireDefault(require("./DropDownSearch"));
+var _DropDownSeparator = _interopRequireDefault(require("./DropDownSeparator"));
+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; }

package/lib/Layout/index.js

@@ -15,16 +15,6 @@ Object.defineProperty(exports, "Container", {
     return _Container["default"];
   }
 });
-exports.Layout = void 0;
 var _Container = _interopRequireDefault(require("./Container"));
 var _Box = _interopRequireDefault(require("./Box"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var Layout = {
-  docs: {
-    componentGroup: 'Layout',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  }
-};
-exports.Layout = Layout;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/ListItem/ListItem.js

@@ -10,7 +10,7 @@ var _Layout = require("../Layout");
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
@@ -91,7 +91,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         dataSelectorId = _this$props4.dataSelectorId,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        isMultiLineNeeded = _this$props4.isMultiLineNeeded;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -129,7 +130,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
       }, ContainerProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
-        className: _ListItemModule["default"].value
+        className: isMultiLineNeeded ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
@@ -139,7 +140,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
       })) : null);

package/lib/ListItem/ListItem.module.css

@@ -74,6 +74,10 @@
 .children {
   composes: dotted from '../common/common.module.css';
 }
+.multiLineValue{
+  line-height: var(--zd_size18);
+  composes: clamp from '../common/common.module.css'
+}
 .iconBox {
   width: var(--zd_size20);
   text-align: center;

package/lib/ListItem/ListItemWithAvatar.js

@@ -12,7 +12,7 @@ var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 var _AvatarTeam = _interopRequireDefault(require("../AvatarTeam/AvatarTeam"));
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
@@ -95,7 +95,8 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         avatarPalette = _this$props4.avatarPalette,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        isMultiLineNeeded = _this$props4.isMultiLineNeeded;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -155,13 +156,13 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         flexible: true,
         shrink: true,
         "data-title": isDisabled ? null : title,
-        className: _ListItemModule["default"].value
+        className: isMultiLineNeeded ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
       })) : null);

package/lib/ListItem/ListItemWithCheckBox.js

@@ -85,7 +85,8 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         disableTitle = _this$props4.disableTitle,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        isMultiLineNeeded = _this$props4.isMultiLineNeeded;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -128,7 +129,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         shrink: true,
         "data-title": isDisabled ? null : title,
-        className: _ListItemModule["default"].value
+        className: isMultiLineNeeded ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value));
     }
   }]);

package/lib/ListItem/ListItemWithIcon.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Layout = require("../Layout");
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
@@ -93,7 +93,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         disableTitle = _this$props4.disableTitle,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        isMultiLineNeeded = _this$props4.isMultiLineNeeded;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -127,7 +128,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         "aria-hidden": true,
         className: _ListItemModule["default"].iconBox,
         dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         iconClass: iconClass,
         name: iconName,
         size: iconSize
@@ -136,7 +137,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
       }) : null, value && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
-        className: _ListItemModule["default"].value,
+        className: isMultiLineNeeded ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
       }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -144,7 +145,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
       })) : null);

package/lib/ListItem/ListItemWithRadio.js

@@ -86,7 +86,8 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         disableTitle = _this$props4.disableTitle,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        isMultiLineNeeded = _this$props4.isMultiLineNeeded;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -130,7 +131,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         shrink: true,
         "data-title": disableTitle ? null : title,
-        className: _ListItemModule["default"].value
+        className: isMultiLineNeeded ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value));
     }
   }]);

package/lib/ListItem/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ListContainer", {
+  enumerable: true,
+  get: function get() {
+    return _ListContainer["default"];
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function get() {
+    return _ListItem["default"];
+  }
+});
+Object.defineProperty(exports, "ListItemWithAvatar", {
+  enumerable: true,
+  get: function get() {
+    return _ListItemWithAvatar["default"];
+  }
+});
+Object.defineProperty(exports, "ListItemWithCheckBox", {
+  enumerable: true,
+  get: function get() {
+    return _ListItemWithCheckBox["default"];
+  }
+});
+Object.defineProperty(exports, "ListItemWithIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ListItemWithIcon["default"];
+  }
+});
+Object.defineProperty(exports, "ListItemWithRadio", {
+  enumerable: true,
+  get: function get() {
+    return _ListItemWithRadio["default"];
+  }
+});
+var _ListContainer = _interopRequireDefault(require("./ListContainer"));
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+var _ListItemWithAvatar = _interopRequireDefault(require("./ListItemWithAvatar"));
+var _ListItemWithCheckBox = _interopRequireDefault(require("./ListItemWithCheckBox"));
+var _ListItemWithIcon = _interopRequireDefault(require("./ListItemWithIcon"));
+var _ListItemWithRadio = _interopRequireDefault(require("./ListItemWithRadio"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }