@onehat/ui 0.4.57 → 0.4.59

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.57",
+	"version": "0.4.59",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Hoc/withEditor.js

@@ -502,7 +502,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsSaving(true);
 				let success = true;
 				const tempListener = (msg, data) => {
-					success = { msg, data };
+					success = false;
 				};
 
 				Repository.on('error', tempListener); // add a temporary listener for the error event

package/src/Components/Layout/AsyncOperation.js

@@ -1,28 +1,46 @@
-import { useState, } from 'react';
+import { useState, useRef, useEffect, } from 'react';
 import {
+	Box,
+	ScrollView,
 	Text,
 	VStack,
 } from '@project-components/Gluestack';
+import { useSelector, useDispatch, } from 'react-redux';
+import { PROGRESS_COMPLETED } from '../../Constants/Progress.js';
+import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import isJson from '../../Functions/isJson.js';
 import Form from '../Form/Form.js';
 import Button from '../Buttons/Button.js';
-import CenterBox from '../Layout/CenterBox.js';
 import withComponent from '../Hoc/withComponent.js';
 import withAlert from '../Hoc/withAlert.js';
 import ChevronLeft from '../Icons/ChevronLeft.js';
 import ChevronRight from '../Icons/ChevronRight.js';
 import Play from '../Icons/Play.js';
+import EllipsisHorizontal from '../Icons/EllipsisHorizontal.js';
 import Stop from '../Icons/Stop.js';
 import TabBar from '../Tab/TabBar.js';
 import Panel from '../Panel/Panel.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import _ from 'lodash';
 
