@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

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

@@ -295,19 +295,36 @@ describe('Select -', function () {
     expect(getAllByRole(listItemRole)).toHaveLength(1);
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render the only options matching search value even with additional spaces before and after', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      needSearch: true,
+      options: options
+    })),
+        getByRole = _render15.getByRole,
+        getAllByRole = _render15.getAllByRole,
+        asFragment = _render15.asFragment,
+        getByTestId = _render15.getByTestId;
+
+    _userEvent["default"].click(getByRole(selectInputRole));
+
+    _userEvent["default"].type((0, _react2.within)(getByTestId(dropboxTestId)).getByRole('textbox'), '  2  ');
+
+    expect(getAllByRole(listItemRole)).toHaveLength(1);
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('Should trigger given onSearch, when type on the search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    var mockOnSearch, _render15, getByRole, getByTestId;
+    var mockOnSearch, _render16, getByRole, getByTestId;
 
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
             mockOnSearch = jest.fn();
-            _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
               needSearch: true,
               options: options,
               onSearch: mockOnSearch
-            })), getByRole = _render15.getByRole, getByTestId = _render15.getByTestId;
+            })), getByRole = _render16.getByRole, getByTestId = _render16.getByTestId;
 
             _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -326,14 +343,14 @@ describe('Select -', function () {
     }, _callee2);
   })));
   test('Should render all the options when search value is cleared', function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       needSearch: true,
       options: options
     })),
-        getByRole = _render16.getByRole,
-        getAllByRole = _render16.getAllByRole,
-        asFragment = _render16.asFragment,
-        getByTestId = _render16.getByTestId;
+        getByRole = _render17.getByRole,
+        getAllByRole = _render17.getAllByRole,
+        asFragment = _render17.asFragment,
+        getByTestId = _render17.getByTestId;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -351,13 +368,13 @@ describe('Select -', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should not open the dropdown when disabled', function () {
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       isDisabled: true
     })),
-        getByRole = _render17.getByRole,
-        queryByTestId = _render17.queryByTestId,
-        asFragment = _render17.asFragment;
+        getByRole = _render18.getByRole,
+        queryByTestId = _render18.queryByTestId,
+        asFragment = _render18.asFragment;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -365,13 +382,13 @@ describe('Select -', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should not open the dropdown when readonly', function () {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       isReadOnly: true
     })),
-        getByRole = _render18.getByRole,
-        queryByTestId = _render18.queryByTestId,
-        asFragment = _render18.asFragment;
+        getByRole = _render19.getByRole,
+        queryByTestId = _render19.queryByTestId,
+        asFragment = _render19.asFragment;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -379,12 +396,12 @@ describe('Select -', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should close the dropdown when clicking outside', function () {
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options
     })),
-        getByRole = _render19.getByRole,
-        queryByTestId = _render19.queryByTestId,
-        asFragment = _render19.asFragment;
+        getByRole = _render20.getByRole,
+        queryByTestId = _render20.queryByTestId,
+        asFragment = _render20.asFragment;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -401,15 +418,15 @@ describe('Select -', function () {
       return /*#__PURE__*/_react["default"].createElement("div", null, emptyMessage);
     });
 
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       needSearch: true,
       options: options,
       getCustomEmptyState: getCustomEmptyState
     })),
