import { ComponentStyles, ManagedClasses } from "@microsoft/fast-jss-manager"; import React from "react"; /** * Describes an interface for adjusting a styled component * per component instance */ export interface JSSManagedComponentProps { /** * The component instance stylesheet */ jssStyleSheet?: Partial>; /** * React reference to the component instance managed by the JSSManager */ innerRef?: React.LegacyRef>>; } /** Describes the JSS StyleSheet object * that is returned form jss.createStyleSheet */ export interface JSSStyleSheet { attached: boolean; classes: { [key: string]: string; }; options: { index: number; meta: string; }; attach(): JSSStyleSheet; update(config: unknown): JSSStyleSheet; } /** * Prop typing for the JSSManager */ export declare type ManagedJSSProps = Pick>> & JSSManagedComponentProps; export declare function mergeClassNames(a: string | void, b: string | void): string | void; export declare type JSSManagerSubscriptionEventType = "add" | "update" | "remove"; export declare type JSSManagerSubscriber = (data: { type: JSSManagerSubscriptionEventType; sheet: JSSStyleSheet; }) => void; declare abstract class JSSManager extends React.Component, {}> { /** * Define the contextType for the manager to be the design system context */ static contextType: React.Context; /** * Sets the JSS instance used by all JSSManger instances */ static set jss(instance: any); /** * Get the JSS instance used by all JSSManger instances */ static get jss(): any; static subscribe(subscriber: JSSManagerSubscriber): () => void; static unsubscribe(subscriber: JSSManagerSubscriber): void; /** * Retrieves a class name generation function that can be informed by the contextual design system. * Note that class-names are only generated once per sheet even if the contextual design system changes */ static createGenerateClassName: (designSystem: unknown) => (sheet: unknown, rules: unknown) => string; /** * JSS allows us to use an index to order the created style elements. The higher the index, * the later in the document the style element will be created. * * This static index allows us to globally track every stylesheet created by the JSSManager. Each * instance decrements this index and assigns itself the decremented value. The effect of this is that * a React parent will always have a higher index than it's children because react constructs trees * recursively starting at the root. With a parent always having a higher index then it's children, * we can inform JSS of this order preference and ensure parent stylesheets always come later in the DOM. * * Inspiration for this approach to style element ordering comes from * https://github.com/cssinjs/react-jss/blob/master/src/injectSheet.js */ private static index; /** * Manages stylesheets */ private static sheetManager; /** * React context instance data */ context: C; /** * The source style object that should be compiled into a StyleSheet */ protected abstract styles: ComponentStyles | void; /** * The component that should have styles and classes managed by the JSSManager */ protected abstract managedComponent: React.ComponentType>; /** * The stylesheet index for the JSSManager instance */ private index; /** * Simple switch to track the initial creation of styles. * Because the "styles" property is abstract and abstract properties * are not accessible in the constructor, we need to compile styles * inside the first call of the render function */ private hasCreatedIntialStyleSheets; /** * Store the design-system as an instance property because * react does not give us first-class support for detecting changes * to context values */ private designSystem; constructor(props: ManagedJSSProps, context: C); render(): JSX.Element; componentDidUpdate(prevProps: ManagedJSSProps): void; componentWillUnmount(): void; /** * Return the JSSStyleSheet associated with the current designSystem and style */ private primaryStyleSheet; /** * Return the JSSStylesheet associated with the jssStyleSheet prop */ private secondaryStyleSheet; /** * Generate a prop object to give to the managed component */ private managedComponentProps; /** * Returns the classes to pass down to the managed component */ private getManagedClassNames; private createPropStyleSheet; } export { JSSManager };