@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

package/README.md

@@ -2,21 +2,51 @@
 
 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.4.8
+# 1.4.12
 
-  - `ColorSingleSelect`, `ColorMultiSelect`, `InputFieldLine`, `ColoredTag` and `ColorIndicator` components added.
-  
-- **ListItem, Suggestions**
-  - `renderBeforeChildren` prop added.
+- **Select** 
+  - `secondaryField` prop supported to render secondary value inside the options
+  - `searchFields` prop suppored to additional values based search
+
+- **MultiSelect**
+  - `secondaryField` prop supported to render secondary value inside the options
+  - `SuggestionsProps` supported under **customProps** prop
+
+- **SelectWithIcon** 
+  - `secondaryValueKey` prop supported to render secondary value inside the options
+  - `ListItemProps` supported under **customProps** prop
+
+- **SelectWithAvatar**
+  - `secondaryField` prop supported to render secondary value inside the options
+  - `customProps` props supported with **TextBoxProps**, **DropdownSearchTextBoxProps** and **SuggestionsProps**
+
+- **GroupSelect** 
+  - `secondaryField` option supported under **groupedOptions** prop to render secondary value inside the options
+  - `SuggestionsProps` supported under **customProps** prop
 
-- **Select, MultiSelect, SelectedOptions**
- - `renderCustomSelectedValue` prop added.
+# 1.4.11
+
+- `@zohodesk/virtualizer` version updated from **1.0.3** to **1.0.13**
+
+- **Select, MultiSelect**
+  - `isVirtualizerEnabled` prop supported to manage bulk amount of options rendering
+
+- **Suggestions**
+  - **Virtualizer** adopted to manage bulk amount of options rendering with `isVirtualizerEnabled` prop support
+
+# 1.4.10
+
+- **Select, MultiSelect**
+  - Searching with leading spaces is not reflected the results correctly. Issue Fixed.
+
+- **Select**
+  - Fixed performance issue in options formatting caused by unnecessary rendering triggers
 
-- **dropDownUtils**
- - `colorCode` option added in makeFormatOptions method.
+# 1.4.9
 
-- **common/utils**
- - `DUMMY_ARRAY`, `DUMMY_OBJECT` and `DUMMY_FUNCTION` constants added.
+- **MultiSelect , MultiSelectWithAvatar, AdvancedMultiSelect, AdvancedGroupMultiSelect**
+  - `limit` prop supported
+  - `limitReachedMessage` prop supported in i18nKeys
 
 # 1.4.8
 

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -361,12 +361,4 @@
 	
 	/* popover */
 	--zdt_popover_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	
