@tint-ui/data-table 0.3.5 → 0.3.6

package/adapters/boolean.js

@@ -16,7 +16,8 @@ const BooleanType = props => {
   const variant = value == null ? "iconNull" : value ? "iconTrue" : "iconFalse";
   const classes = useDataTableClasses();
   return /*#__PURE__*/React.createElement("span", {
-    className: classes.booleanCellType
+    className: classes.booleanCellType,
+    "data-row-click": "off"
   }, /*#__PURE__*/React.createElement(SvgThemeIcon, {
     className: classes[variant],
     icon: props[variant] || typeIcon[variant]

package/cjs/adapters/boolean.js

@@ -21,7 +21,8 @@ const BooleanType = props => {
   const variant = value == null ? "iconNull" : value ? "iconTrue" : "iconFalse";
   const classes = (0, _classes.useDataTableClasses)();
   return /*#__PURE__*/React.createElement("span", {
-    className: classes.booleanCellType
+    className: classes.booleanCellType,
+    "data-row-click": "off"
   }, /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
     className: classes[variant],
     icon: props[variant] || typeIcon[variant]

package/cjs/classes.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 exports.__esModule = true;
 exports.useDataTableClasses = exports.classes = void 0;

package/cjs/context.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 exports.__esModule = true;

package/cjs/filter-classes.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 exports.__esModule = true;
 exports.useDataTableFilterClasses = exports.filterClasses = void 0;

package/cjs/pagination-classes.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 exports.__esModule = true;
 exports.useDataTablePaginationClasses = exports.paginationClasses = void 0;

package/cjs/row-button-menu.js

@@ -18,7 +18,8 @@ const rowButtonMenu = (info, menu) => {
   } = (0, _context.useDataTableContext)();
   const rowHandler = (0, _useRowMenu.useRowMenu)(info);
   return /*#__PURE__*/React.createElement("div", {
-    className: classes.menuGroup
+    className: classes.menuGroup,
+    "data-row-click": "off"
   }, menu.map(item => {
     const {
       icon,

package/cjs/toolbar-classes.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 exports.__esModule = true;
 exports.useDataTableToolbarClasses = exports.toolbarClasses = void 0;

package/cjs/use-data-table.js

@@ -681,7 +681,7 @@ const useDataTable = function (props) {
     }
     return event => {
       const target = event.target;
-      if ("closest" in target && !target.closest("a[href],button,input,select,textarea,[role=button]")) {
+      if ("closest" in target && !target.closest("a[href],button,input,select,textarea,[role=button],[data-row-click=off]")) {
         onRowClick(data);
       }
     };

package/cjs/use-row-menu.js

@@ -15,7 +15,7 @@ const useRowMenu = info => {
       trigger,
       triggerKey,
       confirmation,
-      enabledKey
+      disabledKey
     } = item;
     const clickHandler = () => {
       if (typeof onClick === "function") {
@@ -37,8 +37,14 @@ const useRowMenu = info => {
         }));
       }
     };
+    let disabled = false;
+    if (disabledKey) {
+      disabled = data[disabledKey] === true;
+    } else if (triggerKey && !trigger && !onClick && data[triggerKey] == null) {
+      disabled = true;
+    }
     return {
-      disabled: enabledKey ? data[enabledKey] === true : false,
+      disabled,
       onClick() {
         if (confirmation) {
           const message = app.replace(confirmation, data);

package/classes.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { classGroup } from "@tint-ui/tools/class-group";
 import { useClasses } from "@tint-ui/theme";
 const {

package/context.js

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { invariant } from "@tint-ui/tools/proof";
 const DataTableContext = /*#__PURE__*/React.createContext(null);

package/filter-classes.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { classGroup } from "@tint-ui/tools/class-group";
 import { useClasses } from "@tint-ui/theme";
 const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tint-ui/data-table",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "author": "phragon@websoftlab.com",
   "license": "MIT",
   "dependencies": {

package/pagination-classes.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { classGroup } from "@tint-ui/tools/class-group";
 import { useClasses } from "@tint-ui/theme";
 const {

package/row-button-menu.js

@@ -14,7 +14,8 @@ const rowButtonMenu = (info, menu) => {
   } = useDataTableContext();
   const rowHandler = useRowMenu(info);
   return /*#__PURE__*/React.createElement("div", {
-    className: classes.menuGroup
+    className: classes.menuGroup,
+    "data-row-click": "off"
   }, menu.map(item => {
     const {
       icon,

package/toolbar-classes.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { classGroup } from "@tint-ui/tools/class-group";
 import { useClasses } from "@tint-ui/theme";
 const {

package/types.d.ts

@@ -17,7 +17,7 @@ interface OptionTrigger<TData> {
     id: string;
     trigger?: TriggerProp;
     label: string;
-    enabledKey?: keyof TData | string;
+    disabledKey?: keyof TData | string;
     icon?: string;
     destructive?: boolean;
     confirmation?: string | null;

package/use-data-table.js

@@ -679,7 +679,7 @@ const useDataTable = function (props) {
     }
     return event => {
       const target = event.target;
-      if ("closest" in target && !target.closest("a[href],button,input,select,textarea,[role=button]")) {
+      if ("closest" in target && !target.closest("a[href],button,input,select,textarea,[role=button],[data-row-click=off]")) {
         onRowClick(data);
       }
     };

package/use-row-menu.d.ts

@@ -1,6 +1,6 @@
 import type { CellContext } from "@tanstack/react-table";
 import type { RowMenuOption } from "./types";
-declare const useRowMenu: <TData>(info: CellContext<TData, unknown>) => (item: Pick<RowMenuOption<TData>, "onClick" | "trigger" | "confirmation" | "enabledKey" | "triggerKey">) => {
+declare const useRowMenu: <TData>(info: CellContext<TData, unknown>) => (item: Pick<RowMenuOption<TData>, "onClick" | "trigger" | "confirmation" | "disabledKey" | "triggerKey">) => {
     disabled: boolean;
     onClick(): void;
 };

package/use-row-menu.js

@@ -12,7 +12,7 @@ const useRowMenu = info => {
       trigger,
       triggerKey,
       confirmation,
-      enabledKey
+      disabledKey
     } = item;
     const clickHandler = () => {
       if (typeof onClick === "function") {
@@ -35,8 +35,14 @@ const useRowMenu = info => {
         });
       }
     };
+    let disabled = false;
+    if (disabledKey) {
+      disabled = data[disabledKey] === true;
+    } else if (triggerKey && !trigger && !onClick && data[triggerKey] == null) {
+      disabled = true;
+    }
     return {
-      disabled: enabledKey ? data[enabledKey] === true : false,
+      disabled,
       onClick() {
         if (confirmation) {
           const message = app.replace(confirmation, data);