@kwiz/fluentui 1.0.57 → 1.0.60

package/src/controls/ColorPickerDialog.tsx

@@ -3,7 +3,7 @@ import { ColorRegular } from "@fluentui/react-icons";
 import { isFunction, isNullOrEmptyString, isNumber } from "@kwiz/common";
 import * as React from "react";
 import ColorPicker, { Color } from 'react-pick-color';
-import { useEffectOnlyOnMount, useStateEX } from "../helpers/hooks";
+import { useEffectOnlyOnMount, useStateEX } from "../helpers";
 import { ButtonEX } from "./button";
 import { InputEx } from "./input";
 import { Prompter } from "./prompt";

package/src/controls/button.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonProps, CompoundButton, compoundButtonClassNames, CompoundButtonProps, makeStyles, mergeClasses, tokens, Tooltip } from '@fluentui/react-components';
 import { capitalizeFirstLetter, isFunction, isNullOrEmptyString, isNullOrUndefined, isString, PushNoDuplicate } from '@kwiz/common';
 import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
+import { useKWIZFluentContext } from '../helpers/context-internal';
 import { commonSizes, useCommonStyles } from '../styles/styles';
 
 interface IProps {

package/src/controls/canvas/DrawPad.tsx

@@ -2,7 +2,7 @@ import { Field, tokens } from "@fluentui/react-components";
 import { ArrowMaximizeRegular, ArrowMinimizeRegular, ArrowUploadRegular, CalligraphyPenRegular, DismissRegular } from "@fluentui/react-icons";
 import { debounce, getCSSVariableValue, ImageFileTypes, isElement, isNotEmptyString, isNullOrEmptyArray, isNullOrEmptyString, isNullOrUndefined } from "@kwiz/common";
 import * as React from "react";
-import { useAlerts, useElementSize, useStateEX } from "../../helpers/hooks";
+import { useAlerts, useElementSize, useStateEX } from "../../helpers";
 import { ButtonEX } from "../button";
 import { ColorPickerEx } from "../ColorPickerDialog";
 import { FileUpload } from "../file-upload";

package/src/controls/date.tsx

@@ -4,8 +4,8 @@ import { TimePicker, TimePickerProps } from '@fluentui/react-timepicker-compat';
 import { CalendarCancelRegular } from '@fluentui/react-icons';
 import { isDate } from '@kwiz/common';
 import * as React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
-import { useStateEX } from '../helpers/hooks';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { useStateEX } from '../helpers';
 import { Horizontal } from './horizontal';
 
 interface IProps {

package/src/controls/diagram-picker.tsx

@@ -2,8 +2,8 @@ import { Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTr
 import { ImageSparkleRegular } from '@fluentui/react-icons';
 import { DiagramOptions, stockUrl } from '@kwiz/common';
 import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
-import { useStateEX } from '../helpers/hooks';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { useStateEX } from '../helpers';
 import { ButtonEXPrimarySubtle } from './button';
 import { Horizontal } from './horizontal';
 import { Section } from './section';

package/src/controls/dropdown.tsx

@@ -1,7 +1,7 @@
 import { Dropdown, DropdownProps, makeStyles, mergeClasses, Option } from '@fluentui/react-components';
 import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
 import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
+import { useKWIZFluentContext } from '../helpers/context-internal';
 
 const useStyles = makeStyles({
     root: {

package/src/controls/file-upload.tsx

@@ -2,9 +2,7 @@ import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
 import { ArrowUploadRegular } from "@fluentui/react-icons";
 import { isFunction, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, lastOrNull } from '@kwiz/common';
 import * as React from "react";
-import { useDragDropContext } from "../helpers/drag-drop/drag-drop-context";
-import { dropFiles } from "../helpers/drag-drop/exports";
-import { useEffectOnlyOnMount } from "../helpers/hooks";
+import { dropFiles, useDragDropContext, useEffectOnlyOnMount } from "../helpers";
 import { ButtonEX, ButtonEXProps, CompoundButtonEXSecondary } from "./button";
 
 const useStyles = makeStyles({

package/src/controls/index.ts

@@ -0,0 +1,31 @@
+export * from './accordion';
+export * from './button';
+export * from './canvas/DrawPad';
+export * from './card';
+export * from './card-list';
+export * from './centered';
+export * from './ColorPickerDialog';
+export * from './date';
+export * from './diagram-picker';
+export * from './divider';
+export * from './dropdown';
+export * from './error-boundary';
+export * from './field-editor';
+export * from './file-upload';
+export * from './horizontal';
+export * from './html-editor/editor';
+export * from './input';
+export * from './kwizoverflow';
+export * from './list';
+export * from './loading';
+export * from './menu';
+export * from './please-wait';
+export * from './progress-bar';
+export * from './prompt';
+export * from './qrcode';
+export * from './search';
+export * from './section';
+export * from './svg';
+export * from './toolbar';
+export * from './vertical';
+export * from './vertical-content';

package/src/controls/input.tsx

@@ -1,7 +1,7 @@
 import { GriffelStyle, Input, InputOnChangeData, InputProps, Label, Link, makeStyles, mergeClasses, Textarea, TextareaProps } from '@fluentui/react-components';
 import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber } from '@kwiz/common';
 import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
+import { useKWIZFluentContext } from '../helpers/context-internal';
 import { useCommonStyles } from '../styles/styles';
 import { Horizontal } from './horizontal';
 import { MenuEx } from './menu';

package/src/controls/kwizoverflow.tsx

@@ -4,7 +4,7 @@ import {
 } from "@fluentui/react-components";
 import { MoreHorizontalFilled } from "@fluentui/react-icons";
 import { isNumber } from '@kwiz/common';
-import { useKWIZFluentContext } from "../helpers/context";
+import { useKWIZFluentContext } from "../helpers/context-internal";
 
 interface IProps<ItemType> {
     /** you cannot have a menu with trigger in overflow items. put those in groupWrapper controls before/after rendering children. */

package/src/controls/menu.tsx

@@ -2,8 +2,8 @@ import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, Menu
 import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
 import { IDictionary, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone, stopEvent } from '@kwiz/common';
 import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
-import { useStateEX } from '../helpers/hooks';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { useStateEX } from '../helpers';
 import { ButtonEX, ButtonEXProps } from './button';
 import { Horizontal } from './horizontal';
 import { Search } from './search';

package/src/controls/prompt.tsx

@@ -2,8 +2,8 @@ import { Dialog, DialogActions, DialogBody, DialogContent, DialogModalType, Dial
 import { DismissRegular } from '@fluentui/react-icons';
 import { isNotEmptyArray, isNullOrEmptyString, noops, PushNoDuplicate, RemoveItemFromArr, stopEvent } from '@kwiz/common';
 import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
-import { useKeyDown } from '../helpers/hooks';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { useKeyDown } from '../helpers/hooks-events';
 import { ButtonEX, ButtonEXProps, ButtonEXSecondary } from './button';
 
 export interface IPrompterProps {

package/src/controls/search.tsx

@@ -3,7 +3,7 @@ import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
 import { debounce, isFunction, isNullOrEmptyString, isUndefined } from '@kwiz/common';
 import React, { useState } from 'react';
 import { GetLogger } from '../_modules/config';
-import { useStateEX } from '../helpers/hooks';
+import { useStateEX } from '../helpers';
 import { mixins } from '../styles/styles';
 const logger = GetLogger("Search");
 

package/src/controls/section.tsx

@@ -1,7 +1,7 @@
 import { makeStyles, mergeClasses, Portal, tokens } from '@fluentui/react-components';
 import { isFunction, isNotEmptyArray } from '@kwiz/common';
 import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
+import { useKWIZFluentContext } from '../helpers/context-internal';
 import { KnownClassNames, mixins, useCommonStyles } from '../styles/styles';
 
 const useStyles = makeStyles({

package/src/controls/vertical-content.tsx

@@ -1,7 +1,7 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-components';
 import { isNotEmptyArray } from '@kwiz/common';
 import React from 'react';
-import { useWindowSize } from '../helpers/hooks';
+import { useWindowSize } from '../helpers';
 
 const useStyles = makeStyles({
     verticalContainer: {

package/src/helpers/block-nav.tsx

@@ -0,0 +1,89 @@
+import { IDictionary, isNotEmptyArray, isNullOrEmptyString, jsonClone, objectsEqual } from "@kwiz/common";
+import { useCallback, useEffect } from "react";
+import { IPrompterProps, Prompter } from "../controls/prompt";
+import { useEffectOnlyOnMount, useStateEX } from "./hooks";
+
+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 function useBlockNav(): iBlockNav {
+    const [, setBlockNavMessages, blockNavMessagesRef] = useStateEX<IDictionary<string>>({});
+    const [_prompt, setPrompt] = useStateEX<IPrompterProps>(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: () => void) => {
+        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
+                        ? <ul>
+                            {messages.map((m, i) => <li key={`m${i}`}>{m}</li>)}
+                        </ul>
+                        : <p>{messages[0]}</p>,
+                    onCancel: () => setPrompt(null),
+                    onOK: () => {
+                        setPrompt(null);
+                        setBlockNavMessages({});//clear messages
+                        nav();
+                    }
+                });
+            }, 1);
+        }
+        else nav();
+    }, useEffectOnlyOnMount);
+
+
+    useEffect(() => {
+        function handleBeforeUnload(e: BeforeUnloadEvent) {
+            //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: string, message?: string) => {
+            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 ? <Prompter {..._prompt} /> : undefined
+    };
+}

package/src/helpers/{context.ts → context-const.ts}

@@ -1,6 +1,4 @@
-import { isNullOrUndefined } from "@kwiz/common";
 import React from "react";
-
 export interface iKWIZFluentContext {
     /**
      * Where the portal children are mounted on DOM
@@ -27,14 +25,4 @@ export interface iKWIZFluentContext {
 }
 
 //create context
-export const KWIZFluentContext = React.createContext<iKWIZFluentContext>(null);
-//use context from within controls
-export function useKWIZFluentContext() {
-    let ctx = React.useContext(KWIZFluentContext) || {};
-    //set defaults
-    if (isNullOrUndefined(ctx.inputAppearance))
-        ctx.inputAppearance = "underline";
-    if (isNullOrUndefined(ctx.buttonShape))
-        ctx.buttonShape = "circular";
-    return ctx;
-}
+export const KWIZFluentContext = React.createContext<iKWIZFluentContext>(null);

package/src/helpers/context-export.tsx

@@ -0,0 +1,31 @@
+import { makeStyles } from "@fluentui/react-components";
+import React, { PropsWithChildren, useEffect, useState } from "react";
+import { iKWIZFluentContext, KWIZFluentContext } from "./context-const";
+export type { iKWIZFluentContext } from "./context-const";
+
+const useContextStyles = makeStyles({
+    root: {
+        "& *": {
+            scrollbarWidth: "thin"
+        }
+    },
+})
+
+export function useKWIZFluentContextProvider(options: {
+    root?: React.MutableRefObject<HTMLDivElement>;
+    ctx?: iKWIZFluentContext;
+}) {
+    const classes = useContextStyles();
+    let v: iKWIZFluentContext = options && options.ctx || {};
+    const [kwizFluentContext, setKwizFluentContext] = useState<iKWIZFluentContext>(v);
+    useEffect(() => {
+        options.root?.current?.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({
+            ...v,
+            mountNode: options.root.current
+        });
+    }, [options.root]);
+    return (props: PropsWithChildren) => <KWIZFluentContext.Provider value={kwizFluentContext}>{props.children}</KWIZFluentContext.Provider>;
+}

package/src/helpers/context-internal.ts

@@ -0,0 +1,14 @@
+import { isNullOrUndefined } from "@kwiz/common";
+import React from "react";
+import { KWIZFluentContext } from "./context-const";
+
+//use context from within controls
+export function useKWIZFluentContext() {
+    let ctx = React.useContext(KWIZFluentContext) || {};
+    //set defaults
+    if (isNullOrUndefined(ctx.inputAppearance))
+        ctx.inputAppearance = "underline";
+    if (isNullOrUndefined(ctx.buttonShape))
+        ctx.buttonShape = "circular";
+    return ctx;
+}

package/src/helpers/drag-drop/drag-drop-container.tsx

@@ -1,7 +1,6 @@
 import { mergeClasses } from "@fluentui/react-components";
 import { useDragDropContext } from "./drag-drop-context";
-import { iDraggableProps, iDraggedItemType } from "./use-draggable";
-import { iDroppableProps } from "./use-droppable";
+import { iDraggableProps, iDraggedItemType, iDroppableProps } from "./drag-drop.types";
 
 interface one<DragItemType extends iDraggedItemType<string>> {
     dragInfo: iDraggableProps<DragItemType>;

package/src/helpers/drag-drop/drag-drop-context-internal.tsx

@@ -0,0 +1,10 @@
+import React, { useContext } from "react";
+import { iDragDropContext } from "./drag-drop.types";
+
+//create context
+export const DragDropContext = React.createContext<iDragDropContext>(null);
+//use context from within controls
+export function useDragDropContextInternal() {
+    const dragDropContext = useContext(DragDropContext);
+    return dragDropContext;
+}

package/src/helpers/drag-drop/drag-drop-context.tsx

@@ -1,23 +1,13 @@
 import { isNullOrUndefined } from "@kwiz/common";
-import React, { useContext } from "react";
+import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useStateEX } from "../hooks";
-import { iDraggableProps, iDraggedItemType, useDraggable } from "./use-draggable";
-import useDroppable, { iDroppableProps } from "./use-droppable";
+import { DragDropContext, useDragDropContextInternal } from "./drag-drop-context-internal";
+import { iDragDropContext, iDraggableProps, iDraggedItemType, iDroppableProps } from "./drag-drop.types";
+import { useDraggable } from "./use-draggable";
+import { useDroppable } from "./use-droppable";
 
-export interface iDragDropContext {
-    isDragging: boolean;
-    dragItem: iDraggedItemType<string>;
-    setDragItem: (value: iDraggedItemType<string>) => void;
-}
-//create context
-export const DragDropContext = React.createContext<iDragDropContext>(null);
-//use context from within controls
-export function useDragDropContextInternal() {
-    const dragDropContext = useContext(DragDropContext);
-    return dragDropContext;
-}
 export function useDragDropContext<
     DragItemType extends iDraggedItemType<string> = never,
     DropInfoType extends iDroppableProps<string, any> = never

package/src/helpers/drag-drop/drag-drop.types.ts

@@ -0,0 +1,21 @@
+export interface iDraggedItemType<DragType extends string> {
+    type: DragType;
+}
+export interface iDraggableProps<ItemType extends iDraggedItemType<string>> {
+    item: ItemType;
+    onBeginDrag?: () => void;
+    onEndDrag?: (dropResult: any) => void;
+}
+
+export interface iDroppableProps<DropTypes extends string, ItemTypes extends iDraggedItemType<DropTypes>> {
+    acceptTypes: DropTypes[];
+    onItemDrop: (item: ItemTypes) => void;
+    onHover?: (item: ItemTypes) => void;
+    onDrop?: () => void;
+}
+
+export interface iDragDropContext {
+    isDragging: boolean;
+    dragItem: iDraggedItemType<string>;
+    setDragItem: (value: iDraggedItemType<string>) => void;
+}

package/src/helpers/drag-drop/{exports.ts → index.ts}

@@ -1,11 +1,9 @@
 import { NativeTypes } from 'react-dnd-html5-backend';
-import { iDraggedItemType } from './use-draggable';
-import { iDroppableProps } from './use-droppable';
+import { iDraggedItemType, iDroppableProps } from './drag-drop.types';
 
 export { DragDropContainer } from './drag-drop-container';
 export { DragDropContextProvider, useDragDropContext } from "./drag-drop-context";
-export type { iDraggedItemType } from "./use-draggable";
-export type { iDroppableProps } from "./use-droppable";
+export type { iDraggedItemType, iDroppableProps } from "./drag-drop.types";
 
 type fileNativeType = typeof NativeTypes.FILE;
 interface dragFiles extends iDraggedItemType<fileNativeType> {

package/src/helpers/drag-drop/use-draggable.ts

@@ -1,15 +1,7 @@
 import { useEffect } from 'react';
 import { ConnectDragSource, DragSourceMonitor, useDrag } from 'react-dnd';
-import { useDragDropContextInternal } from './drag-drop-context';
-
-export interface iDraggedItemType<DragType extends string> {
-    type: DragType;
-}
-export interface iDraggableProps<ItemType extends iDraggedItemType<string>> {
-    item: ItemType;
-    onBeginDrag?: () => void;
-    onEndDrag?: (dropResult: any) => void;
-}
+import { useDragDropContextInternal } from './drag-drop-context-internal';
+import { iDraggableProps, iDraggedItemType } from './drag-drop.types';
 
 export function useDraggable<ItemType extends iDraggedItemType<string>>(props?: iDraggableProps<ItemType>): {
     isDragging: boolean;

package/src/helpers/drag-drop/use-droppable.ts

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

package/src/helpers/hooks-events.ts

@@ -0,0 +1,153 @@
+import { isDebug, isFunction } from "@kwiz/common";
+import { MutableRefObject, useEffect, useRef, useState } from "react";
+import { KnownClassNames } from "../styles/styles";
+import { useEffectOnlyOnMount } from "./hooks";
+
+export function useTrackFocus(props: { onFocus: () => void, onLoseFocus: () => void, ref?: MutableRefObject<HTMLElement> }) {
+    const wrapperDiv = props.ref || useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        function focusIn(e: FocusEvent) {
+            let elm = e.target as HTMLElement;//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: number,
+        height: number
+    }>({
+        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: HTMLElement) {
+    // 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: number,
+        height: number
+    }>({
+        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<boolean>(false);
+    useEffect(() => {
+        function forcePrint(e: KeyboardEvent) {
+            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?: 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);
+                }
+            }
+        }
+        // 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: {
+    //default use document
+    elm?: HTMLElement | Document;
+    onEnter?: (e: KeyboardEvent) => void;
+    onEscape?: (e: KeyboardEvent) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+}) {
+    let elm = options.elm || document;
+
+    useEffect(() => {
+        let handler = (e: KeyboardEvent) => {
+            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]);
+}