@onehat/ui 0.4.86 → 0.4.88

package/package.json

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

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

@@ -28,6 +28,7 @@ import useForceUpdate from '../../../../Hooks/useForceUpdate.js';
 import withAlert from '../../../Hoc/withAlert.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
+import withTooltip from '../../../Hoc/withTooltip.js';
 import withValue from '../../../Hoc/withValue.js';
 import emptyFn from '../../../../Functions/emptyFn.js';
 import IconButton from '../../../Buttons/IconButton.js';
@@ -100,8 +101,6 @@ export const ComboComponent = forwardRef((props, ref) => {
 			onGridDelete, // to hook into when menu deletes (ComboEditor only)
 			onSubmit, // when Combo is used in a Tag, call this when the user submits the Combo value (i.e. presses Enter or clicks a row)
 			newEntityDisplayProperty,
-			tooltip = null,
-			tooltipPlacement = 'bottom',
 			testID,
 
 			// withComponent
@@ -731,14 +730,6 @@ export const ComboComponent = forwardRef((props, ref) => {
 						InputLeftElement={inputIconElement}
 						autoSubmitDelay={500}
 						placeholder={placeholder}
-						tooltip={tooltip}
-						tooltipPlacement={tooltipPlacement}
-						tooltipTriggerClassName={clsx(
-							'grow',
-							'h-auto',
-							'self-stretch',
-							'flex-1'
-						)}
 						className={clsx(
 							'Combo-Input',
 							'grow',
@@ -976,13 +967,6 @@ export const ComboComponent = forwardRef((props, ref) => {
 									InputLeftElement={inputIconElement}
 									autoSubmitDelay={500}
 									placeholder={placeholder}
-									tooltip={tooltip}
-									tooltipPlacement={tooltipPlacement}
-									tooltipTriggerClassName={clsx(
-										'grow',
-										'h-full',
-										'flex-1'
-									)}
 									className={clsx(
 										'Combo-inputClone-Input',
 										'grow',
@@ -1103,12 +1087,6 @@ export const ComboComponent = forwardRef((props, ref) => {
 							InputLeftElement={inputIconElement}
 							autoSubmitDelay={500}
 							placeholder={placeholder}
-							tooltip={tooltip}
-							tooltipPlacement={tooltipPlacement}
-							tooltipTriggerClassName={clsx(
-								'h-full',
-								'flex-1'
-							)}
 							className={clsx(
 								'h-full',
 								'flex-1',
@@ -1282,7 +1260,9 @@ export const Combo = withComponent(
 						withAlert(
 							withData(
 								withValue(
-									ComboComponent
+									withTooltip(
+										ComboComponent
+									)
 								)
 							)
 						)

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

@@ -242,6 +242,7 @@ export const DateElement = forwardRef((props, ref) => {
 	// Format the display date/time/datetime
 	let placeholder = 'Select',
 		pickerValue = null,
+		title = null,
 		height = null,
 		width = null;
 	switch(mode) {

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

@@ -21,6 +21,7 @@ import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
 import withModal from '../../../Hoc/withModal.js';
 import withValue from '../../../Hoc/withValue.js';
+import withTooltip from '../../../Hoc/withTooltip.js';
 import ValueBox from './ValueBox.js';
 import Inflector from 'inflector-js';
 import Combo, { ComboEditor } from '../Combo/Combo.js';
@@ -42,7 +43,6 @@ function TagComponent(props) {
 			joinDataConfig,
 			getBaseParams, // See note in useEffect
 			outerValueId, // See note in useEffect
-			tooltip,
 			testID,
 			isDirty = false,
 
@@ -535,7 +535,6 @@ function TagComponent(props) {
 						onGridAdd={onGridAdd}
 						onGridSave={onGridSave}
 						onGridDelete={onGridDelete}
-						tooltip={tooltip}
 						usePermissions={props.usePermissions}
 						{..._combo}
 						className={comboClassName}
@@ -559,7 +558,9 @@ export const Tag = withAdditionalProps(
 							withAlert(
 								withData(
 									withValue(
-										TagComponent
+										withTooltip(
+											TagComponent
+										)
 									)
 								)
 							)

package/src/Components/Hoc/withFilters.js

@@ -294,7 +294,12 @@ export default function withFilters(WrappedComponent) {
 						elementProps.minWidth = 100;
 					}
 
-					const tooltip = filter.tooltip || title;
+					let
+						tooltip = filter.tooltip || title,
+						placeholder = filter.placeholder || title;
+					if (title === tooltip || placeholder === tooltip) {
+						tooltip = null;
+					}
 					let filterClassName = filterProps.className + ` Filter-${field}`;
 					if (className) {
 						filterClassName += ' ' + className;
@@ -305,7 +310,7 @@ export default function withFilters(WrappedComponent) {
 					let filterElement = <Element
 											{...testProps('filter-' + field)}
 											tooltip={tooltip}
-											placeholder={tooltip}
+											placeholder={placeholder}
 											value={getFilterValue(field)}
 											onChangeValue={(value) => onFilterChangeValue(field, value)}
 											isInFilter={true}
@@ -552,7 +557,7 @@ export default function withFilters(WrappedComponent) {
 				if (isUsingCustomFilters) {
 					_.each(filtersToUse, ({ field, value, getRepoFilters }) => {
 						if (getRepoFilters) {
-							let repoFiltersFromFilter = getRepoFilters(value) || [];
+							let repoFiltersFromFilter = getRepoFilters(value) || []; // getRepoFilters converts the field's value into repository filters (e.g. convert a DateRange field value into two repository filters: >= low, <= high)
 							if (!_.isArray(repoFiltersFromFilter)) {
 								repoFiltersFromFilter = [repoFiltersFromFilter];
 							}

package/src/Components/Tree/Tree.js

@@ -101,6 +101,7 @@ function TreeComponent(props) {
 			getNodeProps = (item) => {
 				return {};
 			},
+			fitToContainerWidth = false,
 			noneFoundText,
 			disableLoadingIndicator = false,
 			disableSelectorSelected = false,
@@ -1349,6 +1350,7 @@ function TreeComponent(props) {
 										nodeCanSelect={nodeCanSelect}
 										nodeCanDrag={nodeCanDrag}
 										isHighlighted={highlitedDatum === datum}
+										fitToContainerWidth={fitToContainerWidth}
 										{...nodeDragProps}
 
 										// fields={fields}
@@ -1504,7 +1506,7 @@ function TreeComponent(props) {
 		'Tree-VStack',
 		'flex-1',
 		'w-full',
-		'min-w-[300px]',
+		fitToContainerWidth ? 'min-w-0' : 'min-w-[300px]',
 	);
 	if (isLoading) {
 		className += ' border-t-2 border-[#f00]';
@@ -1542,8 +1544,9 @@ function TreeComponent(props) {
 					>
 						<ScrollView
 							{...testProps('ScrollView-Horizontal')}
-							horizontal={true}
+							horizontal={!fitToContainerWidth}
 							className="w-full"
+							showsHorizontalScrollIndicator={!fitToContainerWidth}
 							contentContainerStyle={{
 								minWidth: '100%',
 								flexDirection: 'column', // Keep vertical stacking

package/src/Components/Tree/TreeNode.js

@@ -37,6 +37,7 @@ export default function TreeNode(props) {
 			nodeProps = {},
 			onToggle,
 			bg,
+			fitToContainerWidth,
 			isDraggable,
 			isDragSource,
 			isHovered,
@@ -132,6 +133,10 @@ export default function TreeNode(props) {
 			!showNodeHandle && 'select-none',
 			'cursor-pointer',
 		);
+		if (fitToContainerWidth) {
+			// ensure node occupies container width and allows children to wrap instead of forcing a wider row
+			className += ' w-full min-w-0 flex-wrap';
+		}
 
 		// Add drop state classes for additional styling
 		if (isOver && actualCanDrop) {
@@ -151,6 +156,9 @@ export default function TreeNode(props) {
 					className={className}
 					style={{
 						backgroundColor: bg,
+						// if fitToContainerWidth, lock to 100% width and allow wrapping; don't forcibly hide content
+						width: fitToContainerWidth ? '100%' : undefined,
+						minWidth: fitToContainerWidth ? 0 : undefined,
 					}}
 					ref={(element) => {
 						if (dropTargetRef && dropTargetRef.current !== undefined) {
@@ -210,22 +218,24 @@ export default function TreeNode(props) {
 						/>}
 
 					{text && <TextNative
-								numberOfLines={1}
-								ellipsizeMode="head"
+								// allow multi-line wrapping instead of truncation so content can wrap to available width
+								// removed numberOfLines and ellipsizeMode to allow wrapping
 								// {...propsToPass}
 								className={clsx(
 									'TreeNode-TextNative',
 									'self-center',
-									'overflow-hidden',
+									'overflow-visible',
 									'flex',
 									'flex-1',
-									'text-ellipsis',
+									'min-w-0',
+									'break-words',
+									'whitespace-normal',
 									styles.TREE_NODE_CLASSNAME,
 									nodeProps?._text?.className ?? null,
 								)}
 							>{text}</TextNative>}
 
-					{content}
+					{content && <Box className="flex-1 min-w-0 break-words whitespace-normal">{content}</Box>}
 
 				</HStackNative>;
 	}, [
@@ -233,6 +243,8 @@ export default function TreeNode(props) {
 		bg,
 		item,
 		hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
+		fitToContainerWidth,
+		isDraggable,
 		isDragSource,
 		isExpanded,
 		isHighlighted,