diff --git a/change/@fluentui-react-utilities-7013f126-ca0d-4752-b4a9-e9d912be491a.json b/change/@fluentui-react-utilities-7013f126-ca0d-4752-b4a9-e9d912be491a.json new file mode 100644 index 0000000000000..8b3a2d6690c34 --- /dev/null +++ b/change/@fluentui-react-utilities-7013f126-ca0d-4752-b4a9-e9d912be491a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: improve Slot signature to be more presentable in Storybook", + "packageName": "@fluentui/react-utilities", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md index 985292f0c166a..804601b3b0338 100644 --- a/packages/react-components/react-utilities/etc/react-utilities.api.md +++ b/packages/react-components/react-utilities/etc/react-utilities.api.md @@ -250,13 +250,7 @@ export { SelectionMode_2 as SelectionMode } export function setVirtualParent(child: Node, parent?: Node): void; // @public -export type Slot = IsSingleton> extends true ? WithSlotShorthandValue> : Type extends React_2.ComponentType ? WithSlotRenderFunction : Type> | { - [As in AlternateAs]: { - as: As; - } & WithSlotRenderFunction>; -}[AlternateAs] | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.'; +export type Slot = SlotProps | SlotShorthandValueFromType | null; declare namespace slot { export { diff --git a/packages/react-components/react-utilities/src/compose/types.ts b/packages/react-components/react-utilities/src/compose/types.ts index 59c2d1f9d86ac..e25a3180c0027 100644 --- a/packages/react-components/react-utilities/src/compose/types.ts +++ b/packages/react-components/react-utilities/src/compose/types.ts @@ -33,9 +33,25 @@ export type UnknownSlotProps = Pick, 'children /** * Helper type for {@link Slot}. Adds shorthand types that are assignable to the slot's `children`. */ -type WithSlotShorthandValue = - | Props - | Extract; +type SlotShorthandValueFromType = + IsSingleton> extends true + ? Extract< + SlotShorthandValue, + Type extends EmptyIntrinsicElements + ? never + : Type extends keyof JSX.IntrinsicElements + ? React.ReactNode + : Type extends React.ComponentType + ? 'children' extends keyof Props + ? Props['children'] + : never + : Type extends UnknownSlotProps + ? 'children' extends keyof Type + ? Type['children'] + : never + : never + > + : 'Error: Type of SlotShorthandValueFromType must not be an union of types. See documentation of Slot type.'; /** * Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children` @@ -100,20 +116,25 @@ type IntrinsicElementProps = Type exte export type Slot< Type extends keyof JSX.IntrinsicElements | React.ComponentType | React.VoidFunctionComponent | UnknownSlotProps, AlternateAs extends keyof JSX.IntrinsicElements = never, +> = SlotProps | SlotShorthandValueFromType | null; + +/** + * @internal + */ +type SlotProps< + Type extends keyof JSX.IntrinsicElements | React.ComponentType | React.VoidFunctionComponent | UnknownSlotProps, + AlternateAs extends keyof JSX.IntrinsicElements = never, > = IsSingleton> extends true ? - | WithSlotShorthandValue< - Type extends keyof JSX.IntrinsicElements // Intrinsic elements like `div` - ? { as?: Type } & WithSlotRenderFunction> - : Type extends React.ComponentType // Component types like `typeof Button` - ? WithSlotRenderFunction - : Type // Props types like `ButtonProps` - > - | { - [As in AlternateAs]: { as: As } & WithSlotRenderFunction>; - }[AlternateAs] - | null - : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.'; + | (Type extends keyof JSX.IntrinsicElements // Intrinsic elements like `div` + ? { as?: Type } & WithSlotRenderFunction> + : Type extends React.ComponentType // Component types like `typeof Button` + ? WithSlotRenderFunction + : Type) + | (AlternateAs extends unknown + ? { as: AlternateAs } & WithSlotRenderFunction> + : never) + : 'Error: First parameter to SlotProps must not be a union of types. See documentation of Slot type.'; /** * Evaluates to true if the given type contains exactly one string, or false if it is a union of strings.