@zohodesk/dot 1.4.7 → 1.4.8

package/es/v1/form/layout/Section/Section.js

@@ -5,6 +5,7 @@ export default class Section extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       title,
@@ -27,9 +28,9 @@ export default class Section extends Component {
       "data-test-id": formName && formName
     }, this.props.children));
   }
+
 }
-Section.propTypes = propTypes;
-// if (__DOCS__) {
+Section.propTypes = propTypes; // if (__DOCS__) {
 //   Section.docs = {
 //     componentGroup: 'ModuleAddForm'
 //   };

package/es/v1/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -17,9 +17,11 @@ export default function SetupDetailLayout(props) {
     closeText = 'Close'
   } = i18nKeys;
   const [isHelpInfoOpen, setHelpInfoOpen] = useState(false);
+
   function toggleHelpInfo() {
     setHelpInfoOpen(!isHelpInfoOpen);
   }
+
   return /*#__PURE__*/React.createElement(Container, {
     isScrollAttribute: true,
     dataId: dataId
@@ -30,6 +32,7 @@ export default function SetupDetailLayout(props) {
         needHelpInfo: needHelpInfo
       });
     }
+
     return child;
   }), getHelpInfo ? /*#__PURE__*/React.createElement(Box, {
     className: `${style.popup} ${isHelpInfoOpen ? style.open : style.close}`,

package/es/v1/layout/SubtabLayout/SubtabLayout.js

@@ -1,4 +1,5 @@
 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); }
+
 import React from 'react';
 import { SubtabHeader_propTypes, SubtabFooter_propTypes, SubtabContent_propTypes, SubtabLayout_propTypes } from './props/propTypes';
 import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_defaultProps, SubtabLayout_defaultProps } from './props/defaultProps';

package/es/v1/list/AvatarFlip/AvatarFlip.js

@@ -65,9 +65,7 @@ export default function AvatarFlip(props) {
   });
 }
 AvatarFlip.propTypes = propTypes;
-AvatarFlip.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+AvatarFlip.defaultProps = defaultProps; // if (__DOCS__) {
 //   AvatarFlip.docs = {
 //     folderName: 'List',
 //     componentGroup: 'AvatarFlip'

package/es/v1/list/BluePrintStatus/BluePrintStatus.js

@@ -14,9 +14,7 @@ export default function BluePrintStatus(props) {
     iconClass: style.iconStyle
   }));
 }
-BluePrintStatus.propTypes = propTypes;
-
-// if (__DOCS__) {
+BluePrintStatus.propTypes = propTypes; // if (__DOCS__) {
 //   BluePrintStatus.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/v1/list/Comment/Comment.js

@@ -27,9 +27,7 @@ export default function Comment(props) {
   }, count));
 }
 Comment.defaultProps = defaultProps;
-Comment.propTypes = propTypes;
-
-// if (__DOCS__) {
+Comment.propTypes = propTypes; // if (__DOCS__) {
 //   Comment.docs = {
 //     folderName: 'List',
 //     componentGroup: 'Comment'

package/es/v1/list/DepartmentDropDown/DepartmentDropDown.js

@@ -4,6 +4,7 @@ import { propTypes } from './props/propTypes';
 import ToggleDropDown from '../../dropdown/ToggleDropDown/ToggleDropDown';
 import { DepartmentText } from '../SecondaryText';
 import style from '../../../list/DepartmentDropDown/DepartmentDropDown.module.css';
