@zohodesk/components 1.4.17 → 1.4.18

package/lib/utils/dropDownUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.optionIdGrouping = exports.makeObjectConcat = exports.makeGetSelectedValueText = exports.makeGetOptionIdChange = exports.makeGetMultiSelectSelectedOptions = exports.makeGetMultiSelectFilterSuggestions = exports.makeGetIsShowClearIcon = exports.makeGetGroupSelectOptions = exports.makeGetGroupSelectFilterSuggestions = exports.makeFormatOptions = exports.getValueField = exports.getTextField = exports.getSecondaryField = exports.getPrefixText = exports.getOptions = exports.getOptionType = exports.getImageField = exports.getIconSize = exports.getIconName = exports.filterSelectedOptions = exports.extractOptionIdFromJson = exports.extractOptionId = exports.dummyObj = exports.dummyArray = void 0;
+exports.optionIdGrouping = exports.makeObjectConcat = exports.makeGetSelectedValueText = exports.makeGetOptionIdChange = exports.makeGetMultiSelectSelectedOptions = exports.makeGetMultiSelectFilterSuggestions = exports.makeGetIsShowClearIcon = exports.makeGetGroupSelectOptions = exports.makeGetGroupSelectFilterSuggestions = exports.makeFormatOptions = exports.isObjectContainsSearchString = exports.getValueField = exports.getTextField = exports.getSecondaryField = exports.getPrefixText = exports.getOptions = exports.getOptionType = exports.getImageField = exports.getIconSize = exports.getIconName = exports.filterSelectedOptions = exports.extractOptionIdFromJson = exports.extractOptionId = exports.dummyObj = exports.dummyArray = void 0;
 
 var _reselect = require("reselect");
 
@@ -152,6 +152,10 @@ var getListItemProps = function getListItemProps(props) {
   return props.listItemProps || '';
 };
 
+var getlistItemCustomProps = function getlistItemCustomProps(props) {
+  return props.listItemCustomProps || dummyObj;
+};
+
 var defaultSearchFields = ['value'];
 
 var getSearchFields = function getSearchFields(props) {
@@ -176,6 +180,8 @@ var isObjectContainsSearchString = function isObjectContainsSearchString() {
   });
 };
 
+exports.isObjectContainsSearchString = isObjectContainsSearchString;
+
 var getAllowValueFallback = function getAllowValueFallback(props) {
   return props.allowValueFallback !== false;
 };
