@onehat/ui 0.4.103 → 0.4.104

package/.github/copilot-instructions.md.bak.20260307094051

@@ -0,0 +1,65 @@
+# Copilot Instructions
+
+## General Principles
+- Be direct, concise, and critical. Do not apologize, agree blindly, be sycophantic, or use flattery.
+- If a request is inefficient or flawed, point it out and suggest a better, more secure, or more idiomatic approach.
+- Use "Uncle Bob's Clean Code" principles as a baseline for code quality.
+- Prioritize clarity over cleverness.
+- Avoid unnecessary abstractions.
+- Prefer explicit code over magic.
+- Follow the project's existing coding style and conventions.
+- Do not introduce new dependencies unless absolutely necessary.
+- Always consider security implications and best practices.
+- Aim for full test coverage of new code, and suggest tests for existing code when appropriate.
+
+<!-- ## Coding Standards
+
+### Naming
+- Use descriptive variable and function names.
+- Do not abbreviate unless universally understood.
+- Use camelCase for JavaScript variables and functions.
+- Use PascalCase for React components.
+- Use snake_case for database columns.
+
+### Comments
+- Do not write obvious comments.
+- Only comment non-obvious business logic.
+- Prefer self-documenting code.
+
+## Error Handling
+- Always handle errors explicitly.
+- Do not swallow exceptions.
+- Return meaningful error messages.
+
+## Security
+- Never expose secrets or API keys.
+- Validate and sanitize all user input.
+- Use prepared statements for database queries.
+
+## Project-Specific Notes
+
+### Backend (PHP / CakePHP)
+- Follow PSR-12 formatting.
+- Use dependency injection where appropriate.
+- Do not use deprecated framework methods.
+- Prefer modern APIs over legacy helpers.
+
+### Frontend (React / Expo)
+- Use functional components only.
+- Prefer hooks over class components.
+- Avoid inline styles unless necessary.
+- Keep components under 200 lines.
+
+## Testing
+- Suggest unit tests for new logic.
+- Mock external dependencies.
+- Keep tests deterministic.
+
+## Performance
+- Avoid unnecessary loops.
+- Do not perform database queries inside loops.
+- Prefer memoization when appropriate.
+
+## Output Expectations
+- Produce production-ready code.
+- Avoid TODO comments unless necessary. -->

package/package.json

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

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

@@ -90,6 +90,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 			isInTag = false,
 			minimizeForRow = false,
 			reloadOnTrigger = false,
+			loadAfterRender = false,
 			searchHasInitialPercent = false,
 			menuHeight,
 			placeholder,
