@onehat/ui 0.4.4 → 0.4.7

package/src/Components/Gluestack/index.js

@@ -49,7 +49,7 @@ import { Text } from './text';
 import { Text as TextNative } from './text/index.tsx'; // explicitly import the native version
 import { Textarea, TextareaInput } from './textarea';
 import { Toast } from './toast';
-import { Tooltip } from './tooltip';
+import { Tooltip, TooltipContent, TooltipText } from './tooltip';
 import { View } from './view';
 import { VirtualizedList } from './virtualized-list';
 import { VStack } from './vstack';
@@ -108,7 +108,7 @@ export {
 	TextNative,
 	Textarea, TextareaInput,
 	Toast,
-	Tooltip,
+	Tooltip, TooltipContent, TooltipText,
 	View,
 	VirtualizedList,
 	VStack,

package/src/Components/Grid/Grid.js

@@ -7,7 +7,7 @@ import {
 	// ScrollView,
 	VStack,
 	VStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	ScrollView,
 } from 'react-native';

package/src/Components/Grid/GridHeaderRow.js

@@ -5,7 +5,7 @@ import {
 	Icon,
 	Pressable,
 	TextNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	SORT_ASCENDING,
 	SORT_DESCENDING,
@@ -356,9 +356,12 @@ export default function GridHeaderRow(props) {
 								onMouseEnter={(e) => onHeaderMouseEnter(e, ix)}
 								onMouseLeave={(e) => onHeaderMouseLeave(e, ix)}
 								className={`
+									GridHeaderRow-Pressable
 									h-full
 									flex-row
 									p-0
+									items-center
+									justify-center
 									${rowClassName}
 									${styles.GRID_HEADER_BG}
 									${styles.GRID_HEADER_BG_HOVER}
@@ -392,10 +395,13 @@ export default function GridHeaderRow(props) {
 									key="Text"
 									numberOfLines={1}
 									className={`
-										h-full
+										GridHeaderRow-TextNative
+										h-auto
 										flex-1
 										items-center
 										justify-center
+										leading-tight
+										text-center
 										overflow-hidden
 										text-ellipsis
 										${styles.GRID_HEADER_FONTSIZE}
@@ -410,6 +416,7 @@ export default function GridHeaderRow(props) {
 										as={isSortDirectionAsc ? SortUp : SortDown}
 										size={styles.GRID_HEADER_ICON_SIZE}
 										className={`
+											GridHeaderRow-Icon
 											text-center
 											text-grey-500
 											${styles.GRID_HEADER_ICON_MT}
@@ -460,7 +467,7 @@ export default function GridHeaderRow(props) {
 				if (areRowsDragSource) {
 					headerColumns.unshift(<Box
 						key="spacer"
-						className="w-[3px]"
+						className="Spacer w-[3px]"
 					/>);
 				}
 				if (!hideNavColumn) {
@@ -473,7 +480,12 @@ export default function GridHeaderRow(props) {
 					style={{
 						scrollbarWidth: 'none',
 					}}
-					className="w-full bg-grey-200"
+					className={`
+						GridHeaderRow-HStack
+						w-full
+						h-[40px]
+						bg-grey-200
+					`}
 				> 
 					{renderHeaders()}
 				</HStack>;

package/src/Components/Grid/GridRow.js

@@ -5,7 +5,7 @@ import {
 	HStackNative,
 	Icon,
 	TextNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';

package/src/Components/Grid/HeaderColumnSelectorHandle.js

@@ -1,7 +1,7 @@
 import {
 	Icon,
 	Pressable,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Gear from '../Icons/Gear.js';
 import _ from 'lodash';
 

package/src/Components/Grid/HeaderReorderHandle.js

@@ -1,7 +1,7 @@
 import {
 	Icon,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripVertical from '../Icons/GripVertical.js';

package/src/Components/Grid/HeaderResizeHandle.js

@@ -1,7 +1,7 @@
 import {
 	Icon,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripLinesVertical from '../Icons/GripLinesVertical.js';

package/src/Components/Grid/NoRecordsFound.js

@@ -2,7 +2,7 @@ import {
 	HStack,
 	Text,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import IconButton from '../Buttons/IconButton.js';
 import Rotate from '../Icons/Rotate.js';
 

package/src/Components/Grid/RowDragHandle.js

@@ -1,7 +1,7 @@
 import {
 	Icon,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 

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

@@ -1,6 +1,6 @@
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../Constants/Editor.js';

package/src/Components/Hoc/withAlert.js

@@ -4,7 +4,7 @@ import {
 	HStack,
 	Icon,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import withModal from './withModal.js';
 import CircleInfo from '../Icons/CircleInfo.js';
 import CircleQuestion from '../Icons/CircleQuestion.js';

package/src/Components/Hoc/withContextMenu.js

@@ -2,7 +2,7 @@ import { forwardRef, useRef, useState, useEffect, } from 'react';
 import {
 	Text,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Buttons/Button.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';

package/src/Components/Hoc/withFilters.js

@@ -3,7 +3,7 @@ import {
 	HStack,
 	// ScrollView,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	ScrollView,
 } from 'react-native'

package/src/Components/Hoc/withModal.js

@@ -4,7 +4,7 @@ import {
 	Icon,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Buttons/Button.js';
 import Panel from '../Panel/Panel.js';
 import Footer from '../Layout/Footer.js';

package/src/Components/Hoc/withSideEditor.js

@@ -35,6 +35,7 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 				// pull these out, as we don't want them going to the Editor
 				selectorId,
 				selectorSelected,
+				style,
 				
 				...propsToPass
 			} = props;

package/src/Components/Hoc/withWindowedEditor.js

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../Constants/Editor.js';

package/src/Components/Layout/Footer.js

@@ -1,6 +1,6 @@
 import {
 	HStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Footer(props) {

package/src/Components/Messages/ConfirmationMessage.js

@@ -1,7 +1,7 @@
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Buttons/Button';
 import emptyFn from '../../Functions/emptyFn.js';
 

package/src/Components/Messages/ErrorMessage.js

@@ -4,7 +4,7 @@ import {
 	Icon,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Buttons/Button';
 import testProps from '../../Functions/testProps.js';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';

package/src/Components/Messages/Loading.js

@@ -3,7 +3,7 @@ import {
 	HStackNative,
 	Spinner,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import ScreenContainer from '../Container/ScreenContainer.js';
 
 export default function Loading(props) {

package/src/Components/Messages/OkMessage.js

@@ -1,7 +1,7 @@
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Buttons/Button';
 
 export default function OkMessage(props) {

package/src/Components/Messages/Unauthorized.js

@@ -1,7 +1,7 @@
 import {
 	Text,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 
 export default function Unauthorized(props) {
 	const 

package/src/Components/Messages/WaitMessage.js

@@ -3,7 +3,7 @@ import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Spinner,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import testProps from '../../Functions/testProps.js';
 
 export default function WaitMessage(props) {

package/src/Components/Panel/AccordionGridPanel.js

@@ -2,7 +2,7 @@ import { useState, } from 'react';
 import {
 	ScrollView,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Accordion from 'react-native-collapsible/Accordion'; // https://www.npmjs.com/package/react-native-collapsible
 import testProps from '../../Functions/testProps';
 import Footer from '../Layout/Footer.js';

package/src/Components/Panel/FormPanel.js

@@ -1,6 +1,6 @@
 import {
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Panel from './Panel.js';
 import Form, { FormEditor } from '../Form/Form.js';
 import withData from '../Hoc/withData.js';

package/src/Components/Panel/Header.js

@@ -4,7 +4,7 @@ import {
 	Pressable,
 	TextNative,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -41,7 +41,7 @@ export default function Header(props) {
 		collapseBtn = null;
 	if (onClose) {
 		let closeClassName = `
-			closeBtn
+			Header-closeBtn
 			self-center
 			border
 			border-grey-400
@@ -54,7 +54,7 @@ export default function Header(props) {
 						onPress={onClose}
 						icon={Xmark}
 						_icon={{
-							size: styles.PANEL_HEADER_ICON_SIZE,
+							// size: styles.PANEL_HEADER_ICON_SIZE,
 							className: styles.PANEL_HEADER_ICON_COLOR,
 						}}
 						className={closeClassName}
@@ -62,7 +62,7 @@ export default function Header(props) {
 	}
 	if (isCollapsible) {
 		let collapseClassName = `
-			collapseBtn
+			Header-collapseBtn
 			self-center
 			border
 			border-grey-400
@@ -88,7 +88,8 @@ export default function Header(props) {
 	}
 
 	let panelClassName = `
-		header
+		Header
+		bg-grey-300
 		items-center
 		justify-start
 		py-1
@@ -127,8 +128,9 @@ export default function Header(props) {
 										numberOfLines={1}
 										ellipsizeMode="head"
 										className={`
-											TextNative
+											Header-TextNative1
 											flex-1
+											font-bold
 											${styles.PANEL_HEADER_TEXT_COLOR}
 											${styles.PANEL_HEADER_TEXT_FONTSIZE}
 										`}>{title}</TextNative>
@@ -164,8 +166,9 @@ export default function Header(props) {
 							numberOfLines={1}
 							ellipsizeMode="head"
 							className={`
-								TextNative
+								Header-TextNative2
 								flex-1
+								font-bold
 								${styles.PANEL_HEADER_TEXT_COLOR}
 								${styles.PANEL_HEADER_TEXT_FONTSIZE}
 							`}
@@ -204,6 +207,8 @@ export default function Header(props) {
 										ellipsizeMode="head"
 										style={{ transform: [{ rotate: '-90deg'}] }}
 										className={`
+											Header-TextNative3
+											font-bold
 											w-[200px]
 											text-right
 											${styles.PANEL_HEADER_TEXT_COLOR}
@@ -237,7 +242,13 @@ export default function Header(props) {
 						<TextNative
 							numberOfLines={1}
 							ellipsizeMode="head"
-							className={` ${styles.PANEL_HEADER_TEXT_COLOR} ${styles.PANEL_HEADER_TEXT_FONTSIZE} flex-1 `}>{title}</TextNative>
+							className={`
+								Header-TextNative4
+								font-bold
+								flex-1
+								${styles.PANEL_HEADER_TEXT_COLOR}
+								${styles.PANEL_HEADER_TEXT_FONTSIZE}
+							`}>{title}</TextNative>
 						{collapseBtn}
 					</HStack>
 				</Pressable>;

package/src/Components/Panel/Mask.js

@@ -1,6 +1,6 @@
 import {
 	Box,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,

package/src/Components/Panel/Panel.js

@@ -3,7 +3,7 @@ import {
 	ScrollView,
 	VStack,
 	VStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,

package/src/Components/Picker/Picker.js

@@ -4,7 +4,7 @@ import {
 	Icon,
 	Select, SelectItem,
 	Tooltip,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import CaretDown from '../Icons/CaretDown.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';

package/src/Components/Report/Report.js

@@ -4,7 +4,7 @@ import {
 	Icon,
 	Text,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor';
 import {
 	UI_MODE_WEB,

package/src/Components/Screens/Manager.js

@@ -2,7 +2,7 @@ import {
 	HStack,
 	Text,
 	VStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import React, { useState, useEffect, } from 'react';
 import withComponent from '../Hoc/withComponent.js';
 import testProps from '../../Functions/testProps.js';

package/src/Components/Tab/TabBar.js

@@ -1,9 +1,11 @@
 import { cloneElement, useState, useEffect, } from 'react';
 import {
 	HStack,
+	HStackNative,
 	ScrollView,
 	VStack,
-} from '../Gluestack';
+	VStackNative,
+} from '@project-components/Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -488,7 +490,7 @@ function TabBar(props) {
 
 	let tabBar = null;
 	if (direction === VERTICAL) {
-		tabBar = <VStack
+		tabBar = <VStackNative
 					{...testProps('TabBar')}
 					{...propsToPass}
 					className={`
@@ -500,22 +502,22 @@ function TabBar(props) {
 						py-2
 					`}
 				>
-						{renderedTabs}
-						<VStack className="flex-1 w-full justify-end">
-							{renderedToggleButton}
-						</VStack>
-					</VStack>;
+					{renderedTabs}
+					<VStack className="flex-1 w-full justify-end">
+						{renderedToggleButton}
+					</VStack>
+				</VStackNative>;
 		if (renderedCurrentTabContent) {
-			tabBar = <HStack {...propsToPass} className="flex-1 w-full">
+			tabBar = <HStackNative {...propsToPass} className="flex-1 w-full">
 						{tabBar}
 						<VStack className="items-center justify-start flex-1">
 							{renderedCurrentTabContent}
 						</VStack>
-					</HStack>;
+					</HStackNative>;
 		}
 	}
 	if (direction === HORIZONTAL) {
-		tabBar = <HStack
+		tabBar = <HStackNative
 					{...testProps('TabBar')}
 					className={`
 						${isCollapsed ? 'h-[38px]' : 'h-[' + tabHeight + 'px]'}
@@ -537,14 +539,14 @@ function TabBar(props) {
 							{renderedToggleButton}
 						</HStack>
 					</HStack>
-				</HStack>;
+				</HStackNative>;
 		if (renderedCurrentTabContent) {
-			tabBar = <VStack {...propsToPass} className="flex-1 w-full">
+			tabBar = <VStackNative {...propsToPass} className="flex-1 w-full">
 						{tabBar}
 						<VStack className="items-center justify-start flex-1">
 							{renderedCurrentTabContent}
 						</VStack>
-					</VStack>;
+					</VStackNative>;
 		}
 	}
 	return tabBar;

package/src/Components/Toolbar/FilterToolbar.js

@@ -1,6 +1,6 @@
 import {
 	HStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
 

package/src/Components/Toolbar/Pagination.js

@@ -3,7 +3,7 @@ import {
 	HStack,
 	HStackNative,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import testProps from '../../Functions/testProps.js';
 import Button from '../Buttons/Button.js';

package/src/Components/Toolbar/PaginationToolbar.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import {
 	HStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Pagination from './Pagination.js'
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';

package/src/Components/Toolbar/Toolbar.js

@@ -1,6 +1,6 @@
 import {
 	HStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Toolbar(props) {

package/src/Components/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { forwardRef, cloneElement } from 'react';
-import { Tooltip, TooltipContent, TooltipText } from "../Gluestack/tooltip";
+import { Tooltip, TooltipContent, TooltipText } from '@project-components/Gluestack';
 
 const TooltipElement = forwardRef((props, ref) => {
 	const {

package/src/Components/Tree/Tree.js

@@ -4,7 +4,7 @@ import {
 	Pressable,
 	ScrollView,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,

package/src/Components/Tree/TreeNode.js

@@ -5,7 +5,7 @@ import {
 	Icon,
 	Spinner,
 	TextNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import * as colourMixer from '@k-renwick/colour-mixer';
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';

package/src/Components/Viewer/Viewer.js

@@ -5,7 +5,7 @@ import {
 	Text,
 	VStack,
 	VStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	EDIT,
 } from '../../Constants/Commands.js';

package/src/Components/index.js

@@ -1,7 +1,7 @@
 import {
 	HStackNative,
 	VStackNative,
-} from './Gluestack';
+} from '@project-components/Gluestack';
 import AddressBook from './Icons/AddressBook.js';
 import Alt from './Icons/Alt.js';
 import AngleLeft from './Icons/AngleLeft.js';

package/src/Functions/buildAdditionalButtons.js

@@ -1,6 +1,6 @@
 import {
 	Icon,
-} from '../Components/Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Components/Buttons/Button.js';
 import testProps from './testProps.js';
 import _ from 'lodash';

package/src/PlatformImports/Web/Attachments.js

@@ -6,7 +6,7 @@ import {
 	Spinner,
 	Text,
 	VStack,
-} from '../../Components/Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../../Components/Buttons/Button';
 import {
 	CURRENT_MODE,

package/src/PlatformImports/Web/File.js

@@ -2,7 +2,7 @@ import { useEffect, } from 'react';
 import {
 	HStack,
 	Text,
-} from '../../Components/Gluestack';
+} from '@project-components/Gluestack';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,