@keycloakify/login-ui 250004.0.34 → 250004.1.1

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.
Files changed (5) hide show
  1. package/keycloak-theme/login/KcPage.tsx +2 -4
  2. package/keycloak-theme/login/styleLevelCustomization.tsx +1 -1
  3. package/package.json +1 -1
  4. package/src/tools/useExclusiveAppInstanceEffect.ts +5 -1
  5. package/tools/useExclusiveAppInstanceEffect.js +5 -1
package/keycloak-theme/login/KcPage.tsx CHANGED
@@ -26,8 +26,7 @@ export default function KcPage(props: { kcContext: KcContext }) {
26
26
  function StyleLevelCustomization(props: { children: ReactNode }) {
27
27
  const { children } = props;
28
28
 
29
- const { doUseDefaultCss, classes, loadCustomStylesheet, globalStyleNode } =
30
- useStyleLevelCustomization();
29
+ const { doUseDefaultCss, classes, loadCustomStylesheet, Provider } = useStyleLevelCustomization();
31
30
 
32
31
  useExclusiveAppInstanceEffect({
33
32
  effectId: "loadCustomStylesheet",
@@ -40,8 +39,7 @@ function StyleLevelCustomization(props: { children: ReactNode }) {
40
39
 
41
40
  return (
42
41
  <KcClsxProvider doUseDefaultCss={doUseDefaultCss} classes={classes}>
43
- {globalStyleNode !== undefined && globalStyleNode}
44
- {children}
42
+ {Provider === undefined ? children : <Provider>{children}</Provider>}
45
43
  </KcClsxProvider>
46
44
  );
47
45
  }
package/keycloak-theme/login/styleLevelCustomization.tsx CHANGED
@@ -7,7 +7,7 @@ type StyleLevelCustomization = {
7
7
  doUseDefaultCss: boolean;
8
8
  classes?: Classes;
9
9
  loadCustomStylesheet?: () => void;
10
- globalStyleNode?: ReactNode;
10
+ Provider?: (props: { children: ReactNode }) => ReactNode;
11
11
  };
12
12
 
13
13
  export function useStyleLevelCustomization(): StyleLevelCustomization {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keycloakify/login-ui",
3
- "version": "250004.0.34",
3
+ "version": "250004.1.1",
4
4
  "description": "React implementation of Keycloak Login v2 for Keycloakify",
5
5
  "repository": {
6
6
  "type": "git",
package/src/tools/useExclusiveAppInstanceEffect.ts CHANGED
@@ -28,7 +28,11 @@ export function useExclusiveAppInstanceEffect(params: {
28
28
  const { effectId, effect, isEnabled = true } = params;
29
29
 
30
30
  useOnFistMount({
31
- isEnabled,
31
+ // NOTE: Why `|| alreadyRanEffectId.has(effectId)`?
32
+ // Because if we had already an effect with the same id it means that an effect has been ran
33
+ // and it must be cleared, we might have some stylesheet present on the document for example.
34
+ // it happen when one Template need to load CSS or Scripts and the other does not.
35
+ isEnabled: isEnabled || alreadyRanEffectId.has(effectId),
32
36
  effect: () => {
33
37
  const isAlreadyRan = alreadyRanEffectId.has(effectId);
34
38
 
package/tools/useExclusiveAppInstanceEffect.js CHANGED
@@ -11,7 +11,11 @@ const { alreadyRanEffectId } = globalContext;
11
11
  export function useExclusiveAppInstanceEffect(params) {
12
12
  const { effectId, effect, isEnabled = true } = params;
13
13
  useOnFistMount({
14
- isEnabled,
14
+ // NOTE: Why `|| alreadyRanEffectId.has(effectId)`?
15
+ // Because if we had already an effect with the same id it means that an effect has been ran
16
+ // and it must be cleared, we might have some stylesheet present on the document for example.
17
+ // it happen when one Template need to load CSS or Scripts and the other does not.
18
+ isEnabled: isEnabled || alreadyRanEffectId.has(effectId),
15
19
  effect: () => {
16
20
  const isAlreadyRan = alreadyRanEffectId.has(effectId);
17
21
  if (isAlreadyRan) {