@onehat/ui 0.2.51 → 0.2.54

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.51",
+	"version": "0.2.54",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -19,8 +19,9 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.16.0",
+		"@onehat/data": "^1.16.10",
 		"@hookform/resolvers": "^2.9.11",
+		"@k-renwick/colour-mixer": "^1.2.1",
 		"ckeditor5-custom-build": "file:ckeditor5",
 		"js-cookie": "^3.0.1",
 		"native-base": "^3.4.25",

package/src/Components/Buttons/CheckboxButton.js

@@ -0,0 +1,15 @@
+import IconButton from './IconButton.js';
+import SquareCheck from '../Icons/SquareCheck.js';
+import Square from '../Icons/Square.js';
+
+export default function CheckboxButton(props) {
+	const {
+			isChecked,
+		} = props;
+
+	return <IconButton
+				icon={isChecked ? SquareCheck : Square }
+				{...props}
+			/>;
+}
+

package/src/Components/Buttons/IconButton.js

@@ -17,10 +17,14 @@ const IconButton = React.forwardRef((props, ref) => {
 			tooltipPlacement = 'bottom',
 		} = props;
 	const propsIcon = props._icon || {};
-	let icon = props.icon || <Icon {...propsIcon} />;
+	let icon = props.icon || <Icon {...propsIcon} />,
+		ret;
 	if (isLoading) {
 		icon = <Spinner {..._spinner} />;
 	}
+	if (!React.isValidElement(icon)) {
+		icon = <Icon as={icon} {...propsIcon} />;
+	}
 	const pressable = <Pressable
 							ref={ref}
 							borderRadius="md"
@@ -29,16 +33,23 @@ const IconButton = React.forwardRef((props, ref) => {
 							justifyContent="center"
 							alignItems="center"
 							p={2}
+							// bg={styles.ICON_BUTTON_BG}
+							_hover={{
+								bg: styles.ICON_BUTTON_BG_HOVER,
+							}}
 							_disabled={{
 								bg: styles.ICON_BUTTON_BG_DISABLED,
 							}}
+							_pressed={{
+								bg: styles.ICON_BUTTON_BG_PRESSED,
+							}}
 							{...props}
 						>
-							{icon}
+						{icon}
 						</Pressable>;
-	let ret = pressable;
+	ret = pressable;
 	if (tooltip) {
-		ret = <Tooltip label={tooltip} placement={tooltipPlacement}>{pressable}</Tooltip>;
+		ret = <Tooltip label={tooltip} placement={tooltipPlacement}>{ret}</Tooltip>;
 	}
 	return ret;
 });

package/src/Components/Container/Container.js

@@ -1,4 +1,4 @@
-import React, { useState, } from 'react';
+import React, { useState, useEffect, useId, } from 'react';
 import {
 	Column,
 	Row,
@@ -12,6 +12,8 @@ import {
 	UI_MODE_REACT_NATIVE,
 	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
+import getSaved from '../../Functions/getSaved.js';
+import setSaved from '../../Functions/setSaved.js';
 import Splitter from './Splitter.js';
 
 export default function Container(props) {
@@ -31,15 +33,49 @@ export default function Container(props) {
 			isWestCollapsed,
 			setIsWestCollapsed,
 		} = props,
+		id = useId(),
 		canResize = CURRENT_MODE === UI_MODE_WEB,
-		[localIsNorthCollapsed, setLocalIsNorthCollapsed] = useState(north ? north.props.startsCollapsed : false),
-		[localIsSouthCollapsed, setLocalIsSouthCollapsed] = useState(south ? south.props.startsCollapsed : false),
-		[localIsEastCollapsed, setLocalIsEastCollapsed] = useState(east ? east.props.startsCollapsed : false),
-		[localIsWestCollapsed, setLocalIsWestCollapsed] = useState(west ? west.props.startsCollapsed : false),
-		[northHeight, setNorthHeight] = useState(north ? north.props.h : 0),
-		[southHeight, setSouthHeight] = useState(south ? south.props.h : 0),
-		[eastWidth, setEastWidth] = useState(east ? east.props.w : 0),
-		[westWidth, setWestWidth] = useState(west ? west.props.w : 0),
+		[isReady, setIsReady] = useState(false),
+		[localIsNorthCollapsed, setLocalIsNorthCollapsedRaw] = useState(north ? north.props.startsCollapsed : false),
+		[localIsSouthCollapsed, setLocalIsSouthCollapsedRaw] = useState(south ? south.props.startsCollapsed : false),
+		[localIsEastCollapsed, setLocalIsEastCollapsedRaw] = useState(east ? east.props.startsCollapsed : false),
+		[localIsWestCollapsed, setLocalIsWestCollapsedRaw] = useState(west ? west.props.startsCollapsed : false),
+		[northHeight, setNorthHeightRaw] = useState(north ? north.props.h : 0),
+		[southHeight, setSouthHeightRaw] = useState(south ? south.props.h : 0),
+		[eastWidth, setEastWidthRaw] = useState(east ? east.props.w : 0),
+		[westWidth, setWestWidthRaw] = useState(west ? west.props.w : 0),
+		setLocalIsNorthCollapsed = (bool) => {
+			setLocalIsNorthCollapsedRaw(bool);
+			setSaved(id + '-localIsNorthCollapsed', bool);
+		},
+		setLocalIsSouthCollapsed = (bool) => {
+			setLocalIsSouthCollapsedRaw(bool);
+			setSaved(id + '-localIsSouthCollapsed', bool);
+		},
+		setLocalIsEastCollapsed = (bool) => {
+			setLocalIsEastCollapsedRaw(bool);
+			setSaved(id + '-localIsEastCollapsed', bool);
+		},
+		setLocalIsWestCollapsed = (bool) => {
+			setLocalIsWestCollapsedRaw(bool);
+			setSaved(id + '-localIsWestCollapsed', bool);
+		},
+		setNorthHeight = (height) => {
+			setNorthHeightRaw(height);
+			setSaved(id + '-northHeight', height);
+		},
+		setSouthHeight = (height) => {
+			setSouthHeightRaw(height);
+			setSaved(id + '-southHeight', height);
+		},
+		setEastWidth = (width) => {
+			setEastWidthRaw(width);
+			setSaved(id + '-eastWidth', width);
+		},
+		setWestWidth = (width) => {
+			setWestWidthRaw(width);
+			setSaved(id + '-westWidth', width);
+		},
 		onNorthResize = (delta) => {
 			const newHeight = northHeight + delta;
 			setNorthHeight(newHeight);
@@ -56,6 +92,68 @@ export default function Container(props) {
 			const newWidth = westWidth + delta;
 			setWestWidth(newWidth);
 		};
+
+	useEffect(() => {
+		// Restore saved settings
+		(async () => {
+			let key, val;
+			key = id + '-localIsNorthCollapsed';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setLocalIsNorthCollapsedRaw(val);
+			}
+
+			key = id + '-localIsSouthCollapsed';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setLocalIsSouthCollapsedRaw(val);
+			}
+
+			key = id + '-localIsEastCollapsed';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setLocalIsEastCollapsedRaw(val);
+			}
+
+			key = id + '-localIsWestCollapsed';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setLocalIsWestCollapsedRaw(val);
+			}
+
+			key = id + '-northHeight';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setNorthHeightRaw(val);
+			}
+
+			key = id + '-southHeight';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setSouthHeightRaw(val);
+			}
+
+			key = id + '-eastWidth';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setEastWidthRaw(val);
+			}
+
+			key = id + '-westWidth';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setWestWidthRaw(val);
+			}
+
+			if (!isReady) {
+				setIsReady(true);
+			}
+		})();
+	}, []);
+
+	if (!isReady) {
+		return null;
+	}
 		
 	let componentProps = {},
 		centerComponent = null,

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

