@machinemetrics/mm-react-components 0.2.3-26 → 0.2.3-28

package/dist/mm-react-components.es.js

@@ -10340,6 +10340,32 @@ var Content$3 = DialogContent$1;
 var Title = DialogTitle$1;
 var Description = DialogDescription$1;
 var Close = DialogClose$1;
+const SheetBanner = React.forwardRef(
+  ({ variant, icon, text: text2, additionalText, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "sheet-banner",
+        className: cn$1(
+          "sheet-banner",
+          variant === "shared" ? "sheet-banner-shared" : "sheet-banner-company",
+          className
+        ),
+        ...props,
+        children: [
+          icon,
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sheet-banner-text", children: text2 }),
+          additionalText && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sheet-banner-text", children: "|" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sheet-banner-text", children: additionalText })
+          ] })
+        ]
+      }
+    );
+  }
+);
+SheetBanner.displayName = "SheetBanner";
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Root$9, { "data-slot": "sheet", ...props });
 }
@@ -10425,6 +10451,11 @@ function SheetContent({
   side = "right",
   showCloseButton = true,
   closeButtonPosition = "corner",
+  showBanner = false,
+  bannerVariant,
+  bannerIcon,
+  bannerText,
+  bannerAdditionalText,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SheetPortal, { children: [
@@ -10434,7 +10465,8 @@ function SheetContent({
       {
         "data-slot": "sheet-content",
         className: cn$1(
-          "data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 outline-none",
+          showBanner ? "gap-0" : "gap-4",
           side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
           side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
@@ -10443,12 +10475,24 @@ function SheetContent({
         ),
         ...props,
         children: [
+          showBanner && bannerVariant && bannerIcon && bannerText && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SheetBanner,
+            {
+              variant: bannerVariant,
+              icon: bannerIcon,
+              text: bannerText,
+              additionalText: bannerAdditionalText
+            }
+          ),
           children,
           showCloseButton && closeButtonPosition === "corner" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             Close,
             {
               "data-slot": "sheet-close",
-              className: "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none",
+              className: cn$1(
+                "absolute right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none",
+                showBanner ? "top-12" : "top-4"
+              ),
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "size-4" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Close" })
@@ -30336,7 +30380,8 @@ function TableBody({
   renderOrder,
   isDragging,
   activeColumnId,
-  skeletonRowCount = 5
+  skeletonRowCount = 5,
+  onRowClick
 }) {
   let tableContent;
   if (loading) {
@@ -30344,11 +30389,24 @@ function TableBody({
   } else if (rows?.length) {
     tableContent = rows.map((row) => {
       const visibleCells = getVisibleCellsInOrder(row, isDragging, renderOrder);
+      const handleRowClick = onRowClick ? (event) => {
+        const target = event.target;
+        if (!target) return;
+        const interactive = target.closest(
+          'a,button,input,select,textarea,label,[role=checkbox],[data-slot="table-action-trigger"]'
+        );
+        if (interactive) return;
+        onRowClick(row.original, row.index);
+      } : void 0;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "tr",
         {
           "data-state": row.getIsSelected() && "selected",
-          className: "border-b transition-colors hover:bg-[var(--accent)] data-[state=selected]:bg-muted",
+          className: cn$1(
+            "border-b transition-colors hover:bg-[var(--accent)] data-[state=selected]:bg-muted",
+            onRowClick && "cursor-pointer"
+          ),
+          onClick: handleRowClick,
           children: visibleCells.map(
             (cell) => renderTableCell(cell, isDragging, activeColumnId)
           )
@@ -30490,7 +30548,8 @@ function renderTableContent({
   handleDragOver,
   handleDragEnd,
   tableRef,
-  debug: debug2
+  debug: debug2,
+  onRowClick
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     DndContext,
@@ -30534,7 +30593,8 @@ function renderTableContent({
                 renderOrder,
                 isDragging,
                 activeColumnId,
-                skeletonRowCount
+                skeletonRowCount,
+                onRowClick
               }
             )
           ]
@@ -30576,7 +30636,8 @@ function DataTable({
     setGlobalFilter,
     handleResetColumns,
     onBatchAction: controllerOnBatchAction,
-    onExportComplete: controllerOnExportComplete
+    onExportComplete: controllerOnExportComplete,
+    onRowClick: controllerOnRowClick
   } = useTableController({
     columns,
     data,
@@ -30652,7 +30713,8 @@ function DataTable({
     handleDragOver,
     handleDragEnd,
     tableRef,
-    debug: debug2
+    debug: debug2,
+    onRowClick: controllerOnRowClick
   });
   const toolbarElement = /* @__PURE__ */ jsxRuntimeExports.jsx(
     DataTableToolbar,
@@ -45704,6 +45766,7 @@ export {
   SelectValue,
   Separator,
   Sheet,
+  SheetBanner,
   SheetClose,
   SheetCloseButton,
   SheetContent,