-	/* inputFieldLine */
-	--zdt_inputField_default_border: var(--dot_inputLine);
-	--zdt_inputField_dark_border: hsla(228, 16.20%, calc(35.10% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_inputField_error_border: hsla(1, 63.86%, calc(48.82% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_inputField_hover_border: var(--dot_inputLineHover);
-	--zdt_inputField_dark_active_border: hsla(229, 8.25%, calc(61.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_inputField_focus_border: var(--dot_inputLineFocus);
 }

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -361,12 +361,4 @@
 	
 	/* popover */
 	--zdt_popover_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	
-	/* inputFieldLine */
-	--zdt_inputField_default_border: var(--dot_inputLine);
-	--zdt_inputField_dark_border: hsla(228, 16.20%, calc(35.10% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_inputField_error_border: hsla(1, 75.38%, calc(38.24% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_inputField_hover_border: var(--dot_inputLineHover);
-	--zdt_inputField_dark_active_border: hsla(229, 8.25%, calc(61.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_inputField_focus_border: var(--dot_inputLineFocus);
 }

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -361,12 +361,4 @@
 	
 	/* popover */
 	--zdt_popover_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	
-	/* inputFieldLine */
-	--zdt_inputField_default_border: var(--dot_inputLine);
-	--zdt_inputField_dark_border: hsla(228, 16.20%, calc(35.10% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_inputField_error_border: hsla(1, 63.86%, calc(48.82% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_inputField_hover_border: var(--dot_inputLineHover);
-	--zdt_inputField_dark_active_border: hsla(229, 8.25%, calc(61.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_inputField_focus_border: var(--dot_inputLineFocus);
 }

package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -618,10 +618,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="hourField"
               >
                 <div
-                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-                  data-id="hourField_textBox"
+                  class="container effect  input  flex rowdir"
+                  data-id="containerComponent"
                   data-selector-id="textBoxIcon"
-                  data-test-id="hourField_textBox"
+                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -695,6 +695,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
+                  <div
+                    class="line borderColor_default "
+                  />
                 </div>
               </div>
             </div>
@@ -715,10 +718,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="minuteField"
               >
                 <div
-                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-                  data-id="minuteField_textBox"
+                  class="container effect  input  flex rowdir"
+                  data-id="containerComponent"
                   data-selector-id="textBoxIcon"
-                  data-test-id="minuteField_textBox"
+                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -792,6 +795,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
+                  <div
+                    class="line borderColor_default "
+                  />
                 </div>
               </div>
             </div>
@@ -812,10 +818,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="ampmField"
               >
                 <div
-                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-                  data-id="ampmField_textBox"
+                  class="container effect  input  flex rowdir"
+                  data-id="containerComponent"
                   data-selector-id="textBoxIcon"
-                  data-test-id="ampmField_textBox"
+                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -889,6 +895,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
+                  <div
+                    class="line borderColor_default "
+                  />
                 </div>
               </div>
             </div>

package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -11,10 +11,10 @@ exports[`DateWidget rendering the defult props 1`] = `
       data-test-id="dateWidget_widget"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
-        data-id="dateWidget"
+        class="container effect  placeHolder  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="dateWidget"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -69,6 +69,9 @@ exports[`DateWidget rendering the defult props 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>

package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -27,10 +27,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-            data-id="hourField_textBox"
+            class="container effect  input  flex rowdir"
+            data-id="containerComponent"
             data-selector-id="textBoxIcon"
-            data-test-id="hourField_textBox"
+            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -102,6 +102,9 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="line borderColor_default "
+            />
           </div>
         </div>
       </div>
@@ -122,10 +125,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-            data-id="minuteField_textBox"
+            class="container effect  input  flex rowdir"
+            data-id="containerComponent"
             data-selector-id="textBoxIcon"
-            data-test-id="minuteField_textBox"
+            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -197,6 +200,9 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="line borderColor_default "
+            />
           </div>
         </div>
       </div>
@@ -217,10 +223,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-            data-id="ampmField_textBox"
+            class="container effect  input  flex rowdir"
+            data-id="containerComponent"
             data-selector-id="textBoxIcon"
-            data-test-id="ampmField_textBox"
+            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -292,6 +298,9 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="line borderColor_default "
+            />
           </div>
         </div>
       </div>

package/es/ListItem/ListItem.js

@@ -72,7 +72,7 @@ export default class ListItem extends React.Component {
       customProps,
       needMultiLineText,
       secondaryValue,
-      renderBeforeChildren
+      renderValueRightPlaceholderNode
     } = this.props;
     let {
       ListItemProps = {},
@@ -80,7 +80,8 @@ export default class ListItem extends React.Component {
     } = customProps;
     let {
       customListItem = '',
-      customTickIcon = ''
+      customTickIcon = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     const listA11y = {
       ariaHidden: true,
@@ -120,15 +121,13 @@ export default class ListItem extends React.Component {
       className: style.leftBox
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.titleBox
-    }, renderBeforeChildren ? /*#__PURE__*/React.createElement(Box, {
-      shrink: true,
-      adjust: true,
-      className: style.beforeChild
-    }, renderBeforeChildren) : null, value ? /*#__PURE__*/React.createElement(Box, {
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholder
+    }, renderValueRightPlaceholderNode()) : null, children ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: style.children

package/es/ListItem/ListItem.module.css

@@ -70,12 +70,6 @@
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
-[dir=ltr] .beforeChild{
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .beforeChild{
-  margin-left: var(--zd_size10) ;
-}
 .value, .multiLineValue {
   line-height: 1.5385;
 }

package/es/ListItem/ListItemWithAvatar.js

@@ -76,6 +76,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent
     } = this.props;
     let {
@@ -87,7 +88,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
     let {
       customListItem = '',
       customAvatar = '',
-      customAvatarTeam = ''
+      customAvatarTeam = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     const listA11y = {
       ariaHidden: true,
@@ -148,16 +150,20 @@ export default class ListItemWithAvatar extends React.PureComponent {
       ...AvatarProps
     }))) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column"
+      className: style.leftBox
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      adjust: true,
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholder
+    }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, secondaryValue) : null), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItemWithCheckBox.js

@@ -61,6 +61,7 @@ export default class ListItemWithCheckBox extends React.Component {
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -75,7 +76,8 @@ export default class ListItemWithCheckBox extends React.Component {
     let {
       customListItem = '',
       customCheckBox = '',
-      customLabel = ''
+      customLabel = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
@@ -112,16 +114,20 @@ export default class ListItemWithCheckBox extends React.Component {
       }
     }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column"
+      className: style.leftBox
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      adjust: true,
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholder
+    }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null)));
+    }, secondaryValue) : null));
   }
 
 }

package/es/ListItem/ListItemWithIcon.js

@@ -69,9 +69,11 @@ export default class ListItemWithIcon extends React.Component {
       disableTitle,
       a11y,
       customClass,
+      customValueRightPlaceholderClass,
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -127,17 +129,21 @@ export default class ListItemWithIcon extends React.Component {
       className: iconClass
     }) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column"
+      className: style.leftBox
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value,
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
-    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholderClass
+    }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, secondaryValue) : null), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItemWithRadio.js

@@ -62,6 +62,7 @@ export default class ListItemWithRadio extends React.Component {
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -76,7 +77,8 @@ export default class ListItemWithRadio extends React.Component {
     let {
       customListItem = '',
       customRadio = '',
-      customRadioWrap = ''
+      customRadioWrap = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
@@ -115,16 +117,20 @@ export default class ListItemWithRadio extends React.Component {
       }
     }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column"
+      className: style.leftBox
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      adjust: true,
       "data-title": disableTitle ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholder
+    }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null)));
+    }, secondaryValue) : null));
   }
 
 }

