fix(compact-select): Remove context from list box section (#70408)

static/app/components/compactSelect/index.spec.tsx

@@ -215,6 +215,47 @@ describe('CompactSelect', function () {
       expect(screen.queryByRole('option', {name: 'Option One'})).not.toBeInTheDocument();
     });
 
+    it('can search with sections', async function () {
+      render(
+        <CompactSelect
+          searchable
+          searchPlaceholder="Search here…"
+          options={[
+            {
+              key: 'section-1',
+              label: 'Section 1',
+              showToggleAllButton: true,
+              options: [
+                {value: 'opt_one', label: 'Option One'},
+                {value: 'opt_two', label: 'Option Two'},
+              ],
+            },
+            {
+              key: 'section-2',
+              label: 'Section 2',
+              showToggleAllButton: true,
+              options: [
+                {value: 'opt_three', label: 'Option Three'},
+                {value: 'opt_four', label: 'Option Four'},
+              ],
+            },
+          ]}
+        />
+      );
+
+      // click on the trigger button
+      await userEvent.click(screen.getByRole('button'));
+
+      // type 'Two' into the search box
+      await userEvent.click(screen.getByPlaceholderText('Search here…'));
+      await userEvent.keyboard('Two');
+
+      // only Option Two should be available
+      expect(screen.getByRole('option', {name: 'Option Two'})).toBeInTheDocument();
+      expect(screen.queryByRole('option', {name: 'Option One'})).not.toBeInTheDocument();
+      expect(screen.getAllByRole('option')).toHaveLength(1);
+    });
+
     it('can limit the number of options', async function () {
       render(
         <CompactSelect

static/app/components/compactSelect/listBox/index.tsx

@@ -161,6 +161,7 @@ const ListBox = forwardRef<HTMLUListElement, ListBoxProps>(function ListBox(
                   key={item.key}
                   item={item}
                   listState={listState}
+                  hiddenOptions={hiddenOptions}
                   onToggle={onSectionToggle}
                   size={size}
                 />

static/app/components/compactSelect/listBox/section.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useContext, useMemo} from 'react';
+import {Fragment, useMemo} from 'react';
 import type {AriaListBoxSectionProps} from '@react-aria/listbox';
 import {useListBoxSection} from '@react-aria/listbox';
 import {useSeparator} from '@react-aria/separator';
@@ -7,7 +7,6 @@ import type {Node} from '@react-types/shared';
 
 import type {FormSize} from 'sentry/utils/theme';
 
-import {SelectFilterContext} from '../list';
 import {
   SectionGroup,
   SectionHeader,
@@ -21,6 +20,7 @@ import {SectionToggle} from '../utils';
 import {ListBoxOption} from './option';
 
 interface ListBoxSectionProps extends AriaListBoxSectionProps {
+  hiddenOptions: Set<SelectKey>;
   item: Node<any>;
   listState: ListState<any>;
   size: FormSize;
@@ -31,7 +31,13 @@ interface ListBoxSectionProps extends AriaListBoxSectionProps {
  * A <li /> element that functions as a list box section (renders a nested <ul />
  * inside). https://react-spectrum.adobe.com/react-aria/useListBox.html
  */
-export function ListBoxSection({item, listState, onToggle, size}: ListBoxSectionProps) {
+export function ListBoxSection({
+  item,
+  listState,
+  onToggle,
+  size,
+  hiddenOptions,
+}: ListBoxSectionProps) {
   const {itemProps, headingProps, groupProps} = useListBoxSection({
     heading: item.rendered,
     'aria-label': item['aria-label'],
@@ -43,7 +49,6 @@ export function ListBoxSection({item, listState, onToggle, size}: ListBoxSection
     listState.selectionManager.selectionMode === 'multiple' &&
     item.value.showToggleAllButton;
 
-  const hiddenOptions = useContext(SelectFilterContext);
   const childItems = useMemo(
     () => [...item.childNodes].filter(child => !hiddenOptions.has(child.props.value)),
     [item.childNodes, hiddenOptions]