@onehat/ui 0.4.72 → 0.4.74

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.72",
+	"version": "0.4.74",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -66,8 +66,8 @@
 		"decimal.js": "^10.5.0",
 		"inflector-js": "^1.0.1",
 		"js-cookie": "^3.0.5",
-		"native-base": "^3.4.28",
 		"react-hook-form": "^7.55.0",
+		"react-native-progress": "^5.0.1",
 		"react-redux": "^9.2.0",
 		"tailwindcss": "^3.4.17",
 		"yup": "^1.6.1"

package/src/Components/Buttons/Button.js

@@ -16,7 +16,9 @@ const ButtonComponent = forwardRef((props, ref) => {
 	let {
 			self,
 			text, // the text to display on the button
+			content, // the content to display on the button
 			isLoading = false, // show a spinner?
+			isExpandToFillVertical = false,
 			icon = null, // an actual icon element
 			rightIcon = null, // an actual icon element
 			_spinner = {}, // props for ButtonSpinner
@@ -59,6 +61,10 @@ const ButtonComponent = forwardRef((props, ref) => {
 		'flex-row',
 		'items-center',
 	);
+	if (isExpandToFillVertical) {
+		// IMPORTANT! Otherwise the button will cut off the vertical content due to size classes automatically added by Gluestack (e.g. h-10)
+		className += ' h-auto';
+	}
 	if (propsToPass.className) {
 		className += ' ' + propsToPass.className;
 	}
@@ -71,6 +77,7 @@ const ButtonComponent = forwardRef((props, ref) => {
 				{isLoading && <ButtonSpinner className="ButtonSpinner" {..._spinner} />}
 				{icon}
 				{text && <ButtonText className="ButtonText" {..._text}>{text}</ButtonText>}
+				{content}
 				{rightIcon}
 			</Button>;
 });

package/src/Components/Editor/InlineEditor.js

@@ -6,6 +6,7 @@ import {
 import clsx from 'clsx';
 import withComponent from '../Hoc/withComponent.js';
 import {
+	CURRENT_MODE,
 	UI_MODE_WEB,
 	UI_MODE_NATIVE,
 } from '../../Constants/UiModes.js';
@@ -19,7 +20,7 @@ import _ from 'lodash';
 
 function InlineEditor(props) {
 
-	if (UiGlobals.mode === UI_MODE_NATIVE) {
+	if (CURRENT_MODE === UI_MODE_NATIVE) {
 		throw new Error('Not yet implemented for RN.');
 	}
 	

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

@@ -8,6 +8,7 @@ import {
 import clsx from 'clsx';
 import { SketchPicker } from 'react-color';
 import {
+	CURRENT_MODE,
 	UI_MODE_WEB,
 } from '../../../Constants/UiModes.js';
 import UiGlobals from '../../../UiGlobals.js';
@@ -39,7 +40,7 @@ export function ColorElement(props) {
 				return;
 			}
 
-			if (UiGlobals.mode === UI_MODE_WEB && triggerRef.current?.getBoundingClientRect) {
+			if (CURRENT_MODE === UI_MODE_WEB && triggerRef.current?.getBoundingClientRect) {
 				// For web, ensure it's in the proper place
 				const 
 					triggerRect = triggerRef.current.getBoundingClientRect(),

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

@@ -13,6 +13,7 @@ import {
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
 import {
+	CURRENT_MODE,
 	UI_MODE_NATIVE,
 	UI_MODE_WEB,
 } from '../../../../Constants/UiModes.js';
@@ -44,7 +45,6 @@ const FILTER_NAME = 'q';
  * @returns boolean
  */
 function isEmptyValue(value) {
-	// 
 	return value === null ||
 			value === undefined ||
 			value === '' ||
@@ -52,6 +52,23 @@ function isEmptyValue(value) {
 			(_.isObject(value) && _.isEmpty(value));
 };
 
+function getRowProps() {
+	return {
+		className: clsx(
+			'w-full',
+			'pl-4',
+			'pr-2',
+			'py-1',
+			'border-b-1',
+			'border-grey-300',
+			CURRENT_MODE === UI_MODE_NATIVE ? {
+				'min-h-[50px]': true,
+				'h-[50px]': true,
+			} : {},
+		),
+	};
+}
+
 export const ComboComponent = forwardRef((props, ref) => {
 
 	const {
@@ -133,7 +150,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 			if (isMenuShown) {
 				return;
 			}
-			if (UiGlobals.mode === UI_MODE_WEB && inputRef.current?.getBoundingClientRect) {
+			if (CURRENT_MODE === UI_MODE_WEB && inputRef.current?.getBoundingClientRect) {
 				// For web, ensure it's in the proper place
 				const
 					rect = inputRef.current.getBoundingClientRect(),
@@ -609,7 +626,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 				className={triggerClassName}
 			/>;
 
-	if (UiGlobals.mode === UI_MODE_WEB) {
+	if (CURRENT_MODE === UI_MODE_WEB) {
 		input = disableDirectEntry ?
 					<Pressable
 						{...testProps('toggleMenuBtn')}
@@ -680,8 +697,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 						{..._input}
 					/>;
 	}
-	if (UiGlobals.mode === UI_MODE_NATIVE) {
-		throw new Error('Migration to Gluestack not yet implemented on Native');
+	if (CURRENT_MODE === UI_MODE_NATIVE) {
 		// This input and trigger are for show
 		// They just show the current getDisplayValue and open the menu
 		const displayValue = getDisplayValue();
@@ -694,6 +710,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 						'flex-row',
 						'justify-center',
 						'items-center',
+						'bg-white',
 						'border',
 						'border-grey-400',
 						'rounded-r-none',
@@ -705,10 +722,10 @@ export const ComboComponent = forwardRef((props, ref) => {
 						numberOfLines={1}
 						ellipsizeMode="head"
 						className={clsx(
-							'h-full',
-							'flex-1',
+							// 'h-full',
+							// 'flex-1',
 							'm-0',
-							'p-1',
+							'p-2',
 							_.isEmpty(displayValue) ? 'text-grey-400' : 'text-black',
 							styles.FORM_COMBO_INPUT_CLASSNAME,
 						)}
@@ -745,24 +762,20 @@ export const ComboComponent = forwardRef((props, ref) => {
 		}
 		const WhichGrid = isEditor ? WindowedGridEditor : Grid;
 		const gridStyle = {};
-		if (UiGlobals.mode === UI_MODE_WEB) {
+		if (CURRENT_MODE === UI_MODE_WEB) {
 			gridStyle.height = menuHeight || styles.FORM_COMBO_MENU_HEIGHT;
 		}
+		let gridClassName = clsx(
+			'h-full',
+			'w-full',
+		);
+		if (CURRENT_MODE === UI_MODE_NATIVE) {
+			gridClassName += ' h-[400px] max-h-[100%]';
+		}
 		grid = <WhichGrid
 					showHeaders={false}
 					showHovers={true}
-					getRowProps={() => {
-						return {
-							className: clsx(
-								'w-full',
-								'pl-4',
-								'pr-2',
-								'py-1',
-								'border-b-1',
-								'border-grey-300',
-							),
-						};
-					}}
+					getRowProps={getRowProps}
 					autoAdjustPageSizeToHeight={false}
 					newEntityDisplayValue={newEntityDisplayValue}
 					newEntityDisplayProperty={newEntityDisplayProperty}
@@ -872,14 +885,12 @@ export const ComboComponent = forwardRef((props, ref) => {
 					}}
 					reference="grid"
 					parent={self}
-					className={clsx(
-						'h-full',
-					)}
+					className={gridClassName}
 					style={gridStyle}
 					{...gridProps}
 					{..._editor}
 				/>;
-		if (UiGlobals.mode === UI_MODE_WEB) {
+		if (CURRENT_MODE === UI_MODE_WEB) {
 			if (!disableDirectEntry) {
 				inputClone = <Box
 								className="Combo-inputClone-Box"
@@ -959,7 +970,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 								</Box>
 							</Popover>;
 		}
-		if (UiGlobals.mode === UI_MODE_NATIVE) {
+		if (CURRENT_MODE === UI_MODE_NATIVE) {
 			if (isEditor) {
 				// in RN, an editor has no way to accept the selection of the grid, so we need to add a check button to do this
 				checkButton = <IconButton
@@ -981,7 +992,12 @@ export const ComboComponent = forwardRef((props, ref) => {
 							/>;
 			}
 			const inputAndTriggerClone = // for RN, this is the actual input and trigger, as we need them to appear up above in the modal
-				<HStack className="h-[10px]">
+				<HStack
+					className={clsx(
+						'h-[40px]',
+						'bg-white',
+					)}
+				>
 					{xButton}
 					{eyeButton}
 					{disableDirectEntry ?
@@ -993,7 +1009,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 								'h-full',
 								'flex-1',
 								'm-0',
-								'p-1',
+								'p-2',
 								'border',
 								'border-grey-400',
 								'rounded-r-none',
@@ -1054,19 +1070,21 @@ export const ComboComponent = forwardRef((props, ref) => {
 								safeAreaTop={true}
 								onClose={() => setIsMenuShown(false)}
 								className={clsx(
-									'h-[400px]',
+									'h-full',
 									'w-full',
-									'my-auto',
-									'p-[5px]'
 								)}
 							>
 								<ModalBackdrop />
-								<ModalContent>
-									<ModalBody>
-										{inputAndTriggerClone}
-										{grid}
-									</ModalBody>
-								</ModalContent>
+								<VStackNative
+									className={clsx(
+										'h-[400px]',
+										'w-[80%]',
+										'max-w-[400px]',
+									)}
+								>
+									{inputAndTriggerClone}
+									{grid}
+								</VStackNative>
 							</Modal>;
 		}
 	}

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

@@ -15,6 +15,7 @@ import {
 	DATETIME,
 } from '../../../Constants/Date.js';
 import {
+	CURRENT_MODE,
 	UI_MODE_NATIVE,
 	UI_MODE_WEB,
 } from '../../../Constants/UiModes.js';
@@ -103,7 +104,7 @@ export const DateElement = forwardRef((props, ref) => {
 			return value;
 		},
 		showPicker = () => {
-			if (UiGlobals.mode === UI_MODE_WEB && triggerRef.current?.getBoundingClientRect) {
+			if (CURRENT_MODE === UI_MODE_WEB && triggerRef.current?.getBoundingClientRect) {
 				// For web, ensure it's in the proper place
 				const 
 					// triggerRect = triggerRef.current.getBoundingClientRect(),
@@ -124,7 +125,7 @@ export const DateElement = forwardRef((props, ref) => {
 			if (disableDirectEntry) {
 				return;
 			}
-			if (UiGlobals.mode !== UI_MODE_WEB) {
+			if (CURRENT_MODE !== UI_MODE_WEB) {
 				return;
 			}
 			switch(e.key) {
@@ -136,7 +137,7 @@ export const DateElement = forwardRef((props, ref) => {
 			}
 		},
 		onInputBlur = (e) => {
-			// if (UiGlobals.mode !== UI_MODE_WEB) {
+			// if (CURRENT_MODE !== UI_MODE_WEB) {
 			// 	return;
 			// }
 			// const {
@@ -191,7 +192,7 @@ export const DateElement = forwardRef((props, ref) => {
 			inputRef.current?.focus();
 		},
 		onTriggerBlur = (e) => {
-			if (!isPickerShown || UiGlobals.mode !== UI_MODE_WEB) {
+			if (!isPickerShown || CURRENT_MODE !== UI_MODE_WEB) {
 				return;
 			}
 			const {
@@ -327,7 +328,7 @@ export const DateElement = forwardRef((props, ref) => {
 				)}
 			/>;
 
-	if (UiGlobals.mode === UI_MODE_WEB) {
+	if (CURRENT_MODE === UI_MODE_WEB) {
 		input = disableDirectEntry ?
 			<Pressable
 				{...testProps('togglePickerBtn')}
@@ -394,7 +395,7 @@ export const DateElement = forwardRef((props, ref) => {
 				{..._input}
 			/>;
 	}
-	if (UiGlobals.mode === UI_MODE_NATIVE) {
+	if (CURRENT_MODE === UI_MODE_NATIVE) {
 		throw new Error('Migration to Gluestack not yet implemented for Native mode');
 		// This input and trigger are for show
 		// The just show the current value and open the menu
@@ -426,7 +427,7 @@ export const DateElement = forwardRef((props, ref) => {
 	}
 
 	if (isPickerShown) {
-		if (UiGlobals.mode === UI_MODE_WEB) {
+		if (CURRENT_MODE === UI_MODE_WEB) {
 			dropdownMenu = <Popover
 								isOpen={isPickerShown}
 								onClose={() => {
@@ -478,7 +479,7 @@ export const DateElement = forwardRef((props, ref) => {
 								</PopoverContent>
 							</Popover>;
 		}
-		if (UiGlobals.mode === UI_MODE_NATIVE) {
+		if (CURRENT_MODE === UI_MODE_NATIVE) {
 			const inputAndTriggerClone = // for RN, this is the actual input and trigger, as we need them to appear up above in the modal
 				<HStack className="h-[10px]">
 					<IconButton

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

@@ -4,6 +4,7 @@ import {
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
 import {
+	CURRENT_MODE,
 	UI_MODE_NATIVE,
 	UI_MODE_WEB,
 } from '../../../Constants/UiModes.js';
@@ -36,7 +37,7 @@ export function JsonElement(props) {
 
 	let assembledComponents = null;
 	
-	if (UiGlobals.mode === UI_MODE_NATIVE) {
+	if (CURRENT_MODE === UI_MODE_NATIVE) {
 		throw new Error('JsonElement not yet implemented for React Native');
 	}
 
@@ -49,7 +50,7 @@ export function JsonElement(props) {
 	if (props.className) {
 		className += ' ' + propsToPass.className;
 	}
-	// if (UiGlobals.mode === UI_MODE_WEB) {
+	// if (CURRENT_MODE === UI_MODE_WEB) {
 		const src = value ? JSON.parse(value) : {};
 		assembledComponents = 
 			<HStack style={propsToPass.style} className={className}>

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

@@ -89,7 +89,7 @@ const TextAreaElement = forwardRef((props, ref) => {
 			styles.FORM_TEXTAREA_CLASSNAME,
 		);
 	if (className) {
-		inputClassName += ' ' + className;
+		textareaClassName += ' ' + className;
 	}
 	if (minimizeForRow) {
 		textareaClassName += ' h-auto min-h-0 max-h-[40px] overflow-auto';

package/src/Components/Form/FieldSet.js

@@ -89,7 +89,7 @@ export default function FieldSet(props) {
 		styles.FORM_FIELDSET_BG,
 	);
 	if (props.className) {
-		className += props.className;
+		className += ' ' + props.className;
 	}
 
 	

package/src/Components/Form/Form.js

@@ -1436,7 +1436,10 @@ function Form(props) {
 				if (isSaving) {
 					footerClassName += ' border-t-2 border-t-[#f00]'
 				}
-				footer = <Footer className={footerClassName} {...footerProps}>
+				if (footerProps.className) {
+					footerClassName += ' ' + footerProps.className;
+				}
+				footer = <Footer {...footerProps} className={footerClassName}>
 							{footerButtons}
 						</Footer>;
 			}

package/src/Components/Gluestack/accordion/index.tsx

@@ -50,7 +50,11 @@ const accordionTitleTextStyle = tva({
   },
 });
 const accordionIconStyle = tva({
-  base: 'text-typography-900 fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'text-typography-900 fill-none',
+  base: 'text-typography-900 fill-black',
+// END SKOTE MOD
   parentVariants: {
     size: {
       '2xs': 'h-3 w-3',

package/src/Components/Gluestack/actionsheet/index.tsx

@@ -263,7 +263,11 @@ const actionsheetSectionHeaderTextStyle = tva({
 });
 
 const actionsheetIconStyle = tva({
-  base: 'text-background-500 fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'text-background-500 fill-none',
+  base: 'text-background-500 fill-black',
+// END SKOTE MOD
   variants: {
     size: {
       '2xs': 'h-3 w-3',

package/src/Components/Gluestack/alert/index.tsx

@@ -83,7 +83,11 @@ const alertTextStyle = tva({
 });
 
 const alertIconStyle = tva({
-  base: 'fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'fill-none',
+  base: 'fill-black',
+// END SKOTE MOD
   variants: {
     size: {
       '2xs': 'h-3 w-3',

package/src/Components/Gluestack/badge/index.tsx

@@ -76,7 +76,11 @@ const badgeTextStyle = tva({
 });
 
 const badgeIconStyle = tva({
-  base: 'fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'fill-none',
+  base: 'fill-black',
+// END SKOTE MOD
   parentVariants: {
     action: {
       error: 'text-error-600',

package/src/Components/Gluestack/button/index.tsx

@@ -282,7 +282,11 @@ const buttonTextStyle = tva({
 });
 
 const buttonIconStyle = tva({
-  base: 'fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'fill-none',
+  base: 'fill-black',
+// END SKOTE MOD
   parentVariants: {
     variant: {
       link: 'data-[hover=true]:underline data-[active=true]:underline',

package/src/Components/Gluestack/checkbox/index.tsx

@@ -160,7 +160,11 @@ const checkboxLabelStyle = tva({
 });
 
 const checkboxIconStyle = tva({
-  base: 'text-typography-50 fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'text-typography-50 fill-none',
+  base: 'text-typography-50 fill-black',
+// END SKOTE MOD
 
   parentVariants: {
     size: {

package/src/Components/Gluestack/fab/index.tsx

@@ -165,7 +165,11 @@ const fabLabelStyle = tva({
 });
 
 const fabIconStyle = tva({
-  base: 'text-typography-50 fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'text-typography-50 fill-none',
+ base: 'text-typography-50 fill-black',
+// END SKOTE MOD
   variants: {
     size: {
       '2xs': 'h-3 w-3',

package/src/Components/Gluestack/form-control/index.tsx

@@ -80,7 +80,11 @@ const formControlStyle = tva({
 });
 
 const formControlErrorIconStyle = tva({
-  base: 'text-error-700 fill-none',
+// BEGIN SKOTE MOD
+// See https://github.com/gluestack/gluestack-ui/issues/2385#issuecomment-3141973446
+//   base: 'text-error-700 fill-none',
+  base: 'text-error-700 fill-none fill-black',
+// END SKOTE MOD
   variants: {
     size: {
       '2xs': 'h-3 w-3',

package/src/Components/Gluestack/icon/createIcon.js

@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react';
+import { Path, G } from 'react-native-svg';
+const ChildPath = ({ element, fill, stroke: pathStroke }) => {
+    const pathStrokeColor = pathStroke || '';
+    const fillColor = fill || '';
+    if (!element) {
+        return null;
+    }
+    if (element.type === React.Fragment) {
+        return element;
+    }
+    return React.cloneElement(element, {
+        fill: fillColor ? fillColor : 'currentColor',
+        stroke: pathStrokeColor,
+    });
+};
+export function createIcon({ Root, path, d, ...initialProps }) {
+    const IconTemp = forwardRef((props, ref) => {
+        let children = path;
+        if (d && (!path || Object.keys(path).length === 0)) {
+            children = <Path fill="currentColor" d={d}/>;
+        }
+        const finalProps = {
+            ...initialProps,
+            ...props,
+        };
+        const {
+			stroke = 'currentColor',
+			// BEGIN SKOTE MOD
+			fill,
+			// END SKOTE MOD
+			color,
+			role = 'img',
+			...resolvedProps
+		} = finalProps;
+        let type = resolvedProps.type;
+        if (type === undefined) {
+            type = 'svg';
+        }
+        let colorProps = {};
+        if (color) {
+            colorProps = { ...colorProps, color: color };
+        }
+        if (stroke) {
+            colorProps = { ...colorProps, stroke: stroke };
+        }
+        let sizeProps = {};
+        let sizeStyle = {};
+        if (type === 'font') {
+            if (resolvedProps.sx) {
+                sizeProps = { ...sizeProps, fontSize: resolvedProps?.sx?.h };
+            }
+            if (resolvedProps.size) {
+                // sizeProps = { ...sizeProps, fontSize: resolvedProps?.size };
+            }
+        }
+        return (<Root {...resolvedProps} {...colorProps} role={role} ref={ref} {...sizeProps} {...sizeStyle}>
+        {React.Children.count(children) > 0 ? (<G>
+            {React.Children.map(children, (child, i) => (
+				<ChildPath
+					key={child?.key ?? i}
+					element={child}
+					{...child?.props}
+					// BEGIN SKOTE MOD
+					fill={fill || child?.props?.fill}
+					// END SKOTE MOD
+				/>
+			))}
+          </G>) : null}
+      </Root>);
+    });
+    const Icon = IconTemp;
+    return Icon;
+}