@onehat/ui 0.4.102 → 0.4.104

package/src/Components/Grid/Grid.js

@@ -296,6 +296,11 @@ function GridComponent(props) {
 		footerToolbarRef = useRef(null),
 		rowRefs = useRef([]),
 		previousEntitiesLength = useRef(0),
+		paginationSelectionGuardRef = useRef({
+			source: null,
+			pending: new Set(),
+			expiresAt: 0,
+		}),
 		hasRemeasuredAfterRowsAppeared = useRef(false),
 		[isInited, setIsInited] = useState(false),
 		[isReady, setIsReady] = useState(false),
@@ -305,20 +310,6 @@ function GridComponent(props) {
 		showRowHandle = showSelectHandle || areRowsDragSource || (canRowsReorder && isReorderMode),
 		rowLongPressDelay = rowLongPressDelayMs ?? ((areRowsDragSource || canRowsReorder) ? 800 : undefined),
 		[lastMeasuredContainerHeight, setLastMeasuredContainerHeight] = useState(0),
-		getMeasurementPhase = () => {
-			return measurementPhaseRaw.current;
-		},
-		setMeasurementPhase = (phase) => {
-			measurementPhaseRaw.current = phase;
-			forceUpdate();
-		},
-		getMeasuredRowHeight = () => {
-			return measuredRowHeightRaw.current;
-		},
-		setMeasuredRowHeight = (height) => {
-			measuredRowHeightRaw.current = height;
-			forceUpdate();
-		},
 		getIsExpanded = (index) => {
 			return !!expandedRowsRef.current[index];
 		},
@@ -427,13 +418,15 @@ function GridComponent(props) {
 			}
 		},
 		getFooterToolbarItems = () => {
-			// Process additionalToolbarButtons to evaluate getIsButtonDisabled functions
+			// Process additionalToolbarButtons to evaluate functions
 			const processedButtons = _.map(additionalToolbarButtons, (config) => {
 				const processedConfig = { ...config };
-				// If the button has an getIsButtonDisabled function, evaluate it with current selection
 				if (_.isFunction(config.getIsButtonDisabled)) {
 					processedConfig.isDisabled = config.getIsButtonDisabled(selection);
 				}
+				if (_.isFunction(config.getText)) {
+					processedConfig.text = config.getText(selection);
+				}
 				return processedConfig;
 			});
 			const items = _.map(processedButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
@@ -596,6 +589,8 @@ function GridComponent(props) {
 						'flex-row',
 						'grow',
 						'max-h-[80px]',
+						'focus:outline-none', // hide the focus outline
+						'focus-visible:outline-none',
 					)}
 				>
 					{({
@@ -1018,6 +1013,151 @@ function GridComponent(props) {
 			marker.remove();
 			cachedDragElements.current = null;
 		},
+		applySelectorSelected = () => {
+			if (disableSelectorSelected || !selectorId) {
+				return
+			}
+
+			if (previousSelectorId.current && selectorId !== previousSelectorId.current) {
+				Repository.pauseEvents();
+				Repository.clearFilters(previousSelectorId.current);
+				Repository.resumeEvents();
+			}
+			previousSelectorId.current = selectorId;
+
+			let value = null;
+			if (selectorSelected) {
+				value = selectorSelected[selectorSelectedField];
+			}
+			if (noSelectorMeansNoResults && _.isEmpty(selectorSelected)) {
+				value = 'NO_MATCHES';
+			}
+
+			Repository.filter(selectorId, value, false); // false so it doesn't clear existing filters
+		},
+		onGridKeyDown = (e) => {
+			if (isInlineEditorShown) {
+				return;
+			}
+			if (disableWithSelection) {
+				return;
+			}
+			const {
+					shiftKey = false,
+				} = e;
+			if (selectionMode === SELECTION_MODE_MULTI && shiftKey) {
+				switch(e.key) {
+					case 'ArrowDown':
+						e.preventDefault();
+						addNextToSelection();
+						break;
+					case 'ArrowUp':
+						e.preventDefault();
+						addPrevToSelection();
+						break;
+				}
+			} else {
+				// selectionMode is SELECTION_MODE_SINGLE
+				switch(e.key) {
+					case 'Enter':
+						// NOTE: This is never being reached.
+						// The event is getting captured somwhere else,
+						// but I can't find where.
+						// e.preventDefault();
+						
+						// launch inline or windowed editor
+						// const p = props;
+						// debugger;
+						break;
+					case 'ArrowDown':
+						e.preventDefault();
+						selectNext();
+						break;
+					case 'ArrowUp':
+						e.preventDefault();
+						selectPrev();
+						break;
+				}
+			}
+		},
+		showColumnsSelector = () => {
+			const
+				modalItems = _.map(localColumnsConfig, (config, ix) => {
+					return {
+						name: config.id,
+						label: config.header,
+						type: config.isHidable ? 'Checkbox' : 'Text',
+						isEditable: config.isHidable ?? false,
+					};
+				}),
+				startingValues = (() => {
+					const startingValues = {};
+					_.each(localColumnsConfig, (config) => {
+						const value = !config.isHidden; // checkbox implies to show it, so flip the polarity
+						startingValues[config.id] = config.isHidable ? value : 'Always shown';
+					});
+					return startingValues;
+				})();
+			
+			showModal({
+				title: 'Column Selector',
+				includeReset: true,
+				includeCancel: true,
+				h: 800,
+				w: styles.FORM_STACK_ROW_THRESHOLD + 10,
+				body: <Form
+							editorType={EDITOR_TYPE__PLAIN}
+							columnDefaults={{
+								labelWidth: '250px',
+							}}
+							items={[
+								{
+									name: 'instructions',
+									type: 'DisplayField',
+									text: 'Please select which columns to show in the grid.',
+									className: 'mb-3',
+								},
+								{
+									type: 'FieldSet',
+									title: 'Columns',
+									reference: 'columns',
+									showToggleAllCheckbox: true,
+									items: [
+										...modalItems,
+									],
+								}
+							]}
+							startingValues={startingValues}
+							onSave={(values)=> {
+								hideModal();
+
+								const newColumnsConfig = _.cloneDeep(localColumnsConfig);
+								_.each(newColumnsConfig, (config, ix) => {
+									if (config.isHidable) {
+										newColumnsConfig[ix].isHidden = !values[config.id]; // checkbox implies to show it, so flip the polarity
+									}
+								});
+								setLocalColumnsConfig(newColumnsConfig);
+							}}
+						/>,
+			});
+		},
+
+		// These methods relate to auto-pageSize measurement and adjustment:
+		getMeasurementPhase = () => {
+			return measurementPhaseRaw.current;
+		},
+		setMeasurementPhase = (phase) => {
+			measurementPhaseRaw.current = phase;
+			forceUpdate();
+		},
+		getMeasuredRowHeight = () => {
+			return measuredRowHeightRaw.current;
+		},
+		setMeasuredRowHeight = (height) => {
+			measuredRowHeightRaw.current = height;
+			forceUpdate();
+		},
 		calculatePageSize = (containerHeight, useActualMeasurements = false) => {
 			if (DEBUG) {
 				console.log(`${getMeasurementPhase()}, calculatePageSize A containerHeight=${containerHeight}, useActualMeasurements=${useActualMeasurements}, measuredRowHeight=${getMeasuredRowHeight()}`);
@@ -1202,6 +1342,7 @@ function GridComponent(props) {
 						if (DEBUG) {
 							console.log(`${getMeasurementPhase()}, applyMeasuredRowHeight B Repository.setPageSize(${newPageSize})`);
 						}
+						startAutoPageSizeSelectionGuard();
 						Repository.setPageSize(newPageSize);
 					}
 				}
@@ -1261,6 +1402,7 @@ function GridComponent(props) {
 						if (DEBUG) {
 							console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight D Repository.setPageSize(${pageSize})`);
 						}
+						startAutoPageSizeSelectionGuard();
 						Repository.setPageSize(pageSize);
 					}
 				}
@@ -1279,136 +1421,51 @@ function GridComponent(props) {
 			}
 		},
 		debouncedAdjustPageSizeToHeight = useCallback(_.debounce(adjustPageSizeToHeight, 200), []),
-		applySelectorSelected = () => {
-			if (disableSelectorSelected || !selectorId) {
-				return
-			}
-
-			if (previousSelectorId.current && selectorId !== previousSelectorId.current) {
-				Repository.pauseEvents();
-				Repository.clearFilters(previousSelectorId.current);
-				Repository.resumeEvents();
-			}
-			previousSelectorId.current = selectorId;
 
-			let value = null;
-			if (selectorSelected) {
-				value = selectorSelected[selectorSelectedField];
-			}
-			if (noSelectorMeansNoResults && _.isEmpty(selectorSelected)) {
-				value = 'NO_MATCHES';
-			}
-
-			Repository.filter(selectorId, value, false); // false so it doesn't clear existing filters
+		// These methods guard for selection/pagination interaction
+		// (If user makes a selection during the auto-pageSize adjustment, 
+		// we don't want to clear the selection if the current selection 
+		// would still be valid with the new page size):
+		clearPaginationSelectionGuard = () => {
+			paginationSelectionGuardRef.current = {
+				source: null,
+				pending: new Set(),
+				expiresAt: 0,
+			};
 		},
-		onGridKeyDown = (e) => {
-			if (isInlineEditorShown) {
+		startAutoPageSizeSelectionGuard = () => {
+			if (disableWithSelection || !deselectAll) {
 				return;
 			}
-			if (disableWithSelection) {
-				return;
+			paginationSelectionGuardRef.current = {
+				source: 'autoPageSize',
+				pending: new Set(['changePage', 'changePageSize',]),
+				expiresAt: Date.now() + 5000,
+			};
+		},
+		consumePaginationSelectionGuard = (eventType) => {
+			const guard = paginationSelectionGuardRef.current;
+			if (guard.source !== 'autoPageSize') {
+				return false;
 			}
-			const {
-					shiftKey = false,
-				} = e;
-			if (selectionMode === SELECTION_MODE_MULTI && shiftKey) {
-				switch(e.key) {
-					case 'ArrowDown':
-						e.preventDefault();
-						addNextToSelection();
-						break;
-					case 'ArrowUp':
-						e.preventDefault();
-						addPrevToSelection();
-						break;
-				}
-			} else {
-				// selectionMode is SELECTION_MODE_SINGLE
-				switch(e.key) {
-					case 'Enter':
-						// NOTE: This is never being reached.
-						// The event is getting captured somwhere else,
-						// but I can't find where.
-						// e.preventDefault();
-						
-						// launch inline or windowed editor
-						// const p = props;
-						// debugger;
-						break;
-					case 'ArrowDown':
-						e.preventDefault();
-						selectNext();
-						break;
-					case 'ArrowUp':
-						e.preventDefault();
-						selectPrev();
-						break;
-				}
+			if (Date.now() > guard.expiresAt) {
+				clearPaginationSelectionGuard();
+				return false;
+			}
+			if (!guard.pending.has(eventType)) {
+				return false;
 			}
-		},
-		showColumnsSelector = () => {
-			const
-				modalItems = _.map(localColumnsConfig, (config, ix) => {
-					return {
-						name: config.id,
-						label: config.header,
-						type: config.isHidable ? 'Checkbox' : 'Text',
-						isEditable: config.isHidable ?? false,
-					};
-				}),
-				startingValues = (() => {
-					const startingValues = {};
-					_.each(localColumnsConfig, (config) => {
-						const value = !config.isHidden; // checkbox implies to show it, so flip the polarity
-						startingValues[config.id] = config.isHidable ? value : 'Always shown';
-					});
-					return startingValues;
-				})();
-			
-			showModal({
-				title: 'Column Selector',
-				includeReset: true,
-				includeCancel: true,
-				h: 800,
-				w: styles.FORM_STACK_ROW_THRESHOLD + 10,
-				body: <Form
-							editorType={EDITOR_TYPE__PLAIN}
-							columnDefaults={{
-								labelWidth: '250px',
-							}}
-							items={[
-								{
-									name: 'instructions',
-									type: 'DisplayField',
-									text: 'Please select which columns to show in the grid.',
-									className: 'mb-3',
-								},
-								{
-									type: 'FieldSet',
-									title: 'Columns',
-									reference: 'columns',
-									showToggleAllCheckbox: true,
-									items: [
-										...modalItems,
-									],
-								}
-							]}
-							startingValues={startingValues}
-							onSave={(values)=> {
-								hideModal();
 
-								const newColumnsConfig = _.cloneDeep(localColumnsConfig);
-								_.each(newColumnsConfig, (config, ix) => {
-									if (config.isHidable) {
-										newColumnsConfig[ix].isHidden = !values[config.id]; // checkbox implies to show it, so flip the polarity
-									}
-								});
-								setLocalColumnsConfig(newColumnsConfig);
-							}}
-						/>,
-			});
+			guard.pending.delete(eventType);
+
+			if (!guard.pending.size) {
+				clearPaginationSelectionGuard();
+			}
+
+			return true;
 		};
 
+
 	if (forceLoadOnRender && disableLoadOnRender) {
 		throw new Error('incompatible config! forceLoadOnRender and disableLoadOnRender cannot both be true');
 	}
@@ -1531,7 +1588,27 @@ function GridComponent(props) {
 		// set up @onehat/data repository
 		const
 			setTrue = () => setIsLoading(true),
-			setFalse = () => setIsLoading(false),
+			setFalse = () => {
+				setIsLoading(false);
+				clearPaginationSelectionGuard();
+			},
+			onPaginationEvent = (eventType) => {
+				if (consumePaginationSelectionGuard(eventType)) {
+					return;
+				}
+				if (!disableWithSelection && deselectAll) {
+					deselectAll();
+				}
+				if (eventType === 'changePage' && showRowExpander) {
+					expandedRowsRef.current = {}; // clear expanded rows
+				}
+			},
+			onChangePageSize = () => {
+				if (disableWithSelection || !deselectAll) {
+					return;
+				}
+				onPaginationEvent('changePageSize');
+			},
 			onChangeFilters = () => {
 				if (DEBUG) {
 					console.log('onChangeFilters, reload and re-measure');
@@ -1546,20 +1623,16 @@ function GridComponent(props) {
 				}
 			},
 			onChangePage = () => {
-				if (showRowExpander) {
-					expandedRowsRef.current = {}; // clear expanded rows
-				}
+				onPaginationEvent('changePage');
 			};
 
 		Repository.on('beforeLoad', setTrue);
 		Repository.on('load', setFalse);
-		if (!disableWithSelection) {
-			Repository.ons(['changePage', 'changePageSize',], deselectAll);
-		}
+		Repository.on('changePage', onChangePage);
+		Repository.on('changePageSize', onChangePageSize);
 		Repository.ons(['changeData', 'change'], forceUpdate);
 		Repository.on('changeFilters', onChangeFilters);
 		Repository.on('changeSorters', onChangeSorters);
-		Repository.on('changePage', onChangePage);
 
 		applySelectorSelected();
 
@@ -1578,13 +1651,11 @@ function GridComponent(props) {
 		return () => {
 			Repository.off('beforeLoad', setTrue);
 			Repository.off('load', setFalse);
-			if (!disableWithSelection) {
-				Repository.offs(['changePage', 'changePageSize',], deselectAll);
-			}
+			Repository.off('changePage', onChangePage);
+			Repository.off('changePageSize', onChangePageSize);
 			Repository.offs(['changeData', 'change'], forceUpdate);
 			Repository.off('changeFilters', onChangeFilters);
 			Repository.off('changeSorters', onChangeSorters);
-			Repository.off('changePage', onChangePage);
 		};
 	}, [isInited]);
 
@@ -1600,8 +1671,8 @@ function GridComponent(props) {
 
 	}, [selectorId, selectorSelected]);
 
-	// Effect to trigger row height measurement after render
 	useEffect(() => {
+		// trigger row height measurement after render
 		if (getMeasurementPhase() === PHASES__MEASURING) {
 			// Small delay to ensure elements are fully rendered
 			const timer = setTimeout(async () => {
@@ -1637,13 +1708,13 @@ function GridComponent(props) {
 		}
 	}, [autoAdjustPageSizeToHeight]);
 
-	// Reset measurement when rows were first empty then became populated
 	useEffect(() => {
+		// Reset measurement when rows were first empty then became populated
 		const
 			currentLength = entities?.length || 0,
 			wasEmpty = previousEntitiesLength.current === 0,
 			isNowPopulated = currentLength > 0,
-			hasPhantomRecord = entities?.some(entity => entity?.isPhantom);
+			hasPhantomRecord = entities?.some(entity => !entity.isDestroyed && entity?.isPhantom);
 			
 		// NOTE: The Repository was reloading when a phantom record was added,
 		// and this broke the Editor because selection was being reset to zero.
@@ -1674,6 +1745,15 @@ function GridComponent(props) {
 		previousEntitiesLength.current = currentLength;
 	}, [entities?.length, autoAdjustPageSizeToHeight]);
 
+	
+	// Memoize footer toolbar items to avoid unnecessary re-renders, but only if they don't have dynamic properties
+	const
+		hasDynamicFooterToolbarItems = useMemo(() => _.some(additionalToolbarButtons, (config) => {
+			return _.isFunction(config.getIsButtonDisabled) || _.isFunction(config.getText);
+		}), [additionalToolbarButtons]),
+		memoizedFooterToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, isReorderMode]),
+		footerToolbarItemComponents = hasDynamicFooterToolbarItems ? getFooterToolbarItems() : memoizedFooterToolbarItemComponents;
+
 	if (canUser && !canUser('view')) {
 		return <Unauthorized />;
 	}
@@ -1685,8 +1765,6 @@ function GridComponent(props) {
 
 	isAddingRaw.current = isAdding;
 
-	const footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, isReorderMode]);
-
 	if (!isInited) {
 		// first time through, render a placeholder so we can get container dimensions
 		return <VStackNative
@@ -1838,6 +1916,8 @@ function GridComponent(props) {
 		'w-full',
 		'border',
 		'border-grey-300',
+		'focus:outline-none', // hide the focus outline
+		'focus-visible:outline-none',
 	);
 	if (props.className) {
 		className += ' ' + props.className;

package/src/Components/Grid/GridRow.js

@@ -490,7 +490,11 @@ const GridRow = forwardRef((props, ref) => {
 						}}
 					>{rowContents}</HStackNative>;
 		if (rowProps.tooltip) {
-			row = <Tooltip label={rowProps.tooltip} placement="bottom left">{row}</Tooltip>;
+			row = <Tooltip
+						label={rowProps.tooltip}
+						placement="bottom left"
+						triggerClassName={rowClassName}
+					>{row}</Tooltip>;
 		}
 		return row;
 	}, [

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

@@ -47,6 +47,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				},
 				secondaryEditorType,
 				secondaryOnAdd,
+				secondaryOnBeforeAdd,
 				secondaryOnChange, // any kind of crud change
 				secondaryOnBeforeDelete,
 				secondaryOnDelete,
@@ -201,10 +202,26 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				}
 
 				if (getListeners().onBeforeAdd) {
-					const listenerResult = await getListeners().onBeforeAdd();
+					// This listener is set by child components using setWithEditListeners()
+					const listenerResult = await getListeners().onBeforeAdd(addValues);
+					if (listenerResult === false) {
+						return;
+					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
+				}
+				if (secondaryOnBeforeAdd) {
+					// This listener is set by parent components using a prop
+					const listenerResult = await secondaryOnBeforeAdd(addValues);
 					if (listenerResult === false) {
 						return;
 					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
 				}
 
 				if (isTree) {

package/src/Components/Hoc/withEditor.js

@@ -47,6 +47,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				},
 				editorType,
 				onAdd,
+				onBeforeAdd,
 				onChange, // any kind of crud change
 				onBeforeDelete,
 				onDelete,
@@ -218,10 +219,26 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 
 				if (getListeners().onBeforeAdd) {
-					const listenerResult = await getListeners().onBeforeAdd();
+					// This listener is set by child components using setWithEditListeners()
+					const listenerResult = await getListeners().onBeforeAdd(addValues);
+					if (listenerResult === false) {
+						return;
+					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
+				}
+				if (onBeforeAdd) {
+					// This listener is set by parent components using a prop
+					const listenerResult = await onBeforeAdd(addValues);
 					if (listenerResult === false) {
 						return;
 					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
 				}
 
 				if (isTree) {

package/src/Components/Hoc/withPdfButtons.js

@@ -418,6 +418,9 @@ export default function withPdfButtons(WrappedComponent) {
 			},
 		];
 		_.each(buttons, (button) => {
+			if (!button) {
+				return; // guard against null/undefined
+			}
 			if (!_.find(additionalEditButtons, btn => button.key === btn.key)) { 
 				additionalEditButtons.push(button);
 			}

package/src/Components/Hoc/withPresetButtons.js

@@ -39,7 +39,7 @@ const presetButtons = [
 	DOWNLOAD,
 ];
 
-export default function withPresetButtons(WrappedComponent, isGrid = false) {
+export default function withPresetButtons(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
 		if (props.disablePresetButtons || props.alreadyHasWithPresetButtons) {
@@ -64,20 +64,21 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 			{
 				// extract and pass down
 				isEditor = false,
-				isTree = false,
+				isTree = false, // from withWindowedEditor or withSideEditor in Tree
 				canDeleteRootNode = false,
 				isSideEditor = false,
 				canEditorViewOnly = false,
+				canRecordBeAdded, // fn(selection) returns bool on if the current record(s) can be added
 				canRecordBeEdited, // fn(selection) returns bool on if the current record(s) can be edited
 				canRecordBeDeleted, // fn(selection) returns bool on if the current record(s) can be deleted
 				canRecordBeDuplicated, // fn(selection) returns bool on if the current record(s) can be duplicated
 				disableAdd = !isEditor,
 				disableEdit = !isEditor,
 				disableDelete = !isEditor,
-				disableView = !isGrid,
-				disableCopy = !isGrid,
+				disableView = isTree,
+				disableCopy = isTree,
 				disableDuplicate = !isEditor,
-				disablePrint = !isGrid,
+				disablePrint = isTree,
 				protectedValues, // records with these values cannot be edited or deleted
 				addDisplayMsg,
 				editDisplayMsg,
@@ -239,6 +240,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						};
 						icon = Plus;
 						if (isNoSelectorSelected() ||
+							(canRecordBeAdded && !canRecordBeAdded(selection)) ||
 							(isTree && isEmptySelection())
 						) {
 							isDisabled = true;
@@ -434,6 +436,18 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				}
 			},
 			onUploadDownload = () => {
+				const onUploadDecorator = async () => {
+					if (onUpload) {
+						await onUpload();
+					}
+					if (Repository && !Repository.isDestroyed) {
+						if (Repository.loadRootNodes) {
+							await Repository.loadRootNodes(1);
+						} else {
+							await Repository.reload();
+						}
+					}
+				};
 				showModal({
 					body: <UploadsDownloadsWindow
 								reference="uploadsDownloads"
@@ -442,7 +456,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 								columnsConfig={props.columnsConfig}
 								uploadHeaders={uploadHeaders}
 								uploadParams={uploadParams}
-								onUpload={onUpload}
+								onUpload={onUploadDecorator}
 								downloadHeaders={downloadHeaders}
 								downloadParams={downloadParams}
 							/>,