@flipdish/ui-library 0.7.2 → 0.7.3
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/providers/ThemeProvider/index.cjs +17 -21
- package/dist/providers/ThemeProvider/index.cjs.map +1 -1
- package/dist/providers/ThemeProvider/index.d.ts +4 -2
- package/dist/providers/ThemeProvider/index.d.ts.map +1 -1
- package/dist/providers/ThemeProvider/index.js +18 -22
- package/dist/providers/ThemeProvider/index.js.map +1 -1
- package/dist/providers/UIProvider/index.cjs +41 -2
- package/dist/providers/UIProvider/index.cjs.map +1 -1
- package/dist/providers/UIProvider/index.d.ts +3 -3
- package/dist/providers/UIProvider/index.d.ts.map +1 -1
- package/dist/providers/UIProvider/index.js +42 -3
- package/dist/providers/UIProvider/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -11,8 +11,13 @@ const useTheme = () => {
|
|
|
11
11
|
}
|
|
12
12
|
return context;
|
|
13
13
|
};
|
|
14
|
+
const resolveSystemPreference = () => {
|
|
15
|
+
if (typeof window === 'undefined')
|
|
16
|
+
return 'light';
|
|
17
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
18
|
+
};
|
|
14
19
|
/**
|
|
15
|
-
* @summary app-wide light/dark/system theme provider that
|
|
20
|
+
* @summary app-wide light/dark/system theme provider that renders a themed `display: contents` wrapper carrying `data-theme`
|
|
16
21
|
*/
|
|
17
22
|
const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-theme', themeModeOverride }) => {
|
|
18
23
|
const [theme, setTheme] = React.useState(() => {
|
|
@@ -22,37 +27,28 @@ const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-the
|
|
|
22
27
|
}
|
|
23
28
|
return defaultTheme;
|
|
24
29
|
});
|
|
30
|
+
const [systemPreference, setSystemPreference] = React.useState(resolveSystemPreference);
|
|
31
|
+
const [themeRoot, setThemeRoot] = React.useState(null);
|
|
25
32
|
const activeTheme = themeModeOverride ?? theme;
|
|
33
|
+
const resolvedMode = activeTheme === 'system' ? systemPreference : activeTheme;
|
|
26
34
|
React.useEffect(() => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
// The token layer + Tailwind `dark:` variant cascade on `[data-theme="dark"]`
|
|
31
|
-
// (see @flipdish/ui-tokens + src/styles.css), so drive that attribute here.
|
|
32
|
-
root.setAttribute('data-theme', resolveTheme(activeTheme));
|
|
33
|
-
// Controlled usage (e.g. Storybook) is ephemeral — don't touch persisted state.
|
|
34
|
-
if (themeModeOverride) {
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
35
|
+
document.documentElement.setAttribute('data-theme', resolvedMode);
|
|
36
|
+
// Only persist the theme if it's not overridden
|
|
37
|
+
if (!themeModeOverride) {
|
|
37
38
|
if (activeTheme === 'system') {
|
|
38
39
|
localStorage.removeItem(storageKey);
|
|
39
40
|
}
|
|
40
41
|
else {
|
|
41
42
|
localStorage.setItem(storageKey, activeTheme);
|
|
42
43
|
}
|
|
43
|
-
}
|
|
44
|
-
applyTheme();
|
|
45
|
-
// Listen for system theme changes
|
|
44
|
+
}
|
|
46
45
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
47
|
-
const handleChange = () =>
|
|
48
|
-
if (activeTheme === 'system') {
|
|
49
|
-
applyTheme();
|
|
50
|
-
}
|
|
51
|
-
};
|
|
46
|
+
const handleChange = () => setSystemPreference(mediaQuery.matches ? 'dark' : 'light');
|
|
52
47
|
mediaQuery.addEventListener('change', handleChange);
|
|
53
48
|
return () => mediaQuery.removeEventListener('change', handleChange);
|
|
54
|
-
}, [activeTheme, themeModeOverride, storageKey]);
|
|
55
|
-
|
|
49
|
+
}, [resolvedMode, activeTheme, themeModeOverride, storageKey]);
|
|
50
|
+
const contextValue = React.useMemo(() => ({ theme: activeTheme, setTheme, themeRoot, resolvedMode }), [activeTheme, themeRoot, resolvedMode]);
|
|
51
|
+
return (jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, style: { display: 'contents' }, children: children }) }));
|
|
56
52
|
};
|
|
57
53
|
|
|
58
54
|
exports.ThemeProvider = ThemeProvider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["createContext","useContext","useState","useEffect","_jsx"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["createContext","useContext","useState","useEffect","useMemo","_jsx"],"mappings":";;;;;AAYA,MAAM,YAAY,GAAGA,mBAAa,CAA+B,SAAS,CAAC;AAEpE,MAAM,QAAQ,GAAG,MAAuB;AAC7C,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,YAAY,CAAC;AAExC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;IACjE;AAEA,IAAA,OAAO,OAAO;AAChB;AAEA,MAAM,uBAAuB,GAAG,MAAuB;IACrD,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,QAAA,OAAO,OAAO;AACjD,IAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACrF,CAAC;AAqBD;;AAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,GAAG,QAAQ,EAAE,UAAU,GAAG,UAAU,EAAE,iBAAiB,EAAsB,KAAI;IACrI,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAQ,MAAK;AAC7C,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAiB;YACnE,OAAO,UAAU,IAAI,YAAY;QACnC;AACA,QAAA,OAAO,YAAY;AACrB,IAAA,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAmB,uBAAuB,CAAC;IACnG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAqB,IAAI,CAAC;AAEpE,IAAA,MAAM,WAAW,GAAU,iBAAiB,IAAI,KAAK;AACrD,IAAA,MAAM,YAAY,GAAqB,WAAW,KAAK,QAAQ,GAAG,gBAAgB,GAAG,WAAW;IAEhGC,eAAS,CAAC,MAAK;QACb,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;;QAGjE,IAAI,CAAC,iBAAiB,EAAE;AACtB,YAAA,IAAI,WAAW,KAAK,QAAQ,EAAE;AAC5B,gBAAA,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC;YACrC;iBAAO;AACL,gBAAA,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC;YAC/C;QACF;QAEA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;AACpE,QAAA,MAAM,YAAY,GAAG,MAAM,mBAAmB,CAAC,UAAU,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrF,QAAA,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QACnD,OAAO,MAAM,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;IACrE,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAE9D,IAAA,MAAM,YAAY,GAAGC,aAAO,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAEvI,IAAA,QACEC,cAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EACxCA,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,YAAY,EAAA,YAAA,EAAc,YAAY,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAA,QAAA,EAC7E,QAAQ,EAAA,CACL,EAAA,CACgB;AAE5B;;;;;"}
|
|
@@ -3,6 +3,8 @@ type Theme = 'light' | 'dark' | 'system';
|
|
|
3
3
|
interface ThemeContextType {
|
|
4
4
|
theme: Theme;
|
|
5
5
|
setTheme: (theme: Theme) => void;
|
|
6
|
+
themeRoot: HTMLElement | null;
|
|
7
|
+
resolvedMode: 'light' | 'dark';
|
|
6
8
|
}
|
|
7
9
|
export declare const useTheme: () => ThemeContextType;
|
|
8
10
|
interface ThemeProviderProps {
|
|
@@ -19,12 +21,12 @@ interface ThemeProviderProps {
|
|
|
19
21
|
storageKey?: string;
|
|
20
22
|
/**
|
|
21
23
|
* Controlled theme override. When set, the provider mirrors this value instead of its
|
|
22
|
-
* internal state and skips localStorage persistence — useful for
|
|
24
|
+
* internal state and skips localStorage persistence — useful for controlled MFE's or tests.
|
|
23
25
|
*/
|
|
24
26
|
themeModeOverride?: 'light' | 'dark';
|
|
25
27
|
}
|
|
26
28
|
/**
|
|
27
|
-
* @summary app-wide light/dark/system theme provider that
|
|
29
|
+
* @summary app-wide light/dark/system theme provider that renders a themed `display: contents` wrapper carrying `data-theme`
|
|
28
30
|
*/
|
|
29
31
|
export declare const ThemeProvider: ({ children, defaultTheme, storageKey, themeModeOverride }: ThemeProviderProps) => import("react").JSX.Element;
|
|
30
32
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ThemeProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,UAAU,gBAAgB;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ThemeProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,UAAU,gBAAgB;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAID,eAAO,MAAM,QAAQ,QAAO,gBAQ3B,CAAC;AAOF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACtC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,2DAAmF,kBAAkB,gCA0ClI,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, useState, useEffect, useContext } from 'react';
|
|
2
|
+
import { createContext, useState, useEffect, useMemo, useContext } from 'react';
|
|
3
3
|
|
|
4
4
|
const ThemeContext = createContext(undefined);
|
|
5
5
|
const useTheme = () => {
|
|
@@ -9,8 +9,13 @@ const useTheme = () => {
|
|
|
9
9
|
}
|
|
10
10
|
return context;
|
|
11
11
|
};
|
|
12
|
+
const resolveSystemPreference = () => {
|
|
13
|
+
if (typeof window === 'undefined')
|
|
14
|
+
return 'light';
|
|
15
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
16
|
+
};
|
|
12
17
|
/**
|
|
13
|
-
* @summary app-wide light/dark/system theme provider that
|
|
18
|
+
* @summary app-wide light/dark/system theme provider that renders a themed `display: contents` wrapper carrying `data-theme`
|
|
14
19
|
*/
|
|
15
20
|
const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-theme', themeModeOverride }) => {
|
|
16
21
|
const [theme, setTheme] = useState(() => {
|
|
@@ -20,37 +25,28 @@ const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-the
|
|
|
20
25
|
}
|
|
21
26
|
return defaultTheme;
|
|
22
27
|
});
|
|
28
|
+
const [systemPreference, setSystemPreference] = useState(resolveSystemPreference);
|
|
29
|
+
const [themeRoot, setThemeRoot] = useState(null);
|
|
23
30
|
const activeTheme = themeModeOverride ?? theme;
|
|
31
|
+
const resolvedMode = activeTheme === 'system' ? systemPreference : activeTheme;
|
|
24
32
|
useEffect(() => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
// The token layer + Tailwind `dark:` variant cascade on `[data-theme="dark"]`
|
|
29
|
-
// (see @flipdish/ui-tokens + src/styles.css), so drive that attribute here.
|
|
30
|
-
root.setAttribute('data-theme', resolveTheme(activeTheme));
|
|
31
|
-
// Controlled usage (e.g. Storybook) is ephemeral — don't touch persisted state.
|
|
32
|
-
if (themeModeOverride) {
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
33
|
+
document.documentElement.setAttribute('data-theme', resolvedMode);
|
|
34
|
+
// Only persist the theme if it's not overridden
|
|
35
|
+
if (!themeModeOverride) {
|
|
35
36
|
if (activeTheme === 'system') {
|
|
36
37
|
localStorage.removeItem(storageKey);
|
|
37
38
|
}
|
|
38
39
|
else {
|
|
39
40
|
localStorage.setItem(storageKey, activeTheme);
|
|
40
41
|
}
|
|
41
|
-
}
|
|
42
|
-
applyTheme();
|
|
43
|
-
// Listen for system theme changes
|
|
42
|
+
}
|
|
44
43
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
45
|
-
const handleChange = () =>
|
|
46
|
-
if (activeTheme === 'system') {
|
|
47
|
-
applyTheme();
|
|
48
|
-
}
|
|
49
|
-
};
|
|
44
|
+
const handleChange = () => setSystemPreference(mediaQuery.matches ? 'dark' : 'light');
|
|
50
45
|
mediaQuery.addEventListener('change', handleChange);
|
|
51
46
|
return () => mediaQuery.removeEventListener('change', handleChange);
|
|
52
|
-
}, [activeTheme, themeModeOverride, storageKey]);
|
|
53
|
-
|
|
47
|
+
}, [resolvedMode, activeTheme, themeModeOverride, storageKey]);
|
|
48
|
+
const contextValue = useMemo(() => ({ theme: activeTheme, setTheme, themeRoot, resolvedMode }), [activeTheme, themeRoot, resolvedMode]);
|
|
49
|
+
return (jsx(ThemeContext.Provider, { value: contextValue, children: jsx("div", { ref: setThemeRoot, "data-theme": resolvedMode, style: { display: 'contents' }, children: children }) }));
|
|
54
50
|
};
|
|
55
51
|
|
|
56
52
|
export { ThemeProvider, useTheme };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAYA,MAAM,YAAY,GAAG,aAAa,CAA+B,SAAS,CAAC;AAEpE,MAAM,QAAQ,GAAG,MAAuB;AAC7C,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC;AAExC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;IACjE;AAEA,IAAA,OAAO,OAAO;AAChB;AAEA,MAAM,uBAAuB,GAAG,MAAuB;IACrD,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,QAAA,OAAO,OAAO;AACjD,IAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACrF,CAAC;AAqBD;;AAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,GAAG,QAAQ,EAAE,UAAU,GAAG,UAAU,EAAE,iBAAiB,EAAsB,KAAI;IACrI,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,MAAK;AAC7C,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAiB;YACnE,OAAO,UAAU,IAAI,YAAY;QACnC;AACA,QAAA,OAAO,YAAY;AACrB,IAAA,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAmB,uBAAuB,CAAC;IACnG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC;AAEpE,IAAA,MAAM,WAAW,GAAU,iBAAiB,IAAI,KAAK;AACrD,IAAA,MAAM,YAAY,GAAqB,WAAW,KAAK,QAAQ,GAAG,gBAAgB,GAAG,WAAW;IAEhG,SAAS,CAAC,MAAK;QACb,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;;QAGjE,IAAI,CAAC,iBAAiB,EAAE;AACtB,YAAA,IAAI,WAAW,KAAK,QAAQ,EAAE;AAC5B,gBAAA,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC;YACrC;iBAAO;AACL,gBAAA,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC;YAC/C;QACF;QAEA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;AACpE,QAAA,MAAM,YAAY,GAAG,MAAM,mBAAmB,CAAC,UAAU,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrF,QAAA,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QACnD,OAAO,MAAM,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;IACrE,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAE9D,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAEvI,IAAA,QACEA,GAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EACxCA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,YAAY,EAAA,YAAA,EAAc,YAAY,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAA,QAAA,EAC7E,QAAQ,EAAA,CACL,EAAA,CACgB;AAE5B;;;;"}
|
|
@@ -5,17 +5,56 @@ var ErrorBoundary = require('@flipdish/ui-library/providers/ErrorBoundary');
|
|
|
5
5
|
var PortalContainer = require('@flipdish/ui-library/providers/PortalContainer');
|
|
6
6
|
var RouteProvider = require('@flipdish/ui-library/providers/RouteProvider');
|
|
7
7
|
var ThemeProvider = require('@flipdish/ui-library/providers/ThemeProvider');
|
|
8
|
+
var React = require('react');
|
|
8
9
|
var reactRouter = require('react-router');
|
|
9
10
|
|
|
11
|
+
const UIProviderInner = ({ children, baseUrl, errorBoundary, portalContainer }) => {
|
|
12
|
+
const { themeRoot, resolvedMode } = ThemeProvider.useTheme();
|
|
13
|
+
const portalAnchorRef = React.useRef(null);
|
|
14
|
+
const resolvedContainerRef = React.useRef(null);
|
|
15
|
+
// Create a themed, layout-invisible anchor inside the portalContainer so
|
|
16
|
+
// React Aria overlays inherit scoped CSS and the active data-theme.
|
|
17
|
+
// Compares resolved DOM nodes (not callback identity) to avoid tearing
|
|
18
|
+
// down the anchor when an inline callback like `() => getElementById(...)` is passed.
|
|
19
|
+
React.useEffect(() => {
|
|
20
|
+
const container = portalContainer?.() ?? null;
|
|
21
|
+
if (container === resolvedContainerRef.current) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
portalAnchorRef.current?.remove();
|
|
25
|
+
portalAnchorRef.current = null;
|
|
26
|
+
resolvedContainerRef.current = container;
|
|
27
|
+
if (!container) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
const anchor = document.createElement('div');
|
|
31
|
+
anchor.style.display = 'contents';
|
|
32
|
+
anchor.setAttribute('data-theme', resolvedMode);
|
|
33
|
+
container.appendChild(anchor);
|
|
34
|
+
portalAnchorRef.current = anchor;
|
|
35
|
+
});
|
|
36
|
+
// Clean up the anchor on unmount.
|
|
37
|
+
React.useEffect(() => () => {
|
|
38
|
+
portalAnchorRef.current?.remove();
|
|
39
|
+
portalAnchorRef.current = null;
|
|
40
|
+
}, []);
|
|
41
|
+
// Keep the anchor's data-theme in sync when the resolved mode changes.
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
portalAnchorRef.current?.setAttribute('data-theme', resolvedMode);
|
|
44
|
+
}, [resolvedMode]);
|
|
45
|
+
// Fall back to ThemeProvider's themed wrapper when no portalContainer is provided.
|
|
46
|
+
const getContainer = React.useCallback(() => portalAnchorRef.current ?? themeRoot, [themeRoot]);
|
|
47
|
+
return (jsxRuntime.jsx(reactRouter.BrowserRouter, { basename: baseUrl, children: jsxRuntime.jsx(RouteProvider.RouteProvider, { children: jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { ...errorBoundary, children: jsxRuntime.jsx(PortalContainer.PortalContainer, { getContainer: getContainer, children: children }) }) }) }));
|
|
48
|
+
};
|
|
10
49
|
/**
|
|
11
50
|
* @summary single entry-point provider that composes theme, routing, and an error boundary for consuming apps
|
|
12
51
|
*/
|
|
13
|
-
const UIProvider = ({ children, themeModeOverride,
|
|
52
|
+
const UIProvider = ({ children, themeModeOverride, ...rest }) => {
|
|
14
53
|
// TODO(i18n): add an internal library translation context so ui-library components can
|
|
15
54
|
// source their own copy (e.g. ErrorBoundary's "Something went wrong") without the
|
|
16
55
|
// consuming app needing to pass text props. This is purely internal — consuming apps
|
|
17
56
|
// own their own translation layer and wrap their content inside UIProvider as usual.
|
|
18
|
-
return (jsxRuntime.jsx(ThemeProvider.ThemeProvider, { themeModeOverride: themeModeOverride, children: jsxRuntime.jsx(
|
|
57
|
+
return (jsxRuntime.jsx(ThemeProvider.ThemeProvider, { themeModeOverride: themeModeOverride, children: jsxRuntime.jsx(UIProviderInner, { ...rest, children: children }) }));
|
|
19
58
|
};
|
|
20
59
|
|
|
21
60
|
exports.UIProvider = UIProvider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["useTheme","useRef","useEffect","useCallback","_jsx","BrowserRouter","RouteProvider","ErrorBoundary","PortalContainer","ThemeProvider"],"mappings":";;;;;;;;;;AAyCA,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAiE,KAAI;IAC/I,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAGA,sBAAQ,EAAE;AAC9C,IAAA,MAAM,eAAe,GAAGC,YAAM,CAAwB,IAAI,CAAC;AAC3D,IAAA,MAAM,oBAAoB,GAAGA,YAAM,CAAqB,IAAI,CAAC;;;;;IAM7DC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,eAAe,IAAI,IAAI,IAAI;AAC7C,QAAA,IAAI,SAAS,KAAK,oBAAoB,CAAC,OAAO,EAAE;YAC9C;QACF;AAEA,QAAA,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE;AACjC,QAAA,eAAe,CAAC,OAAO,GAAG,IAAI;AAC9B,QAAA,oBAAoB,CAAC,OAAO,GAAG,SAAS;QAExC,IAAI,CAAC,SAAS,EAAE;YACd;QACF;QAEA,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,QAAA,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU;AACjC,QAAA,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;AAC/C,QAAA,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC;AAC7B,QAAA,eAAe,CAAC,OAAO,GAAG,MAAM;AAClC,IAAA,CAAC,CAAC;;AAGF,IAAAA,eAAS,CACP,MAAM,MAAK;AACT,QAAA,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE;AACjC,QAAA,eAAe,CAAC,OAAO,GAAG,IAAI;IAChC,CAAC,EACD,EAAE,CACH;;IAGDA,eAAS,CAAC,MAAK;QACb,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;AACnE,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;;AAGlB,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAAC,MAAM,eAAe,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC,SAAS,CAAC,CAAC;AAEzF,IAAA,QACEC,cAAA,CAACC,yBAAa,EAAA,EAAC,QAAQ,EAAE,OAAO,EAAA,QAAA,EAC9BD,cAAA,CAACE,2BAAa,EAAA,EAAA,QAAA,EACZF,cAAA,CAACG,2BAAa,EAAA,EAAA,GAAK,aAAa,EAAA,QAAA,EAC9BH,cAAA,CAACI,+BAAe,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CAC3D,EAAA,CACF,EAAA,CACF;AAEpB,CAAC;AAED;;AAEG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,IAAI,EAAsC,KAAI;;;;;AAKzG,IAAA,QACEJ,cAAA,CAACK,2BAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EACjDL,cAAA,CAAC,eAAe,OAAK,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CACzC;AAEpB;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ErrorBoundaryProps } from '@flipdish/ui-library/providers/ErrorBoundary';
|
|
2
|
-
import type
|
|
2
|
+
import { type PropsWithChildren } from 'react';
|
|
3
3
|
export interface UIProviderProps {
|
|
4
4
|
/**
|
|
5
5
|
* Controlled theme override. When set, the tree renders in this mode and theme
|
|
@@ -26,7 +26,7 @@ export interface UIProviderProps {
|
|
|
26
26
|
* internally — see its docs for full details.
|
|
27
27
|
*
|
|
28
28
|
* Use this in micro-frontends or embedded apps whose CSS is scoped to a mount
|
|
29
|
-
* subtree. Omit to
|
|
29
|
+
* subtree. Omit to portal into ThemeProvider's themed root element.
|
|
30
30
|
*
|
|
31
31
|
* @example
|
|
32
32
|
* portalContainer={() => document.getElementById('flipdish-micro-frontend')}
|
|
@@ -36,5 +36,5 @@ export interface UIProviderProps {
|
|
|
36
36
|
/**
|
|
37
37
|
* @summary single entry-point provider that composes theme, routing, and an error boundary for consuming apps
|
|
38
38
|
*/
|
|
39
|
-
export declare const UIProvider: ({ children, themeModeOverride,
|
|
39
|
+
export declare const UIProvider: ({ children, themeModeOverride, ...rest }: PropsWithChildren<UIProviderProps>) => import("react").JSX.Element;
|
|
40
40
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/UIProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAItG,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/UIProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAItG,OAAO,EAAE,KAAK,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAG/E,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;OAOG;IACH,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IACpD;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CACrD;AA4DD;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,0CAA0C,iBAAiB,CAAC,eAAe,CAAC,gCAUtG,CAAC"}
|
|
@@ -2,18 +2,57 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { ErrorBoundary } from '@flipdish/ui-library/providers/ErrorBoundary';
|
|
3
3
|
import { PortalContainer } from '@flipdish/ui-library/providers/PortalContainer';
|
|
4
4
|
import { RouteProvider } from '@flipdish/ui-library/providers/RouteProvider';
|
|
5
|
-
import { ThemeProvider } from '@flipdish/ui-library/providers/ThemeProvider';
|
|
5
|
+
import { ThemeProvider, useTheme } from '@flipdish/ui-library/providers/ThemeProvider';
|
|
6
|
+
import { useRef, useEffect, useCallback } from 'react';
|
|
6
7
|
import { BrowserRouter } from 'react-router';
|
|
7
8
|
|
|
9
|
+
const UIProviderInner = ({ children, baseUrl, errorBoundary, portalContainer }) => {
|
|
10
|
+
const { themeRoot, resolvedMode } = useTheme();
|
|
11
|
+
const portalAnchorRef = useRef(null);
|
|
12
|
+
const resolvedContainerRef = useRef(null);
|
|
13
|
+
// Create a themed, layout-invisible anchor inside the portalContainer so
|
|
14
|
+
// React Aria overlays inherit scoped CSS and the active data-theme.
|
|
15
|
+
// Compares resolved DOM nodes (not callback identity) to avoid tearing
|
|
16
|
+
// down the anchor when an inline callback like `() => getElementById(...)` is passed.
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const container = portalContainer?.() ?? null;
|
|
19
|
+
if (container === resolvedContainerRef.current) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
portalAnchorRef.current?.remove();
|
|
23
|
+
portalAnchorRef.current = null;
|
|
24
|
+
resolvedContainerRef.current = container;
|
|
25
|
+
if (!container) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
const anchor = document.createElement('div');
|
|
29
|
+
anchor.style.display = 'contents';
|
|
30
|
+
anchor.setAttribute('data-theme', resolvedMode);
|
|
31
|
+
container.appendChild(anchor);
|
|
32
|
+
portalAnchorRef.current = anchor;
|
|
33
|
+
});
|
|
34
|
+
// Clean up the anchor on unmount.
|
|
35
|
+
useEffect(() => () => {
|
|
36
|
+
portalAnchorRef.current?.remove();
|
|
37
|
+
portalAnchorRef.current = null;
|
|
38
|
+
}, []);
|
|
39
|
+
// Keep the anchor's data-theme in sync when the resolved mode changes.
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
portalAnchorRef.current?.setAttribute('data-theme', resolvedMode);
|
|
42
|
+
}, [resolvedMode]);
|
|
43
|
+
// Fall back to ThemeProvider's themed wrapper when no portalContainer is provided.
|
|
44
|
+
const getContainer = useCallback(() => portalAnchorRef.current ?? themeRoot, [themeRoot]);
|
|
45
|
+
return (jsx(BrowserRouter, { basename: baseUrl, children: jsx(RouteProvider, { children: jsx(ErrorBoundary, { ...errorBoundary, children: jsx(PortalContainer, { getContainer: getContainer, children: children }) }) }) }));
|
|
46
|
+
};
|
|
8
47
|
/**
|
|
9
48
|
* @summary single entry-point provider that composes theme, routing, and an error boundary for consuming apps
|
|
10
49
|
*/
|
|
11
|
-
const UIProvider = ({ children, themeModeOverride,
|
|
50
|
+
const UIProvider = ({ children, themeModeOverride, ...rest }) => {
|
|
12
51
|
// TODO(i18n): add an internal library translation context so ui-library components can
|
|
13
52
|
// source their own copy (e.g. ErrorBoundary's "Something went wrong") without the
|
|
14
53
|
// consuming app needing to pass text props. This is purely internal — consuming apps
|
|
15
54
|
// own their own translation layer and wrap their content inside UIProvider as usual.
|
|
16
|
-
return (jsx(ThemeProvider, { themeModeOverride: themeModeOverride, children: jsx(
|
|
55
|
+
return (jsx(ThemeProvider, { themeModeOverride: themeModeOverride, children: jsx(UIProviderInner, { ...rest, children: children }) }));
|
|
17
56
|
};
|
|
18
57
|
|
|
19
58
|
export { UIProvider };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;AAyCA,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAiE,KAAI;IAC/I,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE;AAC9C,IAAA,MAAM,eAAe,GAAG,MAAM,CAAwB,IAAI,CAAC;AAC3D,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAqB,IAAI,CAAC;;;;;IAM7D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,eAAe,IAAI,IAAI,IAAI;AAC7C,QAAA,IAAI,SAAS,KAAK,oBAAoB,CAAC,OAAO,EAAE;YAC9C;QACF;AAEA,QAAA,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE;AACjC,QAAA,eAAe,CAAC,OAAO,GAAG,IAAI;AAC9B,QAAA,oBAAoB,CAAC,OAAO,GAAG,SAAS;QAExC,IAAI,CAAC,SAAS,EAAE;YACd;QACF;QAEA,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,QAAA,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU;AACjC,QAAA,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;AAC/C,QAAA,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC;AAC7B,QAAA,eAAe,CAAC,OAAO,GAAG,MAAM;AAClC,IAAA,CAAC,CAAC;;AAGF,IAAA,SAAS,CACP,MAAM,MAAK;AACT,QAAA,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE;AACjC,QAAA,eAAe,CAAC,OAAO,GAAG,IAAI;IAChC,CAAC,EACD,EAAE,CACH;;IAGD,SAAS,CAAC,MAAK;QACb,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;AACnE,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;;AAGlB,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,eAAe,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC,SAAS,CAAC,CAAC;AAEzF,IAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EAAC,QAAQ,EAAE,OAAO,EAAA,QAAA,EAC9BA,GAAA,CAAC,aAAa,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,aAAa,EAAA,EAAA,GAAK,aAAa,EAAA,QAAA,EAC9BA,GAAA,CAAC,eAAe,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CAC3D,EAAA,CACF,EAAA,CACF;AAEpB,CAAC;AAED;;AAEG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,IAAI,EAAsC,KAAI;;;;;AAKzG,IAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EACjDA,GAAA,CAAC,eAAe,OAAK,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CACzC;AAEpB;;;;"}
|