@kwiz/fluentui 1.0.73 → 1.0.75

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

@@ -1,48 +1,48 @@
-import { useEffect } from 'react';
-import { ConnectDragSource, DragSourceMonitor, useDrag } from 'react-dnd';
-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;
-    dragRef: ConnectDragSource
-} {
-    const {
-        item,
-        onBeginDrag,
-        onEndDrag,
-    } = props || {
-        item: {
-            type: "~invalid~"
-        }
-    };
-
-    const dragDropContext = useDragDropContextInternal();
-
-    const [{ isDragging }, dragRef] = useDrag(
-        () => ({
-            type: item.type,
-            item,
-            collect: (monitor: DragSourceMonitor) => ({
-                isDragging: monitor.isDragging(),
-            }),
-            end: (item, monitor) => {
-                dragDropContext.setDragItem(null);
-                onEndDrag && onEndDrag(monitor.getDropResult());
-            },
-        }),
-        [item, item.type]
-    );
-
-    useEffect(() => {
-        if (isDragging) {
-            dragDropContext.setDragItem(item);
-            onBeginDrag && onBeginDrag();
-        }
-    }, [isDragging, onBeginDrag])
-
-    return {
-        isDragging,
-        dragRef,
-    };
+import { useEffect } from 'react';
+import { ConnectDragSource, DragSourceMonitor, useDrag } from 'react-dnd';
+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;
+    dragRef: ConnectDragSource
+} {
+    const {
+        item,
+        onBeginDrag,
+        onEndDrag,
+    } = props || {
+        item: {
+            type: "~invalid~"
+        }
+    };
+
+    const dragDropContext = useDragDropContextInternal();
+
+    const [{ isDragging }, dragRef] = useDrag(
+        () => ({
+            type: item.type,
+            item,
+            collect: (monitor: DragSourceMonitor) => ({
+                isDragging: monitor.isDragging(),
+            }),
+            end: (item, monitor) => {
+                dragDropContext.setDragItem(null);
+                onEndDrag && onEndDrag(monitor.getDropResult());
+            },
+        }),
+        [item, item.type]
+    );
+
+    useEffect(() => {
+        if (isDragging) {
+            dragDropContext.setDragItem(item);
+            onBeginDrag && onBeginDrag();
+        }
+    }, [isDragging, onBeginDrag])
+
+    return {
+        isDragging,
+        dragRef,
+    };
 }

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

