@dyst/react/dist/StyleSheet.d.ts

Dynamic Css-in-Js styles engine, based on Emotion for React

import { CXType } from './css/CssFactory';
import { Interpolation } from '@emotion/react';
import { EmotionCache, Options } from '@emotion/cache';
export declare class StyleSheet<TTheme extends Record<string, any> = {}> {
    useTheme: () => TTheme;
    readonly key: string;
    readonly cache: EmotionCache;
    /**
     * Create dynamic style sheets and link them to functional components
     * using the React hook pattern.
     *
     * @param config - Configuration object
     */
    constructor(config?: StyleSheetConfig<TTheme>);
    /**
     * Indicator for the chain methods to work with `params`.
     *
     * Typescript:
     * Via this method the generic for the `params` object can be specified.
     * The `params` generic had to be excluded from the actual `create()` method
     * due to partial type inference of `TStyles`.
     * https://stackoverflow.com/questions/63678306/typescript-partial-type-inference
     *
     * @public
     */
    withParams<TParams extends Record<string, any> = Record<string, any>>(): {
        create: <TStyles extends StylesData = StylesData>(styles: StylesType<TParams, TStyles, TTheme, true>) => (params: TParams, config?: UseStylesConfigType<TStyles, TTheme> | undefined) => UseStylesReturnType<TStyles, TTheme>;
    };
    /**
     * Indicator for the cain methods to work without `params`.
     *
     * @public
     */
    withoutParams(): {
        create: <TStyles extends StylesData = StylesData>(styles: StylesType<{}, TStyles, TTheme, false>) => (config?: UseStylesConfigType<TStyles, TTheme> | undefined) => UseStylesReturnType<TStyles, TTheme>;
    };
    /**
     * Transfers the (in object shape or emotion style) specified stylesheet
     * into class names that can be accessed via the returned `useStyles()` hook.
     *
     * The returned `useStyles()` hook should be used in React components
     * to access the generated style class names and other utilities
     * for working with emotion-based class names.
     *
     * @public
     * @param styles - Stylesheet to be transferred into class names.
     */
    create<TParams extends Record<string, any> = Record<string, any>, TStyles extends StylesData = StylesData>(styles: StylesType<TParams, TStyles, TTheme, true>): (params: TParams, config?: UseStylesConfigType<TStyles, TTheme> | undefined) => UseStylesReturnType<TStyles, TTheme>;
    /**
     * Internal helper to transfer the (in object shape or emotion style) specified stylesheet
     * into class names that can be accessed via the returned `useStyles()` hook.
     *
     * @internal
     * @param withParams - Whether to create the stylesheet with params (Helper property for Typescript).
     * @param styles - Stylesheet to be transferred into class names.
     */
    private createStyles;
    /**
     * React Hook that returns the memorized `cx()` and `css()` method,
     * that can be used to easily handle emotion based styles.
     *
     * @public
     */
    useCss(): {
        css: import("./css/CssFactory").CSSType;
        cx: CXType;
    };
    /**
     * React Hook that returns the cache instance provided by the enclosed 'CacheProvider'
     * or an internally managed cache instance if no 'CacheProvider' could be found.
     *
     * @public
     */
    useCache(): any;
    /**
     * Merges the specified class names
     * with the expanding class names at the corresponding key.
     *
     * @internal
     * @param classNames - Class names key map to merge the expanding class names in.
     * @param expandingClassNames - Expanding class names key map to be merged into the specified class names.
     * @param cx - CX method for merging.
     * @param name - Key/Name identifier to be contained in each merged class name.
     */
    private mergeClassNames;
}
export declare type StyleSheetConfig<TTheme> = {
    /**
     * Key/Name identifier of the StyleSheet
     * @default 'cs'
     */
    key?: string;
    /**
     * Options for configuring the Emotion Cache the StyleSheet relies on.
     * @default { prepend: true }
     */
    cache?: Omit<Options, 'key'>;
    /**
     * Theme the Stylesheet should work with.
     * @default undefined
     */
    theme?: TTheme | (() => TTheme);
};
export declare type StyleItem = TemplateStringsArray | Interpolation<any>;
export declare type StylesData = Record<string, StyleItem>;
declare type StylesType<TParams extends Record<string, any>, TStyles extends StylesData, TTheme, TWithParams extends boolean> = TStyles | ((props: StylesPropsType<TParams, TTheme, TWithParams>) => TStyles);
declare type StylesPropsType<TParams extends Record<string, any>, TTheme, TWithParams extends boolean> = TWithParams extends true ? BaseStylesPopsType<TParams, TTheme> : Omit<BaseStylesPopsType<TParams, TTheme>, 'params'>;
declare type BaseStylesPopsType<TParams extends Record<string, any>, TTheme> = {
    theme: TTheme;
    params: TParams;
    createRef: (refName: string) => string;
    assignRef: (refName: string, style: StyleItem) => string;
};
export declare type ExpandedStylesType<TStyles extends StylesData, TTheme> = Partial<MapToX<TStyles, StyleItem>> | ((theme: TTheme) => Partial<MapToX<TStyles, StyleItem>>);
export declare type UseStylesType<TParams extends Record<string, any> | undefined, TStyles extends StylesData, TTheme, TWithParams extends boolean> = TWithParams extends true ? (params: TParams, config?: UseStylesConfigType<TStyles, TTheme>) => UseStylesReturnType<TStyles, TTheme> : (config?: UseStylesConfigType<TStyles, TTheme>) => UseStylesReturnType<TStyles, TTheme>;
declare type UseStylesConfigType<TStyles extends StylesData, TTheme> = {
    /**
     * Styles keymap to extend the styles specified in the 'createStyles()' method.
     * @default {}
     */
    styles?: ExpandedStylesType<TStyles, TTheme>;
    /**
     * ClassNames keymap to extend the styles specified in the 'createStyles()' method.
     *
     * ClassNames can also specified in the 'styles' property,
     * however in case we need additional styles (e.g. that depend on a local property)
     * beside the className styles this property exists.
     * @default {}
     */
    classNames?: Partial<MapToX<TStyles, string>>;
    /**
     * Key/Name identifier of the created style sheet.
     *
     * The here specified name is used to create a readable 'static selector'
     * for styling with e.g. scss, ..
     * This class name has initially no styling applied.
     * e.g. 'prefix-${name}-root' or 'prefix-${name}-container'
     *
     * @default 'unknown'
     */
    name?: string;
};
declare type UseStylesReturnType<TStyles extends StylesData, TTheme> = {
    /**
     * Merges the specified class names.
     *
     * It has the same api as the popular [clsx](https://www.npmjs.com/package/clsx) package.
     *
     * The key advantage of `cx` is that it detects emotion generated class names
     * ensuring styles are overwritten in the correct order.
     * Emotion generated styles are applied from left to right.
     * Subsequent styles overwrite property values of previous styles.
     *
     * More: https://emotion.sh/docs/@emotion/css#cx
     *
     * @param args - Arguments to be merged together.
     */
    cx: CXType;
    /**
     * Class names keymap based on the styles key map
     * specified in the 'createStyles()' method.
     */
    classes: MapToX<TStyles, string>;
    /**
     * Theme the created stylesheet used.
     */
    theme: TTheme;
};
export declare type UseStylesExtractStylesType<T> = T extends UseStylesType<infer TParams, infer TStyles, infer TTheme, infer TWithParams> ? ExpandedStylesType<TStyles, TTheme> : never;
declare type MapToX<T, X = any> = {
    [K in keyof T]: X;
};
export {};