@zohodesk/components 1.2.34 → 1.2.36

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -924,7 +924,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
-      isGroupSelect: true
+      isGroupSelect: true,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -998,7 +999,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           role: 'listbox',
           ariaMultiselectable: true
         },
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_dropbox`
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
@@ -1042,7 +1044,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           listItemSize: listItemSize,
           a11y: {
             role: 'option'
-          }
+          },
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -429,7 +429,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isReadOnly: isReadOnly,
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
-      onSelect: this.handleClickSelectedOption
+      onSelect: this.handleClickSelectedOption,
+      dataId: `${dataIdMultiSelectComp}_selectedOptions`
     }), moreCount > 0 ? /*#__PURE__*/React.createElement(Box, {
       className: style.more,
       onClick: this.handleMoreClick,
@@ -438,7 +439,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       flexible: true,
       className: style.wrapper,
       adjust: true,
-      shrink: true
+      shrink: true,
+      dataId: `${dataIdMultiSelectComp}_textBox`
     }, /*#__PURE__*/React.createElement("span", {
       className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
               `
@@ -505,6 +507,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'listbox',
           ariaMultiselectable: true
         },
+        dataId: `${dataIdMultiSelectComp}_dropbox`,
         ...DropBoxProps,
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
@@ -537,6 +540,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         a11y: {
           role: 'option'
         },
+        dataId: `${dataIdMultiSelectComp}_Options`,
         ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/MultiSelect/MobileHeader/__tests__/MobileHeader.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MobileHeader from '../MobileHeader';
+describe('MobileHeader', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MobileHeader, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MobileHeader rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+  >
+    <div
+      class="header flex rowdir alignBetween vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="cardHeading grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      />
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <button
+          class="buttonText bold plainprimary medium"
+          data-id="buttonComp"
+          data-selector-id="button"
+          data-test-id="buttonComp"
+          type="button"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/MultiSelect/MultiSelect.js

@@ -900,7 +900,8 @@ export class MultiSelectComponent extends React.Component {
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
       size: size,
-      palette: palette
+      palette: palette,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -1038,7 +1039,8 @@ export class MultiSelectComponent extends React.Component {
       },
       size: boxSize,
       alignBox: "row",
-      isResponsivePadding: getFooter ? false : true
+      isResponsivePadding: getFooter ? false : true,
+      dataId: `${dataId}_dropbox`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Card, {

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -131,7 +131,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         role: 'listbox'
       },
       isResponsivePadding: true,
-      alignBox: "row"
+      alignBox: "row",
+      dataId: `${dataId}_dropbox`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Card, {

package/es/MultiSelect/SelectedOptions.js

@@ -21,7 +21,8 @@ export default class SelectedOptions extends React.PureComponent {
       onRemove,
       onSelect,
       size,
-      palette
+      palette,
+      dataId
     } = this.props;
     const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
     return /*#__PURE__*/React.createElement(React.Fragment, null, selectedOptions.map(option => {
@@ -49,7 +50,8 @@ export default class SelectedOptions extends React.PureComponent {
       if (optionType === 'avatar') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
-          key: `${id}photoTag`
+          key: `${id}photoTag`,
+          dataId: dataId
         }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           hasAvatar: true,
@@ -58,7 +60,8 @@ export default class SelectedOptions extends React.PureComponent {
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(Box, {
           className: `${style.tag} ${style[size]}`,
-          key: `${id}iconTag`
+          key: `${id}iconTag`,
+          dataId: dataId
         }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
           active: highLightedSelectOptions.indexOf(id) >= 0,
           iconName: icon,
@@ -68,7 +71,8 @@ export default class SelectedOptions extends React.PureComponent {
 
       return /*#__PURE__*/React.createElement(Box, {
         className: `${style.tag} ${style[size]}`,
-        key: `${id}tag`
+        key: `${id}tag`,
+        dataId: dataId
       }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
         active: highLightedSelectOptions.indexOf(id) >= 0
       }));

package/es/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AdvancedGroupMultiSelect from '../AdvancedGroupMultiSelect';
+describe('AdvancedGroupMultiSelect', () => {
+  test('rendering the defult props', () => {
+    const mockOnChange = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AdvancedMultiSelect from '../AdvancedMultiSelect';
+describe('AdvancedMultiSelect', () => {
+  test('rendering the defult props', () => {
+    const mockOnChange = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/EmptyState.spec.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import EmptyState from '../EmptyState';
+describe('EmptyState', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(EmptyState, {
+      searchString: [],
+      suggestions: [],
+      options: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/MultiSelect.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MultiSelect from '../MultiSelect';
+describe('MultiSelect', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/MultiSelectHeader.spec.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MultiSelectHeader from '../MultiSelectHeader';
+describe('MultiSelectHeader', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      suggestions: [Option]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the basic value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      suggestions: [1, 2, 3]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MultiSelectWithAvatar from '../MultiSelectWithAvatar';
+describe('MultiSelectWithAvatar', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelectWithAvatar, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/SelectedOptions.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SelectedOptions from '../SelectedOptions';
+describe('SelectedOptions', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      selectedOptions: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the basic select options', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
+      highLightedSelectOptions: [],
+      selectedOptions: [{
+        value: 'SelectedObject1'
+      }, {
+        value: 'SelectedObject2'
+      }, {
+        value: 'SelectedObject3'
+      }]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/Suggestions.spec.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Suggestions from '../Suggestions';
+describe('Suggestions', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: []
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper  effect"
+    data-id="multiSelect"
+    data-selector-id="advancedGroupMultiSelect"
+    data-test-id="multiSelect"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default  flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdvancedMultiSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper   effect "
+    data-id="multiSelectComp"
+    data-selector-id="advancedMultiSelect"
+    data-test-id="multiSelectComp"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="multiSelectComp_textBox"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_textBox"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="textBoxIcon"
+              data-selector-id="textBoxIcon"
+              data-test-id="textBoxIcon"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmptyState rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=" default"
+    data-id="empty_noOptnsMsg"
+    data-test-id="empty_noOptnsMsg"
+    role="alert"
+  />
+</DocumentFragment>
+`;

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

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper     effect"
+    data-id="multiSelect"
+    data-selector-id="multiSelect"
+    data-test-id="multiSelect"
+  >
+    <div
+      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+          "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-required="true"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="icon  shrinkOff"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                <div
+                  class="flex cover rowdir vCenter"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiSelectHeader rendering the basic value 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder selectAll flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="MultiSelectHeader_selectAll"
+    data-selector-id="listItemWithIcon"
+    data-test-id="MultiSelectHeader_selectAll"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="iconBox shrinkOff"
+      data-id="MultiSelectHeader_selectAll_Icon"
+      data-selector-id="box"
+      data-test-id="MultiSelectHeader_selectAll_Icon"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-androidd    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size15);"
+      />
+    </div>
+    <div
+      class="value grow basis shrinkOn"
+      data-id="MultiSelectHeader_selectAll_Text"
+      data-selector-id="box"
+      data-test-id="MultiSelectHeader_selectAll_Text"
+    >
+      List
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`MultiSelectHeader rendering the defult props 1`] = `<DocumentFragment />`;