@onehat/ui 0.4.70 → 0.4.72

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

@@ -5,6 +5,7 @@ import {
 	Pressable,
 	Tooltip,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import { SketchPicker } from 'react-color';
 import {
 	UI_MODE_WEB,
@@ -137,12 +138,12 @@ export function ColorElement(props) {
 	assembledComponents =
 		<HStackNative
 			onLayout={() => setIsRendered(true)}
-			className={`
-				ColorElement-HStackNative
-				flex-1
-				h-full
-				items-center
-			`}
+			className={clsx(
+				'ColorElement-HStackNative',
+				'flex-1',
+				'h-full',
+				'items-center',
+			)}
 		>
 			<Pressable
 				ref={triggerRef}
@@ -152,14 +153,14 @@ export function ColorElement(props) {
 				borderBottomLeftRadius={6}
 				borderTopRightRadius={0}
 				borderBottomRightRadius={0}
-				className={`
-					ColorElement-Pressable
-					bg-${value}
-					h-[10px]
-					w-[10px]
-					border
-					border-grey-300
-				`}
+				className={clsx(
+					'ColorElement-Pressable',
+					`bg-${value}`,
+					'h-[10px]',
+					'w-[10px]',
+					'border',
+					'border-grey-300',
+				)}
 			/>
 			<Input
 				ref={inputRef}
@@ -168,20 +169,20 @@ export function ColorElement(props) {
 				maxLength={7}
 				onBlur={onInputBlur}
 				onClick={onInputClick}
-				className={`
-					ColorElement-Input
-					flex-1
-					h-full
-					p-2
-					border
-					border-grey-300
-					border-left-0
-					border-top-left-radius-0
-					border-bottom-left-radius-0
-					border-top-right-radius-6
-					border-bottom-right-radius-6
-					${styles.FORM_COLOR_INPUT_CLASSNAME}
-				`}
+				className={clsx(
+					'ColorElement-Input',
+					'flex-1',
+					'h-full',
+					'p-2',
+					'border',
+					'border-grey-300',
+					'border-left-0',
+					'border-top-left-radius-0',
+					'border-bottom-left-radius-0',
+					'border-top-right-radius-6',
+					'border-bottom-right-radius-6',
+					styles.FORM_COLOR_INPUT_CLASSNAME,
+				)}
 				textAlignIsCenter={true}
 				onLayout={(e) => {
 					// On web, this is not needed, but on RN it might be, so leave it in for now
@@ -202,17 +203,17 @@ export function ColorElement(props) {
 				trigger={emptyFn}
 				trapFocus={true}
 				placement={'auto'}
-				className={`
-					ColorElement-Popover
-				`}
+				className={clsx(
+					'ColorElement-Popover'
+				)}
 			>
 				<PopoverContent
 					position="absolute"
-					className={`
-						ColorElement-PopoverContent
-						w-[220px]
-						h-[287px]
-					`}
+					className={clsx(
+						'ColorElement-PopoverContent',
+						'w-[220px]',
+						'h-[287px]',
+					)}
 					style={{
 						top,
 						left,
@@ -221,10 +222,10 @@ export function ColorElement(props) {
 				>
 					<PopoverBody
 						ref={pickerRef}
-						className={`
-							ColorElement-PopoverBody
-							p-0
-						`}
+						className={clsx(
+							'ColorElement-PopoverBody',
+							'p-0',
+						)}
 					>
 						<SketchPicker
 							disableAlpha={true}

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

@@ -11,6 +11,7 @@ import {
 	TextNative,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	UI_MODE_NATIVE,
 	UI_MODE_WEB,
@@ -558,11 +559,11 @@ export const ComboComponent = forwardRef((props, ref) => {
 						isDisabled={isDisabled || _.isNil(value)}
 						onPress={onXButtonPress}
 						tooltip="Clear selection"
-						className={`
-							h-full
-							mr-1
-							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
-						`}
+						className={clsx(
+							'h-full',
+							'mr-1',
+							styles.FORM_COMBO_TRIGGER_CLASSNAME
+						)}
 					/>;
 	}
 	if (showEyeButton && Editor) {
@@ -576,24 +577,24 @@ export const ComboComponent = forwardRef((props, ref) => {
 						isDisabled={isDisabled || _.isNil(value)}
 						onPress={onEyeButtonPress}
 						tooltip="View selected record"
-						className={`
-							h-full
-							mr-1
-							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
-						`}
+						className={clsx(
+							'h-full',
+							'mr-1',
+							styles.FORM_COMBO_TRIGGER_CLASSNAME
+						)}
 					/>;
 	}
-	const triggerClassName = `
-		Combo-trigger
-		self-stretch
-		h-auto
-		border
-		border-l-0
-		border-gray-400
-		rounded-l-none
-		rounded-r-md
-		${styles.FORM_COMBO_TRIGGER_CLASSNAME}
-	`;
+	const triggerClassName = clsx(
+		'Combo-trigger',
+		'self-stretch',
+		'h-auto',
+		'border',
+		'border-l-0',
+		'border-gray-400',
+		'rounded-l-none',
+		'rounded-r-md',
+		styles.FORM_COMBO_TRIGGER_CLASSNAME,
+	);
 	trigger = <IconButton
 				{...testProps('trigger')}
 				ref={triggerRef}
@@ -614,33 +615,33 @@ export const ComboComponent = forwardRef((props, ref) => {
 						{...testProps('toggleMenuBtn')}
 						ref={inputRef}
 						onPress={toggleMenu}
-						className={`
-							Combo-toggleMenuBtn
-							h-auto
-							self-stretch
-							flex-1
-							flex-row
-							justify-center
-							items-center
-							m-0
-							p-2
-							bg-white
-							border
-							border-grey-400
-							rounded-r-none
-							${styles.FORM_COMBO_INPUT_BG}
-						`}
+						className={clsx(
+							'Combo-toggleMenuBtn',
+							'h-auto',
+							'self-stretch',
+							'flex-1',
+							'flex-row',
+							'justify-center',
+							'items-center',
+							'm-0',
+							'p-2',
+							'bg-white',
+							'border',
+							'border-grey-400',
+							'rounded-r-none',
+							styles.FORM_COMBO_INPUT_BG
+						)}
 					>
 						{inputIconElement}
 						<TextNative
 							numberOfLines={1}
 							ellipsizeMode="head"
-							className={`
-								Combo-TextNative
-								flex-1
-								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
-								${styles.FORM_COMBO_INPUT_CLASSNAME}
-							`}
+							className={clsx(
+								'Combo-TextNative',
+								'flex-1',
+								_.isEmpty(textInputValue) ? 'text-grey-400' : 'text-black',
+								styles.FORM_COMBO_INPUT_CLASSNAME
+							)}
 						>{_.isEmpty(textInputValue) ? placeholder : textInputValue}</TextNative>
 					</Pressable> :
 					<Input
@@ -659,23 +660,23 @@ export const ComboComponent = forwardRef((props, ref) => {
 						placeholder={placeholder}
 						tooltip={tooltip}
 						tooltipPlacement={tooltipPlacement}
-						tooltipTriggerClassName={`
-							grow
-							h-auto
-							self-stretch
-							flex-1
-						`}
-						className={`
-							Combo-Input
-							grow
-							h-auto
-							self-stretch
-							flex-1
-							m-0
-							rounded-tr-none
-							rounded-br-none
-							${styles.FORM_COMBO_INPUT_CLASSNAME}
-						`}
+						tooltipTriggerClassName={clsx(
+							'grow',
+							'h-auto',
+							'self-stretch',
+							'flex-1'
+						)}
+						className={clsx(
+							'Combo-Input',
+							'grow',
+							'h-auto',
+							'self-stretch',
+							'flex-1',
+							'm-0',
+							'rounded-tr-none',
+							'rounded-br-none',
+							styles.FORM_COMBO_INPUT_CLASSNAME
+						)}
 						{..._input}
 					/>;
 	}
@@ -687,30 +688,30 @@ export const ComboComponent = forwardRef((props, ref) => {
 		input = <Pressable
 					{...testProps('showMenuBtn')}
 					onPress={showMenu}
-					className={`
-						h-full
-						flex-1
-						flex-row
-						justify-center
-						items-center
-						border
-						border-grey-400
-						rounded-r-none
-						${styles.FORM_COMBO_INPUT_BG}
-					`}
+					className={clsx(
+						'h-full',
+						'flex-1',
+						'flex-row',
+						'justify-center',
+						'items-center',
+						'border',
+						'border-grey-400',
+						'rounded-r-none',
+						styles.FORM_COMBO_INPUT_BG,
+					)}
 				>
 					{inputIconElement}
 					<TextNative
 						numberOfLines={1}
 						ellipsizeMode="head"
-						className={`
-							h-full
-							flex-1
-							m-0
-							p-1
-							${_.isEmpty(displayValue) ? "text-grey-400" : "text-black"}
-							${styles.FORM_COMBO_INPUT_CLASSNAME}
-						`}
+						className={clsx(
+							'h-full',
+							'flex-1',
+							'm-0',
+							'p-1',
+							_.isEmpty(displayValue) ? 'text-grey-400' : 'text-black',
+							styles.FORM_COMBO_INPUT_CLASSNAME,
+						)}
 					>{_.isEmpty(displayValue) ? placeholder : displayValue}</TextNative>
 				</Pressable>;
 	}
@@ -752,14 +753,14 @@ export const ComboComponent = forwardRef((props, ref) => {
 					showHovers={true}
 					getRowProps={() => {
 						return {
-							className: `
-								w-full
-								pl-4
-								pr-2
-								py-1
-								border-b-1
-								border-grey-300
-							`,
+							className: clsx(
+								'w-full',
+								'pl-4',
+								'pr-2',
+								'py-1',
+								'border-b-1',
+								'border-grey-300',
+							),
 						};
 					}}
 					autoAdjustPageSizeToHeight={false}
@@ -871,9 +872,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 					}}
 					reference="grid"
 					parent={self}
-					className={`
-						h-full
-					`}
+					className={clsx(
+						'h-full',
+					)}
 					style={gridStyle}
 					{...gridProps}
 					{..._editor}
@@ -902,21 +903,21 @@ export const ComboComponent = forwardRef((props, ref) => {
 									placeholder={placeholder}
 									tooltip={tooltip}
 									tooltipPlacement={tooltipPlacement}
-									tooltipTriggerClassName={`
-										grow
-										h-full
-										flex-1
-									`}
-									className={`
-										Combo-inputClone-Input
-										grow
-										h-full
-										flex-1
-										m-0
-										rounded-tr-none
-										rounded-br-none
-										${styles.FORM_COMBO_INPUT_CLASSNAME}
-									`}
+									tooltipTriggerClassName={clsx(
+										'grow',
+										'h-full',
+										'flex-1'
+									)}
+									className={clsx(
+										'Combo-inputClone-Input',
+										'grow',
+										'h-full',
+										'flex-1',
+										'm-0',
+										'rounded-tr-none',
+										'rounded-br-none',
+										styles.FORM_COMBO_INPUT_CLASSNAME,
+									)}
 									{..._input}
 								/>
 							</Box>;
@@ -933,18 +934,18 @@ export const ComboComponent = forwardRef((props, ref) => {
 								<PopoverBackdrop className="PopoverBackdrop bg-[#000]" />
 								<Box
 									ref={menuRef}
-									className={`
-										dropdownMenu-Box
-										flex-1
-										overflow-auto
-										bg-white
-										p-0
-										rounded-none
-										border
-										border-grey-400
-										shadow-md
-										max-w-full
-									`}
+									className={clsx(
+										'dropdownMenu-Box',
+										'flex-1',
+										'overflow-auto',
+										'bg-white',
+										'p-0',
+										'rounded-none',
+										'border',
+										'border-grey-400',
+										'shadow-md',
+										'max-w-full',
+									)}
 									style={{
 										top,
 										left,
@@ -970,13 +971,13 @@ export const ComboComponent = forwardRef((props, ref) => {
 								}}
 								onPress={onCheckButtonPress}
 								isDisabled={!value}
-								className={`
-									h-full
-									border
-									border-grey-400
-									rounded-md
-									${styles.FORM_COMBO_TRIGGER_CLASSNAME}
-								`}
+								className={clsx(
+									'h-full',
+									'border',
+									'border-grey-400',
+									'rounded-md',
+									styles.FORM_COMBO_TRIGGER_CLASSNAME,
+								)}
 							/>;
 			}
 			const inputAndTriggerClone = // for RN, this is the actual input and trigger, as we need them to appear up above in the modal
@@ -988,16 +989,16 @@ export const ComboComponent = forwardRef((props, ref) => {
 							ref={inputRef}
 							numberOfLines={1}
 							ellipsizeMode="head"
-							className={`
-								h-full
-								flex-1
-								m-0
-								p-1
-								border
-								border-grey-400
-								rounded-r-none
-								${styles.FORM_COMBO_INPUT_CLASSNAME}
-							`}
+							className={clsx(
+								'h-full',
+								'flex-1',
+								'm-0',
+								'p-1',
+								'border',
+								'border-grey-400',
+								'rounded-r-none',
+								styles.FORM_COMBO_INPUT_CLASSNAME
+							)}
 						>{textInputValue}</TextNative> :
 						<Input
 							{...testProps('input')}
@@ -1015,17 +1016,17 @@ export const ComboComponent = forwardRef((props, ref) => {
 							placeholder={placeholder}
 							tooltip={tooltip}
 							tooltipPlacement={tooltipPlacement}
-							tooltipTriggerClassName={`
-								h-full
-								flex-1
-							`}
-							className={`
-								h-full
-								flex-1
-								m-0
-								rounded-r-none
-								${styles.FORM_COMBO_INPUT_CLASSNAME}
-							`}
+							tooltipTriggerClassName={clsx(
+								'h-full',
+								'flex-1'
+							)}
+							className={clsx(
+								'h-full',
+								'flex-1',
+								'm-0',
+								'rounded-r-none',
+								styles.FORM_COMBO_INPUT_CLASSNAME,
+							)}
 							{..._input}
 						/>}
 					<IconButton
@@ -1037,14 +1038,14 @@ export const ComboComponent = forwardRef((props, ref) => {
 						}}
 						isDisabled={isDisabled}
 						onPress={() => hideMenu()}
-						className={`
-							h-full
-							border
-							border-grey-400
-							rounded-l-none
-							rounded-r-md
-							${styles.FORM_COMBO_TRIGGER_CLASSNAME}
-						`}
+						className={clsx(
+							'h-full',
+							'border',
+							'border-grey-400',
+							'rounded-l-none',
+							'rounded-r-md',
+							styles.FORM_COMBO_TRIGGER_CLASSNAME,
+						)}
 					/>
 					{checkButton}
 				</HStack>;
@@ -1052,12 +1053,12 @@ export const ComboComponent = forwardRef((props, ref) => {
 								isOpen={true}
 								safeAreaTop={true}
 								onClose={() => setIsMenuShown(false)}
-								className={`
-									h-[400px]
-									w-full
-									my-auto
-									p-[5px]
-								`}
+								className={clsx(
+									'h-[400px]',
+									'w-full',
+									'my-auto',
+									'p-[5px]'
+								)}
 							>
 								<ModalBackdrop />
 								<ModalContent>
@@ -1070,15 +1071,15 @@ export const ComboComponent = forwardRef((props, ref) => {
 		}
 	}
 
-	let className = `
-		Combo-HStack
-		flex-1
-		items-stretch
-		h-auto
-		self-stretch
-		justify-center
-		items-stretch
-	`;
+	let className = clsx(
+		'Combo-HStack',
+		'flex-1',
+		'items-stretch',
+		'h-auto',
+		'self-stretch',
+		'justify-center',
+		'items-stretch'
+	);
 	if (props.className) {
 		className += ' ' + props.className;
 	}
@@ -1153,10 +1154,10 @@ export const ComboComponent = forwardRef((props, ref) => {
 							reference="viewer"
 							selection={viewerSelection}
 							onEditorClose={onViewerClose}
-							className={`
-								w-full
-								p-0
-							`}
+							className={clsx(
+								'w-full',
+								'p-0',
+							)}
 							{...propsForViewer}
 							{...viewerProps}
 						/>

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

@@ -9,11 +9,13 @@ import ArrayCombo from './ArrayCombo.js';
 import {
 	METER_TYPES__HOURS,
 	METER_TYPES__MILES,
+	METER_TYPES__HOURS_TEXT,
+	METER_TYPES__MILES_TEXT,
 } from '../../../../Constants/MeterTypes.js';
 
 const data = [
-	[METER_TYPES__HOURS, 'Time (hrs)'],
-	[METER_TYPES__MILES, 'Distance (mi/km)'],
+	[METER_TYPES__HOURS, METER_TYPES__HOURS_TEXT],
+	[METER_TYPES__MILES, METER_TYPES__MILES_TEXT],
 ];
 function MeterTypesCombo(props) {
 	return <ArrayCombo

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

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