+
 function DepartmentDropDown(props) {
   let {
     departmentName,
@@ -28,16 +29,20 @@ function DepartmentDropDown(props) {
     searchErrorText = 'No results',
     placeholder = 'Search Department'
   } = i18nKeys;
+
   function onClick(e) {
     if (getDepartment) {
       getDepartment(e);
     }
+
     onSearch('');
   }
+
   function handleMoveDepartment(deptId) {
     onSearch('');
     onMoveDepartment(deptId);
   }
+
   return /*#__PURE__*/React.createElement(ToggleDropDown, {
     title: title,
     options: departmentList,
@@ -69,10 +74,10 @@ function DepartmentDropDown(props) {
     needSearchFetching: needSearchFetching
   });
 }
+
 DepartmentDropDown.defaultProps = defaultProps;
 DepartmentDropDown.propTypes = propTypes;
-export default DepartmentDropDown;
-// if (__DOCS__) {
+export default DepartmentDropDown; // if (__DOCS__) {
 //   DepartmentDropDown.docs = {
 //     folderName: 'List',
 //     componentGroup: 'DepartmentDropDown'

package/es/v1/list/DotNew/DotNew.js

@@ -14,9 +14,7 @@ export default function DotNew(props) {
   });
 }
 DotNew.propTypes = propTypes;
-DotNew.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+DotNew.defaultProps = defaultProps; // if (__DOCS__) {
 //   DotNew.docs = {
 //     folderName: 'List',
 //     componentGroup: 'DotNew'

package/es/v1/list/GridStencils/GridStencils.js

@@ -23,9 +23,7 @@ export default function GridStencils(props) {
     className: `${style.lineBar3} ${style.stenListBAr}`
   })) : '');
 }
-GridStencils.propTypes = propTypes;
-
-// if (__DOCS__) {
+GridStencils.propTypes = propTypes; // if (__DOCS__) {
 //   GridStencils.docs = {
 //     folderName: 'List',
 //     componentGroup: 'GridStencils'

package/es/v1/list/Icons/FloatingIcons.js

@@ -15,9 +15,7 @@ export default function FloatingIcons(props) {
   })));
 }
 FloatingIcons.propTypes = FloatingIcons_propTypes;
-FloatingIcons.defaultProps = FloatingIcons_defaultProps;
-
-// if (__DOCS__) {
+FloatingIcons.defaultProps = FloatingIcons_defaultProps; // if (__DOCS__) {
 //   FloatingIcons.docs = {
 //     folderName: 'List',
 //     componentGroup: 'FloatingIcons'

package/es/v1/list/ListLayout/ListLayout.js

@@ -1,4 +1,5 @@
 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); }
+
 import React from 'react';
 import { ListLayout_defaultProps } from './props/defaultProps';
 import { ListLayout_propTypes, Column_propTypes } from './props/propTypes';
@@ -60,9 +61,7 @@ export function Column(props) {
     className: `${className ? className : ''}`
   }, props), children);
 }
-Column.propTypes = Column_propTypes;
-
-// if (__DOCS__) {
+Column.propTypes = Column_propTypes; // if (__DOCS__) {
 //   ListLayout.docs = {
 //     folderName: 'List',
 //     componentGroup: 'ListLayout'

package/es/v1/list/ListStencils/ListStencils.js

@@ -2,10 +2,11 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /*** Components ***/
+
 import Stencils from '@zohodesk/components/es/v1/Stencils/Stencils';
 /*** CSS ***/
+
 import style from '../../../list/ListStencils/ListStencils.module.css';
 export default function ListStencils(props) {
   let {
@@ -35,9 +36,7 @@ export default function ListStencils(props) {
   }))))));
 }
 ListStencils.propTypes = propTypes;
-ListStencils.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+ListStencils.defaultProps = defaultProps; // if (__DOCS__) {
 //   ListStencils.docs = {
 //     folderName: 'List',
 //     componentGroup: 'ListStencils'

package/es/v1/list/SecondaryText/AccountName.js

@@ -1,15 +1,17 @@
 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); }
+
 /* eslint-disable react/forbid-component-props */
+
 /**** Libraries ****/
 import React from 'react';
 import { AccountName_defaultProps } from './props/defaultProps';
 import { AccountName_propTypes } from './props/propTypes';
-
 /**** Components ****/
+
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import Link from '../../Link/Link';
-
 /**** CSS ****/
+
 import style from '../../../list/SecondaryText/SecondaryText.module.css';
 export default function AccountName(props) {
   let {

package/es/v1/list/SecondaryText/ContactName.js

@@ -1,4 +1,5 @@
 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); }
