@onehat/ui 0.3.213 → 0.3.216

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.213",
+	"version": "0.3.216",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -46,6 +46,9 @@
 		"react-color": "^2.19.3",
 		"react-datetime": "^3.2.0",
 		"react-dom": "*",
+		"react-dnd": "^16.0.1",
+		"react-dnd-html5-backend": "^16.0.1",
+		"react-dnd-touch-backend":"16.0.1",
 		"react-draggable": "^4.4.5",
 		"react-native": "*",
 		"react-native-draggable": "^3.3.0",

package/src/Components/Buttons/ExpandButton.js

@@ -0,0 +1,17 @@
+import IconButton from './IconButton.js';
+import Plus from '../Icons/Plus.js';
+import Minus from '../Icons/Minus.js';
+import _ from 'lodash';
+
+export default function ExpandButton(props) {
+	const {
+			isExpanded = false,
+			onToggle,
+		} = props;
+
+	return <IconButton
+				icon={isExpanded ? Minus : Plus}
+				onPress={onToggle}
+				{...props}
+			/>;
+};

package/src/Components/Grid/Grid.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback, } from 'react';
 import {
+	Box,
 	Column,
 	FlatList,
 	Pressable,
@@ -34,6 +35,7 @@ import withContextMenu from '../Hoc/withContextMenu.js';
 import withAlert from '../Hoc/withAlert.js';
 import withComponent from '../Hoc/withComponent.js';
 import withData from '../Hoc/withData.js';
+import { withDropTarget } from '../Hoc/withDnd.js';
 import withEvents from '../Hoc/withEvents.js';
 import withSideEditor from '../Hoc/withSideEditor.js';
 import withFilters from '../Hoc/withFilters.js';
@@ -49,8 +51,9 @@ import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
 import Loading from '../Messages/Loading.js';
 import GridHeaderRow from './GridHeaderRow.js';
-import GridRow, { ReorderableGridRow } from './GridRow.js';
+import GridRow from './GridRow.js';
 import IconButton from '../Buttons/IconButton.js';
+import ExpandButton from '../Buttons/ExpandButton.js';
 import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
 import NoRecordsFound from './NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
@@ -95,22 +98,26 @@ function GridComponent(props) {
 			},
 			flatListProps = {},
 			onRowPress,
-			// enableEditors = false,
+			onRender,
 			forceLoadOnRender = false,
 			pullToRefresh = true,
 			hideNavColumn = true,
 			noneFoundText,
 			autoAdjustPageSizeToHeight = true,
-			disableLoadingIndicator = false,
 			disableSelectorSelected = false,
 			showRowExpander = false,
-			rowExpanderTpl = '',
+			getExpandedRowContent,
 			showHeaders = true,
 			showHovers = true,
 			canColumnsSort = true,
 			canColumnsReorder = true,
 			canColumnsResize = true,
 			canRowsReorder = false,
+			areRowsDragSource = false,
+			rowDragSourceType,
+			areRowsDropTarget = false,
+			dropTargetAccept,
+			onRowDrop,
 			allowToggleSelection = false, // i.e. single click with no shift key toggles the selection of the item clicked on
 			disableBottomToolbar = false,
 			disablePagination = false,
@@ -133,8 +140,6 @@ function GridComponent(props) {
 			onEdit,
 			onDelete,
 			onView,
-			onDuplicate,
-			onReset,
 			onContextMenu,
 			isAdding,
 
@@ -147,6 +152,12 @@ function GridComponent(props) {
 			idIx,
 			displayIx,
 
+			// withDnd
+			isDropTarget,
+			canDrop,
+			isOver,
+			dropTargetRef,
+
 			// withPresetButtons
 			onChangeColumnsConfig,
 
@@ -191,6 +202,7 @@ function GridComponent(props) {
 		gridRef = useRef(),
 		gridContainerRef = useRef(),
 		isAddingRef = useRef(),
+		expandedRowsRef = useRef({}),
 		[isInited, setIsInited] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
@@ -198,6 +210,13 @@ function GridComponent(props) {
 		[isDragMode, setIsDragMode] = useState(false),
 		[dragRowSlot, setDragRowSlot] = useState(null),
 		[dragRowIx, setDragRowIx] = useState(),
+		getIsExpanded = (index) => {
+			return !!expandedRowsRef.current[index];
+		},
+		setIsExpanded = (index, isExpanded) => {
+			expandedRowsRef.current[index] = isExpanded;
+			forceUpdate();
+		},
 		setLocalColumnsConfig = (config) => {
 			if (localColumnsConfigKey && !hasFunctionColumn) {
 				setSaved(localColumnsConfigKey, config);
@@ -312,7 +331,7 @@ function GridComponent(props) {
 				rowProps = getRowProps && !isHeaderRow ? getRowProps(item) : {},
 				isSelected = !isHeaderRow && !disableWithSelection && isInSelection(item);
 
-			return <Pressable
+			let rowComponent = <Pressable
 						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
 						onPress={(e) => {
 							if (e.preventDefault && e.cancelable) {
@@ -421,23 +440,33 @@ function GridComponent(props) {
 									ratio = mixWithObj.alpha ? 1 - mixWithObj.alpha : 0.5;
 								bg = colourMixer.blend(bg, ratio, mixWithObj.color);
 							}
-							let WhichGridRow = GridRow,
-								rowReorderProps = {};
+							const
+								rowReorderProps = {},
+								rowDragProps = {};
 							if (canRowsReorder && isDragMode) {
-								WhichGridRow = ReorderableGridRow;
-								rowReorderProps = {
-									mode: VERTICAL,
-									onDragStart: onRowReorderDragStart,
-									onDrag: onRowReorderDrag,
-									onDragStop: onRowReorderDragStop,
-									proxyParent: gridRef.current?.getScrollableNode().children[0],
-									proxyPositionRelativeToParent: true,
-									getParentNode: (node) => node.parentElement.parentElement.parentElement,
-									getProxy: getReorderProxy,
+								rowReorderProps.isDraggable = true;
+								rowReorderProps.mode = VERTICAL;
+								rowReorderProps.onDragStart = onRowReorderDragStart;
+								rowReorderProps.onDrag = onRowReorderDrag;
+								rowReorderProps.onDragStop = onRowReorderDragStop;
+								rowReorderProps.proxyParent = gridRef.current?.getScrollableNode().children[0];
+								rowReorderProps.proxyPositionRelativeToParent = true;
+								rowReorderProps.getParentNode = (node) => node.parentElement.parentElement.parentElement;
+								rowReorderProps.getProxy = getReorderProxy;
+							}
+							if (areRowsDragSource) {
+								rowDragProps.isDragSource = true;
+								rowDragProps.dragSourceType = rowDragSourceType;
+								rowDragProps.dragSourceItem = { id: item.id };
+							}
+							if (areRowsDropTarget) {
+								rowDragProps.isDropTarget = true;
+								rowDragProps.dropTargetAccept = dropTargetAccept;
+								rowDragProps.onDrop = (droppedItem) => {
+									onRowDrop(item, droppedItem);
 								};
 							}
-							
-							return <WhichGridRow
+							return <GridRow
 										columnsConfig={localColumnsConfig}
 										columnProps={columnProps}
 										fields={fields}
@@ -447,9 +476,29 @@ function GridComponent(props) {
 										item={item}
 										isInlineEditorShown={isInlineEditorShown}
 										{...rowReorderProps}
+										{...rowDragProps}
 									/>;
 						}}
 					</Pressable>;
+
+			if (showRowExpander && !isHeaderRow) {
+				const isExpanded = getIsExpanded(index);
+				rowComponent = <Column>
+									<Row>
+										<ExpandButton
+											isExpanded={isExpanded}
+											onToggle={() => setIsExpanded(index, !isExpanded)}
+											_icon={{
+												size: 'sm',
+											}}
+											py={0}
+										/>
+										{rowComponent}
+									</Row>
+									{isExpanded ? getExpandedRowContent(row) : null}
+								</Column>
+			}
+			return rowComponent;
 		},
 		getReorderProxy = (node) => {
 			const
@@ -750,6 +799,9 @@ function GridComponent(props) {
 				}
 				Repository.pauseEvents();
 			}
+			if (onRender) {
+				onRender(self)
+			}
 			return () => {};
 		}
 
@@ -857,6 +909,11 @@ function GridComponent(props) {
 				if (!Repository.isAutoLoad) {
 					Repository.reload();
 				}
+			},
+			onChangePage = () => {
+				if (showRowExpander) {
+					expandedRowsRef.current = {}; // clear expanded rows
+				}
 			};
 
 		Repository.on('beforeLoad', setTrue);
@@ -867,7 +924,7 @@ function GridComponent(props) {
 		Repository.ons(['changeData', 'change'], forceUpdate);
 		Repository.on('changeFilters', onChangeFilters);
 		Repository.on('changeSorters', onChangeSorters);
-
+		Repository.on('changePage', onChangePage);
 
 		applySelectorSelected();
 		Repository.resumeEvents();
@@ -885,6 +942,7 @@ function GridComponent(props) {
 			Repository.offs(['changeData', 'change'], forceUpdate);
 			Repository.off('changeFilters', onChangeFilters);
 			Repository.off('changeSorters', onChangeSorters);
+			Repository.off('changePage', onChangePage);
 		};
 	}, [isInited]);
 
@@ -1006,7 +1064,7 @@ function GridComponent(props) {
 		}
 	}
 
-	return <Column
+	grid = <Column
 				{...testProps('Grid')}
 				ref={containerRef}
 				w="100%"
@@ -1028,7 +1086,18 @@ function GridComponent(props) {
 
 				{listFooterComponent}
 
-			</Column>;
+			</Column>
+
+	if (isDropTarget) {
+		grid = <Box
+					ref={dropTargetRef}
+					borderWidth={canDrop && isOver ? 4 : 0}
+					borderColor="#0ff"
+					w="100%"
+					{...sizeProps}
+				>{grid}</Box>
+	}
+	return grid;
 
 }
 
@@ -1036,12 +1105,14 @@ export const Grid = withComponent(
 						withAlert(
 							withEvents(
 								withData(
-									withMultiSelection(
-										withSelection(
-											withFilters(
-												withPresetButtons(
-													withContextMenu(
-														GridComponent
+									withDropTarget(
+										withMultiSelection(
+											withSelection(
+												withFilters(
+													withPresetButtons(
+														withContextMenu(
+															GridComponent
+														)
 													),
 													true // isGrid
 												)
@@ -1057,13 +1128,15 @@ export const SideGridEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												withMultiSelection(
-													withSelection(
-														withSideEditor(
-															withFilters(
-																withPresetButtons(
-																	withContextMenu(
-																		GridComponent
+												withDropTarget(
+													withMultiSelection(
+														withSelection(
+															withSideEditor(
+																withFilters(
+																	withPresetButtons(
+																		withContextMenu(
+																			GridComponent
+																		)
 																	),
 																	true // isGrid
 																)
@@ -1080,15 +1153,17 @@ export const WindowedGridEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												withMultiSelection(
-													withSelection(
-														withWindowedEditor(
-															withFilters(
-																withPresetButtons(
-																	withContextMenu(
-																		GridComponent
-																	),
-																	true // isGrid
+												withDropTarget(
+													withMultiSelection(
+														withSelection(
+															withWindowedEditor(
+																withFilters(
+																	withPresetButtons(
+																		withContextMenu(
+																			GridComponent
+																		),
+																		true // isGrid
+																	)
 																)
 															)
 														)
@@ -1103,16 +1178,18 @@ export const InlineGridEditor = withComponent(
 									withAlert(
 										withEvents(
 											withData(
-												withMultiSelection(
-													withSelection(
-														withInlineEditor(
-															withFilters(
-																withPresetButtons(
-																	withContextMenu(
-																		GridComponent
-																	)
-																),
-																true // isGrid
+												withDropTarget(
+													withMultiSelection(
+														withSelection(
+															withInlineEditor(
+																withFilters(
+																	withPresetButtons(
+																		withContextMenu(
+																			GridComponent
+																		)
+																	),
+																	true // isGrid
+																)
 															)
 														)
 													)

package/src/Components/Grid/GridRow.js

@@ -1,24 +1,23 @@
-import { useState, useMemo, } from 'react';
+import { useMemo, } from 'react';
 import {
 	Box,
 	Row,
 	Text,
 } from 'native-base';
-import {
-	VERTICAL,
-} from '../../Constants/Directions.js';
 import {
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
+import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import AngleRight from '../Icons/AngleRight.js';
+import RowDragHandle from './RowDragHandle.js';
 import _ from 'lodash';
 
 // This was broken out from Grid simply so we can memoize it
 
-export default function GridRow(props) {
+function GridRow(props) {
 	const {
 			columnsConfig,
 			columnProps,
@@ -28,6 +27,8 @@ export default function GridRow(props) {
 			bg,
 			item,
 			isInlineEditorShown,
+			isDragSource = false,
+			isOver = false,
 		} = props,
 		styles = UiGlobals.styles;
 
@@ -39,182 +40,187 @@ export default function GridRow(props) {
 		isPhantom = item.isPhantom,
 		hash = item?.hash || item;
 
-
-		return useMemo(() => {
-			const renderColumns = (item) => {
-				if (_.isArray(columnsConfig)) {
-					return _.map(columnsConfig, (config, key, all) => {
-						const propsToPass = columnProps[key] || {};
-						if (all.length === 1) {
-							propsToPass.w = '100%';
+	if (props.dragSourceRef) {
+		rowProps.ref = props.dragSourceRef;
+	}
+	if (props.dropTargetRef) {
+		rowProps.ref = props.dropTargetRef;
+	}
+	return useMemo(() => {
+		const renderColumns = (item) => {
+			if (_.isArray(columnsConfig)) {
+				return _.map(columnsConfig, (config, key, all) => {
+					const propsToPass = columnProps[key] || {};
+					if (all.length === 1) {
+						propsToPass.w = '100%';
+					} else {
+						if (config.w) {
+							propsToPass.w = config.w;
+						} else if (config.flex) {
+							propsToPass.flex = config.flex;
+							propsToPass.minWidth = 100;
 						} else {
-							if (config.w) {
-								propsToPass.w = config.w;
-							} else if (config.flex) {
-								propsToPass.flex = config.flex;
-								propsToPass.minWidth = 100;
-							} else {
-								propsToPass.flex = 1;
-							}
-						}
-						propsToPass.p = 1;
-						propsToPass.justifyContent = 'center';
-
-						if (isInlineEditorShown) {
-							propsToPass.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
+							propsToPass.flex = 1;
 						}
+					}
+					propsToPass.p = 1;
+					propsToPass.justifyContent = 'center';
 
-						let value;
-						if (_.isFunction(config)) {
-							return config(item, key);
-						}
-						if (_.isPlainObject(config)) {
-							if (config.renderer) {
-								const extraProps = _.omit(config, [
-									'columnId',
-									'header',
-									'fieldName',
-									'type',
-									'isEditable',
-									'editor',
-									'format',
-									'renderer',
-									'reorderable',
-									'resizable',
-									'sortable',
-									'w',
-									'flex',
-									'showDragHandles',
-								]);
+					if (isInlineEditorShown) {
+						propsToPass.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
+					}
 
-								if (!extraProps._web) {
-									extraProps._web = {};
-								}
-								if (!extraProps._web.style) {
-									extraProps._web.style = {};
-								}
-								extraProps._web.style = {
-									userSelect: 'none',
-								};
+					let value;
+					if (_.isFunction(config)) {
+						return config(item, key);
+					}
+					if (_.isPlainObject(config)) {
+						if (config.renderer) {
+							const extraProps = _.omit(config, [
+								'columnId',
+								'header',
+								'fieldName',
+								'type',
+								'isEditable',
+								'editor',
+								'format',
+								'renderer',
+								'reorderable',
+								'resizable',
+								'sortable',
+								'w',
+								'flex',
+								'showDragHandles',
+							]);
 
-								return <Row key={key} {...propsToPass} {...extraProps}>{config.renderer(item)}</Row>;
+							if (!extraProps._web) {
+								extraProps._web = {};
+							}
+							if (!extraProps._web.style) {
+								extraProps._web.style = {};
 							}
-							if (config.fieldName) {
-								if (item?.properties && item.properties[config.fieldName]) {
-									const property = item.properties[config.fieldName];
-									value = property.displayValue;
-									const type = property?.viewerType?.type;
+							extraProps._web.style = {
+								userSelect: 'none',
+							};
 
-									if (type) {
-										const Element = getComponentFromType(type);
-										const elementProps = {};
-										if (UiGlobals.mode === UI_MODE_WEB) {
-											elementProps.textOverflow = 'ellipsis';
-										}
-										if (type.match(/(Tag|TagEditor)$/)) {
-											elementProps.isViewOnly = true; // TODO: this won't work for InlineGridEditor, bc that Grid can't use isViewOnly when actually editing
-										}
-										return <Element
-													value={value}
-													key={key}
-													overflow="hidden"
-													alignSelf="center"
-													style={{
-														userSelect: 'none',
-													}}
-													fontSize={styles.GRID_CELL_FONTSIZE}
-													px={styles.GRID_CELL_PX}
-													py={styles.GRID_CELL_PY}
-													numberOfLines={1}
-													ellipsizeMode="head"
-													{...propsToPass}
-													{...elementProps}
-												/>;
+							return <Row key={key} {...propsToPass} {...extraProps}>{config.renderer(item)}</Row>;
+						}
+						if (config.fieldName) {
+							if (item?.properties && item.properties[config.fieldName]) {
+								const property = item.properties[config.fieldName];
+								value = property.displayValue;
+								const type = property?.viewerType?.type;
+
+								if (type) {
+									const Element = getComponentFromType(type);
+									const elementProps = {};
+									if (UiGlobals.mode === UI_MODE_WEB) {
+										elementProps.textOverflow = 'ellipsis';
 									}
-								} else if (item[config.fieldName]) {
-									value = item[config.fieldName];
-								} else if (fields) {
-									const ix = fields.indexOf(config.fieldName);
-									value = item[ix];
+									if (type.match(/(Tag|TagEditor)$/)) {
+										elementProps.isViewOnly = true; // TODO: this won't work for InlineGridEditor, bc that Grid can't use isViewOnly when actually editing
+									}
+									return <Element
+												value={value}
+												key={key}
+												overflow="hidden"
+												alignSelf="center"
+												style={{
+													userSelect: 'none',
+												}}
+												fontSize={styles.GRID_CELL_FONTSIZE}
+												px={styles.GRID_CELL_PX}
+												py={styles.GRID_CELL_PY}
+												numberOfLines={1}
+												ellipsizeMode="head"
+												{...propsToPass}
+												{...elementProps}
+											/>;
 								}
-							}
-						}
-						if (_.isString(config)) {
-							if (fields) {
-								const ix = fields.indexOf(config);
+							} else if (item[config.fieldName]) {
+								value = item[config.fieldName];
+							} else if (fields) {
+								const ix = fields.indexOf(config.fieldName);
 								value = item[ix];
-							} else {
-								value = item[config];
 							}
 						}
-						if (_.isFunction(value)) {
-							return value(key);
-						}
-						const elementProps = {};
-						if (UiGlobals.mode === UI_MODE_WEB) {
-							elementProps.textOverflow = 'ellipsis';
+					}
+					if (_.isString(config)) {
+						if (fields) {
+							const ix = fields.indexOf(config);
+							value = item[ix];
+						} else {
+							value = item[config];
 						}
-						return <Text
-									key={key}
-									overflow="hidden"
-									alignSelf="center"
-									style={{
-										userSelect: 'none',
-									}}
-									fontSize={styles.GRID_CELL_FONTSIZE}
-									px={styles.GRID_CELL_PX}
-									py={styles.GRID_CELL_PY}
-									numberOfLines={1}
-									ellipsizeMode="head"
-									{...elementProps}
-									{...propsToPass}
-								>{value}</Text>;
-					});
-				} else {
-					// TODO: if 'columnsConfig' is an object, parse its contents
-					throw new Error('Non-array columnsConfig not yet supported');
-				}
-			};
-			return <Row
-						alignItems="center"
-						flexGrow={1}
-						{...rowProps}
-						bg={bg}
-						key={hash}
-					>
-						{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
-						
-						{renderColumns(item)}
-
-						{!hideNavColumn && <AngleRight
-												color={styles.GRID_NAV_COLUMN_COLOR}
-												variant="ghost"
-												w={30}
-												alignSelf="center"
-												mx={3}
-											/>}
-					</Row>;
-		}, [
-			columnsConfig,
-			columnProps,
-			fields,
-			rowProps,
-			hideNavColumn,
-			bg,
-			item,
-			isPhantom,
-			hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
-			isInlineEditorShown,
-		]);
-}
+					}
+					if (_.isFunction(value)) {
+						return value(key);
+					}
+					const elementProps = {};
+					if (UiGlobals.mode === UI_MODE_WEB) {
+						elementProps.textOverflow = 'ellipsis';
+					}
+					return <Text
+								key={key}
+								overflow="hidden"
+								alignSelf="center"
+								style={{
+									userSelect: 'none',
+								}}
+								fontSize={styles.GRID_CELL_FONTSIZE}
+								px={styles.GRID_CELL_PX}
+								py={styles.GRID_CELL_PY}
+								numberOfLines={1}
+								ellipsizeMode="head"
+								{...elementProps}
+								{...propsToPass}
+							>{value}</Text>;
+				});
+			} else {
+				// TODO: if 'columnsConfig' is an object, parse its contents
+				throw new Error('Non-array columnsConfig not yet supported');
+			}
+		};
+		if (isOver) {
+			rowProps.borderWidth = 4;
+			rowProps.borderColor = '#0ff';
+		} else {
+			rowProps.borderWidth = 0;
+			rowProps.borderColor = null;
+		}
+		return <Row
+					alignItems="center"
+					flexGrow={1}
+					{...rowProps}
+					bg={bg}
+					key={hash}
+				>
+					{isDragSource && <RowDragHandle />}
+					{isPhantom && <Box position="absolute" bg="#f00" h={2} w={2} t={0} l={0} />}
+					
+					{renderColumns(item)}
 
-function withAdditionalProps(WrappedComponent) {
-	return (props) => {
-		return <WrappedComponent
-					mode={VERTICAL}
-					{...props}
-				/>;
-	};
+					{!hideNavColumn && <AngleRight
+											color={styles.GRID_NAV_COLUMN_COLOR}
+											variant="ghost"
+											w={30}
+											alignSelf="center"
+											mx={3}
+										/>}
+				</Row>;
+	}, [
+		columnsConfig,
+		columnProps,
+		fields,
+		rowProps,
+		hideNavColumn,
+		bg,
+		item,
+		isPhantom,
+		hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
+		isInlineEditorShown,
+		isOver,
+	]);
 }
 
-export const ReorderableGridRow = withAdditionalProps(withDraggable(GridRow));
+export default withDraggable(withDragSource(withDropTarget(GridRow)));

package/src/Components/Grid/RowDragHandle.js

@@ -0,0 +1,24 @@
+import {
+	Column,
+	Icon,
+	Row,
+	Text,
+} from 'native-base';
+import styles from '../../Styles/StyleSheets.js';
+import GripVertical from '../Icons/GripVertical.js';
+
+function RowDragHandle(props) {
+	return <Column
+				testID="HeaderReorderHandle"
+				bg="trueGray.100"
+				h="100%"
+				w={3}
+				alignItems="center"
+				justifyContent="center"
+				style={styles.ewResize}
+			>
+				<Icon as={GripVertical} testID="handle" size="xs" w="100%" h="100%" color="#ccc" />
+			</Column>;
+}
+
+export default RowDragHandle;

package/src/Components/Hoc/withContextMenu.js

@@ -91,7 +91,11 @@ export default function withContextMenu(WrappedComponent) {
 						w: 20,
 						mr: 2,
 					};
-					icon = React.cloneElement(icon, {...iconProps});
+					if (React.isValidElement(icon)) {
+						icon = React.cloneElement(icon, {...iconProps});
+					} else {
+						icon = <Icon as={icon} {...iconProps} />;
+					}
 				}
 
 				// <div style={{

package/src/Components/Hoc/withDnd.js

@@ -0,0 +1,137 @@
+import { useDrag, useDrop } from 'react-dnd'; // https://react-dnd.github.io/react-dnd/about don't forget the wrapping <DndProvider /> as shown here: https://react-dnd.github.io/react-dnd/docs/api/dnd-provider
+
+// This HOC allows components to be dragged and dropped onto another component.
+// It doesn't contraint the moment of the preview item.
+
+export function withDragSource(WrappedComponent) {
+	return (props) => {
+		
+		if (!props.isDragSource) {
+			return <WrappedComponent {...props} />;
+		}
+
+		if (!props.dragSourceType) {
+			throw Error('dragSourceType not defined');
+		}
+		if (!props.dragSourceItem) {
+			throw Error('dragSourceItem not defined');
+		}
+
+		const {
+				dragSourceType,
+				dragSourceItem,
+			} = 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, // Required (object or function).
+						// 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: null, // Optional. A plain JavaScript object describing drag preview options.
+					options: null, // Optional. A plain object optionally containing any of the following properties:
+						// dropEffect: Optional: The type of drop effect to use on this drag. ("move" or "copy" are valid values.)
+					end: null, // (item, monitor) Optional. When the dragging stops, endis called. For every begin call, a corresponding end call is guaranteed. You may call monitor.didDrop() to check whether or not the drop was handled by a compatible drop target. If it was handled, and the drop target specified a drop result by returning a plain object from its drop()method, it will be available as monitor.getDropResult(). This method is a good place to fire a Flux action. Note: If the component is unmounted while dragging, componentparameter is set to be null.
+					canDrag: null, // (monitor): Optional. Use it to specify whether the dragging is currently allowed. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dragging based on some predicate over props. Note: You may not call monitor.canDrag()inside this method.
+					isDragging: null, // (monitor): Optional. By default, only the drag source that initiated the drag operation is considered to be dragging. You can override this behavior by defining a custom isDraggingmethod. It might return something like props.id === monitor.getItem().id. Do this if the original component may be unmounted during the dragging and later “resurrected” with a different parent. For example, when moving a card across the lists in a Kanban board, you want it to retain the dragged appearance—even though technically, the component gets unmounted and a different one gets mounted every time you move it to another list. Note: You may not call monitor.isDragging()inside this method.
+					collect: (monitor, props) => { // 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.
+						};
+					},
+				};
+			}),
+			{
+				canDrag,
+				isDragging,
+				// type,
+				// item,
+				// dropResult,
+				// didDrop,
+				// initialClientOffset,
+				// initialSourceClientOffset,
+				// clientOffset,
+				// differenceFromInitialOffset,
+				// sourceClientOffset,
+			} = dragState;
+
+		return <WrappedComponent 
+					canDrag={canDrag}
+					isDragging={isDragging}
+					dragSourceRef={dragSourceRef}
+					{...props}
+				/>;
+	};
+}
+
+
+export function withDropTarget(WrappedComponent) {
+	return (props) => {
+		if (!props.isDropTarget) {
+			return <WrappedComponent {...props} />;
+		}
+
+		if (!props.dropTargetAccept) {
+			throw Error('dropTargetAccept not defined');
+		}
+
+		const {
+				dropTargetAccept,
+				onDrop = null,
+			} = props,
+			[dropState, dropTargetRef] = useDrop(() => { // A specification object or a function that creates a specification object.
+				// The useDrophook provides a way for you to wire in your component into the DnD system as a drop target. By passing in a specification into the useDrophook, you can specify including what types of data items the drop-target will accept, what props to collect, and more. This function returns an array containing a ref to attach to the Drop Target node and the collected props.
+				return {
+					accept: dropTargetAccept, // Required. A string, a symbol, or an array of either. This drop target will only react to the items produced by the drag sources of the specified type or types. Read the overview to learn more about the items and types.
+					// options: null, // Optional. A plain object. If some of the props to your component are not scalar (that is, are not primitive values or functions), specifying a custom arePropsEqual(props, otherProps) function inside the options object can improve the performance. Unless you have performance problems, don't worry about it.
+					drop: onDrop, // (item, monitor): Optional. Called when a compatible item is dropped on the target. You may either return undefined, or a plain object. If you return an object, it is going to become the drop result and will be available to the drag source in its endDragmethod as monitor.getDropResult(). This is useful in case you want to perform different actions depending on which target received the drop. If you have nested drop targets, you can test whether a nested target has already handled dropby checking monitor.didDrop()and monitor.getDropResult(). Both this method and the source's endDragmethod are good places to fire Flux actions. This method will not be called if canDrop()is defined and returns false.
+					// hover: null, // (item, monitor): Optional. Called when an item is hovered over the component. You can check monitor.isOver({ shallow: true })to test whether the hover happens over only the current target, or over a nested one. Unlike drop(), this method will be called even if canDrop()is defined and returns false. You can check monitor.canDrop()to test whether this is the case.
+					// canDrop: null, // (item, monitor): Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.
+					collect: (monitor, props) => { // Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitorand 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.
+						return {
+							canDrop: !!monitor.canDrop(),
+							isOver: !!monitor.isOver(),
+							// didDrop: !!monitor.didDrop(),
+							// clientOffset: monitor.getClientOffset(),
+							// differenceFromInitialOffset: monitor.getDifferenceFromInitialOffset(),
+							// dropResult: monitor.getDropResult(),
+							// handlerId: monitor.getHandlerId(),
+							// initialClientOffset: monitor.getInitialClientOffset(),
+							// initialSourceClientOffset: monitor.getInitialSourceClientOffset(),
+							// receiveHandlerId
+							// subscribeToStateChange
+						};
+					},
+				};
+			}),
+			{
+				canDrop,
+				isOver,
+				// didDrop,
+				// clientOffset,
+				// differenceFromInitialOffset,
+				// dropResult,
+				// handlerId,
+				// initialClientOffset,
+				// initialSourceClientOffset,
+			} = dropState;
+			
+		return <WrappedComponent 
+					canDrop={canDrop}
+					isOver={isOver}
+					dropTargetRef={dropTargetRef}
+					{...props}
+				/>;
+	};
+}

package/src/Components/Hoc/withDraggable.js

@@ -23,6 +23,10 @@ import getComponentFromType from '../../Functions/getComponentFromType.js';
 export default function withDraggable(WrappedComponent) {
 	return (props) => {
 
+		if (!props.isDraggable) {
+			return <WrappedComponent {...props} />;
+		}
+
 		const {
 				// extract and pass
 				onDragStart,

package/src/Components/Hoc/withPresetButtons.js

@@ -327,12 +327,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						{...propsToPass}
 						disablePresetButtons={false}
 						contextMenuItems={[
-							...contextMenuItems,
 							...localContextMenuItems,
+							...contextMenuItems,
 						]}
 						additionalToolbarButtons={[
-							...additionalToolbarButtons,
 							...localAdditionalToolbarButtons,
+							...additionalToolbarButtons,
 						]}
 						onChangeColumnsConfig={onChangeColumnsConfigDecorator}
 					/>

package/src/Components/index.js

@@ -203,6 +203,7 @@ import DataMgt from './Screens/DataMgt.js';
 import Date from './Form/Field/Date.js';
 import DateRange from './Filter/DateRange.js';
 import DisplayField from './Form/Field/DisplayField.js';
+import ExpandButton from './Buttons/ExpandButton.js';
 import FieldSet from './Form/FieldSet.js';
 import FiltersForm from './Form/FiltersForm.js';
 // import FiltersToolbar from '../Components/Toolbar/FiltersToolbar.js';
@@ -436,6 +437,7 @@ const components = {
 	Date,
 	DateRange,
 	DisplayField,
+	ExpandButton,
 	FieldSet,
 	FiltersForm,
 	// FiltersToolbar,