react-artasys-ui 0.1.14 → 0.1.15

package/lib/Dropdown/Items.d.ts

@@ -0,0 +1,6 @@
+import type { IDropdown } from "./Dropdown";
+interface IItems extends Pick<IDropdown, 'items' | 'disabled'> {
+    isOpen: boolean;
+}
+declare const Items: ({ items, isOpen, disabled }: IItems) => JSX.Element | null;
+export default Items;

package/package.json

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

package/src/Dropdown/Dropdown.tsx

@@ -4,7 +4,9 @@ import {
 	useState,
 	FunctionComponentElement,
 	useEffect,
-	createContext
+	createContext,
+	Children,
+	type FocusEvent
 } from "react";
 import styles from "./style.module.css";
 import Arrow from "../Components/Arrow";
@@ -12,6 +14,7 @@ import type {
 	IItem,
 	TChildrenAction
 } from "./Item";
+import Items from "./Items";
 
 export const Context = createContext<TChildrenAction>({
 	close: () => {}
@@ -47,15 +50,11 @@ const Dropdown = ({children, className, items, direction = 'down', position = 'r
 	};
 
 	const handleClick = () => {
-		if (!split) {
-			toggle();
-		}
-		if (hover) {
-			close();
-		}
+		if (hoverTimeout.current) return;
+		if (!split || hover) toggle();
 	};
 
-	const handleBlur = (e: React.FocusEvent) => {
+	const handleBlur = (e: FocusEvent) => {
 		if (e.currentTarget.contains(e.relatedTarget)) return;
 		close();
 	};
@@ -93,15 +92,11 @@ const Dropdown = ({children, className, items, direction = 'down', position = 'r
 	}}>
 		<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}>
+			<div onClick={handleClick} className={'ui-dropdown-block' + (isOpen ? ' ' + styles['hide'] : '')}>
 				{children}
 			</div>
 			{(position === 'right' && !disabled) && <Arrow className={styles['arrow']} onClick={handleClickArrow}/>}
-			{
-				(items && !disabled) && <ul className={styles['dropdown-list']}>
-					{items}
-				</ul>
-			}
+			<Items isOpen={isOpen} disabled={disabled} items={items}/>
 		</div>
 	</Context.Provider>);
 };

package/src/Dropdown/Items.tsx

@@ -0,0 +1,28 @@
+import styles from "./style.module.css";
+import type { IDropdown } from "./Dropdown";
+import { useEffect, useRef } from "react";
+
+interface IItems extends Pick<IDropdown, 'items' | 'disabled'> {
+	isOpen: boolean;
+};
+
+const Items = ({items, isOpen, disabled}: IItems) => {
+	const listRef = useRef<HTMLUListElement>(null);
+
+	useEffect(() => {
+		if (!listRef.current) return;
+		const screenWidth = window.innerWidth;
+		const element = listRef.current.getBoundingClientRect();
+		// console.log(element.left)
+		if (element.left <= 0) {
+			
+			// listRef.current.style.transform = 'translateX(' + Math.abs(element.left) + 'px)';
+		}
+	},[isOpen]);
+
+	if (disabled) return null;
+
+	return(<ul className={styles['dropdown-list']} children={items} ref={listRef}/>);
+};
+
+export default Items;

package/src/Dropdown/style.module.css

@@ -9,6 +9,23 @@
 	cursor: pointer;
 }
 
+.container > :global(.ui-dropdown-block) {
+	position: relative;
+}
+
+.container > :global(.ui-dropdown-block)::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.container > :global(.ui-dropdown-block).hide::after {
+	display: none;
+}
+
 .arrow {
 	padding: 5px;
 }