@kwiz/fluentui 1.0.57 → 1.0.59

package/dist/helpers/drag-drop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/helpers/drag-drop/use-draggable.d.ts

@@ -1,12 +1,5 @@
 import { ConnectDragSource } from 'react-dnd';
-export interface iDraggedItemType<DragType extends string> {
-    type: DragType;
-}
-export interface iDraggableProps<ItemType extends iDraggedItemType<string>> {
-    item: ItemType;
-    onBeginDrag?: () => void;
-    onEndDrag?: (dropResult: any) => void;
-}
+import { iDraggableProps, iDraggedItemType } from './drag-drop.types';
 export declare function useDraggable<ItemType extends iDraggedItemType<string>>(props?: iDraggableProps<ItemType>): {
     isDragging: boolean;
     dragRef: ConnectDragSource;

package/dist/helpers/drag-drop/use-draggable.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useDrag } from 'react-dnd';
-import { useDragDropContextInternal } from './drag-drop-context';
+import { useDragDropContextInternal } from './drag-drop-context-internal';
 export function useDraggable(props) {
     const { item, onBeginDrag, onEndDrag, } = props || {
         item: {

package/dist/helpers/drag-drop/use-draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-draggable.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/use-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAwC,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC;AAWjE,MAAM,UAAU,YAAY,CAA4C,KAAiC;IAIrG,MAAM,EACF,IAAI,EACJ,WAAW,EACX,SAAS,GACZ,GAAG,KAAK,IAAI;QACT,IAAI,EAAE;YACF,IAAI,EAAE,WAAW;SACpB;KACJ,CAAC;IAEF,MAAM,eAAe,GAAG,0BAA0B,EAAE,CAAC;IAErD,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CACrC,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI;QACJ,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;SACnC,CAAC;QACF,GAAG,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;YACnB,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClC,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;QACpD,CAAC;KACJ,CAAC,EACF,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE,CAAC;YACb,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClC,WAAW,IAAI,WAAW,EAAE,CAAC;QACjC,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAA;IAE7B,OAAO;QACH,UAAU;QACV,OAAO;KACV,CAAC;AACN,CAAC"}
+{"version":3,"file":"use-draggable.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/use-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAwC,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAG1E,MAAM,UAAU,YAAY,CAA4C,KAAiC;IAIrG,MAAM,EACF,IAAI,EACJ,WAAW,EACX,SAAS,GACZ,GAAG,KAAK,IAAI;QACT,IAAI,EAAE;YACF,IAAI,EAAE,WAAW;SACpB;KACJ,CAAC;IAEF,MAAM,eAAe,GAAG,0BAA0B,EAAE,CAAC;IAErD,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CACrC,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI;QACJ,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;SACnC,CAAC;QACF,GAAG,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;YACnB,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClC,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;QACpD,CAAC;KACJ,CAAC,EACF,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE,CAAC;YACb,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClC,WAAW,IAAI,WAAW,EAAE,CAAC;QACjC,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAA;IAE7B,OAAO;QACH,UAAU;QACV,OAAO;KACV,CAAC;AACN,CAAC"}

package/dist/helpers/drag-drop/use-droppable.d.ts

@@ -1,14 +1,7 @@
 import { ConnectDropTarget } from 'react-dnd';
-import { iDraggedItemType } from './use-draggable';
-export interface iDroppableProps<DropTypes extends string, ItemTypes extends iDraggedItemType<DropTypes>> {
-    acceptTypes: DropTypes[];
-    onItemDrop: (item: ItemTypes) => void;
-    onHover?: (item: ItemTypes) => void;
-    onDrop?: () => void;
-}
-declare function useDroppable<DropType extends string, ItemType extends iDraggedItemType<DropType>>(props?: iDroppableProps<DropType, ItemType>): {
+import { iDraggedItemType, iDroppableProps } from './drag-drop.types';
+export declare function useDroppable<DropType extends string, ItemType extends iDraggedItemType<DropType>>(props?: iDroppableProps<DropType, ItemType>): {
     canDrop: boolean;
     isOver: boolean;
     dropRef: ConnectDropTarget;
 };
-export default useDroppable;

package/dist/helpers/drag-drop/use-droppable.js

@@ -1,5 +1,5 @@
 import { useDrop } from 'react-dnd';
-function useDroppable(props) {
+export function useDroppable(props) {
     const { acceptTypes, onItemDrop, onHover, onDrop, } = props || {
         acceptTypes: [],
         onItemDrop: () => { }
@@ -24,5 +24,4 @@ function useDroppable(props) {
         dropRef,
     };
 }
-export default useDroppable;
 //# sourceMappingURL=use-droppable.js.map

package/dist/helpers/drag-drop/use-droppable.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-droppable.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/use-droppable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,OAAO,EAAE,MAAM,WAAW,CAAC;AAU1E,SAAS,YAAY,CAAuE,KAA2C;IAKnI,MAAM,EACF,WAAW,EACX,UAAU,EACV,OAAO,EACP,MAAM,GACT,GAAG,KAAK,IAAI;QACT,WAAW,EAAE,EAAE;QACf,UAAU,EAAE,GAAG,EAAE,GAAG,CAAC;KACxB,CAAC;IAEF,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC;QAC3C,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,CAAC,IAAc,EAAE,EAAE;YACrB,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACf,CAAC;QACD,KAAK,EAAE,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,CAAC;QACpB,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE;YAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SAC3B,CAAC;KACL,CAAC,CAAC;IAEH,OAAO;QACH,OAAO;QACP,MAAM;QACN,OAAO;KACV,CAAC;AACN,CAAC;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"use-droppable.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/use-droppable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,OAAO,EAAE,MAAM,WAAW,CAAC;AAG1E,MAAM,UAAU,YAAY,CAAuE,KAA2C;IAK1I,MAAM,EACF,WAAW,EACX,UAAU,EACV,OAAO,EACP,MAAM,GACT,GAAG,KAAK,IAAI;QACT,WAAW,EAAE,EAAE;QACf,UAAU,EAAE,GAAG,EAAE,GAAG,CAAC;KACxB,CAAC;IAEF,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC;QAC3C,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,CAAC,IAAc,EAAE,EAAE;YACrB,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACf,CAAC;QACD,KAAK,EAAE,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,CAAC;QACpB,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE;YAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SAC3B,CAAC;KACL,CAAC,CAAC;IAEH,OAAO;QACH,OAAO;QACP,MAAM;QACN,OAAO;KACV,CAAC;AACN,CAAC"}

package/dist/helpers/hooks-events.d.ts

@@ -0,0 +1,21 @@
+import { MutableRefObject } from "react";
+export declare function useTrackFocus(props: {
+    onFocus: () => void;
+    onLoseFocus: () => void;
+    ref?: MutableRefObject<HTMLElement>;
+}): MutableRefObject<HTMLElement>;
+export declare function useWindowSize(): {
+    width: number;
+    height: number;
+};
+export declare function useElementSize(elm: HTMLElement): {
+    width: number;
+    height: number;
+};
+export declare function useIsInPrint(): boolean;
+export declare function useKeyDown(options: {
+    elm?: HTMLElement | Document;
+    onEnter?: (e: KeyboardEvent) => void;
+    onEscape?: (e: KeyboardEvent) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+}): void;

package/dist/helpers/hooks-events.js

@@ -0,0 +1,146 @@
+import { isDebug, isFunction } from "@kwiz/common";
+import { useEffect, useRef, useState } from "react";
+import { KnownClassNames } from "../styles/styles";
+import { useEffectOnlyOnMount } from "./hooks";
+export function useTrackFocus(props) {
+    const wrapperDiv = props.ref || useRef(null);
+    useEffect(() => {
+        function focusIn(e) {
+            let elm = e.target; //document.activeElement;
+            if (wrapperDiv.current) {
+                while (elm && elm !== wrapperDiv.current) {
+                    elm = elm.parentElement;
+                }
+            }
+            else
+                elm = null;
+            if (wrapperDiv.current && elm === wrapperDiv.current)
+                props.onFocus();
+            else
+                props.onLoseFocus();
+        }
+        if (wrapperDiv.current) {
+            if (wrapperDiv.current)
+                wrapperDiv.current.tabIndex = 1;
+            window.addEventListener("focusin", focusIn);
+            // Remove event listener on cleanup
+            return () => window.removeEventListener("focusin", focusIn);
+        }
+    }, [wrapperDiv.current]);
+    return wrapperDiv;
+}
+export function useWindowSize() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = useState({
+        width: undefined,
+        height: undefined
+    });
+    useEffect(() => {
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight
+            });
+        }
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, useEffectOnlyOnMount);
+    return windowSize;
+}
+export function useElementSize(elm) {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [elmSize, setELmSize] = useState({
+        width: undefined,
+        height: undefined
+    });
+    useEffect(() => {
+        if (elm) {
+            // Handler to call on elm resize
+            function handleResize() {
+                // Set elm width/height to state
+                setELmSize({
+                    width: (elm instanceof Window) ? elm.innerWidth : elm.clientWidth,
+                    height: (elm instanceof Window) ? elm.innerHeight : elm.clientHeight,
+                });
+            }
+            // Add event listener
+            const observer = new ResizeObserver(handleResize);
+            observer.observe(elm);
+            // Call handler right away so state gets updated with initial elm size
+            handleResize();
+            // Remove event listener on cleanup
+            return () => observer.disconnect();
+        }
+    }, [elm]);
+    return elmSize;
+}
+export function useIsInPrint() {
+    // Initialize state with false
+    const [printMode, setPrintMode] = useState(false);
+    useEffect(() => {
+        function forcePrint(e) {
+            if (e.ctrlKey && e.shiftKey && e.altKey) {
+                if (e.key.toLocaleLowerCase() === "q") {
+                    document.body.classList.remove(KnownClassNames.print);
+                    handlePrint(e, false);
+                }
+                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, force) {
+            if (force === true)
+                setPrintMode(true);
+            else if (window.matchMedia) {
+                var mediaQueryList = window.matchMedia('print');
+                if (mediaQueryList.matches) {
+                    setPrintMode(true);
+                }
+                else {
+                    setPrintMode(false);
+                }
+            }
+        }
+        // Add event listener
+        window.addEventListener("print", handlePrint);
+        if (isDebug())
+            window.addEventListener("keydown", forcePrint);
+        // Call handler right away so state gets updated with initial printing state
+        handlePrint();
+        // Remove event listener on cleanup
+        return () => {
+            window.removeEventListener("print", handlePrint);
+            if (isDebug())
+                window.removeEventListener("keydown", forcePrint);
+        };
+    }, useEffectOnlyOnMount);
+    return printMode;
+}
+export function useKeyDown(options) {
+    let elm = options.elm || document;
+    useEffect(() => {
+        let handler = (e) => {
+            if (e.key === "Enter" && isFunction(options.onEnter))
+                options.onEnter(e);
+            else if (e.key === "Escape" && isFunction(options.onEscape))
+                options.onEscape(e);
+            if (isFunction(options.onKeyDown))
+                options.onKeyDown(e);
+        };
+        elm.addEventListener("keydown", handler);
+        return () => elm.removeEventListener("keydown", handler);
+    }, [elm, options.onEnter, options.onEscape, options.onKeyDown]);
+}
+//# sourceMappingURL=hooks-events.js.map

package/dist/helpers/hooks-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks-events.js","sourceRoot":"","sources":["../../src/helpers/hooks-events.ts"],"names":[],"mappings":"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"}

package/dist/helpers/hooks.d.ts

@@ -1,7 +1,4 @@
-import { ToastIntent } from "@fluentui/react-components";
 import { MutableRefObject, SetStateAction } from "react";
-import { IPrompterProps } from "../controls/prompt";
-import { iKWIZFluentContext } from "./context";
 /** Empty array ensures that effect is only run on mount */
 export declare const useEffectOnlyOnMount: any[];
 /** set state on steroids. provide promise callback after render, onChange transformer and automatic skip-set when value not changed */
@@ -14,69 +11,3 @@ export declare function useStateEX<ValueType>(initialValue: ValueType, options?:
     (newValue: SetStateAction<ValueType>) => Promise<ValueType>,
     MutableRefObject<ValueType>
 ];
-export declare function useTrackFocus(props: {
-    onFocus: () => void;
-    onLoseFocus: () => void;
-    ref?: MutableRefObject<HTMLElement>;
-}): MutableRefObject<HTMLElement>;
-export declare function useWindowSize(): {
-    width: number;
-    height: number;
-};
-export declare function useElementSize(elm: HTMLElement): {
-    width: number;
-    height: number;
-};
-export declare function useIsInPrint(): boolean;
-export interface iBlockNav {
-    setMessage: (id: string, message?: string) => void;
-    onNav: (nav: () => void) => void;
-    navPrompt?: JSX.Element;
-}
-/** set block message if you want to block nav.
- * - call setMessage to  add a blocker message
- * - call onNav when you have internal navigation (open / close popups)
- * - render the navPrompt control to your page
- * FYI for page unload, most modern browsers won't show your message but a generic one instead. */
-export declare function useBlockNav(): iBlockNav;
-export declare function useKeyDown(options: {
-    elm?: HTMLElement | Document;
-    onEnter?: (e: KeyboardEvent) => void;
-    onEscape?: (e: KeyboardEvent) => void;
-    onKeyDown?: (e: KeyboardEvent) => void;
-}): void;
-export declare function useToast(): {
-    control: import("react/jsx-runtime").JSX.Element;
-    dispatch: (info: {
-        title?: string;
-        body?: string;
-        subtitle?: string;
-        titleAction?: {
-            text: string;
-            onClick: () => void;
-        };
-        footerActions?: {
-            text: string;
-            onClick: () => void;
-        }[];
-        intent?: ToastIntent;
-    }) => void;
-};
-export declare const useContextStyles: () => Record<"root", string>;
-export declare function useKWIZFluentContextProvider(options: {
-    root?: React.MutableRefObject<HTMLDivElement>;
-    ctx?: iKWIZFluentContext;
-}): iKWIZFluentContext;
-export interface iAlerts {
-    promptEX: (info: IPrompterProps) => void;
-    confirmEX: (message: string | JSX.Element, onOK?: () => void, onCancel?: () => void) => Promise<boolean>;
-    alertEX: (message: string | JSX.Element, onOK?: () => void) => Promise<void>;
-    alertPrompt?: JSX.Element;
-    close: () => void;
-}
-/** set block message if you want to block nav.
- * - call setMessage to  add a blocker message
- * - call onNav when you have internal navigation (open / close popups)
- * - render the navPrompt control to your page
- * FYI for page unload, most modern browsers won't show your message but a generic one instead. */
-export declare function useAlerts(): iAlerts;

package/dist/helpers/hooks.js

@@ -1,11 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Label, Link, makeStyles, Toast, ToastBody, Toaster, ToastFooter, ToastTitle, useId, useToastController } from "@fluentui/react-components";
-import { isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, isString, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
+import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { GetLogger } from "../_modules/config";
-import { Prompter } from "../controls/prompt";
-import { KnownClassNames } from "../styles/styles";
-import { useKWIZFluentContext } from "./context";
 const logger = GetLogger("helpers/hooks");
 /** Empty array ensures that effect is only run on mount */
 export const useEffectOnlyOnMount = [];
@@ -82,308 +77,4 @@ export function useStateEX(initialValue, options) {
     }), []);
     return [value, setValue, currentValue];
 }
