@pega/cosmos-react-core 5.0.0-dev.12.1 → 5.0.0-dev.12.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/lib/components/Configuration/Configuration.d.ts +3 -0
- package/lib/components/Configuration/Configuration.d.ts.map +1 -1
- package/lib/components/Configuration/Configuration.js +20 -12
- package/lib/components/Configuration/Configuration.js.map +1 -1
- package/lib/components/Configuration/index.d.ts +1 -0
- package/lib/components/Configuration/index.d.ts.map +1 -1
- package/lib/components/Configuration/index.js +1 -0
- package/lib/components/Configuration/index.js.map +1 -1
- package/lib/components/Configuration/withConfiguration.d.ts +8 -0
- package/lib/components/Configuration/withConfiguration.d.ts.map +1 -0
- package/lib/components/Configuration/withConfiguration.js +9 -0
- package/lib/components/Configuration/withConfiguration.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { FunctionComponent, ReactNode, Context, MutableRefObject } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
+
import { StyleSheetManager } from 'styled-components';
|
|
3
4
|
import type { StyleSheetManagerProps } from 'styled-components';
|
|
4
5
|
import '../../init';
|
|
5
6
|
import type { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';
|
|
@@ -53,6 +54,8 @@ export interface ConfigurationContextValue {
|
|
|
53
54
|
renderNativeControls: boolean;
|
|
54
55
|
testIds: NonNullable<ConfigurationProps['testIds']>;
|
|
55
56
|
/** @internal */
|
|
57
|
+
mountedStyleSheetManagers?: (typeof StyleSheetManager)[];
|
|
58
|
+
/** @internal */
|
|
56
59
|
initialized: boolean;
|
|
57
60
|
}
|
|
58
61
|
export declare const ConfigurationContext: Context<ConfigurationContextValue>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useContext, useMemo, useEffect } from 'react';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
|
-
import
|
|
4
|
+
import { ThemeProvider, StyleSheetManager } from 'styled-components';
|
|
5
5
|
import '../../init';
|
|
6
6
|
import { GlobalStyle } from '../../styles';
|
|
7
7
|
import { ThemeMachine, BaseThemeMachine } from '../../theme';
|
|
8
8
|
import { createTranslationPack, DefaultTranslation, direction as directionOfLocale } from '../../i18n';
|
|
9
|
-
import {
|
|
9
|
+
import { documentIsAvailable, navigatorIsAvailable, windowIsAvailable } from '../../utils';
|
|
10
10
|
import pkg from '../../../package.json';
|
|
11
11
|
import useElement from '../../hooks/useElement';
|
|
12
12
|
const defaultLocale = navigatorIsAvailable ? navigator.language : 'en';
|
|
@@ -20,6 +20,7 @@ export const ConfigurationContext = createContext({
|
|
|
20
20
|
loadedRef: { current: false },
|
|
21
21
|
renderNativeControls: false,
|
|
22
22
|
testIds: true,
|
|
23
|
+
mountedStyleSheetManagers: [],
|
|
23
24
|
initialized: false
|
|
24
25
|
});
|
|
25
26
|
const legacyMetaKey = Symbol.for('@pega/cosmos-react-core.metadata');
|
|
@@ -61,9 +62,6 @@ if (windowIsAvailable) {
|
|
|
61
62
|
};
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
|
-
const StyledConfigurationWrapper = styled.div `
|
|
65
|
-
display: contents;
|
|
66
|
-
`;
|
|
67
65
|
const Configuration = ({ children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheets: styleSheetURLs, styleSheetTarget, portalTarget, renderNativeControls, testIds, id }) => {
|
|
68
66
|
const context = windowIsAvailable
|
|
69
67
|
? window.cosmos.configurationContext ?? ConfigurationContext
|
|
@@ -94,6 +92,10 @@ const Configuration = ({ children, locale, direction, translations: customTransl
|
|
|
94
92
|
rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget
|
|
95
93
|
];
|
|
96
94
|
}, [wrapperEl, styleSheetTarget, portalTarget, ctx.styleSheetTarget, ctx.portalTarget]);
|
|
95
|
+
// Reload global fonts and styles if this configuration instance is not within the same root node as the previous configuration instance.
|
|
96
|
+
const reinitialize = useMemo(() => !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()), [wrapperEl]);
|
|
97
|
+
// Check if this StyleSheetManager is mounted above this Configuration.
|
|
98
|
+
const stylesheetManagerMounted = useMemo(() => !!ctx.mountedStyleSheetManagers?.includes(StyleSheetManager), [ctx.mountedStyleSheetManagers]);
|
|
97
99
|
useEffect(() => {
|
|
98
100
|
const sym = Symbol(id);
|
|
99
101
|
mountConfig(sym);
|
|
@@ -101,14 +103,17 @@ const Configuration = ({ children, locale, direction, translations: customTransl
|
|
|
101
103
|
unmountConfig(sym);
|
|
102
104
|
};
|
|
103
105
|
}, [id]);
|
|
104
|
-
const wrappedChildren = ctx.initialized ? (children) : (
|
|
106
|
+
const wrappedChildren = ctx.initialized && !reinitialize ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!disableDefaultFontLoading &&
|
|
107
|
+
resolvedStyleSheetTarget &&
|
|
108
|
+
createPortal(_jsx("link", { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&display=swap', "data-cosmos-global-style": true }), resolvedStyleSheetTarget), _jsx(GlobalStyle, {}), children] }));
|
|
109
|
+
const styledWrappedChildren = stylesheetManagerMounted ? (wrappedChildren) : (_jsx(StyleSheetManager, { disableVendorPrefixes: true, target:
|
|
105
110
|
// Target must be undefined in a JSDOM environment due to Styled Components server mode handling.
|
|
106
111
|
navigatorIsAvailable && !navigator.userAgent.includes('jsdom')
|
|
107
112
|
? resolvedStyleSheetTarget
|
|
108
|
-
: undefined, children:
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
113
|
+
: undefined, children: wrappedChildren }));
|
|
114
|
+
return (_jsx("div", {
|
|
115
|
+
// Need to use inline styles because the StyleSheetManager is configured within this div.
|
|
116
|
+
style: { display: 'contents' }, ref: setWrapperEl, children: _jsx(context.Provider
|
|
112
117
|
// eslint-disable-next-line react/jsx-no-constructed-context-values
|
|
113
118
|
, {
|
|
114
119
|
// eslint-disable-next-line react/jsx-no-constructed-context-values
|
|
@@ -122,10 +127,13 @@ const Configuration = ({ children, locale, direction, translations: customTransl
|
|
|
122
127
|
loadedRef: ctx.loadedRef,
|
|
123
128
|
renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,
|
|
124
129
|
testIds: testIds ?? ctx.testIds,
|
|
130
|
+
mountedStyleSheetManagers: stylesheetManagerMounted
|
|
131
|
+
? ctx.mountedStyleSheetManagers
|
|
132
|
+
: [...(ctx.mountedStyleSheetManagers ?? []), StyleSheetManager],
|
|
125
133
|
initialized: true
|
|
126
134
|
}, children: _jsxs(ThemeProvider, { theme: themeMachine.theme, children: [styleSheetURLs &&
|
|
127
135
|
resolvedStyleSheetTarget &&
|
|
128
|
-
createPortal(styleSheetURLs.map(url => (_jsx("link", { rel: 'stylesheet', href: url, "data-cosmos-global-style": true }, url))), resolvedStyleSheetTarget),
|
|
136
|
+
createPortal(styleSheetURLs.map(url => (_jsx("link", { rel: 'stylesheet', href: url, "data-cosmos-global-style": true }, url))), resolvedStyleSheetTarget), styledWrappedChildren] }) }) }));
|
|
129
137
|
};
|
|
130
138
|
export default Configuration;
|
|
131
139
|
//# sourceMappingURL=Configuration.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useContext, useMemo, useEffect } from 'react';\nimport type { FunctionComponent, ReactNode, Context, MutableRefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { ThemeProvider, StyleSheetManager } from 'styled-components';\nimport type { StyleSheetManagerProps } from 'styled-components';\n\nimport '../../init';\nimport { GlobalStyle } from '../../styles';\nimport { ThemeMachine, BaseThemeMachine } from '../../theme';\nimport type { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';\nimport {\n createTranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport type { Translation, TranslationPack } from '../../i18n';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport useElement from '../../hooks/useElement';\n\nexport interface ConfigurationProps {\n /** Any components or nodes that should be impacted by the settings applied by this Configuration component. */\n children: ReactNode;\n /** User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php). */\n locale?: string;\n /** Override rendering direction of the document. Direction will be based on the locale if now provided. */\n direction?: 'ltr' | 'rtl';\n /** Object with (partial) translations. */\n translations?: Translation;\n /** Theme object used to override any or all Cosmos theme properties. */\n theme?: DefaultSettableTheme;\n /** Disables loading Open Sans or Inter from Google Fonts. Only takes effect on the root configuration. */\n disableDefaultFontLoading?: boolean;\n /** List of style sheets to inject in style sheet target. */\n styleSheets?: string[];\n /**\n * Target element for loading styles related to `styled-components`.\n * @deprecated\n */\n styleSheetTarget?: StyleSheetManagerProps['target'];\n /**\n * Target element for rendering a `ReactDOM` portal.\n * @deprecated\n */\n portalTarget?: Parameters<typeof createPortal>[1];\n /**\n * Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n /** String to identify this configuration instance. */\n id?: string;\n /**\n * Enable/disable testId attribute rendering for all components.\n * @default true\n */\n testIds?: boolean;\n}\n\nexport interface ConfigurationContextValue {\n locale: string;\n direction: NonNullable<ConfigurationProps['direction']>;\n translations: TranslationPack;\n themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n styleSheetTarget: ConfigurationProps['styleSheetTarget'];\n portalTarget: ConfigurationProps['portalTarget'];\n loadedRef: MutableRefObject<boolean>;\n renderNativeControls: boolean;\n testIds: NonNullable<ConfigurationProps['testIds']>;\n /** @internal */\n initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n loadedRef: { current: false },\n renderNativeControls: false,\n testIds: true,\n initialized: false\n});\n\nconst legacyMetaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface LegacyCosmosInstace {\n version: string;\n}\n\ndeclare global {\n interface Window {\n [legacyMetaKey]?: {\n push: (instance: LegacyCosmosInstace) => void;\n };\n }\n}\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance extends LegacyCosmosInstace {\n mountedConfigs: string[];\n mountOrder: string[];\n mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n version: pkg.version,\n mountedConfigs: [],\n mountOrder: [],\n mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n mountedConfigs.add(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n const description = sym.description ?? 'Unknown';\n\n instance.mountOrder.push(description);\n\n if (!(description in instance.mountCount)) {\n instance.mountCount[description] = 0;\n }\n instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n mountedConfigs.delete(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n instances?: (CosmosInstance | LegacyCosmosInstace)[];\n configurationContext?: Context<ConfigurationContextValue>;\n }\n}\n\nif (windowIsAvailable) {\n if (!window.cosmos.instances) {\n window.cosmos.instances = [];\n }\n\n window.cosmos.instances.push(instance);\n\n if (Array.isArray(window[legacyMetaKey])) {\n window.cosmos.instances.push(...window[legacyMetaKey]);\n delete window[legacyMetaKey];\n }\n\n if (!window[legacyMetaKey]) {\n window[legacyMetaKey] = {\n push: inst => {\n window.cosmos.instances?.push(inst);\n }\n };\n }\n}\n\nconst StyledConfigurationWrapper = styled.div`\n display: contents;\n`;\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheets: styleSheetURLs,\n styleSheetTarget,\n portalTarget,\n renderNativeControls,\n testIds,\n id\n}: ConfigurationProps) => {\n const context = windowIsAvailable\n ? window.cosmos.configurationContext ?? ConfigurationContext\n : ConfigurationContext;\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>();\n\n // Determine valid style sheet and portal target with ShadowDOM handling.\n const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {\n // When rendering on the server, or before the wrapper is in the DOM, just bail.\n if (!documentIsAvailable || !wrapperEl) return [undefined, undefined];\n\n const rootNode = wrapperEl.getRootNode();\n\n // When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.\n const defaultStyleSheetTarget = rootNode instanceof ShadowRoot ? rootNode : document.head;\n const defaultPortalTarget = rootNode instanceof ShadowRoot ? rootNode : document.body;\n\n // Currently passed prop or previous context value\n const requestedStyleSheetTarget = styleSheetTarget ?? ctx.styleSheetTarget;\n const requestedPortalTarget = portalTarget ?? ctx.portalTarget;\n\n // If the \"requested\" target is within the root node, it is valid, so use that, otherwise fallback to the default.\n return [\n rootNode.contains(requestedStyleSheetTarget ?? null)\n ? requestedStyleSheetTarget\n : defaultStyleSheetTarget,\n rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget\n ];\n }, [wrapperEl, styleSheetTarget, portalTarget, ctx.styleSheetTarget, ctx.portalTarget]);\n\n useEffect(() => {\n const sym = Symbol(id);\n mountConfig(sym);\n\n return () => {\n unmountConfig(sym);\n };\n }, [id]);\n\n const wrappedChildren = ctx.initialized ? (\n children\n ) : (\n <StyleSheetManager\n disableVendorPrefixes\n target={\n // Target must be undefined in a JSDOM environment due to Styled Components server mode handling.\n navigatorIsAvailable && !navigator.userAgent.includes('jsdom')\n ? resolvedStyleSheetTarget\n : undefined\n }\n >\n <>\n {!disableDefaultFontLoading &&\n resolvedStyleSheetTarget &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&display=swap'\n data-cosmos-global-style\n />,\n resolvedStyleSheetTarget\n )}\n <GlobalStyle />\n {children}\n </>\n </StyleSheetManager>\n );\n\n return (\n <StyledConfigurationWrapper ref={setWrapperEl}>\n <context.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n locale: locale ?? ctx.locale,\n direction:\n direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n styleSheetTarget: resolvedStyleSheetTarget,\n portalTarget: resolvedPortalTarget,\n loadedRef: ctx.loadedRef,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n testIds: testIds ?? ctx.testIds,\n initialized: true\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>\n {styleSheetURLs &&\n resolvedStyleSheetTarget &&\n createPortal(\n styleSheetURLs.map(url => (\n <link rel='stylesheet' href={url} key={url} data-cosmos-global-style />\n )),\n resolvedStyleSheetTarget\n )}\n {wrappedChildren}\n </ThemeProvider>\n </context.Provider>\n </StyledConfigurationWrapper>\n );\n};\n\nexport default Configuration;\n"]}
|
|
1
|
+
{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useContext, useMemo, useEffect } from 'react';\nimport type { FunctionComponent, ReactNode, Context, MutableRefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\nimport type { StyleSheetManagerProps } from 'styled-components';\n\nimport '../../init';\nimport { GlobalStyle } from '../../styles';\nimport { ThemeMachine, BaseThemeMachine } from '../../theme';\nimport type { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';\nimport {\n createTranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport type { Translation, TranslationPack } from '../../i18n';\nimport { documentIsAvailable, navigatorIsAvailable, windowIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport useElement from '../../hooks/useElement';\n\nexport interface ConfigurationProps {\n /** Any components or nodes that should be impacted by the settings applied by this Configuration component. */\n children: ReactNode;\n /** User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php). */\n locale?: string;\n /** Override rendering direction of the document. Direction will be based on the locale if now provided. */\n direction?: 'ltr' | 'rtl';\n /** Object with (partial) translations. */\n translations?: Translation;\n /** Theme object used to override any or all Cosmos theme properties. */\n theme?: DefaultSettableTheme;\n /** Disables loading Open Sans or Inter from Google Fonts. Only takes effect on the root configuration. */\n disableDefaultFontLoading?: boolean;\n /** List of style sheets to inject in style sheet target. */\n styleSheets?: string[];\n /**\n * Target element for loading styles related to `styled-components`.\n * @deprecated\n */\n styleSheetTarget?: StyleSheetManagerProps['target'];\n /**\n * Target element for rendering a `ReactDOM` portal.\n * @deprecated\n */\n portalTarget?: Parameters<typeof createPortal>[1];\n /**\n * Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n /** String to identify this configuration instance. */\n id?: string;\n /**\n * Enable/disable testId attribute rendering for all components.\n * @default true\n */\n testIds?: boolean;\n}\n\nexport interface ConfigurationContextValue {\n locale: string;\n direction: NonNullable<ConfigurationProps['direction']>;\n translations: TranslationPack;\n themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n styleSheetTarget: ConfigurationProps['styleSheetTarget'];\n portalTarget: ConfigurationProps['portalTarget'];\n loadedRef: MutableRefObject<boolean>;\n renderNativeControls: boolean;\n testIds: NonNullable<ConfigurationProps['testIds']>;\n /** @internal */\n mountedStyleSheetManagers?: (typeof StyleSheetManager)[];\n /** @internal */\n initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n loadedRef: { current: false },\n renderNativeControls: false,\n testIds: true,\n mountedStyleSheetManagers: [],\n initialized: false\n});\n\nconst legacyMetaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface LegacyCosmosInstace {\n version: string;\n}\n\ndeclare global {\n interface Window {\n [legacyMetaKey]?: {\n push: (instance: LegacyCosmosInstace) => void;\n };\n }\n}\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance extends LegacyCosmosInstace {\n mountedConfigs: string[];\n mountOrder: string[];\n mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n version: pkg.version,\n mountedConfigs: [],\n mountOrder: [],\n mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n mountedConfigs.add(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n const description = sym.description ?? 'Unknown';\n\n instance.mountOrder.push(description);\n\n if (!(description in instance.mountCount)) {\n instance.mountCount[description] = 0;\n }\n instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n mountedConfigs.delete(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n instances?: (CosmosInstance | LegacyCosmosInstace)[];\n configurationContext?: Context<ConfigurationContextValue>;\n }\n}\n\nif (windowIsAvailable) {\n if (!window.cosmos.instances) {\n window.cosmos.instances = [];\n }\n\n window.cosmos.instances.push(instance);\n\n if (Array.isArray(window[legacyMetaKey])) {\n window.cosmos.instances.push(...window[legacyMetaKey]);\n delete window[legacyMetaKey];\n }\n\n if (!window[legacyMetaKey]) {\n window[legacyMetaKey] = {\n push: inst => {\n window.cosmos.instances?.push(inst);\n }\n };\n }\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheets: styleSheetURLs,\n styleSheetTarget,\n portalTarget,\n renderNativeControls,\n testIds,\n id\n}: ConfigurationProps) => {\n const context = windowIsAvailable\n ? window.cosmos.configurationContext ?? ConfigurationContext\n : ConfigurationContext;\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>();\n\n // Determine valid style sheet and portal target with ShadowDOM handling.\n const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {\n // When rendering on the server, or before the wrapper is in the DOM, just bail.\n if (!documentIsAvailable || !wrapperEl) return [undefined, undefined];\n\n const rootNode = wrapperEl.getRootNode();\n\n // When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.\n const defaultStyleSheetTarget = rootNode instanceof ShadowRoot ? rootNode : document.head;\n const defaultPortalTarget = rootNode instanceof ShadowRoot ? rootNode : document.body;\n\n // Currently passed prop or previous context value\n const requestedStyleSheetTarget = styleSheetTarget ?? ctx.styleSheetTarget;\n const requestedPortalTarget = portalTarget ?? ctx.portalTarget;\n\n // If the \"requested\" target is within the root node, it is valid, so use that, otherwise fallback to the default.\n return [\n rootNode.contains(requestedStyleSheetTarget ?? null)\n ? requestedStyleSheetTarget\n : defaultStyleSheetTarget,\n rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget\n ];\n }, [wrapperEl, styleSheetTarget, portalTarget, ctx.styleSheetTarget, ctx.portalTarget]);\n\n // Reload global fonts and styles if this configuration instance is not within the same root node as the previous configuration instance.\n const reinitialize = useMemo(\n () => !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()),\n [wrapperEl]\n );\n\n // Check if this StyleSheetManager is mounted above this Configuration.\n const stylesheetManagerMounted = useMemo(\n () => !!ctx.mountedStyleSheetManagers?.includes(StyleSheetManager),\n [ctx.mountedStyleSheetManagers]\n );\n\n useEffect(() => {\n const sym = Symbol(id);\n mountConfig(sym);\n\n return () => {\n unmountConfig(sym);\n };\n }, [id]);\n\n const wrappedChildren =\n ctx.initialized && !reinitialize ? (\n <>{children}</>\n ) : (\n <>\n {!disableDefaultFontLoading &&\n resolvedStyleSheetTarget &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&display=swap'\n data-cosmos-global-style\n />,\n resolvedStyleSheetTarget\n )}\n <GlobalStyle />\n {children}\n </>\n );\n\n const styledWrappedChildren = stylesheetManagerMounted ? (\n wrappedChildren\n ) : (\n <StyleSheetManager\n disableVendorPrefixes\n target={\n // Target must be undefined in a JSDOM environment due to Styled Components server mode handling.\n navigatorIsAvailable && !navigator.userAgent.includes('jsdom')\n ? resolvedStyleSheetTarget\n : undefined\n }\n >\n {wrappedChildren}\n </StyleSheetManager>\n );\n\n return (\n <div\n // Need to use inline styles because the StyleSheetManager is configured within this div.\n style={{ display: 'contents' }}\n ref={setWrapperEl}\n >\n <context.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n locale: locale ?? ctx.locale,\n direction:\n direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n styleSheetTarget: resolvedStyleSheetTarget,\n portalTarget: resolvedPortalTarget,\n loadedRef: ctx.loadedRef,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n testIds: testIds ?? ctx.testIds,\n mountedStyleSheetManagers: stylesheetManagerMounted\n ? ctx.mountedStyleSheetManagers\n : [...(ctx.mountedStyleSheetManagers ?? []), StyleSheetManager],\n initialized: true\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>\n {styleSheetURLs &&\n resolvedStyleSheetTarget &&\n createPortal(\n styleSheetURLs.map(url => (\n <link rel='stylesheet' href={url} key={url} data-cosmos-global-style />\n )),\n resolvedStyleSheetTarget\n )}\n {styledWrappedChildren}\n </ThemeProvider>\n </context.Provider>\n </div>\n );\n};\n\nexport default Configuration;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Configuration/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './Configuration';\nexport type { ConfigurationProps } from './Configuration';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Configuration/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './Configuration';\nexport type { ConfigurationProps } from './Configuration';\nexport { default as withConfiguration } from './withConfiguration';\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ComponentType, ComponentProps, PropsWithoutRef } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* @param Component Component to wrap.
|
|
4
|
+
* @returns A component that renders the passed component wrapped in a Configuration.
|
|
5
|
+
*/
|
|
6
|
+
declare const withConfiguration: <Comp extends ComponentType<any>>(Component: Comp) => (props: PropsWithoutRef<ComponentProps<Comp>>) => JSX.Element;
|
|
7
|
+
export default withConfiguration;
|
|
8
|
+
//# sourceMappingURL=withConfiguration.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"withConfiguration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/withConfiguration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAI5E;;;GAGG;AACH,QAAA,MAAM,iBAAiB,qHAOlB,CAAC;AAEN,eAAe,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import Configuration from './Configuration';
|
|
3
|
+
/**
|
|
4
|
+
* @param Component Component to wrap.
|
|
5
|
+
* @returns A component that renders the passed component wrapped in a Configuration.
|
|
6
|
+
*/
|
|
7
|
+
const withConfiguration = (Component) => (props) => (_jsx(Configuration, { children: _jsx(Component, { ...props }) }));
|
|
8
|
+
export default withConfiguration;
|
|
9
|
+
//# sourceMappingURL=withConfiguration.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"withConfiguration.js","sourceRoot":"","sources":["../../../src/components/Configuration/withConfiguration.tsx"],"names":[],"mappings":";AAEA,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C;;;GAGG;AACH,MAAM,iBAAiB,GACrB,CAAkC,SAAe,EAAE,EAAE,CACrD,CAAC,KAA4C,EAAE,EAAE,CAC/C,CACE,KAAC,aAAa,cACZ,KAAC,SAAS,OAAM,KAA8B,GAAI,GACpC,CACjB,CAAC;AAEN,eAAe,iBAAiB,CAAC","sourcesContent":["import type { ComponentType, ComponentProps, PropsWithoutRef } from 'react';\n\nimport Configuration from './Configuration';\n\n/**\n * @param Component Component to wrap.\n * @returns A component that renders the passed component wrapped in a Configuration.\n */\nconst withConfiguration =\n <Comp extends ComponentType<any>>(Component: Comp) =>\n (props: PropsWithoutRef<ComponentProps<Comp>>) =>\n (\n <Configuration>\n <Component {...(props as ComponentProps<Comp>)} />\n </Configuration>\n );\n\nexport default withConfiguration;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "5.0.0-dev.12.
|
|
3
|
+
"version": "5.0.0-dev.12.3",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|