@onehat/ui 0.4.64 → 0.4.66

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.64",
+	"version": "0.4.66",
 	"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/Grid/Grid.js

@@ -132,6 +132,9 @@ function GridComponent(props) {
 			getExpandedRowContent,
 			showHeaders = true,
 			showHovers = true,
+			showSelectHandle = true,
+			isRowSelectable = true,
+			isRowHoverable = true,
 			canColumnsSort = true,
 			canColumnsReorder = true,
 			canColumnsResize = true,
@@ -424,10 +427,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;
 										}
 
@@ -472,7 +475,13 @@ function GridComponent(props) {
 							onContextMenu(item, e, newSelection);
 						}
 					}}
-					className="Pressable Row flex-row grow">
+					className={`
+						Pressable
+						Row
+						flex-row
+						grow
+					`}
+				>
 					{({
 						hovered,
 						focused,
@@ -493,6 +502,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
@@ -503,12 +513,11 @@ function GridComponent(props) {
 							}
 							return headerRow;
 						}
-
 						const
 							rowReorderProps = {},
 							rowDragProps = {};
 						let WhichRow = GridRow;
-						if (CURRENT_MODE === UI_MODE_WEB) { // DND is currrently web-only  TODO: implement for RN
+						if (CURRENT_MODE === UI_MODE_WEB) { // DND is currently web-only  TODO: implement for RN
 							// Create a method that gets an always-current copy of the selection ids
 							dragSelectionRef.current = selection;
 							const getSelection = () => dragSelectionRef.current;
@@ -567,9 +576,12 @@ function GridComponent(props) {
 									fields={fields}
 									rowProps={rowProps}
 									hideNavColumn={hideNavColumn}
+									isRowSelectable={isRowSelectable}
+									isRowHoverable={isRowHoverable}
 									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 Arcs from '../Icons/Arcs.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,10 +464,18 @@ 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) {
 					headerColumns.unshift(<Box
 						key="spacer"
-						className="Spacer w-[3px]"
+						className="Spacer w-[7px]"
 					/>);
 				}
 				if (!hideNavColumn) {

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,9 @@ function GridRow(props) {
 			fields,
 			rowProps,
 			hideNavColumn,
+			showSelectHandle,
+			isRowSelectable,
+			isRowHoverable,
 			isSelected,
 			isHovered,
 			bg,
@@ -55,13 +59,13 @@ function GridRow(props) {
 
 		let bg = rowProps.bg || props.bg || styles.GRID_ROW_BG,
 			mixWith;
-		if (isSelected) {
+		if (isRowSelectable && isSelected) {
 			if (showHovers && isHovered) {
 				mixWith = styles.GRID_ROW_SELECTED_BG_HOVER;
 			} else {
 				mixWith = styles.GRID_ROW_SELECTED_BG;
 			}
-		} else if (showHovers && isHovered) {
+		} else if (isRowHoverable && showHovers && isHovered) {
 			mixWith = styles.GRID_ROW_BG_HOVER;
 		} else if (alternateRowBackgrounds && index % alternatingInterval === 0) { // i.e. every second line, or every third line
 			mixWith = styles.GRID_ROW_ALTERNATE_BG;
@@ -85,7 +89,8 @@ function GridRow(props) {
 					}
 					const
 						propsToPass = columnProps[key] || {},
-						colStyle = {};
+						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
 					let colClassName = `
 						GridRow-column
 						p-1
@@ -93,6 +98,7 @@ function GridRow(props) {
 						border-r-black-100
 						block
 						overflow-auto
+						${whichCursor}
 						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
 					`;
 					if (isOnlyOneVisibleColumn) {
@@ -265,6 +271,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-[7px] 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 Arcs from '../Icons/Arcs.js';
+
+function RowSelectHandle(props) {
+	return <VStack
+				className="RowSelectHandle w-[40px] px-2 items-center justify-center select-none cursor-pointer"
+			>
+				<Icon
+					as={Arcs}
+					size="xs"
+					className="w-[20px] h-[20px] text-[#ddd]" />
+			</VStack>;
+}
+
+export default RowSelectHandle;

package/src/Components/Hoc/withAlert.js

@@ -63,6 +63,10 @@ function withAlert(WrappedComponent) {
 									text-[18px]
 									flex-none
 									mr-2
+									w-full
+									break-words
+									whitespace-normal
+									overflow-wrap-anywhere
 								`}>{message}</Text>
 							</Box>
 						</HStack>;

package/src/Components/Hoc/withDnd.js

@@ -1,6 +1,13 @@
 import { forwardRef, useEffect, useRef, } from 'react';
 import { useDrag, useDrop, useDragLayer } 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
-
+import {
+	Box,
+} from '@project-components/Gluestack';
+import {
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+	CURRENT_MODE,
+} from '../../Constants/UiModes.js';
 
 // This HOC allows components to be dragged and dropped onto another component.
 // It can't contrain the movement of the preview item, because react-dnd uses 
@@ -32,6 +39,7 @@ export function withDragSource(WrappedComponent) {
 				onDragEnd = null,
 				canDrag = null,
 				isDragging = null,
+				getDragProxy,
 				dragCollect = (monitor, props2) => { // 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 {
@@ -54,7 +62,10 @@ export function withDragSource(WrappedComponent) {
 
 				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).
+					item: {
+						...dragSourceItem,
+						getDragProxy,
+					}, // 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: dragPreviewOptions, // Optional. A plain JavaScript object describing drag preview options.
@@ -139,6 +150,7 @@ export function withDropTarget(WrappedComponent) {
 					return {
 						canDrop: !!monitor.canDrop(),
 						isOver: !!monitor.isOver(),
+						draggedItem: monitor.getItem(), // Pass the dragged item so TreeNode can evaluate custom logic
 					};
 				},
 			} = props,
@@ -171,6 +183,7 @@ export function withDropTarget(WrappedComponent) {
 			{
 				canDrop: stateCanDrop,
 				isOver,
+				draggedItem,
 				// didDrop,
 				// clientOffset,
 				// differenceFromInitialOffset,
@@ -187,64 +200,48 @@ export function withDropTarget(WrappedComponent) {
 					ref={ref}
 					isOver={isOver}
 					dropTargetRef={localTargetRef}
+					draggedItem={draggedItem} // Pass the dragged item
 					{...props}
 				/>;
 	});
 }
 
 
-// export function CustomDragLayer(props) {
-
-// 	// if (CURRENT_MODE !== UI_MODE_WEB) {
-// 	// 	throw Error('CustomDragLayer only works in web mode');
-// 	// }
-
-// 	const
-// 		{
-// 			onDrag,
-// 			axis = null,
-// 		} = props,
-// 		layer = useDragLayer((monitor) => ({
-// 			isDragging: monitor.isDragging(),
-// 			item: monitor.getItem(),
-// 			currentOffset: monitor.getSourceClientOffset(),
-// 		})),
-// 		{ isDragging, item, currentOffset } = layer;
-
-// 	useEffect(() => {
-// 		if (layer.isDragging) {
-// 			onDrag(layer);
-// 		}
-// 	}, [layer]);
-
-// 	return null;
-
-// 	if (!isDragging || !currentOffset) {
-// 		return null;
-// 	}
-
-// 	let transform;
-// 	if (axis === 'x') {
-// 		transform = `translate(${currentOffset.x}px, 0)`;
-// 	} else if (axis === 'y') {
-// 		transform = `translate(0, ${currentOffset.y}px)`;
-// 	} else {
-// 		transform = `translate(${currentOffset.x}px, ${currentOffset.y}px)`;
-// 	}
-
-// 	return (
-// 		<div id="dragLayer" style={{
-// 			background: '#f00',
-// 			position: 'fixed',
-// 			pointerEvents: 'none',
-// 			zIndex: 10000,
-// 			width: '200px',
-// 			height: '10px',
-// 			left: 0,
-// 			top: 0,
-// 			transform,
-// 		}}>
-// 			{children}
-// 		</div>
-// 	);
-// }
+export function GlobalDragProxy() {
+	const {
+		isDragging,
+		item,
+		currentOffset,
+	} = useDragLayer((monitor) => ({
+		isDragging: monitor.isDragging(),
+		item: monitor.getItem(),
+		currentOffset: monitor.getSourceClientOffset(),
+	}));
+
+	if (!isDragging || !currentOffset || CURRENT_MODE !== UI_MODE_WEB) { // Native uses a native drag layer, so we don't need to render a custom proxy
+		return null;
+	}
+
+	const getDragProxy = item?.getDragProxy;
+	if (!getDragProxy) {
+		// Only render a custom proxy if one is provided - let React DnD handle default case
+		return null;
+	}
+
+	let proxyContent = null;
+	try {
+		proxyContent = getDragProxy(item);
+	} catch (error) {
+		console.warn('Failed to render custom drag proxy:', error);
+		return null; // use default React DnD proxy
+	}
+
+	return <Box
+				className="fixed pointer-events-none z-[10000] left-0 top-0"
+				style={{
+					transform: `translate(${currentOffset.x}px, ${currentOffset.y}px)`,
+				}}
+			>
+				{proxyContent}
+			</Box>;
+}

package/src/Components/Icons/Arcs.js

@@ -0,0 +1,10 @@
+import { createIcon } from "../Gluestack/icon";
+import { Path, Svg } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 53.98 53.98',
+	path: <Path d="M14.59 0c1.1 1.66 1.74 3.65 1.74 5.79 0 5.82-4.72 10.54-10.54 10.54-2.14 0-4.13-.64-5.79-1.74 1.89 2.86 5.12 4.75 8.8 4.75 5.82 0 10.54-4.72 10.54-10.54 0-3.68-1.89-6.92-4.75-8.8zM49.23 0c1.1 1.66 1.74 3.65 1.74 5.79 0 5.82-4.72 10.54-10.54 10.54-2.14 0-4.13-.64-5.79-1.74 1.89 2.86 5.12 4.75 8.8 4.75 5.82 0 10.54-4.72 10.54-10.54 0-3.68-1.89-6.92-4.75-8.8zM14.59 34.64c1.1 1.66 1.74 3.65 1.74 5.79 0 5.82-4.72 10.54-10.54 10.54-2.14 0-4.13-.64-5.79-1.74 1.89 2.86 5.12 4.75 8.8 4.75 5.82 0 10.54-4.72 10.54-10.54 0-3.68-1.89-6.92-4.75-8.8zM49.23 34.64c1.1 1.66 1.74 3.65 1.74 5.79 0 5.82-4.72 10.54-10.54 10.54-2.14 0-4.13-.64-5.79-1.74 1.89 2.86 5.12 4.75 8.8 4.75 5.82 0 10.54-4.72 10.54-10.54 0-3.68-1.89-6.92-4.75-8.8z" />,
+});
+
+export default SvgComponent

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'),