@kwiz/fluentui 1.0.22 → 1.0.24

package/.github/workflows/npm-publish.yml

@@ -9,27 +9,16 @@ on:
       - 'v*.*.*' # run every time we commit with a new version number
 
 jobs:
-  build:
+  build-publish-npm:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
-      - run: npm ci
-      - run: npm test
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
+          node-version: 18
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: npm run build
-      - run: npm publish
+      - run: npm run npm-publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.KWIZ_NPM_TOKEN}}

package/dist/controls/dropdown.d.ts

@@ -25,7 +25,12 @@ interface IProps<dataType, keyType extends string = string> extends ForwardProps
         data?: dataType;
     }[]) => void;
 }
-/** issue: figure out how to use forward ref with typed controls */
-export declare function DropdownEXTypedNoForwardRef<keyType extends string = string, dataType = never>(props: IProps<dataType, keyType>, ref: React.ForwardedRef<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
-export declare const DropdownEX: React.ForwardRefExoticComponent<IProps<unknown, string> & React.RefAttributes<HTMLButtonElement>>;
+/** get a DropdownEX typed with forward ref. Usage:
+ * const MyDropdownEX = DropdownEX3<myKeyType, myDataType>();
+ * ...
+ * <MyDropdownEX ... />
+ */
+export declare function getDropdownEX<keyType extends string = string, dataType = never>(): React.ForwardRefExoticComponent<IProps<dataType, keyType> & React.RefAttributes<HTMLButtonElement>>;
+/** to get typed keys use getDropdownEX */
+export declare const DropdownEX: React.ForwardRefExoticComponent<IProps<never, string> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/controls/dropdown.js

@@ -3,26 +3,33 @@ import { Dropdown, Option } from '@fluentui/react-components';
 import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
 import React from 'react';
 import { useKWIZFluentContext } from '../helpers/context';
-/** issue: figure out how to use forward ref with typed controls */
-export function DropdownEXTypedNoForwardRef(props, ref) {
-    const ctx = useKWIZFluentContext();
-    const selected = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
-    //sometimes control will lose value when re-rendered
-    //use case: public forms when editing other fields after the dropdown was set
-    //re-set the text value manually to fix
-    let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
-        let v = firstOrNull(props.items, i => i.key === s);
-        return v ? v.value : '';
-    })).join(', ');
-    return (_jsx(Dropdown, Object.assign({}, props, { onSelect: undefined, ref: ref, clearable: !props.required && !props.multiselect, appearance: ctx.inputAppearance, mountNode: ctx.mountNode, selectedOptions: selected, value: text, onOptionSelect: (e, data) => {
-            let o = firstOrNull(props.items, i => i.key === data.optionValue);
-            if (props.multiselect) {
-                let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
-                props.onSelect(o, current);
-            }
-            else
-                props.onSelect(o);
-        }, children: props.items.map(i => _jsx(Option, { value: i.key, text: i.value, children: i.option ? i.option : i.value }, i.key)) })));
+/** get a DropdownEX typed with forward ref. Usage:
+ * const MyDropdownEX = DropdownEX3<myKeyType, myDataType>();
+ * ...
+ * <MyDropdownEX ... />
+ */
+export function getDropdownEX() {
+    return React.forwardRef((props, ref) => {
+        const ctx = useKWIZFluentContext();
+        const selected = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
+        //sometimes control will lose value when re-rendered
+        //use case: public forms when editing other fields after the dropdown was set
+        //re-set the text value manually to fix
+        let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
+            let v = firstOrNull(props.items, i => i.key === s);
+            return v ? v.value : '';
+        })).join(', ');
+        return (_jsx(Dropdown, Object.assign({}, props, { onSelect: undefined, ref: ref, clearable: !props.required && !props.multiselect, appearance: ctx.inputAppearance, mountNode: ctx.mountNode, selectedOptions: selected, value: text, onOptionSelect: (e, data) => {
+                let o = firstOrNull(props.items, i => i.key === data.optionValue);
+                if (props.multiselect) {
+                    let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
+                    props.onSelect(o, current);
+                }
+                else
+                    props.onSelect(o);
+            }, children: props.items.map(i => _jsx(Option, { value: i.key, text: i.value, children: i.option ? i.option : i.value }, i.key)) })));
+    });
 }