-        getByText = _render20.getByText,
-        getByRole = _render20.getByRole,
-        asFragment = _render20.asFragment,
-        getByTestId = _render20.getByTestId;
+        getByText = _render21.getByText,
+        getByRole = _render21.getByRole,
+        asFragment = _render21.asFragment,
+        getByTestId = _render21.getByTestId;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -421,10 +438,10 @@ describe('Select -', function () {
   test('Should call the onKeyDown function, when press any key in the input element', function () {
     var mockKeyDown = jest.fn();
 
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       onKeyDown: mockKeyDown
     })),
-        getByRole = _render21.getByRole;
+        getByRole = _render22.getByRole;
 
     _react2.fireEvent.keyDown(getByRole(selectInputRole), {
       key: 'a',
@@ -434,12 +451,12 @@ describe('Select -', function () {
     expect(mockKeyDown).toHaveBeenCalled();
   });
   test('Should highlight the next list-items, when arrow keys pressed', function () {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options
     })),
-        getByRole = _render22.getByRole,
-        getAllByRole = _render22.getAllByRole,
-        asFragment = _render22.asFragment;
+        getByRole = _render23.getByRole,
+        getAllByRole = _render23.getAllByRole,
+        asFragment = _render23.asFragment;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -478,12 +495,12 @@ describe('Select -', function () {
   test('Should update the value, when select the option using keyboard', function () {
     var mockOnChange = jest.fn();
 
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       onChange: mockOnChange
     })),
-        getByRole = _render23.getByRole,
-        asFragment = _render23.asFragment;
+        getByRole = _render24.getByRole,
+        asFragment = _render24.asFragment;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -499,16 +516,16 @@ describe('Select -', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should close the dropdown and focus the select input, when press escape key', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-    var _render24, getByRole, getByTestId, queryByTestId;
+    var _render25, getByRole, getByTestId, queryByTestId;
 
     return _regeneratorRuntime().wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
-            _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
               needSearch: true,
               options: options
-            })), getByRole = _render24.getByRole, getByTestId = _render24.getByTestId, queryByTestId = _render24.queryByTestId;
+            })), getByRole = _render25.getByRole, getByTestId = _render25.getByTestId, queryByTestId = _render25.queryByTestId;
 
             _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -535,18 +552,18 @@ describe('Select -', function () {
     }, _callee3);
   })));
   test('Should close the dropdown and trigger the onchange, when press tab key', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-    var mockOnChange, _render25, getByRole, getByTestId, queryByTestId;
+    var mockOnChange, _render26, getByRole, getByTestId, queryByTestId;
 
     return _regeneratorRuntime().wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
             mockOnChange = jest.fn();
-            _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
               needSearch: true,
               options: options,
               onChange: mockOnChange
-            })), getByRole = _render25.getByRole, getByTestId = _render25.getByTestId, queryByTestId = _render25.queryByTestId;
+            })), getByRole = _render26.getByRole, getByTestId = _render26.getByTestId, queryByTestId = _render26.queryByTestId;
 
             _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -587,7 +604,7 @@ describe('Select -', function () {
     }, _callee4);
   })));
   test('Should trigger getNextOptions, when scroll to the end of the dropbox list and isNextOptions is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-    var mockGetNextOptions, _render26, getByRole, getByTestId, asFragment, cardContent;
+    var mockGetNextOptions, _render27, getByRole, getByTestId, asFragment, cardContent;
 
     return _regeneratorRuntime().wrap(function _callee5$(_context5) {
       while (1) {
@@ -600,11 +617,11 @@ describe('Select -', function () {
                 }, 2000);
               });
             });
-            _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
               options: selectOptions,
               isNextOptions: true,
               getNextOptions: mockGetNextOptions
-            })), getByRole = _render26.getByRole, getByTestId = _render26.getByTestId, asFragment = _render26.asFragment;
+            })), getByRole = _render27.getByRole, getByTestId = _render27.getByTestId, asFragment = _render27.asFragment;
 
             _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -653,7 +670,7 @@ describe('Select -', function () {
     }, _callee5);
   })));
   test('Should trigger getNextOptions, when search with needLocalSearch is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
-    var mockGetNextOptions, _render27, getByRole, getByTestId, asFragment, loader;
+    var mockGetNextOptions, _render28, getByRole, getByTestId, asFragment, loader;
 
     return _regeneratorRuntime().wrap(function _callee6$(_context6) {
       while (1) {
@@ -666,13 +683,13 @@ describe('Select -', function () {
                 }, 2000);
               });
             });
