@kwiz/fluentui 1.0.73 → 1.0.75

package/src/helpers/context-export.tsx

@@ -1,78 +1,78 @@
-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>;
+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 +1,14 @@
-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;
+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 +1,54 @@
-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>;
+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 +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;
+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 +1,62 @@
-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>;
+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 +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;
-}
+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 +1,12 @@
-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>;
+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 +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>
+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>
 ```