react-artasys-ui 0.1.6 → 0.1.8

package/lib/Components/Arrow/Arrow.d.ts

@@ -0,0 +1,6 @@
+import { AllHTMLAttributes } from "react";
+interface IArrow extends AllHTMLAttributes<HTMLDivElement> {
+    direction?: 'up' | 'down' | 'left' | 'right';
+}
+declare const Arrow: ({ className, direction, ...props }: IArrow) => JSX.Element;
+export default Arrow;

package/lib/Components/Arrow/index.d.ts

@@ -0,0 +1,2 @@
+import Arrow from "./Arrow";
+export default Arrow;

package/lib/Dropdown/Dropdown.d.ts

@@ -0,0 +1,13 @@
+import { AllHTMLAttributes, FunctionComponentElement } from "react";
+import type { IItem, TChildrenAction } from "./Item";
+export declare const Context: import("react").Context<TChildrenAction>;
+export interface IDropdown extends AllHTMLAttributes<HTMLDivElement> {
+    direction?: 'down' | 'up';
+    position?: 'left' | 'right';
+    split?: boolean;
+    hover?: boolean;
+    items?: FunctionComponentElement<IItem> | FunctionComponentElement<IItem>[];
+    disabled?: boolean;
+}
+declare const Dropdown: ({ children, className, items, direction, position, split, disabled, hover, ...props }: IDropdown) => JSX.Element;
+export default Dropdown;

package/lib/Dropdown/Item.d.ts

@@ -0,0 +1,11 @@
+import { AllHTMLAttributes, ReactElement } from "react";
+export type TChildrenAction = {
+    close: () => void;
+};
+export interface IItem extends Omit<AllHTMLAttributes<HTMLLIElement>, 'children'> {
+    children?: ((action: TChildrenAction) => ReactElement) | string | ReactElement;
+    autoClose?: boolean;
+    active?: boolean;
+}
+declare const Item: ({ children, onClick, autoClose, active, className, ...props }: IItem) => JSX.Element;
+export default Item;

package/lib/Dropdown/index.d.ts

@@ -0,0 +1,9 @@
+import { RefAttributes, ForwardRefExoticComponent, FC } from "react";
+import { IDropdown } from "./Dropdown";
+import Item, { IItem } from "./Item";
+interface StaticComponent extends ForwardRefExoticComponent<IDropdown & RefAttributes<HTMLInputElement>> {
+    Item: FC<IItem>;
+}
+declare const Dropdown: StaticComponent;
+export { Item as DropdownItem };
+export default Dropdown;

package/lib/Select/Optgroup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { TOptionElement } from "./Select";
+export interface IOptgroup {
+    children?: TOptionElement;
+    label?: string | React.ReactElement;
+}
+declare const Optgroup: ({ children, label }: IOptgroup) => JSX.Element;
+export default Optgroup;

package/lib/Select/Option.d.ts

@@ -1,7 +1,8 @@
 import { LiHTMLAttributes } from "react";
 export interface IOption extends LiHTMLAttributes<HTMLLIElement> {
     value?: string;
+    disabled?: boolean;
     children?: string | React.ReactElement;
 }
-declare const Option: ({ children, value, onClick, ...props }: IOption) => JSX.Element;
+declare const Option: ({ children, value, disabled, onClick, ...props }: IOption) => JSX.Element;
 export default Option;

package/lib/Select/Select.d.ts

@@ -1,16 +1,18 @@
-/// <reference types="react" />
+import { FunctionComponentElement } from "react";
 import { IElement } from "../Form/Element";
+import type { IOptgroup } from "./Optgroup";
 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;
+    setTitle: (title: IOption['children']) => void;
 }>;