-export function useTrackFocus(props) {
-    const wrapperDiv = props.ref || useRef(null);
-    useEffect(() => {
-        function focusIn(e) {
-            let elm = e.target; //document.activeElement;
-            if (wrapperDiv.current) {
-                while (elm && elm !== wrapperDiv.current) {
-                    elm = elm.parentElement;
-                }
-            }
-            else
-                elm = null;
-            if (wrapperDiv.current && elm === wrapperDiv.current)
-                props.onFocus();
-            else
-                props.onLoseFocus();
-        }
-        if (wrapperDiv.current) {
-            if (wrapperDiv.current)
-                wrapperDiv.current.tabIndex = 1;
-            window.addEventListener("focusin", focusIn);
-            // Remove event listener on cleanup
-            return () => window.removeEventListener("focusin", focusIn);
-        }
-    }, [wrapperDiv.current]);
-    return wrapperDiv;
-}
-export function useWindowSize() {
-    // Initialize state with undefined width/height so server and client renders match
-    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-    const [windowSize, setWindowSize] = useState({
-        width: undefined,
-        height: undefined
-    });
-    useEffect(() => {
-        // Handler to call on window resize
-        function handleResize() {
-            // Set window width/height to state
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight
-            });
-        }
-        // Add event listener
-        window.addEventListener("resize", handleResize);
-        // Call handler right away so state gets updated with initial window size
-        handleResize();
-        // Remove event listener on cleanup
-        return () => window.removeEventListener("resize", handleResize);
-    }, useEffectOnlyOnMount);
-    return windowSize;
-}
-export function useElementSize(elm) {
-    // Initialize state with undefined width/height so server and client renders match
-    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-    const [elmSize, setELmSize] = useState({
-        width: undefined,
-        height: undefined
-    });
-    useEffect(() => {
-        if (elm) {
-            // Handler to call on elm resize
-            function handleResize() {
-                // Set elm width/height to state
-                setELmSize({
-                    width: (elm instanceof Window) ? elm.innerWidth : elm.clientWidth,
-                    height: (elm instanceof Window) ? elm.innerHeight : elm.clientHeight,
-                });
-            }
-            // Add event listener
-            const observer = new ResizeObserver(handleResize);
-            observer.observe(elm);
-            // Call handler right away so state gets updated with initial elm size
-            handleResize();
-            // Remove event listener on cleanup
-            return () => observer.disconnect();
-        }
-    }, [elm]);
-    return elmSize;
-}
-export function useIsInPrint() {
-    // Initialize state with false
-    const [printMode, setPrintMode] = useState(false);
-    useEffect(() => {
-        function forcePrint(e) {
-            if (e.ctrlKey && e.shiftKey && e.altKey) {
-                if (e.key.toLocaleLowerCase() === "q") {
-                    document.body.classList.remove(KnownClassNames.print);
-                    handlePrint(e, false);
-                }
-                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, force) {
-            if (force === true)
-                setPrintMode(true);
-            else if (window.matchMedia) {
-                var mediaQueryList = window.matchMedia('print');
-                if (mediaQueryList.matches) {
-                    setPrintMode(true);
-                }
-                else {
-                    setPrintMode(false);
-                }
-            }
-        }
-        // Add event listener
-        window.addEventListener("print", handlePrint);
-        if (isDebug())
-            window.addEventListener("keydown", forcePrint);
-        // Call handler right away so state gets updated with initial printing state
-        handlePrint();
-        // Remove event listener on cleanup
-        return () => {
-            window.removeEventListener("print", handlePrint);
-            if (isDebug())
-                window.removeEventListener("keydown", forcePrint);
-        };
-    }, useEffectOnlyOnMount);
-    return printMode;
-}
-/** set block message if you want to block nav.
- * - call setMessage to  add a blocker message
- * - call onNav when you have internal navigation (open / close popups)
- * - render the navPrompt control to your page
- * FYI for page unload, most modern browsers won't show your message but a generic one instead. */
-export function useBlockNav() {
-    const [, setBlockNavMessages, blockNavMessagesRef] = useStateEX({});
-    const [_prompt, setPrompt] = useStateEX(null);
-    const getMessagesArr = useCallback(() => {
-        return Object.keys(blockNavMessagesRef.current).map(id => blockNavMessagesRef.current[id]);
-    }, useEffectOnlyOnMount);
-    const getMessages = useCallback(() => {
-        return getMessagesArr().join();
-    }, useEffectOnlyOnMount);
-    const onNav = useCallback((nav) => {
-        let messages = getMessagesArr();
-        if (isNotEmptyArray(messages)) {
-            //need to release react to re-render the prompt
-            window.setTimeout(() => {
-                //prompt, if ok - clear messages and nav.
-                setPrompt({
-                    okButtonText: "Leave",
-                    cancelButtonText: "Cancel",
-                    title: "Leave page?",
-                    children: messages.length > 1
-                        ? _jsx("ul", { children: messages.map((m, i) => _jsx("li", { children: m }, `m${i}`)) })
-                        : _jsx("p", { children: messages[0] }),
-                    onCancel: () => setPrompt(null),
-                    onOK: () => {
-                        setPrompt(null);
-                        setBlockNavMessages({}); //clear messages
-                        nav();
-                    }
-                });
-            }, 1);
-        }
-        else
-            nav();
-    }, useEffectOnlyOnMount);
-    useEffect(() => {
-        function handleBeforeUnload(e) {
-            //todo: use blockMessageRef.current so that we don't have to re-register every time message changes.
-            //otherwise we would have to add blockMessage as a dependency for this useEffect
-            const message = getMessages();
-            if (!isNullOrEmptyString(message)) {
-                e.preventDefault();
-                e.returnValue = message;
-            }
-        }
-        // Add event listener
-        window.addEventListener("beforeunload", handleBeforeUnload);
-        // Remove event listener on cleanup
-        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-    }, useEffectOnlyOnMount);
-    return {
-        setMessage: (id, message) => {
-            let current = jsonClone(blockNavMessagesRef.current);
-            if (isNullOrEmptyString(message))
-                delete current[id];
-            else
-                current[id] = message;
-            if (!objectsEqual(current, blockNavMessagesRef.current))
-                setBlockNavMessages(current);
-        },
-        // clearMessages: () => {
-        //     setBlockNavMessages({});
-        // },
-        // getMessages,
-        // getMessagesArr,
-        onNav,
-        navPrompt: _prompt ? _jsx(Prompter, Object.assign({}, _prompt)) : undefined
-    };
-}
-export function useKeyDown(options) {
-    let elm = options.elm || document;
-    useEffect(() => {
-        let handler = (e) => {
-            if (e.key === "Enter" && isFunction(options.onEnter))
-                options.onEnter(e);
-            else if (e.key === "Escape" && isFunction(options.onEscape))
-                options.onEscape(e);
-            if (isFunction(options.onKeyDown))
-                options.onKeyDown(e);
-        };
-        elm.addEventListener("keydown", handler);
-        return () => elm.removeEventListener("keydown", handler);
-    }, [elm, options.onEnter, options.onEscape, options.onKeyDown]);
-}
-export function useToast() {
-    const ctx = useKWIZFluentContext();
-    const toasterId = useId("toaster");
-    const { dispatchToast } = useToastController(toasterId);
-    return {
-        control: _jsx(Toaster, { mountNode: ctx.mountNode, toasterId: toasterId }),
-        dispatch: (info) => {
-            dispatchToast(_jsxs(Toast, { children: [info.title && _jsx(ToastTitle, { action: info.titleAction ? _jsx(Link, { onClick: info.titleAction.onClick, children: info.titleAction.text }) : undefined, children: info.title }), info.body && _jsx(ToastBody, { subtitle: info.subtitle, children: info.body }), isNotEmptyArray(info.footerActions) &&
-                        _jsx(ToastFooter, { children: info.footerActions.map((a, i) => _jsx(Link, { onClick: a.onClick, children: a.text }, `l${i}`)) })] }), { intent: info.intent || "info" });
-        }
-    };
-}
-export const useContextStyles = makeStyles({
-    root: {
-        "& *": {
-            scrollbarWidth: "thin"
-        }
-    },
-});
-export function useKWIZFluentContextProvider(options) {
-    const classes = useContextStyles();
-    let v = options && options.ctx || {};
-    const [kwizFluentContext, setKwizFluentContext] = useState(v);
-    useEffect(() => {
-        var _a, _b;
-        (_b = (_a = options.root) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.classList.add(...classes.root.split(' '));
-        // ref only updates in useEffect, not in useMemo or anything else.
-        // we need to set it into state so it will trigger a ui update
-        setKwizFluentContext(Object.assign(Object.assign({}, v), { mountNode: options.root.current }));
-    }, [options.root]);
-    return kwizFluentContext;
-}
-/** set block message if you want to block nav.
- * - call setMessage to  add a blocker message
- * - call onNav when you have internal navigation (open / close popups)
- * - render the navPrompt control to your page
- * FYI for page unload, most modern browsers won't show your message but a generic one instead. */
-export function useAlerts() {
-    const [_prompt, _setPrompt] = useStateEX(null);
-    const promptEX = useCallback((info) => {
-        //need to release react to re-render the prompt
-        window.setTimeout(() => {
-            //prompt, if ok - clear messages and nav.
-            _setPrompt(Object.assign(Object.assign({}, info), { onCancel: () => {
-                    _setPrompt(null);
-                    if (isFunction(info.onCancel))
-                        info.onCancel();
-                }, onOK: () => {
-                    _setPrompt(null);
-                    if (isFunction(info.onOK))
-                        info.onOK();
-                } }));
-        }, 1);
-    }, useEffectOnlyOnMount);
-    const confirmEX = useCallback((message, onOK, onCancel) => {
-        return new Promise(resolve => {
-            promptEX({
-                children: isString(message) ? _jsx(Label, { children: message }) : message,
-                onCancel: () => {
-                    if (isFunction(onCancel))
-                        onCancel();
-                    resolve(false);
-                },
-                onOK: () => {
-                    if (isFunction(onOK))
-                        onOK();
-                    resolve(true);
-                }
-            });
-        });
-    }, useEffectOnlyOnMount);
-    const alertEX = useCallback((message, onOK) => {
-        return new Promise(resolve => {
-            promptEX({
-                children: isString(message) ? _jsx(Label, { children: message }) : message,
-                hideCancel: true,
-                onOK: () => {
-                    if (isFunction(onOK))
-                        onOK();
-                    resolve();
-                }
-            });
-        });
-    }, useEffectOnlyOnMount);
-    return {
-        promptEX, confirmEX, alertEX,
-        alertPrompt: _prompt ? _jsx(Prompter, Object.assign({}, _prompt)) : undefined,
-        close: () => _setPrompt(null)
-    };
-}
 //# sourceMappingURL=hooks.js.map