react-artasys-ui 0.1.5 → 0.1.7

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

@@ -10,5 +10,5 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
     afterElement?: React.ReactElement;
     hiddenContainer?: boolean;
 }
-declare const Element: ({ children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, hiddenContainer, ...props }: IElement) => JSX.Element;
+declare const Element: ({ children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, ...props }: IElement) => JSX.Element;
 export default Element;

package/lib/Select/Select.d.ts

@@ -3,12 +3,14 @@ import { IElement } from "../Form/Element";
 import type { IOption } from "./Option";
 export declare const Context: import("react").Context<{
     selected: string;
+    emptyValue: import("react").MutableRefObject<boolean>;
     setSelect: (value: string) => void;
+    setSelected: (value: string) => void;
     setTitle: (title: string) => void;
 }>;
-export interface ISelect extends Omit<IElement, 'children' | 'onChange'> {
+export interface ISelect extends Omit<IElement, 'children'> {
     children?: React.FunctionComponentElement<IOption>[];
-    onChange?: (value: string) => void;
+    onChangeSelect?: (value: string) => void;
 }
 declare const Select: import("react").ForwardRefExoticComponent<ISelect & import("react").RefAttributes<HTMLInputElement>>;
 export default Select;

package/package.json

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

package/src/Form/Element/Element.tsx

@@ -19,7 +19,7 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
 	hiddenContainer?: boolean;
 }
 
