@mirohq/design-system-theme-provider 0.3.44 → 0.3.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +1 -4
- package/dist/main.js.map +1 -1
- package/dist/module.js +1 -4
- package/dist/module.js.map +1 -1
- package/package.json +4 -4
package/dist/main.js
CHANGED
|
@@ -28,10 +28,7 @@ const ThemeProvider = ({
|
|
|
28
28
|
if (currentThemeExists) {
|
|
29
29
|
themeToUse = theme;
|
|
30
30
|
}
|
|
31
|
-
const classNameTheme = (currentThemeExists || defaultThemeExists) && themeToUse !== "" ? (
|
|
32
|
-
// @ts-expect-error
|
|
33
|
-
designSystemStitches.createTheme(themes[themeToUse]).className
|
|
34
|
-
) : "";
|
|
31
|
+
const classNameTheme = (currentThemeExists || defaultThemeExists) && themeToUse !== "" ? designSystemStitches.createTheme(themes[themeToUse]).className : "";
|
|
35
32
|
const classThemeRef = react.useRef(classNameTheme);
|
|
36
33
|
react.useEffect(() => {
|
|
37
34
|
if (classThemeRef.current !== classNameTheme) {
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/theme-provider.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { createTheme, stitchesCssRoot } from '@mirohq/design-system-stitches'\nimport { useTheme } from '@mirohq/design-system-use-theme'\nimport type { Theme } from '@mirohq/design-system-themes'\n\ninterface ThemesProp {\n [Key: string]: Partial<Theme>\n}\n\nexport interface ThemeProviderProps<Themes extends ThemesProp = ThemesProp> {\n /**\n * The default theme to use if no theme is provided.\n */\n defaultTheme?: keyof Themes\n\n /**\n * Theme config for all available themes.\n */\n themes?: Themes\n\n /**\n * Applies theme className to the body.\n */\n root?: boolean\n\n /**\n * The children to render.\n */\n children?: React.ReactNode\n}\n\nexport const ThemeProvider = <Themes extends ThemesProp = ThemesProp>({\n defaultTheme,\n themes,\n children,\n root = false,\n}: ThemeProviderProps<Themes>): JSX.Element => {\n let themeToUse = ''\n const { theme } = useTheme()\n\n const defaultThemeExists =\n defaultTheme !== undefined && themes?.[defaultTheme] !== undefined\n\n const currentThemeExists = theme != null && themes?.[theme] !== undefined\n\n if (!currentThemeExists && defaultThemeExists) {\n themeToUse = defaultTheme.toString()\n }\n\n if (!defaultThemeExists && theme == null) {\n console.warn(\n 'Default theme not found, falling back to the Miro Design System basics.'\n )\n }\n\n if (currentThemeExists) {\n themeToUse = theme\n }\n\n const classNameTheme =\n (currentThemeExists || defaultThemeExists) && themeToUse !== ''\n ?
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/theme-provider.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { createTheme, stitchesCssRoot } from '@mirohq/design-system-stitches'\nimport { useTheme } from '@mirohq/design-system-use-theme'\nimport type { Theme } from '@mirohq/design-system-themes'\n\ninterface ThemesProp {\n [Key: string]: Partial<Theme>\n}\n\nexport interface ThemeProviderProps<Themes extends ThemesProp = ThemesProp> {\n /**\n * The default theme to use if no theme is provided.\n */\n defaultTheme?: keyof Themes\n\n /**\n * Theme config for all available themes.\n */\n themes?: Themes\n\n /**\n * Applies theme className to the body.\n */\n root?: boolean\n\n /**\n * The children to render.\n */\n children?: React.ReactNode\n}\n\nexport const ThemeProvider = <Themes extends ThemesProp = ThemesProp>({\n defaultTheme,\n themes,\n children,\n root = false,\n}: ThemeProviderProps<Themes>): JSX.Element => {\n let themeToUse = ''\n const { theme } = useTheme()\n\n const defaultThemeExists =\n defaultTheme !== undefined && themes?.[defaultTheme] !== undefined\n\n const currentThemeExists = theme != null && themes?.[theme] !== undefined\n\n if (!currentThemeExists && defaultThemeExists) {\n themeToUse = defaultTheme.toString()\n }\n\n if (!defaultThemeExists && theme == null) {\n console.warn(\n 'Default theme not found, falling back to the Miro Design System basics.'\n )\n }\n\n if (currentThemeExists) {\n themeToUse = theme\n }\n\n const classNameTheme =\n (currentThemeExists || defaultThemeExists) && themeToUse !== ''\n ? createTheme(themes[themeToUse]).className\n : ''\n\n const classThemeRef = useRef<string>(classNameTheme)\n\n useEffect(() => {\n if (classThemeRef.current !== classNameTheme) {\n if (root && classThemeRef.current !== '') {\n document.body.classList.remove(classThemeRef.current)\n }\n\n classThemeRef.current = classNameTheme\n }\n\n if (root) {\n if (classNameTheme !== '') {\n document.body.classList.add(classNameTheme)\n }\n\n document.body.dataset.theme = themeToUse\n }\n }, [classNameTheme, root, themeToUse])\n\n if (root) {\n return <>{children}</>\n }\n\n return (\n <div\n data-theme-provider\n data-theme={theme === '' ? undefined : theme}\n className={`${stitchesCssRoot.className} ${classNameTheme}`}\n >\n {children}\n </div>\n )\n}\n"],"names":["useTheme","createTheme","useRef","useEffect","jsx","stitchesCssRoot"],"mappings":";;;;;;;;;AA+BO,MAAM,gBAAgB,CAAyC;AAAA,EACpE,YAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAO,GAAA,KAAA;AACT,CAA+C,KAAA;AAC7C,EAAA,IAAI,UAAa,GAAA,EAAA,CAAA;AACjB,EAAM,MAAA,EAAE,KAAM,EAAA,GAAIA,6BAAS,EAAA,CAAA;AAE3B,EAAA,MAAM,kBACJ,GAAA,YAAA,KAAiB,KAAa,CAAA,IAAA,CAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,YAAkB,CAAA,MAAA,KAAA,CAAA,CAAA;AAE3D,EAAA,MAAM,kBAAqB,GAAA,KAAA,IAAS,IAAQ,IAAA,CAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,KAAW,CAAA,MAAA,KAAA,CAAA,CAAA;AAEhE,EAAI,IAAA,CAAC,sBAAsB,kBAAoB,EAAA;AAC7C,IAAA,UAAA,GAAa,aAAa,QAAS,EAAA,CAAA;AAAA,GACrC;AAEA,EAAI,IAAA,CAAC,kBAAsB,IAAA,KAAA,IAAS,IAAM,EAAA;AACxC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,yEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,IAAI,kBAAoB,EAAA;AACtB,IAAa,UAAA,GAAA,KAAA,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,cAAA,GAAA,CACH,kBAAsB,IAAA,kBAAA,KAAuB,UAAe,KAAA,EAAA,GACzDC,iCAAY,MAAO,CAAA,UAAU,CAAC,CAAA,CAAE,SAChC,GAAA,EAAA,CAAA;AAEN,EAAM,MAAA,aAAA,GAAgBC,aAAe,cAAc,CAAA,CAAA;AAEnD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,aAAA,CAAc,YAAY,cAAgB,EAAA;AAC5C,MAAI,IAAA,IAAA,IAAQ,aAAc,CAAA,OAAA,KAAY,EAAI,EAAA;AACxC,QAAA,QAAA,CAAS,IAAK,CAAA,SAAA,CAAU,MAAO,CAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAAA,OACtD;AAEA,MAAA,aAAA,CAAc,OAAU,GAAA,cAAA,CAAA;AAAA,KAC1B;AAEA,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,IAAI,mBAAmB,EAAI,EAAA;AACzB,QAAS,QAAA,CAAA,IAAA,CAAK,SAAU,CAAA,GAAA,CAAI,cAAc,CAAA,CAAA;AAAA,OAC5C;AAEA,MAAS,QAAA,CAAA,IAAA,CAAK,QAAQ,KAAQ,GAAA,UAAA,CAAA;AAAA,KAChC;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA,CAAA;AAErC,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,6DAAU,QAAS,EAAA,CAAA,CAAA;AAAA,GACrB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,qBAAmB,EAAA,IAAA;AAAA,MACnB,YAAA,EAAY,KAAU,KAAA,EAAA,GAAK,KAAY,CAAA,GAAA,KAAA;AAAA,MACvC,SAAW,EAAA,EAAA,CAAG,MAAgB,CAAAC,oCAAA,CAAA,SAAA,EAAS,GAAI,CAAA,CAAA,MAAA,CAAA,cAAA,CAAA;AAAA,MAE1C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -24,10 +24,7 @@ const ThemeProvider = ({
|
|
|
24
24
|
if (currentThemeExists) {
|
|
25
25
|
themeToUse = theme;
|
|
26
26
|
}
|
|
27
|
-
const classNameTheme = (currentThemeExists || defaultThemeExists) && themeToUse !== "" ? (
|
|
28
|
-
// @ts-expect-error
|
|
29
|
-
createTheme(themes[themeToUse]).className
|
|
30
|
-
) : "";
|
|
27
|
+
const classNameTheme = (currentThemeExists || defaultThemeExists) && themeToUse !== "" ? createTheme(themes[themeToUse]).className : "";
|
|
31
28
|
const classThemeRef = useRef(classNameTheme);
|
|
32
29
|
useEffect(() => {
|
|
33
30
|
if (classThemeRef.current !== classNameTheme) {
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/theme-provider.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { createTheme, stitchesCssRoot } from '@mirohq/design-system-stitches'\nimport { useTheme } from '@mirohq/design-system-use-theme'\nimport type { Theme } from '@mirohq/design-system-themes'\n\ninterface ThemesProp {\n [Key: string]: Partial<Theme>\n}\n\nexport interface ThemeProviderProps<Themes extends ThemesProp = ThemesProp> {\n /**\n * The default theme to use if no theme is provided.\n */\n defaultTheme?: keyof Themes\n\n /**\n * Theme config for all available themes.\n */\n themes?: Themes\n\n /**\n * Applies theme className to the body.\n */\n root?: boolean\n\n /**\n * The children to render.\n */\n children?: React.ReactNode\n}\n\nexport const ThemeProvider = <Themes extends ThemesProp = ThemesProp>({\n defaultTheme,\n themes,\n children,\n root = false,\n}: ThemeProviderProps<Themes>): JSX.Element => {\n let themeToUse = ''\n const { theme } = useTheme()\n\n const defaultThemeExists =\n defaultTheme !== undefined && themes?.[defaultTheme] !== undefined\n\n const currentThemeExists = theme != null && themes?.[theme] !== undefined\n\n if (!currentThemeExists && defaultThemeExists) {\n themeToUse = defaultTheme.toString()\n }\n\n if (!defaultThemeExists && theme == null) {\n console.warn(\n 'Default theme not found, falling back to the Miro Design System basics.'\n )\n }\n\n if (currentThemeExists) {\n themeToUse = theme\n }\n\n const classNameTheme =\n (currentThemeExists || defaultThemeExists) && themeToUse !== ''\n ?
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/theme-provider.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { createTheme, stitchesCssRoot } from '@mirohq/design-system-stitches'\nimport { useTheme } from '@mirohq/design-system-use-theme'\nimport type { Theme } from '@mirohq/design-system-themes'\n\ninterface ThemesProp {\n [Key: string]: Partial<Theme>\n}\n\nexport interface ThemeProviderProps<Themes extends ThemesProp = ThemesProp> {\n /**\n * The default theme to use if no theme is provided.\n */\n defaultTheme?: keyof Themes\n\n /**\n * Theme config for all available themes.\n */\n themes?: Themes\n\n /**\n * Applies theme className to the body.\n */\n root?: boolean\n\n /**\n * The children to render.\n */\n children?: React.ReactNode\n}\n\nexport const ThemeProvider = <Themes extends ThemesProp = ThemesProp>({\n defaultTheme,\n themes,\n children,\n root = false,\n}: ThemeProviderProps<Themes>): JSX.Element => {\n let themeToUse = ''\n const { theme } = useTheme()\n\n const defaultThemeExists =\n defaultTheme !== undefined && themes?.[defaultTheme] !== undefined\n\n const currentThemeExists = theme != null && themes?.[theme] !== undefined\n\n if (!currentThemeExists && defaultThemeExists) {\n themeToUse = defaultTheme.toString()\n }\n\n if (!defaultThemeExists && theme == null) {\n console.warn(\n 'Default theme not found, falling back to the Miro Design System basics.'\n )\n }\n\n if (currentThemeExists) {\n themeToUse = theme\n }\n\n const classNameTheme =\n (currentThemeExists || defaultThemeExists) && themeToUse !== ''\n ? createTheme(themes[themeToUse]).className\n : ''\n\n const classThemeRef = useRef<string>(classNameTheme)\n\n useEffect(() => {\n if (classThemeRef.current !== classNameTheme) {\n if (root && classThemeRef.current !== '') {\n document.body.classList.remove(classThemeRef.current)\n }\n\n classThemeRef.current = classNameTheme\n }\n\n if (root) {\n if (classNameTheme !== '') {\n document.body.classList.add(classNameTheme)\n }\n\n document.body.dataset.theme = themeToUse\n }\n }, [classNameTheme, root, themeToUse])\n\n if (root) {\n return <>{children}</>\n }\n\n return (\n <div\n data-theme-provider\n data-theme={theme === '' ? undefined : theme}\n className={`${stitchesCssRoot.className} ${classNameTheme}`}\n >\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;AA+BO,MAAM,gBAAgB,CAAyC;AAAA,EACpE,YAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAO,GAAA,KAAA;AACT,CAA+C,KAAA;AAC7C,EAAA,IAAI,UAAa,GAAA,EAAA,CAAA;AACjB,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,QAAS,EAAA,CAAA;AAE3B,EAAA,MAAM,kBACJ,GAAA,YAAA,KAAiB,KAAa,CAAA,IAAA,CAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,YAAkB,CAAA,MAAA,KAAA,CAAA,CAAA;AAE3D,EAAA,MAAM,kBAAqB,GAAA,KAAA,IAAS,IAAQ,IAAA,CAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,KAAW,CAAA,MAAA,KAAA,CAAA,CAAA;AAEhE,EAAI,IAAA,CAAC,sBAAsB,kBAAoB,EAAA;AAC7C,IAAA,UAAA,GAAa,aAAa,QAAS,EAAA,CAAA;AAAA,GACrC;AAEA,EAAI,IAAA,CAAC,kBAAsB,IAAA,KAAA,IAAS,IAAM,EAAA;AACxC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN,yEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,IAAI,kBAAoB,EAAA;AACtB,IAAa,UAAA,GAAA,KAAA,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,cAAA,GAAA,CACH,kBAAsB,IAAA,kBAAA,KAAuB,UAAe,KAAA,EAAA,GACzD,YAAY,MAAO,CAAA,UAAU,CAAC,CAAA,CAAE,SAChC,GAAA,EAAA,CAAA;AAEN,EAAM,MAAA,aAAA,GAAgB,OAAe,cAAc,CAAA,CAAA;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,aAAA,CAAc,YAAY,cAAgB,EAAA;AAC5C,MAAI,IAAA,IAAA,IAAQ,aAAc,CAAA,OAAA,KAAY,EAAI,EAAA;AACxC,QAAA,QAAA,CAAS,IAAK,CAAA,SAAA,CAAU,MAAO,CAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AAAA,OACtD;AAEA,MAAA,aAAA,CAAc,OAAU,GAAA,cAAA,CAAA;AAAA,KAC1B;AAEA,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,IAAI,mBAAmB,EAAI,EAAA;AACzB,QAAS,QAAA,CAAA,IAAA,CAAK,SAAU,CAAA,GAAA,CAAI,cAAc,CAAA,CAAA;AAAA,OAC5C;AAEA,MAAS,QAAA,CAAA,IAAA,CAAK,QAAQ,KAAQ,GAAA,UAAA,CAAA;AAAA,KAChC;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA,CAAA;AAErC,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,uCAAU,QAAS,EAAA,CAAA,CAAA;AAAA,GACrB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,qBAAmB,EAAA,IAAA;AAAA,MACnB,YAAA,EAAY,KAAU,KAAA,EAAA,GAAK,KAAY,CAAA,GAAA,KAAA;AAAA,MACvC,SAAW,EAAA,EAAA,CAAG,MAAgB,CAAA,eAAA,CAAA,SAAA,EAAS,GAAI,CAAA,CAAA,MAAA,CAAA,cAAA,CAAA;AAAA,MAE1C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-theme-provider",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.45",
|
|
4
4
|
"author": "Miro",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
"react": "^16.14 || ^17 || ^18"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@mirohq/design-system-stitches": "^2.6.
|
|
29
|
-
"@mirohq/design-system-
|
|
30
|
-
"@mirohq/design-system-
|
|
28
|
+
"@mirohq/design-system-stitches": "^2.6.32",
|
|
29
|
+
"@mirohq/design-system-themes": "^0.14.0",
|
|
30
|
+
"@mirohq/design-system-use-theme": "^0.2.16"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "rollup -c ../../../rollup.config.js",
|