-export const DropdownEX = React.forwardRef(DropdownEXTypedNoForwardRef);
+/** to get typed keys use getDropdownEX */
+export const DropdownEX = getDropdownEX();
 //# sourceMappingURL=dropdown.js.map

package/dist/controls/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAmB1D,mEAAmE;AACnE,MAAM,UAAU,2BAA2B,CAAoD,KAAgC,EAAE,GAA0C;IACvK,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,MAAM,QAAQ,GAAc,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEvI,oDAAoD;IACpD,6EAA6E;IAC7E,uCAAuC;IACvC,IAAI,IAAI,GAAG,kBAAkB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACtG,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;QACnD,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3B,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEf,OAAO,CACH,KAAC,QAAQ,oBAAU,KAAK,IAAE,QAAQ,EAAE,SAAS,EAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,EACvG,UAAU,EAAE,GAAG,CAAC,eAAe,EAAE,SAAS,EAAE,GAAG,CAAC,SAAS,EACzD,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;YAChE,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC;YAClE,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;gBACpB,IAAI,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;gBACxF,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;YAC/B,CAAC;;gBACI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,YACA,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAC,MAAM,IAAa,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,YAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAlE,CAAC,CAAC,GAAG,CAAuE,CAAC,IACzG,CAEd,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC"}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":"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"}

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/index.d.ts

@@ -21,5 +21,6 @@ export * from './controls/vertical';
 export * from './controls/vertical-content';
 export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
 export type { iKWIZFluentContext } from './helpers/context';
+export * from './helpers/drag-drop/exports';
 export * from './helpers/hooks';
 export { KnownClassNames } from './styles/styles';

package/dist/index.js

@@ -20,6 +20,7 @@ export * from './controls/toolbar';
 export * from './controls/vertical';
 export * from './controls/vertical-content';
 export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
+export * from './helpers/drag-drop/exports';
 export * from './helpers/hooks';
 export { KnownClassNames } from './styles/styles';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.22",
+    "version": "1.0.24",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -59,6 +59,8 @@
         "@kwiz/common": "^1.0.58",
         "esbuild": "^0.19.12",
         "get-tsconfig": "^4.7.2",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "resolve-pkg-maps": "^1.0.0"
     },
     "peerDependencies": {

package/src/controls/dropdown.tsx

@@ -20,34 +20,39 @@ interface IProps<dataType, keyType extends string = string> extends ForwardProps
         options?: { key: keyType, value: string, data?: dataType }[]) => void;
 }
 
-/** issue: figure out how to use forward ref with typed controls */
-export function DropdownEXTypedNoForwardRef<keyType extends string = string, dataType = never>(props: IProps<dataType, keyType>, ref: React.ForwardedRef<HTMLButtonElement>) {
-    const ctx = useKWIZFluentContext();
-    const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
+/** get a DropdownEX typed with forward ref. Usage:
+ * const MyDropdownEX = DropdownEX3<myKeyType, myDataType>();
+ * ...
+ * <MyDropdownEX ... />
+ */
+export function getDropdownEX<keyType extends string = string, dataType = never>() {
+    return React.forwardRef<HTMLButtonElement, (IProps<dataType, keyType>)>((props, ref) => {
+        const ctx = useKWIZFluentContext();
+        const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
 
-    //sometimes control will lose value when re-rendered
-    //use case: public forms when editing other fields after the dropdown was set
-    //re-set the text value manually to fix
-    let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
-        let v = firstOrNull(props.items, i => i.key === s);
-        return v ? v.value : ''
-    })).join(', ');
+        //sometimes control will lose value when re-rendered
+        //use case: public forms when editing other fields after the dropdown was set
+        //re-set the text value manually to fix
+        let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
+            let v = firstOrNull(props.items, i => i.key === s);
+            return v ? v.value : ''
+        })).join(', ');
 
