@onehat/ui 0.4.3 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.3",
+	"version": "0.4.6",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -56,6 +56,7 @@
 		"@gluestack-ui/tooltip": "^0.1.35",
 		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
+		"@legendapp/motion": "^2.4.0",
 		"@onehat/data": "^1.21.19",
 		"nativewind": "4.0.36",
 		"normalize-css-color": "^1.0.2",

package/src/Components/Accordion/Accordion.js

@@ -5,7 +5,7 @@ import {
 	Pressable,
 	VStack,
 	VStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import inArray from '../../Functions/inArray.js';
 import emptyFn from '../../Functions/emptyFn.js';
 import _ from 'lodash';

package/src/Components/Blank.js

@@ -1,4 +1,4 @@
-import { Box } from './Gluestack';
+import { Box } from '@project-components/Gluestack';
 import _ from 'lodash';
 
 export default function Blank(props) {

package/src/Components/Buttons/BackButton.js

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import {
 	Icon,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from './Button';
 import AngleLeft from '../Icons/AngleLeft.js';
 

package/src/Components/Buttons/Button.js

@@ -6,7 +6,7 @@ import {
 	ButtonIcon,
 	ButtonGroup,
 	Tooltip,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import withComponent from '../Hoc/withComponent.js';
 import withTooltip from '../Hoc/withTooltip.js';
 import _ from 'lodash';
@@ -32,7 +32,7 @@ const ButtonComponent = forwardRef((props, ref) => {
 				icon = cloneElement(icon, {..._icon});
 			}
 		} else {
-			icon = <ButtonIcon as={icon} {..._icon} />;
+			icon = <ButtonIcon className="ButtonIcon" as={icon} {..._icon} />;
 		}
 	}
 	if (rightIcon) {
@@ -41,7 +41,7 @@ const ButtonComponent = forwardRef((props, ref) => {
 				rightIcon = cloneElement(rightIcon, {..._rightIcon});
 			}
 		} else {
-			rightIcon = <ButtonIcon as={rightIcon} {..._rightIcon} />;
+			rightIcon = <ButtonIcon className="ButtonIcon" as={rightIcon} {..._rightIcon} />;
 		}
 	}
 	
@@ -62,9 +62,9 @@ const ButtonComponent = forwardRef((props, ref) => {
 	}
 	
 	let button = <Button {...propsToPass} className={className} ref={ref}>
-					{isLoading && <ButtonSpinner {..._spinner} />}
+					{isLoading && <ButtonSpinner className="ButtonSpinner" {..._spinner} />}
 					{icon}
-					{text && <ButtonText {..._text}>{text}</ButtonText>}
+					{text && <ButtonText className="ButtonText" {..._text}>{text}</ButtonText>}
 					{rightIcon}
 				</Button>;
 	if (tooltip) {

package/src/Components/Buttons/CartButtonWithBadge.js

@@ -3,7 +3,7 @@ import {
 	Icon,
 	Pressable,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	Ionicons,
 } from '@expo/vector-icons';

package/src/Components/Buttons/PlusMinusButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {
 	HStack,
 	HStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import IconButton from './IconButton.js';
 import Plus from '../Icons/Plus.js';
 import Minus from '../Icons/Minus.js';

package/src/Components/Buttons/SquareButton.js

@@ -26,6 +26,7 @@ export default function SquareButton(props) {
 
 	return <IconButton
 				className={`
+					SquareButton
 					rounded-md
 					p-2
 					bg-[${bg}]

package/src/Components/Container/Container.js

@@ -2,7 +2,7 @@ import { cloneElement, useState, useEffect, } from 'react';
 import {
 	HStack,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,

package/src/Components/Container/ScreenContainer.js

@@ -8,7 +8,7 @@ import {
 	ScrollView,
 	VStack,
 	VStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import withComponent from '../Hoc/withComponent.js';
 // import { useHeaderHeight } from '@react-navigation/elements';
 // import testProps from '../OneHat/functions/testProps';

package/src/Components/Container/Splitter.js

@@ -1,7 +1,7 @@
 import {
 	HStack,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,

package/src/Components/Editor/InlineEditor.js

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, } from 'react';
 import {
 	Box,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import withComponent from '../Hoc/withComponent.js';
 import {
 	UI_MODE_WEB,

package/src/Components/Filter/DateRange.js

@@ -3,7 +3,7 @@ import {
 	HStack,
 	HStackNative,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Date from '../Form/Field/Date.js';
 import testProps from '../../Functions/testProps.js';
 import withTooltip from '../Hoc/withTooltip.js';

package/src/Components/Filter/NumberRange.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, } from 'react';
 import {
 	HStack,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Number from '../Form/Field/Number.js';
 import withTooltip from '../Hoc/withTooltip.js';
 import withValue from '../Hoc/withValue.js';

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
 	HStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import UiGlobals from '../../../../UiGlobals.js';
 import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
 import './ckeditor.css';

package/src/Components/Form/Field/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, } from 'react';
 import {
 	Checkbox, CheckboxGroup,
-} from '../../../Gluestack';
+} from '@project-components/Gluestack';
 import testProps from '../../../../Functions/testProps.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';

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

@@ -4,7 +4,7 @@ import {
 	Popover, PopoverContent, PopoverBody,
 	Pressable,
 	Tooltip,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import { SketchPicker } from 'react-color';
 import {
 	UI_MODE_WEB,

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

@@ -11,7 +11,7 @@ import {
 	TextNative,
 	Tooltip,
 	VStack,
-} from '../../../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	UI_MODE_NATIVE,
 	UI_MODE_WEB,
@@ -1011,6 +1011,7 @@ export function ComboComponent(props) {
 	const className = `
 		Combo-HStack
 		flex-1
+		h-[40px]
 		justify-center
 		items-center
 	`;

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

@@ -1,7 +1,7 @@
 import { useMemo, } from 'react';
 import {
 	HStack,
-} from '../../../Gluestack';
+} from '@project-components/Gluestack';
 import ArrayCombo from './ArrayCombo.js';
 
 export default function PageSizeCombo(props) {

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

@@ -7,7 +7,7 @@ import {
 	Popover, PopoverBackdrop, PopoverContent, PopoverBody,
 	Pressable,
 	TextNative,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	DATE,
 	TIME,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
 	Text,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';

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

@@ -5,7 +5,7 @@ import {
 	Icon,
 	Text,
 	TextNative,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,

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

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

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

@@ -1,8 +1,7 @@
 import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	Input, InputField, InputIcon, InputSlot,
-	Pressable,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	hasWidth,
 	hasFlex,
@@ -18,10 +17,10 @@ const InputElement = forwardRef((props, ref) => {
 			testID,
 			value,
 			setValue,
+			maxLength,
 			autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
 			autoSubmitDelay = UiGlobals.autoSubmitDelay,
 			disableAutoFlex = false,
-			maxLength,
 			onKeyPress,
 			onChangeText,
 			leftElement,
@@ -31,6 +30,7 @@ const InputElement = forwardRef((props, ref) => {
 			rightIcon,
 			rightIconHandler,
 			placeholder,
+			...propsToPass
 		} = props,
 		styles = UiGlobals.styles,
 		debouncedSetValueRef = useRef(),
@@ -109,11 +109,12 @@ const InputElement = forwardRef((props, ref) => {
 	if (!disableAutoFlex && !hasWidth(props) && !hasFlex(props)) {
 		style.flex = 1;
 	}
+	// flex-1
+	// block
+	// h-auto
+	// h-[10px]
 	let inputClassName = `
 			Input
-			flex-1
-			block
-			h-auto
 			${styles.FORM_INPUT_BG}
 			${styles.FORM_INPUT_BG_FOCUS}
 			${styles.FORM_INPUT_BG_HOVER}
@@ -121,6 +122,7 @@ const InputElement = forwardRef((props, ref) => {
 		inputFieldClassName = `
 			InputField
 			min-h-[40px]
+			h-auto
 			w-full
 			p-2
 			text-left
@@ -139,16 +141,16 @@ const InputElement = forwardRef((props, ref) => {
 				style={style}
 			>
 				{leftElement &&
-					<InputSlot>{leftElement}</InputSlot>}
+					<InputSlot className="leftElementInputSlot">{leftElement}</InputSlot>}
 				
 				{leftIcon && leftIconHandler && 
-					<Pressable onPress={leftIconHandler}>
-						<InputIcon className="ml-2">
+					<InputSlot onPress={leftIconHandler} className="InputSlot">
+						<InputIcon className="leftInputIconWithHandler ml-2">
 							{leftIcon}
 						</InputIcon>
-					</Pressable>}
+					</InputSlot>}
 				{leftIcon && !leftIconHandler && 
-					<InputIcon className="ml-2">
+					<InputIcon className="leftInputIcon ml-2">
 						{leftIcon}
 					</InputIcon>}
 
@@ -161,19 +163,20 @@ const InputElement = forwardRef((props, ref) => {
 					dataFocusVisible={true}
 					variant="outline"
 					placeholder={placeholder}
+					{...propsToPass}
 				/>
 
 				{rightElement &&
-					<InputSlot>{rightElement}</InputSlot>}
+					<InputSlot className="rightElementInputSlot">{rightElement}</InputSlot>}
 
 				{rightIcon && rightIconHandler && 
-					<Pressable onPress={rightIconHandler}>
-						<InputIcon className="mr-2">
+					<InputSlot onPress={rightIconHandler} className="InputSlot">
+						<InputIcon className="rightInputIconWithHandler mr-2">
 							{rightIcon}
 						</InputIcon>
-					</Pressable>}
+					</InputSlot>}
 				{rightIcon && !rightIconHandler && 
-					<InputIcon className="mr-2">
+					<InputIcon className="rightInputIcon mr-2">
 						{rightIcon}
 					</InputIcon>}
 			</Input>;

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

@@ -1,7 +1,7 @@
 import {
 	HStack,
 	Tooltip,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	UI_MODE_NATIVE,
 	UI_MODE_WEB,

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

@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
 	HStack,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import Decimal from 'decimal.js';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, } from 'react';
 import {
 	Radio, RadioGroup,
-} from '../../../Gluestack';
+} from '@project-components/Gluestack';
 import testProps from '../../../../Functions/testProps.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';

package/src/Components/Form/Field/Select/PageSizeSelect.js

@@ -1,7 +1,7 @@
 import { useMemo, } from 'react';
 import {
 	HStack,
-} from '../../../Gluestack';
+} from '@project-components/Gluestack';
 import Select from './Select.js';
 
 export default function PageSizeSelect(props) {

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

@@ -1,7 +1,7 @@
 import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectIcon,  SelectItem,  SelectPortal, SelectTrigger,
-} from '../../../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	hasWidth,
 	hasFlex,

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, } from 'react';
 import {
 	HStack,
 	Text,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	hasWidth,
 	hasFlex,

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

@@ -2,7 +2,7 @@ import { useRef, } from 'react';
 import {
 	HStack,
 	VStack,
-} from '../../../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../../Constants/Editor.js';

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

@@ -1,7 +1,7 @@
 import {
 	HStack,
 	Text,
-} from '../../../Gluestack';
+} from '@project-components/Gluestack';
 import testProps from '../../../../Functions/testProps.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import Eye from '../../../Icons/Eye.js';

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import {
 	TextNative,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
 	Textarea, TextareaInput,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import UiGlobals from '../../../UiGlobals.js';
 import withComponent from '../../Hoc/withComponent.js';
 import withTooltip from '../../Hoc/withTooltip.js';

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

@@ -5,7 +5,7 @@ import {
 	Pressable,
 	Switch,
 	Text,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import UiGlobals from '../../../UiGlobals.js';
 import IconButton from '../../Buttons/IconButton.js';
 import Na from '../../Icons/Na.js';

package/src/Components/Form/FieldSet.js

@@ -4,7 +4,7 @@ import {
 	HStack,
 	Text,
 	TextNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import FieldSetContext from '../../Contexts/FieldSetContext.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import testProps from '../../Functions/testProps.js';

package/src/Components/Form/Form.js

@@ -7,7 +7,7 @@ import {
 	Text,
 	VStack,
 	VStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	VIEW,
 } from '../../Constants/Commands.js';
@@ -819,18 +819,18 @@ function Form(props) {
 									style.width = '50px';
 								}
 								if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-									element = <HStack className="HStack3 flex-1 py-1">
+									element = <HStack className="HStack3 flex-1">
 								 					<Label style={style}>{requiredIndicator}{label}</Label>
 													{element}
 								 				</HStack>;
 								} else {
-									element = <VStack className="VStack3 flex-1 py-1 mt-3">
+									element = <VStack className="VStack3 flex-1 mt-3">
 													<Label style={style}>{requiredIndicator}{label}</Label>
 													{element}
 												</VStack>;
 								}
 							} else if (disableLabels && requiredIndicator) {
-								element = <HStack className="HStack3 flex-1 py-1">
+								element = <HStack className="HStack3 flex-1">
 												{requiredIndicator}
 												{element}
 											</HStack>;
@@ -852,8 +852,8 @@ function Form(props) {
 										className={`
 											HStack4
 											flex-none
-											px-2
-											pb-1
+											pb-2
+											h-[50px]
 											${error ? 'bg-[#fdd]' : ''}
 										`}
 									>
@@ -1075,7 +1075,7 @@ function Form(props) {
 			editor = <>
 						{containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD ? <HStack className="Form-formComponents-HStack p-4 gap-4 justify-center">{formComponents}</HStack> : null}
 						{containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD ? <VStack className="Form-formComponents-VStack p-4">{formComponents}</VStack> : null}
-						<VStack className="Form-AncillaryComponents m-2 pt-4 px-2">{formAncillaryComponents}</VStack>
+						{formAncillaryComponents.length ? <VStack className="Form-AncillaryComponents m-2 pt-4 px-2">{formAncillaryComponents}</VStack> : null}
 					</>;
 
 			additionalButtons = buildAdditionalButtons(additionalEditButtons);

package/src/Components/Form/Label.js

@@ -1,7 +1,7 @@
 import {
 	HStack,
 	TextNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import styles from '../../Constants/Styles.js';
 
 export default function Label(props) {

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>;