@zohodesk/components 1.3.0 → 1.3.2

package/README.md

@@ -1,38 +1,21 @@
 # DOT Style Guide
 
-In this Package, we Provide Some Basic Components to Build Web App
-
-- Avatar
-- AvatarTeam
-- Accordion
-- Animation
-- Button
-- Buttongroup
-- Card
-- CheckBox
-- DateTime
-- DropBox
-- Icon
-- Label
-- Layout
-- ListItem
-- MultiSelect
-- Popup
-- Radio
-- Responsive
-- Ribbon
-- Select
-- GroupSelect
-- Stencils
-- Switch
-- Tab
-- Tag
-- Textarea
-- TextBox
-- TextBoxIcon
-- Tooltip
-
-# 1.2.64
+Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
+
+# 1.3.2
+
+- **Popup**
+  - Added `scrollDebounceTime` prop to support debounce control for fixed popup scroll behavior.
+- **VelocityAnimationGroup** - Added support for the following props:
+  - `onEnterComplete` - Callback triggered after enter animation completes.
+  - `onExitComplete` - Callback triggered after exit animation completes.
+  - `postEnterStyles` - Inline styles applied to the element once the enter animation has finished.  
+  
+# 1.3.1
+
+- **dropDownUtils** - The isObjectContainsSearchString function logic has been updated to use some instead of filter, and additional conditions have been added to prevent potential runtime issues.
+
+# 1.3.0
 
 - **AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar** - searchFields prop supported
 -  **AdvancedMultiSelect, MultiSelectWithAvatar** - secondaryField prop supported

package/es/ListItem/ListItem.module.css

@@ -67,7 +67,7 @@
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 .value,
-.children {
+.children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
 .value, .multiLineValue {
@@ -203,6 +203,7 @@
   position: absolute;
   color: var(--listitem_tickicon_color);
   top:50% ;
+  font-size: 0 ;
 }
 
 .tickIcon, .defaultTick, .darkTick {

package/es/ListItem/ListItemWithAvatar.js

@@ -156,7 +156,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
-      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : ''}`
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
     }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,

package/es/ListItem/ListItemWithCheckBox.js

@@ -120,7 +120,7 @@ export default class ListItemWithCheckBox extends React.Component {
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
-      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : ''}`
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
     }, secondaryValue) : null)));
   }
 

package/es/ListItem/ListItemWithIcon.js

@@ -136,7 +136,7 @@ export default class ListItemWithIcon extends React.Component {
       dataId: `${dataIdString}_Text`
     }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
-      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : ''}`
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
     }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,

package/es/ListItem/ListItemWithRadio.js

@@ -123,7 +123,7 @@ export default class ListItemWithRadio extends React.Component {
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
-      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : ''}`
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
     }, secondaryValue) : null)));
   }
 

package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap

@@ -32,7 +32,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -78,7 +78,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -124,7 +124,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -170,7 +170,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -86,7 +86,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -186,7 +186,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -286,7 +286,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -386,7 +386,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap

@@ -32,7 +32,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue  text and LHS ali
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -78,7 +78,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue  text and LHS ali
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -124,7 +124,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -170,7 +170,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS alig
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -85,7 +85,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -184,7 +184,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -283,7 +283,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -382,7 +382,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/es/MultiSelect/Suggestions.js

@@ -27,7 +27,8 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y
+      a11y,
+      needMultiLineText
     } = this.props;
     const {
       ariaParentRole,
@@ -64,6 +65,7 @@ export default class Suggestions extends React.PureComponent {
       });
       const commonProps = {
         isDisabled,
+        needMultiLineText,
         ...listItemCustomProps
       };
 

package/es/MultiSelect/props/defaultProps.js

@@ -166,5 +166,6 @@ export const SelectedOptions_defaultProps = {
   dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
-  a11y: {}
+  a11y: {},
+  needMultiLineText: false
 };

package/es/MultiSelect/props/propTypes.js