@@ -412,6 +412,7 @@ export function Combo(props) {
 										flex={1}
 										h="100%"
 										m={0}
+										autoSubmitDelay={0}
 										borderTopRightRadius={0}
 										borderBottomRightRadius={0}
 										fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}

package/src/Components/Grid/Grid.js

@@ -21,6 +21,7 @@ import {
 	DROP_POSITION_BEFORE,
 	DROP_POSITION_AFTER,
 } from '../../Constants/Grid.js';
+import * as colourMixer from '@k-renwick/colour-mixer'
 import UiGlobals from '../../UiGlobals.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import withContextMenu from '../Hoc/withContextMenu.js';
@@ -35,6 +36,7 @@ import withSelection from '../Hoc/withSelection.js';
 import withWindowedEditor from '../Hoc/withWindowedEditor.js';
 import withInlineEditor from '../Hoc/withInlineEditor.js';
 import testProps from '../../Functions/testProps.js';
+import nbToRgb from '../../Functions/nbToRgb.js';
 import GridHeaderRow from './GridHeaderRow.js';
 import GridRow, { ReorderableGridRow } from './GridRow.js';
 import IconButton from '../Buttons/IconButton.js';
@@ -45,6 +47,7 @@ import NoReorderRows from '../Icons/NoReorderRows.js';
 import ReorderRows from '../Icons/ReorderRows.js';
 import _ from 'lodash';
 
