@onehat/ui 0.4.76 → 0.4.78

package/src/Components/Grid/GridHeaderRow.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, } from 'react';
+import { useState, useEffect, useMemo, forwardRef, } from 'react';
 import {
 	Box,
 	HStack,
@@ -30,9 +30,7 @@ import SortDown from '../Icons/SortDown.js';
 import SortUp from '../Icons/SortUp.js';
 import _ from 'lodash';
 
-// This was broken out from Grid simply so we can memoize it
-
-export default function GridHeaderRow(props) {
+export default forwardRef(function GridHeaderRow(props, ref) {
 	let {
 			canColumnsReorder,
 			canColumnsResize,
@@ -49,7 +47,7 @@ export default function GridHeaderRow(props) {
 			isInlineEditorShown,
 			areRowsDragSource,
 			showColumnsSelector,
-			showSelectHandle,
+			showRowHandle,
 		} = props,
 		styles = UiGlobals.styles,
 		sortFn = Repository && Repository.getSortFn(),
@@ -467,18 +465,10 @@ export default function GridHeaderRow(props) {
 										/>}
 							</Pressable>;
 				});
-				if (showSelectHandle) {
-					headerColumns.unshift(<Box
-						key="RowSelectHandle"
-						className="Spacer-RowSelectHandle px-2 items-center justify-center flex-none w-[40px]"
-					>
-						<Icon as={Arcs} className={`Arcs w-[20px] h-[20px] text-[#aaa]`} />
-					</Box>);
-				}
-				if (areRowsDragSource) {
+				if (showRowHandle) {
 					headerColumns.unshift(<Box
-						key="spacer"
-						className="Spacer w-[7px]"
+						key="RowHandleSpacer"
+						className="Spacer-RowHandle w-[40px] flex-none"
 					/>);
 				}
 				if (!hideNavColumn) {
@@ -488,6 +478,7 @@ export default function GridHeaderRow(props) {
 			};
 
 		return <HStack
+					ref={ref}
 					style={{
 						scrollbarWidth: 'none',
 					}}
@@ -515,6 +506,8 @@ export default function GridHeaderRow(props) {
 		sortFn,
 		sortField,
 		isInlineEditorShown,
+		areRowsDragSource,
+		showRowHandle,
 	]);
-}
+});
 

package/src/Components/Grid/GridRow.js

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect, } from 'react';
+import { useMemo, useState, useEffect, forwardRef, isValidElement, cloneElement, } from 'react';
 import {
 	Box,
 	HStack,
@@ -25,25 +25,20 @@ import useAsyncRenderers from './useAsyncRenderers.js';
 import _ from 'lodash';
 
 // Conditional import for web only
-let getEmptyImage;
-if (CURRENT_MODE === UI_MODE_WEB) {
-	import('react-dnd-html5-backend').then((module) => {
-		getEmptyImage = module.getEmptyImage;
-	}).catch(() => {
-		getEmptyImage = null;
-	});
-}
+let getEmptyImage = null;
 
 // This was broken out from Grid simply so we can memoize it
 
-function GridRow(props) {
+const GridRow = forwardRef(function GridRow(props, ref) {
 	const {
 			columnsConfig,
 			columnProps,
 			fields,
 			rowProps,
 			hideNavColumn,
-			showSelectHandle,
+			showRowHandle,
+			rowCanSelect,
+			rowCanDrag,
 			isRowHoverable,
 			isSelected,
 			isHovered,
@@ -79,8 +74,15 @@ function GridRow(props) {
 	// Hide the default drag preview only when using custom drag proxy (and only on web)
 	useEffect(() => {
 		if (dragPreviewRef && typeof dragPreviewRef === 'function' && getDragProxy && CURRENT_MODE === UI_MODE_WEB) {
-			// Only suppress default drag preview when we have a custom one and we're on web
-			dragPreviewRef(getEmptyImage(), { captureDraggingState: true });
+			// Load getEmptyImage dynamically and apply it
+			import('react-dnd-html5-backend').then((module) => {
+				const getEmptyImage = module.getEmptyImage;
+				if (getEmptyImage) {
+					dragPreviewRef(getEmptyImage(), { captureDraggingState: true });
+				}
+			}).catch((error) => {
+				console.warn('Failed to load react-dnd-html5-backend:', error);
+			});
 		}
 	}, [dragPreviewRef, getDragProxy]);
 
@@ -126,12 +128,13 @@ function GridRow(props) {
 			if (_.isArray(columnsConfig)) {
 				return _.map(columnsConfig, (config, key, all) => {
 					if (config.isHidden) {
-						return null;
+						// every element needs a key, so return an empty element with a key
+						return <Box key={key} style={{ display: 'none' }} />;
 					}
 					const
 						propsToPass = columnProps[key] || {},
 						colStyle = {},
-						whichCursor = showSelectHandle ? 'cursor-text' : 'cursor-pointer'; // when using rowSelectHandle, indicate that the row text is selectable, otherwise indicate that the row itself is selectable
+						whichCursor = showRowHandle ? 'cursor-text' : 'cursor-pointer'; // when using rowSelectHandle, indicate that the row text is selectable, otherwise indicate that the row itself is selectable
 					let colClassName = clsx(
 						'GridRow-column',
 						'p-1',
@@ -161,7 +164,12 @@ function GridRow(props) {
 
 					let value;
 					if (_.isFunction(config)) {
-						return config(item, key);
+						const element = config(item, key);
+						if (isValidElement(element)) {
+							// ensure element has a key
+							return element.key != null ? element : cloneElement(element, { key });
+						}
+						return <Box key={key}>{element}</Box>; // create a box (with key) to wrap non-elements
 					}
 					if (_.isPlainObject(config)) {
 						if (config.renderer) {
@@ -219,7 +227,7 @@ function GridRow(props) {
 								throw Error('Not yet working correctly!');
 								// Async renderer
 								if (isLoading) {
-									content = <Loading />;
+									content = <Loading key={key} />;
 								} else if (asyncResult) {
 									if (asyncResult.error) {
 										content = <Text key={key}>Render Error: {asyncResult.error.message || String(asyncResult.error)}</Text>;
@@ -240,7 +248,15 @@ function GridRow(props) {
 									content = <Text key={key}>Render Error: {error}</Text>;
 								}
 							}
-							return content;
+							
+							
+							
+							// Ensure content has a key prop
+							if (isValidElement(content)) {
+								// ensure element has a key
+								return content.key != null ? content : cloneElement(content, { key });
+							}
+							return <Box key={key}>{content}</Box>; // create a box (with key) to wrap non-elements
 						}
 						if (config.fieldName) {
 
@@ -315,7 +331,13 @@ function GridRow(props) {
 						}
 					}
 					if (_.isFunction(value)) {
-						return value(key);
+						const result = value(key);
+						// Ensure the result has a key prop
+						if (isValidElement(result)) {
+							// Only clone if the result doesn't already have a key
+							return result.key != null ? result : cloneElement(result, { key });
+						}
+						return <Box key={key}>{result}</Box>;
 					}
 					const elementProps = {};
 					if (config.getCellProps) {
@@ -353,12 +375,13 @@ function GridRow(props) {
 		};
 
 		let rowContents = <>
-							{(isDragSource || isDraggable || showSelectHandle) &&
+							{showRowHandle &&
 								<RowHandle
 									ref={dragSourceRef}
 									isDragSource={isDragSource}
 									isDraggable={isDraggable}
-									showSelectHandle={showSelectHandle}
+									canSelect={rowCanSelect}
+									canDrag={rowCanDrag}
 								/>}
 							
 							{isPhantom && 
@@ -418,6 +441,7 @@ function GridRow(props) {
 			rowClassName += ' border-4 border-[#0ff]';
 		}
 		return <HStackNative
+					ref={ref}
 					{...testProps('Row ' + (isSelected ? 'row-selected' : ''))}
 					{...rowProps}
 					key={hash}
@@ -449,8 +473,11 @@ function GridRow(props) {
 		dragSourceRef,
 		dragPreviewRef,
 		dropTargetRef,
+		showRowHandle,
+		rowCanSelect,
+		rowCanDrag,
 	]);
-}
+});
 
 // export default withDraggable(withDragSource(withDropTarget(GridRow)));
 export default GridRow;

package/src/Components/Grid/RowHandle.js

@@ -7,7 +7,7 @@ import withTooltip from '@onehat/ui/src/Components/Hoc/withTooltip';
 import clsx from 'clsx';
 import Arcs from '../Icons/Arcs.js';
 
-const RowHandle = forwardRef(function RowHandle(props, ref) {
+const RowHandle = forwardRef((props, ref) => {
 	const {
 			isDragSource,
 			isDraggable
@@ -31,25 +31,27 @@ const RowHandle = forwardRef(function RowHandle(props, ref) {
 });
 
 function withAdditionalProps(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		const {
-				showSelectHandle,
+				canSelect,
+				canDrag,
 				isDragSource,
 				isDraggable
 			} = props;
 		let tooltipParts = [];
-		if (showSelectHandle) {
+		if (canSelect) {
 			tooltipParts.push('Select');
 		}
-		if (isDragSource || isDraggable) {
+		if (canDrag) {
 			tooltipParts.push('Drag');
 		}
 		const tooltip = tooltipParts.length === 2 ? tooltipParts.join(' or ') : tooltipParts[0];
 		return <WrappedComponent
 					tooltip={tooltip}
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 }
 
 export default withAdditionalProps(withTooltip(RowHandle));

package/src/Components/Hoc/withEditor.js

@@ -106,7 +106,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			setIsWaitModalShown = (bool) => {
 				const
 					dispatch = UiGlobals.redux?.dispatch,
-					setIsWaitModalShownAction = UiGlobals.debugReducer?.setIsWaitModalShownAction;
+					setIsWaitModalShownAction = UiGlobals.systemReducer?.setIsWaitModalShownAction;
 				if (setIsWaitModalShownAction) {
 					console.log('withEditor:setIsWaitModalShownAction', bool);
 					dispatch(setIsWaitModalShownAction(bool));

package/src/Components/Hoc/withPdfButtons.js

@@ -332,7 +332,7 @@ export default function withPdfButtons(WrappedComponent) {
 
 				const
 					dispatch = UiGlobals.redux.dispatch,
-					setIsWaitModalShownAction = UiGlobals.debugReducer.setIsWaitModalShownAction;
+					setIsWaitModalShownAction = UiGlobals.systemReducer.setIsWaitModalShownAction;
 
 				dispatch(setIsWaitModalShownAction(true));
 

package/src/Components/Hoc/withSelection.js

@@ -42,8 +42,24 @@ export default function withSelection(WrappedComponent) {
 			forceUpdate = useForceUpdate(),
 			selectionRef = useRef(initialSelection),
 			RepositoryRef = useRef(Repository),
+			isSelectionChangesEnabledRef = useRef(true),
 			[isReady, setIsReady] = useState(selection || false), // if selection is already defined, or value is not null and we don't need to load repository, it's ready
+			getIsSelectionChangesEnabled = () => {
+				return isSelectionChangesEnabledRef.current;
+			},
+			setIsSelectionChangesEnabled = (bool) => {
+				isSelectionChangesEnabledRef.current = bool;
+			},
+			disableSelectionChanges = () => {
+				setIsSelectionChangesEnabled(false);
+			},
+			enableSelectionChanges = () => {
+				setIsSelectionChangesEnabled(true);
+			},
 			setSelection = (selection) => {
+				if (!getIsSelectionChangesEnabled()) {
+					return;
+				}
 				if (_.isEqual(selection, getSelection())) {
 					return;
 				}
@@ -195,13 +211,16 @@ export default function withSelection(WrappedComponent) {
 			},
 			isInSelection = (item) => {
 				const Repository = getRepository();
+				let found = null;
 				if (Repository) {
-					return inArray(item, getSelection());
-				}
-
-				const found = _.find(getSelection(), (selectedItem) => {
+					found = _.find(getSelection(), (selectedItem) => {
+						return selectedItem.id === item.id;
+					});
+				} else {
+					found = _.find(getSelection(), (selectedItem) => {
 						return selectedItem[idIx] === item[idIx];
 					});
+				}
 				return !!found;
 			},
 			getIndexOfSelectedItem = (item) => {
@@ -436,6 +455,9 @@ export default function withSelection(WrappedComponent) {
 					isInSelection={isInSelection}
 					getIdsFromSelection={getIdsFromLocalSelection}
 					getDisplayValuesFromSelection={getDisplayValuesFromSelection}
+					disableSelectionChanges={disableSelectionChanges}
+					enableSelectionChanges={enableSelectionChanges}
+					refreshSelection={refreshSelection}
 				/>;
 	});
 }