-            _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
               needSearch: true,
               needLocalSearch: false,
               options: options,
               isNextOptions: true,
               getNextOptions: mockGetNextOptions
-            })), getByRole = _render27.getByRole, getByTestId = _render27.getByTestId, asFragment = _render27.asFragment;
+            })), getByRole = _render28.getByRole, getByTestId = _render28.getByTestId, asFragment = _render28.asFragment;
 
             _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -702,7 +719,7 @@ describe('Select -', function () {
     }, _callee6);
   })));
   test('Should trigger onChange, when type on select input with autoSelectOnType is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
-    var mockOnChange, optionsList, _render28, getByRole;
+    var mockOnChange, optionsList, _render29, getByRole;
 
     return _regeneratorRuntime().wrap(function _callee7$(_context7) {
       while (1) {
@@ -722,11 +739,11 @@ describe('Select -', function () {
               id: '4',
               text: 'Trichy'
             }];
-            _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
               options: optionsList,
               autoSelectOnType: true,
               onChange: mockOnChange
-            })), getByRole = _render28.getByRole;
+            })), getByRole = _render29.getByRole;
 
             _react2.fireEvent.keyPress(getByRole(selectInputRole), {
               key: 'c',
@@ -796,15 +813,15 @@ describe('Select -', function () {
     });
     var mockOnAddNewOption = jest.fn();
 
-    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       needSearch: true,
       options: options,
       onAddNewOption: mockOnAddNewOption,
       getCustomEmptyState: getCustomEmptyState
     })),
-        getByRole = _render29.getByRole,
-        getByTestId = _render29.getByTestId,
-        asFragment = _render29.asFragment;
+        getByRole = _render30.getByRole,
+        getByTestId = _render30.getByTestId,
+        asFragment = _render30.asFragment;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -829,11 +846,11 @@ describe('Select -', function () {
   test('Should trigger the onDropBoxOpen, when open the select', function () {
     var mockOnDropBoxOpen = jest.fn();
 
-    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       onDropBoxOpen: mockOnDropBoxOpen
     })),
-        getByRole = _render30.getByRole;
+        getByRole = _render31.getByRole;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -842,11 +859,11 @@ describe('Select -', function () {
   test('Should trigger the onDropBoxClose, when close the select', function () {
     var mockOnDropBoxClose = jest.fn();
 
-    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       onDropBoxClose: mockOnDropBoxClose
     })),
-        getByRole = _render31.getByRole;
+        getByRole = _render32.getByRole;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -855,19 +872,19 @@ describe('Select -', function () {
     expect(mockOnDropBoxClose).toHaveBeenCalledWith();
   });
   test('Should trigger the onSearch with empty string, when close the select and isSearchClearOnClose is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
-    var mockOnSearch, _render32, getByRole, getByTestId;
+    var mockOnSearch, _render33, getByRole, getByTestId;
 
     return _regeneratorRuntime().wrap(function _callee8$(_context8) {
       while (1) {
         switch (_context8.prev = _context8.next) {
           case 0:
             mockOnSearch = jest.fn();
-            _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
               needSearch: true,
               isSearchClearOnClose: true,
               options: options,
               onSearch: mockOnSearch
-            })), getByRole = _render32.getByRole, getByTestId = _render32.getByTestId;
+            })), getByRole = _render33.getByRole, getByTestId = _render33.getByTestId;
 
             _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -894,19 +911,19 @@ describe('Select -', function () {
     }, _callee8);
   })));
   test('Should trigger the onSearch with search string, when close the select and isSearchClearOnClose is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
-    var mockOnSearch, _render33, getByRole, getByTestId;
+    var mockOnSearch, _render34, getByRole, getByTestId;
 
     return _regeneratorRuntime().wrap(function _callee9$(_context9) {
       while (1) {
         switch (_context9.prev = _context9.next) {
           case 0:
             mockOnSearch = jest.fn();
-            _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
               needSearch: true,
               isSearchClearOnClose: false,
               options: options,
               onSearch: mockOnSearch
-            })), getByRole = _render33.getByRole, getByTestId = _render33.getByTestId;
+            })), getByRole = _render34.getByRole, getByTestId = _render34.getByTestId;
 
             _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -948,11 +965,11 @@ describe('Select -', function () {
   test('Should trigger the getPopupHandlers with null, when select is unmounted', function () {
     var mockGetPopupHandlers = jest.fn();
 
-    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       getPopupHandlers: mockGetPopupHandlers
     })),
-        unmount = _render34.unmount;
+        unmount = _render35.unmount;
 
     unmount();
     expect(mockGetPopupHandlers).toHaveBeenCalledWith({
@@ -963,12 +980,12 @@ describe('Select -', function () {
     });
   });
   test('Should trigger the togglePopup with given defaultDropBoxPosition', function () {
-    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       defaultDropBoxPosition: "topCenter"
     })),
