@kwiz/fluentui 1.0.57 → 1.0.59

package/src/helpers/context-export.ts

@@ -0,0 +1,53 @@
+import { makeStyles } from "@fluentui/react-components";
+import { useEffect, useState } from "react";
+
+export interface iKWIZFluentContext {
+    /**
+     * Where the portal children are mounted on DOM
+     *
+     * @default a new element on document.body without any styling
+     */
+    mountNode?: HTMLElement | null | {
+        element?: HTMLElement | null;
+        className?: string;
+    }
+    /**
+     * Controls the colors and borders of the input.
+     * 
+     * @default 'underline'
+     */
+    inputAppearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
+
+    /**
+     * A button can be rounded, circular, or square.
+     *
+     * @default 'rounded'
+     */
+    buttonShape?: 'rounded' | 'circular' | 'square';
+}
+
+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 kwizFluentContext;
+}

package/src/helpers/context-internal.ts

@@ -0,0 +1,17 @@
+import { isNullOrUndefined } from "@kwiz/common";
+import React from "react";
+import { iKWIZFluentContext } from "./context-export";
+
+
+//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;
+}

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]);
+}