@onehat/ui 0.4.81 → 0.4.83

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.81",
+	"version": "0.4.83",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -58,17 +58,18 @@
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@legendapp/motion": "^2.4.0",
 		"@onehat/data": "^1.22.0",
-		"clsx": "^2.1.1",
-		"nativewind": "4.1.23",
-		"normalize-css-color": "^1.0.2",
 		"@react-native-community/slider": "^4.5.2",
 		"@reduxjs/toolkit": "^2.6.1",
+		"clsx": "^2.1.1",
 		"decimal.js": "^10.5.0",
 		"inflector-js": "^1.0.1",
 		"js-cookie": "^3.0.5",
+		"nativewind": "4.1.23",
+		"normalize-css-color": "^1.0.2",
 		"react-hook-form": "^7.55.0",
 		"react-native-progress": "^5.0.1",
 		"react-redux": "^9.2.0",
+		"tailwind-scrollbar": "^3.1.0",
 		"tailwindcss": "^3.4.17",
 		"yup": "^1.6.1"
 	},
@@ -79,10 +80,10 @@
 		"react": "*",
 		"react-color": "^2.19.3",
 		"react-datetime": "^3.2.0",
-		"react-dom": "*",
 		"react-dnd": "^16.0.1",
 		"react-dnd-html5-backend": "^16.0.1",
-		"react-dnd-touch-backend":"16.0.1",
+		"react-dnd-touch-backend": "16.0.1",
+		"react-dom": "*",
 		"react-draggable": "^4.4.5",
 		"react-native": "*",
 		"react-native-draggable": "^3.3.0",

package/src/Components/Container/Container.js

