import { ISchemeNames } from '@fluentui/style-utilities'; import { IStyle } from '@fluentui/style-utilities'; import { IStyleSetBase } from '@fluentui/style-utilities'; import { ITheme } from '@fluentui/style-utilities'; import { styled as legacyStyled } from '@fluentui/utilities'; import * as React_2 from 'react'; /** * Assembles a higher order component based on the following: styles, theme, view, and state. * Imposes a separation of concern and centralizes styling processing to increase ease of use and robustness * in how components use and apply styling and theming. * * Automatically merges and applies themes and styles with theme / styleprops having the highest priority. * State component, if provided, is passed in props for processing. Props from state / user are automatically processed * and styled before finally being passed to view. * * State components should contain all stateful behavior and should not generate any JSX, but rather simply call * the view prop. * * Views should simply be stateless pure functions that receive all props needed for rendering their output. * * State component is optional. If state is not provided, created component is essentially a functional * stateless component. * * @param options - component Component options. See IComponentOptions for more detail. */ export declare function createComponent(view: IViewComponent, options?: IComponentOptions): React_2.FunctionComponent & TStatics; /** * This function creates factories that render ouput depending on the user ISlotProp props passed in. * @param DefaultComponent - Base component to render when not overridden by user props. * @param options - Factory options, including defaultProp value for shorthand prop mapping. * @returns ISlotFactory function used for rendering slots. */ export declare function createFactory(DefaultComponent: React_2.ComponentType, options?: IFactoryOptions): ISlotFactory; /** * Extracts props type from ISlotProp definition. */ export declare type ExtractProps = TUnion extends ISlotProp ? TProps : never; /** * Extracts shorthand type from union of ValidShorthand types. */ export declare type ExtractShorthand = TUnion extends boolean ? boolean : TUnion extends number ? number : TUnion extends string ? string : never; /** * Simple controlled helper that gives priority to props value and falls back to derived value. * * @param props - The props object containing controlled prop values. * @param propName - The controlled prop name. * @param derivedValue - Derived value. Returned when controlled value is not present. */ export declare function getControlledDerivedProps(props: Readonly, propName: TProp, derivedValue: TProps[TProp]): TProps[TProp]; /** * This function generates slots that can be used in JSX given a definition of slots and their corresponding types. * @param userProps - Props as pass to component. * @param slots - Slot definition object defining the default slot component for each slot. * @returns A set of created slots that components can render in JSX. */ export declare function getSlots, TComponentSlots>(userProps: TComponentProps, slots: ISlotDefinition>): ISlots>; /** * Component helper that defines options as required for ease of use by component consumers. */ export declare type IComponent = Required> & { /** * Component that generates view output. */ view: IViewComponent; }; /** * 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 declare 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; } /** * Helper type defining style sections, one for each component slot. */ export declare type IComponentStyles = { [key in keyof TSlots]?: IStyle; }; export declare interface IControlledStateOptions { defaultPropValue?: TProps[TProp]; defaultPropName?: TDefaultProp; } export declare type ICustomizationProps = IStyleableComponentProps & Required, 'theme'>>; /** * Defines user properties that are automatically applied by Slot utilities using slot name. */ export declare interface IDefaultSlotProps { _defaultStyles: IComponentStyles; } /** * Factory options for creating component. */ export declare interface IFactoryOptions { /** * Default prop for which to map primitive values. */ defaultProp?: keyof TProps | 'children'; } /** * Optional HTML element typing to confine or expand HTML attribute usage for an intrinsic slot. * Useful for slots that need to allow access to specialized HTML attributes, such as for buttons and inputs. * Example usage: root?: IHTMLElementSlot\<'button'\>; */ export declare type IHTMLElementSlot = ISlotProp; /** * Generic slot definition allowing common HTML attributes. Applicable for most intrinsic slots. Please note certain * elements such as buttons and inputs should make use of IHTMLElementSlot to provide access to specialized attributes * of those elements. */ export declare type IHTMLSlot = ISlotProp, any>>; /** * Props generated by Foundation. */ export declare interface IProcessedSlotProps { className?: string; } /** * Helper interface for accessing user props children. * @deprecated Use React.PropsWithChildren. */ export declare type IPropsWithChildren = React_2.PropsWithChildren; /** * Created Slot structure used for rendering by components. */ export declare interface ISlot { (componentProps: React_2.PropsWithChildren | undefined | null): ReturnType; isSlot?: boolean; } /** * Signature of components that have component factories. */ export declare interface ISlotCreator { create?: ISlotFactory; } /** * An interface for defining slots. Each key in TSlot must point to an ISlottableType. */ export declare type ISlotDefinition = { [slot in keyof TSlots]: React_2.ElementType>; }; /** * Interface for a slot factory that consumes both component and user slot prop and generates rendered output. */ export declare type ISlotFactory = (componentProps: TProps & IProcessedSlotProps, userProps: ISlotProp, slotOptions: ISlotOptions | undefined, defaultStyles: IStyle, theme?: ITheme) => ReturnType>; /** * Defines the slot options object for all slot props: * 1. ISlotRender function. * 2. React component with TProps interface. */ export declare interface ISlotOptions { component?: React_2.ElementType; render?: ISlotRender; } /** * Defines the primary slot prop interface components should use to define their slot props. */ export declare type ISlotProp = TShorthandProp | TProps; /** * Content rendering provided by component. */ export declare type ISlotRender = (props: React_2.PropsWithChildren, defaultComponent: React_2.ComponentType) => ReturnType>; /** * Interface for aggregated slots objects used internally by components. Extract the TProps type passed * into ISlotProp to define the ISlot using TProps. */ export declare type ISlots = { [slot in keyof TSlots]: ISlot>; }; /** * Slottable version of React.ComponentType. */ export declare type ISlottableComponentType = React_2.ComponentType & ISlotCreator; /** * Automatically defines 'slots' prop based on TSlots props. */ export declare type ISlottableProps = TSlots & { slots?: { [key in keyof TSlots]+?: ISlotOptions>; }; }; /** * Slottable version of React.ReactType. */ export declare type ISlottableReactType = React_2.ElementType & ISlotCreator; /** * Defines the contract for state components. */ export declare type IStateComponentType = (props: Readonly) => TViewProps; /** * Optional props for styleable components. If these props are present, they will automatically be * used by Foundation when applying theming and styling. */ export declare interface IStyleableComponentProps { className?: string; styles?: IStylesFunctionOrObject; theme?: ITheme; tokens?: ITokenFunctionOrObject; } /** * Function declaration for component styles functions. */ export declare type IStylesFunction = (props: TViewProps, theme: ITheme, tokens: TTokens) => TStyleSet; /** * Composite type for component styles functions and objects. */ export declare type IStylesFunctionOrObject = IStylesFunction | TStyleSet; export declare interface IThemeProviderProps { scheme?: ISchemeNames; theme?: ITheme; } /** * Tokens can be defined as an object, function, or an array of objects and functions. */ export declare type IToken = ITokenBase | ITokenBaseArray; /** * Composite base type that includes all possible resolutions of token functions in an array. */ export declare type ITokenBase = ITokenFunctionOrObject | false | null | undefined; /** * Composite token base array type allowing for token objects, functions, and function resolutions. */ export declare interface ITokenBaseArray extends Array> { } /** * Function declaration for component token functions. */ export declare type ITokenFunction = (props: TViewProps, theme: ITheme) => IToken; /** * Composite type for component token functions and objects. */ export declare type ITokenFunctionOrObject = ITokenFunction | TTokens; /** * Defines the contract for view components. */ export declare type IViewComponent = (props: React_2.PropsWithChildren) => ReturnType; export { legacyStyled } /** * Theme provider is a simplified version of Customizer that activates the appropriate theme data * for a given scheme name. * * @param providers - Injected providers for accessing theme data and providing it via a Customizer component. * @deprecated This is an old ThemeProvider implementation. New code should use the ThemeProvider exported from * `@fluentui/react` (or `@fluentui/react/lib/Theme`) instead. */ export declare const ThemeProvider: React_2.FunctionComponent; /** * Controlled state helper that gives priority to props value. Useful for components that have props with both * controlled and uncontrolled modes. Any props values will override state, but will not update internal state. * If prop is defined and then later undefined, state will revert to its previous value. * * @param props - The props object containing controlled prop values. * @param propName - The controlled prop name. * @param options - Options. defaultPropValue is only used if defaultPropName (or its value) is undefined. */ export declare function useControlledState(props: Readonly, propName: TProp, options?: IControlledStateOptions): [TProps[TProp] | undefined, React_2.Dispatch>]; /** * Defines valid prop types. */ export declare type ValidProps = object; /** * Defines valid shorthand prop types. These should match the defaultProp type provided to createComponent. */ export declare type ValidShorthand = string | number | boolean; /** * This function is required for any module that uses slots. * * This function is a slot resolver that automatically evaluates slot functions to generate React elements. * A byproduct of this resolver is that it removes slots from the React hierarchy by bypassing React.createElement. * * To use this function on a per-file basis, use the jsx directive targeting withSlots. * This directive must be the FIRST LINE in the file to work correctly. * Usage of this pragma also requires withSlots import statement. * * See React.createElement */ export declare function withSlots

(type: ISlot

| React_2.FunctionComponent

| string, props?: (React_2.Attributes & P) | null, ...children: React_2.ReactNode[]): ReturnType>; export { }