react-artasys-ui 0.1.5 → 0.1.6

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,7 +3,9 @@ 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'> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-artasys-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "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

@@ -13,8 +13,10 @@ 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'> {
@@ -24,19 +26,19 @@ export interface ISelect extends Omit<IElement, 'children' | 'onChange'> {
 
 const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChange, value, ...props}, ref) => {
 	const containerRef = useRef<HTMLDivElement>(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 setSelect = (value: string) => {
@@ -51,15 +53,40 @@ const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChange, value
 		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]);
+
+	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={classes.join(' ')} ref={containerRef} tabIndex={1} onBlur={close}>
 				<div className={styles['select']} onClick={open}>
 					<span className={styles['title']}>{title}</span>
 				</div>

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);