@@ -173,6 +173,7 @@ export const Suggestions_propTypes = {
   palette: PropTypes.string,
   selectedOptions: PropTypes.array,
   htmlId: PropTypes.string,
+  needMultiLineText: PropTypes.bool,
   suggestions: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/es/Popup/Popup.js

@@ -89,8 +89,8 @@ const Popup = function (Component) {
       this.getIsOutsideScrollBlocked = this.getIsOutsideScrollBlocked.bind(this);
       this.getNeedArrow = this.getNeedArrow.bind(this);
       this.getCustomPositionOrder = this.getCustomPositionOrder.bind(this);
-      this.handleOpenPopupPositionChange = this.handleOpenPopupPositionChange.bind(this); // this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
-
+      this.handleOpenPopupPositionChange = this.handleOpenPopupPositionChange.bind(this);
+      this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
       this.getCloseOnScrollPopup = this.getCloseOnScrollPopup.bind(this);
       this.handleCloseLastOpenedGroup = this.handleCloseLastOpenedGroup.bind(this);
       this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -107,7 +107,6 @@ const Popup = function (Component) {
       this.updateVisibilityOnIntersection = this.updateVisibilityOnIntersection.bind(this);
       this.handleAddingScrollToUpdatePosition = this.handleAddingScrollToUpdatePosition.bind(this);
       this.handleRemovingScrollToUpdatePosition = this.handleRemovingScrollToUpdatePosition.bind(this);
-      this.updatePositionOnScroll = this.updatePositionOnScroll.bind(this);
       this.setContainerDynamicPositioning = this.setContainerDynamicPositioning.bind(this);
       this.updatePopupState = this.updatePopupState.bind(this);
       this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
@@ -122,8 +121,9 @@ const Popup = function (Component) {
       this.customPositionOrder = customPositionOrder;
       this.scrollDebounceTime = popupScrollDebounceTime;
       this.closeOnScroll = closeOnScrollPopup;
-      this.isOutsideScrollBlock = isOutsideScrollBlock; // const { scrollDebounceTime } = this.getScrollDebounceTime(this);
-      // this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
+      this.isOutsideScrollBlock = isOutsideScrollBlock;
+      const scrollDebounceTime = this.getScrollDebounceTime(this);
+      this.updatePositionOnScroll = scrollDebounceTime > 0 ? debounce(this.updatePositionOnScroll.bind(this), scrollDebounceTime) : this.updatePositionOnScroll.bind(this); // this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
     }
 
     componentDidMount() {
@@ -426,6 +426,7 @@ const Popup = function (Component) {
       const {
         dropElement
       } = this;
+      if (!dropElement) return;
 
       if (entry.isIntersecting === true) {
         this.isTargetElementVisible = true;
@@ -451,12 +452,17 @@ const Popup = function (Component) {
         needPopupArrow
       } = popup;
       return isArrow !== undefined ? isArrow : needPopupArrow;
-    } // getScrollDebounceTime(popup) {
-    //   const { scrollDebounceTime } = popup.props;
-    //   const { scrollDebounceTime: popupScrollDebounceTime } = popup;
-    //   return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
-    // }
+    }
 
+    getScrollDebounceTime(popup) {
+      const {
+        scrollDebounceTime
+      } = popup.props;
+      const {
+        scrollDebounceTime: popupScrollDebounceTime
+      } = popup;
+      return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
+    }
 
     getCloseOnScrollPopup(popup) {
       const {

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -16,6 +16,38 @@ function clearProps(props) {
 export default class VelocityAnimationGroup extends React.Component {
   constructor(props) {
     super(props);
+    this.handleEnterComplete = this.handleEnterComplete.bind(this);
+    this.handleExitComplete = this.handleExitComplete.bind(this);
+  }
+
+  handleEnterComplete(elements) {
+    const {
+      onEnterComplete,
+      postEnterStyles
+    } = this.props;
+
+    if (typeof onEnterComplete === 'function') {
+      onEnterComplete(elements);
+    }
+
+    if (postEnterStyles && typeof postEnterStyles === 'object') {
+      elements.forEach(rootElement => {
+        Object.entries(postEnterStyles).forEach(_ref => {
+          let [cssProperty, cssValue] = _ref;
+          rootElement.style[cssProperty] = cssValue;
+        });
+      });
+    }
+  }
+
+  handleExitComplete(elements) {
+    const {
+      onExitComplete
+    } = this.props;
+
+    if (typeof onExitComplete === 'function') {
+      onExitComplete(elements);
+    }
   }
 
   render() {
@@ -35,7 +67,10 @@ export default class VelocityAnimationGroup extends React.Component {
       enterDelay,
       isCustomized,
       name,
-      needUIPack
+      needUIPack,
+      onEnterComplete,
+      onExitComplete,
+      postEnterStyles
     } = this.props;
     let {
       direction,
@@ -76,13 +111,15 @@ export default class VelocityAnimationGroup extends React.Component {
       animation: isCustomized ? enterAnimationObj[name] : needUIPack ? `transition.${enterName}In` : enterName,
       duration: !isReducedMotion ? enterDuration : 0,
       delay: enterDelay ? enterDelay : 0,
-      display: isFlex ? 'flex' : ''
+      display: isFlex ? 'flex' : '',
+      complete: onEnterComplete || postEnterStyles ? this.handleEnterComplete : undefined
     };
     let exitAnimation = {
       animation: isCustomized ? exitAnimationObj[name] : needUIPack ? `transition.${exitName ? exitName : enterName}Out` : exitName ? exitName : enterName,
       duration: !isReducedMotion ? exitDuration : 0,
       delay: exitDelay ? exitDelay : 0,
-      display: 'none'
+      display: 'none',
+      complete: onExitComplete ? this.handleExitComplete : undefined
     };
     return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
       enter: enterAnimation,

package/es/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js

@@ -15,5 +15,8 @@ export const propTypes = {
   isFlex: PropTypes.bool,
   name: PropTypes.oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
   needUIPack: PropTypes.bool,
-  runOnMount: PropTypes.bool
+  runOnMount: PropTypes.bool,
+  onEnterComplete: PropTypes.func,
+  onExitComplete: PropTypes.func,
+  postEnterStyles: PropTypes.object
 };

package/es/utils/dropDownUtils.js

@@ -43,16 +43,24 @@ const getListItemProps = props => props.listItemProps || '';
 
 const getSearchFields = props => {
   return props.searchFields || ['value'];
-};
+}; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
+//   const matchedFields = searchFields.filter(element => {
+//     return getSearchString(obj[element]).indexOf(searchStr) !== -1
+//   });
+//   return matchedFields.length !== 0;
+// }
+
 
 const isObjectContainsSearchString = function () {
   let searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  let obj = arguments.length > 2 ? arguments[2] : undefined;
-  const matchedFields = searchFields.filter(element => {
-    return getSearchString(obj[element]).indexOf(searchStr) !== -1;
+  let obj = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return searchFields.some(field => {
+    const val = obj[field];
+    if (val === null || val === undefined) return false;
+    const str = getSearchString(val);
+    return str && str.indexOf(searchStr) !== -1;
   });
-  return matchedFields.length !== 0;
 };
 
 const getAllowValueFallback = props => props.allowValueFallback !== false;

package/lib/ListItem/ListItem.module.css

@@ -67,7 +67,7 @@
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 .value,
-.children {
+.children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
 .value, .multiLineValue {
@@ -203,6 +203,7 @@
   position: absolute;
   color: var(--listitem_tickicon_color);
   top:50% ;
+  font-size: 0 ;
 }
 
 .tickIcon, .defaultTick, .darkTick {

package/lib/ListItem/ListItemWithAvatar.js

@@ -208,7 +208,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
-        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : '')
+        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
       }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,

package/lib/ListItem/ListItemWithCheckBox.js

@@ -177,7 +177,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
-        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : '')
+        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
       }, secondaryValue) : null)));
     }
   }]);

package/lib/ListItem/ListItemWithIcon.js

@@ -187,7 +187,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         dataId: "".concat(dataIdString, "_Text")
       }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
-        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : '')
+        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
       }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,

package/lib/ListItem/ListItemWithRadio.js

@@ -180,7 +180,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
-        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : '')
+        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
       }, secondaryValue) : null)));
     }
   }]);

package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap

@@ -32,7 +32,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -78,7 +78,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -124,7 +124,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -170,7 +170,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -86,7 +86,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -186,7 +186,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue  text and
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -286,7 +286,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -386,7 +386,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap

@@ -32,7 +32,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue  text and LHS ali
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -78,7 +78,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue  text and LHS ali
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -124,7 +124,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -170,7 +170,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS alig
           List
         </div>
         <div
-          class="secondaryField  shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"