import * as React from 'react'; import { IStyle, IStyleSetBase, ITheme } from '@fluentui/style-utilities'; /** * Helper interface for accessing user props children. * @deprecated Use React.PropsWithChildren. */ export type IPropsWithChildren = React.PropsWithChildren; /** * Helper type defining style sections, one for each component slot. */ export type IComponentStyles = { [key in keyof TSlots]?: IStyle; }; /** * Function declaration for component styles functions. */ export type IStylesFunction = (props: TViewProps, theme: ITheme, tokens: TTokens) => TStyleSet; /** * Composite type for component styles functions and objects. */ export type IStylesFunctionOrObject = IStylesFunction | TStyleSet; /** * Tokens can be defined as an object, function, or an array of objects and functions. */ export type IToken = ITokenBase | ITokenBaseArray; /** * Function declaration for component token functions. */ export type ITokenFunction = (props: TViewProps, theme: ITheme) => IToken; /** * Composite type for component token functions and objects. */ export type ITokenFunctionOrObject = ITokenFunction | TTokens; /** * Composite base type that includes all possible resolutions of token functions in an array. */ export type ITokenBase = ITokenFunctionOrObject | false | null | undefined; /** * Composite token base array type allowing for token objects, functions, and function resolutions. */ export interface ITokenBaseArray extends Array> { } /** * Optional props for styleable components. If these props are present, they will automatically be * used by Foundation when applying theming and styling. */ export interface IStyleableComponentProps { className?: string; styles?: IStylesFunctionOrObject; theme?: ITheme; tokens?: ITokenFunctionOrObject; } export type ICustomizationProps = IStyleableComponentProps & Required, 'theme'>>; /** * Defines the contract for state components. */ export type IStateComponentType = (props: Readonly) => TViewProps; /** * Defines the contract for view components. */ export type IViewComponent = (props: React.PropsWithChildren) => ReturnType; /** * Component options used by foundation to tie elements together. * * * TComponentProps: A styleable props interface for the created component. * * TTokens: The type for tokens props. * * TStyleSet: The type for styles properties. * * TViewProps: The props specific to the view, including processed properties outputted by optional state component. * If state component is not provided, TComponentProps is the same as TViewProps. * * TStatics: Static type for statics applied to created component object. */ export interface IComponentOptions { /** * Display name to identify component in React hierarchy. This parameter is required for targeted component styling * via theming. */ displayName?: string; /** * List of fields which can be customized. */ fields?: string[]; /** * Styles prop to pass into component. */ styles?: IStylesFunctionOrObject; /** * Optional state component that processes TComponentProps into TViewProps. */ state?: IStateComponentType; /** * Optional static object to assign to constructed component. */ statics?: TStatics; /** * Tokens prop to pass into component. */ tokens?: ITokenFunctionOrObject; /** * Default prop for which to map primitive values. */ factoryOptions?: IFactoryOptions; } /** * Component helper that defines options as required for ease of use by component consumers. */ export type IComponent = Required> & { /** * Component that generates view output. */ view: IViewComponent; }; /** * Factory options for creating component. */ export interface IFactoryOptions { /** * Default prop for which to map primitive values. */ defaultProp?: keyof TProps | 'children'; }