@zohodesk/components 1.0.0-test-252 → 1.1.0

package/lib/MultiSelect/__tests__/MultiSelect.spec.js

@@ -1,14 +1,18 @@
 "use strict";
 
 var _expect = _interopRequireDefault(require("expect"));
+
 var _MultiSelect = _interopRequireDefault(require("../MultiSelect"));
+
 var _Tag = _interopRequireDefault(require("../../Tag/Tag"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 /* eslint-disable no-undef */
+
 /**** Libraries ****/
 
 /**** Components ****/
-
 describe('MultiSelect component conditions', function () {
   it('Should show loading and hide loading', function (cb) {
     var resolveFunc = null;
@@ -16,28 +20,29 @@ describe('MultiSelect component conditions', function () {
       resolveFunc = res;
     });
     var searchDebounceTime = 0;
+
     var _setup = setup(_MultiSelect["default"], {
-        onSearch: jest.fn(function () {
-          return newPromise;
-        }),
-        needSearch: true,
-        searchDebounceTime: searchDebounceTime,
-        emptyMessage: '',
-        onChange: jest.fn(),
-        options: [],
-        selectedOptions: [],
-        isPopupOpen: true
+      onSearch: jest.fn(function () {
+        return newPromise;
       }),
-      renderedDOM = _setup.renderedDOM,
-      props = _setup.props;
+      needSearch: true,
+      searchDebounceTime: searchDebounceTime,
+      emptyMessage: '',
+      onChange: jest.fn(),
+      options: [],
+      selectedOptions: [],
+      isPopupOpen: true
+    }),
+        renderedDOM = _setup.renderedDOM,
+        props = _setup.props;
+
     var searchBox = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'multiSelect_textBox');
     TestUtils.Simulate.change(searchBox, {
       target: {
         value: 'value changed'
       }
-    });
+    }); //
 
-    //
     setTimeout(function () {
       (0, _expect["default"])(props.onSearch).toHaveBeenCalled();
       (0, _expect["default"])(props.onSearch.mock.calls[0][0]).toEqual('value changed');
@@ -49,19 +54,18 @@ describe('MultiSelect component conditions', function () {
         (0, _expect["default"])(loadingEleArr.length).toBe(0);
         cb();
       });
-    }, searchDebounceTime);
-    //
+    }, searchDebounceTime); //
   });
