tw-react-components 0.0.155 → 0.0.157

package/index.esm.js

@@ -16,6 +16,7 @@ import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, close
 import { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useLocation, NavLink } from 'react-router';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -2038,29 +2039,24 @@ const Sidebar = Object.assign($Sidebar, {
 const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
 
 const Layout = (_a) => {
-    var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps, Link, useLocation } = _a;
+    var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps } = _a;
     return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsxs(Sidebar.Content, { className: "gap-0", children: [items
                                 .filter((item) => !item.hidden)
-                                .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath, Link: Link, useLocation: useLocation }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
+                                .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
                                                 .filter((subItem) => !subItem.hidden)
-                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath, Link: Link, useLocation: useLocation }, subItem), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
 };
-const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, Link, useLocation }) => {
+const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
     const location = useLocation();
     const { open } = useSidebar();
     const currentPath = useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);
     if (!(items === null || items === void 0 ? void 0 : items.filter((subItem) => !subItem.hidden).length)) {
-        return (jsx(Sidebar.MenuItem, { children: jsx(Sidebar.MenuButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, pathname), children: jsxs(Link, { to: pathname, className: "font-medium", children: [Icon && jsx(Icon, {}), title] }) }) }));
+        return (jsx(Sidebar.MenuItem, { children: jsx(NavLink, { to: pathname, className: "font-medium", children: ({ isActive }) => (jsxs(Sidebar.MenuButton, { isActive: isActive, children: [Icon && jsx(Icon, {}), title] })) }) }));
     }
-    const isOpen = open &&
-        (isLinkStartsWithPathname(currentPath, pathname) ||
-            items.some((subItem) => isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`)));
-    return (jsx(Collapsible, { asChild: true, open: isOpen, className: "group/collapsible", children: jsxs(Sidebar.MenuItem, { children: [jsx(Collapsible.Trigger, { asChild: true, children: jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: open
-                            ? currentPath === pathname &&
-                                !items.some((subItem) => isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`))
-                            : isLinkStartsWithPathname(currentPath, pathname), children: jsxs(Link, { to: pathname, className: "font-medium", children: [Icon && jsx(Icon, {}), title, jsx(ChevronRightIcon, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }) }), items && (jsx(Collapsible.Content, { children: jsx(Sidebar.MenuSub, { children: items
+    const isOpen = open && isLinkStartsWithPathname(currentPath, pathname);
+    return (jsx(Collapsible, { asChild: true, open: isOpen, className: "group/collapsible", children: jsxs(Sidebar.MenuItem, { children: [jsx(Collapsible.Trigger, { asChild: true, children: jsx(NavLink, { to: pathname, className: "font-medium", children: ({ isActive }) => (jsxs(Sidebar.MenuButton, { tooltip: title, isActive: !open && isActive, children: [Icon && jsx(Icon, {}), title, jsx(ChevronRightIcon, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] })) }) }), items && (jsx(Collapsible.Content, { children: jsx(Sidebar.MenuSub, { children: items
                             .filter((subItem) => !subItem.hidden)
-                            .map((subItem, index) => (jsx(Sidebar.MenuSubItem, { children: jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsx(Link, { to: `${pathname}/${subItem.pathname}`, children: subItem.title }) }) }, index))) }) }))] }) }));
+                            .map((subItem, index) => (jsx(Sidebar.MenuSubItem, { children: jsx(NavLink, { to: `${pathname}/${subItem.pathname}`, children: ({ isActive }) => (jsx(Sidebar.MenuSubButton, { isActive: isActive, children: subItem.title })) }) }, index))) }) }))] }) }));
 };
 function isLinkStartsWithPathname(link, pathname) {
     return pathname === '' ? link === pathname : link.startsWith(pathname);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.155",
+  "version": "0.0.157",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

package/src/components/Layout/index.d.ts

@@ -1,6 +1,5 @@
 import { LucideIcon } from 'lucide-react';
 import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
-import type { LinkProps, useLocation } from 'react-router-dom';
 import { NavbarProps } from '../Navbar';
 import { Sidebar } from '../Sidebar';
 export type SidebarItem = {
@@ -28,8 +27,6 @@ type Props = {
     className?: string;
     sidebarProps: SidebarProps;
     navbarProps?: NavbarProps;
-    Link: FC<LinkProps>;
-    useLocation: typeof useLocation;
 };
 export declare const Layout: FC<PropsWithChildren<Props>>;
 export {};