@kwiz/fluentui 1.0.21 → 1.0.24

package/dist/controls/toolbar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toolbar, ToolbarDivider, ToolbarGroup } from '@fluentui/react-components';
+import { useCommonStyles } from '../styles/styles';
+import { KWIZOverflow } from './kwizoverflow';
+export const ToolbarEX = (props) => {
+    const commonCssNames = useCommonStyles();
+    let elements = [];
+    props.buttonGroups.forEach((group, groupIndex) => {
+        group.forEach((button, buttonIndex) => {
+            const mapped = Object.assign(Object.assign({}, button), { id: `m${groupIndex}-${buttonIndex}` });
+            if (buttonIndex === 0 && groupIndex > 0 && props.buttonGroups[groupIndex - 1].length > 0) {
+                //first button, not first group, and previous group was not empty
+                //add divider
+                mapped.overflowElement = mapped.overflowElement || mapped.elm;
+                //this way if button rendes it is with the divider, but if it is in overflow - there will be no divider
+                mapped.elm = _jsxs("span", { children: [_jsx(ToolbarDivider, { style: { display: 'inline-flex' } }), mapped.elm] });
+            }
+            elements.push(mapped);
+        });
+    });
+    return (_jsx(KWIZOverflow, { className: commonCssNames.printHide, items: elements, getKey: e => e.id, renderItem: (e, i, overflow) => overflow && e.overflowElement || e.elm, getPriority: e => e.priority || -1, groupWrapper: children => _jsxs(Toolbar, { "aria-label": "Default", style: { justifyContent: "space-between" }, children: [_jsx(ToolbarGroup, { role: "presentation", children: children }), _jsx(ToolbarGroup, { role: "presentation", children: props.sideButtons })] }) }));
+};
+//# sourceMappingURL=toolbar.js.map

package/dist/controls/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../src/controls/toolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEnF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,CAAC,MAAM,SAAS,GAAoC,CAAC,KAAK,EAAE,EAAE;IAChE,MAAM,cAAc,GAAG,eAAe,EAAE,CAAC;IAEzC,IAAI,QAAQ,GAAyF,EAAE,CAAC;IACxG,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE;QAC7C,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;YAClC,MAAM,MAAM,mCAAQ,MAAM,KAAE,EAAE,EAAE,IAAI,UAAU,IAAI,WAAW,EAAE,GAAE,CAAC;YAClE,IAAI,WAAW,KAAK,CAAC,IAAI,UAAU,GAAG,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACvF,iEAAiE;gBACjE,aAAa;gBACb,MAAM,CAAC,eAAe,GAAG,MAAM,CAAC,eAAe,IAAI,MAAM,CAAC,GAAG,CAAC;gBAC9D,uGAAuG;gBACvG,MAAM,CAAC,GAAG,GAAG,2BACT,KAAC,cAAc,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,GAAI,EACpD,MAAM,CAAC,GAAG,IACR,CAAC;YAEZ,CAAC;YACD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAA;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,KAAC,YAAY,IAAC,SAAS,EAAE,cAAc,CAAC,SAAS,EAC7C,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjB,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,IAAI,CAAC,CAAC,eAAe,IAAI,CAAC,CAAC,GAAG,EACtE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,EAClC,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC,MAAC,OAAO,kBAAY,SAAS,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,aAC9F,KAAC,YAAY,IAAC,IAAI,EAAC,cAAc,YAC5B,QAAQ,GACE,EACf,KAAC,YAAY,IAAC,IAAI,EAAC,cAAc,YAC5B,KAAK,CAAC,WAAW,GACP,IACT,GACZ,CAAC,CAAC;AACZ,CAAC,CAAA"}

package/dist/controls/vertical-content.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IProps {
+    css?: string[];
+}
+export declare const VerticalContent: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export {};