-const Element = ({children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, hiddenContainer, ...props}: IElement) => {
+const Element = ({children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, ...props}: IElement) => {
 	const [currentError, setCurrentError] = useState('');
 
 	useEffect(() => {
@@ -30,7 +30,7 @@ const Element = ({children, beforeElement, afterElement, error, placeholder, dis
 
 	classes.push(styles['container']);
 	if (currentError) classes.push(styles['error']);
-	if (disabled) classes.push(styles['disabled']);
+	if (props.disabled) classes.push(styles['disabled']);
 	if (hiddenContainer) classes.push(styles['hidden']);
 	if (classNameContainer) classes.push(classNameContainer);
 

package/src/Input/Input.tsx

@@ -27,6 +27,7 @@ const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChange
 	};
 
 	const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+		if (props.disabled) return;
 		if (typeof onInput === 'function') {
 			onInput(e);
 		}

package/src/Select/Option.tsx

@@ -24,8 +24,12 @@ const Option = ({children, value, onClick, ...props}: IOption) => {
 	};
 
 	useEffect(() => {
-		if (value === context.selected && children) {
+		if (children && (value === context.selected || !context.emptyValue.current)) {
 			context.setTitle(children?.toString());
+			if (!context.emptyValue.current && value) {
+				context.setSelected(value);
+			}
+			context.emptyValue.current = true;
 		}
 	}, [context.selected]);
 

package/src/Select/Select.tsx

@@ -3,7 +3,9 @@ import {
 	createContext,
 	useState,
 	useEffect,
-	useRef
+	useRef,
+	ChangeEvent,
+	useImperativeHandle
 } from "react";
 import Element,{
 	IElement
@@ -13,54 +15,114 @@ import styles from "./style.module.css";
 
 export const Context = createContext({
 	selected: '',
+	emptyValue: {current:{}} as React.MutableRefObject<boolean>,
 	setSelect: (value: string) => {},
-	setTitle: (title: string) => {}
+	setSelected: (value: string) => {},
+	setTitle: (title: string) => {},
 });
 
-export interface ISelect extends Omit<IElement, 'children' | 'onChange'> {
+export interface ISelect extends Omit<IElement, 'children'> {
 	children?: React.FunctionComponentElement<IOption>[];
-	onChange?: (value: string) => void;
+	onChangeSelect?: (value: string) => void;
 };
 
-const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChange, value, ...props}, ref) => {
+const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChangeSelect, value, ...props}, ref) => {
 	const containerRef = useRef<HTMLDivElement>(null);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const emptyValue = useRef(false);
 
+	const [isOpen, setOpen] = useState(false);
 	const [selected, setSelected] = useState('');
 	const [title, setTitle] = useState<string>();
 
 	const open = () => {
-		const element = containerRef.current;
-		element?.classList.add(styles['opened']);
-		element?.focus();
+		if (props.disabled) return;
+		setOpen(true);
 	};
 
 	const close = () => {
-		const element = containerRef.current;
-		element?.classList.remove(styles['opened']);
+		setOpen(false);
+	};
+
+	const handleClick = () => {
+		isOpen ? close() : open();
+	};
+
+	const triggerNativeEvent = (value: string) => {
+		const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+		nativeInputValueSetter?.call(inputRef.current, value);
+
+		const event = new Event('input', { bubbles: true});
+		inputRef.current!.dispatchEvent(event);
 	};
 
 	const setSelect = (value: string) => {
-		if (typeof onChange === 'function') {
-			onChange(value);
+		if (typeof onChangeSelect === 'function') {
+			onChangeSelect(value);
 		}
+		
 		setSelected(value);
 		close();
 	};
 
+	const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+		if (props.disabled) return;
+		if (typeof props.onInput === 'function') {
+			props.onInput(e);
+		}
+
+		if (typeof props.onChange === 'function') {
+			props.onChange(e);
+		}
+		setSelected(e.target.value);
+	};
+
+	useEffect(() => {
+		if (!selected) return;
+		triggerNativeEvent(selected);
+	}, [selected]);
+
 	useEffect(() => {
 		if (typeof value === 'undefined') return;
 		setSelected(String(value));
 	}, [value]);
+
+	useEffect(() => {
+		const element = containerRef.current;
+		const classList = element!.classList;
+		if (isOpen) {
+			classList.remove(styles['hidden']);
+			requestAnimationFrame(() => {
+				classList.add(styles['opened']);
+				element?.focus();
+			});
+		}else{
+			if (classList.contains(styles['opened'])) {
+				element!.ontransitionend = () => {
+					classList.add(styles['hidden']);
+					element!.ontransitionend = null;
+				};
+			}
+			classList.remove(styles['opened']);
+		}
+	}, [isOpen]);
+
+	useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
+
+	const classes = [''];
+	classes.push(styles['container'], styles['hidden']);
 	
-	return(<Element {...props} styleContainer={{zIndex: 1}}>
+	return(<Element {...props} classNameContainer={styles['container-element']}>
 		{ (props) => <Context.Provider value={{
 			selected,
+			emptyValue: emptyValue,
 			setSelect,
+			setSelected,
 			setTitle
 		}}>
-			<input {...props} type="hidden" value={selected} ref={ref}/>
-			<div className={styles['container']} ref={containerRef} tabIndex={1} onBlur={close}>
-				<div className={styles['select']} onClick={open}>
+			<input {...props} type="hidden" value={selected} onInput={handleInput} ref={inputRef}/>
+			<div className={classes.join(' ')} ref={containerRef} tabIndex={1} onBlur={close}>
+				<div className={styles['select']} onClick={handleClick}>
 					<span className={styles['title']}>{title}</span>
 				</div>
 				<ul className={styles['select-list']}>

package/src/Select/style.module.css

@@ -1,5 +1,9 @@
 /* Select */
 
+.container-element {
+	z-index: 1;
+}
+
 .container {
 	position: relative;
 	display: flex;
@@ -13,7 +17,8 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	min-height: 20px;
+	min-height: 45px;
+	box-sizing: border-box;
 	padding: 10px;
 }
 
@@ -28,6 +33,10 @@
 	transition: rotate 0.3s;
 }
 
+.container-element:has(input[type="hidden"]:disabled) .select::after {
+	border-top-color: #CCCCCC;
+}
+
 .container.opened > .select::after {
 	rotate: 180deg;
 }
@@ -37,6 +46,8 @@
 	display: flex;
 	flex-direction: column;
 	width: 100%;
+	max-height: 40vh;
+    max-height: 40dvh;
 	top: calc(100% - 1px);
 	left: -1px;
 	margin: 0;
@@ -44,8 +55,8 @@
 	list-style-type: none;
 	background-color: #FFFFFF;
 	box-shadow: 0px 4px 5px 0px rgb(0 0 0 / 10%);
-	box-shadow: 0px 4px 5px 0px rgb(0 0 0 / 10%);
     border: 1px solid #CCCCCC;
+	overflow: auto;
     border-top: 0;
 	opacity: 0;
 	visibility: hidden;
@@ -53,6 +64,10 @@
 	transition: transform 0.3s ease-in-out, opacity 0.3s, visibility 0.3s;
 }
 
+.container.hidden > .select-list {
+	display: none;
+}
+
 .container.opened > .select-list {
 	opacity: 1;
 	transform: translateY(0);