uibee 2.4.10 → 2.4.11

package/dist/src/components/navbar/navbarDropdown.js

@@ -4,12 +4,10 @@ import { ChevronDown } from 'lucide-react';
 import React, { useRef, useState } from 'react';
 export default function NavDropdown({ children, title, className }) {
     const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
+    const [isDesktopOpen, setIsDesktopOpen] = useState(false);
     const navItemRef = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'relative group hidden 800px:block', children: _jsxs("div", { className: 'outline-none', tabIndex: 0, ref: navItemRef, children: [_jsxs("div", { className: `list-none no-underline text-base leading-4 p-3 font-bold cursor-pointer flex flex-row items-center 
-                        transition-colors`, children: [title, _jsx(ChevronDown, { className: 'w-6 h-6 stroke-login ml-1 text-2xl transition-transform duration-300 ease-in-out' })] }), _jsx("div", { className: `absolute pt-2 -ml-4 -translate-y-4 opacity-0 pointer-events-none
-                        transition-all duration-200 ease-in-out z-10
-                        group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0
-                        group-focus-within:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0`, children: _jsx("ul", { className: `p-3 px-6 pb-4 rounded-[0.4rem] shadow-[0_0.1rem_0.5rem_rgba(3,3,3,0.5)] bg-login-700/98 ${className || ''}`, onClick: () => navItemRef.current?.blur(), children: React.Children.map(children, (child, index) => (_jsx("div", { onClick: () => navItemRef.current?.blur(), className: 'group dropdown', children: child }, index))) }) })] }) }), _jsxs("div", { className: 'block 800px:hidden!', children: [_jsx("button", { className: 'bg-none border-none cursor-pointer w-full text-left', onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'relative hidden 800px:block', children: _jsxs("div", { className: 'outline-none', tabIndex: 0, ref: navItemRef, onMouseEnter: () => setIsDesktopOpen(true), onMouseLeave: () => setIsDesktopOpen(false), onFocus: () => setIsDesktopOpen(true), onBlur: () => setIsDesktopOpen(false), children: [_jsxs("div", { className: `list-none no-underline text-base leading-4 p-3 font-bold cursor-pointer flex flex-row items-center 
+                        transition-colors`, children: [title, _jsx(ChevronDown, { className: 'w-6 h-6 stroke-login ml-1 text-2xl transition-transform duration-300 ease-in-out' })] }), _jsx("div", { className: `absolute pt-2 -ml-4 transition-all duration-200 ease-in-out z-10 ${isDesktopOpen ? 'opacity-100 pointer-events-auto translate-y-0' : 'opacity-0 pointer-events-none -translate-y-4'}`, children: _jsx("ul", { className: `p-3 px-6 pb-4 rounded-[0.4rem] shadow-[0_0.1rem_0.5rem_rgba(3,3,3,0.5)] bg-login-700/98 ${className || ''}`, onClick: () => setIsDesktopOpen(false), children: React.Children.map(children, (child, index) => (_jsx("div", { onClick: () => setIsDesktopOpen(false), className: 'group dropdown', children: child }, index))) }) })] }) }), _jsxs("div", { className: 'block 800px:hidden!', children: [_jsx("button", { className: 'bg-none border-none cursor-pointer w-full text-left', onClick: (e) => {
                             e.stopPropagation();
                             setIsMobileDropdownOpen(!isMobileDropdownOpen);
                         }, children: _jsxs("li", { className: `list-none no-underline text-2xl leading-6 overflow-hidden

package/dist/src/globals.css

@@ -212,6 +212,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -1075,44 +1078,6 @@
     --tw-outline-style: none;
     outline-style: none;
   }
-  .group-focus-within\:pointer-events-auto {
-    &:is(:where(.group):focus-within *) {
-      pointer-events: auto;
-    }
-  }
-  .group-focus-within\:translate-y-0 {
-    &:is(:where(.group):focus-within *) {
-      --tw-translate-y: calc(var(--spacing) * 0);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
-  .group-focus-within\:opacity-100 {
-    &:is(:where(.group):focus-within *) {
-      opacity: 100%;
-    }
-  }
-  .group-hover\:pointer-events-auto {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        pointer-events: auto;
-      }
-    }
-  }
-  .group-hover\:translate-y-0 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        --tw-translate-y: calc(var(--spacing) * 0);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-  }
-  .group-hover\:opacity-100 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
-    }
-  }
   .group-\[\.dropdown\]\:h-auto {
     &:is(:where(.group):is(.dropdown) *) {
       height: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.4.10",
+  "version": "2.4.11",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/navbar/navbarDropdown.tsx

@@ -11,33 +11,38 @@ export type NavDropdownProps = {
 
 export default function NavDropdown({ children, title, className }: NavDropdownProps) {
     const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false)
+    const [isDesktopOpen, setIsDesktopOpen] = useState(false)
     const navItemRef = useRef<HTMLDivElement>(null)
 
     return (
         <>
             {/* Desktop Dropdown */}
-            <div className={'relative group hidden 800px:block'}>
-                <div className='outline-none' tabIndex={0} ref={navItemRef}>
+            <div className={'relative hidden 800px:block'}>
+                <div className='outline-none' tabIndex={0} ref={navItemRef}
+                    onMouseEnter={() => setIsDesktopOpen(true)}
+                    onMouseLeave={() => setIsDesktopOpen(false)}
+                    onFocus={() => setIsDesktopOpen(true)}
+                    onBlur={() => setIsDesktopOpen(false)}
+                >
                     <div className={`list-none no-underline text-base leading-4 p-3 font-bold cursor-pointer flex flex-row items-center 
                         transition-colors`
                     }>
                         {title}
                         <ChevronDown className={'w-6 h-6 stroke-login ml-1 text-2xl transition-transform duration-300 ease-in-out'} />
                     </div>
-                    <div className={`absolute pt-2 -ml-4 -translate-y-4 opacity-0 pointer-events-none
-                        transition-all duration-200 ease-in-out z-10
-                        group-hover:opacity-100 group-hover:pointer-events-auto group-hover:translate-y-0
-                        group-focus-within:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0`}
+                    <div className={`absolute pt-2 -ml-4 transition-all duration-200 ease-in-out z-10 ${
+                        isDesktopOpen ? 'opacity-100 pointer-events-auto translate-y-0' : 'opacity-0 pointer-events-none -translate-y-4'
+                    }`}
                     >
                         <ul
                             className={`p-3 px-6 pb-4 rounded-[0.4rem] shadow-[0_0.1rem_0.5rem_rgba(3,3,3,0.5)] bg-login-700/98 ${
                                 className || ''}`}
-                            onClick={() => navItemRef.current?.blur()}
+                            onClick={() => setIsDesktopOpen(false)}
                         >
                             {React.Children.map(children, (child, index) => (
                                 <div
                                     key={index}
-                                    onClick={() => navItemRef.current?.blur()}
+                                    onClick={() => setIsDesktopOpen(false)}
                                     className='group dropdown'
                                 >
                                     {child}