import * as React from 'react'; import { IStyle, ITheme } from '@fluentui/style-utilities'; import { IComponentStyles } from './IComponent'; /** * Signature of components that have component factories. */ export interface ISlotCreator { create?: ISlotFactory; } /** * Slottable version of React.ComponentType. */ export type ISlottableComponentType = React.ComponentType & ISlotCreator; /** * Slottable version of React.ReactType. */ export type ISlottableReactType = React.ElementType & ISlotCreator; /** * Props generated by Foundation. */ export interface IProcessedSlotProps { className?: string; } /** * An interface for defining slots. Each key in TSlot must point to an ISlottableType. */ export type ISlotDefinition = { [slot in keyof TSlots]: React.ElementType>; }; /** * Created Slot structure used for rendering by components. */ export interface ISlot { (componentProps: React.PropsWithChildren | undefined | null): ReturnType; isSlot?: boolean; } /** * Interface for a slot factory that consumes both component and user slot prop and generates rendered output. */ export type ISlotFactory = (componentProps: TProps & IProcessedSlotProps, userProps: ISlotProp, slotOptions: ISlotOptions | undefined, defaultStyles: IStyle, theme?: ITheme) => ReturnType>; /** * Defines valid shorthand prop types. These should match the defaultProp type provided to createComponent. */ export type ValidShorthand = string | number | boolean; /** * Defines valid prop types. */ export type ValidProps = object; /** * Extracts props type from ISlotProp definition. */ export type ExtractProps = TUnion extends ISlotProp ? TProps : never; /** * Extracts shorthand type from union of ValidShorthand types. */ export type ExtractShorthand = TUnion extends boolean ? boolean : TUnion extends number ? number : TUnion extends string ? string : never; /** * Interface for aggregated slots objects used internally by components. Extract the TProps type passed * into ISlotProp to define the ISlot using TProps. */ export type ISlots = { [slot in keyof TSlots]: ISlot>; }; /** * Automatically defines 'slots' prop based on TSlots props. */ export type ISlottableProps = TSlots & { slots?: { [key in keyof TSlots]+?: ISlotOptions>; }; }; /** * Defines user properties that are automatically applied by Slot utilities using slot name. */ export interface IDefaultSlotProps { _defaultStyles: IComponentStyles; } /** * Defines the primary slot prop interface components should use to define their slot props. */ export type ISlotProp = TShorthandProp | TProps; /** * Defines the slot options object for all slot props: * 1. ISlotRender function. * 2. React component with TProps interface. */ export interface ISlotOptions { component?: React.ElementType; render?: ISlotRender; } /** * Content rendering provided by component. */ export type ISlotRender = (props: React.PropsWithChildren, defaultComponent: React.ComponentType) => ReturnType>;