+
 import React from 'react';
 import { ContactName_defaultProps } from './props/defaultProps';
 import { ContactName_propTypes } from './props/propTypes';

package/es/v1/list/SecondaryText/Email.js

@@ -1,14 +1,16 @@
 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); }
+
 /* eslint-disable react/forbid-component-props */
+
 /**** Libraries ****/
 import React from 'react';
 import { Email_defaultProps } from './props/defaultProps';
 import { Email_propTypes } from './props/propTypes';
-
 /**** Components ****/
-import Link from '../../Link/Link';
 
+import Link from '../../Link/Link';
 /**** CSS ****/
+
 import style from '../../../list/SecondaryText/SecondaryText.module.css';
 export default function Email(props) {
   let {

package/es/v1/list/SecondaryText/HappinessRating.js

@@ -1,8 +1,8 @@
 /**** Libraries ****/
 import React from 'react';
 import { HappinessRating_propTypes } from './props/propTypes';
-
 /**** CSS ****/
+
 import style from '../../../list/SecondaryText/SecondaryText.module.css';
 export default function HappinessRating(props) {
   let {

package/es/v1/list/SecondaryText/PhoneNumber.js

@@ -1,14 +1,16 @@
 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); }
+
 /* eslint-disable react/forbid-component-props */
+
 /**** Libraries ****/
 import React from 'react';
 import { PhoneNumber_defaultProps } from './props/defaultProps';
 import { PhoneNumber_propTypes } from './props/propTypes';
-
 /**** Components ****/
-import Link from '../../Link/Link';
 
+import Link from '../../Link/Link';
 /**** CSS ****/
+
 import style from '../../../list/SecondaryText/SecondaryText.module.css';
 export default function PhoneNumber(props) {
   let {

package/es/v1/list/SecondaryText/SecondaryText.js

@@ -1,4 +1,5 @@
 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); }
+
 import React from 'react';
 import { SecondaryText_defaultProps } from './props/defaultProps';
 import { SecondaryText_propTypes } from './props/propTypes';

package/es/v1/list/SecondaryText/TicketId.js

@@ -1,4 +1,5 @@
 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); }
+
 import React from 'react';
 import { TicketId_defaultProps } from './props/defaultProps';
 import { TicketId_propTypes } from './props/propTypes';

package/es/v1/list/SecondaryText/Website.js

@@ -1,13 +1,14 @@
 /* eslint-disable react/forbid-component-props */
+
 /**** Libraries ****/
 import React from 'react';
 import { Website_defaultProps } from './props/defaultProps';
 import { Website_propTypes } from './props/propTypes';
-
 /**** Components ****/
-import ExternalLink from '../../ExternalLink/ExternalLink';
 
+import ExternalLink from '../../ExternalLink/ExternalLink';
 /**** CSS ****/
+
 import style from '../../../list/SecondaryText/SecondaryText.module.css';
 export default function Website(props) {
   let {

package/es/v1/list/SecondryPanel/SecondryPanel.js

@@ -2,11 +2,12 @@
 import React from 'react';
 import { SecondryPanel_defaultProps, SecondryPanelUL_defaultProps, SecondryPanelLI_defaultProps, SecondryPanelItem_defaultProps } from './props/defaultProps';
 import { SecondryPanel_propTypes, SecondryPanelUL_propTypes, SecondryPanelLI_propTypes, SecondryPanelItem_propTypes } from './props/propTypes';
-
 /**** Components ****/
+
 import { Box, Container } from '@zohodesk/components/es/v1/Layout';
 import Dot from '../Dot/Dot';
 /**** CSS ****/
+
 import style from '../../../list/SecondryPanel/SecondryPanel.module.css';
 export default function SecondryPanel(props) {
   let {
@@ -46,8 +47,7 @@ export function SecondryPanelLI(props) {
   } = props;
   return /*#__PURE__*/React.createElement(Box, {
     flexible: true,
-    dataId: dataId
-    // eslint-disable-next-line react/forbid-component-props
+    dataId: dataId // eslint-disable-next-line react/forbid-component-props
     ,
     className: className,
     adjust: true,
@@ -77,8 +77,7 @@ export function SecondryPanelItem(props) {
     flexible: true,
     shrink: clipped,
     className: `${clipped ? style.dottedStyle : ''}`
-  }, children), isDot ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Dot
-  // eslint-disable-next-line react/forbid-component-props
+  }, children), isDot ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Dot // eslint-disable-next-line react/forbid-component-props
   , {
     className: `${dotClass ? dotClass : ''}`,
     spacingType: dotSpacingType

package/es/v1/list/Subject/Subject.js

@@ -1,4 +1,5 @@
 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); }
+
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -8,6 +9,7 @@ export default class Subject extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       text,
@@ -44,11 +46,10 @@ export default class Subject extends Component {
       "data-test-id": dataId
     }, TextProps), text));
   }