-        getByRole = _render35.getByRole,
-        getByTestId = _render35.getByTestId;
+        getByRole = _render36.getByRole,
+        getByTestId = _render36.getByTestId;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -977,11 +994,11 @@ describe('Select -', function () {
   test('Should trigger the onFocus, when open the select', function () {
     var mockOnFocus = jest.fn();
 
-    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       onFocus: mockOnFocus
     })),
-        getByRole = _render36.getByRole;
+        getByRole = _render37.getByRole;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
@@ -990,21 +1007,21 @@ describe('Select -', function () {
   test('Should trigger the getPopupHandlers with popup handlers, when select is mounted', function () {
     var mockGetRef = jest.fn();
 
-    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       getRef: mockGetRef
     })),
-        getByRole = _render37.getByRole;
+        getByRole = _render38.getByRole;
 
     expect(mockGetRef).toHaveBeenCalledWith(getByRole(selectInputRole));
   });
   test('Should not open the dropdown, when press down arrow on the input with needSelectDownIcon as false', function () {
-    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       needSelectDownIcon: false
     })),
-        getByRole = _render38.getByRole,
-        queryByTestId = _render38.queryByTestId;
+        getByRole = _render39.getByRole,
+        queryByTestId = _render39.queryByTestId;
 
     _react2.fireEvent.keyDown(getByRole(selectInputRole), {
       key: 'ArrowDown',
@@ -1015,15 +1032,15 @@ describe('Select -', function () {
     expect(queryByTestId(dropboxTestId)).not.toBeInTheDocument();
   });
   test('Should open the dropdown, when press down arrow on the input with getChildren used and needSelectDownIcon as false', function () {
-    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       options: options,
       needSelectDownIcon: false,
       getChildren: function getChildren() {
         return /*#__PURE__*/_react["default"].createElement("span", null, "getChildren element");
       }
     })),
-        getByRole = _render39.getByRole,
-        getByTestId = _render39.getByTestId;
+        getByRole = _render40.getByRole,
+        getByTestId = _render40.getByTestId;
 
     _react2.fireEvent.keyDown(getByRole(selectInputRole), {
       key: 'ArrowDown',
@@ -1036,138 +1053,138 @@ describe('Select -', function () {
 });
 describe('Select snapshot - ', function () {
   test('Should render with isParentBased as false', function () {
-    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       isParentBased: false
     })),
-        asFragment = _render40.asFragment;
+        asFragment = _render41.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   var sizes = ['small', 'medium'];
   test.each(sizes)('Should render with size as %s', function (size) {
-    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       size: size
     })),
-        asFragment = _render41.asFragment;
+        asFragment = _render42.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with iconOnHover as true', function () {
-    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       iconOnHover: true
     })),