+// NOTE: This component assumes you have an AppSlice, that has 
+// an 'operationsInProgress' state var and a 'setOperationsInProgress' action.
 
 function AsyncOperation(props) {
+
+	if (!props.Repository || !props.action) {
+		throw Error('AsyncOperation: Repository and action are required!');
+	}
+
 	const {
 			action,
 			Repository,
 			formItems = [],
+			formStartingValues = {},
+			getProgressUpdates = false,
+			parseProgress, // optional fn, accepts 'response' as arg and returns progress string
+			progressStuckThreshold = null, // e.g. 3, if left blank, doesn't check for stuck state
+			updateInterval = 10000, // ms
 
 			// withComponent
 			self,
@@ -30,38 +48,40 @@ function AsyncOperation(props) {
 			// withAlert
 			alert,
 		} = props,
+		dispatch = useDispatch(),
 		initiate = async () => {
 
-			if (!Repository || !action) {
-				alert('AsyncOperation: Repository and action are required!');
-				return;
-			}
-
+			clearProgress();
 			setFooter(getFooter('processing'));
+			setIsInProgress(true);
 			
 			const
-				method = Repository.methods.post,
+				method = Repository.methods.edit,
 				uri = Repository.getModel() + '/' + action,
-				formValues = self.children.form.formGetValues(),
+				formValues = self?.children?.form?.formGetValues() || {},
 				result = await Repository._send(method, uri, formValues);
-				
+
+			setFormValues(formValues);
+			
 			const response = Repository._processServerResponse(result);
 			if (!response.success) {
-				alert(result.message);
-				reset();
+				resetToInitialState();
 				return;
 			}
 			
-			let results = <CenterBox><Text>Success</Text></CenterBox>;
+			let results = <Text>Success</Text>;
 			if (response.message) {
-				const decodedMessage = JSON.parse(response.message);
-				results = _.isArray(decodedMessage) ? 
+				let message = response.message;
+				if (isJson(message)) {
+					message = JSON.parse(message);
+				}
+				results = _.isArray(message) ? 
 								<VStack>
-									{decodedMessage?.map((line, ix)=> {
+									{message?.map((line, ix)=> {
 										return <Text key={ix}>{line}</Text>;
 									})}
-								</VStack> : 
-								<Text>{decodedMessage}</Text>;
+								</VStack> :
+								<Text>{message}</Text>;
 			}
 			showResults(results);
 		},
@@ -70,7 +90,7 @@ function AsyncOperation(props) {
 				case 'initiate':
 					return <Toolbar>
 								<Button
-									text="Initiate"
+									text="Start"
 									rightIcon={ChevronRight}
 									onPress={() => initiate()}
 								/>
@@ -88,29 +108,144 @@ function AsyncOperation(props) {
 								<Button
 									text="Reset"
 									icon={ChevronLeft}
-									onPress={() => reset()}
+									onPress={() => resetToInitialState()}
 								/>
 							</Toolbar>;
 			}
 		},
+		operationsInProgress = useSelector((state) => state.app.operationsInProgress),
+		isInProgress = operationsInProgress.includes(action),
+		forceUpdate = useForceUpdate(),
 		[footer, setFooter] = useState(getFooter()),
-		[results, setResults] = useState(''),
-		[currentTabIx, setCurrentTab] = useState(0),
+		[results, setResults] = useState(isInProgress ? 'Checking progress...' : null),
+		[progress, setProgress] = useState(null),
+		[isStuck, setIsStuck] = useState(false),
+		[currentTabIx, setCurrentTab] = useState(isInProgress ? 1 : 0),
+		previousProgressRef = useRef(null),
+		unchangedProgressCountRef = useRef(0),
+		intervalRef = useRef(null),
+		formValuesRef = useRef(null),
+		getPreviousProgress = () => {
+			return previousProgressRef.current;
+		},
+		setPreviousProgress = (progress) => {
+			previousProgressRef.current = progress;
+		},
+		getUnchangedProgressCount = () => {
+			return unchangedProgressCountRef.current;
+		},
+		setUnchangedProgressCount = (count) => {
+			unchangedProgressCountRef.current = count;
+			forceUpdate();
+		},
+		getInterval = () => {
+			return intervalRef.current;
+		},
+		setIntervalRef = (interval) => { // 'setInterval' is a reserved name
+			intervalRef.current = interval;
+		},
+		getFormValues = () => {
+			return formValuesRef.current;
+		},
+		setFormValues = (values) => {
+			formValuesRef.current = values;
+		},
 		showResults = (results) => {
 			setCurrentTab(1);
 			setFooter(getFooter('results'));
 			setResults(results);
+			getProgress();
 		},
-		reset = () => {
+		getProgress = (immediately = false) => {
+			if (getProgressUpdates) {
+
+				async function fetchProgress() {
+					const
+						method = Repository.methods.edit,
+						progressAction = 'get' + action.charAt(0).toUpperCase() + action.slice(1) + 'Progress',
+						uri = Repository.getModel() + '/' + progressAction,
+						result = await Repository._send(method, uri, getFormValues());
+						
+					const response = Repository._processServerResponse(result);
+					if (!response.success) {
+						alert(result.message);
+						clearProgress();
+						return;
+					}
+
+					const progress = parseProgress ? parseProgress(response) : response.message
+					if (progress === PROGRESS_COMPLETED) {
+						clearProgress();
+						setProgress(progress);
+					} else {
+						// in process
+						let newUnchangedProgressCount = getUnchangedProgressCount();
+						if (progress === getPreviousProgress()) {
+							newUnchangedProgressCount++;
+							setUnchangedProgressCount(newUnchangedProgressCount);
+							if (progressStuckThreshold !== null && newUnchangedProgressCount >= progressStuckThreshold) {
+								clearProgress();
+								setProgress('The operation appears to be stuck.');
+								setIsStuck(true);
+							}
+						} else {
+							setPreviousProgress(progress);
+							setProgress(progress);
+							setUnchangedProgressCount(0);
+						}
+					}
+				};
+				
+				if (immediately) {
+					fetchProgress();
+				}
+		
+				const interval = setInterval(fetchProgress, updateInterval);
+				setIntervalRef(interval);
+			}
+		},
+		resetToInitialState = () => {
 			setCurrentTab(0);
 			setFooter(getFooter());
+			clearProgress();
+		},
+		clearProgress = () => {
+			setIsInProgress(false);
+			setIsStuck(false);
+			setProgress(null);
+			setPreviousProgress(null);
+			setUnchangedProgressCount(0);
+			clearInterval(getInterval());
+			setIntervalRef(null);
+		},
+		setIsInProgress = (isInProgress) => {
+			dispatch({
+				type: 'app/setOperationsInProgress',
+				payload: {
+					operation: action,
+					isInProgress,
+				},
+			});
+		},
+		unchangedProgressCount = getUnchangedProgressCount();
+
+	useEffect(() => {
+		
+		if (isInProgress) {
+			getProgress(true); // true to fetch immediately
+		}
+
+		return () => {
+			// clear the interval when the component unmounts
+			clearInterval(getInterval());
 		};
+	}, []);
 
 	return <Panel {...props} footer={footer}>
 				<TabBar
 					tabs={[
 						{
-							title: 'Initiate',
+							title: 'Start',
 							icon: Play,
 							isDisabled: currentTabIx !== 0,
 							content: <Form
@@ -119,17 +254,25 @@ function AsyncOperation(props) {
 										className="w-full h-full flex-1"
 										disableFooter={true}
 										items={formItems}
+										startingValues={formStartingValues}
 									/>,
 						},
 						{
 							title: 'Results',
-							icon: Stop,
+							icon: isInProgress ? EllipsisHorizontal : Stop,
 							isDisabled: currentTabIx !== 1,
-							content: results,
+							content: <ScrollView className="ScrollView h-full w-full">
+										<Box className={`p-4 ${isStuck ? 'text-red-400 font-bold' : ''}`}>
+											{progress ? 
+											progress + (unchangedProgressCount > 0 ? ' (unchanged x' + unchangedProgressCount + ')' : '') : 
+											results}
+										</Box>
+									</ScrollView>,
 						},
 					]}
 					currentTabIx={currentTabIx}
 					canToggleCollapse={false}
+					tabsAreButtons={false}
 				/>
 			</Panel>;
 }

package/src/Components/Tab/Tab.js

@@ -0,0 +1,93 @@
+import { forwardRef, useRef } from 'react';
+import {
+	HStack,
+	Icon,
+} from '@project-components/Gluestack';
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions.js';
+import withTooltip from '../Hoc/withTooltip.js';
+import IconButton from '../Buttons/IconButton.js';
+import Xmark from '../Icons/Xmark.js';
+import UiGlobals from '../../UiGlobals.js';
+import _ from 'lodash';
+
+const Tab = forwardRef((props, ref) => {
+	let {
+			className,
+			direction,
+			isDisabled,
+			isCurrentTab,
+			text,
+			_text,
+			useIconOnly,
+			icon,
+			_icon,
+			useCloseBtn,
+			onClose,
+			onPress, // remove it from propsToPass
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles;
+	
+	if (!ref) {
+		ref = useRef();
+	}
+
+	if (isCurrentTab) {
+		className += ' ' + styles.TAB_BG_CURRENT;
+		_icon.className += ' ' + styles.TAB_ICON_COLOR_CURRENT;
+		_text.className += ' ' + styles.TAB_COLOR_CURRENT;
+	}
+	if (isDisabled) {
+		className += ' ' + styles.TAB_BG_DISABLED_2;
+		_icon.className += ' ' + styles.TAB_COLOR_DISABLED;
+		_text.className += ' ' + styles.TAB_COLOR_DISABLED;
+	}
+
+	let tab = null;
+	if (useIconOnly) {
+		tab = <HStack className={className + ' Tab px-[20px] py-2'}>
+					<Icon
+						{...propsToPass}
+						className={className}
+						ref={ref}
+						{..._icon}
+						as={icon}
+					/>
+				</HStack>;
+	} else {
+		if (direction === VERTICAL) {
+			className += ' w-[200px]';
+		}
+
+		let closeBtn = null;
+		if (useCloseBtn) {
+			closeBtn = <IconButton
+							{...testProps('tabCloseButton-' + ix)}
+							onPress={onClose}
+							icon={Xmark}
+							_icon={_icon}
+							tooltip="Close Tab"
+							className="p-0"
+						/>;
+		}
+		tab = <HStack
+				{...propsToPass}
+				className={className}
+				ref={ref}
+			>
+				<Icon
+					{..._icon}
+					as={icon}
+				/>
+				<Text {..._text}>{text}</Text>
+				{closeBtn}
+			</HStack>;
+	}
+
+	return tab;
+});
+
+export default withTooltip(Tab);

package/src/Components/Tab/TabBar.js

@@ -1,7 +1,9 @@
 import { cloneElement, useState, useEffect, } from 'react';
 import {
+	Box,
 	HStack,
 	HStackNative,
+	Icon,
 	ScrollView,
 	VStack,
 	VStackNative,
@@ -10,6 +12,8 @@ import {
 	HORIZONTAL,
 	VERTICAL,
 } from '../../Constants/Directions.js';
+import Tab from './Tab.js';
+import TabButton from './TabButton.js';
 import Button from '../Buttons/Button.js';
 import UiGlobals from '../../UiGlobals.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
@@ -20,7 +24,6 @@ import Minimize from '../Icons/Minimize.js';
 import Maximize from '../Icons/Maximize.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
-import Xmark from '../Icons/Xmark.js';
 import _ from 'lodash';
 
 
@@ -37,6 +40,7 @@ function TabBar(props) {
 			disableCollapse = false,
 			startsCollapsed = true,
 			canToggleCollapse = true,
+			tabsAreButtons = true,
 			onChangeCurrentTab,
 			onChangeIsCollapsed,
 			onPressTab,
@@ -88,9 +92,9 @@ function TabBar(props) {
 		},
 		renderToggleButton = () => {
 			const {
-					buttonProps: {
-						className: buttonPropsClassName,
-						...buttonPropsToPass
+					tabProps: {
+						className: tabPropsClassName,
+						...tabPropsToPass
 					},
 					textProps: {
 						className: textPropsClassName,
@@ -100,9 +104,9 @@ function TabBar(props) {
 						className: iconPropsClassName,
 						...iconPropsToPass
 					},
-				} = getButtonProps();
+				} = getTabProps();
 
-			let buttonClassName = buttonPropsClassName,
+			let tabClassName = tabPropsClassName,
 				textClassName = textPropsClassName,
 				iconClassName = iconPropsClassName;
 			
@@ -119,14 +123,14 @@ function TabBar(props) {
 							{...testProps('toggleBtn')}
 							key="toggleBtn"
 							onPress={onPress}
-							{...buttonPropsToPass}
+							{...tabPropsToPass}
 							icon={icon}
 							_icon={_icon}
-							className={buttonClassName}
+							className={tabClassName}
 							tooltip={isCollapsed ? 'Expand' : 'Collapse'}
 						/>;
 			} else {
-				buttonClassName += `
+				tabClassName += `
 					${direction === VERTICAL ? 'w-[200px]' : ''}
 					pr-0
 					mr-0
@@ -136,10 +140,10 @@ function TabBar(props) {
 							{...testProps('toggleBtn')}
 							key="toggleBtn"
 							onPress={onPress}
-							{...buttonPropsToPass}
+							{...tabPropsToPass}
 							icon={icon}
 							_icon={_icon}
-							className={buttonClassName}
+							className={tabClassName}
 							text="Collapse"
 							_text={{
 								className: textClassName,
@@ -151,15 +155,12 @@ function TabBar(props) {
 			}
 			return button;
 		},
-		getButtonProps = () => {
+		getTabProps = () => {
 			const
-				buttonProps = {
+				tabProps = {
 					className: `
 						${styles.TAB_BG}
 						${isCollapsed ? 'justify-center' : 'justify-start'}
-						${styles.TAB_BG_HOVER}
-						${styles.TAB_BG_ACTIVE}
-						${styles.TAB_BG_DISABLED}
 					`,
 				},
 				textProps = {
@@ -174,14 +175,11 @@ function TabBar(props) {
 					// size: 'md',
 					className: `
 						${styles.TAB_ICON_COLOR}
-						${styles.TAB_ICON_COLOR_HOVER}
-						${styles.TAB_ICON_COLOR_ACTIVE}
-						${styles.TAB_ICON_COLOR_DISABLED}
 					`,
 				};
 			switch(direction) {
 				case VERTICAL:
-					buttonProps.className += `
+					tabProps.className += `
 						rounded-l-lg
 						rounded-r-none
 						w-full
@@ -202,7 +200,7 @@ function TabBar(props) {
 					`;
 					break;
 				case HORIZONTAL:
-					buttonProps.className += `
+					tabProps.className += `
 						rounded-t
 						rounded-b-none
 						mr-1
@@ -217,16 +215,16 @@ function TabBar(props) {
 				default:
 			}
 			return {
-				buttonProps,
+				tabProps,
 				textProps,
 				iconProps,
 			};
 		},
 		renderTabs = () => {
 			const {
-					buttonProps: {
-						className: buttonPropsClassName,
-						...buttonPropsToPass
+					tabProps: {
+						className: tabPropsClassName,
+						...tabPropsToPass
 					},
 					textProps: {
 						className: textPropsClassName,
@@ -236,8 +234,8 @@ function TabBar(props) {
 						className: iconPropsClassName,
 						...iconPropsToPass
 					},
-				} = getButtonProps(),
-				buttons = [];
+				} = getTabProps(),
+				tabComponents = [];
 				
 			_.each(tabs, (tab, ix) => {
 				if (!tab.icon) {
@@ -245,7 +243,7 @@ function TabBar(props) {
 				}
 				const
 					isCurrentTab = ix === getCurrentTab(),
-					useIconButton = (isCollapsed || !tab.title),
+					useIconTab = (isCollapsed || !tab.title),
 					tabIcon = tab._icon ? _.clone(tab._icon) : {};
 				if (tabIcon.as && _.isString(tabIcon.as)) {
 					const Type = getComponentFromType(tabIcon.as);
@@ -254,20 +252,13 @@ function TabBar(props) {
 					}
 				}
 
-				let buttonClassName = buttonPropsClassName,
+				let tabClassName = tabPropsClassName,
 					textClassName = textPropsClassName,
 					iconClassName = iconPropsClassName;
 
-				if (isCurrentTab) {
-					buttonClassName += ' ' + styles.TAB_BG_CURRENT + 
-										' ' + styles.TAB_BG_CURRENT_HOVER;
-					iconClassName += ' ' + styles.TAB_ICON_COLOR_CURRENT;
-					textClassName += ' ' + styles.TAB_COLOR_CURRENT;
-				}
-
 				// overrides
 				if (tab._button?.className) {
-					buttonClassName += ' ' + tab._button.className;
+					tabClassName += ' ' + tab._button.className;
 				}
 				if (tab._text?.className) {
 					textClassName += ' ' + tab._text.className;
@@ -284,59 +275,28 @@ function TabBar(props) {
 					},
 					onPress = () => setCurrentTab(ix);
 
-				let button;
-				if (useIconButton) {
-					button = <IconButton
-								{...testProps(tab.path)}
-								key={'tabIconBtn' + ix}
-								onPress={onPress}
-								{...buttonPropsToPass}
-								icon={tab.icon}
-								_icon={_icon}
-								className={buttonClassName}
-								tooltip={tab.title}
-								isDisabled={tab.isDisabled}
-							/>;
-				} else {
-					if (direction === VERTICAL) {
-						buttonClassName += ' w-[200px]';
-					}
-
-					let closeBtn = null;
-					if (onTabClose && !tab.disableCloseBox) {
-						closeBtn = <IconButton
-										{...testProps('tabCloseButton-' + ix)}
-										key={'tabCloseButton' + ix}
-										onPress={() => onTabClose(ix)}
-										icon={Xmark}
-										_icon={{
-											...iconProps,
-											className: iconClassName,
+				const WhichTabType = tabsAreButtons ? TabButton : Tab
+				tabComponents.push(<WhichTabType
+										{...testProps(tab.path)}
+										key={'tab' + ix}
+										onPress={onPress}
+										{...tabPropsToPass}
+										icon={tab.icon}
+										_icon={_icon}
+										className={tabClassName}
+										tooltip={tab.title}
+										text={tab.title}
+										_text={{
+											className: textClassName,
+											...textPropsToPass,
 										}}
-										tooltip="Close Tab"
-										className="p-0"
-									/>;
-					}
-					button = <Button
-								{...testProps(tab.path)}
-								key={'tabBtn' + ix}
-								onPress={onPress}
-								{...buttonPropsToPass}
-								icon={tab.icon}
-								_icon={_icon}
-								rightIcon={closeBtn}
-								className={buttonClassName}
-								text={tab.title}
-								_text={{
-									className: textClassName,
-									...textPropsToPass,
-								}}
-								isDisabled={tab.isDisabled}
-								action="none"
-								variant="none"
-							/>;
-				}
-				buttons.push(button);
+										isDisabled={tab.isDisabled}
+										isCurrentTab={isCurrentTab}
+										useIconOnly={useIconTab}
+										direction={direction}
+										useCloseBtn={onTabClose && !tab.disableCloseBox}
+										onClose={() => onTabClose(ix)}
+									/>);
 			});
 
 			if (additionalButtons) {
@@ -346,7 +306,7 @@ function TabBar(props) {
 					}
 
 					const
-						useIconButton = (isCollapsed || !additionalButton.text),
+						useIconTab = (isCollapsed || !additionalButton.text),
 						additionalButtonIcon = _.clone(additionalButton._icon);
 
 					if (additionalButtonIcon.as && _.isString(additionalButtonIcon.as)) {
@@ -356,13 +316,13 @@ function TabBar(props) {
 						}
 					}
 
-					let buttonClassName = buttonPropsClassName,
+					let tabClassName = tabPropsClassName,
 						textClassName = textPropsClassName,
 						iconClassName = iconPropsClassName;
 
 					// overrides
 					if (additionalButton._button?.className) {
-						buttonClassName += ' ' + additionalButton._button.className;
+						tabClassName += ' ' + additionalButton._button.className;
 					}
 					if (additionalButton._text?.className) {
 						textClassName += ' ' + additionalButton._text.className;
@@ -375,10 +335,10 @@ function TabBar(props) {
 						// First button should have a gap before it
 						switch(direction) {
 							case VERTICAL:
-								buttonClassName += ' mt-6';
+								tabClassName += ' mt-6';
 								break;
 							case HORIZONTAL:
-								buttonClassName += ' ml-6';
+								tabClassName += ' ml-6';
 								break;
 							default:
 						}
@@ -393,27 +353,27 @@ function TabBar(props) {
 						onPress = additionalButton.onPress;
 
 					let button;
-					if (useIconButton) {
+					if (useIconTab) {
 						button = <IconButton
 									{...testProps('additionalBtn' + ix)}
 									key={'additionalBtn' + ix}
 									onPress={onPress}
-									{...buttonPropsToPass}
+									{...tabPropsToPass}
 									_icon={_icon}
-									className={buttonClassName}
+									className={tabClassName}
 									tooltip={additionalButton.text}
 								/>;
 					} else {
 						if (direction === VERTICAL) {
-							buttonClassName += ' w-[200px]';
+							tabClassName += ' w-[200px]';
 						}
 						button = <Button
 									{...testProps('additionalBtn' + ix)}
 									key={'additionalBtn' + ix}
 									onPress={onPress}
-									{...buttonPropsToPass}
+									{...tabPropsToPass}
 									_icon={_icon}
-									className={buttonClassName}
+									className={tabClassName}
 									text={additionalButton.text}
 									_text={{
 										className: textClassName,
@@ -423,11 +383,11 @@ function TabBar(props) {
 									variant="none"
 								/>;
 					}
-					buttons.push(button);
+					tabComponents.push(button);
 				});
 			}
 
-			return buttons;
+			return tabComponents;
 		},
 		renderCurrentTabContent = () => {
 			if (content) {

package/src/Components/Tab/TabButton.js

@@ -0,0 +1,82 @@
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions.js';
+import Button from '../Buttons/Button.js';
+import IconButton from '../Buttons/IconButton.js';
+import Xmark from '../Icons/Xmark.js';
+import UiGlobals from '../../UiGlobals.js';
+import _ from 'lodash';
+
+
+export default function TabButton(props) {
+	let {
+			className,
+			direction,
+			isDisabled,
+			isCurrentTab,
+			text,
+			_text,
+			useIconOnly,
+			_icon,
+			useCloseBtn,
+			onClose,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles;
+
+	className += ' ' + styles.TAB_BG_HOVER + 
+				' ' + styles.TAB_BG_ACTIVE;
+	_icon.className += ' ' + styles.TAB_ICON_COLOR_HOVER +
+						' ' + styles.TAB_ICON_COLOR_ACTIVE;
+
+	if (isCurrentTab) {
+		className += ' ' + styles.TAB_BG_CURRENT + 
+						' ' + styles.TAB_BG_CURRENT_HOVER;
+		_icon.className += ' ' + styles.TAB_ICON_COLOR_CURRENT;
+		_text.className += ' ' + styles.TAB_COLOR_CURRENT;
+	}
+	if (isDisabled) {
+		className += ' ' + styles.TAB_BG_DISABLED;
+		_icon.className += ' ' + styles.TAB_ICON_COLOR_DISABLED;
+		_text.className += ' ' + styles.TAB_COLOR_DISABLED;
+	}
+
+	let tab = null;
+	if (useIconOnly) {
+		tab = <IconButton
+					{...propsToPass}
+					{..._icon}
+					className={className}
+				/>;
+
+	} else {
+		if (direction === VERTICAL) {
+			className += ' w-[200px]';
+		}
+
+		let closeBtn = null;
+		if (useCloseBtn) {
+			closeBtn = <IconButton
+							{...testProps('tabCloseButton-' + ix)}
+							onPress={onClose}
+							icon={Xmark}
+							_icon={_icon}
+							tooltip="Close Tab"
+							className="p-0"
+						/>;
+		}
+		tab = <Button
+					{...propsToPass}
+					className={className}
+					text={text}
+					_text={_text}
+					_icon={_icon}
+					rightIcon={closeBtn}
+					action="none"
+					variant="none"
+				/>;
+	}
+
+	return tab;
+}

package/src/Constants/Progress.js

@@ -0,0 +1 @@
+export const PROGRESS_COMPLETED = 'Completed';

package/src/Constants/Styles.js

@@ -103,12 +103,14 @@ const defaults = {
 	TAB_BG_ACTIVE: 'active:bg-grey-900/50',
 	TAB_BG_CURRENT: 'bg-grey-0',
 	TAB_BG_DISABLED: 'disabled:bg-grey-200',
+	TAB_BG_DISABLED_2: 'bg-grey-200',
 	TAB_BG_HOVER: 'hover:bg-grey-900/30',
 	TAB_BG_ACTIVE_HOVER: 'hover:bg-grey-200',
 	TAB_BG_CURRENT_HOVER: 'hover:bg-grey-900/30',
 	TAB_COLOR: 'text-' + BLACK,
 	TAB_COLOR_ACTIVE: 'active:text-primary-800',
-	TAB_COLOR_CURRENT: 'active:text-primary-800',
+	TAB_COLOR_CURRENT: 'text-primary-800',
+	TAB_COLOR_DISABLED: 'text-grey-400',
 	TAB_ICON_COLOR: 'text-' + BLACK,
 	TAB_ICON_COLOR_ACTIVE: 'text-' + BLACK,
 	TAB_ICON_COLOR_CURRENT: 'text-' + BLACK,