@onehat/ui 0.2.56 → 0.2.58

package/cypress/plugins/index.js

@@ -0,0 +1,2 @@
+module.exports = (on) => {
+}

package/cypress/support/commands.js

@@ -0,0 +1,2 @@
+// https://on.cypress.io/custom-commands
+

package/cypress/support/e2e.js

@@ -0,0 +1,2 @@
+// https://on.cypress.io/configuration
+import './commands.js';

package/cypress.config.js

@@ -0,0 +1,41 @@
+import { defineConfig } from "cypress";
+import webpackPreprocessor from "@cypress/webpack-preprocessor";
+
+export default defineConfig({
+	e2e: {
+		experimentalRunAllSpecs: true,
+		chromeWebSecurity: false,
+		setupNodeEvents(on) {
+			const options = webpackPreprocessor.defaultOptions;
+			if (!options.module) {
+				options.module = {
+					rules: [],
+				}
+			}
+			if (!options.module.rules) {
+				options.module.rules = [];
+			}
+			options.module.rules.push({
+				test: /\.(js|jsx|mjs)$/,
+				exclude: [/node_modules\/(?!(@onehat)\/).*/],
+				use: [{
+					loader: 'babel-loader',
+					options: {
+						cacheDirectory: false,
+						presets: [
+							'@babel/preset-env'
+						],
+						plugins: [
+							'@babel/plugin-transform-class-properties',
+							'@babel/plugin-transform-runtime'
+						],
+						sourceType: 'unambiguous',
+					},
+				}],
+
+			});
+
+			on('file:preprocessor', webpackPreprocessor(options));
+		},
+	}
+});

package/package.json

@@ -1,11 +1,17 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.56",
+	"version": "0.2.58",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
 	"scripts": {
-		"test": "npx cypress open --config-file ../cypress.json"
+		"test": "npx cypress open",
+		"test2": "DEBUG=cypress:* npx cypress open",
+		"docs": "jsdoc -c ./jsdoc.json -t ./node_modules/ink-docstrap/template -R README.md"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/OneHatRepo/ui.git"
 	},
 	"keywords": [
 		"onehat",
@@ -19,35 +25,38 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.17.0",
-		"@hookform/resolvers": "^2.9.11",
+		"@onehat/data": "^1.17.3",
+		"@hookform/resolvers": "^3.1.0",
 		"@k-renwick/colour-mixer": "^1.2.1",
-		"ckeditor5-custom-build": "file:ckeditor5",
-		"js-cookie": "^3.0.1",
-		"native-base": "^3.4.25",
-		"react-hook-form": "^7.43.1"
+		"js-cookie": "^3.0.5",
+		"native-base": "^3.4.28",
+		"react-hook-form": "^7.44.3",
+		"yup": "^1.2.0"
 	},
 	"peerDependencies": {
-	  "@ckeditor/ckeditor5-react": "^5.0.6",
-	  "react": "*",
-	  "react-color": "^2.19.3",
-	  "react-datetime": "^3.2.0",
-	  "react-draggable": "^4.4.5",
-	  "react-native-draggable": "^3.3.0",
-	  "react-dom": "*",
-	  "react-native": "*"
+		"ckeditor5-custom-build": "file:ckeditor5",
+		"react": "*",
+		"react-color": "^2.19.3",
+		"react-datetime": "^3.2.0",
+		"react-draggable": "^4.4.5",
+		"react-native-draggable": "^3.3.0",
+		"react-dom": "*",
+		"react-native": "*"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.21.0",
-		"@babel/node": "^7.20.7",
-		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-transform-runtime": "^7.21.0",
-		"@babel/preset-env": "^7.20.2",
+		"@babel/core": "^7.22.1",
+		"@babel/node": "^7.22.1",
+		"@babel/plugin-transform-class-properties": "^7.22.3",
+		"@babel/plugin-transform-runtime": "^7.22.4",
+		"@babel/preset-env": "^7.22.4",
 		"@babel/register": "^7.21.0",
-		"@babel/runtime": "^7.21.0",
-		"@cypress/webpack-preprocessor": "^5.17.0",
+		"@babel/runtime": "^7.22.3",
+		"@ckeditor/ckeditor5-react": "^5.0.6",
+		"@cypress/webpack-preprocessor": "^5.17.1",
 		"babel-loader": "^9.1.2",
-		"cypress": "^12.6.0",
-		"webpack": "^5.75.0"
+		"cypress": "12.13.0",
+		"ink-docstrap": "^1.3.2",
+		"jsdoc": "^4.0.2",
+		"webpack": "^5.85.0"
 	}
 }

package/src/Components/Form/Form.js

@@ -388,7 +388,7 @@ function Form(props) {
 								if (defaults?.labelWidth) {
 									labelProps.w = defaults.labelWidth;
 								}
-								element = <Row w="100%">
+								element = <Row w="100%" py={1}>
 												<Label {...labelProps}>{label}</Label>
 												{element}
 											</Row>;

package/src/Components/Grid/Grid.js

@@ -143,7 +143,7 @@ export function Grid(props) {
 				onChangeColumnsConfig(config);
 			}
 		},