-        asFragment = _render42.asFragment;
+        asFragment = _render43.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with iconOnHover as true and isReadOnly as true', function () {
-    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       iconOnHover: true,
       isReadOnly: true
     })),
-        asFragment = _render43.asFragment;
+        asFragment = _render44.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with iconOnHover as true and isDisabled as true', function () {
-    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       iconOnHover: true,
       isDisabled: true
     })),
-        asFragment = _render44.asFragment;
+        asFragment = _render45.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with title prop', function () {
-    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       title: "Select tooltip"
     })),
-        asFragment = _render45.asFragment;
+        asFragment = _render46.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with dataSelectorId prop', function () {
-    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       dataSelectorId: "customSelectorId"
     })),
-        asFragment = _render46.asFragment;
+        asFragment = _render47.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with className prop', function () {
-    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       className: "customClass"
     })),
-        asFragment = _render47.asFragment;
+        asFragment = _render48.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with needSelectDownIcon as false', function () {
-    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       needSelectDownIcon: false
     })),
-        asFragment = _render48.asFragment;
+        asFragment = _render49.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with isLoading', function () {
-    var _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       isPopupOpen: true,
       isLoading: true
     })),
-        asFragment = _render49.asFragment;
+        asFragment = _render50.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with children', function () {
-    var _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, "children element"))),
-        asFragment = _render50.asFragment;
+    var _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, "children element"))),
+        asFragment = _render51.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with children and dropdown open', function () {
-    var _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       isPopupOpen: true
     }, /*#__PURE__*/_react["default"].createElement("span", null, "children element"))),
-        asFragment = _render51.asFragment;
+        asFragment = _render52.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   var dropBoxSizes = ['small', 'medium', 'large'];
   test.each(dropBoxSizes)('Should render with dropBoxSize as %s', function (dropBoxSize) {
-    var _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       isPopupOpen: true,
       dropBoxSize: dropBoxSize,
       needSearch: true
     })),
-        asFragment = _render52.asFragment;
+        asFragment = _render53.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with getFooter', function () {
-    var _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       isPopupOpen: true,
       getFooter: function getFooter() {
         return /*#__PURE__*/_react["default"].createElement("span", null, "getFooter element");
       }
     })),
-        asFragment = _render53.asFragment;
+        asFragment = _render54.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with getChildren', function () {
-    var _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render55 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       isPopupOpen: true,
       getChildren: function getChildren() {
         return /*#__PURE__*/_react["default"].createElement("span", null, "getChildren element");
       }
     })),
-        asFragment = _render54.asFragment;
+        asFragment = _render55.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test("Should render with customProps", function () {
-    var _render55 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render56 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       needSearch: true,
       options: options,
       isPopupOpen: true,
@@ -1189,7 +1206,7 @@ describe('Select snapshot - ', function () {
         }
       }
     })),
