@onehat/ui 0.4.4 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.4",
+	"version": "0.4.7",
 	"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,
@@ -325,13 +325,13 @@ function Container(props) {
 		componentProps = {};
 	}
 	
-	return <VStack className="w-full flex-1">
+	return <VStack className="Container-all w-full flex-1">
 				{northComponent}
 				{(!isNorthCollapsed && !localIsNorthCollapsed) && northSplitter}
-				<HStack className="w-full" style={{ flex: 100 }}>
+				<HStack className="Container-mid w-full" style={{ flex: 100 }}>
 					{westComponent}
 					{(!isWestCollapsed && !localIsWestCollapsed) && westSplitter}
-					<VStack className="h-full overflow-auto" style={{ flex: 100 }}>
+					<VStack className="Container-center h-full overflow-auto" style={{ flex: 100 }}>
 						{centerComponent}
 					</VStack>
 					{(!isEastCollapsed && !localIsEastCollapsed) && eastSplitter}

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';
@@ -249,6 +249,7 @@ function TagComponent(props) {
 
 	let className = `
 		Tag
+		w-full
 		p-0
 	`;
 	if (props.className) {

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';
@@ -376,7 +376,7 @@ function Form(props) {
 											dynamicProps = getDynamicProps({ fieldState, formSetValue, formGetValues, formState });
 										}
 
-										let elementClassName = 'flex-1';
+										let elementClassName = 'Form-Element flex-1';
 										if (type.match(/Tag/)) {
 											elementClassName += ' overflow-auto';
 										}
@@ -433,6 +433,7 @@ function Form(props) {
 										return <HStack
 													key={ix}
 													className={`
+														Form-HStack1
 														flex-${flex}
 														${error ? "bg-[#fdd]" : "bg-white"}
 														${columnClassName}
@@ -564,7 +565,7 @@ function Form(props) {
 					return buildFromItem(item, ix, {...defaults, ...itemDefaults});
 				});
 
-				let elementClassName = '';
+				let elementClassName = 'Form-Element';
 				const defaultsClassName = defaults.className;
 				if (defaultsClassName) {
 					elementClassName += ' ' + defaultsClassName;
@@ -644,18 +645,18 @@ function Form(props) {
 						style.width = '50px';
 					}
 					if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-						element = <HStack className="HStackA py-1">
+						element = <HStack className="Form-HStack2 w-full py-1">
 										<Label style={style}>{label}</Label>
 										{element}
 									</HStack>;
 					} else {
-						element = <VStack className="HStackA w-full py-1 mt-3">
+						element = <VStack className="Form-VStack1 w-full py-1 mt-3">
 										<Label style={style}>{label}</Label>
 										{element}
 									</VStack>;
 					}
 				}
-				return <HStack key={ix} className="HStackB px-2 pb-1">{element}</HStack>;
+				return <HStack key={ix} className="Form-HStack3 w-full px-2 pb-1">{element}</HStack>;
 			}
 
 		
@@ -720,7 +721,7 @@ function Form(props) {
 								dynamicProps = getDynamicProps({ fieldState, formSetValue, formGetValues, formState });
 							}
 
-							let elementClassName = 'field-' + name + ' flex-1 Form-Element';
+							let elementClassName = 'Form-Element field-' + name + ' flex-1';
 							const defaultsClassName = defaults.className;
 							if (defaultsClassName) {
 								elementClassName += ' ' + defaultsClassName;
@@ -770,7 +771,7 @@ function Form(props) {
 							if (message) {
 								message = <Text className="text-[#f00]">{message}</Text>;
 							}
-							element = <VStack className="Form-messageContainer pt-1 flex-1">
+							element = <VStack className="Form-VStack4 pt-1 flex-1">
 											{element}
 											{message}
 										</VStack>;
@@ -819,18 +820,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 +853,8 @@ function Form(props) {
 										className={`
 											HStack4
 											flex-none
-											px-2
-											pb-1
+											pb-2
+											h-[50px]
 											${error ? 'bg-[#fdd]' : ''}
 										`}
 									>
@@ -1075,7 +1076,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) {