diff --git a/README.md b/README.md index 596900ba..98d06995 100644 --- a/README.md +++ b/README.md @@ -144,7 +144,7 @@ import { defaultKcProps, getKcContext } from "keycloakify"; -import { css } from "tss-react"; +import { css } from "tss-react/@emotion/css"; const { kcContext } = getKcContext(); @@ -173,7 +173,7 @@ import { defaultKcProps, getKcContext } from "keycloakify"; -import { css } from "tss-react"; +import { css } from "tss-react/@emotion/css"; const { kcContext } = getKcContext(); diff --git a/package.json b/package.json index 4957c830..3ed15720 100755 --- a/package.json +++ b/package.json @@ -55,10 +55,11 @@ "evt": "2.0.0-beta.27", "minimal-polyfills": "^2.2.1", "path": "^0.12.7", - "powerhooks": "^0.6.2", + "powerhooks": "^0.7.1", "react-markdown": "^5.0.3", "scripting-tools": "^0.19.13", - "tss-react": "^0.4.1", + "tss-react": "^0.7.3", + "@emotion/react": "^11.4.1", "tsafe": "^0.4.1" } } diff --git a/src/lib/components/Login.tsx b/src/lib/components/Login.tsx index 35350602..66ecceaa 100644 --- a/src/lib/components/Login.tsx +++ b/src/lib/components/Login.tsx @@ -4,19 +4,21 @@ import { Template } from "./Template"; import type { KcProps } from "./KcProps"; import type { KcContextBase } from "../getKcContext/KcContextBase"; import { useKcMessage } from "../i18n/useKcMessage"; -import { cx } from "tss-react"; +import { useCssAndCx } from "tss-react"; import { useConstCallback } from "powerhooks/useConstCallback"; export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login; } & KcProps) => { - const { msg, msgStr } = useKcMessage(); - const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext; + const { msg, msgStr } = useKcMessage(); + + const { cx } = useCssAndCx(); + const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false); const onSubmit = useConstCallback(() => diff --git a/src/lib/components/LoginIdpLinkConfirm.tsx b/src/lib/components/LoginIdpLinkConfirm.tsx index 307f484a..b8079fb2 100644 --- a/src/lib/components/LoginIdpLinkConfirm.tsx +++ b/src/lib/components/LoginIdpLinkConfirm.tsx @@ -4,13 +4,15 @@ import { Template } from "./Template"; import type { KcProps } from "./KcProps"; import type { KcContextBase } from "../getKcContext/KcContextBase"; import { useKcMessage } from "../i18n/useKcMessage"; -import { cx } from "tss-react"; +import { useCssAndCx } from "tss-react"; export const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm; } & KcProps) => { + const { url, idpAlias } = kcContext; + const { msg } = useKcMessage(); - const { url, idpAlias } = kcContext; + const { cx } = useCssAndCx(); return (