@zohodesk/components 1.2.33 → 1.2.35

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

@@ -1,48 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Radio eleRef prop is a function 1`] = `
-<DocumentFragment>
-  <div
-    aria-checked="false"
-    aria-readonly="false"
-    class="container  pointer hoverEfffect   inflex rowdir both"
-    data-id="RadioComp"
-    data-selector-id="container"
-    data-test-id="RadioComp"
-    role="radio"
-    tabindex="0"
-  >
-    <div
-      class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <input
-        type="hidden"
-        value=""
-      />
-      <label
-        class="radioLabel pointer"
-      >
-        <svg
-          viewBox="0 0 40 40"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            class="rdBox"
-            cx="20"
-            cy="20"
-            r="19"
-          />
-        </svg>
-      </label>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`Radio rendering ally ariaChecked true 1`] = `
 <DocumentFragment>
   <div
@@ -907,7 +864,68 @@ exports[`Radio rendering size - small 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Radio rendering the Checked is true 1`] = `
+exports[`Radio rendering the Checked is true for palette - danger 1`] = `
+<DocumentFragment>
+  <div
+    aria-checked="false"
+    aria-readonly="false"
+    class="container active pointer hoverEfffect   flex rowdir both"
+    data-id="RadioComp"
+    data-selector-id="container"
+    data-test-id="RadioComp"
+    role="radio"
+    tabindex="0"
+  >
+    <div
+      class="radio  
+            hoverdanger medium filled centerPathdanger  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <input
+        type="hidden"
+        value=""
+      />
+      <label
+        class="radioLabel pointer"
+      >
+        <svg
+          viewBox="0 0 40 40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            class="rdBox"
+            cx="20"
+            cy="20"
+            r="19"
+          />
+        </svg>
+      </label>
+    </div>
+    <div
+      class="text grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <label
+        class="label title medium default font_default
+          dotted cursor  
+              dangerLabel pointer  "
+        data-id="RadioText_label"
+        data-selector-id="label"
+        data-test-id="RadioText_label"
+        data-title="RadioText"
+      >
+        RadioText
+      </label>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Radio rendering the Checked is true for palette - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
@@ -921,7 +939,7 @@ exports[`Radio rendering the Checked is true 1`] = `
   >
     <div
       class="radio  
-            undefined medium filled undefined  shrinkOff"
+            hoverprimary medium filled centerPathprimary  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -955,7 +973,7 @@ exports[`Radio rendering the Checked is true 1`] = `
       <label
         class="label title medium default font_default
           dotted cursor  
-              undefined pointer  "
+              primaryLabel pointer  "
         data-id="RadioText_label"
         data-selector-id="label"
         data-test-id="RadioText_label"
@@ -1459,7 +1477,68 @@ exports[`Radio rendering the defult props 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Radio rendering the disabled is true 1`] = `
+exports[`Radio rendering the disabled is true for palette - danger 1`] = `
+<DocumentFragment>
+  <div
+    aria-checked="false"
+    aria-readonly="true"
+    class="container  disabled    flex rowdir both"
+    data-id="RadioComp"
+    data-selector-id="container"
+    data-test-id="RadioComp"
+    role="radio"
+    tabindex="-1"
+  >
+    <div
+      class="radio  
+             medium filled centerPathdanger  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <input
+        type="hidden"
+        value=""
+      />
+      <label
+        class="radioLabel disabled"
+      >
+        <svg
+          viewBox="0 0 40 40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            class="rdBox"
+            cx="20"
+            cy="20"
+            r="19"
+          />
+        </svg>
+      </label>
+    </div>
+    <div
+      class="text grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <label
+        class="label title medium default font_default
+          dotted cursor  
+              dangerLabel disabled  "
+        data-id="RadioText_label"
+        data-selector-id="label"
+        data-test-id="RadioText_label"
+        data-title="RadioText"
+      >
+        RadioText
+      </label>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Radio rendering the disabled is true for palette - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
@@ -1473,7 +1552,7 @@ exports[`Radio rendering the disabled is true 1`] = `
   >
     <div
       class="radio  
-             medium filled undefined  shrinkOff"
+             medium filled centerPathprimary  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1507,7 +1586,7 @@ exports[`Radio rendering the disabled is true 1`] = `
       <label
         class="label title medium default font_default
           dotted cursor  
-              undefined disabled  "
+              primaryLabel disabled  "
         data-id="RadioText_label"
         data-selector-id="label"
         data-test-id="RadioText_label"

package/es/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js

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

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResponsiveDropBox rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="main hidden container bottomStart default"
+    data-a11y-focus-main-area="true"
+    data-id="dropBox"
+    data-position="bottomStart"
+    data-selector-id="dropBox"
+    data-test-id="dropBox"
+  >
+    <div
+      class="subContainer bottom_shadow radius defaultPalette"
+      data-id="dropBox_subcontainer"
+      data-selector-id="dropBox_subcontainer"
+      data-test-id="dropBox_subcontainer"
+      tabindex="-1"
+    >
+      <div
+        class="end"
+        data-id="dropBox_arrow"
+        data-selector-id="dropBox_arrow"
+        data-test-id="dropBox_arrow"
+      >
+        <div
+          class="arrowShape"
+        />
+      </div>
+      <div
+        class="flex coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/RippleEffect/__tests__/RippleEffect.spec.js

@@ -33,7 +33,7 @@ describe('RippleEffect', () => {
     }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
     expect(asFragment()).toMatchSnapshot();
   });
-  const hoverTypes = ['default', 'border', 'bg', 'test'];
+  const hoverTypes = ['default', 'border', 'bg'];
   test.each(hoverTypes)('rendering hoverType of- %s', hoverType => {
     const {
       asFragment

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

@@ -30,16 +30,6 @@ exports[`RippleEffect rendering hoverType of- default 1`] = `
 </DocumentFragment>
 `;
 
-exports[`RippleEffect rendering hoverType of- test 1`] = `
-<DocumentFragment>
-  <div
-    class=" effect default border   hoverEffect "
-  >
-    RippleEffect
-  </div>
-</DocumentFragment>
-`;
-
 exports[`RippleEffect rendering isActive is true 1`] = `
 <DocumentFragment>
   <div

