@onehat/ui 0.4.60 → 0.4.62

package/package.json

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

package/src/Components/Fab/DynamicFab.js

@@ -0,0 +1,108 @@
+import { useCallback } from 'react';
+import {
+	Fab, FabIcon, FabLabel,
+	VStack,
+} from '@project-components/Gluestack';
+import Animated, {
+	useSharedValue,
+	useAnimatedStyle,
+	withTiming,
+} from 'react-native-reanimated';
+import IconButton from '../Buttons/IconButton.js';
+import FabWithTooltip from './FabWithTooltip.js';
+import EllipsisVertical from '../Icons/EllipsisVertical.js';
+import Xmark from '../Icons/Xmark.js';
+
+// This component creates a floating action button (FAB)
+// that can expand and collapse to show multiple buttons beneath it.
+
+export default function DynamicFab(props) {
+	const {
+			icon,
+			buttons, // to show when expanded
+			label,
+			tooltip,
+			tooltipPlacement = 'left',
+			tooltipClassName,
+			tooltipTriggerClassName,
+			collapseOnPress = true,
+		} = props,
+		isExpanded = useSharedValue(0),
+		toggleFab = useCallback(() => {
+			isExpanded.value = isExpanded.value ? 0 : 1;
+		}, []),
+		buttonSpacing = 45,
+		verticalOffset = 50; // to shift the entire expanded group up
+
+	let className = `
+		DynamicFab
+		fixed
+		pb-[20px]
+		bottom-4
+		right-4
+	`;
+	if (props.className) {
+		className += ` ${props.className}`;
+	}
+
+	return <VStack className={className}>
+				{buttons
+					.slice() // clone, so we don't mutate the original array
+					.reverse() // so buttons appear in the correct order
+					.map((btnConfig, ix) => {
+						const {
+								tooltipPlacement = 'left',
+								onPress,
+								key,
+								...btnConfigToPass
+							} = btnConfig,
+							animatedStyle = useAnimatedStyle(() => {
+								return {
+									opacity: withTiming(isExpanded.value, { duration: 200 }),
+									pointerEvents: isExpanded.value ? 'auto' : 'none', // Disable interaction when collapsed
+								};
+							});
+
+						return <Animated.View
+									key={ix}
+									style={[
+										animatedStyle,
+										{
+											position: 'absolute',
+											bottom: buttonSpacing * (ix + 1) + verticalOffset, // Static vertical positioning
+											right: 0,
+										},
+									]}
+								>
+									<IconButton
+										className={`
+											bg-primary-600
+											text-white
+											hover:bg-primary-700
+											active:bg-primary-800
+										`}
+										tooltipPlacement={tooltipPlacement}
+										onPress={() => {
+											onPress();
+											if (collapseOnPress) {
+												isExpanded.value = 0;
+											}
+										}}
+										{...btnConfigToPass}
+									/>
+								</Animated.View>;
+					})}
+				<FabWithTooltip
+					size="lg"
+					onPress={toggleFab}
+					className="z-100 bg-primary-600"
+					tooltip={tooltip}
+					tooltipPlacement={tooltipPlacement}
+					tooltipClassName={tooltipClassName}
+					tooltipTriggerClassName={tooltipTriggerClassName}
+				>
+					<FabIcon as={isExpanded.value ? Xmark : icon || EllipsisVertical} />
+					{label ? <FabLabel>{label}</FabLabel> : null}
+				</FabWithTooltip>
+			</VStack>;
+};

package/src/Components/Fab/FabWithTooltip.js

@@ -0,0 +1,6 @@
+import {
+	Fab,
+} from '@project-components/Gluestack';
+import withTooltip from '../Hoc/withTooltip.js';
+
+export default withTooltip(Fab);

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

@@ -659,7 +659,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 						placeholder={placeholder}
 						tooltip={tooltip}
 						tooltipPlacement={tooltipPlacement}
