@onehat/ui 0.4.61 → 0.4.62

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.61",
+	"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,7 +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 '../Buttons/DynamicFab.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';
@@ -71,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
@@ -140,7 +148,13 @@ function Form(props) {
 		} = props,
 		formRef = useRef(),
 		ancillaryItemsRef = useRef({}),
-		ancillaryFabs = 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;
 
@@ -158,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(),
@@ -902,13 +924,15 @@ function Form(props) {
 		},
 		buildAncillary = () => {
 			const components = [];
-			ancillaryFabs.current = [];
+			setAncillaryButtons([]);
 			if (ancillaryItems.length) {
 
 				// add the "scroll to top" button
-				ancillaryFabs.current.push({
+				getAncillaryButtons().push({
 					icon: ArrowUp,
+					reference: 'scrollToTop',
 					onPress: () => scrollToAncillaryItem(0),
+					tooltip: 'Scroll to top',
 				});
 
 				_.each(ancillaryItems, (item, ix) => {
@@ -925,11 +949,12 @@ function Form(props) {
 						return;
 					}
 					if (icon) {
-						// TODO: this assumes that if one Ancillary item has an icon, they all do.
-						// If they don't, the ix will be wrong.
-						ancillaryFabs.current.push({
+						// 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) {
@@ -959,7 +984,7 @@ function Form(props) {
 									`}
 								>{title}</Text>;
 						if (icon) {
-							title = <HStack className="items-center"><Icon as={icon} size="lg" className="mr-2" />{title}</HStack>
+							title = <HStack className="items-center"><Icon as={icon} className="w-[32px] h-[32px] mr-2" />{title}</HStack>
 						}
 					}
 					if (description) {
@@ -988,12 +1013,6 @@ function Form(props) {
 			}
 			return components;
 		},
-		scrollToAncillaryItem = (ix) => {
-			ancillaryItemsRef.current[ix]?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'start',
-			});
-		},
 		onSubmitError = (errors, e) => {
 			if (editorType === EDITOR_TYPE__INLINE) {
 				alert(errors.message);
@@ -1026,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) {
@@ -1111,8 +1154,9 @@ function Form(props) {
 		style.maxHeight = maxHeight;
 	}
 
-	const formButtons = [];
 	let modeHeader = null,
+		formButtons = null,
+		scrollButtons = null,
 		footer = null,
 		footerButtons = null,
 		formComponents,
@@ -1188,16 +1232,19 @@ 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 (!_.isEmpty(ancillaryFabs.current)) {
-				fab = <DynamicFab
-							fabs={ancillaryFabs.current}
+			if (showAncillaryButtons && !_.isEmpty(getAncillaryButtons())) {
+				fab = <Animated.View style={fabAnimatedStyle}>
+						<DynamicFab
+							buttons={getAncillaryButtons()}
 							collapseOnPress={false}
 							className="bottom-[55px]"
-						/>;
+							tooltip="Scroll to Ancillary Item"
+						/>
+					</Animated.View>;
 			}
 		}
 
@@ -1412,6 +1459,8 @@ function Form(props) {
 								pb-1
 								web:min-h-[${minHeight}px]
 							`}
+							onScroll={onScroll}
+							scrollEventThrottle={16 /* ms */}
 							contentContainerStyle={{
 								// height: '100%',
 							}}
@@ -1420,11 +1469,16 @@ function Form(props) {
 							{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}
-					{fab}
+					{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/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,4 +1,4 @@
-import { useEffect, useRef, useState, isValidElement, } from 'react';
+import { useEffect, useCallback, useRef, useState, isValidElement, } from 'react';
 import {
 	Box,
 	HStack,
@@ -8,11 +8,17 @@ import {
 	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,
@@ -26,7 +32,7 @@ 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 '../Buttons/DynamicFab.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';
@@ -35,11 +41,14 @@ 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,
@@ -71,10 +80,25 @@ function Viewer(props) {
 		} = props,
 		scrollViewRef = useRef(),
 		ancillaryItemsRef = useRef({}),
-		ancillaryFabs = 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 = () => {
@@ -301,13 +325,16 @@ function Viewer(props) {
 		},
 		buildAncillary = () => {
 			const components = [];
-			ancillaryFabs.current = [];
+			setAncillaryButtons([]);
 			if (ancillaryItems.length) {
 
 				// add the "scroll to top" button
-				ancillaryFabs.current.push({
+				getAncillaryButtons().push({
 					icon: ArrowUp,
+					key: 'scrollToTop',
+					reference: 'scrollToTop',
 					onPress: () => scrollToAncillaryItem(0),
+					tooltip: 'Scroll to top',
 				});
 
 				_.each(ancillaryItems, (item, ix) => {
@@ -324,9 +351,11 @@ function Viewer(props) {
 					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.
-						ancillaryFabs.current.push({
+						getAncillaryButtons().push({
 							icon,
-							onPress: () => scrollToAncillaryItem(ix +1), // offset for the "scroll to top" button
+							key: 'ancillary-' + ix,
+							onPress: () => { scrollToAncillaryItem(ix +1)}, // offset for the "scroll to top" button
+							tooltip: title,
 						});
 					}
 					if (type.match(/Grid/) && !itemPropsToPass.h) {
@@ -358,7 +387,7 @@ function Viewer(props) {
 						}
 						title = <Text className={`${styles.VIEWER_ANCILLARY_FONTSIZE} font-bold`}>{title}</Text>;
 						if (icon) {
-							title = <HStack className="items-center"><Icon as={icon} size="lg" className="mr-2" />{title}</HStack>
+							title = <HStack className="items-center"><Icon as={icon} className="w-[32px] h-[32px] mr-2" />{title}</HStack>
 						}
 					}
 					components.push(<VStack
@@ -373,15 +402,33 @@ function Viewer(props) {
 			}
 			return components;
 		},
+		onLayout = (e) => {
+			setContainerWidth(e.nativeEvent.layout.width);
+		},
 		scrollToAncillaryItem = (ix) => {
 			ancillaryItemsRef.current[ix]?.scrollIntoView({
 				behavior: 'smooth',
 				block: 'start',
 			});
 		},
-		onLayout = (e) => {
-			setContainerWidth(e.nativeEvent.layout.width);
-		};
+		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) {
@@ -395,7 +442,7 @@ function Viewer(props) {
 
 	const
 		showDeleteBtn = onDelete && viewerCanDelete,
-		showCloseBtn = !isSideEditor,
+		showCloseBtn = !isSideEditor && !isSmartEditor && onClose,
 		showFooter = (showDeleteBtn || showCloseBtn);
 	let additionalButtons = null,
 		viewerComponents = null,
@@ -407,12 +454,14 @@ function Viewer(props) {
 		viewerComponents = buildFromItems();
 		ancillaryComponents = buildAncillary();
 
-		if (!_.isEmpty(ancillaryFabs.current)) {
-			fab = <DynamicFab
-						fabs={ancillaryFabs.current}
+		if (showAncillaryButtons && !_.isEmpty(getAncillaryButtons())) {
+			fab = <Animated.View style={fabAnimatedStyle}>
+					<DynamicFab
+						buttons={getAncillaryButtons()}
 						collapseOnPress={false}
-						verticalOffset={showFooter ? 15 : 0}
-					/>;
+						tooltip="Scroll to Ancillary Item"
+					/>
+				</Animated.View>;
 		}
 	}
 
@@ -450,7 +499,7 @@ function Viewer(props) {
 							text="Delete"
 						/>
 					</HStack>}
-				{onClose && showCloseBtn &&
+				{showCloseBtn &&
 					<Button
 						{...testProps('closeBtn')}
 						key="closeBtn"
@@ -472,6 +521,8 @@ function Viewer(props) {
 					<ScrollView
 						_web={{ height: 1 }}
 						ref={scrollViewRef}
+						onScroll={onScroll}
+						scrollEventThrottle={16 /* ms */}
 						className={`
 							Viewer-ScrollView
 							w-full
@@ -502,17 +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>
 
 					{footer}
-					{fab}
+					{isFabVisible && fab}
 
 				</>}
 			</VStackNative>;

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/Components/Buttons/DynamicFab.js

@@ -1,98 +0,0 @@
-import { useCallback } from 'react';
-import {
-	Fab, FabIcon, FabLabel,
-	ScrollView,
-	VStack,
-} from '@project-components/Gluestack';
-import Animated, {
-	useSharedValue,
-	useAnimatedStyle,
-	withTiming,
-	interpolate,
-} from 'react-native-reanimated';
-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 FABs beneath it.
-
-export default function DynamicFab(props) {
-	const {
-			fabs,
-			icon = null,
-			label = null,
-			collapseOnPress = true,
-		} = props,
-		isExpanded = useSharedValue(0),
-		toggleFab = useCallback(() => {
-			isExpanded.value = isExpanded.value ? 0 : 1;
-		}, []),
-		fabSpacing = 50,
-		verticalOffset = 15; // 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}>
-					{fabs
-						.slice() // clone, so we don't mutate the original array
-						.reverse() // so fabs appear in the correct order
-						.map((fab, index) => {
-							const {
-									icon,
-									label,
-									onPress,
-								} = fab,
-								animatedStyle = useAnimatedStyle(() => {
-									const translateY = interpolate(
-										isExpanded.value,
-										[0, 1],
-										[0, -(fabSpacing * (index + 1)) - verticalOffset]
-									);
-									return {
-										transform: [{ translateY }],
-										opacity: withTiming(isExpanded.value, { duration: 200 }),
-									};
-								});
-
-							return <Animated.View
-										key={index}
-										style={animatedStyle}
-										className="absolute bottom-0 right-0"
-									>
-										<Fab
-											size="md"
-											className="bg-primary-600"
-											onPress={() => {
-												onPress();
-												if (collapseOnPress) {
-													isExpanded.value = 0;
-												}
-											}}
-											style={{
-												shadowColor: 'transparent', // otherwise, on collapse a bunch of shadows build up for a moment!
-											}}
-										>
-											<FabIcon as={icon} />
-											{label && <FabLabel>{label}</FabLabel>}
-										</Fab>
-									</Animated.View>;
-						})}
-				<Fab
-					size="lg"
-					onPress={toggleFab}
-					className="z-100 bg-primary-600"
-				>
-					<FabIcon as={isExpanded.value ? Xmark : icon || EllipsisVertical} />
-					{label && <FabLabel>{label}</FabLabel>}
-				</Fab>
-			</VStack>;
-};

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';