@zohodesk/components 1.2.33 → 1.2.35

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=" wrapper     effect"
+    data-id="multiSelectWithAvatar"
+    data-selector-id="multiSelectWithAvatar"
+    data-test-id="multiSelectWithAvatar"
+  >
+    <div
+      class="container medium borderColor_default  undefined 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"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelectWithAvatar_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelectWithAvatar_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/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectedOptions rendering the basic select options 1`] = `
+<DocumentFragment>
+  <div
+    class="tag medium shrinkOff"
+    data-id="boxComponent"
+    data-selector-id="box"
+    data-test-id="boxComponent"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect    medium lgRadius danger   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="SelectedObject1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        SelectedObject1
+      </div>
+    </div>
+  </div>
+  <div
+    class="tag medium shrinkOff"
+    data-id="boxComponent"
+    data-selector-id="box"
+    data-test-id="boxComponent"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect    medium lgRadius danger   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="SelectedObject2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        SelectedObject2
+      </div>
+    </div>
+  </div>
+  <div
+    class="tag medium shrinkOff"
+    data-id="boxComponent"
+    data-selector-id="box"
+    data-test-id="boxComponent"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect    medium lgRadius danger   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="SelectedObject3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        SelectedObject3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions rendering the defult props 1`] = `<DocumentFragment />`;

package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Suggestions rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="shrinkOff"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    />
+  </div>
+</DocumentFragment>
+`;

package/lib/PopOver/__tests__/PopOver.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _PopOver = _interopRequireDefault(require("../PopOver"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('PopOver', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PopOver["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, "Test"))),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PopOver rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/Radio/__tests__/Radio.spec.js

@@ -48,7 +48,7 @@ describe('Radio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the Checked is true', function () {
+  test.each(palette)('rendering the Checked is true for palette - %s', function (palette) {
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       palette: palette,
       active: true,
@@ -58,7 +58,7 @@ describe('Radio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the disabled is true', function () {
+  test.each(palette)('rendering the disabled is true for palette - %s', function (palette) {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       disabled: true,
       palette: palette,
@@ -225,25 +225,21 @@ describe('Radio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('eleRef prop is a function', function () {
-    // Create a mock function
+  test('getRef prop is a function', function () {
     var mockEleRef = jest.fn();
-
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      eleRef: mockEleRef
-    })),
-        asFragment = _render24.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      getRef: mockEleRef
+    }));
+    expect(mockEleRef).toHaveBeenCalled();
   });
   test('renders with different onClick props', function () {
     var onClickFunction = jest.fn();
 
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       value: "radioValue",
       onChange: onClickFunction
     }))),
-        asFragment = _render25.asFragment;
+        asFragment = _render24.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });

package/lib/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/lib/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('ResponsiveDropBox', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/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/lib/RippleEffect/__tests__/RippleEffect.spec.js

@@ -40,7 +40,7 @@ describe('RippleEffect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var hoverTypes = ['default', 'border', 'bg', 'test'];
+  var hoverTypes = ['default', 'border', 'bg'];
   test.each(hoverTypes)('rendering hoverType of- %s', function (hoverType) {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
       hoverType: hoverType

package/lib/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/lib/Select/GroupSelect.js

@@ -420,9 +420,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isReadOnly = _this$props4.isReadOnly;
       var normalizedAllOptions = this.normalizedAllOptions;
 
-      var _extractOptionId = (0, _dropDownUtils.extractOptionId)(id),
-          selected = _extractOptionId.id,
-          groupId = _extractOptionId.groupId;
+      var _ref = (0, _dropDownUtils.extractOptionId)(id) || (0, _dropDownUtils.extractOptionIdFromJson)(id, normalizedAllOptions),
+          selected = _ref.id,
+          groupId = _ref.groupId;
 
       if (!(0, _Common.getIsEmptyValue)(id) && !isReadOnly) {
         onChange && onChange({
@@ -477,8 +477,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "handleSelectFocus",
     value: function handleSelectFocus(e) {
-      var _ref = e || {},
-          target = _ref.target;
+      var _ref2 = e || {},
+          target = _ref2.target;
 
       target && target.setSelectionRange(target, 0);
     }
@@ -608,8 +608,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
     }
   }, {
     key: "responsiveFunc",
-    value: function responsiveFunc(_ref2) {
-      var mediaQueryOR = _ref2.mediaQueryOR;
+    value: function responsiveFunc(_ref3) {
+      var mediaQueryOR = _ref3.mediaQueryOR;
       return {
         tabletMode: mediaQueryOR([{
           maxWidth: 700
@@ -677,9 +677,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           suggestionGroups = _this$handleFilterSug4.suggestionGroups,
           suggestionOptionIds = _this$handleFilterSug4.suggestionOptionIds;
 
-      var _ref3 = normalizedFormatOptions[selectedId] || {},
-          _ref3$value = _ref3.value,
-          selected = _ref3$value === void 0 ? '' : _ref3$value;
+      var _ref4 = normalizedFormatOptions[selectedId] || {},
+          _ref4$value = _ref4.value,
+          selected = _ref4$value === void 0 ? '' : _ref4$value;
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -765,8 +765,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
-      }, function (_ref4) {
-        var tabletMode = _ref4.tabletMode;
+      }, function (_ref5) {
+        var tabletMode = _ref5.tabletMode;
         return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
           animationStyle: animationStyle,
           boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _GroupSelect = _interopRequireDefault(require("../GroupSelect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('GroupSelect', function () {
+  test('rendering the defult props', function () {
+    var mockOnChange = jest.fn();
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_GroupSelect["default"], {
+      selectedOption: {
+        selectedOption: []
+      },
+      selected: "Groupselecet",
+      emptyMessage: "GroupEmptyMsg",
+      onChange: mockOnChange
+    })),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});