css-vars-hook/dist/index.umd.cjs.map

css-vars-hook contains React hooks to set and manipulate CSS custom properties from React component.

{"version":3,"file":"index.umd.cjs","sources":["../src/lib/RootTheme/RootContext.ts","../src/lib/RootTheme/useRootThemePublic.ts","../src/lib/utils.ts","../src/lib/RootTheme/useRootTheme.ts","../src/lib/RootTheme/RootThemeProvider.tsx","../src/lib/LocalTheme/LocalRoot.tsx","../src/lib/LocalTheme/useLocalTheme.tsx"],"sourcesContent":["import {useContext, createContext} from 'react';\n\nimport type {HookInterface} from './HookInterfaceType';\n\nexport const RootContext = createContext<HookInterface>({\n    setTheme: () => {},\n    getTheme: () => ({}),\n    setVariable: () => {},\n    getVariable: () => '',\n    removeVariable: () => {},\n});\n\nexport const useRootContext = () => useContext<HookInterface>(RootContext);\n","import {useRootContext} from './RootContext';\n\n/**\n * @public\n * React hook to apply multiple CSS variables to theme root and manipulate them.\n * `ThemeType` is defined on project level.\n * @see ThemeType\n * @see https://github.com/morewings/css-vars-hook#type-safety\n */\nexport const useRootThemePublic = () => {\n    const {setTheme, getTheme, setVariable, getVariable, removeVariable} =\n        useRootContext();\n    return {\n        /** Effect to apply new theme to the application */\n        setTheme,\n        /** Get current theme */\n        getTheme,\n        /** Effect to set new variable value within active theme */\n        setVariable,\n        /** Get variable value within active theme */\n        getVariable,\n        /** Effect to remove variable within active theme */\n        removeVariable,\n    };\n};\n","import type {MutableRefObject, CSSProperties} from 'react';\nimport type {ThemeType} from 'css-vars-hook';\n\nimport type {UnitType} from '@/lib/UnitType';\n\nconst normalizeUnit = (unit: UnitType) => {\n    if (typeof unit === 'string') {\n        return unit;\n    }\n    return `${unit}`;\n};\n\n/** @function\n * @name setCSSVariable\n * @description Set CSS variable at the provided DOM node\n */\nexport const setCSSVariable =\n    (element: HTMLElement) => (variableName: string, value: UnitType) => {\n        element.style.setProperty(`--${variableName}`, normalizeUnit(value));\n    };\n\n/** @function\n * @name removeCSSVariable\n * @description Remove CSS variable from the provided DOM node\n */\nexport const removeCSSVariable =\n    (ref: MutableRefObject<HTMLElement>) => (variableName: string) => {\n        const element = ref.current;\n        element?.style?.removeProperty?.(`--${variableName}`);\n    };\n\n/** @function\n * @name getCSSVariable\n * @description Get CSS variable value at the provided DOM node\n */\nexport const getCSSVariable =\n    (ref: MutableRefObject<HTMLElement>) => (variableName: string) => {\n        const element = ref.current;\n        return element?.style?.getPropertyValue?.(`--${variableName}`);\n    };\n\n/** @function\n * @name createStyleObject\n * @description Add `--` prefix to property names in theme object in order to make it applicable to DOM node\n */\nexport const createStyleObject = (theme: ThemeType): CSSProperties => {\n    const keys = Object.keys(theme);\n    const result = {} as ThemeType;\n    keys.forEach(key => {\n        result[`--${key}`] = theme[key];\n    });\n    return result;\n};\n\n/** @function\n * @name setRootVariable\n * @description Set CSS variable on theme root element\n */\nexport const setRootVariable =\n    (id: string) => (variableName: string, value: UnitType) => {\n        const root = document.getElementById(id)!;\n        root?.style?.setProperty?.(`--${variableName}`, normalizeUnit(value));\n    };\n\n/** @function\n * @name getRootVariable\n * @description Get CSS variable on theme root element\n */\nexport const getRootVariable =\n    (id: string) =>\n    (variableName: string): string => {\n        const root = document.getElementById(id)!;\n        return root?.style?.getPropertyValue?.(`--${variableName}`);\n    };\n\n/** @function\n * @name removeRootVariable\n * @description Remove CSS variable from theme root element\n */\nexport const removeRootVariable = (id: string) => (variableName: string) => {\n    const root = document.getElementById(id)!;\n    root?.style?.removeProperty?.(`--${variableName}`);\n};\n","import {useCallback, useMemo, useRef} from 'react';\nimport type {CSSProperties} from 'react';\nimport type {ThemeType} from 'css-vars-hook';\n\nimport type {UnitType} from '@/lib/UnitType';\n\nimport {\n    createStyleObject,\n    getRootVariable,\n    removeRootVariable,\n    setRootVariable,\n} from '../utils';\nimport type {HookInterface} from './HookInterfaceType';\n\n/**\n * @private\n * Logic for root theme handling such as updates and CSS style creation\n */\nexport const useRootTheme = (\n    theme: ThemeType,\n    id: string\n): HookInterface & {style: CSSProperties} => {\n    const themeRef = useRef(theme);\n\n    const setTheme = useCallback(\n        (nextTheme: ThemeType) => {\n            Object.keys(nextTheme).forEach(key => {\n                setRootVariable(id)(key, nextTheme[key]);\n            });\n\n            themeRef.current = nextTheme;\n        },\n        [id]\n    );\n\n    const getTheme = useCallback(() => themeRef.current, []);\n\n    const getVariable = useCallback(\n        (variableName: string) => getRootVariable(id)(variableName),\n        [id]\n    );\n    const setVariable = useCallback(\n        (variableName: string, value: UnitType) => {\n            setRootVariable(id)(variableName, value);\n            themeRef.current = {\n                ...themeRef.current,\n                [variableName]: value,\n            };\n        },\n        [id]\n    );\n\n    const removeVariable = useCallback(\n        (variableName: string) => {\n            removeRootVariable(id)(variableName);\n            const nextTheme = {...themeRef.current};\n            delete nextTheme[variableName];\n            themeRef.current = nextTheme;\n        },\n        [id]\n    );\n\n    const style = useMemo(() => createStyleObject(themeRef.current), []);\n\n    return {\n        /** Effect to apply new theme to the application */\n        setTheme,\n        /** CSSProperties object to apply to container div */\n        style,\n        /** Get current theme */\n        getTheme,\n        /** Get variable value within active theme */\n        getVariable,\n        /** Effect to set new variable value within active theme */\n        setVariable,\n        /** Effect to remove variable within active theme */\n        removeVariable,\n    };\n};\n","import type {FC, ReactNode} from 'react';\nimport {useMemo, useEffect, useId} from 'react';\nimport type {ThemeType} from 'css-vars-hook';\n\nimport type {DataAttributes, LibraryProps} from '../NativeProps';\nimport {RootContext} from './RootContext';\nimport {useRootTheme} from './useRootTheme';\n\n/**\n * @public\n */\nexport type RootThemeProviderProps = DataAttributes &\n    LibraryProps & {children: ReactNode; theme: ThemeType};\n\n/**\n * @public\n * Root theme context provider also creates div to contain CSS properties.\n * `ThemeType` is declared globally.\n * @see ThemeType\n * @see https://github.com/morewings/css-vars-hook#type-safety\n */\nexport const RootThemeProvider: FC<RootThemeProviderProps> = ({\n    children,\n    theme,\n    className,\n    id,\n    ...nativeProps\n}) => {\n    const backupId = useId();\n    const rootId = id ? id : backupId;\n    const {setTheme, style, getTheme, getVariable, setVariable, removeVariable} =\n        useRootTheme(theme, rootId);\n\n    const {Provider} = RootContext;\n\n    const actions = useMemo(\n        () => ({setTheme, getTheme, getVariable, setVariable, removeVariable}),\n        [setTheme, getTheme, getVariable, setVariable, removeVariable]\n    );\n\n    useEffect(() => {\n        setTheme(theme);\n    }, [theme, setTheme]);\n\n    return (\n        <Provider value={actions}>\n            <div {...nativeProps} id={rootId} className={className} style={style}>\n                {children}\n            </div>\n        </Provider>\n    );\n};\n","import type {HTMLAttributes, ReactNode} from 'react';\nimport {createElement, forwardRef, useEffect, useMemo} from 'react';\nimport type {ThemeType} from 'css-vars-hook';\n\nimport {createStyleObject} from '@/lib/utils';\nimport type {DataAttributes, LibraryProps} from '@/lib/NativeProps';\n\n/**\n * @public\n */\nexport type LocalRootProps = DataAttributes &\n    LibraryProps &\n    HTMLAttributes<HTMLElement> & {\n        children?: ReactNode;\n        /** Choose which HTMLElement to render as a root. div is default. */\n        as?: string;\n        /** Apply initial theme. */\n        theme?: ThemeType;\n        /** Provide theme setter function. */\n        setTheme?: (arg0: ThemeType) => void;\n    };\n\nexport const LocalRoot = forwardRef<HTMLElement, LocalRootProps>((props, ref) => {\n    // This is needed to fix an error introduced in version 0.6.14.\n    // Props were not transported to returned HTMLElement.\n    const {children, as = 'div', theme = {}, setTheme = () => {}, ...restProps} = props;\n\n    const initialStyle = useMemo(() => createStyleObject(theme), [theme]);\n\n    useEffect(() => {\n        setTheme(theme);\n    }, [theme, setTheme]);\n\n    return createElement(as, {...restProps, style: initialStyle, ref}, children);\n});\n\nLocalRoot.displayName = 'LocalRoot';\n","import {useCallback, useRef, useMemo} from 'react';\nimport type {ThemeType} from 'css-vars-hook';\n\nimport {setCSSVariable} from '@/lib/utils';\nimport type {UnitType} from '@/lib/UnitType';\n\nimport type {LocalRootProps} from './LocalRoot';\nimport {LocalRoot} from './LocalRoot';\n\n/**\n * @public\n * React hook to apply multiple CSS variables to generated local root element (LocalRoot) and manipulate them.\n * Theme type is inferred from provided theme parameter.\n * @example\n * const {setTheme, getTheme, LocalRoot, getVariable, setVariable} = useLocalTheme();\n * const setThemeIvory = () => {\n *   setTheme({foo: 'ivory'});\n *   console.log('full theme', getTheme()) // => {foo: 'ivory'};\n *   console.log('foo value', getVariable('foo')) // => 'ivory';\n *};\n * return <LocalRoot theme={{foo: 'bar'}} className=\"demo-local\">//...\n */\nexport const useLocalTheme = <TElement extends HTMLElement>() => {\n    const themeRef = useRef<ThemeType>();\n    const elementRef = useRef<TElement>(null);\n\n    const setTheme = useCallback((nextTheme: ThemeType) => {\n        Object.keys(nextTheme).forEach((key: string) => {\n            setCSSVariable(elementRef.current!)(key, nextTheme[key]);\n        });\n\n        themeRef.current = nextTheme;\n    }, []);\n\n    const getTheme = useCallback(() => themeRef.current, []);\n\n    const getVariable = useCallback(\n        (variableName: string) => themeRef.current?.[variableName],\n        []\n    );\n\n    const setVariable = useCallback((variableName: string, variableValue: UnitType) => {\n        setCSSVariable(elementRef.current!)(variableName, variableValue);\n        themeRef.current = {...themeRef.current, [variableName]: variableValue};\n    }, []);\n\n    const MemoRoot = useMemo(\n        () =>\n            // eslint-disable-next-line react/display-name\n            ({children, ...restProps}: Omit<LocalRootProps, 'setTheme'>) => (\n                <LocalRoot {...restProps} setTheme={setTheme} ref={elementRef}>\n                    {children}\n                </LocalRoot>\n            ),\n        [setTheme]\n    );\n\n    return {\n        /** Effect to apply new theme to LocalRoot */\n        setTheme,\n        /** Get current theme set for LocalRoot */\n        getTheme,\n        /** Wrapper component which creates DOM node to store theme data */\n        LocalRoot: MemoRoot,\n        /** React Mutable Ref object attached to LocalRoot */\n        ref: elementRef,\n        /** Get variable value within LocalRoot theme */\n        getVariable,\n        /** Effect to set new variable value within LocalRoot theme */\n        setVariable,\n    };\n};\n"],"names":["RootContext","createContext","useRootContext","useContext","useRootThemePublic","setTheme","getTheme","setVariable","getVariable","removeVariable","normalizeUnit","unit","setCSSVariable","element","variableName","value","createStyleObject","theme","keys","result","key","setRootVariable","id","root","_b","_a","getRootVariable","removeRootVariable","useRootTheme","themeRef","useRef","useCallback","nextTheme","style","useMemo","RootThemeProvider","children","className","nativeProps","backupId","useId","rootId","Provider","actions","useEffect","jsx","LocalRoot","forwardRef","props","ref","as","restProps","initialStyle","createElement","useLocalTheme","elementRef","variableValue","MemoRoot"],"mappings":"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"}