+
 // Grid requires the use of HOC withSelection() whenever it's used.
 // The default export is *with* the HOC. A separate *raw* component is
 // exported which can be combined with many HOCs for various functionality.
@@ -67,7 +70,7 @@ export function Grid(props) {
 			columnsConfig = [], // json configurations for each column
 
 			columnProps = {},
-			getRowProps = () => {
+			getRowProps = (item) => {
 				return {
 					borderBottomWidth: 1,
 					borderBottomColor: 'trueGray.500',
@@ -348,19 +351,20 @@ export function Grid(props) {
 										/>;
 							}
 
-							let bg = styles.GRID_ROW_BG;
+							let bg = rowProps.bg || styles.GRID_ROW_BG,
+								mixWith;
 							if (isSelected) {
 								if (showHovers && isHovered) {
-									bg = styles.GRID_ROW_SELECTED_HOVER_BG;
+									mixWith = styles.GRID_ROW_SELECTED_HOVER_BG;
 								} else {
-									bg = styles.GRID_ROW_SELECTED_BG;
-								}
-							} else {
-								if (showHovers && isHovered) {
-									bg = styles.GRID_ROW_HOVER_BG;
-								} else {
-									bg = styles.GRID_ROW_BG;
+									mixWith = styles.GRID_ROW_SELECTED_BG;
 								}
+							} else if (showHovers && isHovered) {
+								mixWith = styles.GRID_ROW_HOVER_BG;
+							}
+							if (mixWith) {
+								const mixWithObj = nbToRgb(mixWith);
+								bg = colourMixer.blend(bg, 0.9, mixWithObj.color);
 							}
 							let WhichGridRow = GridRow,
 								rowReorderProps = {};

package/src/Components/Hoc/withFilters.js

@@ -12,6 +12,8 @@ import FormPanel from '../Panel/FormPanel.js';
 import Ban from '../Icons/Ban.js';
 import Gear from '../Icons/Gear.js';
 import Toolbar from '../Toolbar/Toolbar.js';
+import getSaved from '../../Functions/getSaved.js';
+import setSaved from '../../Functions/setSaved.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
@@ -34,8 +36,6 @@ export default function withFilters(WrappedComponent) {
 				customFilters = [], // of shape: { title, type, field, value, getRepoFilters(value) }
 				minFilters = 3,
 				maxFilters = 6,
-				getSaved,
-				setSaved,
 
 				// withData
 				Repository,
@@ -166,7 +166,7 @@ export default function withFilters(WrappedComponent) {
 						}
 						setSlots(newSlots);
 					}
-					if (save && setSaved) {
+					if (save) {
 						setSaved(id + '-filters', filters);
 					}
 				},
@@ -204,9 +204,12 @@ export default function withFilters(WrappedComponent) {
 					const filter = getFilterByField(field);
 					return filter?.type;
 				},
-				getIsFilterRange = (field) => {
-					// determines if filter is a "range" filter
+				getIsFilterRange = (filter) => {
+					let field = _.isString(filter) ? filter : filter.field;
 					const filterType = getFilterType(field);
+					if (filterType?.type) {
+						return inArray(filterType.type, ['NumberRange', 'DateRange'])
+					}
 					return inArray(filterType, ['NumberRange', 'DateRange']);
 				},
 				renderFilters = () => {
@@ -272,7 +275,7 @@ export default function withFilters(WrappedComponent) {
 					const newRepoFilters = [];
 					let filtersToUse = filters
 
-					if (!isReady && getSaved) {
+					if (!isReady) {
 						const savedFilters = await getSaved(id + '-filters');
 						if (!_.isEmpty(savedFilters)) {
 							// load saved filters
@@ -295,7 +298,7 @@ export default function withFilters(WrappedComponent) {
 									field,
 									value,
 								} = filter,
-								isFilterRange = getIsFilterRange(field);
+								isFilterRange = getIsFilterRange(filter);
 							if (isFilterRange) {
 								if (!!value) {
 									const

package/src/Components/Panel/TabPanel.js

@@ -1,4 +1,4 @@
-import React, { useState, } from 'react';
+import React, { useState, useEffect, useId, } from 'react';
 import {
 	Button,
 	Column,
@@ -16,6 +16,8 @@ import IconButton from '../Buttons/IconButton.js';
 import Minimize from '../Icons/Minimize.js';
 import Maximize from '../Icons/Maximize.js';
 import Panel from './Panel.js';
+import getSaved from '../../Functions/getSaved.js';
+import setSaved from '../../Functions/setSaved.js';
 import _ from 'lodash';
 
 
@@ -30,9 +32,12 @@ export default function TabPanel(props) {
 			startsCollapsed = true,
 			onChangeCurrentTab,
 			onChangeIsCollapsed,
+			saveCurrentTab = true,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
+		id = useId(),
+		[isReady, setIsReady] = useState(false),
 		[currentTab, setCurrentTabRaw] = useState(initialTab),
 		[isCollapsed, setIsCollapsedRaw] = useState(startsCollapsed),
 		setIsCollapsed = (isCollapsed) => {
@@ -40,22 +45,23 @@ export default function TabPanel(props) {
 			if (onChangeIsCollapsed) {
 				onChangeIsCollapsed(isCollapsed);
 			}
+			setSaved(id + '-isCollapsed', isCollapsed);
 		},
 		setCurrentTab = (ix) => {
 			setCurrentTabRaw(ix);
 			if (onChangeCurrentTab) {
 				onChangeCurrentTab(ix);
 			}
+			if (saveCurrentTab) {
+				setSaved(id + '-currentTab', ix);
+			}
 		},
 		getButtonProps = () => {
 			const
 				iconProps = {
 					size: 'md',
 				},
-				textProps = {
-					ml: '-8px',
-					mr: '8px',
-				},
+				textProps = {},
 				buttonProps = {
 					bg: styles.TAB_BG,
 					color: styles.TAB_COLOR,
@@ -279,54 +285,81 @@ export default function TabPanel(props) {
 		onToggleCollapse = () => {
 			setIsCollapsed(!isCollapsed);
 		};
-		if (direction === VERTICAL) {
-			return <Panel {...propsToPass}>
-						<Row flex={1} w="100%">
-							<Column
-								alignItems="center"
-								justifyContent="flex-start"
-								py={2}
-								pl={isCollapsed ? 1 : 4}
-								bg={styles.TAB_BAR_BG}
-								w={isCollapsed ? '50px' : tabWidth}
-							>
-								{renderTabs()}
-								<Column flex={1} w="100%" justifyContent="flex-end">
-									{renderToggleButton()}
-								</Column>
-							</Column>
-							<Column
-								alignItems="center"
-								justifyContent="flex-start"
-								flex={1}
-							>
-								{renderCurrentTabContent()}
-							</Column>
-						</Row>
-					</Panel>;
-		}
 
-		// HORIZONTAL
-		return <Panel flex={1} w="100%" {...propsToPass} {...props._panel}>
-					<Column flex={1} w="100%">
-						<Row
+	useEffect(() => {
+		// Restore saved settings
+		(async () => {
+			let key, val;
+			key = id + '-isCollapsed';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setIsCollapsed(val);
+			}
+
+			key = id + '-currentTab';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setCurrentTab(val);
+			}
+
+			if (!isReady) {
+				setIsReady(true);
+			}
+		})();
+	}, []);
+
+	if (!isReady) {
+		return null;
+	}
+
+	if (direction === VERTICAL) {
+		return <Panel {...propsToPass}>
+					<Row flex={1} w="100%">
+						<Column
 							alignItems="center"
 							justifyContent="flex-start"
-							p={2}
-							pb={0}
+							py={2}
+							pl={isCollapsed ? 1 : 4}
 							bg={styles.TAB_BAR_BG}
-							h={isCollapsed ? '30px' : tabHeight}
+							w={isCollapsed ? '50px' : tabWidth}
 						>
 							{renderTabs()}
-							<Row flex={1} h="100%" justifyContent="flex-end">
-								<Row h="100%">
-									{renderToggleButton()}
-								</Row>
-							</Row>
-						</Row>
-						<Row flex={1}>
+							<Column flex={1} w="100%" justifyContent="flex-end">
+								{renderToggleButton()}
+							</Column>
+						</Column>
+						<Column
+							alignItems="center"
+							justifyContent="flex-start"
+							flex={1}
+						>
 							{renderCurrentTabContent()}
-						</Row>
-					</Column>
+						</Column>
+					</Row>
 				</Panel>;
+	}
+
+	// HORIZONTAL
+	return <Panel flex={1} w="100%" {...propsToPass} {...props._panel}>
+				<Column flex={1} w="100%">
+					<Row
+						alignItems="center"
+						justifyContent="flex-start"
+						p={2}
+						pb={0}
+						bg={styles.TAB_BAR_BG}
+						h={isCollapsed ? '30px' : tabHeight}
+					>
+						{renderTabs()}
+						<Row flex={1} h="100%" justifyContent="flex-end">
+							<Row h="100%">
+								{renderToggleButton()}
+							</Row>
+						</Row>
+					</Row>
+					<Row flex={1}>
+						{renderCurrentTabContent()}
+					</Row>
+				</Column>
+			</Panel>;
 }

package/src/Components/Screens/DataMgt.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, } from 'react';
+import React, { useState, useEffect, useMemo, useId, } from 'react';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -12,6 +12,8 @@ import Container from '../Container/Container.js';
 import Panel from '../Panel/Panel.js';
 import TabPanel from '../Panel/TabPanel.js';
 import UploadDownload from '../Panel/UploadDownload.js';
+import getSaved from '../../Functions/getSaved.js';
+import setSaved from '../../Functions/setSaved.js';
 import _ from 'lodash';
 
 export default function DataMgt(props) {
@@ -40,12 +42,26 @@ export default function DataMgt(props) {
 		} = props;
 
 	const
+		id = useId(),
 		// westRef = useRef(),
-		[isWestCollapsed, setIsWestCollapsed] = useState(westStartsCollapsed),
-		[isEastCollapsed, setIsEastCollapsed] = useState(eastStartsCollapsed),
-		[isFullscreen, setIsFullscreen] = useState(false),
+		[isReady, setIsReady] = useState(false),
+		[isWestCollapsed, setIsWestCollapsedRaw] = useState(westStartsCollapsed),
+		[isEastCollapsed, setIsEastCollapsedRaw] = useState(eastStartsCollapsed),
+		[isFullscreen, setIsFullscreenRaw] = useState(false),
 		[westSelected, setWestSelectedRaw] = useState(),
 		[centerSelected, setCenterSelected] = useState(),
+		setIsWestCollapsed = (bool) => {
+			setIsWestCollapsedRaw(bool);
+			setSaved(id + '-isWestCollapsed', bool);
+		},
+		setIsEastCollapsed = (bool) => {
+			setIsEastCollapsedRaw(bool);
+			setSaved(id + '-isEastCollapsed', bool);
+		},
+		setIsFullscreen = (bool) => {
+			setIsFullscreenRaw(bool);
+			setSaved(id + '-isFullscreen', isFullscreen);
+		},
 		setWestSelected = (selected) => {
 			setWestSelectedRaw(selected);
 			setCenterSelected(); // clear selection in center
@@ -85,6 +101,51 @@ export default function DataMgt(props) {
 			}
 		};
 
+	useEffect(() => {
+		if (!getSaved) {
+			setIsReady(true);
+			return () => {};
+		}
+
+		// Restore saved settings
+		(async () => {
+
+			let key, val;
+			key = id + '-isWestCollapsed';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setIsWestCollapsedRaw(val);
+			}
+
+			key = id + '-isEastCollapsed';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setIsEastCollapsedRaw(val);
+			}
+
+			key = id + '-isFullscreen';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setIsFullscreenRaw(val);
+			}
+
+			key = id + '-westSelected';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setWestSelectedRaw(val);
+			}
+
+			key = id + '-centerSelected';
+			val = await getSaved(key);
+			if (!_.isNil(val)) {
+				setCenterSelectedRaw(val);
+			}
+
+			if (!isReady) {
+				setIsReady(true);
+			}
+		})();
+	}, []);
 
 	//   REGIONS -------------------------------------------------------
 	// 	[				] [							] [					]
@@ -238,6 +299,10 @@ export default function DataMgt(props) {
 		}
 	}
 
+	if (!isReady) {
+		return null;
+	}
+
 	return <Container
 				west={west}
 				isWestCollapsed={isWestCollapsed}

package/src/Components/Toolbar/Pagination.js

@@ -41,9 +41,6 @@ export default function Pagination(props) {
 	return useMemo(() => {
 		const
 			iconButtonProps = {
-				_hover: {
-					bg: 'trueGray.400',
-				},
 				// mx: 1,
 			},
 			iconProps = {

package/src/Components/Toolbar/PaginationToolbar.js

@@ -12,6 +12,7 @@ export default function PaginationToolbar(props) {
 		} = props,
 		[minimize, setMinimize] = useState(false),
 		propsToPass = _.omit(props, 'toolbarItems'),
+		showPagination = props.Repository?.totalPages > 1,
 		onLayout = (e) => {
 			// Note to future self: this is using hard-coded values.
 			// Eventually might want to make it responsive to actual sizes
@@ -30,6 +31,16 @@ export default function PaginationToolbar(props) {
 			}
 		};
 
+	let toolbarProps = {};
+	if (showPagination) {
+		toolbarProps = {
+			borderLeftWidth: 1,
+			borderLeftColor: 'trueGray.400',
+			pl: 3,
+			ml: 3,
+		};
+	}
+
 	return <Toolbar
 				bg="trueGray.200"
 				borderTopWidth={1}
@@ -37,7 +48,7 @@ export default function PaginationToolbar(props) {
 				w="100%"
 				onLayout={(e) => onLayout(e)}
 			>
-				<Pagination {...propsToPass} w={toolbarItems.length ? null : '100%'} minimize={minimize} />
-				{toolbarItems.length ? <Row flex={1} borderLeftWidth={1} borderLeftColor="trueGray.400" pl={3} ml={3}>{toolbarItems}</Row> : null}
+				{showPagination && <Pagination {...propsToPass} w={toolbarItems.length ? null : '100%'} minimize={minimize} />}
+				{toolbarItems.length ? <Row flex={1} {...toolbarProps}>{toolbarItems}</Row> : null}
 			</Toolbar>;
 };

package/src/Constants/Styles.js

@@ -61,7 +61,10 @@ const defaults = {
 	GRID_TOOLBAR_ITEMS_COLOR: 'trueGray.800',
 	GRID_TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled',
 	GRID_TOOLBAR_ITEMS_ICON_SIZE: 'sm',
+	ICON_BUTTON_BG: 'trueGray.200:alpha.0',
 	ICON_BUTTON_BG_DISABLED: 'trueGray.200',
+	ICON_BUTTON_BG_HOVER: '#000:alpha.20',
+	ICON_BUTTON_BG_PRESSED: '#000:alpha.30',
 	PANEL_FOOTER_BG: 'primary.100', // :alpha.50
 	PANEL_HEADER_BG: 'primary.100',
 	PANEL_HEADER_BG_VERTICAL: 'primary.100',

package/src/Functions/deleteSaved.js

@@ -0,0 +1,10 @@
+import oneHatData from '@onehat/data';
+import UiGlobals from '../UiGlobals.js';
+
+export default async function deleteSaved(key) {
+	const Repo = oneHatData.getRepository(UiGlobals.uiSavesRepo);
+	if (!Repo) {
+		return null;
+	}
+	await Repo.deleteById(key);
+}

package/src/Functions/getSaved.js

@@ -0,0 +1,38 @@
+import oneHatData from '@onehat/data';
+import UiGlobals from '../UiGlobals.js';
+import _ from 'lodash';
+
+export default async function getSaved(key) {
+	const
+		Repo = oneHatData.getRepository(UiGlobals.uiSavesRepo),
+		entity = Repo?.getById(key);
+
+	if (!entity) {
+		return null;
+	}
+
+	let value = entity.value;
+
+	if (entity.isJson) {
+		value = JSON.parse(value);
+		if (entity.isOneBuild) {
+			// Convert the data to an actual entity (or entities) of the correct type
+			const
+				Repository = oneHatData.getRepository(entity.model),
+				entities = [];
+			let i, data, entity;
+			if (_.isArray(value)) {
+				for (i = 0; i = value.length; i++) {
+					data = value[i];
+					entity = await Repository.createStandaloneEntity(data);
+					entities.push(entity);
+				}
+				value = entities;
+			} else {
+				value = await Repository.createStandaloneEntity(value);
+			}
+
+		}
+	}
+	return value;
+}

package/src/Functions/nbToRgb.js

@@ -0,0 +1,63 @@
+import UiGlobals from '../UiGlobals.js';
+import _ from 'lodash';
+
+function isRgb(color) {
+	const
+		regex = /^#[\w]{3,6}$/,
+		matches = color.match(regex);
+	return !!matches?.[0];
+}
+
+// 'color' might be in a format NativeBase uses, like '#000:alpha.20' or 'primary.200'
+// Try to convert this to actual RGB colors.
+export default function nbToRgb(color) {
+
+	if (isRgb(color)) {
+		// already in RGB format; simply return it
+		return {
+			color,
+			alpha,
+		};
+	}
+	
+	const themeOverrideColors = UiGlobals?.ThemeOverrides?.colors || {};
+	if (themeOverrideColors[color]) {
+		color = themeOverrideColors[color];
+	}
+
+	let regex, alpha, matches;
+
+	regex = /^([\w#\.]+)(:alpha\.([\d]{1,2}))?$/;
+	matches = color.match(regex);
+	if (matches[3]) {
+		// alpha part exists. parse it
+		alpha = parseInt(matches[3], 10) / 100;
+	}
+	if (matches[1]) {
+		// color part exists. parse it
+		color = matches[1];
+		regex = /^(.+)\.([\d]{3})$/;
+		matches = color.match(regex);
+		if (matches) {
+			// color is in dot notation, like 'primary.200'
+			color = matches[1];
+			const whichValue = parseInt(matches[2], 10);
+			if (themeOverrideColors[color]?.[whichValue]) {
+				color = themeOverrideColors[color][whichValue];
+			}
+		} else if (themeOverrideColors[color]) {
+			// color is of form 'hover'
+			color = themeOverrideColors[color];
+		}
+
+		if (!isRgb(color)) {
+			color = nbToRgb(color).color;
+		}
+	}
+	
+
+	return {
+		color,
+		alpha,
+	};
+}

package/src/Functions/setSaved.js

@@ -0,0 +1,55 @@
+import oneHatData from '@onehat/data';
+import UiGlobals from '../UiGlobals.js';
+import _ from 'lodash';
+
+export default async function setSaved(key, value) {
+	const Repo = oneHatData.getRepository(UiGlobals.uiSavesRepo);
+	if (!Repo) {
+		return null;
+	}
+
+	let isOneBuild = false,
+		isJson = false,
+		model = null;
+	if (!_.isNil(value) && typeof value !== 'string') {
+		if (_.isArray(value)) {
+			const objects = value;
+			if (objects[0]?.getDataForNewEntity) {
+				model = objects[0].repository.name;
+				isOneBuild = true;
+			}
+			const rawValues = [];
+			_.each(objects, (obj) => {
+				rawValues.push(isOneBuild ? obj.getDataForNewEntity() : obj);
+			});
+			value = JSON.stringify(rawValues);
+		} else {
+			if (value.getDataForNewEntity) {
+				model = value.repository.name;
+				value = value.getDataForNewEntity();
+				isOneBuild = true;
+			}
+			value = JSON.stringify(value);
+		}
+		isJson = true;
+	}
+	
+	const entity = Repo.getById(key);
+	if (entity) {
+		entity.setValues({
+			value,
+			isOneBuild,
+			isJson,
+			model,
+		});
+		await Repo.save(entity);
+	} else {
+		await Repo.add({
+			key,
+			value,
+			isOneBuild,
+			isJson,
+			model,
+		});
+	}
+}

package/src/Functions/setThemeOverrides.js

@@ -0,0 +1,5 @@
+import UiGlobals from '../UiGlobals.js';
+
+export default function setThemeOverrides(ThemeOverrides) {
+	UiGlobals.ThemeOverrides = ThemeOverrides;
+}

package/src/Functions/setUiSavesRepo.js

@@ -0,0 +1,5 @@
+import UiGlobals from '../UiGlobals.js';
+
+export default function setUiSavesRepo(name) {
+	UiGlobals.uiSavesRepo = name;
+}