react-artasys-ui 0.1.8 → 0.1.9

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.9",
   "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/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,7 +25,7 @@ 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>[];
@@ -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();
 	};
 

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 {