-						tooltipClassName={`
+						tooltipTriggerClassName={`
 							grow
 							h-auto
 							self-stretch
@@ -901,7 +901,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 									placeholder={placeholder}
 									tooltip={tooltip}
 									tooltipPlacement={tooltipPlacement}
-									tooltipClassName={`
+									tooltipTriggerClassName={`
 										grow
 										h-full
 										flex-1
@@ -1014,7 +1014,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 							placeholder={placeholder}
 							tooltip={tooltip}
 							tooltipPlacement={tooltipPlacement}
-							tooltipClassName={`
+							tooltipTriggerClassName={`
 								h-full
 								flex-1
 							`}

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

@@ -366,7 +366,7 @@ export const DateElement = forwardRef((props, ref) => {
 				isDisabled={isDisabled}
 				tooltip={tooltip}
 				tooltipPlacement={tooltipPlacement}
-				tooltipClassName={`
+				tooltipTriggerClassName={`
 					flex-1
 					h-full
 				`}

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

@@ -164,7 +164,10 @@ function NumberElement(props) {
 					isDisabled={isDisabled}
 					tooltip={tooltip}
 					tooltipPlacement={tooltipPlacement}
-					tooltipClassName="flex-1"
+					tooltipTriggerClassName={`
+						flex-1
+						h-full
+					`}
 					className={`
 						h-full
 						text-center

package/src/Components/Form/Form.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, isValidElement, } from 'react';
+import { useEffect, useCallback, useState, useRef, isValidElement, } from 'react';
 import {
 	Box,
 	HStack,
@@ -8,6 +8,11 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import Animated, {
+	useSharedValue,
+	useAnimatedStyle,
+	withTiming,
+} from 'react-native-reanimated';
 import {
 	VIEW,
 } from '../../Constants/Commands.js';
@@ -40,6 +45,7 @@ import testProps from '../../Functions/testProps.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import Button from '../Buttons/Button.js';
 import IconButton from '../Buttons/IconButton.js';
+import DynamicFab from '../Fab/DynamicFab.js';
 import AngleLeft from '../Icons/AngleLeft.js';
 import Eye from '../Icons/Eye.js';
 import Rotate from '../Icons/Rotate.js';
@@ -47,9 +53,9 @@ import Pencil from '../Icons/Pencil.js';
 import Plus from '../Icons/Plus.js';
 import FloppyDiskRegular from '../Icons/FloppyDiskRegular.js';
 import Trash from '../Icons/Trash.js';
+import ArrowUp from '../Icons/ArrowUp.js';
 import Xmark from '../Icons/Xmark.js';
 import Check from '../Icons/Check.js';
-
 import Footer from '../Layout/Footer.js';
 import Label from '../Form/Label.js';
 import _ from 'lodash';
@@ -70,12 +76,15 @@ import _ from 'lodash';
 // EDITOR_TYPE__PLAIN
 // Form is embedded on screen in some other way. Mainly use startingValues, items, validator
 
+const FAB_FADE_TIME = 300; // ms
+
 function Form(props) {
 	const {
 			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
 			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)
 			columnsConfig, // Which columns are shown in Grid, so the inline editor can match. Used only for EDITOR_TYPE__INLINE
 			validator, // custom validator, mainly for EDITOR_TYPE__PLAIN
@@ -138,6 +147,14 @@ function Form(props) {
 			
 		} = props,
 		formRef = useRef(),
+		ancillaryItemsRef = useRef({}),
+		ancillaryButtons = useRef([]),
+		setAncillaryButtons = (array) => {
+			ancillaryButtons.current = array;
+		},
+		getAncillaryButtons = () => {
+			return ancillaryButtons.current;
+		},
 		styles = UiGlobals.styles,
 		record = props.record?.length === 1 ? props.record[0] : props.record;
 
@@ -155,6 +172,14 @@ function Form(props) {
 		forceUpdate = useForceUpdate(),
 		[previousRecord, setPreviousRecord] = useState(record),
 		[containerWidth, setContainerWidth] = useState(),
+		[isFabVisible, setIsFabVisible] = useState(false),
+		fabOpacity = useSharedValue(0),
+		fabAnimatedStyle = useAnimatedStyle(() => {
+			return {
+				opacity: withTiming(fabOpacity.value, { duration: FAB_FADE_TIME }), // Smooth fade animation
+				pointerEvents: fabOpacity.value > 0 ? 'auto' : 'none', // Disable interaction when invisible
+			};
+		}),
 		initialValues = _.merge(startingValues, (record && !record.isDestroyed ? record.submitValues : {})),
 		defaultValues = isMultiple ? getNullFieldValues(initialValues, Repository) : initialValues, // when multiple entities, set all default values to null
 		validatorToUse = validator || (isMultiple ? disableRequiredYupFields(Repository?.schema?.model?.validator) : Repository?.schema?.model?.validator) || yup.object(),
@@ -899,12 +924,23 @@ function Form(props) {
 		},
 		buildAncillary = () => {
 			const components = [];
+			setAncillaryButtons([]);
 			if (ancillaryItems.length) {
+
+				// add the "scroll to top" button
+				getAncillaryButtons().push({
+					icon: ArrowUp,
+					reference: 'scrollToTop',
+					onPress: () => scrollToAncillaryItem(0),
+					tooltip: 'Scroll to top',
+				});
+
 				_.each(ancillaryItems, (item, ix) => {
 					let {
 						type,
 						title = null,
 						description = null,
+						icon,
 						selectorId,
 						selectorSelectedField,
 						...itemPropsToPass
@@ -912,6 +948,15 @@ function Form(props) {
 					if (isMultiple && type !== 'Attachments') {
 						return;
 					}
+					if (icon) {
+						// NOTE: this assumes that if one Ancillary item has an icon, they all do.
+						// If they don't, the ix will be wrong!
+						getAncillaryButtons().push({
+							icon,
+							onPress: () => scrollToAncillaryItem(ix +1), // offset for the "scroll to top" button
+							tooltip: title,
+						});
+					}
 					if (type.match(/Grid/) && !itemPropsToPass.h) {
 						itemPropsToPass.h = 400;
 					}
@@ -938,6 +983,9 @@ function Form(props) {
 										${styles.FORM_ANCILLARY_TITLE_CLASSNAME}
 									`}
 								>{title}</Text>;
+						if (icon) {
+							title = <HStack className="items-center"><Icon as={icon} className="w-[32px] h-[32px] mr-2" />{title}</HStack>
+						}
 					}
 					if (description) {
 						description = <Text
@@ -949,6 +997,7 @@ function Form(props) {
 									>{description}</Text>;
 					}
 					components.push(<VStack
+										ref={(el) => (ancillaryItemsRef.current[ix +1 /* offset for "scroll to top" */] = el)}
 										key={'ancillary-' + ix}
 										className={`
 											Form-VStack12
@@ -996,7 +1045,31 @@ function Form(props) {
 			}
 
 			setContainerWidth(e.nativeEvent.layout.width);
-		};
+		},
+		scrollToAncillaryItem = (ix) => {
+			ancillaryItemsRef.current[ix]?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'start',
+			});
+		},
+		onScroll = useCallback(
+			_.debounce((e) => {
+				if (!showAncillaryButtons) {
+					return;
+				}
+				const
+					scrollY = e.nativeEvent.contentOffset.y,
+					isFabVisible = scrollY > 50;
+				fabOpacity.value = isFabVisible ? 1 : 0;
+				if (isFabVisible) {
+					setIsFabVisible(true);
+				} else {
+					// delay removal from DOM until fade-out is complete
+					setTimeout(() => setIsFabVisible(isFabVisible), FAB_FADE_TIME);
+				}
+			}, 100), // delay
+			[]
+		);
 
 	useEffect(() => {
 		if (skipAll) {
@@ -1081,13 +1154,15 @@ function Form(props) {
 		style.maxHeight = maxHeight;
 	}
 
-	const formButtons = [];
 	let modeHeader = null,
+		formButtons = null,
+		scrollButtons = null,
 		footer = null,
 		footerButtons = null,
 		formComponents,
 		editor,
 		additionalButtons,
+		fab = null,
 		isSaveDisabled = false,
 		isSubmitDisabled = false,
 		showDeleteBtn = false,
@@ -1101,13 +1176,13 @@ function Form(props) {
 		// create editor
 		if (editorType === EDITOR_TYPE__INLINE) {
 			editor = buildFromColumnsConfig();
-		// } else if (editorType === EDITOR_TYPE__PLAIN) {
-		// 	formComponents = buildFromItems();
-		// 	const formAncillaryComponents = buildAncillary();
-		// 	editor = <>
-		// 				<VStack className="p-4">{formComponents}</VStack>
-		// 				<VStack className="pt-4">{formAncillaryComponents}</VStack>
-		// 			</>;
+			// } else if (editorType === EDITOR_TYPE__PLAIN) {
+			// 	formComponents = buildFromItems();
+			// 	const formAncillaryComponents = buildAncillary();
+			// 	editor = <>
+			// 				<VStack className="p-4">{formComponents}</VStack>
+			// 				<VStack className="pt-4">{formAncillaryComponents}</VStack>
+			// 			</>;
 		} else {
 			formComponents = buildFromItems();
 			const formAncillaryComponents = buildAncillary();
@@ -1157,14 +1232,22 @@ function Form(props) {
 							</Toolbar>;
 			}
 			if (getEditorMode() === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
-				formButtons.push(<Toolbar key="additionalButtonsToolbar" className="justify-end flex-wrap gap-2">
+				formButtons = <Toolbar className="justify-end flex-wrap gap-2">
 									{additionalButtons}
-								</Toolbar>)
+								</Toolbar>;
+			}
+			if (showAncillaryButtons && !_.isEmpty(getAncillaryButtons())) {
+				fab = <Animated.View style={fabAnimatedStyle}>
+						<DynamicFab
+							buttons={getAncillaryButtons()}
+							collapseOnPress={false}
+							className="bottom-[55px]"
+							tooltip="Scroll to Ancillary Item"
+						/>
+					</Animated.View>;
 			}
 		}
 
-
-
 		// create footer
 		if (!formState.isValid) {
 			isSaveDisabled = true;
@@ -1356,6 +1439,7 @@ function Form(props) {
 	
 	let className = props.className || '';
 	className += ' Form-VStackNative';
+	const scrollToTopAnchor = <Box ref={(el) => (ancillaryItemsRef.current[0] = el)} className="h-0" />;
 	return <VStackNative
 				ref={formRef}
 				{...testProps(self)}
@@ -1375,17 +1459,26 @@ function Form(props) {
 								pb-1
 								web:min-h-[${minHeight}px]
 							`}
+							onScroll={onScroll}
+							scrollEventThrottle={16 /* ms */}
 							contentContainerStyle={{
 								// height: '100%',
 							}}
 						>
+							{scrollToTopAnchor}
 							{modeHeader}
 							{formHeader}
 							{formButtons}
+							{showAncillaryButtons && !_.isEmpty(getAncillaryButtons()) && 
+								<Toolbar className="justify-start flex-wrap gap-2">
+									<Text>Scroll:</Text>
+									{buildAdditionalButtons(_.omitBy(getAncillaryButtons(), (btnConfig) => btnConfig.reference === 'scrollToTop'))}
+								</Toolbar>}
 							{editor}
 						</ScrollView>}
 
 					{footer}
+					{isFabVisible && fab}
 
 				</>}
 			</VStackNative>;

package/src/Components/Hoc/withData.js

@@ -99,6 +99,22 @@ export default function withData(WrappedComponent) {
 
 		}, []);
 
+		useEffect(() => {
+			if (!baseParams || !LocalRepository) {
+				return;
+			}
+		
+			// If baseParams changes, re-load the Repository
+			if (LocalRepository.isLoaded && !_.isEqual(LocalRepository.getBaseParams(), baseParams)) {
+				LocalRepository.setBaseParams(baseParams);
+	
+				if (LocalRepository.isRemote && !LocalRepository.isLoading) {
+					LocalRepository.load();
+				}
+			}
+		
+		}, [baseParams, LocalRepository]);
+
 		if (!isReady) {
 			return null;
 		}

package/src/Components/Hoc/withEditor.js

@@ -50,6 +50,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				newEntityDisplayValue,
 				newEntityDisplayProperty, // in case the field to set for newEntityDisplayValue is different from model
 				defaultValues,
+				initialEditorMode = EDITOR_MODE__VIEW,
 				stayInEditModeOnSelectionChange = false,
 
 				// withComponent
@@ -81,7 +82,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			listeners = useRef({}),
 			editorStateRef = useRef(),
 			newEntityDisplayValueRef = useRef(),
-			editorModeRef = useRef(EDITOR_MODE__VIEW),
+			editorModeRef = useRef(initialEditorMode),
 			isIgnoreNextSelectionChangeRef = useRef(false),
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isAdding, setIsAdding] = useState(false),

package/src/Components/Hoc/withPresetButtons.js

@@ -57,6 +57,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				canRecordBeEdited,
 				canRecordBeDeleted,
 				canRecordBeDuplicated,
+				canProceedWithCrud, // fn returns bool on if the CRUD operation can proceed
 				...propsToPass
 			} = props,
 			{
@@ -209,7 +210,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case ADD:
 						key = 'addBtn';
 						text = 'Add';
-						handler = (parent, e) => onAdd();
+						handler = (parent, e) => {
+							if (canProceedWithCrud && !canProceedWithCrud()) {
+								return;
+							}
+							onAdd();
+						};
 						icon = Plus;
 						if (isNoSelectorSelected() ||
 							(isTree && isEmptySelection())
@@ -220,7 +226,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case EDIT:
 						key = 'editBtn';
 						text = 'Edit';
-						handler = (parent, e) => onEdit();
+						handler = (parent, e) => {
+							if (canProceedWithCrud && !canProceedWithCrud()) {
+								return;
+							}
+							onEdit();
+						};
 						icon = Edit;
 						if (isNoSelectorSelected() ||
 							isEmptySelection() ||
@@ -235,7 +246,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'deleteBtn';
 						text = 'Delete';
 						handler = onDelete;
-						handler = (parent, e) => onDelete();
+						handler = (parent, e) => {
+							if (canProceedWithCrud && !canProceedWithCrud()) {
+								return;
+							}
+							onDelete();
+						};
 						icon = Trash;
 						if (isNoSelectorSelected() ||
 							isEmptySelection() ||
@@ -280,7 +296,12 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					case DUPLICATE:
 						key = 'duplicateBtn';
 						text = 'Duplicate';
-						handler = (parent, e) => onDuplicate();
+						handler = (parent, e) => {
+							if (canProceedWithCrud && !canProceedWithCrud()) {
+								return;
+							}
+							onDuplicate();
+						};
 						icon = Duplicate;
 						isDisabled = !selection.length || selection.length !== 1;
 						if (isNoSelectorSelected() ||

package/src/Components/Hoc/withTooltip.js

@@ -11,6 +11,7 @@ export default function withTooltip(WrappedComponent) {
 				tooltip,
 				tooltipPlacement = 'bottom',
 				tooltipClassName,
+				tooltipTriggerClassName,
 				_tooltip = {},
 				...propsToPass
 			} = props;
@@ -22,6 +23,7 @@ export default function withTooltip(WrappedComponent) {
 							label={tooltip}
 							placement={tooltipPlacement}
 							className={tooltipClassName}
+							triggerClassName={tooltipTriggerClassName}
 							{..._tooltip}
 						>
 							{component}

package/src/Components/Icons/ArrowUp.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 { Path, Svg } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 384 512',
+	path: <Path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z" />,
+});
+
+export default SvgComponent

package/src/Components/Report/Report.js

@@ -18,6 +18,7 @@ import {
 } from '../../Constants/ReportTypes.js';
 import Form from '../Form/Form.js';
 import withComponent from '../Hoc/withComponent.js';
+import withAlert from '../Hoc/withAlert.js';
 import testProps from '../../Functions/testProps.js';
 import ChartLine from '../Icons/ChartLine.js';
 import Pdf from '../Icons/Pdf.js';
@@ -36,8 +37,13 @@ function Report(props) {
 			disablePdf = false,
 			disableExcel = false,
 			showReportHeaders = true,
+			alert,
 		} = props,
-		buttons = [];
+		buttons = [],
+		downloadReport = (args) => {
+			getReport(args);
+			alert('Download started');
+		};
 
 	const propsIcon = props._icon || {};
 	propsIcon.className = 'w-full h-full text-primary-500';
@@ -59,7 +65,7 @@ function Report(props) {
 			key: 'excelBtn',
 			text: 'Download Excel',
 			icon: Excel,
-			onPress: (data) => getReport({
+			onPress: (data) => downloadReport({
 				reportId,
 				data,
 				reportType: REPORT_TYPES__EXCEL,
@@ -74,7 +80,7 @@ function Report(props) {
 			key: 'pdfBtn',
 			text: 'Download PDF',
 			icon: Pdf,
-			onPress: (data) => getReport({
+			onPress: (data) => downloadReport({
 				reportId,
 				data,
 				reportType: REPORT_TYPES__PDF,
@@ -113,4 +119,4 @@ function Report(props) {
 			</VStackNative>;
 }
 
-export default withComponent(Report);
+export default withComponent(withAlert(Report));

package/src/Components/Tab/TabBar.js

@@ -398,13 +398,16 @@ function TabBar(props) {
 			if (!tabs[currentTabIx]) {
 				return null;
 			}
-			if (!tabs[currentTabIx].content && !tabs[currentTabIx].items) {
+
+			const currentTab = tabs[currentTabIx];
+			if (!currentTab.content && !currentTab.items) {
 				return null;
 			}
-			if (tabs[currentTabIx].content) {
-				return tabs[currentTabIx].content;
+			
+			if (currentTab.content) {
+				return currentTab.content;
 			}
-			return _.map(tabs[currentTabIx].items, (item, ix) => {
+			return _.map(currentTab.items, (item, ix) => {
 				return cloneElement(item, { key: ix });
 			});
 		};
@@ -462,6 +465,8 @@ function TabBar(props) {
 						items-center
 						justify-start
 						py-2
+						overflow-x-hidden
+						overflow-y-auto
 						${styles.TAB_BAR_CLASSNAME}
 					`}
 				>
@@ -487,6 +492,8 @@ function TabBar(props) {
 						${'h-[' + tabHeight + 'px]'}
 						items-center
 						justify-start
+						overflow-x-auto
+						overflow-y-hidden
 						p-1
 						pb-0
 						${styles.TAB_BAR_CLASSNAME}

package/src/Components/Tooltip/Tooltip.js

@@ -17,8 +17,8 @@ const TooltipElement = forwardRef((props, ref) => {
 	}
 
 	let triggerClassName = 'Tooltip-trigger';
-	if (props.className) {
-		triggerClassName += ' ' + props.className;
+	if (props.triggerClassName) {
+		triggerClassName += ' ' + props.triggerClassName;
 	}
 	
 	return <Tooltip

package/src/Components/Viewer/Viewer.js

@@ -1,16 +1,24 @@
-import { useEffect, useRef, useState, isValidElement, } from 'react';
+import { useEffect, useCallback, useRef, useState, isValidElement, } from 'react';
 import {
+	Box,
 	HStack,
+	Icon,
 	ScrollView,
 	Text,
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import Animated, {
+	useSharedValue,
+	useAnimatedStyle,
+	withTiming,
+} from 'react-native-reanimated';
 import {
 	EDIT,
 } from '../../Constants/Commands.js';
 import {
 	EDITOR_TYPE__SIDE,
+	EDITOR_TYPE__SMART,
 } from '../../Constants/Editor.js';
 import {
 	extractCssPropertyFromClassName,
@@ -24,18 +32,23 @@ import inArray from '../../Functions/inArray.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import buildAdditionalButtons from '../../Functions/buildAdditionalButtons.js';
 import testProps from '../../Functions/testProps.js';
+import DynamicFab from '../Fab/DynamicFab.js';
 import Toolbar from '../Toolbar/Toolbar.js';
+import ArrowUp from '../Icons/ArrowUp.js';
 import Button from '../Buttons/Button.js';
 import Label from '../Form/Label.js';
 import Pencil from '../Icons/Pencil.js';
 import Footer from '../Layout/Footer.js';
 import _ from 'lodash';
 
+const FAB_FADE_TIME = 300; // ms
+
 function Viewer(props) {
 	const {
 			viewerCanDelete = false,
 			items = [], // Columns, FieldSets, Fields, etc to define the form
 			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)
 			record,
 			additionalViewButtons,
@@ -66,9 +79,26 @@ function Viewer(props) {
 
 		} = props,
 		scrollViewRef = useRef(),
+		ancillaryItemsRef = useRef({}),
+		ancillaryButtons = useRef([]),
+		setAncillaryButtons = (array) => {
+			ancillaryButtons.current = array;
+		},
+		getAncillaryButtons = () => {
+			return ancillaryButtons.current;
+		},
 		isMultiple = _.isArray(record),
 		[containerWidth, setContainerWidth] = useState(),
+		[isFabVisible, setIsFabVisible] = useState(false),
+		fabOpacity = useSharedValue(0),
+		fabAnimatedStyle = useAnimatedStyle(() => {
+			return {
+				opacity: withTiming(fabOpacity.value, { duration: FAB_FADE_TIME }), // Smooth fade animation
+				pointerEvents: fabOpacity.value > 0 ? 'auto' : 'none', // Disable interaction when invisible
+			};
+		}),
 		isSideEditor = editorType === EDITOR_TYPE__SIDE,
+		isSmartEditor = editorType === EDITOR_TYPE__SMART,
 		styles = UiGlobals.styles,
 		flex = props.flex || 1,
 		buildFromItems = () => {
@@ -295,17 +325,39 @@ function Viewer(props) {
 		},
 		buildAncillary = () => {
 			const components = [];
+			setAncillaryButtons([]);
 			if (ancillaryItems.length) {
+
+				// add the "scroll to top" button
+				getAncillaryButtons().push({
+					icon: ArrowUp,
+					key: 'scrollToTop',
+					reference: 'scrollToTop',
+					onPress: () => scrollToAncillaryItem(0),
+					tooltip: 'Scroll to top',
+				});
+
 				_.each(ancillaryItems, (item, ix) => {
 					let {
 						type,
 						title = null,
+						icon,
 						selectorId = null,
 						...itemPropsToPass
 					} = item;
 					if (isMultiple && type !== 'Attachments') {
 						return;
 					}
+					if (icon) {
+						// NOTE: this assumes that if one Ancillary item has an icon, they all do.
+						// If they don't, the ix will be wrong.
+						getAncillaryButtons().push({
+							icon,
+							key: 'ancillary-' + ix,
+							onPress: () => { scrollToAncillaryItem(ix +1)}, // offset for the "scroll to top" button
+							tooltip: title,
+						});
+					}
 					if (type.match(/Grid/) && !itemPropsToPass.h) {
 						itemPropsToPass.h = 400;
 					}
@@ -334,15 +386,49 @@ function Viewer(props) {
 							title += ' for ' + record.displayValue;
 						}
 						title = <Text className={`${styles.VIEWER_ANCILLARY_FONTSIZE} font-bold`}>{title}</Text>;
+						if (icon) {
+							title = <HStack className="items-center"><Icon as={icon} className="w-[32px] h-[32px] mr-2" />{title}</HStack>
+						}
 					}
-					components.push(<VStack key={'ancillary-' + ix} className="my-3">{title}{element}</VStack>);
+					components.push(<VStack
+										ref={(el) => (ancillaryItemsRef.current[ix +1 /* offset for "scroll to top" */] = el)}
+										key={'ancillary-' + ix}
+										className="my-3"
+									>
+										{title}
+										{element}
+									</VStack>);
 				});
 			}
 			return components;
 		},
 		onLayout = (e) => {
 			setContainerWidth(e.nativeEvent.layout.width);
-		};
+		},
+		scrollToAncillaryItem = (ix) => {
+			ancillaryItemsRef.current[ix]?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'start',
+			});
+		},
+		onScroll = useCallback(
+			_.debounce((e) => {
+				if (!showAncillaryButtons) {
+					return;
+				}
+				const
+					scrollY = e.nativeEvent.contentOffset.y,
+					isFabVisible = scrollY > 50;
+				fabOpacity.value = isFabVisible ? 1 : 0;
+				if (isFabVisible) {
+					setIsFabVisible(true);
+				} else {
+					// delay removal from DOM until fade-out is complete
+					setTimeout(() => setIsFabVisible(isFabVisible), FAB_FADE_TIME);
+				}
+			}, 100), // delay
+			[]
+		);
 
 	useEffect(() => {
 		if (viewerSetup && record?.getSubmitValues) {
@@ -356,15 +442,27 @@ function Viewer(props) {
 
 	const
 		showDeleteBtn = onDelete && viewerCanDelete,
-		showCloseBtn = !isSideEditor;
+		showCloseBtn = !isSideEditor && !isSmartEditor && onClose,
+		showFooter = (showDeleteBtn || showCloseBtn);
 	let additionalButtons = null,
 		viewerComponents = null,
-		ancillaryComponents = null;
+		ancillaryComponents = null,
+		fab = null;
 	
 	if (containerWidth) { // we need to render this component twice in order to get the container width. Skip this on first render
 		additionalButtons = buildAdditionalButtons(additionalViewButtons);
 		viewerComponents = buildFromItems();
 		ancillaryComponents = buildAncillary();
+
+		if (showAncillaryButtons && !_.isEmpty(getAncillaryButtons())) {
+			fab = <Animated.View style={fabAnimatedStyle}>
+					<DynamicFab
+						buttons={getAncillaryButtons()}
+						collapseOnPress={false}
+						tooltip="Scroll to Ancillary Item"
+					/>
+				</Animated.View>;
+		}
 	}
 
 	let canEdit = true;
@@ -385,6 +483,33 @@ function Viewer(props) {
 		className += ' ' + props.className;
 	}
 
+	const footer = showFooter ? 
+			<Footer className="justify-end">
+				{showDeleteBtn && 
+					<HStack className="flex-1 justify-start">
+						<Button
+							{...testProps('deleteBtn')}
+							key="deleteBtn"
+							onPress={onDelete}
+							className={`
+								text-white
+								bg-warning-500
+								hover:bg-warning-600
+							`}
+							text="Delete"
+						/>
+					</HStack>}
+				{showCloseBtn &&
+					<Button
+						{...testProps('closeBtn')}
+						key="closeBtn"
+						onPress={onClose}
+						className="text-white"
+						text="Close"
+					/>}
+			</Footer> : null;
+
+	const scrollToTopAnchor = <Box ref={(el) => (ancillaryItemsRef.current[0] = el)} className="h-0" />;
 	return <VStackNative
 				{...testProps(self)}
 				style={style}
@@ -396,6 +521,8 @@ function Viewer(props) {
 					<ScrollView
 						_web={{ height: 1 }}
 						ref={scrollViewRef}
+						onScroll={onScroll}
+						scrollEventThrottle={16 /* ms */}
 						className={`
 							Viewer-ScrollView
 							w-full
@@ -403,6 +530,7 @@ function Viewer(props) {
 							flex-1
 						`}
 					>
+						{scrollToTopAnchor}
 						{canEdit && onEditMode &&
 							<Toolbar className="justify-end">
 								<HStack className="flex-1 items-center">
@@ -425,40 +553,23 @@ function Viewer(props) {
 							</Toolbar>}
 						
 						{!_.isEmpty(additionalButtons) && 
-							<Toolbar className="justify-end flex-wrap">
+							<Toolbar className="justify-end flex-wrap gap-2">
 								{additionalButtons}
 							</Toolbar>}
 						
+						{showAncillaryButtons && !_.isEmpty(getAncillaryButtons()) && 
+							<Toolbar className="justify-start flex-wrap gap-2">
+								<Text>Scroll:</Text>
+								{buildAdditionalButtons(_.omitBy(getAncillaryButtons(), (btnConfig) => btnConfig.reference === 'scrollToTop'))}
+							</Toolbar>}
+						
 						{containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD ? <HStack className="Viewer-formComponents-HStack p-4 gap-4 justify-center">{viewerComponents}</HStack> : null}
 						{containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD ? <VStack className="Viewer-formComponents-VStack p-4">{viewerComponents}</VStack> : null}
 						<VStack className="Viewer-AncillaryComponents m-2 pt-4 px-2">{ancillaryComponents}</VStack>
 					</ScrollView>
 
-					{(showDeleteBtn || showCloseBtn) && 
-						<Footer className="justify-end">
-							{showDeleteBtn && 
-								<HStack className="flex-1 justify-start">
-									<Button
-										{...testProps('deleteBtn')}
-										key="deleteBtn"
-										onPress={onDelete}
-										className={`
-											text-white
-											bg-warning-500
-											hover:bg-warning-600
-										`}
-										text="Delete"
-									/>
-								</HStack>}
-							{onClose && showCloseBtn &&
-								<Button
-									{...testProps('closeBtn')}
-									key="closeBtn"
-									onPress={onClose}
-									className="text-white"
-									text="Close"
-								/>}
-						</Footer>}
+					{footer}
+					{isFabVisible && fab}
 
 				</>}
 			</VStackNative>;

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 ArrowUp from './Icons/ArrowUp.js';
 import Ban from './Icons/Ban.js';
 import Bars from './Icons/Bars.js';
 import BarsStaggered from './Icons/BarsStaggered.js';
@@ -253,6 +254,7 @@ const components = {
 	AnglesLeft,
 	AnglesRight,
 	Asterisk,
+	ArrowUp,
 	Ban,
 	Bars,
 	BarsStaggered,

package/src/Functions/buildAdditionalButtons.js

@@ -7,30 +7,23 @@ export default function buildAdditionalButtons(configs, self, handlerArgs = {})
 	_.each(configs, (config) => {
 		const {
 				key,
-				text,
-				handler,
-				icon,
-				isDisabled,
-				tooltip,
 				color = '#fff',
+				...configToPass
 			} = config,
 			buttonProps = {
-				key,
-				parent: self,
-				reference: key,
-				text,
-				icon,
-				isDisabled,
-				tooltip,
-				color,
+				...configToPass,
 			};
-		if (handler) {
-			buttonProps.onPress = () => handler(handlerArgs);
+			buttonProps.parent = config.self;
+			buttonProps.color = color;
+
+		if (!config.onPress && config.handler) {
+			buttonProps.onPress = () => config.handler(handlerArgs);
 		}
 		
 		additionalButtons.push(<Button
 			{...testProps(key)}
 			{...buttonProps}
+			key={key}
 		/>);
 	});
 	return additionalButtons;

package/src/Functions/isValidDate.js

@@ -0,0 +1,5 @@
+export default function(value, allowNull = true) {
+	if (allowNull && !value) return true; // Allow null or empty values
+	const date = new Date(value);
+	return !isNaN(date.getTime()); // Check if the date is valid
+}

package/src/Functions/urlize.js

@@ -0,0 +1,6 @@
+import UiGlobals from '../UiGlobals';
+import Inflector from 'inflector-js';
+
+export default function urlize(str) {
+	return '/' + UiGlobals.urlPrefix + Inflector.dasherize(Inflector.underscore(str));
+}

package/src/Constants/EditorModes.js

@@ -1,2 +0,0 @@
-export const EDITOR_MODE_ADD = 'EDITOR_MODE_ADD';
-export const EDITOR_MODE_EDIT = 'EDITOR_MODE_EDIT';