react-artasys-ui 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-artasys-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",

package/src/Button/Button.tsx

@@ -19,7 +19,7 @@ const Button = ({children, className, classNameContainer, styleContainer, spinne
 	if (classNameContainer) classes.push(classNameContainer);
 
 	return(<div className={classes.join(' ')} style={styleContainer}>
-		<button {...props} className={'ui-button' + className ? ' ' + className : ''}>{children}</button>
+		<button {...props} className={'ui-button' + (className ? ' ' + className : '')}>{children}</button>
 		<div className={'ui-button-spinner ' + styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
 			<Spinner size="small" color={spinnerColor}/>
 		</div>

package/src/Checkbox/Checkbox.tsx

@@ -12,7 +12,7 @@ const Checkbox = forwardRef<HTMLInputElement, ICheckbox>(({type = 'checkbox', hi
 
 	return(<Element {...props} hiddenContainer={hiddenContainer}>
 		{(props) => <div className={'ui-checkbox-container ' + styles['container']}>
-				<input {...props} className={'ui-checkbox' + props.className ? ' ' + props.className : ''} type={type} ref={ref}/>
+				<input {...props} className={'ui-checkbox' + (props.className ? ' ' + props.className : '')} type={type} ref={ref}/>
 				<span className={'ui-checkbox-indicator ' + styles['indicator']}/>
 				<span className={'ui-checkbox-text ' + styles['text']}>{placeholder}</span>
 			</div>}

package/src/Form/Element/Element.tsx

@@ -25,7 +25,7 @@ const Element = ({children, beforeElement, afterElement, error, placeholder, dis
 		setCurrentError(error ?? '');
 	},[error]);
 
-	const classes = ['ui-form-element'];
+	const classes = ['ui-form-element-container'];
 
 	classes.push(styles['container']);
 	if (currentError) classes.push(styles['error']);
@@ -39,13 +39,13 @@ const Element = ({children, beforeElement, afterElement, error, placeholder, dis
 			style={styleContainer}
 		>
 			{beforeElement}
-			<div className={styles['element']}>
+			<div className={'ui-form-element ' + styles['element']}>
 				{typeof children === 'function' ? children(props) : null}
-				{placeholder && <span className={styles['placeholder']}>{placeholder}</span>}
+				{placeholder && <span className={'ui-form-element-placeholder ' + styles['placeholder']}>{placeholder}</span>}
 			</div>
 			{afterElement}
 		</label>
-		{currentError && <div className={styles['error']}>{currentError}</div>}
+		{currentError && <div className={'ui-form-error ' + styles['error']}>{currentError}</div>}
 	</>);
 }
 

package/src/Form/Element/style.module.css

@@ -17,13 +17,12 @@
 .element {
 	align-self: stretch;
 	width: 100%;
-	min-height: 45px;
 }
 
 .element > input, .element > textarea {
 	width: 100%;
 	height: 100%;
-	min-height: 100%;
+	min-height: 45px;
 	max-height: 500px;
 	max-height: 50dvh;
 	margin: 0;

package/src/Input/Input.tsx

@@ -14,7 +14,7 @@ interface IInput extends IElement<HTMLInputElement> {
 }
 
 const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChangeText, ...props}, ref) => {
-	const [currentValue, setCurrentValue] = useState(props.value);
+	const [currentValue, setCurrentValue] = useState<string | undefined>('');
 
 	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
 		if (typeof onChange === 'function') {
@@ -34,7 +34,8 @@ const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChange
 	};
 
 	useEffect(() => {
-		setCurrentValue(props.value);
+		if (!props.value) return;
+		setCurrentValue(String(props.value));
 	}, [props.value]);
 
 	return(<Element {...props}>