package/es/Select/GroupSelect.js

@@ -20,7 +20,7 @@ import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import style from './Select.module.css';
 /**** Methods ****/
 
-import { makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, extractOptionId } from '../utils/dropDownUtils';
+import { makeGetGroupSelectOptions, optionIdGrouping, makeGetGroupSelectFilterSuggestions, extractOptionId, extractOptionIdFromJson } from '../utils/dropDownUtils';
 import { getIsEmptyValue, scrollTo, debounce, getSearchString, findScrollEnd, getKeyValue } from '../utils/Common';
 /* eslint-disable react/no-unused-prop-types */
 
@@ -357,7 +357,7 @@ export class GroupSelectComponent extends PureComponent {
     let {
       id: selected,
       groupId
-    } = extractOptionId(id);
+    } = extractOptionId(id) || extractOptionIdFromJson(id, normalizedAllOptions);
 
     if (!getIsEmptyValue(id) && !isReadOnly) {
       onChange && onChange({

package/es/Select/__tests__/GroupSelect.spec.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import GroupSelect from '../GroupSelect';
+describe('GroupSelect', () => {
+  test('rendering the defult props', () => {
+    const mockOnChange = jest.fn();
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(GroupSelect, {
+      selectedOption: {
+        selectedOption: []
+      },
+      selected: "Groupselecet",
+      emptyMessage: "GroupEmptyMsg",
+      onChange: mockOnChange
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Select/__tests__/Select.spec.js

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

package/es/Select/__tests__/SelectWithAvatar.spec.js

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

package/es/Select/__tests__/SelectWithIcon.spec.js

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

package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GroupSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-id="selectComponent"
+    data-selector-id="groupSelect"
+    data-test-id="selectComponent"
+  >
+    <div
+      class=""
+      data-id="GroupSelect"
+      data-test-id="GroupSelect"
+    >
+      <div
+        class="container effect    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-expanded="false"
+            aria-haspopup="true"
+            aria-owns="1"
+            aria-readonly="true"
+            autocomplete="off"
+            class="  container medium  default  effect  borderColor_default  "
+            data-id="GroupSelect_textBox"
+            data-selector-id="textBoxIcon"
+            data-test-id="GroupSelect_textBox"
+            maxlength="250"
+            placeholder=""
+            readonly=""
+            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 coldir both"
+                data-id="downIcon"
+                data-selector-id="container"
+                data-test-id="downIcon"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-down  arrowIcon  "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="line borderColor_default "
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="container effect  input  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-expanded="false"
+            aria-haspopup="true"
+            aria-label="click to select options"
+            aria-owns="1"
+            aria-readonly="true"
+            autocomplete="off"
+            class=" pointer container medium  default  effect  borderColor_default inputDotted "
+            data-id="selectComponent_textBox"
+            data-selector-id="textBoxIcon"
+            data-test-id="selectComponent_textBox"
+            maxlength="250"
+            placeholder=""
+            readonly=""
+            role="Menuitem"
+            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 both"
+                data-id="containerComponent"
+                data-selector-id="container"
+                data-test-id="containerComponent"
+              >
+                <div
+                  aria-hidden="true"
+                  class="arrowIcon flex cover coldir both"
+                  data-id="selectComponent_downIcon"
+                  data-selector-id="container"
+                  data-test-id="selectComponent_downIcon"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="zd_font_icons basic icon-down    "
+                    data-id="fontIcon"
+                    data-selector-id="fontIcon"
+                    data-test-id="fontIcon"
+                    style="--zd-iconfont-size: var(--zd_font_size7);"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="line borderColor_default "
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectWithAvatar rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper    effect "
+    data-id="selectWithAvatar"
+    data-selector-id="selectWithAvatar"
+    data-test-id="selectWithAvatar"
+  >
+    <div
+      class="container medium borderColor_default   hasBorder flex cover rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <input
+          aria-activedescendant=""
+          aria-controls="1"
+          aria-expanded="false"
+          aria-haspopup="true"
+          aria-owns="1"
+          aria-readonly="true"
+          autocomplete="off"
+          class=" pointer container medium  default  effect  borderColor_default  "
+          data-id="textBox"
+          data-selector-id="textBox"
+          data-test-id="textBox"
+          placeholder=""
+          readonly=""
+          role="combobox"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;