@kwiz/fluentui 1.0.78 → 1.0.79

package/src/helpers/block-nav.tsx

@@ -1,89 +0,0 @@
-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-const.ts

@@ -1,30 +0,0 @@
-import React 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';
-    /** true if using dark theme */
-    dark?: boolean;
-}
-
-//create context
-export const KWIZFluentContext = React.createContext<iKWIZFluentContext>(null);

package/src/helpers/context-export.tsx

@@ -1,78 +0,0 @@
-import { makeStaticStyles, makeStyles, tokens } from "@fluentui/react-components";
-import React, { PropsWithChildren, useEffect, useState } from "react";
-import { GetLogger } from "../_modules/config";
-import { KnownClassNames } from "../styles";
-import { iKWIZFluentContext, KWIZFluentContext } from "./context-const";
-import { DragDropContextProvider } from "./drag-drop";
-export type { iKWIZFluentContext } from "./context-const";
-const logger = GetLogger("KWIZFluentContextProvider");
-const useContextStyles = makeStyles({
-    root: {
-        "& *": {
-            scrollbarWidth: "thin",
-            //if we can make sure this applies only to fui-FluentProvider, do this too, since public forms might take over the entire page we don't want to to affect other sites:
-            //maybe make KWIZFluentProvider automatically wrap in a root and apply to it
-            //scrollbarColor: `${tokens.colorBrandForeground2} ${tokens.colorBrandBackground2}`
-        },
-        [`& .${KnownClassNames.printShow}`]: {
-            '@media print': {
-                display: 'unset',
-            }
-        },
-        [`& .${KnownClassNames.printHide}`]: {
-            '@media print': {
-                display: 'none !important'
-            }
-        },
-    },
-});
-export const useStaticStyles = makeStaticStyles({
-    [`.${KnownClassNames.printShow}`]: {
-        display: 'none'
-    },
-    [`body.${KnownClassNames.print} .${KnownClassNames.printHide}`]: {
-        display: "none !important"
-    },
-    [`body.${KnownClassNames.print} .${KnownClassNames.printShow}`]: {
-        display: "unset"
-    }
-});
-
-/** @deprecated - use KWIZFluentProvider instead of using this + DragDropContextProvider */
-export function useKWIZFluentContextProvider(options: {
-    root?: React.MutableRefObject<HTMLDivElement>;
-    ctx?: iKWIZFluentContext;
-}) {
-    useStaticStyles();
-    const classes = useContextStyles();
-    let v: iKWIZFluentContext = options && options.ctx || {};
-    const [kwizFluentContext, setKwizFluentContext] = useState<iKWIZFluentContext>(v);
-    useEffect(() => {
-        if (options.root?.current) logger.warn('Sending a root node is not recommended, if you have set up your packages correctly to mark react and fluent UI as external dialogs should open correctly.');
-        let styleRoot = options.root?.current || document.body;
-        styleRoot.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,
-        value: kwizFluentContext
-    };
-}
-
-export const KWIZFluentProvider = (props: PropsWithChildren<{
-    ctx?: iKWIZFluentContext;
-}>) => {
-
-    const cp = useKWIZFluentContextProvider({ ctx: props.ctx });
-
-    return <cp.KWIZFluentContext.Provider value={cp.value}>
-        <DragDropContextProvider>
-            {props.children}
-        </DragDropContextProvider>
-    </cp.KWIZFluentContext.Provider>;
-}

package/src/helpers/context-internal.ts

@@ -1,14 +0,0 @@
-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,54 +0,0 @@
-import { mergeClasses } from "@fluentui/react-components";
-import { useDragDropContext } from "./drag-drop-context";
-import { iDraggableProps, iDraggedItemType, iDroppableProps } from "./drag-drop.types";
-
-interface one<DragItemType extends iDraggedItemType<string>> {
-    dragInfo: iDraggableProps<DragItemType>;
-}
-interface other<
-    DropInfoTypes extends string = never,
-    DropInfoItemTypes extends iDraggedItemType<DropInfoTypes> = never,
-> {
-    dropInfo: iDroppableProps<DropInfoTypes, DropInfoItemTypes>;
-}
-type iDragDropProps<
-    DragItemType extends iDraggedItemType<string>,
-    DropInfoTypes extends string = never,
-    DropInfoItemTypes extends iDraggedItemType<DropInfoTypes> = never,
-> = one<DragItemType> & Partial<other<DropInfoTypes, DropInfoItemTypes>>
-    | Partial<one<DragItemType>> & other<DropInfoTypes, DropInfoItemTypes>
-    | (one<DragItemType> & other<DropInfoTypes, DropInfoItemTypes>);
-
-type iProps<DragItemType extends iDraggedItemType<string>, DropInfoTypes extends string, DropInfoItemTypes extends iDraggedItemType<DropInfoTypes>> =
-    //all DIV props, except ref - we need ref.
-    Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">
-    //pass drag class names
-    & {
-        onDraggingClassName?: string;
-        onDragOverClassName?: string;
-    }
-    //drag/drop info
-    & iDragDropProps<DragItemType, DropInfoTypes, DropInfoItemTypes>
-
-export function DragDropContainer<
-    DragItemType extends iDraggedItemType<string> = never,
-    DropInfoTypes extends string = never,
-    DropInfoItemTypes extends iDraggedItemType<DropInfoTypes> = never
->(props: React.PropsWithChildren<iProps<DragItemType, DropInfoTypes, DropInfoItemTypes>>) {
-
-    const { drag, drop, dragDropRef } = useDragDropContext(props);
-
-    const classNames: string[] = [];
-    if (drag.isDragging && props.onDraggingClassName) classNames.push(props.onDraggingClassName);
-    if (drop.isOver && props.onDragOverClassName) classNames.push(props.onDragOverClassName);
-
-    const propsWithoutExtras = {
-        ...props
-    };
-    delete propsWithoutExtras.dragInfo;
-    delete propsWithoutExtras.dropInfo;
-    delete propsWithoutExtras.onDraggingClassName;
-    delete propsWithoutExtras.onDragOverClassName;
-
-    return <div {...propsWithoutExtras} ref={dragDropRef} className={mergeClasses(...classNames, props.className)}>{props.children}</div>;
-}

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

@@ -1,10 +0,0 @@
-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,62 +0,0 @@
-import { isNullOrUndefined } from "@kwiz/common";
-import React from "react";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { useStateEX } from "../hooks";
-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 function useDragDropContext<
-    DragItemType extends iDraggedItemType<string> = never,
-    DropInfoType extends iDroppableProps<string, any> = never
->(info: {
-    dragInfo?: iDraggableProps<DragItemType>;
-    dropInfo?: DropInfoType;
-}) {
-    const dragDropContext = useDragDropContextInternal();
-    const isDraggable = !isNullOrUndefined(info.dragInfo);
-    const isDroppable = !isNullOrUndefined(info.dropInfo);
-    const drag = useDraggable(info?.dragInfo);
-    const drop = useDroppable(info?.dropInfo);
-    const expectingDrop = isDroppable && !drag.isDragging && dragDropContext.isDragging
-        //check if item being dragged is allowed in this context...
-        && info.dropInfo.acceptTypes.indexOf(dragDropContext.dragItem.type) >= 0;
-
-    return {
-        dragDropContext,
-        drag,
-        drop,
-        /** an item that this control can handler is being dragged */
-        expectingDrop,
-        dragDropRef: isDraggable && !isDroppable
-            ? drag.dragRef
-            : !isDraggable && isDroppable
-                ? drop.dropRef
-                //both drag and drop allowed
-                : expectingDrop ? drop.dropRef : drag.dragRef
-    };
-}
-export function useDragDropContextProvider(): iDragDropContext {
-    const [dragItem, setDragItem] = useStateEX<iDraggedItemType<string>>(null);
-
-    //build context
-    const ctx: iDragDropContext = {
-        isDragging: !isNullOrUndefined(dragItem),
-        dragItem, setDragItem
-    };
-
-    return ctx;
-}
-
-interface iProps {
-}
-export const DragDropContextProvider: React.FunctionComponent<React.PropsWithChildren<iProps>> = (props) => {
-    const provider = useDragDropContextProvider();
-    return <DragDropContext.Provider value={provider}>
-        <DndProvider backend={HTML5Backend} context={window}>
-            {props.children}
-        </DndProvider>
-    </DragDropContext.Provider>;
-}

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

@@ -1,21 +0,0 @@
-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/index.ts

@@ -1,12 +0,0 @@
-import { NativeTypes } from 'react-dnd-html5-backend';
-import { iDraggedItemType, iDroppableProps } from './drag-drop.types';
-
-export { DragDropContainer } from './drag-drop-container';
-export { DragDropContextProvider, useDragDropContext } from "./drag-drop-context";
-export type { iDraggedItemType, iDroppableProps } from "./drag-drop.types";
-
-type fileNativeType = typeof NativeTypes.FILE;
-interface dragFiles extends iDraggedItemType<fileNativeType> {
-    files: FileList;
-}
-export type dropFiles = iDroppableProps<fileNativeType, dragFiles>;

package/src/helpers/drag-drop/readme.md

@@ -1,76 +0,0 @@
-Use drag drop with types examples:
-
-Wrap everything within drag/drop context:
-```tsx
-<DragDropContextProvider>
-...
-</DragDropContextProvider>
-```
-
-Define the types you want to allow drag/drop:
-```tsx
-export type dragColumnType = "column";
-export type dragCellType = "cell";
-export interface dragColumn extends iDraggedItemType<dragColumnType> {
-    data: iDesignerContextFields
-}
-
-export interface dragCell extends iDraggedItemType<dragCellType> {
-    row: number;
-    cell: number;
-}
-export interface dropCellOrColumn extends iDroppableProps<dragColumnType | dragCellType, dragColumn | dragCell> {
-}
-```
-
-use within a control:
-```tsx
-    const { drag, drop, dragDropRef } = useDragDropContext<
-        dragCell, dropCellOrColumn
-    >({
-        dragInfo: {
-            item: {
-                type: "cell",
-                cell: props.index,
-                row: props.rowIndex
-            },
-        },
-        dropInfo: {
-            acceptTypes: ["cell", "column"],
-            onItemDrop: item => {
-                switch (item.type) {
-                    case "cell":
-                        alert(item.cell);
-                        break;
-                    case "column":
-                        alert(item.data.title);
-                        break;
-                }
-            }
-        }
-    });
-
-...
-
-<Section css={[
-        drop.isOver && classes.hover,
-        drag.isDragging && classes.dragging
-        ]}
-        ref={dragDropRef}>
-        ...
-</Section>
-```
-
-Use with a wrapper:
-
-```tsx
-<DragDropContainer<dragColumn>
-    dragInfo={{
-        item: {
-            type: "column",
-            data: f
-        }
-    }}>
-<ButtonEX  ... />
-</DragDropContainer>
-```

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

@@ -1,48 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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;
-}