asma-ui-table 1.2.1 → 1.3.0

package/dist/asma-ui-table.es.js

@@ -9,7 +9,7 @@ import React__default, { useMemo, useLayoutEffect, useEffect, useRef, useCallbac
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { unstable_batchedUpdates, createPortal, flushSync } from "react-dom";
 import { twMerge } from "tailwind-merge";
-import { MenuItem, Tooltip, Popover, Skeleton } from "@mui/material";
+import { Tooltip, MenuItem, Popover, Skeleton } from "@mui/material";
 import PropTypes from "prop-types";
 import { ThemeContext } from "@emotion/react";
 const isCustomAction = (action) => {
@@ -8010,6 +8010,14 @@ const usePersistedPageSize = (uniqueKey) => {
   }, [uniqueKey]);
   return persistedPageSize;
 };
+const RowSelectionTooltipFeature = {
+  createRow: (row, table) => {
+    row.getRowSelectionTooltip = () => {
+      var _a, _b;
+      return (_b = (_a = table.options).getRowSelectionTooltip) == null ? void 0 : _b.call(_a, row);
+    };
+  }
+};
 const useStyledTable = (props) => {
   var _a;
   const {
@@ -8028,7 +8036,7 @@ const useStyledTable = (props) => {
   const persistedPageSize = usePersistedPageSize(uniqueKey);
   const resolvedPageSize = persistedPageSize ?? pageSize ?? 50;
   const table = useReactTable({
-    _features: [ExpandedRowsFeature, FocusedRowsFeature, OrderColumnsFeature],
+    _features: [ExpandedRowsFeature, FocusedRowsFeature, OrderColumnsFeature, RowSelectionTooltipFeature],
     columns,
     data,
     meta: { locale: locale ?? "en" },
@@ -9726,229 +9734,6 @@ const StyledCheckbox = ({
     }
   );
 };
-function selectColumn(isFixed2, rowHeight) {
-  return {
-    id: SELECT_COLUMN_ID,
-    minSize: 38,
-    maxSize: 38,
-    size: 38,
-    header: ({ table }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          className: "pl-2 flex size-full items-center justify-start",
-          onClick: () => table.toggleAllRowsSelected(),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StyledCheckbox,
-            {
-              size: "small",
-              dataTest: "cell-select-all",
-              checked: table.getIsAllRowsSelected(),
-              indeterminate: table.getIsSomeRowsSelected(),
-              hideWrapper: true
-            }
-          )
-        }
-      );
-    },
-    cell: ({ cell }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          style: { height: rowHeight ? rowHeight : "auto" },
-          className: "pl-2 flex w-full items-center justify-start m-0 p-0",
-          onClick: () => cell.row.toggleSelected(),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StyledCheckbox,
-            {
-              size: "small",
-              dataTest: "cell-select",
-              checked: cell.row.getIsSelected(),
-              hideWrapper: true,
-              disabled: !cell.row.getCanSelect(),
-              onMouseUp: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }
-            }
-          )
-        }
-      );
-    },
-    fixedLeft: isFixed2
-  };
-}
-function ChevronDownIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z" }) });
-}
-function generateExpandColumn(isFixed2, rowHeight) {
-  return {
-    id: EXPAND_COLUMN_ID,
-    minSize: 50,
-    maxSize: 50,
-    size: 50,
-    enableHiding: false,
-    enableSorting: false,
-    header: () => null,
-    cell: ({ cell }) => {
-      const isExpanded = cell.row.getIsExpanded();
-      const canExpand = cell.row.getCanExpand();
-      return canExpand ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "span",
-        {
-          className: "flex w-full outline-none focus:outline-none items-center justify-center",
-          onClick: () => cell.row.getToggleExpandedHandler()(),
-          style: { height: rowHeight ? rowHeight : "auto" },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ChevronDownIcon,
-            {
-              width: 24,
-              height: 24,
-              style: {
-                rotate: isExpanded ? "180deg" : "0deg",
-                transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-                transitionDuration: "500ms"
-              }
-            }
-          )
-        }
-      ) : null;
-    },
-    fixedLeft: isFixed2
-  };
-}
-const useToggleMenuVisibility = () => {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [open, setOpen] = useState(false);
-  const handleOpen = useCallback((event) => {
-    setAnchorEl(event.currentTarget);
-    setOpen(true);
-  }, []);
-  const handleClose = useCallback(() => {
-    setOpen(false);
-  }, []);
-  return { open, handleClose, handleOpen, anchorEl };
-};
-function DotsVerticalIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2"
-    }
-  ) });
-}
-const StyledMenuItem$1 = (props) => {
-  var _a;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    MenuItem,
-    {
-      ...props,
-      classes: {
-        root: clsx("px-3 py-2.5", (_a = props.classes) == null ? void 0 : _a.root),
-        ...props.classes
-      },
-      sx: {
-        "&.Mui-disabled": {
-          pointerEvents: "auto",
-          cursor: "not-allowed",
-          "&:hover": {
-            backgroundColor: "transparent !important"
-          }
-        },
-        ...props.sx
-      }
-    }
-  );
-};
-const contained = "_contained_gteum_27";
-const common$2 = "_common_gteum_27";
-const medium = "_medium_gteum_69";
-const small = "_small_gteum_74";
-const large = "_large_gteum_79";
-const error = "_error_gteum_84";
-const outlined = "_outlined_gteum_141";
-const text = "_text_gteum_255";
-const textGray = "_textGray_gteum_369";
-const textWhite = "_textWhite_gteum_426";
-const style$3 = {
-  "asma-core-ui-button": "_asma-core-ui-button_gteum_1",
-  contained,
-  common: common$2,
-  medium,
-  small,
-  large,
-  error,
-  outlined,
-  text,
-  textGray,
-  textWhite
-};
-const BtnStyles = {
-  contained: style$3["contained"],
-  outlined: style$3["outlined"],
-  text: style$3["text"],
-  textGray: style$3["textGray"],
-  textWhite: style$3["textWhite"],
-  large: style$3["large"],
-  small: style$3["small"],
-  medium: style$3["medium"],
-  error: style$3["error"],
-  common: style$3["common"]
-};
-const StyledButton = ({
-  variant = "contained",
-  className = "",
-  size = "medium",
-  children,
-  refLink,
-  startIcon,
-  endIcon,
-  dataTest,
-  error: error2,
-  ...otherProps
-}) => {
-  const isLarge = size === "large" || size === "medium";
-  const color2 = error2 ? "error" : "common";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "button",
-    {
-      ...otherProps,
-      className: clsx(
-        style$3["asma-core-ui-button"],
-        BtnStyles[variant],
-        BtnStyles[color2],
-        BtnStyles[size],
-        className
-      ),
-      ref: refLink,
-      "data-test": dataTest,
-      children: [
-        startIcon,
-        children && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            style: {
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: isLarge ? "8px" : "4px",
-              paddingLeft: isLarge ? "8px" : "4px",
-              paddingRight: isLarge ? "8px" : "4px"
-            },
-            children
-          }
-        ),
-        endIcon
-      ]
-    }
-  );
-};
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -10755,7 +10540,7 @@ function getStyleValue(themeMapping, transform, propValueFinal, userValue = prop
   }
   return value;
 }