-
   it('Should display searchEmptyMessage', function () {
     var _setup2 = setup(_MultiSelect["default"], {
-        emptyMessage: '',
-        onChange: jest.fn(),
-        options: [],
-        selectedOptions: [],
-        isPopupOpen: true
-      }),
-      renderedDOM = _setup2.renderedDOM;
+      emptyMessage: '',
+      onChange: jest.fn(),
+      options: [],
+      selectedOptions: [],
+      isPopupOpen: true
+    }),
+        renderedDOM = _setup2.renderedDOM;
+
     var searchBox = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'multiSelect_textBox');
     TestUtils.Simulate.change(searchBox, {
       target: {
@@ -73,86 +77,93 @@ describe('MultiSelect component conditions', function () {
   });
   it('Should display noOptionsMessage', function () {
     var _setup3 = setup(_MultiSelect["default"], {
-        emptyMessage: '',
-        onChange: jest.fn(),
-        options: [],
-        selectedOptions: [],
-        isPopupOpen: true
-      }),
-      renderedDOM = _setup3.renderedDOM;
+      emptyMessage: '',
+      onChange: jest.fn(),
+      options: [],
+      selectedOptions: [],
+      isPopupOpen: true
+    }),
+        renderedDOM = _setup3.renderedDOM;
+
     var emptyMessageEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'multiSelect_noOptnsMsg');
     (0, _expect["default"])(TestUtils.isDOMComponent(emptyMessageEle)).toBeTruthy();
   });
   it('Should display noMoreOptionsMessage', function () {
     var _setup4 = setup(_MultiSelect["default"], {
-        emptyMessage: '',
-        onChange: jest.fn(),
-        options: ['1', '2', '3', '4'],
-        selectedOptions: ['1', '2', '3', '4'],
-        dataIdNoMreOptionMsg: 'noMoreOptionsMessage',
-        isPopupOpen: true
-      }),
-      renderedDOM = _setup4.renderedDOM;
+      emptyMessage: '',
+      onChange: jest.fn(),
+      options: ['1', '2', '3', '4'],
+      selectedOptions: ['1', '2', '3', '4'],
+      dataIdNoMreOptionMsg: 'noMoreOptionsMessage',
+      isPopupOpen: true
+    }),
+        renderedDOM = _setup4.renderedDOM;
+
     var noMoreOptionsMessageEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'multiSelect_NoMoreOptionMsg');
     (0, _expect["default"])(TestUtils.isDOMComponent(noMoreOptionsMessageEle)).toBeTruthy();
   });
   it('Should display clear icon', function () {
     var _setup5 = setup(_MultiSelect["default"], {
-        emptyMessage: '',
-        onChange: jest.fn(),
-        options: ['1', '2', '3', '4'],
-        selectedOptions: ['1', '2']
-      }),
-      renderedDOM = _setup5.renderedDOM;
+      emptyMessage: '',
+      onChange: jest.fn(),
+      options: ['1', '2', '3', '4'],
+      selectedOptions: ['1', '2']
+    }),
+        renderedDOM = _setup5.renderedDOM;
+
     var clearIconEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'multiSelect_clearIcon');
     (0, _expect["default"])(TestUtils.isDOMComponent(clearIconEle)).toBeTruthy();
   });
   it('Should not display clear icon, When is readonly field', function () {
     var _setup6 = setup(_MultiSelect["default"], {
-        emptyMessage: '',
-        onChange: jest.fn(),
-        options: ['1', '2', '3', '4'],
-        selectedOptions: ['1', '2'],
-        isReadOnly: true
-      }),
-      renderedDOM = _setup6.renderedDOM;
+      emptyMessage: '',
+      onChange: jest.fn(),
+      options: ['1', '2', '3', '4'],
+      selectedOptions: ['1', '2'],
+      isReadOnly: true
+    }),
+        renderedDOM = _setup6.renderedDOM;
+
     var clearIconEles = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'multiSelect_clearIcon');
     (0, _expect["default"])(clearIconEles.length).toBe(0);
   });
   it('Should not display clear icon, When is selected option is one', function () {
     var _setup7 = setup(_MultiSelect["default"], {
-        emptyMessage: '',
-        onChange: jest.fn(),
-        options: ['1', '2', '3', '4'],
-        selectedOptions: ['1']
-      }),
-      renderedDOM = _setup7.renderedDOM;
+      emptyMessage: '',
+      onChange: jest.fn(),
+      options: ['1', '2', '3', '4'],
+      selectedOptions: ['1']
+    }),
+        renderedDOM = _setup7.renderedDOM;
+
     var clearIconEles = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'multiSelect_clearIcon');
     (0, _expect["default"])(clearIconEles.length).toBe(0);
   });
   it('Should display select all option, When suggestions are more than 1', function () {
     var _setup8 = setup(_MultiSelect["default"], {
-        emptyMessage: '',
-        onChange: jest.fn(),
-        options: ['1', '2', '3', '4'],
-        selectedOptions: ['1', '2'],
-        isPopupOpen: true,
-        needSelectAll: true
-      }),
-      renderedDOM = _setup8.renderedDOM;
+      emptyMessage: '',
+      onChange: jest.fn(),
+      options: ['1', '2', '3', '4'],
+      selectedOptions: ['1', '2'],
+      isPopupOpen: true,
+      needSelectAll: true
+    }),
+        renderedDOM = _setup8.renderedDOM;
+
     var selectAllEle = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'multiSelect_selectAll');
     (0, _expect["default"])(TestUtils.isDOMComponent(selectAllEle)).toBeTruthy();
   });
   it('Should not display select all option', function () {
     var _setup9 = setup(_MultiSelect["default"], {
-        emptyMessage: '',
-        onChange: jest.fn(),
-        options: ['1', '2', '3', '4'],
-        selectedOptions: ['1', '2', '3'],
-        isPopupOpen: true,
-        needSelectAll: true
-      }),
-      renderedDOM = _setup9.renderedDOM;
+      emptyMessage: '',
+      onChange: jest.fn(),
+      options: ['1', '2', '3', '4'],
+      selectedOptions: ['1', '2', '3'],
+      isPopupOpen: true,
+      needSelectAll: true
+    }),
+        renderedDOM = _setup9.renderedDOM;
+
     var selectAllEles = TestUtils.scryRenderedComponentsWithTestid(renderedDOM, 'multiSelect_MultiSelectHeader');
     (0, _expect["default"])(selectAllEles.length).toBe(0);
   });

