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

package/README.md

@@ -2,28 +2,6 @@
 
 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.12
-
-- **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
-
 # 1.4.11
 
 - `@zohodesk/virtualizer` version updated from **1.0.3** to **1.0.13**

package/es/ListItem/ListItem.js

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

package/es/ListItem/ListItemWithAvatar.js

@@ -76,7 +76,6 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps,
       needMultiLineText,
       secondaryValue,
-      renderValueRightPlaceholderNode,
       lhsAlignContent
     } = this.props;
     let {
@@ -88,8 +87,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     let {
       customListItem = '',
       customAvatar = '',
-      customAvatarTeam = '',
-      customValueRightPlaceholder = ''
+      customAvatarTeam = ''
     } = customClass;
     const listA11y = {
       ariaHidden: true,
@@ -150,20 +148,16 @@ export default class ListItemWithAvatar extends React.PureComponent {
       ...AvatarProps
     }))) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.leftBox
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.titleBox
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
     }, value ? /*#__PURE__*/React.createElement(Box, {
-      shrink: true,
-      adjust: true,
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/React.createElement(Box, {
-      className: customValueRightPlaceholder
-    }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : 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,7 +61,6 @@ export default class ListItemWithCheckBox extends React.Component {
       customProps,
       needMultiLineText,
       secondaryValue,
-      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -76,8 +75,7 @@ export default class ListItemWithCheckBox extends React.Component {
     let {
       customListItem = '',
       customCheckBox = '',
-      customLabel = '',
-      customValueRightPlaceholder = ''
+      customLabel = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
@@ -114,20 +112,16 @@ export default class ListItemWithCheckBox extends React.Component {
       }
     }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.leftBox
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.titleBox
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
     }, value ? /*#__PURE__*/React.createElement(Box, {
-      shrink: true,
-      adjust: true,
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/React.createElement(Box, {
-      className: customValueRightPlaceholder
-    }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : 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,11 +69,9 @@ export default class ListItemWithIcon extends React.Component {
       disableTitle,
       a11y,
       customClass,
-      customValueRightPlaceholderClass,
       customProps,
       needMultiLineText,
       secondaryValue,
-      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -129,21 +127,17 @@ export default class ListItemWithIcon extends React.Component {
       className: iconClass
     }) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.leftBox
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.titleBox
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
     }, 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, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/React.createElement(Box, {
-      className: customValueRightPlaceholderClass
-    }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : 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,7 +62,6 @@ export default class ListItemWithRadio extends React.Component {
       customProps,
       needMultiLineText,
       secondaryValue,
-      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -77,8 +76,7 @@ export default class ListItemWithRadio extends React.Component {
     let {
       customListItem = '',
       customRadio = '',
-      customRadioWrap = '',
-      customValueRightPlaceholder = ''
+      customRadioWrap = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
@@ -117,20 +115,16 @@ export default class ListItemWithRadio extends React.Component {
       }
     }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.leftBox
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.titleBox
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
     }, value ? /*#__PURE__*/React.createElement(Box, {
-      shrink: true,
-      adjust: true,
       "data-title": disableTitle ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/React.createElement(Box, {
-      className: customValueRightPlaceholder
-    }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : 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,23 +8,4 @@ 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,23 +43,4 @@ 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,23 +43,4 @@ 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,21 +43,4 @@ 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,23 +43,4 @@ 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,83 +1,5 @@
 // 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