@kwiz/fluentui 1.0.56 → 1.0.59

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({
@@ -33,10 +31,23 @@ interface iProps {
 export const FileUpload = React.forwardRef<HTMLButtonElement, (iProps)>((props, ref) => {
     const classes = useStyles();
     const hiddenFileInput = React.useRef(null);
+    const onChangeRef = React.useRef(props.onChange);
+    const asBase64Ref = React.useRef(props.asBase64);
+
     const isMulti = props.allowMultiple === true;
     const icon = props.icon || <ArrowUploadRegular />;
     const title = isNotEmptyString(props.title) ? props.title : `Drop or select ${isMulti ? 'files' : 'file'}`;
 
+    //keep onChange up to date
+    React.useEffect(() => {
+        onChangeRef.current = props.onChange;
+    }, [props.onChange]);
+    //keep onChange up to date
+    React.useEffect(() => {
+        asBase64Ref.current = props.asBase64;
+    }, [props.asBase64]);
+
+
     const onGotFiles = React.useCallback(async (rawFiles: FileList) => {
         let errors: string[] = [];
         let acceptedFiles: File[] = [];
@@ -66,18 +77,14 @@ export const FileUpload = React.forwardRef<HTMLButtonElement, (iProps)>((props,
         }
 
         if (isMulti) {
-            if (isFunction(props.onChange)) {
-                props.onChange(acceptedFiles, errors);
-            }
+            onChangeRef.current?.(acceptedFiles, errors);
         }
         else {
             const fileUploaded = acceptedFiles[0];
-            if (isFunction(props.onChange)) {
-                props.onChange(fileUploaded, errors);
-            }
+            onChangeRef.current?.(fileUploaded, errors);
         }
 
-        if (isFunction(props.asBase64)) {
+        if (isFunction(asBase64Ref.current)) {
             const filesAs64: base64Result[] = [];
             for (let i = 0; i < (isMulti ? acceptedFiles.length : 1); i++) {
                 const currentFile = acceptedFiles[i];
@@ -95,7 +102,7 @@ export const FileUpload = React.forwardRef<HTMLButtonElement, (iProps)>((props,
                     else errors.push(`Could not read file ${acceptedFiles[i].name}`);
                 }
             }
-            props.asBase64(filesAs64, errors);
+            asBase64Ref.current?.(filesAs64, errors);
         }
     }, useEffectOnlyOnMount);
 

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