package/lib/MultiSelect/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AdvancedGroupMultiSelect", {
+  enumerable: true,
+  get: function get() {
+    return _AdvancedGroupMultiSelect["default"];
+  }
+});
+Object.defineProperty(exports, "AdvancedMultiSelect", {
+  enumerable: true,
+  get: function get() {
+    return _AdvancedMultiSelect["default"];
+  }
+});
+Object.defineProperty(exports, "MultiSelect", {
+  enumerable: true,
+  get: function get() {
+    return _MultiSelect["default"];
+  }
+});
+Object.defineProperty(exports, "MultiSelectWithAvatar", {
+  enumerable: true,
+  get: function get() {
+    return _MultiSelectWithAvatar["default"];
+  }
+});
+
+var _MultiSelect = _interopRequireDefault(require("./MultiSelect"));
+
+var _MultiSelectWithAvatar = _interopRequireDefault(require("./MultiSelectWithAvatar"));
+
+var _AdvancedMultiSelect = _interopRequireDefault(require("./AdvancedMultiSelect"));
+
+var _AdvancedGroupMultiSelect = _interopRequireDefault(require("./AdvancedGroupMultiSelect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MultiSelect/props/defaultProps.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Suggestions_defaultProps = exports.SelectedOptions_defaultProps = exports.MultiSelect_defaultProps = exports.MultiSelectWithAvatar_defaultProps = exports.MultiSelectHeader_defaultProps = exports.EmptyState_defaultProps = exports.AdvancedMultiSelect_defaultProps = exports.AdvancedGroupMultiSelect_defaultProps = void 0;
+
 var _Config = require("../../Provider/Config");
+
 var AdvancedGroupMultiSelect_defaultProps = {
   animationStyle: 'bounce',
   autoComplete: (0, _Config.getLibraryConfig)('autoComplete'),
@@ -40,7 +42,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   palette: 'default',
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
 var AdvancedMultiSelect_defaultProps = {
@@ -71,7 +74,8 @@ var AdvancedMultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   customProps: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'advancedMultiSelect'
 };
 exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
 var EmptyState_defaultProps = {
@@ -112,7 +116,9 @@ var MultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   boxSize: 'default',
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'multiSelect',
+  keepSelectedOptions: false
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -145,7 +151,10 @@ var MultiSelectWithAvatar_defaultProps = {
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'multiSelectWithAvatar',
+  keepSelectedOptions: false,
+  customProps: {}
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {

package/lib/MultiSelect/props/propTypes.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Suggestions_propTypes = exports.SelectedOptions_propTypes = exports.MultiSelect_propTypes = exports.MultiSelectWithAvatar_propTypes = exports.MultiSelectHeader_propTypes = exports.EmptyState_propTypes = exports.AdvancedMultiSelect_propTypes = exports.AdvancedGroupMultiSelect_propTypes = void 0;
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var AdvancedGroupMultiSelect_propTypes = {
   animationStyle: _propTypes["default"].string,
   autoComplete: _propTypes["default"].bool,
@@ -17,7 +20,7 @@ var AdvancedGroupMultiSelect_propTypes = {
   emptyMessage: _propTypes["default"].string.isRequired,
   getContainerRef: _propTypes["default"].func,
   getFooter: _propTypes["default"].func,
-  groupedOptions: _propTypes["default"].array.required,
+  groupedOptions: _propTypes["default"].array.isRequired,
   i18nKeys: _propTypes["default"].shape({
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
@@ -57,7 +60,8 @@ var AdvancedGroupMultiSelect_propTypes = {
   isSearchClearOnSelect: _propTypes["default"].bool,
   palette: _propTypes["default"].oneOf(['default', 'dark']),
   needEffect: true,
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 var AdvancedMultiSelect_propTypes = {
@@ -110,6 +114,7 @@ var AdvancedMultiSelect_propTypes = {
   dataIdNoMreOptionMsg: _propTypes["default"].string,
   dataIdSelectAllEle: _propTypes["default"].string,
   isSearchClearOnClose: _propTypes["default"].bool,
+
   /**** Popup Props ****/
   isPopupOpen: _propTypes["default"].bool,
   isPopupReady: _propTypes["default"].bool,
@@ -141,7 +146,8 @@ var AdvancedMultiSelect_propTypes = {
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
   }),
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;
 var EmptyState_propTypes = {
@@ -246,7 +252,9 @@ var MultiSelect_propTypes = {
   getFooter: _propTypes["default"].func,
   needEffect: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string,
+  keepSelectedOptions: _propTypes["default"].bool
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -303,6 +311,12 @@ var MultiSelectWithAvatar_propTypes = {
   htmlId: _propTypes["default"].string,
   isBoxPaddingNeed: _propTypes["default"].bool,
   needEffect: _propTypes["default"].bool,
+  keepSelectedOptions: _propTypes["default"].bool,
+  customProps: _propTypes["default"].shape({
+    SuggestionsProps: _propTypes["default"].object,
+    DropBoxProps: _propTypes["default"].object
+  }),
+
   /**** Popup props ****/
   isPopupOpen: _propTypes["default"].bool,
   isPopupReady: _propTypes["default"].bool,
@@ -326,7 +340,8 @@ var MultiSelectWithAvatar_propTypes = {
   customChildrenClass: _propTypes["default"].string,
   isSearchClearOnSelect: _propTypes["default"].bool,
   disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.MultiSelectWithAvatar_propTypes = MultiSelectWithAvatar_propTypes;
 var SelectedOptions_propTypes = {