@kwiz/fluentui 1.0.29 → 1.0.31

package/dist/controls/divider.d.ts

@@ -1,5 +1,8 @@
+import { DividerProps } from '@fluentui/react-components';
 import React from 'react';
-interface IProps {
+interface IProps extends DividerProps {
 }
-export declare const DividerEX: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const DividerEX: React.ForwardRefExoticComponent<IProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/controls/divider.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Divider, makeStyles } from '@fluentui/react-components';
+import React from 'react';
 const useStyles = makeStyles({
     separator: {
         flexGrow: 0
     }
 });
-export const DividerEX = (props) => {
+export const DividerEX = React.forwardRef((props, ref) => {
     const cssNames = useStyles();
-    return (_jsx(Divider, Object.assign({}, props, { className: cssNames.separator })));
-};
+    return (_jsx(Divider, Object.assign({ ref: ref }, props, { className: cssNames.separator })));
+});
 //# sourceMappingURL=divider.js.map

package/dist/controls/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../src/controls/divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGjE,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,SAAS,EAAE;QACP,QAAQ,EAAE,CAAC;KACd;CACJ,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,SAAS,GAA6D,CAAC,KAAK,EAAE,EAAE;IACzF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,OAAO,CACH,KAAC,OAAO,oBAAK,KAAK,IAAE,SAAS,EAAE,QAAQ,CAAC,SAAS,IAAI,CACxD,CAAC;AACN,CAAC,CAAA"}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../src/controls/divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAgB,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,SAAS,EAAE;QACP,QAAQ,EAAE,CAAC;KACd;CACJ,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAoD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,OAAO,CACH,KAAC,OAAO,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,IAAE,SAAS,EAAE,QAAQ,CAAC,SAAS,IAAI,CAClE,CAAC;AACN,CAAC,CAAC,CAAC"}

package/dist/controls/horizontal.d.ts

@@ -4,5 +4,7 @@ interface IProps extends ISectionProps {
     wrap?: boolean;
     nogap?: boolean;
 }
-export declare const Horizontal: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const Horizontal: React.ForwardRefExoticComponent<IProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/controls/horizontal.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { makeStyles } from '@fluentui/react-components';
 import { isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
 import { KnownClassNames, mixins } from '../styles/styles';
 import { Section } from './section';
 const useStyles = makeStyles({
@@ -8,7 +9,7 @@ const useStyles = makeStyles({
     wrap: mixins.wrap,
     nogap: mixins.nogap
 });
-export const Horizontal = (props) => {
+export const Horizontal = React.forwardRef((props, ref) => {
     const cssNames = useStyles();
     let css = [KnownClassNames.horizontal];
     css.push(cssNames.horizontal);
@@ -19,5 +20,5 @@ export const Horizontal = (props) => {
     if (isNotEmptyArray(props.css))
         css.push(...props.css);
     return (_jsx(Section, Object.assign({}, props, { css: css })));
-};
+});
 //# sourceMappingURL=horizontal.js.map

package/dist/controls/horizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"horizontal.js","sourceRoot":"","sources":["../../src/controls/horizontal.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,UAAU,kCACH,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,KAAK,GACvB;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;CACtB,CAAC,CAAA;AAMF,MAAM,CAAC,MAAM,UAAU,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC1F,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IAEjD,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC9B,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"}
+{"version":3,"file":"horizontal.js","sourceRoot":"","sources":["../../src/controls/horizontal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAiB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,UAAU,kCACH,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,KAAK,GACvB;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;CACtB,CAAC,CAAA;AAMF,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IAEjD,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC9B,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,CAAC,CAAC"}

package/dist/controls/vertical.d.ts

@@ -4,5 +4,7 @@ interface IProps extends ISectionProps {
     wrap?: boolean;
     nogap?: boolean;
 }
-export declare const Vertical: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export declare const Vertical: React.ForwardRefExoticComponent<IProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/controls/vertical.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { makeStyles } from '@fluentui/react-components';
 import { isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
 import { KnownClassNames, mixins } from '../styles/styles';
 import { Section } from './section';
 const useStyles = makeStyles({
@@ -8,7 +9,7 @@ const useStyles = makeStyles({
     wrap: mixins.wrap,
     nogap: mixins.nogap
 });
-export const Vertical = (props) => {
+export const Vertical = React.forwardRef((props, ref) => {
     const cssNames = useStyles();
     let css = [KnownClassNames.vertical];
     css.push(cssNames.vertical);
@@ -19,5 +20,5 @@ export const Vertical = (props) => {
     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

@@ -1 +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"}
+{"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;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,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,GAAG,KAAK,CAAC,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrG,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,CAAC,CAAC"}

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

@@ -22,6 +22,8 @@ export declare function useDragDropContext<DragItemType extends iDraggedItemType
         isOver: boolean;
         dropRef: import("react-dnd").ConnectDropTarget;
     };
+    /** an item that this control can handler is being dragged */
+    expectingDrop: boolean;
     dragDropRef: import("react-dnd").ConnectDragSource;
 };
 export declare function useDragDropContextProvider(): iDragDropContext;

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

@@ -19,17 +19,21 @@ export function useDragDropContext(info) {
     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;
+    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
-                : acceptDrops ? drop.dropRef : drag.dragRef
+                : expectingDrop ? drop.dropRef : drag.dragRef
     };
 }
 export function useDragDropContextProvider() {

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

@@ -1 +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;AAOhE,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,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,CAA2B,IAAI,CAAC,CAAC;IAE3E,eAAe;IACf,MAAM,GAAG,GAAqB;QAC1B,UAAU,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC;QACxC,QAAQ,EAAE,WAAW;KACxB,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"}
+{"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;AAOhE,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,aAAa,GAAG,WAAW,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,eAAe,CAAC,UAAU;QAC/E,2DAA2D;WACxD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE7E,OAAO;QACH,eAAe;QACf,IAAI;QACJ,IAAI;QACJ,6DAA6D;QAC7D,aAAa;QACb,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,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO;KACxD,CAAC;AACN,CAAC;AACD,MAAM,UAAU,0BAA0B;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,CAA2B,IAAI,CAAC,CAAC;IAE3E,eAAe;IACf,MAAM,GAAG,GAAqB;QAC1B,UAAU,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC;QACxC,QAAQ,EAAE,WAAW;KACxB,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.29",
+    "version": "1.0.31",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",

package/src/controls/divider.tsx

@@ -1,4 +1,4 @@
-import { Divider, makeStyles } from '@fluentui/react-components';
+import { Divider, DividerProps, makeStyles } from '@fluentui/react-components';
 import React from 'react';
 
 const useStyles = makeStyles({
@@ -6,11 +6,11 @@ const useStyles = makeStyles({
         flexGrow: 0
     }
 });
-interface IProps {
+interface IProps extends DividerProps {
 }
-export const DividerEX: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+export const DividerEX = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<IProps>)>((props, ref) => {
     const cssNames = useStyles();
     return (
-        <Divider {...props} className={cssNames.separator} />
+        <Divider ref={ref} {...props} className={cssNames.separator} />
     );
-}
+});

package/src/controls/horizontal.tsx

@@ -17,7 +17,7 @@ interface IProps extends ISectionProps {
     wrap?: boolean;
     nogap?: boolean;
 }
-export const Horizontal: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+export const Horizontal = React.forwardRef<HTMLDivElement, React.PropsWithChildren<IProps>>((props, ref) => {
     const cssNames = useStyles();
     let css: string[] = [KnownClassNames.horizontal];
 
@@ -32,4 +32,4 @@ export const Horizontal: React.FunctionComponent<React.PropsWithChildren<IProps>
     return (
         <Section {...props} css={css} />
     );
-}
+});

package/src/controls/vertical.tsx

@@ -17,7 +17,7 @@ interface IProps extends ISectionProps {
     wrap?: boolean;
     nogap?: boolean;
 }
-export const Vertical: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+export const Vertical = React.forwardRef<HTMLDivElement, React.PropsWithChildren<IProps>>((props, ref) => {
     const cssNames = useStyles();
     let css: string[] = [KnownClassNames.vertical];
 
@@ -32,4 +32,4 @@ export const Vertical: React.FunctionComponent<React.PropsWithChildren<IProps>>
     return (
         <Section {...props} css={css} />
     );
-}
+});

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

@@ -30,18 +30,22 @@ export function useDragDropContext<
     const isDroppable = !isNullOrUndefined(info.dropInfo);
     const drag = useDraggable(info?.dragInfo);
     const drop = useDroppable(info?.dropInfo);
-    const acceptDrops = isDroppable && !drag.isDragging && dragDropContext.isDragging;
+    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
-                : acceptDrops ? drop.dropRef : drag.dragRef
+                : expectingDrop ? drop.dropRef : drag.dragRef
     };
 }
 export function useDragDropContextProvider(): iDragDropContext {