tw-react-components 0.0.148 → 0.0.150

package/index.esm.js

@@ -16,7 +16,6 @@ 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, Link } from 'react-router-dom';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -1569,7 +1568,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                                     : undefined, children: [column.header, sorting &&
                                         !column.noSorting &&
                                         (((_b = sorting.sorting) === null || _b === void 0 ? void 0 : _b.field) !== column.field ? (jsx(ArrowUpDownIcon, { className: "absolute top-1/2 float-right ml-1 hidden h-4 w-4 -translate-y-1/2 group-hover:inline-block" })) : ((_c = sorting.sorting) === null || _c === void 0 ? void 0 : _c.direction) === 'asc' ? (jsx(SortAscIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })) : (jsx(SortDescIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })))] }, columnIndex));
-                        }), actions.filter((action) => !action.hide).length > 0 && (jsx(Table.HeadCell, { align: "center", children: "Actions" }))] }) }), jsxs(Table.Body, { className: "relative", children: [isLoading && (jsx(Table.Row, { children: jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
+                        }), actions.filter((action) => rows.some((item) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })).length > 0 && jsx(Table.HeadCell, { align: "center", children: "Actions" })] }) }), jsxs(Table.Body, { className: "relative", children: [isLoading && (jsx(Table.Row, { children: jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
                                 absolute: rows.length,
                             }), colSpan: columnsLength, children: jsx(Spinner, { className: "bg-white/50 py-4 dark:bg-slate-700/50" }) }) })), !isLoading && !rows.length && (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: columnsLength, children: jsx(Flex, { className: "text-slate-500", justify: "center", children: noDataMessage !== null && noDataMessage !== void 0 ? noDataMessage : 'No data' }) }) })), rows.map((item, rowIndex) => [
                         jsxs(Table.Row, { className: cn({
@@ -1577,7 +1576,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                             }, rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(item, rowIndex)), onClick: handleRowClicked(item, rowIndex), children: [rowExtraContent && (jsx(Table.Cell, { className: "w-min", align: "center", children: jsx(ExpandButton, { folded: !expandedRows[rowExtraContent.idGetter(item)], foldComponent: MinusIcon, unfoldComponent: PlusIcon, onClick: handleExpandRow(rowExtraContent.idGetter(item)) }) })), _columns.map((column, columnIndex) => {
                                     var _a, _b, _c;
                                     return (jsx(Table.Cell, { className: column.className, align: (_a = column.align) !== null && _a !== void 0 ? _a : 'left', children: (_c = (_b = column.render) === null || _b === void 0 ? void 0 : _b.call(column, item, rowIndex)) !== null && _c !== void 0 ? _c : defaultRender(item, column.field) }, columnIndex));
-                                }), actions.filter((action) => !action.hide).length > 0 && (jsx(Table.Cell, { className: "py-3", children: jsx(Flex, { align: "center", justify: "center", children: actions
+                                }), actions.filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); }).length > 0 && (jsx(Table.Cell, { className: "py-3", children: jsx(Flex, { align: "center", justify: "center", children: actions
                                             .filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })
                                             .map((action, actionIndex) => {
                                             var _a;
@@ -2039,14 +2038,14 @@ 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 } = _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;
     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 }, 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, 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
                                                 .filter((subItem) => !subItem.hidden)
-                                                .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 })] })] }));
+                                                .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 })] })] }));
 };
-const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
+const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, Link, useLocation }) => {
     const location = useLocation();
     const { open } = useSidebar();
     const currentPath = useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.148",
+  "version": "0.0.150",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
+  "type": "module",
   "author": {
     "name": "Nasreddine Bac Ali",
     "email": "nasreddine.bacali95@gmail.com",
@@ -18,10 +19,8 @@
   },
   "exports": {
     ".": {
-      "module": "./index.esm.js",
-      "types": "./index.esm.d.ts",
-      "import": "./index.cjs.mjs",
-      "default": "./index.cjs.js"
+      "import": "./index.esm.js",
+      "types": "./index.esm.d.ts"
     },
     "./css": {
       "default": "./index.css"
@@ -32,6 +31,6 @@
     "./package.json": "./package.json"
   },
   "module": "./index.esm.js",
-  "main": "./index.cjs.js",
+  "main": "./index.esm.js",
   "types": "./index.esm.d.ts"
 }

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

@@ -1,5 +1,6 @@
 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 = {
@@ -27,6 +28,8 @@ type Props = {
     className?: string;
     sidebarProps: SidebarProps;
     navbarProps?: NavbarProps;
+    Link: FC<LinkProps>;
+    useLocation: typeof useLocation;
 };
 export declare const Layout: FC<PropsWithChildren<Props>>;
 export {};

package/index.cjs.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";

package/index.cjs.default.js

@@ -1 +0,0 @@
-exports._default = require('./index.cjs.js').default;