@onehat/ui 0.4.107 → 0.4.109

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.107",
+	"version": "0.4.109",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Container/Container.js

@@ -424,6 +424,8 @@ function Container(props) {
 
 	componentProps._panel.isCollapsible = false;
 	componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+	componentProps.isCollapsible = false;
+	componentProps.isDisabled = isDisabled || isComponentsDisabled;
 	componentProps.onLayout = debouncedOnLayout;
 	centerComponent = cloneElement(center, componentProps);
 	if (north) {
@@ -432,9 +434,11 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (north.props.className || '');
+		componentProps.isDisabled = !!north.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (north.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
-			if (height && height !== northHeight) {
+			if (height && height !== getNorthHeight()) {
 				setNorthHeight(height);
 			}
 		};
@@ -453,6 +457,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = VERTICAL;
 		componentProps._panel.isCollapsed = getNorthIsCollapsed();
 		componentProps._panel.setIsCollapsed = setNorthIsCollapsed;
+		componentProps.collapseDirection = VERTICAL;
+		componentProps.isCollapsed = getNorthIsCollapsed();
+		componentProps.setIsCollapsed = setNorthIsCollapsed;
 		if (isWeb && northIsResizable) {
 			northSplitter = <Splitter
 								mode={VERTICAL}
@@ -470,6 +477,8 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (south.props.className || '');
+		componentProps.isDisabled = !!south.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (south.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== getSouthHeight()) {
@@ -491,6 +500,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = VERTICAL;
 		componentProps._panel.isCollapsed = getSouthIsCollapsed();
 		componentProps._panel.setIsCollapsed = setSouthIsCollapsed;
+		componentProps.collapseDirection = VERTICAL;
+		componentProps.isCollapsed = getSouthIsCollapsed();
+		componentProps.setIsCollapsed = setSouthIsCollapsed;
 		if (isWeb && southIsResizable) {
 			southSplitter = <Splitter
 								mode={VERTICAL}
@@ -508,6 +520,8 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (east.props.className || '');
+		componentProps.isDisabled = !!east.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (east.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getEastWidth()) {
@@ -529,6 +543,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = HORIZONTAL;
 		componentProps._panel.isCollapsed = getEastIsCollapsed();
 		componentProps._panel.setIsCollapsed = setEastIsCollapsed;
+		componentProps.collapseDirection = HORIZONTAL;
+		componentProps.isCollapsed = getEastIsCollapsed();
+		componentProps.setIsCollapsed = setEastIsCollapsed;
 		if (isWeb && eastIsResizable) {
 			eastSplitter = <Splitter
 								mode={HORIZONTAL}
@@ -546,6 +563,8 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (west.props.className || '');
+		componentProps.isDisabled = !!west.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (west.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getWestWidth()) {
@@ -567,6 +586,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = HORIZONTAL;
 		componentProps._panel.isCollapsed = getWestIsCollapsed();
 		componentProps._panel.setIsCollapsed = setWestIsCollapsed;
+		componentProps.collapseDirection = HORIZONTAL;
+		componentProps.isCollapsed = getWestIsCollapsed();
+		componentProps.setIsCollapsed = setWestIsCollapsed;
 		if (isWeb && westIsResizable) {
 			westSplitter = <Splitter
 								mode={HORIZONTAL}

package/src/Components/Form/Field/Tag/Tag.js

@@ -320,7 +320,7 @@ function TagComponent(props) {
 						/>;
 			}
 			switch (items.length) {
-				case 1: height = 250; break;
+				case 1: height = 300; break;
 				case 2: height = 400; break;
 				default: height = 600; break;
 			}

package/src/Components/Form/Form.js

@@ -321,7 +321,11 @@ function Form(props) {
 						type = 'Text';
 					}
 				}
-				const isCombo = type?.match && type.match(/Combo/);
+				const
+					Element = getComponentFromType(type),
+					shouldHideFieldUi = type === 'Hidden',
+					isCombo = type?.match && type.match(/Combo/);
+				
 				if (config.hasOwnProperty('autoLoad')) {
 					editorTypeProps.autoLoad = config.autoLoad;
 				} else {
@@ -335,9 +339,8 @@ function Form(props) {
 						editorTypeProps.showXButton = true;
 					}
 				}
-				const Element = getComponentFromType(type);
 
-				if (isEditorViewOnly || !isEditable) {
+				if ((isEditorViewOnly || !isEditable) && !shouldHideFieldUi) {
 					let value = null;
 					if (renderer) {
 						value = renderer(record);
@@ -483,6 +486,9 @@ function Form(props) {
 														{...dynamicProps}
 														className={elementClassName}
 													/>;
+										if (shouldHideFieldUi) {
+											return element;
+										}
 
 										const dirtyIcon = isDirty && !disableDirtyIcon ? 
 															<Icon
@@ -532,6 +538,7 @@ function Form(props) {
 					isEditable = true,
 					isEditingEnabledInPlainEditor,
 					label,
+					disableLabel = false,
 					labelWidth,
 					items,
 					onChange: onEditorChange,
@@ -588,7 +595,11 @@ function Form(props) {
 					type = 'Text';
 				}
 			}
-			const isCombo = type?.match && type.match(/Combo/);
+			const
+				Element = getComponentFromType(type),
+				shouldHideFieldUi = type === 'Hidden',
+				isCombo = type?.match && type.match(/Combo/);
+			
 			if (item.hasOwnProperty('autoLoad')) {
 				editorTypeProps.autoLoad = item.autoLoad;
 			} else {
@@ -602,7 +613,6 @@ function Form(props) {
 					editorTypeProps.showXButton = true;
 				}
 			}
-			const Element = getComponentFromType(type);
 			
 			if (inArray(type, ['Column', 'Row', 'FieldSet'])) {
 				if (_.isEmpty(items)) {
@@ -676,7 +686,7 @@ function Form(props) {
 				label = propertyDef.title;
 			}
 
-			if (isEditorViewOnly || !isEditable) {
+			if ((isEditorViewOnly || !isEditable) && !shouldHideFieldUi) {
 				let value = null;
 				if (isSingle) {
 					value = record?.properties?.[name]?.displayValue || null;
@@ -713,7 +723,10 @@ function Form(props) {
 									{...viewerTypeProps}
 									className={elementClassName}
 								/>;
-				if (!disableLabels && label) {
+				if (shouldHideFieldUi) {
+					return null;
+				}
+				if (!disableLabels && !disableLabel && label) {
 					const style = {};
 					if (defaults?.labelWidth) {
 						style.width = defaults.labelWidth;
@@ -846,6 +859,9 @@ function Form(props) {
 												{...dynamicProps}
 												className={elementClassName}
 											/>;
+							if (shouldHideFieldUi) {
+								return element;
+							}
 							let message = null;
 							if (error) {
 								message = error.message;
@@ -905,7 +921,7 @@ function Form(props) {
 								}
 							}
 							const labelToUse = dynamicProps.label || label;
-							if (!disableLabels && labelToUse && editorType !== EDITOR_TYPE__INLINE) {
+							if (!disableLabels && !disableLabel && labelToUse && editorType !== EDITOR_TYPE__INLINE) {
 								const style = {};
 								if (defaults?.labelWidth) {
 									style.width = defaults.labelWidth;
@@ -933,7 +949,7 @@ function Form(props) {
 													{element}
 												</VStack>;
 								}
-							} else if (disableLabels && requiredIndicator) {
+							} else if ((disableLabels || disableLabel) && requiredIndicator) {
 								element = <HStack className="Form-HStack10 w-full">
 												{requiredIndicator}
 												{element}
@@ -1274,7 +1290,10 @@ function Form(props) {
 		showCancelBtn = false,
 		showSaveBtn = false,
 		showSubmitBtn = false,
-		isAddMode = getEditorMode() === EDITOR_MODE__ADD;
+		isAddMode = getEditorMode() === EDITOR_MODE__ADD,
+		isEditableMode =
+			getEditorMode() === EDITOR_MODE__ADD ||
+			getEditorMode() === EDITOR_MODE__EDIT;
 	if (containerWidth) { // we need to render this component twice in order to get the container width. Skip this on first render
 
 		// create editor
@@ -1363,7 +1382,7 @@ function Form(props) {
 		if (onDelete && getEditorMode() === EDITOR_MODE__EDIT && isSingle) {
 			showDeleteBtn = true;
 		}
-		if (!isEditorViewOnly && !hideResetButton) {
+		if (!isEditorViewOnly && isEditableMode && !hideResetButton) {
 			showResetBtn = true;
 		}
 		// determine whether we should show the close or cancel button
@@ -1394,7 +1413,7 @@ function Form(props) {
 				}
 			}
 		}
-		if (!isEditorViewOnly && onSave) {
+		if (!isEditorViewOnly && isEditableMode && onSave) {
 			showSaveBtn = true;
 		}
 		if (!!onSubmit) {

package/src/Components/Grid/GridRow.js

@@ -375,9 +375,11 @@ const GridRow = forwardRef((props, ref) => {
 					// TODO: incorporate better scrollbar formatting with
 					// tailwind plugin 'tailwind-scrollbar' (already installed, just not yet used here)
 
+					const isEmptyCellValue = _.isNil(value) || value === '';
+
 					let textClassName = clsx(
 						'GridRow-TextNative',
-						'self-center',
+						isEmptyCellValue ? 'self-stretch' : 'self-center', // if the cell value is empty, stretch the cell to be full height
 						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 						'[&::-webkit-scrollbar]:h-2',
 						'[&::-webkit-scrollbar-thumb]:bg-gray-300',
@@ -386,6 +388,14 @@ const GridRow = forwardRef((props, ref) => {
 						styles.GRID_CELL_CLASSNAME,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
+					const textStyle = {
+						// userSelect: 'none',
+						...colStyle,
+						...(isEmptyCellValue ? { // if the cell value is empty, stretch the cell to be full height
+							height: '100%',
+							display: 'block',
+						} : {}),
+					};
 					if (rowProps?._cell?.className) {
 						textClassName += ' ' + rowProps._cell.className;
 					}
@@ -395,16 +405,13 @@ const GridRow = forwardRef((props, ref) => {
 					return <TextNative
 								{...testProps('cell-' + config.fieldName)}
 								key={key}
-								style={{
-									// userSelect: 'none',
-									...colStyle,
-								}}
+								style={textStyle}
 								numberOfLines={1}
 								ellipsizeMode="head"
 								className={textClassName}
 								{...elementProps}
 								{...propsToPass}
-							>{value}</TextNative>;
+							>{isEmptyCellValue ? ' ' : value}</TextNative>;
 				});
 			} else {
 				// TODO: if 'columnsConfig' is an object, parse its contents

package/src/Components/Hoc/withEditor.js

@@ -36,6 +36,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				disableAdd = false,
 				disableEdit = false,
 				disableDelete = false,
+				enableMultiDelete = false, // deleting multiple records at once is opt-in only
 				disableDuplicate = false,
 				disableView = false,
 				useRemoteDuplicate = false, // call specific copyToNew function on server, rather than simple duplicate on client
@@ -441,7 +442,14 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					cb = args;
 				}
 				const selection = getSelection();
-				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
+				const hasTreeSelection = isTree || _.some(selection, (selected) => !!selected?.isTree);
+				if (
+					_.isEmpty(selection) ||
+					(_.isArray(selection) && (
+						selection[0]?.isDestroyed ||
+						(selection.length > 1 && (!enableMultiDelete || hasTreeSelection))
+					))
+				) {
 					return;
 				}
 				if (onBeforeDelete) {
@@ -461,11 +469,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				const
 					isSingle = selection.length === 1,
 					firstSelection = selection[0],
-					isTree = firstSelection?.isTree,
-					hasChildren = isTree ? firstSelection?.hasChildren : false,
+					isTreeNode = firstSelection?.isTree,
+					hasChildren = isTreeNode ? firstSelection?.hasChildren : false,
 					isPhantom = firstSelection?.isPhantom;
 
-				if (isSingle && isTree && hasChildren) {
+				if (isSingle && isTreeNode && hasChildren) {
 					alert({
 						title: 'Move up children?',
 						message: 'The node you have selected for deletion has children. ' + 
@@ -1022,6 +1030,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isEditor={true}
 					userCanEdit={userCanEdit}
 					userCanView={userCanView}
+					enableMultiDelete={enableMultiDelete}
 					disableAdd={disableAdd || isEditorDisabledByParent || isCrudBlockedByInheritedView}
 					disableEdit={disableEdit || isEditorDisabledByParent || isCrudBlockedByInheritedView}
 					disableDelete={disableDelete || isEditorDisabledByParent || isCrudBlockedByInheritedView}

package/src/Components/Hoc/withFilters.js

@@ -97,7 +97,7 @@ export default function withFilters(WrappedComponent) {
 					
 					let title, type;
 					if (propertyDef) {
-						title = propertyDef.title;
+						title = propertyDef.filterTitle || propertyDef.title;
 						type = propertyDef.filterType;
 					} else if (modelAncillaryFilters[field]) {
 						const ancillaryFilter = modelFilterTypes[field];
@@ -262,7 +262,7 @@ export default function withFilters(WrappedComponent) {
 						
 					if (!title) {
 						const propertyDef = Repository.getSchema().getPropertyDefinition(field);
-						title = propertyDef?.title;
+						title = propertyDef?.filterTitle || propertyDef?.title;
 					}
 
 					if (_.isString(filterType)) {
@@ -398,7 +398,10 @@ export default function withFilters(WrappedComponent) {
 
 						// basic property filter
 						const propertyDef = Repository.getSchema().getPropertyDefinition(filterField);
-						data.push([ filterField, propertyDef?.title ]);
+						if (propertyDef?.isFilteringDisabled) {
+							return;
+						}
+						data.push([ filterField, propertyDef?.filterTitle || propertyDef?.title ]);
 					});
 
 					// sort by title

package/src/Components/Hoc/withPdfButtons.js

@@ -62,9 +62,9 @@ export default function withPdfButtons(WrappedComponent) {
 			buildModalItems = () => {
 				// Build a cloned PDF item tree so we never mutate source items by reference.
 				const
-					itemsTouse = pdfItems || items,
+					itemsToUse = pdfItems || _.filter(items, (item) => item?.type !== 'Hidden'),
 					ancillaryItemsToUse = pdfAncillaryItems || ancillaryItems,
-					modalItems = _.compact(_.map(itemsTouse, (item, ix) => buildNextLayer(item, ix, columnDefaults)));
+					modalItems = _.compact(_.map(itemsToUse, (item, ix) => buildNextLayer(item, ix, columnDefaults)));
 
 				if (!_.isEmpty(ancillaryItemsToUse)) {
 					const
@@ -179,7 +179,7 @@ export default function withPdfButtons(WrappedComponent) {
 					type: 'Checkbox',
 					name,
 					title: resolvedTitle,
-					isEditable: false, // hack to force all checkboxes to use same render branch in Form
+					label: resolvedTitle,
 				};
 			},
 			buildValidator = () => {
@@ -228,6 +228,7 @@ export default function withPdfButtons(WrappedComponent) {
 								parent={self}
 								reference="chooseFieldsForm"
 								editorType={EDITOR_TYPE__PLAIN}
+								checkIsEditingDisabled={false /* hack so layout looks right */}
 								alert={alert}
 								columnDefaults={{
 									labelWidth: '100px',

package/src/Components/Hoc/withPresetButtons.js

@@ -75,6 +75,7 @@ export default function withPresetButtons(WrappedComponent) {
 				disableAdd = !isEditor,
 				disableEdit = !isEditor,
 				disableDelete = !isEditor,
+				enableMultiDelete = false,
 				disableView = isTree,
 				disableCopy = isTree,
 				disableDuplicate = !isEditor,
@@ -300,7 +301,7 @@ export default function withPresetButtons(WrappedComponent) {
 						icon = Trash;
 						if (isNoSelectorSelected() ||
 							isEmptySelection() ||
-							isMultiSelection() ||
+							(isMultiSelection() && (!enableMultiDelete || isTree)) ||
 							isProtectedValue() ||
 							(canRecordBeDeleted && !canRecordBeDeleted(selection))
 						) {
@@ -435,6 +436,10 @@ export default function withPresetButtons(WrappedComponent) {
 					showInfo('Copied to clipboard!');
 				}
 			},
+			getColumnsConfigForDownload = () => {
+				const activeColumnsConfig = localColumnsConfig.length ? localColumnsConfig : props.columnsConfig;
+				return _.filter(activeColumnsConfig, (config) => !config.isHidden);
+			},
 			onUploadDownload = () => {
 				const onUploadDecorator = async () => {
 					if (onUpload) {
@@ -453,7 +458,7 @@ export default function withPresetButtons(WrappedComponent) {
 								reference="uploadsDownloads"
 								onClose={hideModal}
 								Repository={Repository}
-								columnsConfig={props.columnsConfig}
+								columnsConfig={getColumnsConfigForDownload()}
 								uploadHeaders={uploadHeaders}
 								uploadParams={uploadParams}
 								onUpload={onUploadDecorator}
@@ -470,7 +475,7 @@ export default function withPresetButtons(WrappedComponent) {
 								onClose={hideModal}
 								isDownloadOnly={true}
 								Repository={Repository}
-								columnsConfig={props.columnsConfig}
+								columnsConfig={getColumnsConfigForDownload()}
 								downloadHeaders={downloadHeaders}
 								downloadParams={downloadParams}
 							/>,

package/src/Components/Layout/ScreenHeader.js

@@ -22,6 +22,7 @@ function ScreenHeader(props) {
 	const {
 			title,
 			icon,
+			additionalButtons,
 			info,
 			_info = {},
 			useModeIcons = false,
@@ -88,6 +89,7 @@ function ScreenHeader(props) {
 							tooltip="To side editor"
 						/>
 					</>}
+				{additionalButtons}
 				{info && 
 					<IconButton
 						{...testProps('infoBtn')}

package/src/Components/Viewer/Viewer.js

@@ -107,6 +107,14 @@ function Viewer(props) {
 		}),
 		isSideEditor = editorType === EDITOR_TYPE__SIDE,
 		isSmartEditor = editorType === EDITOR_TYPE__SMART,
+		parentEditorModeRaw = (getEditorMode && getEditorMode()) || editorMode || null,
+		parentEditorMode = parentEditorModeRaw === EDITOR_MODE__ADD
+			? EDITOR_MODE__EDIT
+			: parentEditorModeRaw,
+		normalizedParentEditorMode =
+			parentEditorMode === EDITOR_MODE__EDIT || parentEditorMode === EDITOR_MODE__VIEW
+				? parentEditorMode
+				: null,
 		styles = UiGlobals.styles,
 		flex = props.flex || 1,
 		buildFromItems = () => {
@@ -125,6 +133,7 @@ function Viewer(props) {
 					title,
 					name,
 					label,
+					disableLabel = false,
 					items,
 					useSelectorId = false,
 					isHidden = false,
@@ -160,7 +169,11 @@ function Viewer(props) {
 					type = 'Text';
 				}
 			}
-			const isCombo = type?.match && type.match(/Combo/);
+			const
+				Element = getComponentFromType(type),
+				shouldHideFieldUi = type === 'Hidden',
+				isCombo = type?.match && type.match(/Combo/);
+			
 			if (item.hasOwnProperty('autoLoad')) {
 				viewerTypeProps.autoLoad = item.autoLoad;
 			} else {
@@ -175,7 +188,6 @@ function Viewer(props) {
 			if (type?.match(/(Grid|GridEditor)$/)) {
 				viewerTypeProps.canEditorViewOnly = true;
 			}
-			const Element = getComponentFromType(type);
 
 			if (inArray(type, ['Column', 'Row', 'FieldSet'])) {
 				if (_.isEmpty(items)) {
@@ -264,6 +276,10 @@ function Viewer(props) {
 						>{children}</Element>;
 			}
 
+			if (shouldHideFieldUi) {
+				return null;
+			}
+
 			if (!label && Repository && propertyDef?.title) {
 				label = propertyDef.title;
 			}
@@ -334,7 +350,7 @@ function Viewer(props) {
 							</HStack>;
 			}
 
-			if (!disableLabels && label) {
+			if (!disableLabels && !disableLabel && label) {
 				const style = {};
 				if (defaults?.labelWidth) {
 					style.width = defaults.labelWidth;
@@ -359,14 +375,6 @@ function Viewer(props) {
 		buildAncillary = () => {
 			const
 				validAncillaryItems = _.filter(ancillaryItems, (item) => !!item), // filter out any null/undefined items
-				parentEditorModeRaw = (getEditorMode && getEditorMode()) || editorMode || null,
-				parentEditorMode = parentEditorModeRaw === EDITOR_MODE__ADD
-					? EDITOR_MODE__EDIT
-					: parentEditorModeRaw,
-				normalizedParentEditorMode =
-					parentEditorMode === EDITOR_MODE__EDIT || parentEditorMode === EDITOR_MODE__VIEW
-						? parentEditorMode
-						: null,
 				components = [];
 			setAncillaryButtons([]);
 			if (validAncillaryItems.length) {
@@ -584,7 +592,7 @@ function Viewer(props) {
 
 						<Toolbar className="justify-end">
 							<HStack className="flex-1 items-center">
-									<Text className="text-[20px] ml-1 text-grey-500">{isEditorModeControlledByParent ? 'View Mode (Inherited)' : 'View Mode'}</Text>
+									<Text className="text-[20px] ml-1 text-grey-500">{isEditorModeControlledByParent && normalizedParentEditorMode === EDITOR_MODE__VIEW ? 'View Mode (Inherited)' : 'View Mode'}</Text>
 							</HStack>
 							{onEditMode && (!canUser || canUser(EDIT)) && 
 								<Button

package/src/Components/Window/UploadsDownloadsWindow.js

@@ -18,6 +18,11 @@ import Upload from '../Icons/Upload';
 import Cookies from 'js-cookie';
 import _ from 'lodash';
 
+const
+	MODES__GRID = 'grid',
+	MODES__BATCH = 'batch',
+	MODES__TEMPLATE = 'template';
+
 function UploadsDownloadsWindow(props) {
 	const {
 			Repository,
@@ -37,8 +42,8 @@ function UploadsDownloadsWindow(props) {
 			showInfo,
 		} = props,
 		[importFile, setImportFile] = useState(null),
-		[width, height] = useAdjustedWindowSize(400, 450),
-		onDownload = (isTemplate = false) => {
+		[width, height] = useAdjustedWindowSize(400, 550),
+		onDownload = (mode) => {
 
 			const win = window.open('');
 			win.document.write('<html><head><title>Downloading</title></head><body><img style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);" src="' + 
@@ -63,7 +68,7 @@ function UploadsDownloadsWindow(props) {
 						columns,
 						order,
 						model,
-						isTemplate,
+						mode,
 						...Repository._params,
 						...downloadParams,
 					}),
@@ -79,9 +84,6 @@ function UploadsDownloadsWindow(props) {
 				}
 			}, 1000);
 		},
-		onDownloadTemplate = () => {
-			onDownload(true);
-		},
 		onUploadLocal = async () => {
 			const
 				url = Repository.api.baseURL + Repository.name + '/uploadBatch',
@@ -130,24 +132,40 @@ function UploadsDownloadsWindow(props) {
 		const items = [
 			{
 				type: 'DisplayField',
-				text: 'Download an Excel file of the current grid contents.',
+				text: "Get the current grid's contents as an Excel file.",
+			},
+			{
+				type: 'Button',
+				text: 'Get as Excel',
+				isEditable: false,
+				icon: Excel,
+				_icon: {
+					size: 'md',
+				},
+				onPress: () => onDownload(MODES__GRID),
+				className: 'mb-5',
+			},
+			{
+				type: 'DisplayField',
+				text: "Batch download the current grid's records,\n"
+					+ "so they can be edited and re-uploaded.",
 			},
 			{
 				type: 'Button',
-				text: 'Download',
+				text: 'Batch Download',
 				isEditable: false,
 				icon: Excel,
 				_icon: {
 					size: 'md',
 				},
-				onPress: () => onDownload(),
+				onPress: () => onDownload(MODES__BATCH),
 				className: 'mb-5',
 			},
 		];
 		if (!isDownloadOnly) {
 			items.push({
 				type: 'DisplayField',
-				text: 'Upload an Excel file to the current grid.',
+				text: 'Batch upload an Excel file to the current grid.',
 			});
 			items.push({
 				type: 'File',
@@ -161,7 +179,7 @@ function UploadsDownloadsWindow(props) {
 				items: [
 					{
 						type: 'Button',
-						text: 'Upload',
+						text: 'Batch Upload',
 						isEditable: false,
 						icon: Upload,
 						_icon: {
@@ -175,7 +193,7 @@ function UploadsDownloadsWindow(props) {
 						text: 'Get Template',
 						icon: Download,
 						isEditable: false,
-						onPress: onDownloadTemplate,
+						onPress: () => onDownload(MODES__TEMPLATE),
 					},
 
 				],