-export interface ISelect extends Omit<IElement, 'children' | 'onChange'> {
-    children?: React.FunctionComponentElement<IOption>[];
-    onChange?: (value: string) => void;
+export type TOptionElement = FunctionComponentElement<IOption> | FunctionComponentElement<IOption>[];
+export interface ISelect extends Omit<IElement, 'children'> {
+    children?: TOptionElement | FunctionComponentElement<IOptgroup> | FunctionComponentElement<IOptgroup>[];
+    onChangeSelect?: (value: string) => void;
 }
 declare const Select: import("react").ForwardRefExoticComponent<ISelect & import("react").RefAttributes<HTMLInputElement>>;
 export default Select;

package/lib/Select/index.d.ts

@@ -1,9 +1,11 @@
 import { ForwardRefExoticComponent, FC, RefAttributes } from "react";
 import { ISelect } from "./Select";
 import Option, { IOption } from "./Option";
+import Optgroup, { IOptgroup } from "./Optgroup";
 interface StaticComponent extends ForwardRefExoticComponent<ISelect & RefAttributes<HTMLInputElement>> {
     Option: FC<IOption>;
+    Optgroup: FC<IOptgroup>;
 }
 declare const Select: StaticComponent;
-export { Option as SelectOption };
+export { Option as SelectOption, Optgroup as SelectOptgroup };
 export default Select;

package/lib/index.d.ts

@@ -8,8 +8,9 @@ import Button from "./Button";
 import UploadImages, { IUploadImages, TImageData, IImage } from "./UploadImages";
 import Checkbox from "./Checkbox";
 import Progress from "./Progress";
-import Select, { SelectOption } from "./Select";
+import Select, { SelectOption, SelectOptgroup } from "./Select";
+import Dropdown, { DropdownItem } from "./Dropdown";
 declare const UI: {};
-export { Form, FormElement, Element, useForm, Input, TextArea, Spinner, File, Button, UploadImages, Checkbox, Progress, Select, SelectOption };
+export { Form, FormElement, Element, useForm, Input, TextArea, Spinner, File, Button, UploadImages, Checkbox, Progress, Select, SelectOption, SelectOptgroup, Dropdown, DropdownItem };
 export type { TFileData, TFileMime, IUploadImages, IImage, TImageData, IElement };
 export default UI;

package/package.json

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

package/src/Components/Arrow/Arrow.tsx

@@ -0,0 +1,18 @@
+import { AllHTMLAttributes } from "react";
+import styles from "./style.module.css";
+
+interface IArrow extends AllHTMLAttributes<HTMLDivElement> {
+	direction?: 'up' | 'down' | 'left' | 'right';
+};
+
+const Arrow = ({className, direction = 'down', ...props}: IArrow) => {
+
+	const classes = ['ui-component-arrow'];
+	classes.push(styles['container']);
+	if (direction) classes.push(styles[direction]);
+	if (className) classes.push(className);
+
+	return(<div {...props} className={classes.join(' ')}/>);
+};
+
+export default Arrow;

package/src/Components/Arrow/index.tsx

@@ -0,0 +1,3 @@
+import Arrow from "./Arrow";
+
+export default Arrow;

package/src/Components/Arrow/style.module.css

@@ -0,0 +1,40 @@
+/* Arrow Component */
+
+.container {
+	--ui-arrow-size: 10px;
+	--ui-arrow-color: #5EBED6;
+	--ui-arrow-max: var(--ui-arrow-size) solid var(--ui-arrow-color);
+	--ui-arrow-min: calc(var(--ui-arrow-size) / 2) solid transparent;
+}
+
+.container::after {
+	content: "";
+	display: block;
+	width: 0;
+	height: 0;
+	transition: rotate 0.1s;
+}
+
+.container.down::after {
+	border-left: var(--ui-arrow-min);
+	border-right: var(--ui-arrow-min);
+	border-top: var(--ui-arrow-max);
+}
+
+.container.up::after {
+	border-left: var(--ui-arrow-min);
+	border-right: var(--ui-arrow-min);
+	border-bottom: var(--ui-arrow-max);
+}
+
+.container.left::after {
+	border-top: var(--ui-arrow-min);
+	border-right: var(--ui-arrow-max);
+	border-bottom: var(--ui-arrow-min);
+}
+
+.container.right::after {
+	border-top: var(--ui-arrow-min);
+	border-left: var(--ui-arrow-max);
+	border-bottom: var(--ui-arrow-min);
+}

package/src/Dropdown/Dropdown.tsx

@@ -0,0 +1,102 @@
+import {
+	AllHTMLAttributes,
+	useRef,
+	useState,
+	FunctionComponentElement,
+	useEffect,
+	createContext
+} from "react";
+import styles from "./style.module.css";
+import Arrow from "../Components/Arrow";
+import type {
+	IItem,
+	TChildrenAction
+} from "./Item";
+
+export const Context = createContext<TChildrenAction>({
+	close: () => {}
+});
+
+export interface IDropdown extends AllHTMLAttributes<HTMLDivElement> {
+	direction?: 'down' | 'up';
+	position?: 'left' | 'right';
+	split?: boolean;
+	hover?: boolean;
+	items?: FunctionComponentElement<IItem> | FunctionComponentElement<IItem>[];
+	disabled?: boolean;
+};
+
+const Dropdown = ({children, className, items, direction = 'down', position = 'right', split = false, disabled, hover = false, ...props}: IDropdown) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [isOpen, setOpen] = useState(false);
+
+	const close = () => {
+		setOpen(false);
+	};
+
+	const toggle = () => {
+		setOpen((isOpen) => {
+			if (disabled) return false;
+			return !isOpen;
+		});
+	};
+
+	const handleClickArrow = () => {
+		toggle();
+	};
+
+	const handleClick = () => {
+		if (!split) {
+			toggle();
+		}
+		if (hover) {
+			close();
+		}
+	};
+
+	const handleBlur = (e: React.FocusEvent) => {
+		if (e.currentTarget.contains(e.relatedTarget)) return;
+		close();
+	};
+
+	const handleMouseEnter = () => {
+		if (!hover || isOpen) return;
+		toggle();
+	};
+
+	useEffect(() => {
+		const element = containerRef.current;
+		const classList = element?.classList;
+		if (isOpen) {
+			classList?.add(styles['opened']);
+			element?.focus();
+		}else{
+			classList?.remove(styles['opened']);
+		}
+	}, [isOpen]);
+
+	const classes = ['ui-dropdown'];
+	classes.push(styles['container']);
+	if (className) classes.push(className);
+	if (direction) classes.push(styles[direction]);
+	if (position) classes.push(styles[position]);
+
+	return(<Context.Provider value={{
+		close
+	}}>
+		<div {...props} className={classes.join(' ')} ref={containerRef} onMouseEnter={handleMouseEnter} tabIndex={1} onBlur={handleBlur}>
+			{(position === 'left' && !disabled) && <Arrow className={styles['arrow']} onClick={handleClickArrow}/>}
+			<div onClick={handleClick}>
+				{children}
+			</div>
+			{(position === 'right' && !disabled) && <Arrow className={styles['arrow']} onClick={handleClickArrow}/>}
+			{
+				(items && !disabled) && <ul className={styles['dropdown-list']}>
+					{items}
+				</ul>
+			}
+		</div>
+	</Context.Provider>);
+};
+
+export default Dropdown;