@@ -1,39 +1,39 @@
-import { ConnectDropTarget, DropTargetMonitor, useDrop } from 'react-dnd';
-import { iDraggedItemType, iDroppableProps } from './drag-drop.types';
-
-export function useDroppable<DropType extends string, ItemType extends iDraggedItemType<DropType>>(props?: iDroppableProps<DropType, ItemType>): {
-    canDrop: boolean;
-    isOver: boolean;
-    dropRef: ConnectDropTarget;
-} {
-    const {
-        acceptTypes,
-        onItemDrop,
-        onHover,
-        onDrop,
-    } = props || {
-        acceptTypes: [],
-        onItemDrop: () => { }
-    };
-
-    const [{ canDrop, isOver }, dropRef] = useDrop({
-        accept: acceptTypes,
-        drop: (item: ItemType) => {
-            onItemDrop(item);
-            onDrop?.();
-        },
-        hover: (item: ItemType) => {
-            onHover?.(item);
-        },
-        collect: (monitor: DropTargetMonitor) => ({
-            canDrop: monitor.canDrop(),
-            isOver: monitor.isOver(),
-        }),
-    });
-
-    return {
-        canDrop,
-        isOver,
-        dropRef,
-    };
+import { ConnectDropTarget, DropTargetMonitor, useDrop } from 'react-dnd';
+import { iDraggedItemType, iDroppableProps } from './drag-drop.types';
+
+export function useDroppable<DropType extends string, ItemType extends iDraggedItemType<DropType>>(props?: iDroppableProps<DropType, ItemType>): {
+    canDrop: boolean;
+    isOver: boolean;
+    dropRef: ConnectDropTarget;
+} {
+    const {
+        acceptTypes,
+        onItemDrop,
+        onHover,
+        onDrop,
+    } = props || {
+        acceptTypes: [],
+        onItemDrop: () => { }
+    };
+
+    const [{ canDrop, isOver }, dropRef] = useDrop({
+        accept: acceptTypes,
+        drop: (item: ItemType) => {
+            onItemDrop(item);
+            onDrop?.();
+        },
+        hover: (item: ItemType) => {
+            onHover?.(item);
+        },
+        collect: (monitor: DropTargetMonitor) => ({
+            canDrop: monitor.canDrop(),
+            isOver: monitor.isOver(),
+        }),
+    });
+
+    return {
+        canDrop,
+        isOver,
+        dropRef,
+    };
 }

package/src/helpers/forwardRef.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-//need to redeclare to support forward ref with generic types
-declare module "react" {
-    function forwardRef<T, P = {}>(
-        render: (props: P, ref: React.Ref<T>) => React.JSX.Element | null
-    ): (props: P & React.RefAttributes<T>) => React.JSX.Element | null;
-}
+import React from 'react';
+//need to redeclare to support forward ref with generic types
+declare module "react" {
+    function forwardRef<T, P = {}>(
+        render: (props: P, ref: React.Ref<T>) => React.JSX.Element | null
+    ): (props: P & React.RefAttributes<T>) => React.JSX.Element | null;
+}

package/src/helpers/hooks-events.ts

@@ -1,150 +1,150 @@
-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<elmType extends HTMLElement>(props: { onFocus: () => void, onLoseFocus: () => void, ref?: MutableRefObject<elmType> }) {
-    const wrapperDiv: MutableRefObject<elmType> = props.ref || useRef<HTMLDivElement>(null) as any;
-    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 media query
-    const [printMode, setPrintMode] = useState<boolean>(window.matchMedia ? window.matchMedia('print').matches : false);
-    useEffect(() => {
-        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") {
-                    forcePrintOff();
-                }
-                else {
-                    console.warn('forced print mode - to exit refresh to ctrl+shift+alt+q');
-                    forcePrintOn();
-                }
-            }
-        }
-
-        // Add event listener
-        window.addEventListener("beforeprint", forcePrintOn);
-        window.addEventListener("afterprint", forcePrintOff);
-        if (isDebug())
-            window.addEventListener("keydown", printDebugHelper);
-        // Remove event listener on cleanup
-        return () => {
-            window.removeEventListener("beforeprint", forcePrintOn);
-            window.removeEventListener("afterprint", forcePrintOff);
-            if (isDebug())
-                window.removeEventListener("keydown", printDebugHelper);
-        };
-    }, 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]);
+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<elmType extends HTMLElement>(props: { onFocus: () => void, onLoseFocus: () => void, ref?: MutableRefObject<elmType> }) {
+    const wrapperDiv: MutableRefObject<elmType> = props.ref || useRef<HTMLDivElement>(null) as any;
+    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 media query
+    const [printMode, setPrintMode] = useState<boolean>(window.matchMedia ? window.matchMedia('print').matches : false);
+    useEffect(() => {
+        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") {
+                    forcePrintOff();
+                }
+                else {
+                    console.warn('forced print mode - to exit refresh to ctrl+shift+alt+q');
+                    forcePrintOn();
+                }
+            }
+        }
+
+        // Add event listener
+        window.addEventListener("beforeprint", forcePrintOn);
+        window.addEventListener("afterprint", forcePrintOff);
+        if (isDebug())
+            window.addEventListener("keydown", printDebugHelper);
+        // Remove event listener on cleanup
+        return () => {
+            window.removeEventListener("beforeprint", forcePrintOn);
+            window.removeEventListener("afterprint", forcePrintOff);
+            if (isDebug())
+                window.removeEventListener("keydown", printDebugHelper);
+        };
+    }, 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]);
 }