package/dist/controls/vertical-content.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles, mergeClasses } from '@fluentui/react-components';
+import { isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
+import { useWindowSize } from '../helpers/hooks';
+const useStyles = makeStyles({
+    verticalContainer: {
+        position: "relative",
+        ['& > div']: {
+            position: "absolute",
+            transform: "rotate(90deg)"
+        }
+    }
+});
+export const VerticalContent = (props) => {
+    const classes = useStyles();
+    let css = [classes.verticalContainer];
+    const size = useWindowSize();
+    let div = React.useRef();
+    let rotate = React.useRef();
+    if (isNotEmptyArray(props.css))
+        css.push(...props.css);
+    React.useEffect(() => {
+        if (div.current && rotate.current) {
+            let rootDiv = div.current;
+            let rotateDiv = rotate.current;
+            rootDiv.style.height = `${rotateDiv.clientWidth}px`;
+            rootDiv.style.width = `${rotateDiv.clientHeight}px`;
+            rootDiv.style.minHeight = `${rotateDiv.clientWidth}px`;
+            rootDiv.style.minWidth = `${rotateDiv.clientHeight}px`;
+            rotateDiv.style.top = `${(rotateDiv.clientWidth - rotateDiv.clientHeight) / 2}px`;
+            rotateDiv.style.left = `-${(rotateDiv.clientWidth - rotateDiv.clientHeight) / 2}px`;
+        }
+    }, [div, rotate, size.height, size.width]);
+    return (_jsx("div", { ref: div, className: mergeClasses(...css), children: _jsx("div", { ref: rotate, children: props.children }) }));
+};
+//# sourceMappingURL=vertical-content.js.map

package/dist/controls/vertical-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-content.js","sourceRoot":"","sources":["../../src/controls/vertical-content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,iBAAiB,EAAE;QACf,QAAQ,EAAE,UAAU;QACpB,CAAC,SAAS,CAAC,EAAE;YACT,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,eAAe;SAC7B;KACJ;CACJ,CAAC,CAAC;AAKH,MAAM,CAAC,MAAM,eAAe,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC/F,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,IAAI,GAAG,GAAa,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,aAAa,EAAE,CAAC;IAE7B,IAAI,GAAG,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;IACzB,IAAI,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;IAE5B,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,GAAG,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YAChC,IAAI,OAAO,GAAI,GAAG,CAAC,OAA0B,CAAC;YAC9C,IAAI,SAAS,GAAI,MAAM,CAAC,OAA0B,CAAC;YACnD,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,CAAC,WAAW,IAAI,CAAC;YACpD,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,SAAS,CAAC,YAAY,IAAI,CAAC;YACpD,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,SAAS,CAAC,WAAW,IAAI,CAAC;YACvD,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,SAAS,CAAC,YAAY,IAAI,CAAC;YAEvD,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;YAClF,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;QACxF,CAAC;IACL,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3C,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,GAAG,GAAG,CAAC,YAC1C,cAAK,GAAG,EAAE,MAAM,YACX,KAAK,CAAC,QAAQ,GACb,GACJ,CACT,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/vertical.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ISectionProps } from './section';
+interface IProps extends ISectionProps {
+    wrap?: boolean;
+    nogap?: boolean;
+}
+export declare const Vertical: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export {};

package/dist/controls/vertical.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@fluentui/react-components';
+import { isNotEmptyArray } from '@kwiz/common';
+import { KnownClassNames, mixins } from '../styles/styles';
+import { Section } from './section';
+const useStyles = makeStyles({
+    vertical: Object.assign(Object.assign({}, mixins.flex), { flexDirection: 'column' }),
+    wrap: mixins.wrap,
+    nogap: mixins.nogap
+});
+export const Vertical = (props) => {
+    const cssNames = useStyles();
+    let css = [KnownClassNames.vertical];
+    css.push(cssNames.vertical);
+    if (props.wrap)
+        css.push(cssNames.wrap);
+    if (props.nogap)
+        css.push(cssNames.nogap);
+    if (isNotEmptyArray(props.css))
+        css.push(...props.css);
+    return (_jsx(Section, Object.assign({}, props, { css: css })));
+};
+//# sourceMappingURL=vertical.js.map