-    return (
-        <Dropdown {...{ ...props, onSelect: undefined }} ref={ref} clearable={!props.required && !props.multiselect}
-            appearance={ctx.inputAppearance} mountNode={ctx.mountNode}
-            selectedOptions={selected} value={text} onOptionSelect={(e, data) => {
-                let o = firstOrNull(props.items, i => i.key === data.optionValue);
-                if (props.multiselect) {
-                    let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
-                    props.onSelect(o, current);
-                }
-                else props.onSelect(o);
-            }}>
-            {props.items.map(i => <Option key={i.key} value={i.key} text={i.value}>{i.option ? i.option : i.value}</Option>)}
-        </Dropdown>
-
-    );
+        return (
+            <Dropdown {...{ ...props, onSelect: undefined }} ref={ref} clearable={!props.required && !props.multiselect}
+                appearance={ctx.inputAppearance} mountNode={ctx.mountNode}
+                selectedOptions={selected} value={text} onOptionSelect={(e, data) => {
+                    let o = firstOrNull(props.items, i => i.key === data.optionValue);
+                    if (props.multiselect) {
+                        let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
+                        props.onSelect(o, current);
+                    }
+                    else props.onSelect(o);
+                }}>
+                {props.items.map(i => <Option key={i.key} value={i.key} text={i.value}>{i.option ? i.option : i.value}</Option>)}
+            </Dropdown>
+        );
+    });
 }
-
-export const DropdownEX = React.forwardRef(DropdownEXTypedNoForwardRef);
+/** to get typed keys use getDropdownEX */
+export const DropdownEX = getDropdownEX();

package/src/helpers/drag-drop/drag-drop-container.tsx

@@ -0,0 +1,47 @@
+import { isNullOrEmptyString } from "@kwiz/common";
+import { useDragDropContext } from "./drag-drop-context";
+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>> =
+    //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[] = 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 <div {...(props || {})} ref={dragDropRef} className={classNames.join(' ')}>{props.children}</div>;
+}

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

@@ -0,0 +1,67 @@
+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 { iDraggableProps, iDraggedItemType, useDraggable } from "./use-draggable";
+import useDroppable, { iDroppableProps } from "./use-droppable";
+
+export interface iDragDropContext {
+    isDragging: boolean;
+    setIsDragging: (value: boolean) => 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
+>(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 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(): iDragDropContext {
+    const [isDragging, setIsDragging] = useStateEX(false);
+
+    //build context
+    const ctx: iDragDropContext = {
+        isDragging, setIsDragging
+    };
+
+
+    return ctx;
+}
+
+interface iProps {
+}
+export const DragDropContextProvider: React.FunctionComponent<React.PropsWithChildren<iProps>> = (props) => {
+    const provider = useDragDropContextProvider();
+    return <DragDropContext.Provider value={provider}>
+        <DndProvider backend={HTML5Backend}>
+            {props.children}
+        </DndProvider>
+    </DragDropContext.Provider>;
+}

package/src/helpers/drag-drop/exports.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/src/helpers/drag-drop/readme.md

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,56 @@
+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;
+}
+
+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.setIsDragging(false);
+                onEndDrag && onEndDrag(monitor.getDropResult());
+            },
+        }),
+        [item, item.type]
+    );
+
+    useEffect(() => {
+        if (isDragging) {
+            dragDropContext.setIsDragging(true);
+            onBeginDrag && onBeginDrag();
+        }
+    }, [isDragging, onBeginDrag])
+
+    return {
+        isDragging,
+        dragRef,
+    };
+}

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

@@ -0,0 +1,48 @@
+import { ConnectDropTarget, DropTargetMonitor, useDrop } 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;
+}
+
+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,
+    };
+}
+
+export default useDroppable;

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './controls/vertical';
 export * from './controls/vertical-content';
 export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
 export type { iKWIZFluentContext } from './helpers/context';
+export * from './helpers/drag-drop/exports';
 export * from './helpers/hooks';
 export { KnownClassNames } from './styles/styles';