@zohodesk/components 1.4.17 → 1.4.18

package/es/ListItem/ListItemWithIcon.js

@@ -5,6 +5,9 @@ import { Icon } from '@zohodesk/icons';
 import ListContainer from "./ListContainer";
 import { ListItemWithIconDefaultProps } from "./props/defaultProps";
 import { ListItemWithIcon_Props } from "./props/propTypes";
+/*** Utils ****/
+
+import { renderNode, isRenderable } from '@zohodesk/utils';
 /**** CSS ****/
 
 import style from "./ListItem.module.css";
@@ -69,9 +72,11 @@ export default class ListItemWithIcon extends React.Component {
       disableTitle,
       a11y,
       customClass,
+      customValueRightPlaceholderClass,
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -127,17 +132,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, isRenderable(renderValueRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholderClass
+    }, renderNode(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

@@ -4,6 +4,7 @@ import { Box, Container } from "../Layout";
 import ListContainer from "./ListContainer";
 import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
 import { ListItemWithRadio_Props } from "./props/propTypes";
+import { renderNode, isRenderable } from '@zohodesk/utils';
 import style from "./ListItem.module.css";
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
@@ -62,6 +63,7 @@ export default class ListItemWithRadio extends React.Component {
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -76,7 +78,8 @@ export default class ListItemWithRadio extends React.Component {
     let {
       customListItem = '',
       customRadio = '',
-      customRadioWrap = ''
+      customRadioWrap = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
@@ -115,16 +118,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, isRenderable(renderValueRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholder
+    }, renderNode(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,4 +8,23 @@ describe('ListItem', () => {
     } = render( /*#__PURE__*/React.createElement(ListItem, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItem with renderValueRightPlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      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();
+  });
 });

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

@@ -1,5 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom class 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItem"
+    data-selector-id="listItem"
+    data-test-id="listItem"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="leftBox grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="customValueRightPlaceholderClass shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div>
+            Custom Placeholder
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItem"
+    data-selector-id="listItem"
+    data-test-id="listItem"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="leftBox grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div>
+            Custom Placeholder
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`ListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS align center 1`] = `
+exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -12,19 +12,19 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
     tabindex="0"
   >
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -32,13 +32,14 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
           List
         </div>
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="customValueRightPlaceholderClass shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
-          data-title="secondaryValue"
         >
-          secondaryValue
+          <div>
+            Custom Placeholder
+          </div>
         </div>
       </div>
     </div>
@@ -46,7 +47,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
 </DocumentFragment>
 `;
 
-exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS align end 1`] = `
+exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderNode 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -58,19 +59,19 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
     tabindex="0"
   >
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -78,13 +79,14 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
           List
         </div>
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
-          data-title="secondaryValue"
         >
-          secondaryValue
+          <div>
+            Custom Placeholder
+          </div>
         </div>
       </div>
     </div>
@@ -92,7 +94,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
 </DocumentFragment>
 `;
 
-exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
+exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS align center 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -104,41 +106,87 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
     tabindex="0"
   >
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           List
         </div>
+      </div>
+      <div
+        class="secondaryField secondaryValue shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="secondaryValue"
+      >
+        secondaryValue
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS align end 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithAvatar"
+    data-selector-id="listItemWithAvatar"
+    data-test-id="List_ListItemWithAvatar"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="leftBox grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
-          data-title="secondaryValue"
         >
-          secondaryValue
+          List
         </div>
       </div>
+      <div
+        class="secondaryField secondaryValue shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="secondaryValue"
+      >
+        secondaryValue
+      </div>
     </div>
   </li>
 </DocumentFragment>
 `;
 
-exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS align start 1`] = `
+exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -150,35 +198,81 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
     tabindex="0"
   >
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           List
         </div>
+      </div>
+      <div
+        class="secondaryField secondaryValue shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="secondaryValue"
+      >
+        secondaryValue
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS align start 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithAvatar"
+    data-selector-id="listItemWithAvatar"
+    data-test-id="List_ListItemWithAvatar"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="leftBox grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
-          data-title="secondaryValue"
         >
-          secondaryValue
+          List
         </div>
       </div>
+      <div
+        class="secondaryField secondaryValue shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="secondaryValue"
+      >
+        secondaryValue
+      </div>
     </div>
   </li>
 </DocumentFragment>
@@ -196,19 +290,19 @@ exports[`ListItemWithAvatar rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"