package/dist/controls/vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical.js","sourceRoot":"","sources":["../../src/controls/vertical.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAiB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,QAAQ,kCACD,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,QAAQ,GAC1B;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;CACtB,CAAC,CAAA;AAMF,MAAM,CAAC,MAAM,QAAQ,GAA6D,CAAC,KAAK,EAAE,EAAE;IACxF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IAE/C,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,IAAI;QACV,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,KAAK;QACX,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE7B,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACH,KAAC,OAAO,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACnC,CAAC;AACN,CAAC,CAAA"}

package/dist/helpers/context.d.ts

@@ -0,0 +1,26 @@
+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';
+}
+export declare const KWIZFluentContext: React.Context<iKWIZFluentContext>;
+export declare function useKWIZFluentContext(): iKWIZFluentContext;

package/dist/helpers/context.js

@@ -0,0 +1,15 @@
+import { isNullOrUndefined } from "@kwiz/common";
+import React from "react";
+//create context
+export const KWIZFluentContext = React.createContext(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;
+}
+//# sourceMappingURL=context.js.map

package/dist/helpers/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/helpers/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,gBAAgB;AAChB,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAqB,IAAI,CAAC,CAAC;AAC/E,kCAAkC;AAClC,MAAM,UAAU,oBAAoB;IAChC,IAAI,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IACpD,cAAc;IACd,IAAI,iBAAiB,CAAC,GAAG,CAAC,eAAe,CAAC;QACtC,GAAG,CAAC,eAAe,GAAG,WAAW,CAAC;IACtC,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC;QAClC,GAAG,CAAC,WAAW,GAAG,UAAU,CAAC;IACjC,OAAO,GAAG,CAAC;AACf,CAAC"}

package/dist/helpers/drag-drop/drag-drop-container.d.ts

@@ -0,0 +1,15 @@
+import { iDraggedItemType, iDraggableProps } from "./use-draggable";
+import { iDroppableProps } from "./use-droppable";
+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> | other<DropInfoTypes, DropInfoItemTypes> | (one<DragItemType> & other<DropInfoTypes, DropInfoItemTypes>);
+type iProps<DragItemType extends iDraggedItemType<string>, DropInfoTypes extends string, DropInfoItemTypes extends iDraggedItemType<DropInfoTypes>> = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    onDraggingClassName?: string;
+    onDragOverClassName?: string;
+} & iDragDropProps<DragItemType, DropInfoTypes, DropInfoItemTypes>;
+export declare function DragDropContainer<DragItemType extends iDraggedItemType<string> = never, DropInfoTypes extends string = never, DropInfoItemTypes extends iDraggedItemType<DropInfoTypes> = never>(props: React.PropsWithChildren<iProps<DragItemType, DropInfoTypes, DropInfoItemTypes>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helpers/drag-drop/drag-drop-container.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrEmptyString } from "@kwiz/common";
+import { useDragDropContext } from "./drag-drop-context";
+export function DragDropContainer(props) {
+    const { drag, drop, dragDropRef } = useDragDropContext(props);
+    const classNames = isNullOrEmptyString(props.className) ? [] : props.className.split(' ');
+    if (drag.isDragging && props.onDraggingClassName)
+        classNames.push(props.onDraggingClassName);
+    if (drop.isOver && props.onDragOverClassName)
+        classNames.push(props.onDragOverClassName);
+    return _jsx("div", Object.assign({}, (props || {}), { ref: dragDropRef, className: classNames.join(' '), children: props.children }));
+}
+//# sourceMappingURL=drag-drop-container.js.map

package/dist/helpers/drag-drop/drag-drop-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-drop-container.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/drag-drop-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAgCzD,MAAM,UAAU,iBAAiB,CAI/B,KAAsF;IAEpF,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,UAAU,GAAa,mBAAmB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACpG,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,mBAAmB;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC7F,IAAI,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,mBAAmB;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAEzF,OAAO,8BAAS,CAAC,KAAK,IAAI,EAAE,CAAC,IAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,YAAG,KAAK,CAAC,QAAQ,IAAO,CAAC;AAC7G,CAAC"}

