fixing useIsInPrint

Author: shaipetel

src/controls/button.tsx

@@ -111,6 +111,13 @@ export const ButtonEXSecondary = React.forwardRef<HTMLButtonElement, (ButtonEXPr
         <ButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...props}></ButtonEX>
     );
 });
+/** to be used in MessageBarActions for prominent actions. Otherwise use ButtonEX or ButtonEXDangerSubtle */
+export const ButtonEXMessageBarAction = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    return (
+        <ButtonEX ref={ref} appearance='secondary' hideOnPrint {...props}></ButtonEX>
+    );
+});
 export const ButtonEXPrimary = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
     return (
         <ButtonEXSecondary ref={ref} appearance='primary' {...props}>{props.children}</ButtonEXSecondary>

src/helpers/context-export.tsx

@@ -1,4 +1,4 @@
-import { makeStaticStyles, makeStyles } from "@fluentui/react-components";
+import { makeStaticStyles, makeStyles, tokens } from "@fluentui/react-components";
 import React, { PropsWithChildren, useEffect, useState } from "react";
 import { GetLogger } from "../_modules/config";
 import { KnownClassNames } from "../styles";
@@ -9,7 +9,10 @@ const logger = GetLogger("KWIZFluentContextProvider");
 const useContextStyles = makeStyles({
     root: {
         "& *": {
-            scrollbarWidth: "thin"
+            scrollbarWidth: "thin",
+            //if we can make sure this applies only to fui-FluentProvider, do this too, since public forms might take over the entire page we don't want to to affect other sites:
+            //maybe make KWIZFluentProvider automatically wrap in a root and apply to it
+            //scrollbarColor: `${tokens.colorBrandForeground2} ${tokens.colorBrandBackground2}`
         },
         [`& .${KnownClassNames.printShow}`]: {
             '@media print': {

src/helpers/hooks-events.ts

@@ -87,45 +87,42 @@ export function useElementSize(elm: HTMLElement) {
     return elmSize;
 }
 export function useIsInPrint() {
-    // Initialize state with false
-    const [printMode, setPrintMode] = useState<boolean>(false);
+    // Initialize state with media query
+    const [printMode, setPrintMode] = useState<boolean>(window.matchMedia ? window.matchMedia('print').matches : false);
     useEffect(() => {
-        function forcePrint(e: KeyboardEvent) {
+        if (printMode)
+            document.body.classList.add(KnownClassNames.print);
+        else
+            document.body.classList.remove(KnownClassNames.print);
+    }, [printMode]);
+
+    useEffect(() => {
+        const forcePrintOn = () => setPrintMode(true);
+        const forcePrintOff = () => setPrintMode(false);
+
+        function printDebugHelper(e: KeyboardEvent) {
             if (e.ctrlKey && e.shiftKey && e.altKey) {
                 if (e.key.toLocaleLowerCase() === "q") {
-                    document.body.classList.remove(KnownClassNames.print);
-                    handlePrint(e, false);
+                    forcePrintOff();
                 }
                 else {
                     console.warn('forced print mode - to exit refresh to ctrl+shift+alt+q');
-                    document.body.classList.add(KnownClassNames.print);
-                    handlePrint(e, true);
-                }
-            }
-        }
-        // Handler to call on printing
-        function handlePrint(e?: Event, force?: boolean) {
-            if (force === true) setPrintMode(true);
-            else if (window.matchMedia) {
-                var mediaQueryList = window.matchMedia('print');
-                if (mediaQueryList.matches) {
-                    setPrintMode(true);
-                } else {
-                    setPrintMode(false);
+                    forcePrintOn();
                 }
             }
         }
+
         // Add event listener
-        window.addEventListener("print", handlePrint);
+        window.addEventListener("beforeprint", forcePrintOn);
+        window.addEventListener("afterprint", forcePrintOff);
         if (isDebug())
-            window.addEventListener("keydown", forcePrint);
-        // Call handler right away so state gets updated with initial printing state
-        handlePrint();
+            window.addEventListener("keydown", printDebugHelper);
         // Remove event listener on cleanup
         return () => {
-            window.removeEventListener("print", handlePrint);
+            window.removeEventListener("beforeprint", forcePrintOn);
+            window.removeEventListener("afterprint", forcePrintOff);
             if (isDebug())
-                window.removeEventListener("keydown", forcePrint);
+                window.removeEventListener("keydown", printDebugHelper);
         };
     }, useEffectOnlyOnMount);
     return printMode;