fix: hide search toggle button when not needed (#1141)

apis/nucleus/src/components/listbox/ListBoxInline.jsx

@@ -205,7 +205,7 @@ function ListBoxInline({ options, layout }) {
   };
 
   const shouldAutoFocus = searchVisible && search === 'toggle';
-  const showSearchIcon = searchEnabled !== false && !constraints?.active;
+  const showSearchIcon = searchEnabled !== false && search === 'toggle' && !constraints?.active;
   const showSearchOrLockIcon = isLocked || showSearchIcon;
   const showIcons = showSearchOrLockIcon || isDrillDown;
   const iconsWidth = (showSearchOrLockIcon ? searchIconWidth : 0) + (isDrillDown ? drillDownIconWidth : 0);
@@ -253,6 +253,7 @@ function ListBoxInline({ options, layout }) {
                       tabIndex={-1}
                       title={translator.get('Listbox.Search')}
                       size="large"
+                      data-testid="search-toggle-btn"
                     >
                       <SearchIcon style={{ fontSize: '12px' }} />
                     </IconButton>

apis/nucleus/src/components/listbox/__tests__/list-box-inline.test.jsx

@@ -4,7 +4,7 @@
 /* eslint-disable import/first */
 import React from 'react';
 import { create, act } from 'react-test-renderer';
-import { IconButton, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import { createTheme, ThemeProvider } from '@nebula.js/ui/theme';
 import * as unlockModule from '@nebula.js/ui/icons/unlock';
 import * as lockModule from '@nebula.js/ui/icons/lock';
@@ -182,10 +182,9 @@ describe('<ListboxInline />', () => {
       const autoSizers = renderer.root.findAllByProps({ 'data-testid': 'virtualized-auto-sizer' });
       expect(autoSizers).toHaveLength(1);
 
-      const listBoxSearches = renderer.root.findAllByType(ListBoxSearch);
-      expect(listBoxSearches).toHaveLength(1);
-      const showSearchButtons = renderer.root.findAllByType(IconButton);
-      expect(showSearchButtons).toHaveLength(1);
+      expect(ListBoxSearch.mock.calls[0][0]).toMatchObject({
+        visible: true,
+      });
       expect(getListboxInlineKeyboardNavigation).toHaveBeenCalledTimes(2);
 
       // TODO: MUIv5
@@ -197,6 +196,20 @@ describe('<ListboxInline />', () => {
       expect(selections.off).not.toHaveBeenCalled();
     });
 
+    test('should render properly with search toggle option', async () => {
+      options.search = 'toggle';
+      await render();
+
+      const searchToggleBtns = renderer.root
+        .findAllByProps({ 'data-testid': 'search-toggle-btn' })
+        .filter((x) => typeof x.type === 'string'); // removes virtual dom elements
+
+      expect(searchToggleBtns).toHaveLength(1);
+      expect(ListBoxSearch.mock.calls[0][0]).toMatchObject({
+        visible: false,
+      });
+    });
+
     test('should render without toolbar', async () => {
       options.toolbar = false;
       await render();