fix(TreeSelect): prevent clear-button slot error in Popover (DS-5393)

packages/components/src/components/TreeSelect/TreeSelect.test.tsx

@@ -6,6 +6,7 @@ import { userEvent } from '@testing-library/user-event';
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
 
 import { Form } from '../Form';
+import { Popover } from '../Popover';
 import { Provider } from '../Provider';
 import { Tree } from '../Tree';
 
@@ -490,6 +491,18 @@ describe('TreeSelect', () => {
   });
 
   describe('clear button', () => {
+    it('should not throw on render in a popover', () => {
+      expect(() => {
+        render(
+          <Popover defaultOpen>
+            <Popover.Body>
+              <TreeSelectFixture isClearable />
+            </Popover.Body>
+          </Popover>
+        );
+      }).not.toThrow();
+    });
+
     it('should be visible only when a value is selected', () => {
       const { rerender } = renderTreeSelect({ value: null, isClearable: true });
 

packages/components/src/components/TreeSelect/TreeSelect.tsx

@@ -22,9 +22,12 @@ import {
 } from '@koobiq/react-core';
 import { IconChevronDownS16 } from '@koobiq/react-icons';
 import {
+  ButtonContext,
   CollectionBuilder,
   Collection,
+  DEFAULT_SLOT,
   FieldErrorContext,
+  Provider,
   composeRenderProps,
   useTreeSelect,
   useTreeSelectState,
@@ -408,38 +411,52 @@ export function TreeSelectInner<
     );
 
   return (
-    <FormField {...rootProps}>
-      <FormField.Label {...labelProps} />
-      <div className={s.body}>
-        <FormField.ControlGroup {...groupProps}>
-          <FormField.Select {...controlProps}>
-            {state.selectedItems.length ? renderValue : undefined}
-          </FormField.Select>
-        </FormField.ControlGroup>
-        <FieldErrorContext.Provider value={validation}>
-          <FormField.Error {...errorProps} />
-        </FieldErrorContext.Provider>
-        <FormField.Caption {...captionProps} />
-      </div>
-      <PopoverInner {...popoverProps}>
-        <div className={s.content}>
-          {isSearchable && (
-            <>
-              <SearchInput {...searchInputProps} />
-              <Divider disablePaddings />
-            </>
-          )}
-          <TreeInner
-            props={innerTreeProps}
-            treeRef={treeRef}
-            state={filteredTreeState}
-          />
-          <DropdownFooter {...slotProps?.dropdownFooter}>
-            {dropdownFooter}
-          </DropdownFooter>
+    <Provider
+      values={[
+        [
+          ButtonContext,
+          {
+            slots: {
+              [DEFAULT_SLOT]: {},
+              'clear-button': {},
+            },
+          },
+        ],
+      ]}
+    >
+      <FormField {...rootProps}>
+        <FormField.Label {...labelProps} />
+        <div className={s.body}>
+          <FormField.ControlGroup {...groupProps}>
+            <FormField.Select {...controlProps}>
+              {state.selectedItems.length ? renderValue : undefined}
+            </FormField.Select>
+          </FormField.ControlGroup>
+          <FieldErrorContext.Provider value={validation}>
+            <FormField.Error {...errorProps} />
+          </FieldErrorContext.Provider>
+          <FormField.Caption {...captionProps} />
         </div>
-      </PopoverInner>
-    </FormField>
+        <PopoverInner {...popoverProps}>
+          <div className={s.content}>
+            {isSearchable && (
+              <>
+                <SearchInput {...searchInputProps} />
+                <Divider disablePaddings />
+              </>
+            )}
+            <TreeInner
+              props={innerTreeProps}
+              treeRef={treeRef}
+              state={filteredTreeState}
+            />
+            <DropdownFooter {...slotProps?.dropdownFooter}>
+              {dropdownFooter}
+            </DropdownFooter>
+          </div>
+        </PopoverInner>
+      </FormField>
+    </Provider>
   );
 }