package/dist/helpers/drag-drop/drag-drop-context.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { iDraggableProps, iDraggedItemType } from "./use-draggable";
+import { iDroppableProps } from "./use-droppable";
+export interface iDragDropContext {
+    isDragging: boolean;
+    setIsDragging: (value: boolean) => void;
+}
+export declare const DragDropContext: React.Context<iDragDropContext>;
+export declare function useDragDropContextInternal(): iDragDropContext;
+export declare function useDragDropContext<DragItemType extends iDraggedItemType<string> = never, DropInfoType extends iDroppableProps<string, any> = never>(info: {
+    dragInfo?: iDraggableProps<DragItemType>;
+    dropInfo?: DropInfoType;
+}): {
+    dragDropContext: iDragDropContext;
+    drag: {
+        isDragging: boolean;
+        dragRef: import("react-dnd").ConnectDragSource;
+    };
+    drop: {
+        canDrop: boolean;
+        isOver: boolean;
+        dropRef: import("react-dnd").ConnectDropTarget;
+    };
+    dragDropRef: import("react-dnd").ConnectDragSource;
+};
+export declare function useDragDropContextProvider(): iDragDropContext;
+interface iProps {
+}
+export declare const DragDropContextProvider: React.FunctionComponent<React.PropsWithChildren<iProps>>;
+export {};

package/dist/helpers/drag-drop/drag-drop-context.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNullOrUndefined } from "@kwiz/common";
+import React, { useContext } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { useStateEX } from "../hooks";
+import { useDraggable } from "./use-draggable";
+import useDroppable from "./use-droppable";
+//create context
+export const DragDropContext = React.createContext(null);
+//use context from within controls
+export function useDragDropContextInternal() {
+    const dragDropContext = useContext(DragDropContext);
+    return dragDropContext;
+}
+export function useDragDropContext(info) {
+    const dragDropContext = useDragDropContextInternal();
+    const isDraggable = !isNullOrUndefined(info.dragInfo);
+    const isDroppable = !isNullOrUndefined(info.dropInfo);
+    const drag = useDraggable(info === null || info === void 0 ? void 0 : info.dragInfo);
+    const drop = useDroppable(info === null || info === void 0 ? void 0 : info.dropInfo);
+    const acceptDrops = isDroppable && !drag.isDragging && dragDropContext.isDragging;
+    return {
+        dragDropContext,
+        drag,
+        drop,
+        dragDropRef: isDraggable && !isDroppable
+            ? drag.dragRef
+            : !isDraggable && isDroppable
+                ? drop.dropRef
+                //both drag and drop allowed
+                : acceptDrops ? drop.dropRef : drag.dragRef
+    };
+}
+export function useDragDropContextProvider() {
+    const [isDragging, setIsDragging] = useStateEX(false);
+    //build context
+    const ctx = {
+        isDragging, setIsDragging
+    };
+    return ctx;
+}
+export const DragDropContextProvider = (props) => {
+    const provider = useDragDropContextProvider();
+    return _jsx(DragDropContext.Provider, { value: provider, children: _jsx(DndProvider, { backend: HTML5Backend, children: props.children }) });
+};
+//# sourceMappingURL=drag-drop-context.js.map

package/dist/helpers/drag-drop/drag-drop-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-drop-context.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/drag-drop-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAqC,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,YAAiC,MAAM,iBAAiB,CAAC;AAMhE,gBAAgB;AAChB,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAmB,IAAI,CAAC,CAAC;AAC3E,kCAAkC;AAClC,MAAM,UAAU,0BAA0B;IACtC,MAAM,eAAe,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACpD,OAAO,eAAe,CAAC;AAC3B,CAAC;AACD,MAAM,UAAU,kBAAkB,CAGhC,IAGD;IACG,MAAM,eAAe,GAAG,0BAA0B,EAAE,CAAC;IACrD,MAAM,WAAW,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,WAAW,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,eAAe,CAAC,UAAU,CAAC;IAElF,OAAO;QACH,eAAe;QACf,IAAI;QACJ,IAAI;QACJ,WAAW,EAAE,WAAW,IAAI,CAAC,WAAW;YACpC,CAAC,CAAC,IAAI,CAAC,OAAO;YACd,CAAC,CAAC,CAAC,WAAW,IAAI,WAAW;gBACzB,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,4BAA4B;gBAC5B,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO;KACtD,CAAC;AACN,CAAC;AACD,MAAM,UAAU,0BAA0B;IACtC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IAEtD,eAAe;IACf,MAAM,GAAG,GAAqB;QAC1B,UAAU,EAAE,aAAa;KAC5B,CAAC;IAGF,OAAO,GAAG,CAAC;AACf,CAAC;AAID,MAAM,CAAC,MAAM,uBAAuB,GAA6D,CAAC,KAAK,EAAE,EAAE;IACvG,MAAM,QAAQ,GAAG,0BAA0B,EAAE,CAAC;IAC9C,OAAO,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAC5C,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,YAC7B,KAAK,CAAC,QAAQ,GACL,GACS,CAAC;AAChC,CAAC,CAAA"}