package/es/ListItem/__tests__/ListItem.spec.js

@@ -8,12 +8,23 @@ describe('ListItem', () => {
     } = render( /*#__PURE__*/React.createElement(ListItem, null));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with renderBeforeChildren', () => {
+  test('ListItem with renderValueRightPlaceholderNode', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(ListItem, {
-      renderBeforeChildren: /*#__PURE__*/React.createElement("span", null, "Before children")
-    }, "Content"));
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItem with renderValueRightPlaceholderNode & it\'s custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder"),
+      customClass: {
+        customValueRightPlaceholder: "customValueRightPlaceholderClass"
+      }
+    }));
     expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -43,4 +43,23 @@ describe('ListItemWithAvatar', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithAvatar with renderValueRightPlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with renderValueRightPlaceholderNode & it\'s custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder"),
+      customClass: {
+        customValueRightPlaceholder: "customValueRightPlaceholderClass"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -43,4 +43,23 @@ describe('ListItemWithCheckBox', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithCheckBox with renderValueRightPlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with renderValueRightPlaceholderNode & it\'s custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder"),
+      customClass: {
+        customValueRightPlaceholder: "customValueRightPlaceholderClass"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -43,4 +43,21 @@ describe('ListItemWithIcon', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithIcon with renderValueRightPlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with renderValueRightPlaceholderNode & it\'s custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder"),
+      customValueRightPlaceholderClass: "customValueRightPlaceholderClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -43,4 +43,23 @@ describe('ListItemWithRadio', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithRadio with renderValueRightPlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with renderValueRightPlaceholderNode & it\'s custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder"),
+      customClass: {
+        customValueRightPlaceholder: "customValueRightPlaceholderClass"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });