@zohodesk/components 1.4.16 → 1.4.18

package/README.md

@@ -2,7 +2,40 @@
 
 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.15 , 1.4.16
+# 1.4.18
+
+- **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
+  - `searchFields` prop suppored to additional values based search
+  - `ListItemProps` supported under **customProps** prop
+
+- **SelectWithAvatar**
+  - `secondaryField` prop supported to render secondary value inside the options
+  - `searchFields` prop suppored to additional values based search
+  - `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
+
+- **ListItem, ListItemWithAvatar, ListItemWithCheckBox, ListItemWithIcon, ListItemWithRadio**
+  - `renderValueRightPlaceholderNode` prop supported to render elements after the value
+
+# 1.4.17
+
+- **Select, MultiSelect** - Fixed scroll jitter for the highlighted option when the virtualizer is enabled.
+- **Select** - `isAnimate` prop supported
+- `Switch_v1 css` - RTL issue on thumb position fixed.
+
+# 1.4.14, 1.4.15 , 1.4.16
 
 - `Common Css`
   - added ltr class renamed to ltr-zone.
@@ -17,7 +50,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 # 1.4.12
 
 - `TextBox`
-  - The event is passed as the 4th argument to both handleBlur and handleFocus  
+  - The event is passed as the 4th argument to both onBlur and onFocus  
 - `Common Css`
   - added ltr class for change direction to ltr in rtl mode.
 

package/es/Card/__tests__/Card.spec.js

@@ -8,6 +8,54 @@ describe('Card', () => {
     } = render( /*#__PURE__*/React.createElement(Card, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, null, " ", /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isScrollAttribute is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      isScrollAttribute: true
+    }, " ", /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the dataId value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      dataId: "customdataId"
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      customClass: "customClass"
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the htmlId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      htmlId: "customHtmlId"
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the a11y', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      a11y: {
+        role: 'button'
+      }
+    }, /*#__PURE__*/React.createElement(CardContent, null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false', async () => {
     const mockGetNextOptions = jest.fn(() => {
       return new Promise(resolve => {

package/es/Card/__tests__/CardContent.spec.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CardContent } from "../Card";
+describe('CardContent', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, null, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isScrollAttribute is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      isScrollAttribute: true
+    }, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const scroll = ['vertical', 'horizontal', 'both', 'none'];
+  test.each(scroll)('Should render with name - %s', scroll => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      isScrollAttribute: true,
+      scroll: scroll
+    }, /*#__PURE__*/React.createElement("div", null, "Test Animation")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering shrink is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true
+    }, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering customClass is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      customClass: "cardCustomClass"
+    }, "Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const preventParentScroll = ['vertical', 'horizontal', 'both'];
+  test.each(preventParentScroll)('Should render with name - %s', preventParentScroll => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardContent, {
+      isScrollAttribute: true,
+      preventParentScroll: preventParentScroll
+    }, /*#__PURE__*/React.createElement("div", null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Card/__tests__/CardHeader.spec.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CardHeader } from "../Card";
+describe('CardHeader', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isScroll is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, {
+      isScroll: true
+    }, "Children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Children is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, null, "Children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CardHeader, {
+      customClass: "cardHeader-class"
+    }, "Children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -1,5 +1,87 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Card rendering the a11y 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+      role="button"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the children 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+     
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="customClass flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the dataId value 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="customdataId"
+    data-selector-id="container"
+    data-test-id="customdataId"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Card rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -11,6 +93,49 @@ exports[`Card rendering the defult props 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Card rendering the htmlId 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+      id="customHtmlId"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the isScrollAttribute is true 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-scroll="true"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+     
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Card should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false 1`] = `
 <DocumentFragment>
   <div

package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardContent Should render with name - both 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollboth"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - both 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleBoth"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - horizontal 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollx"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - horizontal 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleX"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - none 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollnone"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - vertical 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - vertical 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleY"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering children 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering customClass is true 1`] = `
+<DocumentFragment>
+  <div
+    class="cardCustomClass grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering isScrollAttribute is true 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering shrink is true 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOn scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  />
+</DocumentFragment>
+`;

package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardHeader rendering the Children is true 1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the customClass  1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll cardHeader-class shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  />
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the isScroll is true 1`] = `
+<DocumentFragment>
+  <div
+    class="scroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;

package/es/ListItem/ListItem.js

@@ -7,6 +7,9 @@ import { ListItem_Props } from "./props/propTypes";
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
+/*** Utils ****/
+
+import { renderNode, isRenderable } from '@zohodesk/utils';
 /**** CSS ****/
 
 import style from "./ListItem.module.css";
@@ -71,7 +74,8 @@ export default class ListItem extends React.Component {
       customClass,
       customProps,
       needMultiLineText,
-      secondaryValue
+      secondaryValue,
+      renderValueRightPlaceholderNode
     } = this.props;
     let {
       ListItemProps = {},
@@ -79,7 +83,8 @@ export default class ListItem extends React.Component {
     } = customProps;
     let {
       customListItem = '',
-      customTickIcon = ''
+      customTickIcon = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     const listA11y = {
       ariaHidden: true,
@@ -123,7 +128,9 @@ export default class ListItem extends React.Component {
       shrink: true,
       adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, isRenderable(renderValueRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholder
+    }, renderNode(renderValueRightPlaceholderNode)) : null, children ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: style.children

package/es/ListItem/ListItemWithAvatar.js

@@ -9,6 +9,9 @@ import { ListItemWithAvatar_Props } from "./props/propTypes";
 import Avatar from "../Avatar/Avatar";
 import AvatarTeam from "../AvatarTeam/AvatarTeam";
 import { Icon } from '@zohodesk/icons';
+/*** Utils ****/
+
+import { renderNode, isRenderable } from '@zohodesk/utils';
 /**** CSS ****/
 
 import style from "./ListItem.module.css";
@@ -76,6 +79,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent
     } = this.props;
     let {
@@ -87,7 +91,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
     let {
       customListItem = '',
       customAvatar = '',
-      customAvatarTeam = ''
+      customAvatarTeam = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     const listA11y = {
       ariaHidden: true,
@@ -148,16 +153,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, 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)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, secondaryValue) : null), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,