@onehat/ui 0.4.62 → 0.4.65

package/package.json

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

package/src/Components/Container/ContainerColumn.js

@@ -0,0 +1,21 @@
+import {
+	VStack,
+} from '@project-components/Gluestack';
+import _ from 'lodash';
+
+// This component allows us to stack multiple children in a Container slot (e.g. east)
+// such that the ContainerColumn can be passed props like isResizable, 
+// which the Container will translate into classNames for the VStack component.
+
+export default function ContainerColumn(props) {
+	let className = `
+		ContainerColumn
+	`;
+	if (props.className) {
+		className += ` ${props.className}`;
+	}
+	
+	return <VStack className={className}>
+				{props.children}
+			</VStack>;
+}

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

@@ -767,6 +767,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 					newEntityDisplayProperty={newEntityDisplayProperty}
 					disablePresetButtons={!isEditor}
 					alternateRowBackgrounds={false}
+					showSelectHandle={false}
 					onChangeSelection={(selection) => {
 
 						if (Repository && selection[0]?.isPhantom) {

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

@@ -46,12 +46,12 @@ export function JsonElement(props) {
 		${testID}
 	`;
 	if (props.className) {
-		className += ' ' + props.className;
+		className += ' ' + propsToPass.className;
 	}
 	// if (UiGlobals.mode === UI_MODE_WEB) {
 		const src = value ? JSON.parse(value) : {};
 		assembledComponents = 
-			<HStack style={props.style} className={className}>
+			<HStack style={propsToPass.style} className={className}>
 				<JsonEditor
 					width="100%"
 					editable={!isViewOnly}
@@ -61,7 +61,7 @@ export function JsonElement(props) {
 					onEdit={(obj) => {
 						setValue(JSON.stringify(obj.updated_src));
 					}}
-					{...props}
+					{...propsToPass}
 				/>
 			</HStack>;
 	// }

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

@@ -61,8 +61,8 @@ function TagComponent(props) {
 				await repository.waitUntilDoneLoading();
 			}
 			let record = repository.getById(id); // first try to get from entities in memory
-			if (!record && repository.getSingleEntityFromServer) {
-				record = await repository.getSingleEntityFromServer(id);
+			if (!record && repository.loadOneAdditionalEntity) {
+				record = await repository.loadOneAdditionalEntity(id);
 			}
 
 			if (!record) {

package/src/Components/Form/Form.js

@@ -83,6 +83,7 @@ function Form(props) {
 			editorType = EDITOR_TYPE__WINDOWED, // EDITOR_TYPE__INLINE | EDITOR_TYPE__WINDOWED | EDITOR_TYPE__SIDE | EDITOR_TYPE__SMART | EDITOR_TYPE__PLAIN
 			startingValues = {},
 			items = [], // Columns, FieldSets, Fields, etc to define the form
+			isItemsCustomLayout = false,
 			ancillaryItems = [], // additional items which are not controllable form elements, but should appear in the form
 			showAncillaryButtons = false,
 			columnDefaults = {}, // defaults for each Column defined in items (above)
@@ -1187,8 +1188,8 @@ function Form(props) {
 			formComponents = buildFromItems();
 			const formAncillaryComponents = buildAncillary();
 			editor = <>
-						{containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD ? <HStack className="Form-formComponents-HStack p-4 gap-4 justify-center">{formComponents}</HStack> : null}
-						{containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD ? <VStack className="Form-formComponents-VStack p-4">{formComponents}</VStack> : null}
+						{containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD && !isItemsCustomLayout ? <HStack className="Form-formComponents-HStack p-4 gap-4 justify-center">{formComponents}</HStack> : null}
+						{containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD || isItemsCustomLayout ? <VStack className="Form-formComponents-VStack p-4">{formComponents}</VStack> : null}
 						{formAncillaryComponents.length ? <VStack className="Form-AncillaryComponents m-2 pt-4 px-2">{formAncillaryComponents}</VStack> : null}
 					</>;
 

package/src/Components/Grid/Grid.js

@@ -132,6 +132,7 @@ function GridComponent(props) {
 			getExpandedRowContent,
 			showHeaders = true,
 			showHovers = true,
+			showSelectHandle = true,
 			canColumnsSort = true,
 			canColumnsReorder = true,
 			canColumnsResize = true,
@@ -424,10 +425,10 @@ function GridComponent(props) {
 									} else {
 										let canDoEdit = false,
 											canDoView = false;
-										if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection))) {
+										if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection)) && !props.disableEdit) {
 											canDoEdit = true;
 										} else
-										if (onView && canUser && canUser(VIEW)) {
+										if (onView && canUser && canUser(VIEW) && !props.disableView) {
 											canDoView = true;
 										}
 
@@ -493,6 +494,7 @@ function GridComponent(props) {
 												isInlineEditorShown={isInlineEditorShown}
 												areRowsDragSource={areRowsDragSource}
 												showColumnsSelector={showColumnsSelector}
+												showSelectHandle={showSelectHandle}
 											/>;
 							if (showRowExpander) {
 								// align the header row to content rows by adding a spacer that matches the width of the Grid-rowExpander-expandBtn
@@ -570,6 +572,7 @@ function GridComponent(props) {
 									isSelected={isSelected}
 									isHovered={hovered}
 									showHovers={showHovers}
+									showSelectHandle={showSelectHandle}
 									index={index}
 									alternatingInterval={alternatingInterval}
 									alternateRowBackgrounds={alternateRowBackgrounds}

package/src/Components/Grid/GridHeaderRow.js

@@ -20,6 +20,7 @@ import UiGlobals from '../../UiGlobals.js';
 import useBlocking from '../../Hooks/useBlocking.js';
 import testProps from '../../Functions/testProps.js';
 import AngleRight from '../Icons/AngleRight.js';
+import ArrowPointer from '../Icons/ArrowPointer.js';
 import HeaderReorderHandle from './HeaderReorderHandle.js';
 import HeaderResizeHandle from './HeaderResizeHandle.js';
 import HeaderColumnSelectorHandle from './HeaderColumnSelectorHandle.js';
@@ -46,6 +47,7 @@ export default function GridHeaderRow(props) {
 			isInlineEditorShown,
 			areRowsDragSource,
 			showColumnsSelector,
+			showSelectHandle,
 		} = props,
 		styles = UiGlobals.styles,
 		sortFn = Repository && Repository.getSortFn(),
@@ -462,6 +464,14 @@ 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={ArrowPointer} className={`ArrowPointer w-[20px] h-[20px] text-[#aaa]`} />
+					</Box>);
+				}
 				if (areRowsDragSource) {
 					headerColumns.unshift(<Box
 						key="spacer"

package/src/Components/Grid/GridRow.js

@@ -16,6 +16,7 @@ import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
 import testProps from '../../Functions/testProps.js';
 import AngleRight from '../Icons/AngleRight.js';
 import RowDragHandle from './RowDragHandle.js';
+import RowSelectHandle from './RowSelectHandle.js';
 import _ from 'lodash';
 
 // This was broken out from Grid simply so we can memoize it
@@ -27,6 +28,7 @@ function GridRow(props) {
 			fields,
 			rowProps,
 			hideNavColumn,
+			showSelectHandle,
 			isSelected,
 			isHovered,
 			bg,
@@ -265,6 +267,8 @@ function GridRow(props) {
 
 		let rowContents = <>
 							{(isDragSource || isDraggable) && <RowDragHandle />}
+							{showSelectHandle && <RowSelectHandle />}
+							
 							{isPhantom && 
 								<Box
 									className={`

package/src/Components/Grid/RowDragHandle.js

@@ -5,11 +5,10 @@ import {
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
-function RowDragHandle(props) {
-	return <VStack
-				style={styles.ewResize}
-				className="HeaderReorderHandle bg-grey-100 w-[3px] items-center justify-center"
-			>
+function RowDragHandle(props) {	return <VStack
+			style={styles.ewResize}
+			className="RowDragHandle bg-grey-100 w-[3px] items-center justify-center select-none"
+		>
 				<Icon
 					as={GripVertical}
 					size="xs"

package/src/Components/Grid/RowSelectHandle.js

@@ -0,0 +1,18 @@
+import {
+	Icon,
+	VStack,
+} from '@project-components/Gluestack';
+import ArrowPointer from '../Icons/ArrowPointer.js';
+
+function RowSelectHandle(props) {
+	return <VStack
+				className="RowSelectHandle w-[40px] px-2 items-center justify-center select-none cursor-grab"
+			>
+				<Icon
+					as={ArrowPointer}
+					size="xs"
+					className="w-[20px] h-[20px] text-[#ddd]" />
+			</VStack>;
+}
+
+export default RowSelectHandle;

package/src/Components/Hoc/withEditor.js

@@ -29,6 +29,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				userCanEdit = true, // not permissions, but capability
 				userCanView = true,
 				canEditorViewOnly = false, // whether the editor can *ever* change state out of 'View' mode
+				canProceedWithCrud, // fn returns bool on if the CRUD operation can proceed
 				disableAdd = false,
 				disableEdit = false,
 				disableDelete = false,
@@ -153,6 +154,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(ADD);
 					return;
 				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
 
 				const selection = getSelection();
 				let addValues = values;
@@ -252,6 +256,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(EDIT);
 					return;
 				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
 				const selection = getSelection();
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
@@ -271,6 +278,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DELETE);
 					return;
 				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
 				let cb = null;
 				if (_.isFunction(args)) {
 					cb = args;
@@ -368,6 +378,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(VIEW);
 					return;
 				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
 				if (editorType === EDITOR_TYPE__INLINE) {
 					alert('Cannot view in inline editor.');
 					return; // inline editor doesn't have a view mode
@@ -395,6 +408,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DUPLICATE);
 					return;
 				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
 
 				const selection = getSelection();
 				if (selection.length !== 1) {

package/src/Components/Hoc/withPresetButtons.js

@@ -8,6 +8,7 @@ import {
 	DUPLICATE,
 	PRINT,
 	UPLOAD_DOWNLOAD,
+	DOWNLOAD,
 } from '../../Constants/Commands.js';
 import Clipboard from '../Icons/Clipboard.js';
 import Duplicate from '../Icons/Duplicate.js';
@@ -17,6 +18,7 @@ import Trash from '../Icons/Trash.js';
 import Plus from '../Icons/Plus.js';
 import Print from '../Icons/Print.js';
 import UploadDownload from '../Icons/UploadDownload.js';
+import Download from '../Icons/Download.js';
 import inArray from '../../Functions/inArray.js';
 import UploadsDownloadsWindow from '../Window/UploadsDownloadsWindow.js';
 import _ from 'lodash';
@@ -33,6 +35,7 @@ const presetButtons = [
 	DUPLICATE,
 	// PRINT,
 	UPLOAD_DOWNLOAD,
+	DOWNLOAD,
 ];
 
 export default function withPresetButtons(WrappedComponent, isGrid = false) {
@@ -48,6 +51,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				contextMenuItems = [],
 				additionalToolbarButtons = [],
 				useUploadDownload = false,
+				useDownload = false,
 				uploadHeaders,
 				uploadParams,
 				onUpload,
@@ -57,7 +61,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				canRecordBeEdited,
 				canRecordBeDeleted,
 				canRecordBeDuplicated,
-				canProceedWithCrud, // fn returns bool on if the CRUD operation can proceed
 				...propsToPass
 			} = props,
 			{
@@ -177,6 +180,13 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							isDisabled = true;
 						}
 						break;
+					case DOWNLOAD:
+						if (!useDownload) {
+							isDisabled = true;
+						} else if (canUser && !(canUser(DOWNLOAD) || canUser(UPLOAD_DOWNLOAD))) { // check Permissions
+							isDisabled = true;
+						}
+						break;
 					default:
 				}
 				return isDisabled;
@@ -211,9 +221,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'addBtn';
 						text = 'Add';
 						handler = (parent, e) => {
-							if (canProceedWithCrud && !canProceedWithCrud()) {
-								return;
-							}
 							onAdd();
 						};
 						icon = Plus;
@@ -227,9 +234,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'editBtn';
 						text = 'Edit';
 						handler = (parent, e) => {
-							if (canProceedWithCrud && !canProceedWithCrud()) {
-								return;
-							}
 							onEdit();
 						};
 						icon = Edit;
@@ -247,9 +251,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						text = 'Delete';
 						handler = onDelete;
 						handler = (parent, e) => {
-							if (canProceedWithCrud && !canProceedWithCrud()) {
-								return;
-							}
 							onDelete();
 						};
 						icon = Trash;
@@ -297,9 +298,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'duplicateBtn';
 						text = 'Duplicate';
 						handler = (parent, e) => {
-							if (canProceedWithCrud && !canProceedWithCrud()) {
-								return;
-							}
 							onDuplicate();
 						};
 						icon = Duplicate;
@@ -323,6 +321,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						handler = (parent, e) => onUploadDownload();
 						icon = UploadDownload;
 						break;
+					case DOWNLOAD:
+						key = 'downloadBtn';
+						text = 'Download';
+						handler = (parent, e) => onDownload();
+						icon = Download;
+						break;
 					default:
 				}
 				return {
@@ -397,6 +401,20 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 							/>,
 					onCancel: hideModal,
 				});
+			},
+			onDownload = () => {
+				showModal({
+					body: <UploadsDownloadsWindow
+								reference="downloads"
+								onClose={hideModal}
+								isDownloadOnly={true}
+								Repository={Repository}
+								columnsConfig={props.columnsConfig}
+								downloadHeaders={downloadHeaders}
+								downloadParams={downloadParams}
+							/>,
+					onCancel: hideModal,
+				});
 			};
 			// onPrint = () => {
 			// 	debugger;

package/src/Components/Icons/ArrowPointer.js

@@ -0,0 +1,11 @@
+import { createIcon } from "../Gluestack/icon";
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import Svg, { Path } from "react-native-svg"
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 320 512',
+	path: <Path d="M0 55.2V426c0 12.2 9.9 22 22 22 6.3 0 12.4-2.7 16.6-7.5l82.6-94.5 58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320h118.1c12.2 0 22.1-9.9 22.1-22.1 0-6.3-2.7-12.3-7.4-16.5L38.6 37.9c-4.3-3.8-9.7-5.9-15.4-5.9C10.4 32 0 42.4 0 55.2z" />,
+});
+
+export default SvgComponent

package/src/Components/Layout/AsyncOperation.js

@@ -23,6 +23,11 @@ import Panel from '../Panel/Panel.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import _ from 'lodash';
 
+const
+	INITIATE = 'INITIATE',
+	PROCESSING = 'PROCESSING',
+	RESULTS = 'RESULTS';
+
 // NOTE: This component assumes you have an AppSlice, that has 
 // an 'operationsInProgress' state var and a 'setOperationsInProgress' action.
 
@@ -37,6 +42,7 @@ function AsyncOperation(props) {
 			Repository,
 			formItems = [],
 			formStartingValues = {},
+			_form = {},
 			getProgressUpdates = false,
 			parseProgress, // optional fn, accepts 'response' as arg and returns progress string
 			progressStuckThreshold = null, // e.g. 3, if left blank, doesn't check for stuck state
@@ -49,10 +55,25 @@ function AsyncOperation(props) {
 			alert,
 		} = props,
 		dispatch = useDispatch(),
+		isValid = useRef(true),
+		setIsValid = (valid) => {
+			isValid.current = valid;
+		},
+		getIsValid = () => {
+			return isValid.current;
+		},
+		mode = useRef(INITIATE),
+		setMode = (newMode) => {
+			mode.current = newMode;
+		},
+		getMode = () => {
+			return mode.current;
+		},
 		initiate = async () => {
 
 			clearProgress();
-			setFooter(getFooter('processing'));
+			setMode(PROCESSING);
+			setFooter(getFooter());
 			setIsInProgress(true);
 			
 			const
@@ -85,17 +106,18 @@ function AsyncOperation(props) {
 			}
 			showResults(results);
 		},
-		getFooter = (which = 'initiate') => {
+		getFooter = (which = getMode()) => {
 			switch(which) {
-				case 'initiate':
+				case INITIATE:
 					return <Toolbar>
 								<Button
 									text="Start"
 									rightIcon={ChevronRight}
 									onPress={() => initiate()}
+									isDisabled={!getIsValid()}
 								/>
 							</Toolbar>;
-				case 'processing':
+				case PROCESSING:
 					return <Toolbar>
 								<Button
 									text="Please wait"
@@ -103,7 +125,7 @@ function AsyncOperation(props) {
 									variant="link"
 								/>
 							</Toolbar>;
-				case 'results':
+				case RESULTS:
 					return <Toolbar>
 								<Button
 									text="Reset"
@@ -152,7 +174,8 @@ function AsyncOperation(props) {
 		},
 		showResults = (results) => {
 			setCurrentTab(1);
-			setFooter(getFooter('results'));
+			setMode(RESULTS);
+			setFooter(getFooter());
 			setResults(results);
 			getProgress();
 		},
@@ -206,6 +229,7 @@ function AsyncOperation(props) {
 		},
 		resetToInitialState = () => {
 			setCurrentTab(0);
+			setMode(INITIATE);
 			setFooter(getFooter());
 			clearProgress();
 		},
@@ -227,6 +251,10 @@ function AsyncOperation(props) {
 				},
 			});
 		},
+		onValidityChange = (isValid) => {
+			setIsValid(isValid);
+			setFooter(getFooter());
+		},
 		unchangedProgressCount = getUnchangedProgressCount();
 
 	useEffect(() => {
@@ -255,6 +283,8 @@ function AsyncOperation(props) {
 										disableFooter={true}
 										items={formItems}
 										startingValues={formStartingValues}
+										onValidityChange={onValidityChange}
+										{..._form}
 									/>,
 						},
 						{

package/src/Components/Report/Report.js

@@ -3,6 +3,7 @@ import {
 	Box,
 	HStack,
 	Icon,
+	Pressable,
 	Text,
 	VStack,
 	VStackNative,
@@ -17,6 +18,7 @@ import {
 	REPORT_TYPES__PDF,
 } from '../../Constants/ReportTypes.js';
 import Form from '../Form/Form.js';
+import IconButton from '../Buttons/IconButton.js';
 import withComponent from '../Hoc/withComponent.js';
 import withAlert from '../Hoc/withAlert.js';
 import testProps from '../../Functions/testProps.js';
@@ -37,9 +39,19 @@ function Report(props) {
 			disablePdf = false,
 			disableExcel = false,
 			showReportHeaders = true,
+			isQuickReport = false,
+			quickReportData = {},
 			alert,
 		} = props,
 		buttons = [],
+		onPressQuickReport = () => {
+			downloadReport({
+				reportId,
+				reportType: REPORT_TYPES__EXCEL,
+				showReportHeaders,
+				data: quickReportData,
+			});
+		},
 		downloadReport = (args) => {
 			getReport(args);
 			alert('Download started');
@@ -59,6 +71,48 @@ function Report(props) {
 		icon = <Icon as={icon} {...propsIcon} />;
 	}
 
+	if (isQuickReport) {
+		let className = `
+			Report
+			max-w-[100px]
+			m-2
+		`;
+		if (props.className) {
+			className += ' ' + props.className;
+		}
+		return <VStackNative
+					{...testProps('QuickReport-' + reportId)}
+					className={className}
+				>
+					<Pressable
+						onPress={onPressQuickReport}
+						className={`
+							flex-1
+							items-center
+							justify-center
+							flex-col
+							bg-white
+							p-3
+							rounded-lg
+							border
+							border-primary-300
+							hover:bg-primary-300
+						`}
+					>
+						{icon}
+						<Text
+							className={`
+								text-black
+								text-center
+								text-[17px]
+								leading-tight
+								mt-2
+							`}
+						>{title}</Text>
+					</Pressable>
+				</VStackNative>;
+	}
+
 	if (!disableExcel) {
 		buttons.push({
 			...testProps('excelBtn'),

package/src/Components/Window/UploadsDownloadsWindow.js

@@ -25,6 +25,7 @@ function UploadsDownloadsWindow(props) {
 			downloadHeaders,
 			uploadParams = {},
 			downloadParams = {},
+			isDownloadOnly = false,
 			onUpload,
 
 			// withComponent
@@ -124,6 +125,61 @@ function UploadsDownloadsWindow(props) {
 				}
 			}
 		};
+
+		const items = [
+			{
+				type: 'DisplayField',
+				text: 'Download an Excel file of the current grid contents.',
+			},
+			{
+				type: 'Button',
+				text: 'Download',
+				isEditable: false,
+				icon: Excel,
+				_icon: {
+					size: 'md',
+				},
+				onPress: () => onDownload(),
+				className: 'mb-5',
+			},
+		];
+		if (!isDownloadOnly) {
+			items.push({
+				type: 'DisplayField',
+				text: 'Upload an Excel file to the current grid.',
+			});
+			items.push({
+				type: 'File',
+				name: 'file',
+				onChangeValue: setImportFile,
+				accept: '.xlsx',
+			});
+			items.push({
+				type: 'Row',
+				className: 'mt-2',
+				items: [
+					{
+						type: 'Button',
+						text: 'Upload',
+						isEditable: false,
+						icon: Upload,
+						_icon: {
+							size: 'md',
+						},
+						isDisabled: !importFile,
+						onPress: onUploadLocal,
+					},
+					{
+						type: 'Button',
+						text: 'Get Template',
+						icon: Download,
+						isEditable: false,
+						onPress: onDownloadTemplate,
+					},
+
+				],
+			});
+		}
 	
 	return <Panel
 				{...props}
@@ -151,58 +207,7 @@ function UploadsDownloadsWindow(props) {
 							"type": "Column",
 							"flex": 1,
 							"defaults": {},
-							"items": [
-								{
-									type: 'DisplayField',
-									text: 'Download an Excel file of the current grid contents.',
-								},
-								{
-									type: 'Button',
-									text: 'Download',
-									isEditable: false,
-									icon: Excel,
-									_icon: {
-										size: 'md',
-									},
-									onPress: () => onDownload(),
-									className: 'mb-5',
-								},
-								{
-									type: 'DisplayField',
-									text: 'Upload an Excel file to the current grid.',
-								},
-								{
-									type: 'File',
-									name: 'file',
-									onChangeValue: setImportFile,
-									accept: '.xlsx',
-								},
-								{
-									type: 'Row',
-									className: 'mt-2',
-									items: [
-										{
-											type: 'Button',
-											text: 'Upload',
-											isEditable: false,
-											icon: Upload,
-											_icon: {
-												size: 'md',
-											},
-											isDisabled: !importFile,
-											onPress: onUploadLocal,
-										},
-										{
-											type: 'Button',
-											text: 'Get Template',
-											icon: Download,
-											isEditable: false,
-											onPress: onDownloadTemplate,
-										},
-
-									],
-								},
-							]
+							"items": items,
 						},
 					]}
 					// record={selection}

package/src/Components/index.js

@@ -9,6 +9,7 @@ import AngleRight from './Icons/AngleRight.js';
 import AnglesLeft from './Icons/AnglesLeft.js';
 import AnglesRight from './Icons/AnglesRight.js';
 import Asterisk from './Icons/Asterisk.js';
+import ArrowPointer from './Icons/ArrowPointer.js';
 import ArrowUp from './Icons/ArrowUp.js';
 import Ban from './Icons/Ban.js';
 import Bars from './Icons/Bars.js';
@@ -204,6 +205,7 @@ import Color from './Form/Field/Color.js';
 import Combo from './Form/Field/Combo/Combo.js';
 // import { ComboEditor } from './Form/Field/Combo/Combo.js';
 import Container from './Container/Container.js';
+import ContainerColumn from './Container/ContainerColumn.js';
 import DataMgt from './Screens/DataMgt.js';
 import Date from './Form/Field/Date.js';
 import DateRange from './Filter/DateRange.js';
@@ -254,6 +256,7 @@ const components = {
 	AnglesLeft,
 	AnglesRight,
 	Asterisk,
+	ArrowPointer,
 	ArrowUp,
 	Ban,
 	Bars,
@@ -449,6 +452,7 @@ const components = {
 	Combo,
 	// ComboEditor,
 	Container,
+	ContainerColumn,
 	DataMgt,
 	Date,
 	DateRange,

package/src/Constants/Commands.js

@@ -6,3 +6,4 @@ export const COPY = 'copy';
 export const DUPLICATE = 'duplicate';
 export const PRINT = 'print';
 export const UPLOAD_DOWNLOAD = 'uploadDownload';
+export const DOWNLOAD = 'download';