package/src/Dropdown/Item.tsx

@@ -0,0 +1,42 @@
+import {
+	useContext,
+	AllHTMLAttributes,
+	ReactElement,
+	MouseEvent
+} from "react";
+import styles from "./style.module.css";
+import { Context } from "./Dropdown";
+
+export type TChildrenAction = {
+	close: () => void;
+};
+
+export interface IItem extends Omit<AllHTMLAttributes<HTMLLIElement>, 'children'> {
+	children?: ((action: TChildrenAction) => ReactElement) | string | ReactElement;
+	autoClose?: boolean;
+	active?: boolean;
+};
+
+const Item = ({children, onClick, autoClose = true, active, className, ...props}: IItem) => {
+	const context = useContext(Context);
+
+	const handleClick = (e: MouseEvent<HTMLLIElement>) => {
+		if (typeof onClick === 'function') {
+			onClick(e);
+		}
+		if (autoClose) {
+			context.close();
+		}
+	};
+
+	const classes = ['ui-dropdown-item'];
+	classes.push(styles['item']);
+	if (active) classes.push(styles['active'], 'active');
+	if (className) classes.push(className);
+
+	return(<li {...props} onClick={handleClick} className={classes.join(' ')}>
+		{typeof children === 'function' ? children(context) : children}
+	</li>);
+};
+
+export default Item;