+
 }
 Subject.propTypes = propTypes;
-Subject.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+Subject.defaultProps = defaultProps; // if (__DOCS__) {
 //   Subject.docs = {
 //     folderName: 'List',
 //     componentGroup: 'Subject'

package/es/v1/list/TagNew/TagNew.js

@@ -6,6 +6,7 @@ export default class TagNew extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       className,
@@ -21,11 +22,10 @@ export default class TagNew extends Component {
       "data-test-id": dataId
     }, text);
   }
+
 }
 TagNew.propTypes = propTypes;
-TagNew.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+TagNew.defaultProps = defaultProps; // if (__DOCS__) {
 //   TagNew.docs = {
 //     folderName: 'List',
 //     componentGroup: 'TagNew'

package/es/v1/list/Thread/Thread.js

@@ -8,6 +8,7 @@ export default class Thread extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       count: threadCount,
@@ -31,11 +32,10 @@ export default class Thread extends Component {
       className: style.count
     }, count));
   }
+
 }
 Thread.propTypes = propTypes;
-Thread.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+Thread.defaultProps = defaultProps; // if (__DOCS__) {
 //   Thread.docs = {
 //     folderName: 'List',
 //     componentGroup: 'Thread'

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -19,6 +19,7 @@ import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/Custom
 import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 import style from '../../../../list/status/StatusDropdown/StatusDropdown.module.css';
+
 function StatusDropdown(props) {
   let {
     value,
@@ -88,40 +89,49 @@ function StatusDropdown(props) {
   let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
   let containerClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
   let ariaTitleId = getAriaId();
+
   function emptySearchSVG() {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
   }
+
   function handleInputRef(el) {
     hiddenInput.current = el;
   }
+
   function itemRef(ele, index, id) {
     dropdown.current[`suggestion_${id}`] = ele;
   }
+
   function searchInputRef(el) {
     searchInput.current = el;
   }
+
   function handleTogglePopup(e) {
     !isPopupOpen && onSelectLabel && onSelectLabel(e);
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e, boxPosition);
   }
+
   function scrollContentRef(el) {
     if (isPopupOpen) {
       optionsContainer.current = el;
     }
   }
+
   function onSelect(element, e) {
     onClick && onClick(e, element);
     onTogglePopup && onTogglePopup(isPopupOpen);
     togglePopup(e);
   }
+
   function handleKeyDown(e) {
     let {
       keyCode
     } = e;
     let totalIndex = optionsList.length;
+
     if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
     }
@@ -135,21 +145,27 @@ function StatusDropdown(props) {
             if (selectedIndex === totalIndex - 3) {
               isNextOptions && getNextOptions && getNextOptions();
             }
+
             setSelectedIndex(selectedIndex + 1);
           }
+
           break;
+
         case 38:
           if (selectedIndex === 0) {
             setSelectedIndex(totalIndex - 1);
           } else {
             setSelectedIndex(selectedIndex - 1);
           }
+
           break;
+
         case 13:
           onClick && onClick(optionsList[selectedIndex].name, e);
           onTogglePopup && onTogglePopup(isPopupOpen);
           togglePopup(e, boxPosition);
           break;
+
         default:
           break;
       }
@@ -159,29 +175,35 @@ function StatusDropdown(props) {
       }
     }
   }
