@onehat/ui 0.4.95 → 0.4.97

package/package.json

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

package/src/Components/Container/Container.js

@@ -118,77 +118,81 @@ function Container(props) {
 		westWidthRef = useRef(westInitialWidth),
 		[isReady, setIsReady] = useState(false),
 		[isComponentsDisabled, setIsComponentsDisabled] = useState(false),
-		[localNorthIsCollapsed, setLocalNorthIsCollapsed] = useState(northInitialIsCollapsed),
-		[localSouthIsCollapsed, setLocalSouthIsCollapsed] = useState(southInitialIsCollapsed),
-		[localEastIsCollapsed, setLocalEastIsCollapsed] = useState(eastInitialIsCollapsed),
-		[localWestIsCollapsed, setLocalWestIsCollapsed] = useState(westInitialIsCollapsed),
+		localNorthIsCollapsedRef = useRef(northInitialIsCollapsed),
+		localSouthIsCollapsedRef = useRef(southInitialIsCollapsed),
+		localEastIsCollapsedRef = useRef(eastInitialIsCollapsed),
+		localWestIsCollapsedRef = useRef(westInitialIsCollapsed),
 		setNorthIsCollapsed = (bool) => {
 			if (setExternalNorthIsCollapsed) {
 				setExternalNorthIsCollapsed(bool);
 			} else {
-				setLocalNorthIsCollapsed(bool);
+				localNorthIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-northIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getNorthIsCollapsed = () => {
 			if (setExternalNorthIsCollapsed) {
 				return northIsCollapsed;
 			}
-			return localNorthIsCollapsed;
+			return localNorthIsCollapsedRef.current;
 		},
 		setSouthIsCollapsed = (bool) => {
 			if (setExternalSouthIsCollapsed) {
 				setExternalSouthIsCollapsed(bool);
 			} else {
-				setLocalSouthIsCollapsed(bool);
+				localSouthIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-southIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getSouthIsCollapsed = () => {
 			if (setExternalSouthIsCollapsed) {
 				return southIsCollapsed;
 			}
-			return localSouthIsCollapsed;
+			return localSouthIsCollapsedRef.current;
 		},
 		setEastIsCollapsed = (bool) => {
 			if (setExternalEastIsCollapsed) {
 				setExternalEastIsCollapsed(bool);
 			} else {
-				setLocalEastIsCollapsed(bool);
+				localEastIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-eastIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getEastIsCollapsed = () => {
 			if (setExternalEastIsCollapsed) {
 				return eastIsCollapsed;
 			}
-			return localEastIsCollapsed;
+			return localEastIsCollapsedRef.current;
 		},
 		setWestIsCollapsed = (bool) => {
 			if (setExternalWestIsCollapsed) {
 				setExternalWestIsCollapsed(bool);
 			} else {
-				setLocalWestIsCollapsed(bool);
+				localWestIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-westIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getWestIsCollapsed = () => {
 			if (setExternalWestIsCollapsed) {
 				return westIsCollapsed;
 			}
-			return localWestIsCollapsed;
+			return localWestIsCollapsedRef.current;
 		},
 		setNorthHeight = (height) => {
 			if (!getNorthIsCollapsed()) {
@@ -348,7 +352,7 @@ function Container(props) {
 		return null;
 	}
 	
-	let componentProps = {},
+	let componentProps = { _panel: { ...center?.props?._panel }, },
 		wrapperProps = null,
 		centerComponent = null,
 		northComponent = null,
@@ -360,15 +364,15 @@ function Container(props) {
 		westComponent = null,
 		westSplitter = null;
 
-	componentProps.isCollapsible = false;
-	componentProps.isDisabled = isDisabled || isComponentsDisabled;
+	componentProps._panel.isCollapsible = false;
+	componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 	centerComponent = cloneElement(center, componentProps);
 	if (north) {
-		componentProps = {};
+		componentProps = { _panel: { ...north.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = (north.props.className || '') + ' h-full w-full';
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (north.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== northHeight) {
@@ -387,9 +391,9 @@ function Container(props) {
 				wrapperProps.style = { height: northHeight, };
 			}
 		}
-		componentProps.collapseDirection = VERTICAL;
-		componentProps.isCollapsed = getNorthIsCollapsed();
-		componentProps.setIsCollapsed = setNorthIsCollapsed;
+		componentProps._panel.collapseDirection = VERTICAL;
+		componentProps._panel.isCollapsed = getNorthIsCollapsed();
+		componentProps._panel.setIsCollapsed = setNorthIsCollapsed;
 		if (isWeb && northIsResizable) {
 			northSplitter = <Splitter
 								mode={VERTICAL}
@@ -402,11 +406,11 @@ function Container(props) {
 						</BoxNative>;
 	}
 	if (south) {
-		componentProps = {};
+		componentProps = { _panel: { ...south.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = (south.props.className || '') + ' h-full w-full';
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (south.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== getSouthHeight()) {
@@ -425,9 +429,9 @@ function Container(props) {
 				wrapperProps.style = { height: southHeight, };
 			}
 		}
-		componentProps.collapseDirection = VERTICAL;
-		componentProps.isCollapsed = getSouthIsCollapsed();
-		componentProps.setIsCollapsed = setSouthIsCollapsed;
+		componentProps._panel.collapseDirection = VERTICAL;
+		componentProps._panel.isCollapsed = getSouthIsCollapsed();
+		componentProps._panel.setIsCollapsed = setSouthIsCollapsed;
 		if (isWeb && southIsResizable) {
 			southSplitter = <Splitter
 								mode={VERTICAL}
@@ -440,11 +444,11 @@ function Container(props) {
 						</BoxNative>;
 	}
 	if (east) {
-		componentProps = {};
+		componentProps = { _panel: { ...east.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = (east.props.className || '') + ' h-full w-full';
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (east.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getEastWidth()) {
@@ -463,9 +467,9 @@ function Container(props) {
 				wrapperProps.style = { width: eastWidth, };
 			}
 		}
-		componentProps.collapseDirection = HORIZONTAL;
-		componentProps.isCollapsed = getEastIsCollapsed();
-		componentProps.setIsCollapsed = setEastIsCollapsed;
+		componentProps._panel.collapseDirection = HORIZONTAL;
+		componentProps._panel.isCollapsed = getEastIsCollapsed();
+		componentProps._panel.setIsCollapsed = setEastIsCollapsed;
 		if (isWeb && eastIsResizable) {
 			eastSplitter = <Splitter
 								mode={HORIZONTAL}
@@ -478,11 +482,11 @@ function Container(props) {
 						</BoxNative>;
 	}
 	if (west) {
-		componentProps = {};
+		componentProps = { _panel: { ...west.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = (west.props.className || '') + ' h-full w-full';
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (west.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getWestWidth()) {
@@ -501,9 +505,9 @@ function Container(props) {
 				wrapperProps.style = { width: westWidth, };
 			}
 		}
-		componentProps.collapseDirection = HORIZONTAL;
-		componentProps.isCollapsed = getWestIsCollapsed();
-		componentProps.setIsCollapsed = setWestIsCollapsed;
+		componentProps._panel.collapseDirection = HORIZONTAL;
+		componentProps._panel.isCollapsed = getWestIsCollapsed();
+		componentProps._panel.setIsCollapsed = setWestIsCollapsed;
 		if (isWeb && westIsResizable) {
 			westSplitter = <Splitter
 								mode={HORIZONTAL}
@@ -517,17 +521,17 @@ function Container(props) {
 	}
 	return <VStack className="Container-all w-full flex-1">
 				{northComponent}
-				{!northIsCollapsed && !localNorthIsCollapsed && northSplitter}
+				{!getNorthIsCollapsed() && northSplitter}
 				<HStack className="Container-mid w-full flex-[100]">
 					{westComponent}
-					{!westIsCollapsed && !localWestIsCollapsed && westSplitter}
+					{!getWestIsCollapsed() && westSplitter}
 					<VStack className="Container-center h-full overflow-auto flex-[100]">
 						{centerComponent}
 					</VStack>
-					{!eastIsCollapsed && !localEastIsCollapsed && eastSplitter}
+					{!getEastIsCollapsed() && eastSplitter}
 					{eastComponent}
 				</HStack>
-				{!southIsCollapsed && !localSouthIsCollapsed && southSplitter}
+				{!getSouthIsCollapsed() && southSplitter}
 				{southComponent}
 			</VStack>;
 }

package/src/Components/Form/Form.js

@@ -522,6 +522,8 @@ function Form(props) {
 			}
 			let {
 					type,
+					editorType: itemEditorType,
+					viewerType,
 					title,
 					name,
 					isEditable = true,
@@ -560,12 +562,18 @@ function Form(props) {
 			}
 			if (!type) {
 				if (isEditable) {
-					const {
-							type: t,
-							...p
-						} = propertyDef?.editorType;
-					type = t;
-					editorTypeProps = p;
+					if (itemEditorType) {
+						type = itemEditorType;
+					} else {
+						const {
+								type: t,
+								...p
+							} = propertyDef?.editorType;
+						type = t;
+						editorTypeProps = p;
+					}
+				} else if (viewerType) {
+					type = viewerType;
 				} else if (propertyDef?.viewerType) {
 					const {
 							type: t,
@@ -1247,7 +1255,7 @@ function Form(props) {
 
 			if (inArray(editorType, [EDITOR_TYPE__SIDE, EDITOR_TYPE__SMART, EDITOR_TYPE__WINDOWED]) && 
 				isSingle && getEditorMode() === EDITOR_MODE__EDIT && 
-				(onBack || (onViewMode && !disableView))) {
+				(onBack || onViewMode)) {
 				modeHeader = <Toolbar>
 								<HStack className="flex-1 items-center">
 									{onBack &&

package/src/Components/Grid/Grid.js

@@ -5,6 +5,7 @@ import {
 	HStack,
 	Pressable,
 	// ScrollView,
+	Text,
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
@@ -187,7 +188,17 @@ function GridComponent(props) {
 			canRowsReorder = false,
 			canRowDrag, // optional fn to customize whether each row can be dragged
 			canRowAcceptDrop, // optional fn to customize whether each node can accept a dropped item: (targetItem, draggedItem) => boolean
-			getCustomDragProxy, // optional fn to render custom drag preview: (item, selection) => ReactElement
+			dragProxyField,
+			getCustomDragProxy = (item, selection) => { // optional fn to render custom drag preview: (item, selection) => ReactElement
+				let selectionCount = selection?.length || 1,
+					displayText = dragProxyField ? item[dragProxyField] : (item.displayValue || 'Selected Row');
+				return <VStack className="bg-white border border-gray-300 rounded-lg p-3 shadow-lg max-w-[200px]">
+							<Text className="font-semibold text-gray-800">{displayText}</Text>
+							{selectionCount > 1 && 
+								<Text className="text-sm text-gray-600">(+{selectionCount -1} more item{selectionCount > 2 ? 's' : ''})</Text>
+							}
+						</VStack>;
+			},
 			dragPreviewOptions, // optional object for drag preview positioning options
 			areRowsDragSource = false,
 			rowDragSourceType,
@@ -260,6 +271,7 @@ function GridComponent(props) {
 		} = props,
 		styles = UiGlobals.styles,
 		id = props.id || props.self?.path,
+		entities = Repository ? (Repository.isRemote ? Repository.entities : Repository.getEntitiesOnPage()) : data,
 		localColumnsConfigKey = id && id + '-localColumnsConfig',
 		[hasUnserializableColumns] = useState(() => {
 			return !isSerializable(columnsConfig); // (runs only once, when the component is first created)
@@ -280,6 +292,8 @@ function GridComponent(props) {
 		measuredRowsRef = useRef([]),
 		footerToolbarRef = useRef(null),
 		rowRefs = useRef([]),
+		previousEntitiesLength = useRef(0),
+		hasRemeasuredAfterRowsAppeared = useRef(false),
 		[isInited, setIsInited] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
@@ -409,7 +423,16 @@ function GridComponent(props) {
 			}
 		},
 		getFooterToolbarItems = () => {
-			const items = _.map(additionalToolbarButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
+			// Process additionalToolbarButtons to evaluate getIsButtonDisabled functions
+			const processedButtons = _.map(additionalToolbarButtons, (config) => {
+				const processedConfig = { ...config };
+				// If the button has an getIsButtonDisabled function, evaluate it with current selection
+				if (_.isFunction(config.getIsButtonDisabled)) {
+					processedConfig.isDisabled = config.getIsButtonDisabled(selection);
+				}
+				return processedConfig;
+			});
+			const items = _.map(processedButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
 			if (canRowsReorder && CURRENT_MODE === UI_MODE_WEB) { // DND is currently web-only  TODO: implement for RN
 				items.unshift(<IconButton
 					{...testProps('reorderBtn')}
@@ -462,33 +485,41 @@ function GridComponent(props) {
 									}
 									break;
 								case DOUBLE_CLICK:
-									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
-										onRowClick(item, e); // so reselect it
-									}
-
-									if (UiGlobals.doubleClickingGridRowOpensEditorInViewMode) { // global setting
-										if (onView) {
-											if (canUser && !canUser(VIEW)) { // permissions
-												return;
-											}
-											onView(!props.isEditorViewOnly);
+									if (editorType === EDITOR_TYPE__SIDE) {
+										// For side-editors, a double-click just acts like a single click
+										if (!getIsEditorShown()) {
+											onRowClick(item, e); // sets selection
 										}
 									} else {
-										let canDoEdit = false,
-											canDoView = false;
-										if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection)) && !props.disableEdit && !isEditorViewOnly) {
-											canDoEdit = true;
-										} else
-										if (onView && canUser && canUser(VIEW) && !props.disableView) {
-											canDoView = true;
+										if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
+											onRowClick(item, e); // so reselect it
 										}
+										if (UiGlobals.doubleClickingGridRowOpensEditorInViewMode) { // global setting
+											if (onView) {
+												if (canUser && !canUser(VIEW)) { // permissions
+													return;
+												}
+												onView(!props.isEditorViewOnly);
+											}
+										} else {
+											let canDoEdit = false,
+												canDoView = false;
+											if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection)) && !props.disableEdit && !isEditorViewOnly) {
+												canDoEdit = true;
+											} else
+											if (onView && canUser && canUser(VIEW) && !props.disableView) {
+												canDoView = true;
+											}
 
-										if (canDoEdit) {
-											onEdit();
-										} else if (canDoView) {
-											onView();
+											if (canDoEdit) {
+												onEdit();
+											} else if (canDoView) {
+												onView();
+											}
 										}
+
 									}
+
 									break;
 								case TRIPLE_CLICK:
 									break;
@@ -1118,12 +1149,12 @@ function GridComponent(props) {
 				// Keep the current estimated pageSize, just hide the loading overlay
 			}
 		},
-		adjustPageSizeToHeight = (containerHeight) => {
+		adjustPageSizeToHeight = (containerHeight, forceRemeasure = false) => {
 			if (!Repository || Repository.isDestroyed) { // This method gets delayed, so it's possible for Repository to have been destroyed. Check for this
 				return;
 			}
 			if (DEBUG) {
-				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A`);
+				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A forceRemeasure=${forceRemeasure}`);
 			}
 
 			let doAdjustment = autoAdjustPageSizeToHeight;
@@ -1135,11 +1166,11 @@ function GridComponent(props) {
 				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A2 doAdjustment=${doAdjustment}, autoAdjustPageSizeToHeight=${autoAdjustPageSizeToHeight}, UiGlobals.autoAdjustPageSizeToHeight=${UiGlobals.autoAdjustPageSizeToHeight}, containerHeight=${containerHeight}`);
 			}
 			
-			// Only proceed if height changed significantly
+			// Only proceed if height changed significantly or forced
 			const
 				heightChanged = Math.abs(containerHeight - lastMeasuredContainerHeight) > 5, // 5px tolerance
 				isFirstMeasurement = lastMeasuredContainerHeight === 0;
-			if (containerHeight > 0 && (isFirstMeasurement || heightChanged)) {
+			if (containerHeight > 0 && (isFirstMeasurement || heightChanged || forceRemeasure)) {
 				if (editorType === EDITOR_TYPE__SIDE && getIsEditorShown()) {
 					// When side editor is shown, skip adjustment to avoid layout thrashing
 					console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A4 height changed significantly, but side editor is shown, skipping remeasurement`);
@@ -1543,6 +1574,43 @@ function GridComponent(props) {
 		}
 	}, [autoAdjustPageSizeToHeight]);
 
+	// Reset measurement when rows were first empty then became populated
+	useEffect(() => {
+		const
+			currentLength = entities?.length || 0,
+			wasEmpty = previousEntitiesLength.current === 0,
+			isNowPopulated = currentLength > 0,
+			hasPhantomRecord = entities?.some(entity => entity?.isPhantom);
+			
+		// NOTE: The Repository was reloading when a phantom record was added,
+		// and this broke the Editor because selection was being reset to zero.
+		// This is because adjustPageSizeToHeight calls setPageSize,
+		// which calls _onChangePagination, which calls reload.
+		// The reloaded repository doesn’t get the new phantom record,
+		// so it’s not found, and selection goes to zero.
+		// So we skip this adjustment when there is a phantom record.
+		
+		// Only remeasure the FIRST time rows appear after being empty
+		if (!hasPhantomRecord && autoAdjustPageSizeToHeight && wasEmpty && isNowPopulated && !hasRemeasuredAfterRowsAppeared.current) {
+			// Rows just appeared for the first time - restart measurement cycle to use actual heights
+			if (DEBUG) {
+				console.log(`${getMeasurementPhase()}, useEffect 5 - rows appeared for first time, restarting measurement cycle`);
+			}
+			hasRemeasuredAfterRowsAppeared.current = true;
+			
+			setMeasurementPhase(PHASES__INITIAL);
+			setMeasuredRowHeight(null);
+			measuredRowsRef.current = [];
+			
+			// Trigger remeasurement with force flag since actual rows are now available
+			if (lastMeasuredContainerHeight > 0) {
+				adjustPageSizeToHeight(lastMeasuredContainerHeight, true);
+			}
+		}
+		
+		previousEntitiesLength.current = currentLength;
+	}, [entities?.length, autoAdjustPageSizeToHeight]);
+
 	if (canUser && !canUser('view')) {
 		return <Unauthorized />;
 	}
@@ -1560,13 +1628,24 @@ function GridComponent(props) {
 		// first time through, render a placeholder so we can get container dimensions
 		return <VStackNative
 					onLayout={(e) => {
-						if (DEBUG) {
-							console.log(`${getMeasurementPhase()}, placeholder onLayout, call adjustPageSizeToHeight()`);
-						}
-						const containerHeight = e.nativeEvent.layout.height;
-						adjustPageSizeToHeight(containerHeight);
-						if (DEBUG) {
-							console.log(`${getMeasurementPhase()}, placeholder onLayout, call setIsInited(true)`);
+						const hasPhantomRecord = entities?.some(entity => entity?.isPhantom);
+						if (!hasPhantomRecord) {
+							// NOTE: The Repository was reloading when a phantom record was added,
+							// and this broke the Editor because selection was being reset to zero.
+							// This is because adjustPageSizeToHeight calls setPageSize,
+							// which calls _onChangePagination, which calls reload.
+							// The reloaded repository doesn’t get the new phantom record,
+							// so it’s not found, and selection goes to zero.
+							// So we skip this adjustment when there is a phantom record.
+
+							if (DEBUG) {
+								console.log(`${getMeasurementPhase()}, placeholder onLayout, call adjustPageSizeToHeight()`);
+							}
+							const containerHeight = e.nativeEvent.layout.height;
+							adjustPageSizeToHeight(containerHeight);
+							if (DEBUG) {
+								console.log(`${getMeasurementPhase()}, placeholder onLayout, call setIsInited(true)`);
+							}
 						}
 						setIsInited(true);
 					}}
@@ -1579,7 +1658,6 @@ function GridComponent(props) {
 	}
 
 	// Actual data to show in the grid
-	const entities = Repository ? (Repository.isRemote ? Repository.entities : Repository.getEntitiesOnPage()) : data;
 	let rowData = [...entities]; // don't use the original array, make a new one so alterations to it are temporary
 	if (showHeaders) {
 		rowData.unshift({ id: 'headerRow' });
@@ -1744,14 +1822,11 @@ function GridComponent(props) {
 							)}
 						>
 							{grid}
-							{/* Loading overlay during measurement phases to prevent visual flashing */}
-							{autoAdjustPageSizeToHeight && 
-							(getMeasurementPhase() === PHASES__INITIAL || getMeasurementPhase() === PHASES__MEASURING) && 
-							entities?.length > 0 && (
+							{/* Load overlay during initial phase to prevent visual flashing * /
+							autoAdjustPageSizeToHeight && getMeasurementPhase() === PHASES__INITIAL && 
 								<VStack className="absolute inset-0 z-10 bg-white">
 									<Loading />
-								</VStack>
-							)}
+								</VStack>*/}
 						</VStack>
 
 						{listFooterComponent}

package/src/Components/Hoc/withAlert.js

@@ -61,6 +61,7 @@ function withAlert(WrappedComponent) {
 								'flex-1',
 								'items-start',
 								'justify-center',
+								'p-4',
 							)}>
 								<Text className={clsx(
 									'withAlert-Text',
@@ -164,7 +165,7 @@ function withAlert(WrappedComponent) {
 					}),
 					onOk: () => hideModal(),
 					canClose: true,
-					h: 200,
+					h: 250,
 					w: 400,
 					whichModal: 'info',
 				});