@@ -265,7 +271,7 @@ var extractOptionIdFromJson = function extractOptionIdFromJson(id, localData) {
 exports.extractOptionIdFromJson = extractOptionIdFromJson;
 
 var makeFormatOptions = function makeFormatOptions() {
-  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback, getSearchFields, getSecondaryField], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback, searchFields, secondaryField) {
+  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getlistItemCustomProps, getAllowValueFallback, getSearchFields, getSecondaryField], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, listItemCustomProps, allowValueFallback, searchFields, secondaryField) {
     var revampOptions = [];
     var remvampOptionIds = [];
     var normalizedAllOptions = {};
@@ -280,7 +286,8 @@ var makeFormatOptions = function makeFormatOptions() {
             impOptionType = option.optionType,
             impIconName = option.iconName,
             impIconSize = option.iconSize,
-            listStyle = option.listItemProps;
+            listStyle = option.listItemProps,
+            listStyleCustomProps = option.listItemCustomProps;
         var id = _typeof(option) === 'object' ? option[impValueField || valueField] : option;
         var value = _typeof(option) === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
         var secondaryValue = _typeof(option) === 'object' ? option[impSecondaryField || secondaryField] : '';
@@ -325,6 +332,10 @@ var makeFormatOptions = function makeFormatOptions() {
             optionDetails.listItemProps = listStyle || listItemProps;
           }
 
+          if (listStyleCustomProps || listItemCustomProps) {
+            optionDetails.listItemCustomProps = listStyleCustomProps || listItemCustomProps;
+          }
+
           normalizedFormatOptions[id] = optionDetails;
           normalizedAllOptions[id] = _objectSpread(_objectSpread({}, option), {}, {
             groupId: prefixText
@@ -480,7 +491,8 @@ var makeGetGroupSelectOptions = function makeGetGroupSelectOptions() {
           groupId = group.id,
           name = group.name,
           valueField = group.valueField,
-          textField = group.textField;
+          textField = group.textField,
+          secondaryField = group.secondaryField;
 
       if (!(0, _Common.getIsEmptyValue)(groupId) && groupIds.indexOf(groupId) === -1) {
         groupIds.push(groupId);
@@ -490,6 +502,7 @@ var makeGetGroupSelectOptions = function makeGetGroupSelectOptions() {
           options: options,
           valueField: valueField,
           textField: textField,
+          secondaryField: secondaryField,
           prefixText: groupId,
           allowValueFallback: allowValueFallback
         }),

package/lib/v1/Switch/__tests__/Switch.spec.js

@@ -8,25 +8,23 @@ var _Switch = _interopRequireDefault(require("../Switch"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Switch', function () {
-  test('rendering the defult props', function () {
+describe('Switch - Snapshot', function () {
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the Switch with Checked', function () {
+  test('Render with isChecked=true', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-      id: "switch",
       isChecked: true
     })),
         asFragment = _render2.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the Switch with Disabled', function () {
+  test('Render with isDisabled=true', function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-      id: "switch",
       isChecked: true,
       isDisabled: true
     })),
@@ -34,4 +32,41 @@ describe('Switch', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with customId and testId', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      customId: "switch-customId",
+      testId: "switch-testId"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tag attributes', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      tagAttributes: {
+        'data-custom-attr': 'true'
+      }
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      a11yAttributes: {
+        role: 'switch'
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      customClass: "my-switch"
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -1,6 +1,179 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Switch rendering the Switch with Checked 1`] = `
+exports[`Switch - Snapshot Render with a11y attributes 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with customId and testId 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="switch-customId"
+    data-selector-id="switch-customId"
+    data-test-id="switch-testId"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <div
+      class="noShrink trackWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <input
+        class="track"
+        role="switch"
+        type="checkbox"
+        value=""
+      />
+      <svg
+        class="thumb commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="42.85%"
+        />
+      </svg>
+      <svg
+        class="offLabel commonSvg"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="37.5%"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Switch - Snapshot Render with isChecked=true 1`] = `
 <DocumentFragment>
   <div
     class="inlineFlex row alignItems_center container medium checked enabled"
@@ -15,7 +188,6 @@ exports[`Switch rendering the Switch with Checked 1`] = `
       <input
         checked=""
         class="track"
-        id="switch"
         role="switch"
         type="checkbox"
         value=""
@@ -45,7 +217,7 @@ exports[`Switch rendering the Switch with Checked 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Switch rendering the Switch with Disabled 1`] = `
+exports[`Switch - Snapshot Render with isDisabled=true 1`] = `
 <DocumentFragment>
   <div
     class="inlineFlex row alignItems_center container medium checked disabled"
@@ -61,7 +233,6 @@ exports[`Switch rendering the Switch with Disabled 1`] = `
         aria-disabled="true"
         checked=""
         class="track"
-        id="switch"
         role="switch"
         type="checkbox"
         value=""
@@ -91,7 +262,7 @@ exports[`Switch rendering the Switch with Disabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Switch rendering the defult props 1`] = `
+exports[`Switch - Snapshot Render with tag attributes 1`] = `
 <DocumentFragment>
   <div
     class="inlineFlex row alignItems_center container medium unChecked enabled"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.17",
+  "version": "1.4.18",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -85,7 +85,7 @@
     "@zohodesk/icons": "1.1.0",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.2.2",
-    "@zohodesk/utils": "1.3.14",
+    "@zohodesk/utils": "1.3.15",
     "@zohodesk/variables": "1.1.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
@@ -106,7 +106,7 @@
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/utils": "1.3.14",
+    "@zohodesk/utils": "1.3.15",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/dotkit": "1.0.3"