package/dist/helpers/drag-drop/exports.d.ts

@@ -0,0 +1,4 @@
+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";

package/dist/helpers/drag-drop/exports.js

@@ -0,0 +1,3 @@
+export { DragDropContainer } from './drag-drop-container';
+export { DragDropContextProvider, useDragDropContext } from "./drag-drop-context";
+//# sourceMappingURL=exports.js.map

package/dist/helpers/drag-drop/exports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exports.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/exports.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/helpers/drag-drop/use-draggable.d.ts

@@ -0,0 +1,13 @@
+import { ConnectDragSource } from 'react-dnd';
+export interface iDraggedItemType<DragType extends string> {
+    type: DragType;
+}
+export interface iDraggableProps<ItemType extends iDraggedItemType<string>> {
+    item: ItemType;
+    onBeginDrag?: () => void;
+    onEndDrag?: (dropResult: any) => void;
+}
+export declare function useDraggable<ItemType extends iDraggedItemType<string>>(props?: iDraggableProps<ItemType>): {
+    isDragging: boolean;
+    dragRef: ConnectDragSource;
+};

package/dist/helpers/drag-drop/use-draggable.js

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { useDrag } from 'react-dnd';
+import { useDragDropContextInternal } from './drag-drop-context';
+export function useDraggable(props) {
+    const { item, onBeginDrag, onEndDrag, } = props || {
+        item: {
+            type: "~invalid~"
+        }
+    };
+    const dragDropContext = useDragDropContextInternal();
+    const [{ isDragging }, dragRef] = useDrag(() => ({
+        type: item.type,
+        item,
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+        end: (item, monitor) => {
+            dragDropContext.setIsDragging(false);
+            onEndDrag && onEndDrag(monitor.getDropResult());
+        },
+    }), [item, item.type]);
+    useEffect(() => {
+        if (isDragging) {
+            dragDropContext.setIsDragging(true);
+            onBeginDrag && onBeginDrag();
+        }
+    }, [isDragging, onBeginDrag]);
+    return {
+        isDragging,
+        dragRef,
+    };
+}
+//# sourceMappingURL=use-draggable.js.map

package/dist/helpers/drag-drop/use-draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-draggable.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/use-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAwC,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC;AAWjE,MAAM,UAAU,YAAY,CAA4C,KAAiC;IAIrG,MAAM,EACF,IAAI,EACJ,WAAW,EACX,SAAS,GACZ,GAAG,KAAK,IAAI;QACT,IAAI,EAAE;YACF,IAAI,EAAE,WAAW;SACpB;KACJ,CAAC;IAEF,MAAM,eAAe,GAAG,0BAA0B,EAAE,CAAC;IAErD,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CACrC,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI;QACJ,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;SACnC,CAAC;QACF,GAAG,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;YACnB,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACrC,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;QACpD,CAAC;KACJ,CAAC,EACF,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE,CAAC;YACb,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACpC,WAAW,IAAI,WAAW,EAAE,CAAC;QACjC,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAA;IAE7B,OAAO;QACH,UAAU;QACV,OAAO;KACV,CAAC;AACN,CAAC"}

package/dist/helpers/drag-drop/use-droppable.d.ts

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

package/dist/helpers/drag-drop/use-droppable.js