@@ -78,10 +78,10 @@ function Container(props) {
 		id = props.id || props.self?.path,
 		canResize = CURRENT_MODE === UI_MODE_WEB,
 		[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),
+		[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),

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

@@ -24,6 +24,7 @@ import testProps from '../../../../Functions/testProps.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import Input from '../Input.js';
 import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
+import useForceUpdate from '../../../../Hooks/useForceUpdate.js';
 import withAlert from '../../../Hoc/withAlert.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
@@ -121,13 +122,16 @@ export const ComboComponent = forwardRef((props, ref) => {
 			setValue,
 		} = props,
 		styles = UiGlobals.styles,
+		forceUpdate = useForceUpdate(),
 		inputRef = useRef(),
 		inputCloneRef = useRef(),
 		triggerRef = useRef(),
 		menuRef = useRef(),
 		displayValueRef = useRef(),
 		typingTimeout = useRef(),
-		[isMenuShown, setIsMenuShown] = useState(false),
+		isMenuShown = useRef(false),
+		isGridLayoutRunWithRender = useRef(false),
+		[isMenuAbove, setIsMenuAbove] = useState(false),
 		[isViewerShown, setIsViewerShown] = useState(false),
 		[viewerSelection, setViewerSelection] = useState([]),
 		[isRendered, setIsRendered] = useState(false),
@@ -140,15 +144,39 @@ export const ComboComponent = forwardRef((props, ref) => {
 		[newEntityDisplayValue, setNewEntityDisplayValue] = useState(null),
 		[filteredData, setFilteredData] = useState(data),
 		[inputHeight, setInputHeight] = useState(0),
+		[menuRenderedHeight, setMenuRenderedHeight] = useState(0),
 		[width, setWidth] = useState(0),
 		[top, setTop] = useState(0),
 		[left, setLeft] = useState(0),
+		getIsMenuShown = () => {
+			return isMenuShown.current;
+		},
+		setIsMenuShown = (bool) => {
+			isMenuShown.current = bool;
+
+			if (!bool) {
+				// The menu's onLayout runs every time there's a change in its size or position.
+				// We're only interested in the *first* time it runs with a rendered height.
+				// So if hiding the menu, reset isGridLayoutRunWithRender here and we'll set it to true
+				// the first time onLayout runs with a height.
+				setIsGridLayoutRunWithRender(false);
+				setIsMenuAbove(false); // reset this so the next time the menu opens, it starts below the input
+			}
+
+			forceUpdate();
+		},
+		getIsGridLayoutRunWithRender = () => {
+			return isGridLayoutRunWithRender.current;
+		},
+		setIsGridLayoutRunWithRender = (bool) => {
+			isGridLayoutRunWithRender.current = bool;
+		},
 		onLayout = (e) => {
 			setIsRendered(true);
 			setContainerWidth(e.nativeEvent.layout.width);
 		},
 		showMenu = async () => {
-			if (isMenuShown) {
+			if (getIsMenuShown()) {
 				return;
 			}
 			if (CURRENT_MODE === UI_MODE_WEB && inputRef.current?.getBoundingClientRect) {
@@ -181,13 +209,13 @@ export const ComboComponent = forwardRef((props, ref) => {
 			setIsMenuShown(true);
 		},
 		hideMenu = () => {
-			if (!isMenuShown) {
+			if (!getIsMenuShown()) {
 				return;
 			}
 			setIsMenuShown(false);
 		},
 		toggleMenu = () => {
-			setIsMenuShown(!isMenuShown);
+			setIsMenuShown(!getIsMenuShown());
 		},
 		temporarilySetIsNavigatingViaKeyboard = () => {
 			setIsNavigatingViaKeyboard(true);
@@ -359,14 +387,14 @@ export const ComboComponent = forwardRef((props, ref) => {
 			if (reloadOnTrigger && Repository) {
 				await Repository.reload();
 			}
-			if (isMenuShown) {
+			if (getIsMenuShown()) {
 				hideMenu();
 			} else {
 				showMenu();
 			}
 		},
 		onTriggerBlur = (e) => {
-			if (!isMenuShown) {
+			if (!getIsMenuShown()) {
 				return;
 			}
 
@@ -409,6 +437,33 @@ export const ComboComponent = forwardRef((props, ref) => {
 		onCheckButtonPress = () => {
 			hideMenu();
 		},
+		onGridLayout = (e) => {
+			// This method is to determine if we need to flip the grid above the input
+			// because the menu is partially offscreen
+
+			if (CURRENT_MODE !== UI_MODE_WEB || !e.nativeEvent.layout.height) {
+				return;
+			}
+
+			// we reach this point only if the grid has rendered with a height.
+
+			if (!getIsGridLayoutRunWithRender()) {
+				// we reach this point only on the *first* time onGridLayout runs with a height.
+				// determine if the menu is partially offscreen
+				const
+					menuRect = menuRef.current.getBoundingClientRect(),
+					inputRect = inputRef.current.getBoundingClientRect(),
+					menuOverflows = menuRect.bottom > window.innerHeight;
+				if (menuOverflows) {
+					// flip it
+					setIsMenuAbove(true);
+				} else {
+					setIsMenuAbove(false);
+				}
+				setMenuRenderedHeight(e.nativeEvent.layout.height);
+				setIsGridLayoutRunWithRender(true);
+			}
+		},
 		isEventStillInComponent = (e) => {
 			const {
 					relatedTarget
@@ -518,7 +573,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 				setFilteredData(found);
 			}
 
-			if (!isMenuShown) {
+			if (!getIsMenuShown()) {
 				showMenu();
 			}
 			setIsSearchMode(true);
@@ -734,7 +789,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 				</Pressable>;
 	}
 
-	if (isMenuShown) {
+	if (getIsMenuShown()) {
 		const gridProps = _.pick(props, [
 			'Editor',
 			'model',
@@ -743,6 +798,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 			'idIx',
 			'displayIx',
 			// 'value',
+			'disableAdd',
+			'disableEdit',
+			'disableDelete',
 			'disableView',
 			'disableCopy',
 			'disableDuplicate',
@@ -761,8 +819,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 		if (!Repository) {
 			gridProps.data = filteredData;
 		}
-		const WhichGrid = isEditor ? WindowedGridEditor : Grid;
-		const gridStyle = {};
+		const
+			WhichGrid = isEditor ? WindowedGridEditor : Grid,
+			gridStyle = {};
 		if (CURRENT_MODE === UI_MODE_WEB) {
 			gridStyle.height = menuHeight || styles.FORM_COMBO_MENU_HEIGHT;
 		}
@@ -773,6 +832,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 		if (CURRENT_MODE === UI_MODE_NATIVE) {
 			gridClassName += ' h-[400px] max-h-[100%]';
 		}
+		if (gridProps.className) {
+			gridClassName += ' ' + gridProps.className;
+		}
 		grid = <WhichGrid
 					showHeaders={false}
 					showHovers={true}
@@ -783,6 +845,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 					disablePresetButtons={!isEditor}
 					alternateRowBackgrounds={false}
 					showSelectHandle={false}
+					onLayout={onGridLayout}
 					onChangeSelection={(selection) => {
 
 						if (Repository && selection[0]?.isPhantom) {
@@ -886,9 +949,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 					}}
 					reference="grid"
 					parent={self}
-					className={gridClassName}
 					style={gridStyle}
 					{...gridProps}
+					className={gridClassName}
 					{..._editor}
 				/>;
 		if (CURRENT_MODE === UI_MODE_WEB) {
@@ -935,7 +998,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 							</Box>;
 			}
 			dropdownMenu = <Popover
-								isOpen={isMenuShown}
+								isOpen={getIsMenuShown()}
 								onClose={() => {
 									hideMenu();
 								}}
@@ -959,15 +1022,24 @@ export const ComboComponent = forwardRef((props, ref) => {
 										'max-w-full',
 									)}
 									style={{
-										top,
+										// If flipped, position above input; otherwise, below
+										top: isMenuAbove
+											? (top - menuRenderedHeight) // above
+											: top, // below
 										left,
 										width,
-										height: (menuHeight || styles.FORM_COMBO_MENU_HEIGHT) + inputHeight,
 										minWidth: 100,
 									}}
 								>
-									{inputClone}
-									{grid}
+									{isMenuAbove ?
+										<>
+											{grid}
+											{inputClone}
+										</> :
+										<>
+											{inputClone}
+											{grid}
+										</>}
 								</Box>
 							</Popover>;
 		}

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

@@ -22,6 +22,7 @@ function MeterTypesCombo(props) {
 				reference="MeterTypeCombo"
 				data={data}
 				disableDirectEntry={true}
+				menuHeight={100}
 				{...props}
 			/>;
 }

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

@@ -601,7 +601,7 @@ export const DateElement = forwardRef((props, ref) => {
 		styles.FORM_DATE_CLASSNAME,
 	);
 	if (props.className) {
-		className += props.className;
+		className += ' ' + props.className;
 	}
 	if (minimizeForRow) {
 		className += ' h-auto min-h-0 max-h-[50px]';

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

@@ -21,6 +21,7 @@ export function JsonElement(props) {
 			tooltip = null,
 			isDisabled = false,
 			isViewOnly = false,
+			isCollapsed = true,
 			tooltipPlacement = 'bottom',
 			testID,
 
@@ -59,7 +60,7 @@ export function JsonElement(props) {
 					editable={!isViewOnly}
 					src={src}
 					enableClipboard={false}
-					collapsed={true}
+					collapsed={isCollapsed}
 					onEdit={(obj) => {
 						setValue(JSON.stringify(obj.updated_src));
 					}}

package/src/Components/Form/Field/Select/PageSizeSelect.js

@@ -12,7 +12,11 @@ export default function PageSizeSelect(props) {
 		} = props;
 
 	return useMemo(() => {
-		return <HStack className="PageSizeSelect-HStack w-[70px]">
+		return <HStack
+					className={clsx(
+						'PageSizeSelect-HStack',
+					)}
+				>
 					<Select
 						data={[
 							// [ 1, '1', ],
@@ -26,6 +30,7 @@ export default function PageSizeSelect(props) {
 						onChangeValue={(value) => Repository.setPageSize(value)}
 						tooltip="Page Size"
 						tooltipClassName="w-[70px]"
+						fixedWidth={false}
 					/>
 				</HStack>;
 	}, [

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

@@ -1,6 +1,7 @@
 import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectIcon,  SelectItem,  SelectPortal, SelectTrigger,
+	Text,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
 import {
@@ -15,54 +16,22 @@ import CaretDown from '../../../Icons/CaretDown.js';
 import _ from 'lodash';
 
 const SelectElement = forwardRef((props, ref) => {
-	let { // so localValue can be changed, if needed
+	const {
 			data = [], // in format [ [ value, label, ], ... ]
 			value,
 			setValue,
 			onKeyPress,
 			placeholder,
 			disableAutoFlex = false,
+			fixedWidth = true,
 			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
-		// debouncedSetValueRef = useRef(),
-		// [localValue, setLocalValue] = useState(value),
-		// onKeyPressLocal = (e) => {
-		// 	if (e.key === 'Enter') {
-		// 		debouncedSetValueRef.current?.cancel();
-		// 		setValue(localValue);
-		// 	}
-		// 	if (onKeyPress) {
-		// 		onKeyPress(e, localValue);
-		// 	}
-		// },
+		style = props.style || {},
 		items = data.map(([ value, label, ], key) => {
 			return <SelectItem key={key} label={label} value={value} />;
 		});
 		
-	// useEffect(() => {
-
-	// 	// Set up debounce fn
-	// 	// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
-	// 	debouncedSetValueRef.current?.cancel(); // Cancel any previous debounced fn
-	// 	debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
-
-	// }, [setValue]);
-		
-	// useEffect(() => {
-
-	// 	if (value !== localValue) {
-	// 		// Make local value conform to externally changed value
-	// 		setLocalValue(value);
-	// 	}
-
-	// }, [value]);
-
-	// if (localValue === null || typeof localValue === 'undefined') {
-	// 	localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled select
-	// }
-
-	const style = props.style || {};
 	// auto-set width to flex if it's not already set another way
 	if (!disableAutoFlex && !hasWidth(props) && !hasFlex(props)) {
 		style.flex = 1;
@@ -70,13 +39,12 @@ const SelectElement = forwardRef((props, ref) => {
 	let className = clsx(
 		'Select',
 		'min-h-[40px]',
-		'w-full',
 		'text-left',
 		'rounded-lg',
 		styles.FORM_SELECT_CLASSNAME,
 	);
 	if (props.className) {
-		className += props.className;
+		className += ' ' + props.className;
 	}
 
 	return <Select
@@ -89,7 +57,15 @@ const SelectElement = forwardRef((props, ref) => {
 				style={style}
 			>
 				<SelectTrigger variant="outline" size="md" className="SelectTrigger" >
-					<SelectInput placeholder={placeholder} className="SelectInput" />
+					{fixedWidth ? 
+						<SelectInput
+							placeholder={placeholder}
+							className={clsx(
+								'SelectInput',
+							)}
+						/> :
+						<Text className="SelectText p-2">{value}</Text>}
+					
 					<SelectIcon className="mr-3" as={CaretDown} />
 				</SelectTrigger>
 				<SelectPortal className="SelectPortal">