-		onRowClick = (item, rowIndex, e) => {
+		onRowClick = (item, e) => {
 			const
 				{
 					shiftKey,
@@ -276,19 +276,22 @@ export function Grid(props) {
 			return <Pressable
 						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
 						onPress={(e) => {
+							if (e.preventDefault && e.cancelable) {
+								e.preventDefault();
+							}
 							if (isHeaderRow || isReorderMode) {
 								return
 							}
 							switch (e.detail) {
 								case 1: // single click
-									onRowClick(item, index, e); // sets selection
+									onRowClick(item, e); // sets selection
 									if (onEditorRowClick) {
 										onEditorRowClick(item, index, e);
 									}
 									break;
 								case 2: // double click
 									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
-										onRowClick(item, index, e); // so reselect it
+										onRowClick(item, e); // so reselect it
 									}
 									if (onEdit) {
 										onEdit();
@@ -300,9 +303,13 @@ export function Grid(props) {
 							}
 						}}
 						onLongPress={(e) => {
+							if (e.preventDefault && e.cancelable) {
+								e.preventDefault();
+							}
 							if (isHeaderRow || isReorderMode) {
 								return
 							}
+							
 							// context menu
 							const selection = [item];
 							setSelection(selection);
@@ -310,7 +317,7 @@ export function Grid(props) {
 								onEditorRowClick(item, index, e);
 							}
 							if (onContextMenu) {
-								onContextMenu(item, index, e, selection, setSelection);
+								onContextMenu(item, e, selection, setSelection);
 							}
 						}}
 						flexDirection="row"
@@ -737,7 +744,7 @@ export function Grid(props) {
 			Repository.off('changeFilters', onChangeFilters);
 			Repository.off('changeSorters', onChangeSorters);
 		};
-	}, [deselectAll]);
+	}, []);
 
 	useEffect(() => {
 		if (!Repository) {

package/src/Components/Grid/GridHeaderRow.js

@@ -319,6 +319,9 @@ export default function GridHeaderRow(props) {
 					return <Pressable
 								key={ix}
 								onPress={(e) => {
+									if (e.preventDefault) {
+										e.preventDefault();
+									}
 									if (isBlocked.current) { // withDraggable initiates block
 										return;
 									}
@@ -369,8 +372,8 @@ export default function GridHeaderRow(props) {
 									textOverflow="ellipsis"
 									flex={1}
 									h="100%"
-									px={2}
-									py={2}
+									px={styles.GRID_HEADER_CELL_PX}
+									py={styles.GRID_HEADER_CELL_PY}
 									alignItems="center"
 									justifyContent="center"
 									numberOfLines={1}

package/src/Components/Grid/GridRow.js

@@ -100,6 +100,8 @@ export default function GridRow(props) {
 									alignSelf="center"
 									style={{ userSelect: 'none', }}
 									fontSize={styles.GRID_CELL_FONTSIZE}
+									px={styles.GRID_CELL_PX}
+									py={styles.GRID_CELL_PY}
 									numberOfLines={1}
 									ellipsizeMode="head"
 									{...propsToPass}

package/src/Components/Hoc/withContextMenu.js

@@ -30,7 +30,7 @@ export default function withContextMenu(WrappedComponent) {
 			[contextMenuX, setContextMenuX] = useState(0),
 			[contextMenuY, setContextMenuY] = useState(0),
 			[contextMenuItemComponents, setContextMenuItemComponents] = useState([]),
-			onContextMenu = (entity, rowIx, e, selection, setSelection) => {
+			onContextMenu = (entity, e, selection, setSelection) => {
 				if (disableContextMenu) {
 					return;
 				}

package/src/Components/Messages/WaitMessage.js

@@ -1,4 +1,6 @@
- import {
+import {
+	Button,
+	Modal,
 	Row,
 	Text,
 } from 'native-base';
@@ -9,10 +11,20 @@ export default function WaitMessage(props) {
 			textMessage = 'Please wait...',
 		} = props;
 
-	return <Row position="absolute" width="100%" top="40" left="0" _backdrop={{ bg: "#000" }} justifyContent="center" alignItems="center" pb={20} {...props}>
-				<Row bg="#fff" p={3} width="50%" justifyContent="center" alignItems="center" borderColor="#000" borderRadius={5}>
-					<Loading minHeight="auto" h={5} w={5} mr={2} />
-					<Text color="#000">{textMessage}</Text>
-				</Row>
-			</Row>;
+	return <Modal {...props} _backdrop={{ bg: "#000" }}>
+				<Modal.Content>
+					<Modal.Body
+						borderTopWidth={0}
+						bg="#fff"
+						p={3}
+						justifyContent="center"
+						alignItems="center"
+						borderRadius={5}
+						flexDirection="row"
+					>
+						<Loading minHeight="auto" h={5} w={5} mr={2} />
+						<Text color="#000">{textMessage}</Text>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal>;
 }