@@ -0,0 +1,28 @@
+import { useDrop } from 'react-dnd';
+function useDroppable(props) {
+    const { acceptTypes, onItemDrop, onHover, onDrop, } = props || {
+        acceptTypes: [],
+        onItemDrop: () => { }
+    };
+    const [{ canDrop, isOver }, dropRef] = useDrop({
+        accept: acceptTypes,
+        drop: (item) => {
+            onItemDrop(item);
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop();
+        },
+        hover: (item) => {
+            onHover === null || onHover === void 0 ? void 0 : onHover(item);
+        },
+        collect: (monitor) => ({
+            canDrop: monitor.canDrop(),
+            isOver: monitor.isOver(),
+        }),
+    });
+    return {
+        canDrop,
+        isOver,
+        dropRef,
+    };
+}
+export default useDroppable;
+//# sourceMappingURL=use-droppable.js.map

package/dist/helpers/drag-drop/use-droppable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-droppable.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/use-droppable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,OAAO,EAAE,MAAM,WAAW,CAAC;AAU1E,SAAS,YAAY,CAAuE,KAA2C;IAKnI,MAAM,EACF,WAAW,EACX,UAAU,EACV,OAAO,EACP,MAAM,GACT,GAAG,KAAK,IAAI;QACT,WAAW,EAAE,EAAE;QACf,UAAU,EAAE,GAAG,EAAE,GAAG,CAAC;KACxB,CAAC;IAEF,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC;QAC3C,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,CAAC,IAAc,EAAE,EAAE;YACrB,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACf,CAAC;QACD,KAAK,EAAE,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,CAAC;QACpB,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE;YAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SAC3B,CAAC;KACL,CAAC,CAAC;IAEH,OAAO;QACH,OAAO;QACP,MAAM;QACN,OAAO;KACV,CAAC;AACN,CAAC;AAED,eAAe,YAAY,CAAC"}

package/dist/helpers/hooks.d.ts

@@ -0,0 +1,62 @@
+import { ToastIntent } from "@fluentui/react-components";
+import { MutableRefObject, SetStateAction } from "react";
+import { iKWIZFluentContext } from "./context";
+/** Empty array ensures that effect is only run on mount */
+export declare const useEffectOnlyOnMount: any[];
+/** set state on steroids. provide promise callback after render, onChange transformer and automatic skip-set when value not changed */
+export declare function useStateEX<ValueType>(initialValue: ValueType, options?: {
+    onChange?: (newValue: SetStateAction<ValueType>) => SetStateAction<ValueType>;
+    skipUpdateIfSame?: boolean;
+    name?: string;
+}): [
+    ValueType,
+    (newValue: SetStateAction<ValueType>) => Promise<ValueType>,
+    MutableRefObject<ValueType>
+];
+export declare function useTrackFocus(props: {
+    onFocus: () => void;
+    onLoseFocus: () => void;
+    ref?: MutableRefObject<HTMLElement>;
+}): MutableRefObject<HTMLElement>;
+export declare function useWindowSize(): {
+    width: number;
+    height: number;
+};
+export declare function useIsInPrint(): boolean;
+/** 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 declare function useBlockNav(): {
+    setMessage: (id: string, message?: string) => void;
+    onNav: (nav: () => void) => void;
+    navPrompt: import("react/jsx-runtime").JSX.Element;
+};
+export declare function useKeyDown(options: {
+    elm?: HTMLElement | Document;
+    onEnter?: (e: KeyboardEvent) => void;
+    onEscape?: (e: KeyboardEvent) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+}): void;
+export declare function useToast(): {
+    control: import("react/jsx-runtime").JSX.Element;
+    dispatch: (info: {
+        title?: string;
+        body?: string;
+        subtitle?: string;
+        titleAction?: {
+            text: string;
+            onClick: () => void;
+        };
+        footerActions?: {
+            text: string;
+            onClick: () => void;
+        }[];
+        intent?: ToastIntent;
+    }) => void;
+};
+export declare function useKWIZFluentContextProvider(options: {
+    root?: React.MutableRefObject<HTMLDivElement>;
+    ctx?: iKWIZFluentContext;
+}): iKWIZFluentContext;