react-artasys-ui 0.1.8 → 0.1.11

package/lib/Form/Element/Element.d.ts

@@ -2,6 +2,7 @@ import { AllHTMLAttributes, ReactElement } from "react";
 export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'> {
     children?: ((props: AllHTMLAttributes<T>) => ReactElement) | AllHTMLAttributes<T>["children"];
     error?: string;
+    formValue?: string | number;
     disabled?: boolean;
     placeholder?: string;
     styleContainer?: React.HTMLAttributes<T>["style"];
@@ -10,5 +11,5 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
     afterElement?: React.ReactElement;
     hiddenContainer?: boolean;
 }
-declare const Element: ({ children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, ...props }: IElement) => JSX.Element;
+declare const Element: ({ children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, formValue, ...props }: IElement) => JSX.Element;
 export default Element;

package/lib/Form/types.d.ts

@@ -1,4 +1,8 @@
-import type { FieldValues } from "react-hook-form";
+import type { FieldValues, UseFormRegisterReturn, FieldPath } from "react-hook-form";
+export type TUseFormRegisterReturn<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = UseFormRegisterReturn<TFieldName> & {
+    error?: string;
+    formValue: TFieldValues;
+};
 export type TError<TFieldValues extends FieldValues> = {
     errors?: {
         [key in keyof TFieldValues]: string[];

package/lib/Input/Input.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import { type HTMLInputTypeAttribute } from "react";
 import { IElement } from "../Form/Element";
 interface IInput extends IElement<HTMLInputElement> {
     onChangeText?: (text: string) => void;
+    type?: HTMLInputTypeAttribute;
 }
 declare const Input: import("react").ForwardRefExoticComponent<IInput & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/lib/Select/Option.d.ts

@@ -4,5 +4,5 @@ export interface IOption extends LiHTMLAttributes<HTMLLIElement> {
     disabled?: boolean;
     children?: string | React.ReactElement;
 }
-declare const Option: ({ children, value, disabled, onClick, ...props }: IOption) => JSX.Element;
+declare const Option: ({ children, value, disabled, hidden, onClick, ...props }: IOption) => JSX.Element | null;
 export default Option;

package/lib/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponentElement } from "react";
+import { FunctionComponentElement, ReactNode } from "react";
 import { IElement } from "../Form/Element";
 import type { IOptgroup } from "./Optgroup";
 import type { IOption } from "./Option";
@@ -9,7 +9,7 @@ export declare const Context: import("react").Context<{
     setSelected: (value: string) => void;
     setTitle: (title: IOption['children']) => void;
 }>;
-export type TOptionElement = FunctionComponentElement<IOption> | FunctionComponentElement<IOption>[];
+export type TOptionElement = FunctionComponentElement<IOption> | FunctionComponentElement<IOption>[] | ReactNode;
 export interface ISelect extends Omit<IElement, 'children'> {
     children?: TOptionElement | FunctionComponentElement<IOptgroup> | FunctionComponentElement<IOptgroup>[];
     onChangeSelect?: (value: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-artasys-ui",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "description": "",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",
@@ -46,7 +46,7 @@
     "react-hook-form": "^7.47.0"
   },
   "peerDependencies": {
-	"react": "^18.2.0",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
 }

package/src/Dropdown/Dropdown.tsx

@@ -28,6 +28,7 @@ export interface IDropdown extends AllHTMLAttributes<HTMLDivElement> {
 
 const Dropdown = ({children, className, items, direction = 'down', position = 'right', split = false, disabled, hover = false, ...props}: IDropdown) => {
 	const containerRef = useRef<HTMLDivElement>(null);
+	const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();
 	const [isOpen, setOpen] = useState(false);
 
 	const close = () => {
@@ -61,7 +62,13 @@ const Dropdown = ({children, className, items, direction = 'down', position = 'r
 
 	const handleMouseEnter = () => {
 		if (!hover || isOpen) return;
-		toggle();
+		hoverTimeout.current = setTimeout(toggle, 50);
+	};
+
+	const handleMouseOut = () => {
+		if (hoverTimeout.current) {
+			clearTimeout(hoverTimeout.current);
+		}
 	};
 
 	useEffect(() => {
@@ -84,7 +91,7 @@ const Dropdown = ({children, className, items, direction = 'down', position = 'r
 	return(<Context.Provider value={{
 		close
 	}}>
-		<div {...props} className={classes.join(' ')} ref={containerRef} onMouseEnter={handleMouseEnter} tabIndex={1} onBlur={handleBlur}>
+		<div {...props} className={classes.join(' ')} ref={containerRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseOut} tabIndex={1} onBlur={handleBlur}>
 			{(position === 'left' && !disabled) && <Arrow className={styles['arrow']} onClick={handleClickArrow}/>}
 			<div onClick={handleClick}>
 				{children}

package/src/File/File.tsx

@@ -52,6 +52,7 @@ const File = ({onChange, children, multiple, accept, ...props}: TFile) => {
 	};
 
 	const handleDialog = (e: MouseEvent<HTMLDivElement>) => {
+		if (props.disabled) return;
 		selector.current!.click();
 		e.preventDefault();
 	};

package/src/Form/Element/Element.tsx

@@ -10,6 +10,7 @@ import styles from "./style.module.css";
 export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'> {
 	children?: ((props: AllHTMLAttributes<T>) => ReactElement) | AllHTMLAttributes<T>["children"];
 	error?: string;
+	formValue?: string | number;
 	disabled?: boolean;
 	placeholder?: string;
 	styleContainer?: React.HTMLAttributes<T>["style"];
@@ -19,7 +20,7 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
 	hiddenContainer?: boolean;
 }
 
-const Element = ({children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, ...props}: IElement) => {
+const Element = ({children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, formValue, ...props}: IElement) => {
 	const [currentError, setCurrentError] = useState('');
 
 	useEffect(() => {

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

@@ -83,6 +83,20 @@
 	content: "*";
 }
 
+/* Date */
+.element > input[type="date"]::-webkit-calendar-picker-indicator {
+	cursor: pointer;
+	border-radius: 4px;
+	margin-right: 2px;
+	opacity: 0.7;
+	filter: invert(0.8);
+}
+
+.element > input[type="date"]::-webkit-calendar-picker-indicator:hover {
+	opacity: 1
+}
+
+.element > input[type="date"] ~ .placeholder,
 .element > input:focus ~ .placeholder,
 .element > textarea:focus ~ .placeholder,
 .element > input:not([value=""]) ~ .placeholder,

package/src/Form/types.ts

@@ -1,7 +1,14 @@
 import type {
 	FieldValues,
+	UseFormRegisterReturn,
+	FieldPath
 } from "react-hook-form";
 
+export type TUseFormRegisterReturn<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = UseFormRegisterReturn<TFieldName> & {
+	error?: string;
+	formValue: TFieldValues;
+};
+
 export type TError<TFieldValues extends FieldValues> = {
 	errors?: {
 		[key in keyof TFieldValues]: string[];

package/src/Form/useForm.tsx

@@ -1,5 +1,5 @@
 import { useState, FunctionComponent } from "react";
-import type { TError } from "./types";
+import type { TError, TUseFormRegisterReturn } from "./types";
 import styles from "./style.module.css";
 
 import {
@@ -8,7 +8,8 @@ import {
 	RegisterOptions,
 	UseFormRegisterReturn,
 	FieldValues,
-	UseFormRegister,
+	SetValueConfig,
+	FieldPathValue,
 	FieldPath
 } from "react-hook-form";
 
@@ -24,7 +25,7 @@ const useForm = <TFieldValues extends FieldValues = FieldValues>(): TuseErrors<T
 		reValidateMode: 'onChange'
 	});
 
-	const register = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: RegisterOptions<TFieldValues, TFieldName>): UseFormRegisterReturn<TFieldName> => {
+	const register = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: RegisterOptions<TFieldValues, TFieldName>): TUseFormRegisterReturn<TFieldValues, TFieldName> => {
 		const inputRegister = form.register<TFieldName>(name, options);
 		const onChange = (e: {
 			target: any;
@@ -34,8 +35,15 @@ const useForm = <TFieldValues extends FieldValues = FieldValues>(): TuseErrors<T
 			form.clearErrors(name);
 			return inputRegister.onChange(e);
 		};
+		const formValue = form.watch(name);
 		const errors = form?.formState.errors;
-		return {...inputRegister, onChange, error: errors?.[name]?.message?.toString()} as UseFormRegisterReturn<TFieldName>;
+
+		return {
+			...inputRegister,
+			onChange,
+			formValue,
+			error: errors?.[name]?.message?.toString()
+		};
 	};
 
 	const setErrors = (e: TError<TFieldValues>) => {

package/src/Input/Input.tsx

@@ -2,7 +2,8 @@ import {
 	forwardRef,
 	useState,
 	ChangeEvent,
-	useEffect
+	useEffect,
+	type HTMLInputTypeAttribute
 } from "react";
 import Element,{
 	IElement
@@ -11,9 +12,10 @@ import Element,{
 
 interface IInput extends IElement<HTMLInputElement> {
 	onChangeText?: (text: string) => void;
+	type?: HTMLInputTypeAttribute;
 }
 
-const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChangeText, ...props}, ref) => {
+const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChangeText, formValue, ...props}, ref) => {
 	const [currentValue, setCurrentValue] = useState<string | undefined>('');
 
 	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -35,9 +37,8 @@ const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChange
 	};
 
 	useEffect(() => {
-		if (typeof props.value === 'undefined') return;
-		setCurrentValue(String(props.value));
-	}, [props.value]);
+		setCurrentValue(String(props.value ?? formValue));
+	}, [props.value, formValue]);
 
 	return(<Element {...props}>
 		{ (props) => <input {...props} placeholder="" onChange={handleChange} value={currentValue} onInput={handleInput} ref={ref}/> }

package/src/Select/Option.tsx

@@ -13,7 +13,7 @@ export interface IOption extends LiHTMLAttributes<HTMLLIElement> {
 	children?: string | React.ReactElement;
 };
 
-const Option = ({children, value, disabled, onClick, ...props}: IOption) => {
+const Option = ({children, value, disabled, hidden, onClick, ...props}: IOption) => {
 	const context = useContext(Context);
 
 	const handleClick = (e: MouseEvent<HTMLLIElement>) => {
@@ -33,12 +33,14 @@ const Option = ({children, value, disabled, onClick, ...props}: IOption) => {
 			context.emptyValue.current = true;
 		}
 	}, [context.selected]);
+	
+	if (hidden) return(null);
 
 	const classes = ['ui-select-option'];
 	classes.push(styles['option']);
 	if (context.selected === value) classes.push(styles['active'], 'active');
 	if (disabled) classes.push(styles['disabled'], 'disabled');
-
+	
 	return(<li {...props} onClick={handleClick} className={classes.join(' ')}>{children}</li>);
 };
 

package/src/Select/Select.tsx

@@ -6,7 +6,8 @@ import {
 	useRef,
 	ChangeEvent,
 	useImperativeHandle,
-	FunctionComponentElement
+	FunctionComponentElement,
+	ReactNode
 } from "react";
 import Element,{
 	IElement
@@ -24,14 +25,14 @@ export const Context = createContext({
 	setTitle: (title: IOption['children']) => {},
 });
 
-export type TOptionElement = FunctionComponentElement<IOption> | FunctionComponentElement<IOption>[];
+export type TOptionElement = FunctionComponentElement<IOption> | FunctionComponentElement<IOption>[] | ReactNode;
 
 export interface ISelect extends Omit<IElement, 'children'> {
 	children?: TOptionElement | FunctionComponentElement<IOptgroup> | FunctionComponentElement<IOptgroup>[];
 	onChangeSelect?: (value: string) => void;
 };
 
-const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChangeSelect, value, ...props}, ref) => {
+const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChangeSelect, value, formValue, ...props}, ref) => {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const inputRef = useRef<HTMLInputElement>(null);
 	const emptyValue = useRef(false);
@@ -61,12 +62,13 @@ const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChangeSelect,
 		inputRef.current!.dispatchEvent(event);
 	};
 
-	const setSelect = (value: string) => {
+	const setSelect = (val: string) => {
 		if (typeof onChangeSelect === 'function') {
-			onChangeSelect(value);
+			onChangeSelect(val);
+		}
+		if (typeof value === 'undefined') {
+			setSelected(val);
 		}
-		
-		setSelected(value);
 		close();
 	};
 
@@ -86,11 +88,10 @@ const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChangeSelect,
 		if (!selected) return;
 		triggerNativeEvent(selected);
 	}, [selected]);
-
+	
 	useEffect(() => {
-		if (typeof value === 'undefined') return;
-		setSelected(String(value));
-	}, [value]);
+		setSelected(String(value ?? formValue));
+	}, [value, formValue]);
 
 	useEffect(() => {
 		const element = containerRef.current;

package/src/Select/style.module.css

@@ -35,25 +35,32 @@
 	position: absolute;
 	display: flex;
 	flex-direction: column;
-	width: 100%;
+	min-width: 100%;
 	max-height: 40vh;
-    max-height: 40dvh;
+	max-height: 40dvh;
 	top: calc(100% - 1px);
-	left: -1px;
+	right: -1px;
 	margin: 0;
 	padding: 0;
 	list-style-type: none;
 	background-color: #FFFFFF;
 	box-shadow: 0px 4px 5px 0px rgb(0 0 0 / 10%);
-    border: 1px solid #CCCCCC;
+	border: 1px solid #CCCCCC;
 	overflow: auto;
-    border-top: 0;
 	opacity: 0;
 	visibility: hidden;
 	transform: translateY(-10%);
 	transition: transform 0.3s ease-in-out, opacity 0.3s, visibility 0.3s;
 }
 
+.container.left > .select-list {
+	left: -1px;
+}
+
+.container.right > .select-list {
+	right: -1px;
+}
+
 .container.hidden > .select-list {
 	display: none;
 }

package/src/Spinner/style.module.css

@@ -2,6 +2,9 @@
 
 .spinner {
 	--color-rgb: 94, 190, 214;
+	display: flex;
+    justify-content: center;
+    align-items: center;
 	width: 100%;
     height: 100%;
     max-width: 100px;
@@ -9,6 +12,7 @@
     aspect-ratio: 1/1;
 	padding-left: calc(-0.5rem / 2);
 	padding-right: calc(-0.5rem / 2);
+	overflow: hidden;
 }
 
 .spinner::before {

package/src/TextArea/TextArea.tsx

@@ -14,7 +14,7 @@ interface ITextArea extends IElement<HTMLTextAreaElement> {
 	onChangeText?: (text: string) => void;
 }
 
-const TextArea = forwardRef<HTMLTextAreaElement, ITextArea>(({onChange, onInput, onChangeText, ...props}, ref) => {
+const TextArea = forwardRef<HTMLTextAreaElement, ITextArea>(({onChange, onInput, onChangeText, formValue, ...props}, ref) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const [currentValue, setCurrentValue] = useState(props.value);
 
@@ -44,8 +44,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, ITextArea>(({onChange, onInput,
 	},[currentValue]);
 
 	useEffect(() => {
-		setCurrentValue(props.value);
-	}, [props.value]);
+		setCurrentValue(props.value ?? formValue);
+	}, [props.value, formValue]);
 
 	useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);