-function style$2(options) {
+function style$3(options) {
   const {
     prop,
     cssProperty = options.prop,
@@ -10903,12 +10688,12 @@ function resolveCssProperty(props, keys, prop, transformer) {
   const propValue = props[prop];
   return handleBreakpoints(props, propValue, styleFromPropValue);
 }
-function style$1(props, keys) {
+function style$2(props, keys) {
   const transformer = createUnarySpacing(props.theme);
   return Object.keys(props).map((prop) => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
 }
 function margin(props) {
-  return style$1(props, marginKeys);
+  return style$2(props, marginKeys);
 }
 margin.propTypes = process.env.NODE_ENV !== "production" ? marginKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
@@ -10916,7 +10701,7 @@ margin.propTypes = process.env.NODE_ENV !== "production" ? marginKeys.reduce((ob
 }, {}) : {};
 margin.filterProps = marginKeys;
 function padding(props) {
-  return style$1(props, paddingKeys);
+  return style$2(props, paddingKeys);
 }
 padding.propTypes = process.env.NODE_ENV !== "production" ? paddingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
@@ -10974,48 +10759,48 @@ function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-const border = style$2({
+const border = style$3({
   prop: "border",
   themeKey: "borders",
   transform: borderTransform
 });
-const borderTop = style$2({
+const borderTop = style$3({
   prop: "borderTop",
   themeKey: "borders",
   transform: borderTransform
 });
-const borderRight = style$2({
+const borderRight = style$3({
   prop: "borderRight",
   themeKey: "borders",
   transform: borderTransform
 });
-const borderBottom = style$2({
+const borderBottom = style$3({
   prop: "borderBottom",
   themeKey: "borders",
   transform: borderTransform
 });
-const borderLeft = style$2({
+const borderLeft = style$3({
   prop: "borderLeft",
   themeKey: "borders",
   transform: borderTransform
 });
-const borderColor = style$2({
+const borderColor = style$3({
   prop: "borderColor",
   themeKey: "palette"
 });
-const borderTopColor = style$2({
+const borderTopColor = style$3({
   prop: "borderTopColor",
   themeKey: "palette"
 });
-const borderRightColor = style$2({
+const borderRightColor = style$3({
   prop: "borderRightColor",
   themeKey: "palette"
 });
-const borderBottomColor = style$2({
+const borderBottomColor = style$3({
   prop: "borderBottomColor",
   themeKey: "palette"
 });
-const borderLeftColor = style$2({
+const borderLeftColor = style$3({
   prop: "borderLeftColor",
   themeKey: "palette"
 });
@@ -11076,31 +10861,31 @@ rowGap.propTypes = process.env.NODE_ENV !== "production" ? {
   rowGap: responsivePropType$1
 } : {};
 rowGap.filterProps = ["rowGap"];
-const gridColumn = style$2({
+const gridColumn = style$3({
   prop: "gridColumn"
 });
-const gridRow = style$2({
+const gridRow = style$3({
   prop: "gridRow"
 });
-const gridAutoFlow = style$2({
+const gridAutoFlow = style$3({
   prop: "gridAutoFlow"
 });
-const gridAutoColumns = style$2({
+const gridAutoColumns = style$3({
   prop: "gridAutoColumns"
 });
-const gridAutoRows = style$2({
+const gridAutoRows = style$3({
   prop: "gridAutoRows"
 });
-const gridTemplateColumns = style$2({
+const gridTemplateColumns = style$3({
   prop: "gridTemplateColumns"
 });
-const gridTemplateRows = style$2({
+const gridTemplateRows = style$3({
   prop: "gridTemplateRows"
 });
-const gridTemplateAreas = style$2({
+const gridTemplateAreas = style$3({
   prop: "gridTemplateAreas"
 });
-const gridArea = style$2({
+const gridArea = style$3({
   prop: "gridArea"
 });
 compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
@@ -11110,18 +10895,18 @@ function paletteTransform(value, userValue) {
   }
   return value;
 }
-const color = style$2({
+const color = style$3({
   prop: "color",
   themeKey: "palette",
   transform: paletteTransform
 });
-const bgcolor = style$2({
+const bgcolor = style$3({
   prop: "bgcolor",
   cssProperty: "backgroundColor",
   themeKey: "palette",
   transform: paletteTransform
 });
-const backgroundColor = style$2({
+const backgroundColor = style$3({
   prop: "backgroundColor",
   themeKey: "palette",
   transform: paletteTransform
@@ -11130,7 +10915,7 @@ compose(color, bgcolor, backgroundColor);
 function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
-const width = style$2({
+const width = style$3({
   prop: "width",
   transform: sizingTransform
 });
@@ -11148,33 +10933,33 @@ const maxWidth = (props) => {
   return null;
 };
 maxWidth.filterProps = ["maxWidth"];
-const minWidth = style$2({
+const minWidth = style$3({
   prop: "minWidth",
   transform: sizingTransform
 });
-const height = style$2({
+const height = style$3({
   prop: "height",
   transform: sizingTransform
 });
-const maxHeight = style$2({
+const maxHeight = style$3({
   prop: "maxHeight",
   transform: sizingTransform
 });
-const minHeight = style$2({
+const minHeight = style$3({
   prop: "minHeight",
   transform: sizingTransform
 });
-style$2({
+style$3({
   prop: "size",
   cssProperty: "width",
   transform: sizingTransform
 });
-style$2({
+style$3({
   prop: "size",
   cssProperty: "height",
   transform: sizingTransform
 });
-const boxSizing = style$2({
+const boxSizing = style$3({
   prop: "boxSizing"
 });
 compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
@@ -11764,11 +11549,11 @@ function createMixins(breakpoints, mixins) {
     }
   }, mixins);
 }
-const common = {
+const common$1 = {
   black: "#000",
   white: "#fff"
 };
-const common$1 = common;
+const common$2 = common$1;
 const grey = {
   50: "#fafafa",
   100: "#f5f5f5",
@@ -11904,8 +11689,8 @@ const light = {
   // The background colors used to style the surfaces.
   // Consistency between these values is important.
   background: {
-    paper: common$1.white,
-    default: common$1.white
+    paper: common$2.white,
+    default: common$2.white
   },
   // The colors used to style the action elements.
   action: {
@@ -11929,7 +11714,7 @@ const light = {
 };
 const dark = {
   text: {
-    primary: common$1.white,
+    primary: common$2.white,
     secondary: "rgba(255, 255, 255, 0.7)",
     disabled: "rgba(255, 255, 255, 0.5)",
     icon: "rgba(255, 255, 255, 0.5)"
@@ -11940,7 +11725,7 @@ const dark = {
     default: "#121212"
   },
   action: {
-    active: common$1.white,
+    active: common$2.white,
     hover: "rgba(255, 255, 255, 0.08)",
     hoverOpacity: 0.08,
     selected: "rgba(255, 255, 255, 0.16)",
@@ -12122,7 +11907,7 @@ const theme2 = createTheme({ palette: {
   }
   const paletteOutput = deepmerge(_extends({
     // A collection of common colors.
-    common: _extends({}, common$1),
+    common: _extends({}, common$2),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -12643,6 +12428,231 @@ const StyledTooltip = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     ...props
   }
 );
+function selectColumn(isFixed2, rowHeight) {
+  return {
+    id: SELECT_COLUMN_ID,
+    minSize: 38,
+    maxSize: 38,
+    size: 38,
+    header: ({ table }) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          className: "pl-2 flex size-full items-center justify-start",
+          onClick: () => table.toggleAllRowsSelected(),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            StyledCheckbox,
+            {
+              size: "small",
+              dataTest: "cell-select-all",
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              hideWrapper: true
+            }
+          )
+        }
+      );
+    },
+    cell: ({ cell }) => {
+      const disabled = !cell.row.getCanSelect();
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          style: { height: rowHeight ? rowHeight : "auto" },
+          className: "pl-2 flex w-full items-center justify-start m-0 p-0",
+          disabled,
+          onClick: () => cell.row.toggleSelected(),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { arrow: true, title: cell.row.getRowSelectionTooltip(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: disabled ? "cursor-not-allowed" : "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            StyledCheckbox,
+            {
+              size: "small",
+              dataTest: "cell-select",
+              checked: cell.row.getIsSelected(),
+              hideWrapper: true,
+              disabled,
+              onMouseUp: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+            }
+          ) }) })
+        }
+      );
+    },
+    fixedLeft: isFixed2
+  };
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "currentColor", d: "M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z" }) });
+}
+function generateExpandColumn(isFixed2, rowHeight) {
+  return {
+    id: EXPAND_COLUMN_ID,
+    minSize: 50,
+    maxSize: 50,
+    size: 50,
+    enableHiding: false,
+    enableSorting: false,
+    header: () => null,
+    cell: ({ cell }) => {
+      const isExpanded = cell.row.getIsExpanded();
+      const canExpand = cell.row.getCanExpand();
+      return canExpand ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          className: "flex w-full outline-none focus:outline-none items-center justify-center",
+          onClick: () => cell.row.getToggleExpandedHandler()(),
+          style: { height: rowHeight ? rowHeight : "auto" },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ChevronDownIcon,
+            {
+              width: 24,
+              height: 24,
+              style: {
+                rotate: isExpanded ? "180deg" : "0deg",
+                transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+                transitionDuration: "500ms"
+              }
+            }
+          )
+        }
+      ) : null;
+    },
+    fixedLeft: isFixed2
+  };
+}
+const useToggleMenuVisibility = () => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
+  const handleOpen = useCallback((event) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+  return { open, handleClose, handleOpen, anchorEl };
+};
+function DotsVerticalIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1rem", height: "1rem", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2"
+    }
+  ) });
+}
+const StyledMenuItem$1 = (props) => {
+  var _a;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    MenuItem,
+    {
+      ...props,
+      classes: {
+        root: clsx("px-3 py-2.5", (_a = props.classes) == null ? void 0 : _a.root),
+        ...props.classes
+      },
+      sx: {
+        "&.Mui-disabled": {
+          pointerEvents: "auto",
+          cursor: "not-allowed",
+          "&:hover": {
+            backgroundColor: "transparent !important"
+          }
+        },
+        ...props.sx
+      }
+    }
+  );
+};
+const contained = "_contained_gteum_27";
+const common = "_common_gteum_27";
+const medium = "_medium_gteum_69";
+const small = "_small_gteum_74";
+const large = "_large_gteum_79";
+const error = "_error_gteum_84";
+const outlined = "_outlined_gteum_141";
+const text = "_text_gteum_255";
+const textGray = "_textGray_gteum_369";
+const textWhite = "_textWhite_gteum_426";
+const style$1 = {
+  "asma-core-ui-button": "_asma-core-ui-button_gteum_1",
+  contained,
+  common,
+  medium,
+  small,
+  large,
+  error,
+  outlined,
+  text,
+  textGray,
+  textWhite
+};
+const BtnStyles = {
+  contained: style$1["contained"],
+  outlined: style$1["outlined"],
+  text: style$1["text"],
+  textGray: style$1["textGray"],
+  textWhite: style$1["textWhite"],
+  large: style$1["large"],
+  small: style$1["small"],
+  medium: style$1["medium"],
+  error: style$1["error"],
+  common: style$1["common"]
+};
+const StyledButton = ({
+  variant = "contained",
+  className = "",
+  size = "medium",
+  children,
+  refLink,
+  startIcon,
+  endIcon,
+  dataTest,
+  error: error2,
+  ...otherProps
+}) => {
+  const isLarge = size === "large" || size === "medium";
+  const color2 = error2 ? "error" : "common";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "button",
+    {
+      ...otherProps,
+      className: clsx(
+        style$1["asma-core-ui-button"],
+        BtnStyles[variant],
+        BtnStyles[color2],
+        BtnStyles[size],
+        className
+      ),
+      ref: refLink,
+      "data-test": dataTest,
+      children: [
+        startIcon,
+        children && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: isLarge ? "8px" : "4px",
+              paddingLeft: isLarge ? "8px" : "4px",
+              paddingRight: isLarge ? "8px" : "4px"
+            },
+            children
+          }
+        ),
+        endIcon
+      ]
+    }
+  );
+};
 function CircleWarningOutlineIcon(props) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16 ", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "6.25" }),

package/dist/src/custom-features/row-selection-tooltip/RowSelectionTooltipFeature.d.ts

@@ -0,0 +1,2 @@
+import type { TableFeature } from '@tanstack/react-table';
+export declare const RowSelectionTooltipFeature: TableFeature;

package/dist/src/custom-features/row-selection-tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './types';

package/dist/src/custom-features/row-selection-tooltip/types.d.ts

@@ -0,0 +1,8 @@
+import type { Row, RowData } from '@tanstack/react-table';
+import type { ReactNode } from 'react';
+export interface RowSelectionTooltipOptions<TData extends RowData> {
+    getRowSelectionTooltip?: (row: Row<TData>) => ReactNode;
+}
+export interface RowSelectionTooltipRow<TData extends RowData> {
+    getRowSelectionTooltip: () => ReturnType<NonNullable<RowSelectionTooltipOptions<TData>['getRowSelectionTooltip']>>;
+}

package/dist/src/types.d.ts

@@ -1,18 +1,20 @@
-import type { ColumnPinningColumnDef, ColumnSizingColumnDef, GroupingColumnDef, RowData, SortingColumnDef, VisibilityColumnDef, AccessorFn, ColumnDefTemplate, CellContext, ColumnMeta, HeaderContext, Row, TableOptions, Table, ColumnDef } from '@tanstack/react-table';
+import type { ColumnPinningColumnDef, ColumnSizingColumnDef, GroupingColumnDef, RowData, SortingColumnDef, VisibilityColumnDef, AccessorFn, ColumnDefTemplate, CellContext, ColumnMeta, HeaderContext, Row, RowModel, TableOptions, Table, ColumnDef } from '@tanstack/react-table';
 export type * from '@tanstack/react-table';
 import type { CSSProperties, MouseEvent, MutableRefObject, ReactElement, ReactNode } from 'react';
 import type { ExpandedRow, ExpandedRowsInstance, ExpandedRowsOptions, ExpandedRowsTableState } from './custom-features/expand-rows';
 import type { TooltipProps } from '@mui/material';
 import type { FocusedRowsOptions, FocusedRowsTableState, FocusedRow, FocusedRowsInstance } from './custom-features/focus-rows';
 import type { OrderedColumnsOptions, OrderedColumnsTableState } from './custom-features/order-columns';
+import type { RowSelectionTooltipOptions, RowSelectionTooltipRow } from './custom-features/row-selection-tooltip';
 declare module '@tanstack/react-table' {
     interface TableState extends ExpandedRowsTableState, FocusedRowsTableState, OrderedColumnsTableState {
     }
-    interface TableOptionsResolved<TData extends RowData> extends ExpandedRowsOptions, FocusedRowsOptions, OrderedColumnsOptions {
+    interface TableOptionsResolved<TData extends RowData> extends ExpandedRowsOptions, FocusedRowsOptions, OrderedColumnsOptions, RowSelectionTooltipOptions<TData> {
     }
-    interface Row<TData extends RowData> extends ExpandedRow, FocusedRow {
+    interface Row<TData extends RowData> extends ExpandedRow, FocusedRow, RowSelectionTooltipRow<TData> {
     }
     interface Table<TData extends RowData> extends ExpandedRowsInstance, FocusedRowsInstance {
+        getCoreRowModel: () => RowModel<TData>;
     }
     interface ColumnDefExtensions<TData extends RowData, TValue = unknown> extends VisibilityColumnDef, ColumnPinningColumnDef, SortingColumnDef<TData>, GroupingColumnDef<TData, TValue>, ColumnSizingColumnDef {
         className?: string;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "1.2.1",
+    "version": "1.3.0",
     "type": "module",
     "files": [
         "dist/**/*",