diff --git a/package.json b/package.json index 3bc56a7..ba72066 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codenteq/interfeys", - "version": "0.3.8", + "version": "0.3.9", "description": "Codenteq Interfeys Design System", "main": "dist/esm/index.js", "module": "dist/esm/index.js", diff --git a/src/drawer/Drawer.tsx b/src/drawer/Drawer.tsx index 9167068..8f960ee 100644 --- a/src/drawer/Drawer.tsx +++ b/src/drawer/Drawer.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; interface IDrawerProps { @@ -8,6 +8,20 @@ interface IDrawerProps { } export default function Modal({ isOpen, onClose, children }: IDrawerProps) { + useEffect(() => { + const handleKeyPress = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + onClose(); + } + }; + + window.addEventListener('keydown', handleKeyPress); + + return () => { + window.removeEventListener('keydown', handleKeyPress); + }; + }, []); + return ( {isOpen && ( @@ -27,7 +41,7 @@ export default function Modal({ isOpen, onClose, children }: IDrawerProps) { damping: 30, delay: 0.1, }} - className="bg-white w-80 h-full shadow-xl overflow-y-auto"> + className="bg-white dark:bg-black border-l border-brand w-80 h-full shadow-xl overflow-y-auto">
{children}
{ type: InputType; @@ -69,9 +71,11 @@ const Input = forwardRef( { required?: boolean; disabled?: boolean; messages?: string | string[]; + label?: string; } const Select = forwardRef( @@ -25,11 +27,13 @@ const Select = forwardRef( required, disabled, messages = [], + label, ...props }: ISelectProps, ref: Ref, ) => (
+ {label && }