package/src/Dropdown/index.tsx

@@ -0,0 +1,28 @@
+import {
+	forwardRef,
+	RefAttributes,
+	ForwardRefExoticComponent,
+	FC
+} from "react";
+import {
+	default as DropdownUI,
+	IDropdown
+} from "./Dropdown";
+import Item,{
+	IItem
+} from "./Item";
+
+interface StaticComponent extends ForwardRefExoticComponent<IDropdown & RefAttributes<HTMLInputElement>> {
+	Item: FC<IItem>;
+};
+
+const Dropdown: StaticComponent = {
+	...forwardRef<HTMLInputElement, IDropdown>(({...args}, ref): JSX.Element => <DropdownUI {...args}/>),
+	Item
+} as StaticComponent;
+
+export {
+	Item as DropdownItem
+};
+
+export default Dropdown;

package/src/Dropdown/style.module.css

@@ -0,0 +1,67 @@
+/* Dropdown */
+
+.container {
+	position: relative;
+	display: inline-flex;
+	flex-direction: row;
+	align-items: center;
+	outline: none;
+	cursor: pointer;
+}
+
+.arrow {
+	padding: 5px;
+}
+
+.dropdown-list {
+	position: absolute;
+	padding: 0;
+	margin: 0;
+	background-color: #FFFFFF;
+	border-radius: 2px;
+	list-style-type: none;
+	box-shadow: 0px 0px 9px 2px rgb(0 0 0 / 10%);
+	opacity: 0;
+	transform: translateY(-10%);
+	visibility: hidden;
+	z-index: 1;
+	transition: opacity 0.3s, visibility 0.3s, transform 0.3s ease;
+}
+
+.container.down > .dropdown-list {
+	top: 100%;
+}
+
+.container.up > .dropdown-list {
+	bottom: 100%;
+}
+
+.container.left > .dropdown-list {
+	left: 0;
+}
+
+.container.right > .dropdown-list {
+	right: 0;
+}
+
+.dropdown-list > li.item {
+	padding: 7px;
+	font-size: 18px;
+	font-weight: normal;
+	color: #1D1D1B;
+}
+
+.container.opened > .dropdown-list {
+	opacity: 1;
+	visibility: visible;
+	transform: translateY(0);
+}
+
+.container.opened > .arrow::after {
+	rotate: 180deg;
+}
+
+.dropdown-list > li.item:hover, .dropdown-list > li.item:has(:global(a.active)) {
+	background-color: #BED4DB;
+	border-radius: inherit;
+}

package/src/Select/Optgroup.tsx

@@ -0,0 +1,19 @@
+import styles from "./style.module.css";
+import type { TOptionElement } from "./Select";
+
+export interface IOptgroup {
+	children?: TOptionElement;
+	label?: string | React.ReactElement;
+};
+
+const Optgroup = ({children, label}: IOptgroup) => {
+
+	return(<li>
+		<ul className={styles['optgpoup']}>
+			{label && <li className={styles['label']}>{label}</li>}
+			{children}
+		</ul>
+	</li>);
+};
+
+export default Optgroup;

package/src/Select/Option.tsx

@@ -9,14 +9,15 @@ import styles from "./style.module.css";
 
 export interface IOption extends LiHTMLAttributes<HTMLLIElement> {
 	value?: string;
+	disabled?: boolean;
 	children?: string | React.ReactElement;
 };
 