-        asFragment = _render55.asFragment;
+        asFragment = _render56.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -1197,7 +1214,7 @@ describe('Select snapshot - ', function () {
 describe('Select box needSelectDownIcon snapshot - ', function () {
   [true, false].forEach(function (needSelectDownIcon) {
     test("Should render with aria properties - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render56 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render57 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         i18nKeys: {
           TextBox_ally_label: ''
         },
@@ -1205,123 +1222,123 @@ describe('Select box needSelectDownIcon snapshot - ', function () {
         options: options,
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render56.asFragment;
+          asFragment = _render57.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test("Should render with isPopupOpen as true - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render57 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render58 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         isPopupOpen: true,
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render57.asFragment;
+          asFragment = _render58.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test("Should render with maxLength - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render58 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render59 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         maxLength: "100",
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render58.asFragment;
+          asFragment = _render59.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test("Should render with needBorder as false - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render59 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render60 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         needBorder: false,
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render59.asFragment;
+          asFragment = _render60.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test("Should render with placeHolder - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render60 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render61 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         placeHolder: "custom placeholder",
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render60.asFragment;
+          asFragment = _render61.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test("Should render with isReadOnly as true - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render61 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render62 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         isReadOnly: true,
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render61.asFragment;
+          asFragment = _render62.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test("Should render with isDisabled as true - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render62 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render63 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         isDisabled: true,
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render62.asFragment;
+          asFragment = _render63.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     var textBoxSizes = ['xsmall', 'small', 'medium', 'xmedium'];
     test.each(textBoxSizes)("Should render with textBoxSize as %s - needSelectDownIcon as ".concat(needSelectDownIcon), function (textBoxSize) {
-      var _render63 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render64 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         textBoxSize: textBoxSize,
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render63.asFragment;
+          asFragment = _render64.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     var textBoxVariants = ['primary', 'secondary', 'default', 'light'];
     test.each(textBoxVariants)("Should render with textBoxVariant as %s - needSelectDownIcon as ".concat(needSelectDownIcon), function (textBoxVariant) {
-      var _render64 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render65 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         textBoxVariant: textBoxVariant,
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render64.asFragment;
+          asFragment = _render65.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     var borderColors = ['transparent', 'default'];
     test.each(borderColors)("Should render with borderColor as %s - needSelectDownIcon as ".concat(needSelectDownIcon), function (borderColor) {
-      var _render65 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render66 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         borderColor: borderColor,
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render65.asFragment;
+          asFragment = _render66.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test("Should render with htmlId - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render66 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render67 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         htmlId: "customHtmlId",
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render66.asFragment;
+          asFragment = _render67.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test("Should render with autoComplete as true - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render67 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render68 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         autoComplete: true,
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render67.asFragment;
+          asFragment = _render68.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test("Should render with title - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render68 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render69 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         title: "custom select title",
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render68.asFragment;
+          asFragment = _render69.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
     test("Should render with customProps TextBoxProps - needSelectDownIcon as ".concat(needSelectDownIcon), function () {
-      var _render69 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      var _render70 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         customProps: {
           TextBoxProps: {
             'data-custom-attr': 'true'
@@ -1329,7 +1346,7 @@ describe('Select box needSelectDownIcon snapshot - ', function () {
         },
         needSelectDownIcon: needSelectDownIcon
       })),
-          asFragment = _render69.asFragment;
+          asFragment = _render70.asFragment;
 
       expect(asFragment()).toMatchSnapshot();
     });
@@ -1337,45 +1354,57 @@ describe('Select box needSelectDownIcon snapshot - ', function () {
 });
 describe('Select dataId snapshot - ', function () {
   test('Should render with dataId prop - dropbox open', function () {
-    var _render70 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render71 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       needSearch: true,
       options: options,
       dataId: "customDataId"
     })),
-        getByRole = _render70.getByRole,
-        asFragment = _render70.asFragment;
+        getByRole = _render71.getByRole,
+        asFragment = _render71.asFragment;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with dataId prop - isDisabled as true', function () {
-    var _render71 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render72 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       isDisabled: true,
       dataId: "customDataId"
     })),
-        asFragment = _render71.asFragment;
+        asFragment = _render72.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with dataId prop - isReadOnly as true', function () {
-    var _render72 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render73 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       isReadOnly: true,
       dataId: "customDataId"
     })),
-        asFragment = _render72.asFragment;
+        asFragment = _render73.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should render with dataId prop - empty state and needSelectDownIcon as false', function () {
-    var _render73 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render74 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       needSelectDownIcon: false
     })),
-        getByRole = _render73.getByRole,
-        asFragment = _render73.asFragment;
+        getByRole = _render74.getByRole,
+        asFragment = _render74.asFragment;
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render with renderCustomSelectedValue', function () {
+    var _render75 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      options: options,
+      selectedValue: "Option 2",
+      renderCustomSelectedValue: function renderCustomSelectedValue() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, " Select Custom Option 2");
+      }
+    })),
+        asFragment = _render75.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });