@onehat/ui 0.4.71 → 0.4.73

package/src/Components/Hoc/Secondary/withSecondarySelection.js

@@ -14,7 +14,7 @@ import _ from 'lodash';
 export default function withSelection(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.secondaryDisableWithSelection) {
+		if (props.secondaryDisableWithSelection || props.secondaryAlreadyHasWithSelection) {
 			return <WrappedComponent {...props} />;
 		}
 
@@ -414,8 +414,9 @@ export default function withSelection(WrappedComponent) {
 		
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					secondaryDisableWithSelection={false}
+					secondaryAlreadyHasWithSelection={true}
+					ref={ref}
 					secondarySelection={secondaryGetSelection()}
 					secondaryGetSelection={secondaryGetSelection}
 					secondarySetSelection={secondarySetSelection}

package/src/Components/Hoc/Secondary/withSecondaryValue.js

@@ -10,7 +10,7 @@ import _ from 'lodash';
 export default function withSecondaryValue(WrappedComponent) {
 	return (props) => {
 
-		if (props.secondaryDisableWithValue) {
+		if (props.secondaryDisableWithValue || props.secondaryAlreadyHasWithValue) {
 			return <WrappedComponent {...props} />;
 		}
 
@@ -146,6 +146,7 @@ export default function withSecondaryValue(WrappedComponent) {
 		return <WrappedComponent
 					{...props}
 					secondaryDisableWithValue={false}
+					secondaryAlreadyHasWithValue={true}
 					secondaryValue={convertedValue}
 					secondarySetValue={secondarySetValue}
 					secondaryOnChangeSelection={secondaryOnChangeSelection}

package/src/Components/Hoc/withAlert.js

@@ -19,7 +19,7 @@ import _ from 'lodash';
 function withAlert(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithAlert || props.alert) {
+		if (props.disableWithAlert || props.alreadyHasWithAlert) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -29,9 +29,10 @@ function withAlert(WrappedComponent) {
 			} = props,
 			getBody = (args) => {
 				const {
-					icon,
+					icon = TriangleExclamation,
 					message,
-					color = 'black',
+					textColor = 'text-black',
+					fillColor = 'fill-black',
 				} = args;
 				return <HStack className="withAlert-HStack flex-1 w-full">
 							<Box className={clsx(
@@ -43,12 +44,15 @@ function withAlert(WrappedComponent) {
 								'justify-center',
 								'pr-3',
 							)}>
-								<Icon as={icon} className={clsx(
-									'withAlert-Icon',
-									'h-[40px]',
-									'w-[40px]',
-									`text-${color}`,
-								)} />
+								<Icon
+									as={icon}
+									className={clsx(
+										'withAlert-Icon',
+										'h-[40px]',
+										'w-[40px]',
+										fillColor,
+									)}
+								/>
 							</Box>
 							<Box className={clsx(
 								'withAlert-Box2',
@@ -60,7 +64,7 @@ function withAlert(WrappedComponent) {
 							)}>
 								<Text className={clsx(
 									'withAlert-Text',
-									`text-${color}`,
+									textColor,
 									'text-[18px]',
 									'flex-none',
 									'mr-2',
@@ -108,7 +112,7 @@ function withAlert(WrappedComponent) {
 					body: getBody({
 						icon: TriangleExclamation,
 						message,
-						color: 'red',
+						fillColor: 'fill-red-500',
 					}),
 					onOk: () => {
 						hideModal();
@@ -121,6 +125,7 @@ function withAlert(WrappedComponent) {
 					customButtons: buttons ?? null,
 					h: 250,
 					w: 400,
+					whichModal: 'alert',
 				});
 			},
 			onConfirm = (message, onYes, includeCancel = false, onNo) => {
@@ -145,6 +150,7 @@ function withAlert(WrappedComponent) {
 					includeCancel,
 					h: 250,
 					w: 400,
+					whichModal: 'confirm',
 				});
 			},
 			onInfo = (message) => {
@@ -160,6 +166,7 @@ function withAlert(WrappedComponent) {
 					canClose: true,
 					h: 200,
 					w: 400,
+					whichModal: 'info',
 				});
 			};
 
@@ -170,7 +177,10 @@ function withAlert(WrappedComponent) {
 		return <WrappedComponent
 					{...props}
 					ref={ref}
+					disableWithAlert={false}
+					alreadyHasWithAlert={true}
 					alert={onAlert}
+					getAlertBody={getBody}
 					confirm={onConfirm}
 					hideAlert={hideModal}
 					showInfo={onInfo}

package/src/Components/Hoc/withCollapsible.js

@@ -2,8 +2,12 @@ import { forwardRef, useState } from 'react';
 
 export default function withCollapsible(WrappedComponent) {
 	return forwardRef((props, ref) => {
-		const
-			{
+
+		if (props.alreadyHasWithCollapsible) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+		
+		const {
 				isCollapsed = false,
 				startsCollapsed = false,
 				setIsCollapsed,
@@ -12,10 +16,11 @@ export default function withCollapsible(WrappedComponent) {
 			[localIsCollapsed, setLocalIsCollapsed] = useState(startsCollapsed);
 
 		return <WrappedComponent
-					isCollapsed={bypass ? isCollapsed : localIsCollapsed}
-					setIsCollapsed={bypass ? setIsCollapsed : setLocalIsCollapsed}
 					{...props}
+					alreadyHasWithCollapsible={true}
 					ref={ref}
+					isCollapsed={bypass ? isCollapsed : localIsCollapsed}
+					setIsCollapsed={bypass ? setIsCollapsed : setLocalIsCollapsed}
 				/>;
 	});
 }

package/src/Components/Hoc/withComponent.js

@@ -14,6 +14,10 @@ import _ from 'lodash';
 export default function withComponent(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
+		// if (props.disableWithComponent || props.alreadyHasWithComponent) {
+		// 	return <WrappedComponent {...props} ref={ref} />;
+		// }
+
 		props = _.clone(props); // without cloning, I couldn't write to props
 
 		// translate h, w, and flex tokens to styles
@@ -90,6 +94,8 @@ export default function withComponent(WrappedComponent) {
 					self={selfRef.current}
 					{...propsToPass}
 					ref={ref}
+					disableWithComponent={false}
+					// alreadyHasWithComponent={true}
 				/>;
 	});
 }

package/src/Components/Hoc/withContextMenu.js

@@ -11,6 +11,11 @@ import _ from 'lodash';
 
 export default function withContextMenu(WrappedComponent) {
 	return forwardRef((props, ref) => {
+
+		if (props.alreadyHasWithContextMenu) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+		
 		const {
 				// extract and pass
 				disableContextMenu = false,
@@ -161,6 +166,7 @@ export default function withContextMenu(WrappedComponent) {
 
 		return <WrappedComponent
 					{...propsToPass}
+					alreadyHasWithContextMenu={true}
 					ref={ref}
 					onContextMenu={onContextMenu}
 				/>;

package/src/Components/Hoc/withData.js

@@ -12,7 +12,7 @@ import _ from 'lodash';
 export default function withData(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithData) {
+		if (props.disableWithData || props.alreadyHasWithData) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 		
@@ -121,8 +121,9 @@ export default function withData(WrappedComponent) {
 
 		return <WrappedComponent
 					{...props}
-					ref={ref}
 					disableWithData={false}
+					alreadyHasWithData={true}
+					ref={ref}
 					Repository={LocalRepository}
 					fields={fields}
 					idField={idField}

package/src/Components/Hoc/withDnd.js

@@ -16,10 +16,27 @@ import {
 // If you need constraints, you can potentially use a CustomDragLayer (see code at bottom)
 // but it will lag behind, compared to what the native drag layer can do
 
+function defaultDragCollect(monitor, props2) { // Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitor and props. Read the overview for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.
+	// monitor fn determines which props from dnd state get passed
+	return {
+		// canDrag: !!monitor.canDrag(), // Returns trueif no drag operation is in progress, and the owner's canDrag() returns true or is not defined.
+		isDragging: !!monitor.isDragging(), // Returns trueif a drag operation is in progress, and either the owner initiated the drag, or its isDragging() is defined and returns true.
+		type: monitor.getItemType(), // Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.
+		item: monitor.getItem(), // Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns nullif no item is being dragged.
+		dropResult: monitor.getDropResult(), // Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their drop()methods. When a chain of drop()is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop()overrides the child drop result previously set by the child. Returns nullif called outside endDrag().
+		didDrop: !!monitor.didDrop(), // Returns trueif some drop target has handled the drop event, falseotherwise. Even if a target did not return a drop result, didDrop() returns true. Use it inside endDrag()to test whether any drop target has handled the drop. Returns falseif called outside endDrag().
+		initialClientOffset: monitor.getInitialClientOffset(), // Returns the { x, y }client offset of the pointer at the time when the current drag operation has started. Returns nullif no item is being dragged.
+		initialSourceClientOffset: monitor.getInitialSourceClientOffset(), // Returns the { x, y }client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns nullif no item is being dragged.
+		clientOffset: monitor.getClientOffset(), // Returns the last recorded { x, y }client offset of the pointer while a drag operation is in progress. Returns nullif no item is being dragged.
+		differenceFromInitialOffset: monitor.getDifferenceFromInitialOffset(), // Returns the { x, y }difference between the last recorded client offset of the pointer and the client offset when the current drag operation has started. Returns nullif no item is being dragged.
+		sourceClientOffset: monitor.getSourceClientOffset(), // Returns the projected { x, y }client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns nullif no item is being dragged.
+	};
+};
+
 export function withDragSource(WrappedComponent) {
 	return forwardRef((props, ref) => {
-		
-		if (!props.isDragSource) {
+
+		if (!props.isDragSource || props.alreadyHasDragSource) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -37,36 +54,27 @@ export function withDragSource(WrappedComponent) {
 				dragOptions = null,
 				dropEffect = null,
 				// onDrag,
+				onDragStart = null,
 				onDragEnd = null,
 				canDrag = null,
 				isDragging = null,
 				getDragProxy,
-				dragCollect = (monitor, props2) => { // Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitor and props. Read the overview for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.
-					// monitor fn determines which props from dnd state get passed
-					return {
-						// canDrag: !!monitor.canDrag(), // Returns trueif no drag operation is in progress, and the owner's canDrag() returns true or is not defined.
-						isDragging: !!monitor.isDragging(), // Returns trueif a drag operation is in progress, and either the owner initiated the drag, or its isDragging() is defined and returns true.
-						type: monitor.getItemType(), // Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.
-						item: monitor.getItem(), // Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns nullif no item is being dragged.
-						dropResult: monitor.getDropResult(), // Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their drop()methods. When a chain of drop()is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop()overrides the child drop result previously set by the child. Returns nullif called outside endDrag().
-						didDrop: !!monitor.didDrop(), // Returns trueif some drop target has handled the drop event, falseotherwise. Even if a target did not return a drop result, didDrop() returns true. Use it inside endDrag()to test whether any drop target has handled the drop. Returns falseif called outside endDrag().
-						initialClientOffset: monitor.getInitialClientOffset(), // Returns the { x, y }client offset of the pointer at the time when the current drag operation has started. Returns nullif no item is being dragged.
-						initialSourceClientOffset: monitor.getInitialSourceClientOffset(), // Returns the { x, y }client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns nullif no item is being dragged.
-						clientOffset: monitor.getClientOffset(), // Returns the last recorded { x, y }client offset of the pointer while a drag operation is in progress. Returns nullif no item is being dragged.
-						differenceFromInitialOffset: monitor.getDifferenceFromInitialOffset(), // Returns the { x, y }difference between the last recorded client offset of the pointer and the client offset when the current drag operation has started. Returns nullif no item is being dragged.
-						sourceClientOffset: monitor.getSourceClientOffset(), // Returns the projected { x, y }client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns nullif no item is being dragged.
-					};
-				},
+				dragCollect = defaultDragCollect,
 			} = props,
 			[dragState, dragSourceRef, dragPreviewRef] = useDrag(() => { // A specification object or a function that creates a specification object.
 				// The useDrag hook provides a way to wire your component into the DnD system as a drag source. By passing in a specification into useDrag, you declaratively describe the typeof draggable being generated, the itemobject representing the drag source, what props to collect, and more. The useDraghooks returns a few key items: a set of collected props, and refs that may be attached to drag source and drag preview elements
 
 				return {
 					type: dragSourceType, // Required. This must be either a string or a symbol. Only the drop targets registered for the same type will react to this item.
-					item: {
-						...dragSourceItem,
-						getDragProxy,
-					}, // Required (object or function).
+					item: () => { // Required (object or function). If a function, it runs only once at the start of a drag.
+						if (dragSourceItem.onDragStart) {
+							dragSourceItem.onDragStart();
+						}
+						return {
+							...dragSourceItem,
+							getDragProxy,
+						};
+					},
 						// When an object, it is a plain JavaScript object describing the data being dragged. This is the only information available to the drop targets about the drag source so it's important to pick the minimal data they need to know. You may be tempted to put a complex reference here, but you should try very hard to avoid doing this because it couples the drag sources and drop targets. It's a good idea to use something like { id }.
 						// When a function, it is fired at the beginning of the drag operation and returns an object representing the drag operation (see first bullet). If null is returned, the drag operation is cancelled.
 					previewOptions: dragPreviewOptions, // Optional. A plain JavaScript object describing drag preview options.
@@ -92,7 +100,7 @@ export function withDragSource(WrappedComponent) {
 						};
 					},*/
 				};
-			}),
+			}, [dragSourceItem, getDragProxy, dragSourceType, dragPreviewOptions, dragOptions, dropEffect, onDragEnd, canDrag, isDragging, dragCollect]),
 			{
 				canDrag: stateCanDrag,
 				isDragging: stateIsDragging,
@@ -114,11 +122,12 @@ export function withDragSource(WrappedComponent) {
 				if (layer.isDragging && dragSourceItem?.id === layer.item.id) {
 					dragSourceItem.onDrag(layer);
 				}
-			}, [layer]);
+			}, [layer, dragSourceItem]);
 		}
 
 		return <WrappedComponent
 					{...props}
+					alreadyHasDragSource={true}
 					ref={ref}
 					canDrag={stateCanDrag}
 					isDragging={stateIsDragging}
@@ -129,11 +138,17 @@ export function withDragSource(WrappedComponent) {
 	});
 }
 
-
+function defaultDropCollect(monitor, props) {
+	return {
+		canDrop: !!monitor.canDrop(),
+		isOver: !!monitor.isOver(),
+		draggedItem: monitor.getItem(), // Pass the dragged item so TreeNode can evaluate custom logic
+	};
+}
 export function withDropTarget(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (!props.isDropTarget) {
+		if (!props.isDropTarget || props.alreadyHasDropTarget) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -147,13 +162,7 @@ export function withDropTarget(WrappedComponent) {
 				onDrop = null,
 				onDropHover = null,
 				canDrop = null,
-				dropCollect = (monitor, props) => {
-					return {
-						canDrop: !!monitor.canDrop(),
-						isOver: !!monitor.isOver(),
-						draggedItem: monitor.getItem(), // Pass the dragged item so TreeNode can evaluate custom logic
-					};
-				},
+				dropCollect = defaultDropCollect,
 			} = props,
 			localTargetRef = useRef(null),
 			[dropState, dropTargetRef] = useDrop(() => { // A specification object or a function that creates a specification object.
@@ -180,7 +189,7 @@ export function withDropTarget(WrappedComponent) {
 						};
 					},*/
 				};
-			}),
+			}, [dropTargetAccept, dropOptions, onDrop, onDropHover, canDrop, dropCollect]),
 			{
 				canDrop: stateCanDrop,
 				isOver,
@@ -197,8 +206,9 @@ export function withDropTarget(WrappedComponent) {
 		dropTargetRef(localTargetRef); // register DOM node with react-dnd
 
 		return <WrappedComponent
-					canDrop={stateCanDrop}
+					alreadyHasDropTarget={true}
 					ref={ref}
+					canDrop={stateCanDrop}
 					isOver={isOver}
 					dropTargetRef={localTargetRef}
 					draggedItem={draggedItem} // Pass the dragged item
@@ -213,11 +223,13 @@ export function GlobalDragProxy() {
 		isDragging,
 		item,
 		currentOffset,
-	} = useDragLayer((monitor) => ({
-		isDragging: monitor.isDragging(),
-		item: monitor.getItem(),
-		currentOffset: monitor.getSourceClientOffset(),
-	}));
+	} = useDragLayer((monitor) => {
+		return {
+			isDragging: monitor.isDragging(),
+			item: monitor.getItem(),
+			currentOffset: monitor.getSourceClientOffset(),
+		};
+	});
 
 	if (!isDragging || !currentOffset || CURRENT_MODE !== UI_MODE_WEB) { // Native uses a native drag layer, so we don't need to render a custom proxy
 		return null;

package/src/Components/Hoc/withDraggable.js

@@ -23,7 +23,7 @@ import getComponentFromType from '../../Functions/getComponentFromType.js';
 export default function withDraggable(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (!props.isDraggable) {
+		if (!props.isDraggable || props.alreadyHasDraggable) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -237,7 +237,11 @@ export default function withDraggable(WrappedComponent) {
 							{...draggableProps}
 						>
 							<div ref={nodeRef} className="nsResize">
-								<WrappedComponent {...propsToPass} ref={ref} />
+								<WrappedComponent
+									{...propsToPass}
+									alreadyHasDraggable={true}
+									ref={ref}
+								/>
 							</div>
 						</Draggable>;
 			} else if (mode === HORIZONTAL) {
@@ -252,7 +256,11 @@ export default function withDraggable(WrappedComponent) {
 							{...draggableProps}
 						>
 							<div ref={nodeRef} className="ewResize" style={{ height: '100%', }}>
-								<WrappedComponent {...propsToPass} ref={ref} />
+								<WrappedComponent
+									{...propsToPass}
+									alreadyHasDraggable={true}
+									ref={ref}
+								/>
 							</div>
 						</Draggable>;
 			}
@@ -268,14 +276,22 @@ export default function withDraggable(WrappedComponent) {
 						nodeRef={nodeRef}
 						{...draggableProps}
 					>
-						<WrappedComponent {...propsToPass} ref={nodeRef} />
+						<WrappedComponent
+							{...propsToPass}
+							alreadyHasDraggable={true}
+							ref={nodeRef}
+						/>
 					</Draggable>;
 		} else if (CURRENT_MODE === UI_MODE_NATIVE) {
 
 			// NOT YET IMPLEMENTED
 			// Really need to replace most of this, as much of it is web-centric.
 
-			return <WrappedComponent {...propsToPass} ref={ref} />; // TEMP
+			return <WrappedComponent
+						{...propsToPass}
+						alreadyHasDraggable={true}
+						ref={ref}
+					/>;
 
 		}
 	});

package/src/Components/Hoc/withEditor.js

@@ -21,7 +21,7 @@ import _ from 'lodash';
 export default function withEditor(WrappedComponent, isTree = false) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithEditor) {
+		if (props.disableWithEditor || props.alreadyHasWithEditor) {
 			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
@@ -702,6 +702,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					{...props}
 					ref={ref}
 					disableWithEditor={false}
+					alreadyHasWithEditor={true}
 					currentRecord={currentRecord}
 					setCurrentRecord={setCurrentRecord}
 					isEditorShown={isEditorShown}

package/src/Components/Hoc/withEvents.js

@@ -2,9 +2,19 @@ import { forwardRef } from 'react';
 
 export default function withEvents(WrappedComponent) {
 	return forwardRef((props, ref) => {
+
+		if (props.alreadyHasWithEvents) {
+			return <WrappedComponent {...props} ref={ref} />;
+		}
+		
 		const {
 				onEvent,
 			} = props;
-		return <WrappedComponent fireEvent={onEvent} {...props} ref={ref} />;
+		return <WrappedComponent
+					{...props}
+					alreadyHasWithEvents={true}
+					ref={ref}
+					fireEvent={onEvent}
+				/>;
 	});
 }

package/src/Components/Hoc/withFilters.js

@@ -42,7 +42,7 @@ const isWindows = Platform.OS === 'windows';
 export default function withFilters(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (!props.useFilters) {
+		if (!props.useFilters || props.alreadyHasWithFilters) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -695,7 +695,12 @@ export default function withFilters(WrappedComponent) {
 							</HStack>}
 					</Toolbar>;
 		
-		return <WrappedComponent {...props} topToolbar={toolbar} ref={ref} />;
+		return <WrappedComponent
+					{...props}
+					ref={ref}
+					alreadyHasWithFilters={true}
+					topToolbar={toolbar}
+				/>;
 
 	});
 }

package/src/Components/Hoc/withModal.js

@@ -19,7 +19,7 @@ import _ from 'lodash';
 export default function withModal(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithModal || props.showModal) {
+		if (props.disableWithModal || props.alreadyHasWithModal) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -180,12 +180,13 @@ export default function withModal(WrappedComponent) {
 					<WrappedComponent
 						{...props}
 						disableWithModal={false}
+						alreadyHasWithModal={true}
+						ref={ref}
 						showModal={showModal}
 						hideModal={onCancel || hideModal}
 						updateModalBody={updateModalBody}
 						isModalShown={isModalShown}
 						whichModal={whichModal}
-						ref={ref}
 					/>
 					{isModalShown && 
 						<Modal

package/src/Components/Hoc/withPdfButtons.js

@@ -22,7 +22,7 @@ export default function withPdfButtons(WrappedComponent) {
 		if (props.canUser && !props.canUser(VIEW)) { // permissions
 			showButtons = false;
 		}
-		if (!showButtons) {
+		if (!showButtons || props.alreadyHasWithPdfButtons) {
 			// bypass everything.
 			// If we don't do this, we get an infinite recursion with Form
 			// because this HOC wraps Form and uses Form itself.
@@ -384,9 +384,10 @@ export default function withPdfButtons(WrappedComponent) {
 	
 		return <WrappedComponent
 					{...props}
+					ref={ref}
+					alreadyHasWithPdfButtons={true}
 					additionalEditButtons={additionalEditButtons}
 					additionalViewButtons={additionalViewButtons}
-					ref={ref}
 				/>;
 	}));
 }

package/src/Components/Hoc/withPermissions.js

@@ -97,7 +97,7 @@ export function canUser(permission, modelToCheck = null) {
 export default function withPermissions(WrappedComponent, forceUsePermissions = false) {
 	return forwardRef((props, ref) => {
 
-		if (!props.usePermissions && !forceUsePermissions) {
+		if ((!props.usePermissions && !forceUsePermissions) || props.alreadyHasWithPermissions) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -126,9 +126,10 @@ export default function withPermissions(WrappedComponent, forceUsePermissions =
 
 		return <WrappedComponent
 					{...props}
+					alreadyHasWithPermissions={true}
+					ref={ref}
 					canUser={canUserDecorator}
 					showPermissionsError={showPermissionsError}
-					ref={ref}
 				/>;
 	});
 }

package/src/Components/Hoc/withPresetButtons.js

@@ -41,7 +41,7 @@ const presetButtons = [
 export default function withPresetButtons(WrappedComponent, isGrid = false) {
 	return forwardRef((props, ref) => {
 
-		if (props.disablePresetButtons) {
+		if (props.disablePresetButtons || props.alreadyHasWithPresetButtons) {
 			// bypass everything
 			return <WrappedComponent {...props} ref={ref} />;
 		}
@@ -433,8 +433,9 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 
 		return <WrappedComponent
 					{...propsToPass}
-					ref={ref}
 					disablePresetButtons={false}
+					alreadyHasWithPresetButtons={true}
+					ref={ref}
 					contextMenuItems={[
 						...localContextMenuItems,
 						...contextMenuItems,

package/src/Components/Hoc/withSelection.js

@@ -12,14 +12,7 @@ import _ from 'lodash';
 export default function withSelection(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithSelection) {
-			return <WrappedComponent {...props} ref={ref} />;
-		}
-
-		if (props.setSelection) {
-			// bypass everything, since we're already using withSelection() in hierarchy.
-			// For example, Combo has withSelection(), and intenally it uses Grid which also has withSelection(),
-			// but we only need it defined once for the whole thing.
+		if (props.disableWithSelection || props.alreadyHasWithSelection) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -427,6 +420,7 @@ export default function withSelection(WrappedComponent) {
 					{...props}
 					ref={ref}
 					disableWithSelection={false}
+					alreadyHasWithSelection={true}
 					selection={getSelection()}
 					getSelection={getSelection}
 					setSelection={setSelection}

package/src/Components/Hoc/withToast.js

@@ -13,7 +13,7 @@ import _ from 'lodash';
 export default function withToast(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
-		if (props.disableWithToast || props.showToast) {
+		if (props.disableWithToast || props.alreadyHasWithToast) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
@@ -80,8 +80,10 @@ export default function withToast(WrappedComponent) {
 		
 		return <WrappedComponent
 					{...props}
-					showToast={showToast}
+					alreadyHasWithToast={true}
+					disableWithToast={false}
 					ref={ref}
+					showToast={showToast}
 				/>;
 	});
 }