@onehat/ui 0.4.70 → 0.4.72

package/src/Components/Tab/TabBar.js

@@ -8,6 +8,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -130,11 +131,11 @@ function TabBar(props) {
 							tooltip={isCollapsed ? 'Expand' : 'Collapse'}
 						/>;
 			} else {
-				tabClassName += `
-					${direction === VERTICAL ? 'w-[200px]' : ''}
-					pr-0
-					mr-0
-				`;
+				tabClassName += clsx(
+					direction === VERTICAL ? 'w-[200px]' : '',
+					'pr-0',
+					'mr-0',
+				);
 				_icon.as = Minimize;
 				button = <Button
 							{...testProps('toggleBtn')}
@@ -158,59 +159,59 @@ function TabBar(props) {
 		getTabProps = () => {
 			const
 				tabProps = {
-					className: `
-						${styles.TAB_BG}
-						${isCollapsed ? 'justify-center' : 'justify-start'}
-					`,
+					className: clsx(
+						styles.TAB_BG,
+						isCollapsed ? 'justify-center' : 'justify-start',
+					),
 				},
 				textProps = {
 					// numberOfLines: 1,
 					// ellipsizeMode: 'head',
-					className: `
-						${styles.TAB_FONTSIZE}
-						${styles.TAB_COLOR}
-					`,
+					className: clsx(
+						styles.TAB_FONTSIZE,
+						styles.TAB_COLOR,
+					),
 				},
 				iconProps = {
 					// size: 'md',
-					className: `
-						${styles.TAB_ICON_COLOR}
-					`,
+					className: clsx(
+						styles.TAB_ICON_COLOR,
+					),
 				};
 			switch(direction) {
 				case VERTICAL:
-					tabProps.className += `
-						rounded-l-lg
-						rounded-r-none
-						w-full
-						ml-2
-						mr-0
-						mb-1
-						px-4
-					`;
-					textProps.className += `
-						w-full
-						mr-0
-						mb-1
-						py-0
-						pl-3
-						pr-0
-						flex-1
-						text-left
-					`;
+					tabProps.className += clsx(
+						'rounded-l-lg',
+						'rounded-r-none',
+						'w-full',
+						'ml-2',
+						'mr-0',
+						'mb-1',
+						'px-4',
+					);
+					textProps.className += clsx(
+						'w-full',
+						'mr-0',
+						'mb-1',
+						'py-0',
+						'pl-3',
+						'pr-0',
+						'flex-1',
+						'text-left',
+					);
 					break;
 				case HORIZONTAL:
-					tabProps.className += `
-						rounded-t
-						rounded-b-none
-						mr-1
-						py-1
-					`;
-					textProps.className += `
-						px-1
-						py-0
-						mr-1
-					`;
+					tabProps.className += clsx(
+						'rounded-t',
+						'rounded-b-none',
+						'mr-1',
+						'py-1',
+					);
+					textProps.className += clsx(
+						'px-1',
+						'py-0',
+						'mr-1',
+					);
 					break;
 				default:
 			}
@@ -459,16 +460,16 @@ function TabBar(props) {
 		tabBar = <VStackNative
 					{...testProps('TabBar')}
 					{...propsToPass}
-					className={`
-						${isCollapsed ? 'w-[50px]' : 'w-[' + tabWidth + 'px]'}
-						${isCollapsed ? 'pl-1' : 'pl-4'}
-						items-center
-						justify-start
-						py-2
-						overflow-x-hidden
-						overflow-y-auto
-						${styles.TAB_BAR_CLASSNAME}
-					`}
+					className={clsx(
+						isCollapsed ? 'w-[50px]' : 'w-[' + tabWidth + 'px]',
+						isCollapsed ? 'pl-1' : 'pl-4',
+						'items-center',
+						'justify-start',
+						'py-2',
+						'overflow-x-hidden',
+						'overflow-y-auto',
+						styles.TAB_BAR_CLASSNAME
+					)}
 				>
 					{renderedTabs}
 					{canToggleCollapse ? 
@@ -488,16 +489,16 @@ function TabBar(props) {
 	if (direction === HORIZONTAL) {
 		tabBar = <HStackNative
 					{...testProps('TabBar')}
-					className={`
-						${'h-[' + tabHeight + 'px]'}
-						items-center
-						justify-start
-						overflow-x-auto
-						overflow-y-hidden
-						p-1
-						pb-0
-						${styles.TAB_BAR_CLASSNAME}
-					`}
+					className={clsx(
+						'h-[' + tabHeight + 'px]',
+						'items-center',
+						'justify-start',
+						'overflow-x-auto',
+						'overflow-y-hidden',
+						'p-1',
+						'pb-0',
+						styles.TAB_BAR_CLASSNAME
+					)}
 				>
 					<ScrollView
 						horizontal={true}

package/src/Components/Toolbar/FilterToolbar.js

@@ -1,6 +1,7 @@
 import {
 	HStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
 
@@ -8,17 +9,19 @@ export default function FilterToolbar(props) {
 	const {
 			toolbarItems = [],
 		} = props;
-	return <Toolbar className={`
-				bg-grey-200
-				border-t
-				border-t-grey-400
-				w-full
-			`} >
+	return <Toolbar
+				className={clsx(
+					'bg-grey-200',
+					'border-t',
+					'border-t-grey-400',
+					'w-full',
+				)}
+			>
 				{toolbarItems.length && 
-					<HStack className={`
-						flex-1
-						border
-						border-l-grey-100
-					`}>{toolbarItems}</HStack>}
+					<HStack className={clsx(
+						'flex-1',
+						'border',
+						'border-l-grey-100',
+					)}>{toolbarItems}</HStack>}
 			</Toolbar>;
 };

package/src/Components/Toolbar/Pagination.js

@@ -4,6 +4,7 @@ import {
 	HStackNative,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import testProps from '../../Functions/testProps.js';
 import Button from '../Buttons/Button.js';
@@ -154,25 +155,25 @@ export default function Pagination(props) {
 									onChangeValue={(value) => Repository.setPage(value)}
 									maxValue={totalPages}
 									isDisabled={totalPages === 1}
-									className={`
-										Pagination-pageInput
-										min-w-[40px]
-										w-[40px]
-										text-center
-										bg-grey-100
-									`}
+									className={clsx(
+										'Pagination-pageInput',
+										'min-w-[40px]',
+										'w-[40px]',
+										'text-center',
+										'bg-grey-100',
+									)}
 									textAlignIsCenter={true}
 									tooltip="Set Page"
 									tooltipClassName="w-[40px]"
 								/>);
 					items.push(<Text
 									key="totalPages"
-									className={`
-										Pagination-totalPages
-										whitespace-nowrap
-										inline-flex
-										mx-1
-									`}
+									className={clsx(
+										'Pagination-totalPages',
+										'whitespace-nowrap',
+										'inline-flex',
+										'mx-1',
+									)}
 								>{`of ${totalPages}`}</Text>);
 				}
 			}
@@ -194,12 +195,12 @@ export default function Pagination(props) {
 				}
 				items.push(<Text
 								key="pageDisplay"
-								className={`
-									Pagination-pageDisplay
-									whitespace-nowrap
-									inline-flex
-									mx-1
-								`}
+								className={clsx(
+									'Pagination-pageDisplay',
+									'whitespace-nowrap',
+									'inline-flex',
+									'mx-1',
+								)}
 							>{`Displaying ${pageSpan} of ${total}`}</Text>);
 			}
 		}
@@ -207,12 +208,12 @@ export default function Pagination(props) {
 					style={{
 						userSelect: 'none',
 					}}
-					className={`
-						Pagination
-						items-center
-						shrink-0
-						gap-2
-					`}
+					className={clsx(
+						'Pagination',
+						'items-center',
+						'shrink-0',
+						'gap-2',
+					)}
 				>
 					{items}
 				</HStack>;

package/src/Components/Toolbar/PaginationToolbar.js

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import {
 	HStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Pagination from './Pagination.js'
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
@@ -37,22 +38,22 @@ export default function PaginationToolbar(props) {
 		};
 
 	return <Toolbar
-				className={`
-					border-t
-					border-t-grey-400
-				`}
+				className={clsx(
+					'border-t',
+					'border-t-grey-400',
+				)}
 				onLayout={(e) => onLayout(e)}
 			>
 				{toolbarItems.length ?
 					<HStack
-						className={`
-							PaginationToolbar-HStack
-							shrink-0
-							border-r
-							border-r-grey-400
-							mr-3
-							pr-3
-						`}
+						className={clsx(
+							'PaginationToolbar-HStack',
+							'shrink-0',
+							'border-r',
+							'border-r-grey-400',
+							'mr-3',
+							'pr-3',
+						)}
 					>{toolbarItems}</HStack> : null}
 				<Pagination
 					{...propsToPass}

package/src/Components/Toolbar/Toolbar.js

@@ -1,24 +1,25 @@
 import {
 	HStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Toolbar(props) {
 	
 	const styles = UiGlobals.styles;
 	
-	let className = `
-		Toolbar
-		overflow-auto
-		items-center
-		justify-start
-		gap-2
-		p-2
-		border-b
-		border-solid
-		border-b-grey-400
-		${styles.TOOLBAR_CLASSNAME}
-	`;
+	let className = clsx(
+		'Toolbar',
+		'overflow-auto',
+		'items-center',
+		'justify-start',
+		'gap-2',
+		'p-2',
+		'border-b',
+		'border-solid',
+		'border-b-grey-400',
+		styles.TOOLBAR_CLASSNAME,
+	);
 	if (props.className) {
 		className += ' ' + props.className
 	}

package/src/Components/Tooltip/Tooltip.js

@@ -3,6 +3,7 @@ import {
 	BoxNative as Box,
 	Tooltip, TooltipContent, TooltipText,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 
 const TooltipElement = forwardRef((props, ref) => {
 	const {

package/src/Components/Tree/Tree.js

@@ -6,6 +6,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
@@ -1051,11 +1052,11 @@ function TreeComponent(props) {
 								onContextMenu(item, e, selection);
 							}
 						}}
-						className={`
-							Pressable
-							Node
-							flex-row
-						`}
+						className={clsx(
+							'Pressable',
+							'Node',
+							'flex-row',
+						)}
 						style={{
 							paddingLeft: (areRootsVisible ? depth : depth -1) * DEPTH_INDENT_PX,
 						}}
@@ -1087,17 +1088,26 @@ function TreeComponent(props) {
 											id: item.id,
 											item,
 											getSelection,
+											isInSelection,
 											type: nodeDragSourceType,
+											onDragStart: () => {
+												if (!isInSelection(item)) { // get updated isSelected (will be stale if using one in closure)
+													// reset the selection to just this one node if it's not already selected
+													setSelection([item]);
+												}
+											},
 										};
 
 										// Prevent root nodes from being dragged, and use custom logic if provided
 										nodeDragProps.canDrag = (monitor) => {
 											const currentSelection = getSelection();
 											
-											// Check if any selected node is a root node (can't drag root nodes)
-											const hasRootNode = currentSelection.some(node => node.isRoot);
-											if (hasRootNode) {
-												return false;
+											if (isInSelection(item)) {
+												// make sure root node is not selected (can't drag root nodes)
+												const hasRootNode = currentSelection.some(node => node.isRoot);
+												if (hasRootNode) {
+													return false;
+												}
 											}
 											
 											// Use custom drag validation if provided
@@ -1117,7 +1127,7 @@ function TreeComponent(props) {
 										// Add drag preview rendering
 										nodeDragProps.getDragProxy = getCustomDragProxy ? 
 											(dragItem) => getCustomDragProxy(item, getSelection()) :
-											null; // Let GlobalDragProxy handle the default case
+											null; // let GlobalDragProxy handle the default case
 
 										const dropTargetAccept = 'internal';
 										nodeDragProps.isDropTarget = true;
@@ -1177,15 +1187,22 @@ function TreeComponent(props) {
 											nodeDragProps.isDragSource = !item.isRoot; // Root nodes cannot be dragged
 											nodeDragProps.dragSourceType = nodeDragSourceType;
 											if (getNodeDragSourceItem) {
-												nodeDragProps.dragSourceItem = getNodeDragSourceItem(item, getSelection, nodeDragSourceType);
+												nodeDragProps.dragSourceItem = getNodeDragSourceItem(item, getSelection, isInSelection, nodeDragSourceType);
 											} else {
 												nodeDragProps.dragSourceItem = {
 													id: item.id,
 													item,
 													getSelection,
+													isInSelection,
 													type: nodeDragSourceType,
 												};
 											}
+											nodeDragProps.dragSourceItem.onDragStart = () => {
+												if (!isInSelection(item)) { // get updated isSelected (will be stale if using one in closure)
+													// reset the selection to just this one node if it's not already selected
+													setSelection([item]);
+												}
+											};
 											if (canNodeMoveExternally) {
 												nodeDragProps.canDrag = canNodeMoveExternally;
 											}
@@ -1400,12 +1417,12 @@ function TreeComponent(props) {
 		}
 	}
 
-	let className = `
-		Tree-VStack
-		flex-1
-		w-full
-		min-w-[300px]
-	`;
+	let className = clsx(
+		'Tree-VStack',
+		'flex-1',
+		'w-full',
+		'min-w-[300px]',
+	);
 	if (isLoading) {
 		className += ' border-t-2 border-[#f00]';
 	} else {

package/src/Components/Tree/TreeNode.js

@@ -6,6 +6,7 @@ import {
 	Spinner,
 	TextNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import * as colourMixer from '@k-renwick/colour-mixer';
 import {
 	UI_MODE_WEB,
@@ -15,7 +16,7 @@ import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import IconButton from '../Buttons/IconButton.js';
 import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
-import TreeNodeDragHandle from './TreeNodeDragHandle.js';
+import RowHandle from '../Grid/RowHandle.js';
 import testProps from '../../Functions/testProps.js';
 import ChevronRight from '../Icons/ChevronRight.js';
 import ChevronDown from '../Icons/ChevronDown.js';
@@ -39,11 +40,13 @@ export default function TreeNode(props) {
 			nodeProps = {},
 			onToggle,
 			bg,
+			isDraggable,
 			isDragSource,
 			isHovered,
 			isHighlighted,
 			isOver,
 			isSelected,
+			showSelectHandle,
 			canDrop,
 			draggedItem,
 			validateDrop, // same as canDrop (for visual feedback)
@@ -114,15 +117,15 @@ export default function TreeNode(props) {
 			bg = colourMixer.blend(bg, 0.5, mixWith);
 		}
 
-		let className = `
-			TreeNode
-			items-center
-			flex-1
-			grow-1
-			select-none
-			cursor-pointer
-		`;
-		
+		let className = clsx(
+			'TreeNode',
+			'items-center',
+			'flex-1',
+			'grow-1',
+			'select-none',
+			'cursor-pointer',
+		);
+
 		// Add drop state classes for additional styling
 		if (isOver && actualCanDrop) {
 			className += ' TreeNode--dropValid border-2 border-green-400';
@@ -143,19 +146,21 @@ export default function TreeNode(props) {
 						backgroundColor: bg,
 					}}
 					ref={(element) => {
-						// Attach both drag and drop refs to the same element
-						if (dragSourceRef && typeof dragSourceRef === 'function') {
-							dragSourceRef(element);
-						}
 						if (dropTargetRef && dropTargetRef.current !== undefined) {
 							// dropTargetRef is a ref object, not a callback
 							dropTargetRef.current = element;
 						}
 					}}
 				>
-					{isPhantom && <Box t={0} l={0} className="absolute bg-[#f00] h-[2px] w-[2px]" />}
+					{isPhantom && <Box className="absolute t-0 l-0 bg-[#f00] h-[2px] w-[2px]" />}
 					
-					{isDragSource && <TreeNodeDragHandle />}
+					{(isDragSource || showSelectHandle) &&
+						<RowHandle
+							ref={dragSourceRef}
+							isDragSource={isDragSource}
+							isDraggable={isDraggable}
+							showSelectHandle={showSelectHandle}
+						/>}
 
 					{hasChildren && <IconButton
 										{...testProps('expandBtn')}
@@ -172,19 +177,15 @@ export default function TreeNode(props) {
 								numberOfLines={1}
 								ellipsizeMode="head"
 								// {...propsToPass}
-								className={`
-									TreeNode-TextNative
-									self-center
-									overflow-hidden
-									flex
-									flex-1
-									text-ellipsis
-									select-none
-									${styles.TREE_NODE_CLASSNAME}
-								`}
-								style={{
-									userSelect: 'none',
-								}}
+								className={clsx(
+									'TreeNode-TextNative',
+									'self-center',
+									'overflow-hidden',
+									'flex',
+									'flex-1',
+									'text-ellipsis',
+									styles.TREE_NODE_CLASSNAME,
+								)}
 							>{text}</TextNative>}
 
 					{content}

package/src/Components/Tree/TreeNodeDragHandle.js

@@ -1,33 +1,38 @@
+import { forwardRef } from 'react';
 import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
-function TreeNodeDragHandle(props) {
-	let className = `
-		TreeNodeDragHandle
-		h-full
-		w-[14px]
-		px-[2px]
-		border-l-2
-		items-center
-		justify-center
-		select-none
-	`;
+const TreeNodeDragHandle = forwardRef(function(props, ref) {
+	let className = clsx(
+		'TreeNodeDragHandle',
+		'h-full',
+		'w-[17px]',
+		'px-[2px]',
+		'border-l-2',
+		'items-center',
+		'justify-center',
+		'select-none',
+	);
 	if (props.className) {
 		className += ' ' + props.className;
 	}
 	return <VStack
+				{...props}
+				ref={ref}
 				style={styles.ewResize}
 				className={className}
 			>
 				<Icon
 					as={GripVertical}
 					size="xs"
-					className="handle w-full h-full text-[#ccc]" />
+					className="handle w-full h-full text-[#ccc]"
+				/>
 			</VStack>;
-}
+});
 
 export default TreeNodeDragHandle;