@@ -585,11 +586,16 @@ export const ComboComponent = forwardRef((props, ref) => {
 		};
 
 	useEffect(() => {
-		// on render, focus the input
 		if (!isRendered) {
 			return () => {};
 		}
+		
+		if (loadAfterRender) {
+			Repository?.reload();
+		}
+		
 		if (autoFocus && !inputRef.current.isFocused()) {
+			// on render, focus the input
 			inputRef.current.focus();
 		}
 
@@ -599,7 +605,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 			}
 		};
 
-	}, [isRendered]);
+	}, [isRendered, loadAfterRender, Repository]);
 
 	useEffect(() => {
 		(async () => {

package/src/Components/Form/Form.js

@@ -253,8 +253,9 @@ function Form(props) {
 					'border-r-grey-200',
 					'px-1',
 					styles.INLINE_EDITOR_MIN_WIDTH,
-				);
-			_.each(columnsConfig, (config, ix) => {
+				),
+				validColumnsConfig = _.filter(columnsConfig, (config) => !!config); // filter out any null/undefined configs
+			_.each(validColumnsConfig, (config, ix) => {
 				let {
 						fieldName,
 						isEditable = false,
@@ -273,7 +274,7 @@ function Form(props) {
 					type,
 					editorTypeProps = {},
 					viewerTypeProps = {};
-				
+			
 				if (isHidden) {
 					return;
 				}
@@ -965,9 +966,11 @@ function Form(props) {
 					/>;
 		},
 		buildAncillary = () => {
-			const components = [];
+			const
+				validAncillaryItems = _.filter(ancillaryItems, (item) => !!item), // filter out any null/undefined items
+				components = [];
 			setAncillaryButtons([]);
-			if (ancillaryItems.length) {
+			if (validAncillaryItems.length) {
 
 				// add the "scroll to top" button
 				getAncillaryButtons().push({
@@ -978,7 +981,7 @@ function Form(props) {
 					tooltip: 'Scroll to top',
 				});
 
-				_.each(ancillaryItems, (item, ix) => {
+				_.each(validAncillaryItems, (item, ix) => {
 					let {
 							type,
 							title = null,

package/src/Components/Grid/Grid.js

@@ -589,6 +589,8 @@ function GridComponent(props) {
 						'flex-row',
 						'grow',
 						'max-h-[80px]',
+						'focus:outline-none', // hide the focus outline
+						'focus-visible:outline-none',
 					)}
 				>
 					{({
@@ -1914,6 +1916,8 @@ function GridComponent(props) {
 		'w-full',
 		'border',
 		'border-grey-300',
+		'focus:outline-none', // hide the focus outline
+		'focus-visible:outline-none',
 	);
 	if (props.className) {
 		className += ' ' + props.className;

package/src/Components/Grid/GridRow.js

@@ -490,7 +490,11 @@ const GridRow = forwardRef((props, ref) => {
 						}}
 					>{rowContents}</HStackNative>;
 		if (rowProps.tooltip) {
-			row = <Tooltip label={rowProps.tooltip} placement="bottom left">{row}</Tooltip>;
+			row = <Tooltip
+						label={rowProps.tooltip}
+						placement="bottom left"
+						triggerClassName={rowClassName}
+					>{row}</Tooltip>;
 		}
 		return row;
 	}, [

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -47,6 +47,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				},
 				secondaryEditorType,
 				secondaryOnAdd,
+				secondaryOnBeforeAdd,
 				secondaryOnChange, // any kind of crud change
 				secondaryOnBeforeDelete,
 				secondaryOnDelete,
@@ -201,10 +202,26 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				}
 
 				if (getListeners().onBeforeAdd) {
-					const listenerResult = await getListeners().onBeforeAdd();
+					// This listener is set by child components using setWithEditListeners()
+					const listenerResult = await getListeners().onBeforeAdd(addValues);
+					if (listenerResult === false) {
+						return;
+					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
+				}
+				if (secondaryOnBeforeAdd) {
+					// This listener is set by parent components using a prop
+					const listenerResult = await secondaryOnBeforeAdd(addValues);
 					if (listenerResult === false) {
 						return;
 					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
 				}
 
 				if (isTree) {

package/src/Components/Hoc/withEditor.js

@@ -47,6 +47,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				},
 				editorType,
 				onAdd,
+				onBeforeAdd,
 				onChange, // any kind of crud change
 				onBeforeDelete,
 				onDelete,
@@ -218,10 +219,26 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 
 				if (getListeners().onBeforeAdd) {
-					const listenerResult = await getListeners().onBeforeAdd();
+					// This listener is set by child components using setWithEditListeners()
+					const listenerResult = await getListeners().onBeforeAdd(addValues);
+					if (listenerResult === false) {
+						return;
+					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
+				}
+				if (onBeforeAdd) {
+					// This listener is set by parent components using a prop
+					const listenerResult = await onBeforeAdd(addValues);
 					if (listenerResult === false) {
 						return;
 					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
 				}
 
 				if (isTree) {

package/src/Components/Hoc/withPdfButtons.js

@@ -418,6 +418,9 @@ export default function withPdfButtons(WrappedComponent) {
 			},
 		];
 		_.each(buttons, (button) => {
+			if (!button) {
+				return; // guard against null/undefined
+			}
 			if (!_.find(additionalEditButtons, btn => button.key === btn.key)) { 
 				additionalEditButtons.push(button);
 			}

package/src/Components/Hoc/withPresetButtons.js

@@ -68,6 +68,7 @@ export default function withPresetButtons(WrappedComponent) {
 				canDeleteRootNode = false,
 				isSideEditor = false,
 				canEditorViewOnly = false,
+				canRecordBeAdded, // fn(selection) returns bool on if the current record(s) can be added
 				canRecordBeEdited, // fn(selection) returns bool on if the current record(s) can be edited
 				canRecordBeDeleted, // fn(selection) returns bool on if the current record(s) can be deleted
 				canRecordBeDuplicated, // fn(selection) returns bool on if the current record(s) can be duplicated
@@ -239,6 +240,7 @@ export default function withPresetButtons(WrappedComponent) {
 						};
 						icon = Plus;
 						if (isNoSelectorSelected() ||
+							(canRecordBeAdded && !canRecordBeAdded(selection)) ||
 							(isTree && isEmptySelection())
 						) {
 							isDisabled = true;

package/src/Components/Panel/Panel.js

@@ -50,6 +50,7 @@ function Panel(props) {
 			disableTitleChange = false,
 
 			// Content
+			renderWhileCollapsed = false,
 			topToolbar = null,
 			children = null,
 			bottomToolbar = null,
@@ -139,14 +140,7 @@ function Panel(props) {
 		className += ' ' + filteredClassName;
 	}
 
-	return <VStackNative
-				{...testProps(self?.reference)}
-				className={className}
-				style={style}
-			>
-				{isDisabled && <Mask />}
-				{headerComponent}
-				{!isCollapsed && <>
+	let content = <>
 					{topToolbar}
 					<VStack
 						className={clsx(
@@ -169,7 +163,41 @@ function Panel(props) {
 					</VStack>
 					{bottomToolbar}
 					{footer}
-				</>}
+				</>;
+	if (renderWhileCollapsed) {
+		content = <Box
+					className={clsx(
+						'Panel-Box',
+						...(isCollapsed ? 
+							[
+								'w-[0px]',
+								'h-[0px]',
+								'overflow-hidden',
+							] :
+							[
+								'w-full',
+								'h-full',
+							])
+					)}
+				>
+					{content}
+				</Box>;
+	} else {
+		if (isCollapsed) {
+			// hide the content when collapsed
+			content = null;
+		}
+	}
+	
+
+	return <VStackNative
+				{...testProps(self?.reference)}
+				className={className}
+				style={style}
+			>
+				{isDisabled && <Mask />}
+				{headerComponent}
+				{content}
 			</VStackNative>;
 
 }

package/src/Components/Pms/Editor/PmEventsEditor.js

@@ -92,18 +92,18 @@ export default function PmEventsEditor(props) {
 				case PM_EVENT_TYPES__INITIAL:
 				case PM_EVENT_TYPES__WORK_ORDER:
 				case PM_EVENT_TYPES__ALERT:
+				case PM_EVENT_TYPES__COMPLETE:
 					setIsIntervalHidden(true);
 					setIsDateHidden(true);
 					setIsMeterReadingHidden(false);
 					setIsDetailsHidden(false);
 					setIsPmTechnicianHidden(true);
 					break;
-				case PM_EVENT_TYPES__COMPLETE:
 				case PM_EVENT_TYPES__RESET:
 					setIsIntervalHidden(true);
 					setIsDateHidden(true);
-					setIsMeterReadingHidden(false);
-					setIsDetailsHidden(false);
+					setIsMeterReadingHidden(true);
+					setIsDetailsHidden(true);
 					setIsPmTechnicianHidden(true);
 					break;
 				case PM_EVENT_TYPES__DELAY_BY_DAYS:

package/src/Components/Pms/Screens/PmsManager.js

@@ -17,7 +17,7 @@ import ClockRegular from '../../Icons/ClockRegular.js';
 import OilCan from '../../Icons/OilCan.js';
 import TabBar from '../../Tab/TabBar.js';
 import TreeSpecific from '../Layout/TreeSpecific/TreeSpecific.js';
-import UpcomingPmsGrid from '../Grid/UpcomingPmsGrid.js';
+import UpcomingPmsGrid from '@src/Components/Grid/UpcomingPmsGrid.js';
 import PmEventsFilteredGridEditor from '@src/Components/Grid/PmEventsFilteredGridEditor.js';
 import PmEventsFilteredSideGridEditor from '@src/Components/Grid/PmEventsFilteredSideGridEditor.js';
 import _ from 'lodash';

package/src/Components/Screens/Manager.js

@@ -31,6 +31,7 @@ function ManagerScreen(props) {
 		[isModeSet, setIsModeSet] = useState(false),
 		[allowSideBySide, setAllowSideBySide] = useState(false),
 		[mode, setModeRaw] = useState(SCREEN_MODES__SIDE),
+		isDisabled = propsToPass._panel?.isDisabled ?? false, // this is kind of a hack, since there's no Panel, but it works
 		actualMode = (!allowSideBySide || mode === SCREEN_MODES__FULL) ? SCREEN_MODES__FULL : SCREEN_MODES__SIDE,
 		setMode = (newMode) => {
 			if (!allowSideBySide && newMode === SCREEN_MODES__SIDE) {
@@ -97,7 +98,7 @@ function ManagerScreen(props) {
 					onFullWidth={() => setMode(SCREEN_MODES__FULL)}
 					onSideBySide={() => setMode(SCREEN_MODES__SIDE)}
 				/>
-				{isRendered && isModeSet && whichComponent}
+				{isRendered && isModeSet && !isDisabled && whichComponent}
 			</VStackNative>;
 }
 

package/src/Components/Toolbar/PaginationToolbar.js

@@ -11,15 +11,17 @@ const PaginationToolbar = forwardRef((props, ref) => {
 	const {
 			toolbarItems = [],
 			disablePageSize = false,
+			disableMinimizing = false,
 			minimize,
 		} = props,
 		[minimizeLocal, setMinimizeLocal] = useState(minimize),
 		propsToPass = _.omit(props, 'toolbarItems'),
 		showPagination = true,//props.Repository?.totalPages > 1,
 		onLayout = (e) => {
-			if (minimize) {
-				return; // skip if already minimized
+			if (minimize || disableMinimizing) {
+				return;
 			}
+			
 			// Note to future self: this is using hard-coded values.
 			// Eventually might want to make it responsive to actual sizes
 
@@ -32,7 +34,7 @@ const PaginationToolbar = forwardRef((props, ref) => {
 				threshold = pagingToolbarMinwidth + toolbarItemsMinwidth,
 				shouldMinimize = width < threshold;
 
-			if (shouldMinimize !== minimize) {
+			if (shouldMinimize !== minimizeLocal) {
 				setMinimizeLocal(shouldMinimize);
 			}
 		};

package/src/Components/Viewer/Viewer.js

@@ -350,9 +350,11 @@ function Viewer(props) {
 			return <HStack key={ix} className="Viewer-HStack4 px-2 pb-1">{element}</HStack>;
 		},
 		buildAncillary = () => {
-			const components = [];
+			const
+				validAncillaryItems = _.filter(ancillaryItems, (item) => !!item), // filter out any null/undefined items
+				components = [];
 			setAncillaryButtons([]);
-			if (ancillaryItems.length) {
+			if (validAncillaryItems.length) {
 
 				// add the "scroll to top" button
 				getAncillaryButtons().push({
@@ -363,7 +365,7 @@ function Viewer(props) {
 					tooltip: 'Scroll to top',
 				});
 
-				_.each(ancillaryItems, (item, ix) => {
+				_.each(validAncillaryItems, (item, ix) => {
 					let {
 						type,
 						title = null,

package/src/Constants/PmSchedules.js

@@ -0,0 +1 @@
+export const PM_SCHEDULES__ONE_OFF = 200;

package/src/Functions/buildAdditionalButtons.js

@@ -5,6 +5,11 @@ import _ from 'lodash';
 export default function buildAdditionalButtons(configs, self, handlerArgs = {}) {
 	const additionalButtons = [];
 	_.each(configs, (config) => {
+
+		if (!config) {
+			return;
+		}
+		
 		const {
 				key,
 				color = '#fff',