@onehat/ui 0.3.256 → 0.3.258

package/package.json

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

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

@@ -87,6 +87,7 @@ export function ComboComponent(props) {
 		[isRendered, setIsRendered] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isSearchMode, setIsSearchMode] = useState(false),
+		[isNavigatingViaKeyboard, setIsNavigatingViaKeyboard] = useState(false),
 		[containerWidth, setContainerWidth] = useState(),
 		[gridSelection, setGridSelection] = useState(null),
 		[textInputValue, setTextInputValue] = useState(''),
@@ -150,6 +151,12 @@ export function ComboComponent(props) {
 		toggleMenu = () => {
 			setIsMenuShown(!isMenuShown);
 		},
+		temporarilySetIsNavigatingViaKeyboard = () => {
+			setIsNavigatingViaKeyboard(true);
+			setTimeout(() => {
+				setIsNavigatingViaKeyboard(false);
+			}, 1000);
+		},
 		getDisplayValue = () => {
 			return displayValueRef.current;
 		},
@@ -212,6 +219,7 @@ export function ComboComponent(props) {
 			}
 			switch(e.key) {
 				case 'Escape':
+					e.preventDefault();
 					setIsSearchMode(false);
 					resetTextInputValue();
 					hideMenu();
@@ -231,32 +239,29 @@ export function ComboComponent(props) {
 						return;
 					}
 
-					doIt();
-
-					function doIt() {
-						setValue(gridSelection?.id);
-						hideMenu();
+					let id = null;
+					if (gridSelection.length && gridSelection[0].id) {
+						id = gridSelection[0].id;
 					}
+					setValue(id);
+					hideMenu();
+					break;
+				case 'ArrowDown':
+					e.preventDefault();
+					showMenu();
+					temporarilySetIsNavigatingViaKeyboard();
+					setTimeout(() => {
+						self.children.grid.selectNext();
+					}, 10);
+					break;
+				case 'ArrowUp':
+					e.preventDefault();
+					showMenu();
+					temporarilySetIsNavigatingViaKeyboard();
+					setTimeout(() => {
+						self.children.grid.selectPrev();
+					}, 10);
 					break;
-				// case 'ArrowDown':
-				// 	e.preventDefault();
-				// 	showMenu();
-				// 	selectNext();
-				// 	setTimeout(() => {
-				// 		if (!self.children?.grid?.selectPrev) {
-				// 			debugger;
-				// 		}
-				// 		self.children.grid.selectNext();
-				// 	}, 10);
-				// 	break;
-				// case 'ArrowUp':
-				// 	e.preventDefault();
-				// 	showMenu();
-				// 	selectPrev();
-				// 	setTimeout(() => {
-				// 		self.children.grid.selectPrev();
-				// 	}, 10);
-				// 	break;
 				default:
 			}
 		},
@@ -715,7 +720,7 @@ export function ComboComponent(props) {
 							if (selection[0]?.id === value) {
 								setIsSearchMode(false);
 								resetTextInputValue();
-								if (hideMenuOnSelection && !isEditor) {
+								if (hideMenuOnSelection && !isNavigatingViaKeyboard && !isEditor) {
 									hideMenu();
 								}
 								return;
@@ -734,7 +739,7 @@ export function ComboComponent(props) {
 							if (selection[0] && selection[0][idIx] === value) {
 								setIsSearchMode(false);
 								resetTextInputValue();
-								if (hideMenuOnSelection) {
+								if (hideMenuOnSelection && !isNavigatingViaKeyboard) {
 									hideMenu();
 								}
 								return;
@@ -748,7 +753,7 @@ export function ComboComponent(props) {
 							return;
 						}
 
-						if (hideMenuOnSelection && !isEditor) {
+						if (hideMenuOnSelection && !isNavigatingViaKeyboard && !isEditor) {
 							hideMenu();
 						}
 

package/src/Components/Grid/Grid.js

@@ -172,6 +172,10 @@ function GridComponent(props) {
 			selectRangeTo,
 			isInSelection,
 			noSelectorMeansNoResults = false,
+			selectNext,
+			selectPrev,
+			addNextToSelection,
+			addPrevToSelection,
 
 			// DataMgt
 			selectorId,
@@ -238,8 +242,7 @@ function GridComponent(props) {
 			if (disableWithSelection) {
 				return;
 			}
-			const
-				{
+			const {
 					shiftKey = false,
 					metaKey = false,
 				 } = e;
@@ -719,6 +722,51 @@ function GridComponent(props) {
 				id = noSelectorMeansNoResults ? 'NO_MATCHES' : null;
 			}
 			Repository.filter(selectorId, id, false); // so it doesn't clear existing filters
+		},
+		onGridKeyDown = (e) => {
+			if (isInlineEditorShown) {
+				return;
+			}
+			if (disableWithSelection) {
+				return;
+			}
+			const {
+					shiftKey = false,
+				} = e;
+			if (selectionMode === SELECTION_MODE_MULTI && shiftKey) {
+				switch(e.key) {
+					case 'ArrowDown':
+						e.preventDefault();
+						addNextToSelection();
+						break;
+					case 'ArrowUp':
+						e.preventDefault();
+						addPrevToSelection();
+						break;
+				}
+			} else {
+				// selectionMode is SELECTION_MODE_SINGLE
+				switch(e.key) {
+					case 'Enter':
+						// NOTE: This is never being reached.
+						// The event is getting captured somwhere else,
+						// but I can't find where.
+						// e.preventDefault();
+						
+						// launch inline or windowed editor
+						// const p = props;
+						// debugger;
+						break;
+					case 'ArrowDown':
+						e.preventDefault();
+						selectNext();
+						break;
+					case 'ArrowUp':
+						e.preventDefault();
+						selectPrev();
+						break;
+				}
+			}
 		};
 
 	useEffect(() => {
@@ -771,41 +819,18 @@ function GridComponent(props) {
 							return;
 						}
 
-						// destructure so we can set defaults
-						const {
-								header,
-								fieldName, // from @onehat/data model
-								type, // specify which column type to use (custom or built-in)
-								isEditable = false,
-								editor,
-								format,
-								renderer, // React component will render the output
-								reorderable = true,
-								resizable = true,
-								sortable = true,
-								w,
-								flex,
-								isHidden = false,
-							} = columnConfig,
-
-							config = {
+						const
+							defaults = {
 								columnId: uuid(),
-								header,
-								fieldName,
-								type,
-								isEditable,
-								editor,
-								format,
-								renderer,
-								reorderable,
-								resizable,
-								sortable,
-								w,
-								flex,
-								isHidden,
+								isEditable: false,
+								reorderable: true,
+								resizable: true,
+								sortable: true,
+								isHidden: false,
 								isOver: false,
-							};
-
+							},
+							config = _.assign({}, defaults, columnConfig);
+						
 						if (!(config.w || config.width) && !config.flex) {
 							// Neither is set
 							config.w = 100; // default
@@ -1038,6 +1063,8 @@ function GridComponent(props) {
 				{...testProps('Grid')}
 				testID="outerContainer"
 				ref={containerRef}
+				tabIndex={0}
+				onKeyDown={onGridKeyDown}
 				w="100%"
 				bg={bg}
 				borderWidth={styles.GRID_BORDER_WIDTH}

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

@@ -64,13 +64,19 @@ export default function withSelection(WrappedComponent) {
 					fireEvent('secondaryChangeSelection', secondarySelection);
 				}
 			},
+			secondarySelectPrev = () => {
+				secondarySelectDirection(SELECT_UP);
+			},
 			secondarySelectNext = () => {
 				secondarySelectDirection(SELECT_DOWN);
 			},
-			secondarySelectPrev = () => {
-				secondarySelectDirection(SELECT_UP);
+			secondaryAddPrevToSelection = () => {
+				secondarySelectDirection(SELECT_UP, true);
+			},
+			secondaryAddNextToSelection = () => {
+				secondarySelectDirection(SELECT_DOWN, true);
 			},
-			secondarySelectDirection = (which) => {
+			secondarySelectDirection = (which, isAdd = false) => {
 				const { items, max, min, noSelection, } = getMaxMinSelectionIndices();
 				let newIx;
 				if (which === SELECT_DOWN) {
@@ -89,12 +95,15 @@ export default function withSelection(WrappedComponent) {
 					}
 				}
 				if (items[newIx]) {
-					secondarySetSelection([items[newIx]]);
+					if (isAdd) {
+						secondaryAddToSelection(items[newIx]);
+					} else {
+						secondarySetSelection([items[newIx]]);
+					}
 				}
 			},
 			secondaryAddToSelection = (item) => {
-				let newSelection = [];
-				newSelection = _.clone(secondaryLocalSelection); // so we get a new object, so descendants rerender
+				const newSelection = _.clone(secondaryLocalSelection); // so we get a new object, so descendants rerender
 				newSelection.push(item);
 				secondarySetSelection(newSelection);
 			},
@@ -347,8 +356,10 @@ export default function withSelection(WrappedComponent) {
 		if (self) {
 			self.secondarySelection = secondaryLocalSelection;
 			self.secondarySetSelection = secondarySetSelection;
-			self.secondarySelectNext = secondarySelectNext;
 			self.secondarySelectPrev = secondarySelectPrev;
+			self.secondarySelectNext = secondarySelectNext;
+			self.secondaryAddPrevToSelection = secondaryAddPrevToSelection;
+			self.secondaryAddNextToSelection = secondaryAddNextToSelection;
 			self.secondaryAddToSelection = secondaryAddToSelection;
 			self.secondaryRemoveFromSelection = secondaryRemoveFromSelection;
 			self.secondaryDeselectAll = secondaryDeselectAll;
@@ -388,8 +399,10 @@ export default function withSelection(WrappedComponent) {
 					secondarySelection={secondaryLocalSelection}
 					secondarySetSelection={secondarySetSelection}
 					secondarySelectionMode={secondarySelectionMode}
-					secondarySelectNext={secondarySelectNext}
 					secondarySelectPrev={secondarySelectPrev}
+					secondarySelectNext={secondarySelectNext}
+					secondaryAddNextToSelection={secondaryAddNextToSelection}
+					secondaryAddPrevToSelection={secondaryAddPrevToSelection}
 					secondaryRemoveFromSelection={secondaryRemoveFromSelection}
 					secondaryAddToSelection={secondaryAddToSelection}
 					secondaryDeselectAll={secondaryDeselectAll}

package/src/Components/Hoc/withSelection.js

@@ -64,13 +64,19 @@ export default function withSelection(WrappedComponent) {
 				}
 				forceUpdate();
 			},
+			selectPrev = () => {
+				selectDirection(SELECT_UP);
+			},
 			selectNext = () => {
 				selectDirection(SELECT_DOWN);
 			},
-			selectPrev = () => {
-				selectDirection(SELECT_UP);
+			addPrevToSelection = () => {
+				selectDirection(SELECT_UP, true);
+			},
+			addNextToSelection = () => {
+				selectDirection(SELECT_DOWN, true);
 			},
-			selectDirection = (which) => {
+			selectDirection = (which, isAdd = false) => {
 				const { items, max, min, noSelection, } = getMaxMinSelectionIndices();
 				let newIx;
 				if (which === SELECT_DOWN) {
@@ -89,12 +95,15 @@ export default function withSelection(WrappedComponent) {
 					}
 				}
 				if (items[newIx]) {
-					setSelection([items[newIx]]);
+					if (isAdd) {
+						addToSelection(items[newIx]);
+					} else {
+						setSelection([items[newIx]]);
+					}
 				}
 			},
 			addToSelection = (item) => {
-				let newSelection = [];
-				newSelection = _.clone(localSelection.current); // so we get a new object, so descendants rerender
+				const newSelection = _.clone(localSelection.current); // so we get a new object, so descendants rerender
 				newSelection.push(item);
 				setSelection(newSelection);
 			},
@@ -345,8 +354,10 @@ export default function withSelection(WrappedComponent) {
 		if (self) {
 			self.selection = localSelection.current;
 			self.setSelection = setSelection;
-			self.selectNext = selectNext;
 			self.selectPrev = selectPrev;
+			self.selectNext = selectNext;
+			self.addPrevToSelection = addPrevToSelection;
+			self.addNextToSelection = addNextToSelection;
 			self.addToSelection = addToSelection;
 			self.removeFromSelection = removeFromSelection;
 			self.deselectAll = deselectAll;
@@ -386,8 +397,10 @@ export default function withSelection(WrappedComponent) {
 					selection={localSelection.current}
 					setSelection={setSelection}
 					selectionMode={selectionMode}
-					selectNext={selectNext}
 					selectPrev={selectPrev}
+					selectNext={selectNext}
+					addNextToSelection={addNextToSelection}
+					addPrevToSelection={addPrevToSelection}
 					removeFromSelection={removeFromSelection}
 					addToSelection={addToSelection}
 					deselectAll={deselectAll}