+
   function searchList(value) {
     let foptions = options.filter(dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1);
     return foptions;
   }
+
   function handleChange(value, e) {
     let foptions = searchList(value);
     setSearchString(value);
     setSelectedIndex(-1);
     setOptionsList(foptions);
   }
+
   function onSearchClear() {
     let foptions = searchList('');
     setSearchString('');
     setOptionsList(foptions);
   }
+
   function handleMouseEnter(id, value, index, e) {
     setSelectedIndex(index);
   }
+
   function handleScroll(e) {
     if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
       isNextOptions && getNextOptions && getNextOptions(e);
     }
   }
+
   function responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -192,6 +214,7 @@ function StatusDropdown(props) {
       }])
     };
   }
+
   useEffectCallOnlyAfterState(() => {
     setOptionsList(options);
   }, [options.length]);
@@ -203,6 +226,7 @@ function StatusDropdown(props) {
     let option = mergeOptions[selectedIndex];
     let id = option && option[idName] || {};
     let selSuggestion = dropdown.current[`suggestion_${id}`];
+
     if (isPopupOpen) {
       optionsContainer.current && scrollTo(optionsContainer.current, selSuggestion);
       onSearchClear();
@@ -342,6 +366,7 @@ function StatusDropdown(props) {
     }, /*#__PURE__*/React.createElement(Loader, null)))));
   }) : null);
 }
+
 StatusDropdown.defaultProps = defaultProps;
 StatusDropdown.propTypes = propTypes;
 const StatusDropdown_Component = Popup(StatusDropdown);

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

@@ -1,13 +1,16 @@
 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); }
+
 /**** Libraries ****/
 import React, { useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /**** Components ****/
+
 import { Icon } from '@zohodesk/icons';
 import CssProvider from '@zohodesk/components/es/v1/Provider/CssProvider';
 /**** CSS ****/
+
 import style from '../../../../list/status/StatusListItem/StatusListItem.module.css';
 export default function StatusListItem(props) {
   let {
@@ -32,7 +35,9 @@ export default function StatusListItem(props) {
     getRef,
     id,
     onClick,
-    onMouseEnter
+    onMouseEnter,
+    customClass,
+    children
   } = props;
   let options = {};
   let {
@@ -40,28 +45,34 @@ export default function StatusListItem(props) {
     ariaSelected,
     ariaHidden = true
   } = a11y;
+
   if (isLink) {
     options.href = href;
     options.target = `_${target}`;
   }
+
   const element = useRef(null);
+
   function getReference(ele) {
     element.current = ele;
     getRef && getRef(element.current, index, id);
   }
+
   function handleClick(e) {
     onClick && onClick(id, value, index, e);
   }
+
   function handleMouseEnter(e) {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
+
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
     "aria-selected": ariaSelected,
     isCover: false,
     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 : ''}`,
+    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 : ''} ${customClass}`,
     dataId: String(value).replace("'", '_'),
     onClick: !isDisabled && handleClick,
     onMouseEnter: handleMouseEnter,
@@ -72,11 +83,16 @@ export default function StatusListItem(props) {
   }, options, a11y), /*#__PURE__*/React.createElement(Box, {
     className: `${style.statusType} ${style[bulletColor]}`
   }), /*#__PURE__*/React.createElement(Box, {
-    "data-title": isDisabled ? null : title,
     flexible: true,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: needMultiLineText ? 'top' : 'vertical'
+  }, /*#__PURE__*/React.createElement(Box, {
+    "data-title": isDisabled ? null : title,
     shrink: true,
     className: needMultiLineText ? style.multiLineValue : style.value
-  }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
+  }, value), /*#__PURE__*/React.createElement(Box, null, children && children))), needTick && active ? /*#__PURE__*/React.createElement("div", {
     className: style.tickIcon,
     "aria-hidden": ariaHidden
   }, /*#__PURE__*/React.createElement(Icon, {

package/es/v1/list/status/StatusListItem/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   needBorder: true,
   bulletColor: 'black',
   a11y: {},
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: ''
 };