import { ComponentSlotStyle , ComponentSlotStylesResolved , ComponentVariablesInput , DebugData , emptyTheme , } from '@fluentui/styles' ; import * as React from 'react' ; import { ThemeContext } from 'react-fela' ; import { ComponentDesignProp , ComponentSlotClasses , PrimitiveProps , RendererRenderRule , StylesContextValue , } from '../styles/types' ; import getStyles from '../styles/getStyles' ; type UseStylesOptions < StyleProps extends PrimitiveProps > = { className ? : string ; mapPropsToStyles ? : ( ) => StyleProps ; mapPropsToInlineStyles ? : ( ) => InlineStyleProps < StyleProps > ; rtl ? : boolean ; } ; type UseStylesResult = { classes : ComponentSlotClasses ; styles : ComponentSlotStylesResolved ; } ; type InlineStyleProps < StyleProps > = { /** Additional CSS class name(s) to apply.  */ className ? : string ; design ? : ComponentDesignProp ; /** Additional CSS styles to apply to the component instance.  */ styles ? : ComponentSlotStyle < StyleProps , any > ; /** Override for theme site variables to allow modifications of component styling via themes. */ variables ? : ComponentVariablesInput ; } ; const defaultContext = { disableAnimations : false , performance : { enableSanitizeCssPlugin : process . env . NODE_ENV !== 'production' , enableStylesCaching : true , enableVariablesCaching : true , } , renderer : { renderRule : ( ) => '' } , theme : emptyTheme , } ; const useStyles = < StyleProps extends PrimitiveProps > ( displayName , options ) : UseStylesResult => { const context = React . useContext ( ThemeContext ) || defaultContext ; const { className = process . env . NODE_ENV === 'production' ? '' : 'no-classname-🙉' , mapPropsToStyles = ( ) => ( { } as StyleProps ) , mapPropsToInlineStyles = ( ) => ( { } as InlineStyleProps < StyleProps > ) , rtl = false , } = options ; const debug = React . useRef < { fluentUIDebug : DebugData | null ; } > ( { fluentUIDebug : null } ) ; const { classes , styles : resolvedStyles } = getStyles ( { className , displayName , props : { ... mapPropsToStyles ( ) , ... mapPropsToInlineStyles ( ) , } , disableAnimations : context . disableAnimations , renderer : context . renderer , rtl , saveDebug : fluentUIDebug => ( debug . current = { fluentUIDebug } ) , theme : context . theme , performance : context . performance , } ) ; return { classes , styles : resolvedStyles } ; } ; export default useStyles ;