-const Option = ({children, value, onClick, ...props}: IOption) => {
+const Option = ({children, value, disabled, onClick, ...props}: IOption) => {
 	const context = useContext(Context);
 
 	const handleClick = (e: MouseEvent<HTMLLIElement>) => {
-		if (typeof value === 'undefined') return;
+		if (typeof value === 'undefined' || disabled) return;
 		context.setSelect(value);
 		if (typeof onClick === 'function') {
 			onClick(e);
@@ -25,7 +26,7 @@ const Option = ({children, value, onClick, ...props}: IOption) => {
 
 	useEffect(() => {
 		if (children && (value === context.selected || !context.emptyValue.current)) {
-			context.setTitle(children?.toString());
+			context.setTitle(children);
 			if (!context.emptyValue.current && value) {
 				context.setSelected(value);
 			}
@@ -34,7 +35,9 @@ const Option = ({children, value, onClick, ...props}: IOption) => {
 	}, [context.selected]);
 
 	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

@@ -3,12 +3,17 @@ import {
 	createContext,
 	useState,
 	useEffect,
-	useRef
+	useRef,
+	ChangeEvent,
+	useImperativeHandle,
+	FunctionComponentElement
 } from "react";
 import Element,{
 	IElement
 } from "../Form/Element";
+import type { IOptgroup } from "./Optgroup";
 import type { IOption } from "./Option";
+import Arrow from "../Components/Arrow";
 import styles from "./style.module.css";
 
 export const Context = createContext({
@@ -16,21 +21,24 @@ export const Context = createContext({
 	emptyValue: {current:{}} as React.MutableRefObject<boolean>,
 	setSelect: (value: string) => {},
 	setSelected: (value: string) => {},
-	setTitle: (title: string) => {},
+	setTitle: (title: IOption['children']) => {},
 });
 
-export interface ISelect extends Omit<IElement, 'children' | 'onChange'> {
-	children?: React.FunctionComponentElement<IOption>[];
-	onChange?: (value: string) => void;
+export type TOptionElement = FunctionComponentElement<IOption> | FunctionComponentElement<IOption>[];
+
+export interface ISelect extends Omit<IElement, 'children'> {
+	children?: TOptionElement | FunctionComponentElement<IOptgroup> | FunctionComponentElement<IOptgroup>[];
+	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 [title, setTitle] = useState<IOption['children']>();
 
 	const open = () => {
 		if (props.disabled) return;
@@ -41,14 +49,44 @@ const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChange, value
 		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));
@@ -74,6 +112,8 @@ const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChange, value
 		}
 	}, [isOpen]);
 
+	useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
+
 	const classes = [''];
 	classes.push(styles['container'], styles['hidden']);
 	
@@ -85,10 +125,11 @@ const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChange, value
 			setSelected,
 			setTitle
 		}}>
-			<input {...props} type="hidden" value={selected} ref={ref}/>
+			<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={open}>
+				<div className={styles['select']} onClick={handleClick}>
 					<span className={styles['title']}>{title}</span>
+					<Arrow className={styles['arrow']}/>
 				</div>
 				<ul className={styles['select-list']}>
 					{children}

package/src/Select/index.tsx

@@ -11,17 +11,23 @@ import {
 import Option,{
 	IOption
 } from "./Option";
+import Optgroup,{
+	IOptgroup
+} from "./Optgroup";
 
 interface StaticComponent extends ForwardRefExoticComponent<ISelect & RefAttributes<HTMLInputElement>> {
 	Option: FC<IOption>;
+	Optgroup: FC<IOptgroup>;
 };
 
 const Select: StaticComponent = {
 	...forwardRef<HTMLInputElement, ISelect>(({...args}, ref): JSX.Element => <SelectUI {...args} ref={ref}/>),
-	Option
+	Option,
+	Optgroup
 } as StaticComponent;
 
 export {
-	Option as SelectOption
+	Option as SelectOption,
+	Optgroup as SelectOptgroup
 };
 export default Select;