@equinor/fusion-react-styles/dist/StyleProvider.js

style lib inspired by @material-ui/styles

import { jsx as _jsx } from "react/jsx-runtime";
import { useContext, useMemo } from 'react';
import { StylesContext } from './utils/contexts';
import { createJssInstance } from './utils/jss-setup';
import { createGenerateClassName } from './utils/class-name-generator';
/**
 * Provides JSS configuration to child components
 *
 * This component creates an isolated styling scope. When nested, each provider
 * can have its own seed prefix, ensuring class names don't collide between scopes.
 * This is critical for dynamically loaded modules or micro-frontends.
 *
 * @param props - Configuration options for the styles provider
 * @returns A React element that provides JSS context to children
 *
 * @example
 * ```tsx
 * <StylesProvider seed="my-module">
 *   <App />
 * </StylesProvider>
 * ```
 *
 * @example
 * ```tsx
 * // Nested providers with different seeds for isolation
 * <StylesProvider seed="main-app">
 *   <MainApp />
 *   <StylesProvider seed="dynamic-module">
 *     <DynamicModule />
 *   </StylesProvider>
 * </StylesProvider>
 * ```
 */
export function StylesProvider(props) {
    const { children, generateClassName: providedGenerateClassName, jss: providedJss, seed, sheetsManager: providedSheetsManager, ...localOptions } = props;
    // Get context from parent StylesProvider (if nested)
    // Allows nested providers to inherit or override parent configuration
    const outerOptions = useContext(StylesContext);
    // Determine which class name generator to use (priority: provided > seed > parent)
    // Memoization prevents recreating generator on every render
    const generateClassName = useMemo(() => {
        // If explicitly provided, use it
        if (providedGenerateClassName)
            return providedGenerateClassName;
        // If seed is provided, create a new generator with that seed (isolated scope)
        // Seed creates isolated scope for class names, preventing collisions
        if (seed)
            return createGenerateClassName(seed);
        // Otherwise, inherit from parent context
        return outerOptions.generateClassName;
    }, [providedGenerateClassName, seed, outerOptions.generateClassName]);
    // Determine which JSS instance to use (priority: provided > parent > default)
    // Allows custom JSS instances for testing or advanced use cases
    const jss = providedJss || outerOptions.jss || createJssInstance();
    // Use provided sheets manager or inherit from parent
    // Sheets manager is kept for API compatibility, but currently unused
    const sheetsManager = providedSheetsManager || outerOptions.sheetsManager;
    // Create context value with resolved options
    const context = {
        jss,
        generateClassName,
        sheetsManager,
        ...localOptions,
    };
    return _jsx(StylesContext.Provider, { value: context, children: children });
}
StylesProvider.displayName = 'StylesProvider';
export default StylesProvider;