diff --git a/packages/react-components/react-utilities/src/compose/getSlots.test.tsx b/packages/react-components/react-utilities/src/compose/getSlots.test.tsx index bb4ca39b46eae5..4318a1a0db6895 100644 --- a/packages/react-components/react-utilities/src/compose/getSlots.test.tsx +++ b/packages/react-components/react-utilities/src/compose/getSlots.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { getSlots } from './getSlots'; import type { Slot } from './types'; +import { resolveShorthand } from './resolveShorthand'; describe('getSlots', () => { type FooProps = { id?: string; children?: React.ReactNode }; @@ -126,6 +127,24 @@ describe('getSlots', () => { }); }); + it('can use slot children functions from resolveShorthand to replace default slot rendering', () => { + type Slots = { + root: Slot<'div'>; + icon: Slot<'a'>; + }; + const renderFunction = (C: React.ElementType, p: {}) => ; + expect( + getSlots({ + components: { root: 'div', icon: Foo }, + root: resolveShorthand({ as: 'div' }, { required: true }), + icon: resolveShorthand({ id: 'bar', children: renderFunction }), + }), + ).toEqual({ + slots: { root: 'div', icon: React.Fragment }, + slotProps: { root: {}, icon: { children: } }, + }); + }); + it('can render a primitive input with no children', () => { type Slots = { root: Slot<'div'>; diff --git a/packages/react-components/react-utilities/src/compose/getSlotsNext.test.tsx b/packages/react-components/react-utilities/src/compose/getSlotsNext.test.tsx index fc824df2685416..a66534b2786982 100644 --- a/packages/react-components/react-utilities/src/compose/getSlotsNext.test.tsx +++ b/packages/react-components/react-utilities/src/compose/getSlotsNext.test.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import { getSlotsNext } from './getSlotsNext'; import type { Slot } from './types'; +import { resolveShorthand } from './resolveShorthand'; +import { SLOT_RENDER_FUNCTION_SYMBOL } from './constants'; describe('getSlotsNext', () => { type FooProps = { id?: string; children?: React.ReactNode }; @@ -127,6 +129,24 @@ describe('getSlotsNext', () => { }); }); + it('can use slot children functions from resolveShorthand to replace default slot rendering', () => { + type Slots = { + root: Slot<'div'>; + icon: Slot<'a'>; + }; + const renderFunction = (C: React.ElementType, p: {}) => ; + expect( + getSlotsNext({ + components: { root: 'div', icon: Foo }, + root: resolveShorthand({ as: 'div' }, { required: true }), + icon: resolveShorthand({ id: 'bar', children: renderFunction }), + }), + ).toEqual({ + slots: { root: 'div', icon: Foo }, + slotProps: { root: {}, icon: { children: undefined, id: 'bar', [SLOT_RENDER_FUNCTION_SYMBOL]: renderFunction } }, + }); + }); + it('can render a primitive input with no children', () => { type Slots = { root: Slot<'div'>;