@rttui/skin-anocca 1.0.30 → 1.0.32

package/dist/cjs/anocca_skin.cjs

@@ -47,7 +47,6 @@ __export(exports_anocca_skin, {
 module.exports = __toCommonJS(exports_anocca_skin);
 var import_material = require("@mui/material");
 var import_core = require("@rttui/core");
-var import_core2 = require("@rttui/core");
 var import_react = __toESM(require("react"));
 var import_table_header_row = require("./table_header_row.cjs");
 var jsx_runtime = require("react/jsx-runtime");
@@ -55,8 +54,18 @@ var AnoccaSkin = {
   rowHeight: 32,
   headerRowHeight: 32,
   footerRowHeight: 32,
-  OverlayContainer: ({ children }) => {
-    const { width, height } = import_core.useTableContext();
+  OverlayContainer: import_react.default.memo(function OverlayContainer({ children }) {
+    const { width, height } = import_core.useTableProps({
+      selector: (props) => props.uiProps,
+      callback: ({ width: width2, height: height2 }) => {
+        return {
+          width: width2,
+          height: height2
+        };
+      },
+      dependencies: [{ type: "ui_props" }],
+      areCallbackOutputEqual: import_core.shallowEqual
+    });
     const cssVars = import_core.useTableCssVars();
     return /* @__PURE__ */ jsx_runtime.jsx("div", {
       className: "rttui-overlay-container",
@@ -68,7 +77,7 @@ var AnoccaSkin = {
       },
       children
     });
-  },
+  }),
   OuterContainer: ({ children }) => {
     const { tableContainerRef } = import_core.useTableContext();
     return /* @__PURE__ */ jsx_runtime.jsx(import_material.Paper, {
@@ -176,7 +185,7 @@ var AnoccaSkin = {
       children
     });
   },
-  PinnedCols: ({ children, position }) => {
+  PinnedCols: import_react.default.memo(({ children, position }) => {
     const style = {
       position: "sticky",
       zIndex: 3,
@@ -193,14 +202,18 @@ var AnoccaSkin = {
       sx: style,
       children
     });
-  },
-  TableRowWrapper: import_react.default.forwardRef(({ children }, ref) => {
+  }),
+  TableRowWrapper: import_react.default.memo(import_react.default.forwardRef(({ children }, ref) => {
     const theme = import_material.useTheme();
-    const { flatIndex } = import_core.useRowProps((row) => {
-      return { flatIndex: row.flatIndex };
+    const { relativeIndex, rowIndex } = import_core.useRowProps({
+      callback: (row) => {
+        return { relativeIndex: row.relativeIndex, rowIndex: row.rowIndex };
+      },
+      areCallbackOutputEqual: import_core.shallowEqual,
+      dependencies: [{ type: "tanstack_table" }]
     });
     const backgroundColor = (theme2) => {
-      const baseColor = flatIndex % 2 === 0 ? theme2.palette.background.paper : theme2.palette.mode === "dark" ? theme2.palette.grey[900] : theme2.palette.grey[100];
+      const baseColor = relativeIndex % 2 === 0 ? theme2.palette.background.paper : theme2.palette.mode === "dark" ? theme2.palette.grey[900] : theme2.palette.grey[100];
       return baseColor;
     };
     const vars = {
@@ -215,12 +228,12 @@ var AnoccaSkin = {
         justifyContent: "flex-start",
         alignItems: "stretch"
       },
-      "data-index": flatIndex,
+      "data-index": rowIndex,
       ref,
       children
     });
-  }),
-  TableRow: ({ children }) => {
+  })),
+  TableRow: import_react.default.memo(({ children }) => {
     return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableRow, {
       component: "div",
       className: "table-row",
@@ -240,10 +253,16 @@ var AnoccaSkin = {
       },
       children
     });
-  },
-  TableRowExpandedContent: ({ children }) => {
-    const { leafColLength } = import_core2.useTableProps((table) => {
-      return { leafColLength: table.getAllLeafColumns().length };
+  }),
+  TableRowExpandedContent: import_react.default.memo(({ children }) => {
+    const { leafColLength } = import_core.useTableProps({
+      callback: (table) => {
+        return {
+          leafColLength: table.tanstackTable.getAllLeafColumns().length
+        };
+      },
+      dependencies: [{ type: "tanstack_table" }],
+      areCallbackOutputEqual: import_core.strictEqual
     });
     return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableRow, {
       component: "div",
@@ -261,8 +280,8 @@ var AnoccaSkin = {
         children
       })
     });
-  },
-  Cell: import_react.default.memo(import_react.default.forwardRef(({ isMeasuring, children }, ref) => {
+  }),
+  Cell: import_react.default.memo(import_react.default.forwardRef(function Cell({ isMeasureInstance, children }, ref) {
     const {
       isPinned,
       isLastPinned,
@@ -270,26 +289,26 @@ var AnoccaSkin = {
       isLastCenter,
       width,
       isSomeColumnsPinnedRight
-    } = import_core.useCellProps((cell, table) => {
-      const state = cell.vheader.getState();
-      return {
-        isPinned: state.isPinned,
-        isLastPinned: state.isLastPinned,
-        isLast: state.isLast,
-        isLastCenter: state.isLastCenter,
-        width: state.width,
-        isSomeColumnsPinnedRight: table.getIsSomeColumnsPinned("right")
-      };
-    }, {
-      arePropsEqual: (prev, next) => {
-        return import_core2.shallowEqual(prev, next, ["content"]);
-      }
+    } = import_core.useCellProps({
+      callback: (cell, table) => {
+        const state = cell.header.state;
+        return {
+          isPinned: state.isPinned,
+          isLastPinned: state.isLastPinned,
+          isLast: state.isLast,
+          isLastCenter: state.isLastCenter,
+          width: state.width,
+          isSomeColumnsPinnedRight: table.tanstackTable.getIsSomeColumnsPinned("right")
+        };
+      },
+      areCallbackOutputEqual: import_core.shallowEqual,
+      dependencies: [{ type: "tanstack_table" }]
     });
     return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableCell, {
       className: "td",
       component: "div",
       ref,
-      style: { width: isMeasuring ? "auto" : width },
+      style: { width: isMeasureInstance ? "auto" : width },
       sx: {
         height: "var(--row-height)",
         overflow: "hidden",
@@ -322,11 +341,13 @@ var AnoccaSkin = {
     });
   })),
   PinnedColsOverlay: ({ position }) => {
-    const width = import_core2.useTableProps((table) => {
-      if (!table.getIsSomeColumnsPinned(position)) {
-        return;
+    const width = import_core.useTableProps({
+      callback: (table) => {
+        if (!table.tanstackTable.getIsSomeColumnsPinned(position)) {
+          return;
+        }
+        return position === "left" ? table.tanstackTable.getLeftTotalSize() : table.tanstackTable.getRightTotalSize();
       }
-      return position === "left" ? table.getLeftTotalSize() : table.getRightTotalSize();
     });
     if (width === undefined) {
       return null;
@@ -351,7 +372,7 @@ var AnoccaSkin = {
     });
   }
 };
-var TableHeaderCell = import_react.default.memo(import_react.default.forwardRef(({ isMeasuring, children }, ref) => {
+var TableHeaderCell = import_react.default.memo(import_react.default.forwardRef(({ isMeasureInstance, children }, ref) => {
   const {
     isSomeColumnsPinnedRight,
     headerId,
@@ -360,17 +381,21 @@ var TableHeaderCell = import_react.default.memo(import_react.default.forwardRef(
     isLast,
     isLastPinned,
     isLastCenter
-  } = import_core.useColProps(({ vheader, table }) => {
-    const state = vheader.getState();
-    return {
-      isSomeColumnsPinnedRight: table.getIsSomeColumnsPinned("right"),
-      headerId: vheader.id,
-      isPinned: state.isPinned,
-      width: state.width,
-      isLast: state.isLast,
-      isLastPinned: state.isLastPinned,
-      isLastCenter: state.isLastCenter
-    };
+  } = import_core.useColProps({
+    callback: ({ vheader, selectorValue }) => {
+      const state = vheader.state;
+      return {
+        isSomeColumnsPinnedRight: selectorValue.tanstackTable.getIsSomeColumnsPinned("right"),
+        headerId: vheader.header.id,
+        isPinned: state.isPinned,
+        width: state.width,
+        isLast: state.isLast,
+        isLastPinned: state.isLastPinned,
+        isLastCenter: state.isLastCenter
+      };
+    },
+    areCallbackOutputEqual: import_core.shallowEqual,
+    dependencies: [{ type: "tanstack_table" }]
   });
   return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableCell, {
     ref,
@@ -378,7 +403,7 @@ var TableHeaderCell = import_react.default.memo(import_react.default.forwardRef(
     className: "th",
     "data-header-id": headerId,
     "data-is-pinned": isPinned,
-    style: { width: isMeasuring ? "auto" : width },
+    style: { width: isMeasureInstance ? "auto" : width },
     sx: {
       transition: "background-color 0.2s ease",
       whiteSpace: "nowrap",
@@ -405,4 +430,4 @@ var TableHeaderCell = import_react.default.memo(import_react.default.forwardRef(
   });
 }));
 
-//# debugId=F8ED3ACAC068742B64756E2164756E21
+//# debugId=BAF6A6599BF2E2EB64756E2164756E21

package/dist/cjs/anocca_skin.cjs.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../../src/anocca_skin.tsx"],
   "sourcesContent": [
-    "import {\n  Box,\n  Paper,\n  SxProps,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableRow,\n  Theme,\n  useTheme,\n} from \"@mui/material\";\nimport {\n  Skin,\n  useCellProps,\n  useColProps,\n  useRowProps,\n  useTableContext,\n  useTableCssVars,\n} from \"@rttui/core\";\nimport { shallowEqual, useTableProps } from \"@rttui/core\";\nimport React, { CSSProperties } from \"react\";\nimport { TableHeaderRow } from \"./table_header_row.cjs\";\n\nconst AnoccaSkin: Skin = {\n  rowHeight: 32,\n  headerRowHeight: 32,\n  footerRowHeight: 32,\n  OverlayContainer: ({ children }) => {\n    const { width, height } = useTableContext();\n    const cssVars = useTableCssVars();\n    return (\n      <div\n        className=\"rttui-overlay-container\"\n        style={{\n          position: \"relative\",\n          width: width + \"px\",\n          height: height + \"px\",\n          ...cssVars,\n        }}\n      >\n        {children}\n      </div>\n    );\n  },\n  OuterContainer: ({ children }) => {\n    const { tableContainerRef } = useTableContext();\n\n    return (\n      <Paper\n        ref={tableContainerRef}\n        className=\"outer-container\"\n        elevation={2}\n        sx={{\n          overflow: \"auto\",\n          width: \"var(--table-container-width)\",\n          height: \"var(--table-container-height)\",\n          position: \"relative\",\n          contain: \"paint\",\n          willChange: \"transform\",\n          borderRadius: 1,\n        }}\n      >\n        {children}\n      </Paper>\n    );\n  },\n  TableScroller: () => {\n    return (\n      <div\n        className=\"table-scroller\"\n        style={{\n          width: \"var(--table-width)\",\n          height:\n            \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n          position: \"absolute\",\n        }}\n      ></div>\n    );\n  },\n  TableHeader: ({ children }) => {\n    return (\n      <TableHead\n        component=\"div\"\n        className=\"thead\"\n        sx={{\n          position: \"sticky\",\n          top: 0,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-start\",\n          alignItems: \"stretch\",\n        }}\n      >\n        {children}\n      </TableHead>\n    );\n  },\n  TableFooter: ({ children }) => {\n    return (\n      <TableFooter\n        component=\"div\"\n        className=\"table-footer\"\n        sx={{\n          position: \"sticky\",\n          bottom: -1,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n        }}\n      >\n        {children}\n      </TableFooter>\n    );\n  },\n  HeaderRow: TableHeaderRow,\n  HeaderCell: React.memo(\n    React.forwardRef((props, ref) => {\n      return <TableHeaderCell {...props} ref={ref} />;\n    }),\n  ),\n  TableBody: ({ children }) => {\n    return (\n      <TableBody\n        component=\"div\"\n        className=\"table-body\"\n        sx={{\n          position: \"relative\",\n          width: \"var(--table-width)\",\n          height: \"var(--table-height)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-start\",\n          alignItems: \"stretch\",\n        }}\n      >\n        {children}\n      </TableBody>\n    );\n  },\n  PinnedRows: ({ children, position }) => {\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n    };\n    if (position === \"top\") {\n      style.top = \"var(--header-height)\";\n      style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"bottom\") {\n      style.bottom = \"var(--footer-height)\";\n      style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n\n    const Component = position === \"top\" ? TableHead : TableFooter;\n\n    return (\n      <Component\n        component=\"div\"\n        className={`sticky-${position}-rows`}\n        sx={style}\n      >\n        {children}\n      </Component>\n    );\n  },\n  PinnedCols: ({ children, position }) => {\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n      display: \"flex\",\n    };\n\n    if (position === \"left\") {\n      style.left = 0;\n    } else if (position === \"right\") {\n      style.right = 0;\n    }\n\n    return (\n      <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n        {children}\n      </Box>\n    );\n  },\n\n  TableRowWrapper: React.forwardRef(({ children }, ref) => {\n    const theme = useTheme();\n    const { flatIndex } = useRowProps((row) => {\n      return { flatIndex: row.flatIndex };\n    });\n    const backgroundColor = (theme: Theme) => {\n      const baseColor =\n        flatIndex % 2 === 0\n          ? theme.palette.background.paper\n          : theme.palette.mode === \"dark\"\n            ? theme.palette.grey[900]\n            : theme.palette.grey[100];\n      return baseColor;\n    };\n\n    const vars: Record<string, string> = {\n      \"--row-background-color\": backgroundColor(theme),\n    };\n\n    return (\n      <Box\n        sx={{\n          ...vars,\n          width: \"var(--table-width)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-start\",\n          alignItems: \"stretch\",\n        }}\n        data-index={flatIndex}\n        ref={ref}\n      >\n        {children}\n      </Box>\n    );\n  }),\n  TableRow: ({ children }) => {\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"table-row\"\n        sx={{\n          position: \"relative\",\n          width: \"var(--table-width)\",\n          display: \"flex\",\n          height: \"var(--row-height)\",\n          zIndex: 1,\n          boxSizing: \"border-box\",\n          backgroundColor: \"var(--row-background-color)\",\n          \"&:hover\": {\n            backgroundColor: (theme) => {\n              // Always use solid background colors for all cells on hover\n              return theme.palette.mode === \"dark\"\n                ? \"#1e1e52\" // Dark blue solid color\n                : \"#E3F2FD\"; // Light blue solid color\n            },\n          },\n        }}\n      >\n        {children}\n      </TableRow>\n    );\n  },\n  TableRowExpandedContent: ({ children }) => {\n    const { leafColLength } = useTableProps((table) => {\n      return { leafColLength: table.getAllLeafColumns().length };\n    });\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"expanded-row\"\n        sx={{\n          backgroundColor: (theme) => theme.palette.background.default,\n        }}\n      >\n        <TableCell\n          component=\"div\"\n          className=\"expanded-cell\"\n          colSpan={leafColLength}\n          sx={{\n            padding: 2,\n          }}\n        >\n          {children}\n        </TableCell>\n      </TableRow>\n    );\n  },\n  Cell: React.memo(\n    React.forwardRef(({ isMeasuring, children }, ref) => {\n      const {\n        isPinned,\n        isLastPinned,\n        isLast,\n        isLastCenter,\n        width,\n        isSomeColumnsPinnedRight,\n      } = useCellProps(\n        (cell, table) => {\n          const state = cell.vheader.getState();\n          return {\n            isPinned: state.isPinned,\n            isLastPinned: state.isLastPinned,\n            isLast: state.isLast,\n            isLastCenter: state.isLastCenter,\n            width: state.width,\n            isSomeColumnsPinnedRight: table.getIsSomeColumnsPinned(\"right\"),\n          };\n        },\n        {\n          arePropsEqual: (prev, next) => {\n            return shallowEqual(prev, next, [\"content\"]);\n          },\n        },\n      );\n\n      return (\n        <TableCell\n          className=\"td\"\n          component=\"div\"\n          ref={ref}\n          style={{ width: isMeasuring ? \"auto\" : width }}\n          sx={{\n            height: \"var(--row-height)\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n            zIndex: isPinned ? 5 : 0,\n            boxSizing: \"border-box\",\n            fontSize: \"0.875rem\",\n            color: \"text.primary\",\n            alignItems: \"center\",\n            gap: \"8px\",\n            display: \"flex\",\n            justifyContent: \"flex-start\",\n            alignContent: \"center\",\n            padding: \"6px 12px\",\n            backgroundColor: \"var(--row-background-color)\",\n            borderBottom: \"none\",\n            flexShrink: 0,\n            position: \"relative\",\n            borderRight:\n              ((isPinned === \"start\" && !isLastPinned) || !isPinned) &&\n              !isLast &&\n              !(isLastCenter && isSomeColumnsPinnedRight)\n                ? (theme) => `1px solid ${theme.palette.divider}`\n                : undefined,\n            borderLeft:\n              isPinned === \"end\" && !isLastPinned\n                ? (theme) => `1px solid ${theme.palette.divider}`\n                : undefined,\n            \".table-row:hover &\": {\n              backgroundColor: (theme) => {\n                // Always use solid background colors for all cells on hover\n                return theme.palette.mode === \"dark\"\n                  ? \"#1e1e52\" // Dark blue solid color\n                  : \"#E3F2FD\"; // Light blue solid color\n              },\n              zIndex: isPinned ? 2 : 0,\n            },\n          }}\n        >\n          {children}\n        </TableCell>\n      );\n    }),\n  ),\n  PinnedColsOverlay: ({ position }) => {\n    const width = useTableProps((table) => {\n      if (!table.getIsSomeColumnsPinned(position)) {\n        return undefined;\n      }\n      return position === \"left\"\n        ? table.getLeftTotalSize()\n        : table.getRightTotalSize();\n    });\n\n    if (width === undefined) {\n      return null;\n    }\n\n    const style: CSSProperties = {\n      width,\n      [position]: 0,\n      position: \"sticky\",\n      top: 0,\n      bottom: 0,\n      zIndex: 20,\n      pointerEvents: \"none\",\n    };\n\n    if (position === \"left\") {\n      style.boxShadow =\n        \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"right\") {\n      style.boxShadow =\n        \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n    return <div className={`pinned-${position}-overlay`} style={style} />;\n  },\n};\n\nconst TableHeaderCell = React.memo(\n  React.forwardRef<\n    HTMLDivElement,\n    {\n      isMeasuring: boolean;\n      children: React.ReactNode;\n    }\n  >(({ isMeasuring, children }, ref) => {\n    const {\n      isSomeColumnsPinnedRight,\n      headerId,\n      isPinned,\n      width,\n      isLast,\n      isLastPinned,\n      isLastCenter,\n    } = useColProps(({ vheader, table }) => {\n      const state = vheader.getState();\n      return {\n        isSomeColumnsPinnedRight: table.getIsSomeColumnsPinned(\"right\"),\n        headerId: vheader.id,\n        isPinned: state.isPinned,\n        width: state.width,\n        isLast: state.isLast,\n        isLastPinned: state.isLastPinned,\n        isLastCenter: state.isLastCenter,\n      };\n    });\n\n    return (\n      <TableCell\n        ref={ref}\n        component=\"div\"\n        className=\"th\"\n        data-header-id={headerId}\n        data-is-pinned={isPinned}\n        style={{ width: isMeasuring ? \"auto\" : width }}\n        sx={{\n          transition: \"background-color 0.2s ease\",\n          whiteSpace: \"nowrap\",\n          zIndex: isPinned ? 1 : 0,\n          display: \"flex\",\n          overflow: \"hidden\",\n          height: \"var(--header-row-height)\",\n          position: \"relative\",\n          flexShrink: 0,\n          alignItems: \"center\",\n          gap: \"8px\",\n          justifyContent: \"space-between\",\n          padding: \"6px 12px\",\n          boxSizing: \"border-box\",\n          fontWeight: 600,\n          backgroundColor: isPinned\n            ? (theme) => theme.palette.background.paper\n            : \"transparent\",\n          borderRight:\n            ((isPinned === \"start\" && !isLastPinned) || !isPinned) &&\n            !isLast &&\n            !(isLastCenter && isSomeColumnsPinnedRight)\n              ? (theme) => `1px solid ${theme.palette.divider}`\n              : undefined,\n          borderLeft:\n            isPinned === \"end\" && !isLastPinned\n              ? (theme) => `1px solid ${theme.palette.divider}`\n              : undefined,\n        }}\n      >\n        <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n          {children}\n        </div>\n      </TableCell>\n    );\n  }),\n);\n\nexport { AnoccaSkin };\n"
+    "import {\n  Box,\n  Paper,\n  SxProps,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableRow,\n  Theme,\n  useTheme,\n} from \"@mui/material\";\nimport {\n  shallowEqual,\n  Skin,\n  strictEqual,\n  useCellProps,\n  useColProps,\n  useRowProps,\n  useTableContext,\n  useTableCssVars,\n  useTableProps,\n} from \"@rttui/core\";\nimport React, { CSSProperties } from \"react\";\nimport { TableHeaderRow } from \"./table_header_row.cjs\";\n\nconst AnoccaSkin: Skin = {\n  rowHeight: 32,\n  headerRowHeight: 32,\n  footerRowHeight: 32,\n  OverlayContainer: React.memo(function OverlayContainer({ children }) {\n    const { width, height } = useTableProps({\n      selector: (props) => props.uiProps,\n      callback: ({ width, height }) => {\n        return {\n          width,\n          height,\n        };\n      },\n      dependencies: [{ type: \"ui_props\" }],\n      areCallbackOutputEqual: shallowEqual,\n    });\n    const cssVars = useTableCssVars();\n    return (\n      <div\n        className=\"rttui-overlay-container\"\n        style={{\n          position: \"relative\",\n          width: width + \"px\",\n          height: height + \"px\",\n          ...cssVars,\n        }}\n      >\n        {children}\n      </div>\n    );\n  }),\n  OuterContainer: ({ children }) => {\n    const { tableContainerRef } = useTableContext();\n\n    return (\n      <Paper\n        ref={tableContainerRef}\n        className=\"outer-container\"\n        elevation={2}\n        sx={{\n          overflow: \"auto\",\n          width: \"var(--table-container-width)\",\n          height: \"var(--table-container-height)\",\n          position: \"relative\",\n          contain: \"paint\",\n          willChange: \"transform\",\n          borderRadius: 1,\n        }}\n      >\n        {children}\n      </Paper>\n    );\n  },\n  TableScroller: () => {\n    return (\n      <div\n        className=\"table-scroller\"\n        style={{\n          width: \"var(--table-width)\",\n          height:\n            \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n          position: \"absolute\",\n        }}\n      ></div>\n    );\n  },\n  TableHeader: ({ children }) => {\n    return (\n      <TableHead\n        component=\"div\"\n        className=\"thead\"\n        sx={{\n          position: \"sticky\",\n          top: 0,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-start\",\n          alignItems: \"stretch\",\n        }}\n      >\n        {children}\n      </TableHead>\n    );\n  },\n  TableFooter: ({ children }) => {\n    return (\n      <TableFooter\n        component=\"div\"\n        className=\"table-footer\"\n        sx={{\n          position: \"sticky\",\n          bottom: -1,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n        }}\n      >\n        {children}\n      </TableFooter>\n    );\n  },\n  HeaderRow: TableHeaderRow,\n  HeaderCell: React.memo(\n    React.forwardRef((props, ref) => {\n      return <TableHeaderCell {...props} ref={ref} />;\n    }),\n  ),\n  TableBody: ({ children }) => {\n    return (\n      <TableBody\n        component=\"div\"\n        className=\"table-body\"\n        sx={{\n          position: \"relative\",\n          width: \"var(--table-width)\",\n          height: \"var(--table-height)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-start\",\n          alignItems: \"stretch\",\n        }}\n      >\n        {children}\n      </TableBody>\n    );\n  },\n  PinnedRows: ({ children, position }) => {\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n    };\n    if (position === \"top\") {\n      style.top = \"var(--header-height)\";\n      style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"bottom\") {\n      style.bottom = \"var(--footer-height)\";\n      style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n\n    const Component = position === \"top\" ? TableHead : TableFooter;\n\n    return (\n      <Component\n        component=\"div\"\n        className={`sticky-${position}-rows`}\n        sx={style}\n      >\n        {children}\n      </Component>\n    );\n  },\n  PinnedCols: React.memo(({ children, position }) => {\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n      display: \"flex\",\n    };\n\n    if (position === \"left\") {\n      style.left = 0;\n    } else if (position === \"right\") {\n      style.right = 0;\n    }\n\n    return (\n      <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n        {children}\n      </Box>\n    );\n  }),\n\n  TableRowWrapper: React.memo(\n    React.forwardRef(({ children }, ref) => {\n      const theme = useTheme();\n      const { relativeIndex, rowIndex } = useRowProps({\n        callback: (row) => {\n          return { relativeIndex: row.relativeIndex, rowIndex: row.rowIndex };\n        },\n        areCallbackOutputEqual: shallowEqual,\n        dependencies: [{ type: \"tanstack_table\" }],\n      });\n      const backgroundColor = (theme: Theme) => {\n        const baseColor =\n          relativeIndex % 2 === 0\n            ? theme.palette.background.paper\n            : theme.palette.mode === \"dark\"\n              ? theme.palette.grey[900]\n              : theme.palette.grey[100];\n        return baseColor;\n      };\n\n      const vars: Record<string, string> = {\n        \"--row-background-color\": backgroundColor(theme),\n      };\n\n      return (\n        <Box\n          sx={{\n            ...vars,\n            width: \"var(--table-width)\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            justifyContent: \"flex-start\",\n            alignItems: \"stretch\",\n          }}\n          data-index={rowIndex}\n          ref={ref}\n        >\n          {children}\n        </Box>\n      );\n    }),\n  ),\n  TableRow: React.memo(({ children }) => {\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"table-row\"\n        sx={{\n          position: \"relative\",\n          width: \"var(--table-width)\",\n          display: \"flex\",\n          height: \"var(--row-height)\",\n          zIndex: 1,\n          boxSizing: \"border-box\",\n          backgroundColor: \"var(--row-background-color)\",\n          \"&:hover\": {\n            backgroundColor: (theme) => {\n              // Always use solid background colors for all cells on hover\n              return theme.palette.mode === \"dark\"\n                ? \"#1e1e52\" // Dark blue solid color\n                : \"#E3F2FD\"; // Light blue solid color\n            },\n          },\n        }}\n      >\n        {children}\n      </TableRow>\n    );\n  }),\n  TableRowExpandedContent: React.memo(({ children }) => {\n    const { leafColLength } = useTableProps({\n      callback: (table) => {\n        return {\n          leafColLength: table.tanstackTable.getAllLeafColumns().length,\n        };\n      },\n      dependencies: [{ type: \"tanstack_table\" }],\n      areCallbackOutputEqual: strictEqual,\n    });\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"expanded-row\"\n        sx={{\n          backgroundColor: (theme) => theme.palette.background.default,\n        }}\n      >\n        <TableCell\n          component=\"div\"\n          className=\"expanded-cell\"\n          colSpan={leafColLength}\n          sx={{\n            padding: 2,\n          }}\n        >\n          {children}\n        </TableCell>\n      </TableRow>\n    );\n  }),\n  Cell: React.memo(\n    React.forwardRef(function Cell({ isMeasureInstance, children }, ref) {\n      const {\n        isPinned,\n        isLastPinned,\n        isLast,\n        isLastCenter,\n        width,\n        isSomeColumnsPinnedRight,\n      } = useCellProps({\n        callback: (cell, table) => {\n          const state = cell.header.state;\n          return {\n            isPinned: state.isPinned,\n            isLastPinned: state.isLastPinned,\n            isLast: state.isLast,\n            isLastCenter: state.isLastCenter,\n            width: state.width,\n            isSomeColumnsPinnedRight:\n              table.tanstackTable.getIsSomeColumnsPinned(\"right\"),\n          };\n        },\n        areCallbackOutputEqual: shallowEqual,\n        dependencies: [{ type: \"tanstack_table\" }],\n      });\n\n      return (\n        <TableCell\n          className=\"td\"\n          component=\"div\"\n          ref={ref}\n          style={{ width: isMeasureInstance ? \"auto\" : width }}\n          sx={{\n            height: \"var(--row-height)\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n            zIndex: isPinned ? 5 : 0,\n            boxSizing: \"border-box\",\n            fontSize: \"0.875rem\",\n            color: \"text.primary\",\n            alignItems: \"center\",\n            gap: \"8px\",\n            display: \"flex\",\n            justifyContent: \"flex-start\",\n            alignContent: \"center\",\n            padding: \"6px 12px\",\n            backgroundColor: \"var(--row-background-color)\",\n            borderBottom: \"none\",\n            flexShrink: 0,\n            position: \"relative\",\n            borderRight:\n              ((isPinned === \"start\" && !isLastPinned) || !isPinned) &&\n              !isLast &&\n              !(isLastCenter && isSomeColumnsPinnedRight)\n                ? (theme) => `1px solid ${theme.palette.divider}`\n                : undefined,\n            borderLeft:\n              isPinned === \"end\" && !isLastPinned\n                ? (theme) => `1px solid ${theme.palette.divider}`\n                : undefined,\n            \".table-row:hover &\": {\n              backgroundColor: (theme) => {\n                // Always use solid background colors for all cells on hover\n                return theme.palette.mode === \"dark\"\n                  ? \"#1e1e52\" // Dark blue solid color\n                  : \"#E3F2FD\"; // Light blue solid color\n              },\n              zIndex: isPinned ? 2 : 0,\n            },\n          }}\n        >\n          {children}\n        </TableCell>\n      );\n    }),\n  ),\n  PinnedColsOverlay: ({ position }) => {\n    const width = useTableProps({\n      callback: (table) => {\n        if (!table.tanstackTable.getIsSomeColumnsPinned(position)) {\n          return undefined;\n        }\n        return position === \"left\"\n          ? table.tanstackTable.getLeftTotalSize()\n          : table.tanstackTable.getRightTotalSize();\n      },\n    });\n\n    if (width === undefined) {\n      return null;\n    }\n\n    const style: CSSProperties = {\n      width,\n      [position]: 0,\n      position: \"sticky\",\n      top: 0,\n      bottom: 0,\n      zIndex: 20,\n      pointerEvents: \"none\",\n    };\n\n    if (position === \"left\") {\n      style.boxShadow =\n        \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"right\") {\n      style.boxShadow =\n        \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n    return <div className={`pinned-${position}-overlay`} style={style} />;\n  },\n};\n\nconst TableHeaderCell = React.memo(\n  React.forwardRef<\n    HTMLDivElement,\n    {\n      isMeasureInstance: boolean;\n      children: React.ReactNode;\n    }\n  >(({ isMeasureInstance, children }, ref) => {\n    const {\n      isSomeColumnsPinnedRight,\n      headerId,\n      isPinned,\n      width,\n      isLast,\n      isLastPinned,\n      isLastCenter,\n    } = useColProps({\n      callback: ({ vheader, selectorValue }) => {\n        const state = vheader.state;\n        return {\n          isSomeColumnsPinnedRight:\n            selectorValue.tanstackTable.getIsSomeColumnsPinned(\"right\"),\n          headerId: vheader.header.id,\n          isPinned: state.isPinned,\n          width: state.width,\n          isLast: state.isLast,\n          isLastPinned: state.isLastPinned,\n          isLastCenter: state.isLastCenter,\n        };\n      },\n      areCallbackOutputEqual: shallowEqual,\n      dependencies: [{ type: \"tanstack_table\" }],\n    });\n\n    return (\n      <TableCell\n        ref={ref}\n        component=\"div\"\n        className=\"th\"\n        data-header-id={headerId}\n        data-is-pinned={isPinned}\n        style={{ width: isMeasureInstance ? \"auto\" : width }}\n        sx={{\n          transition: \"background-color 0.2s ease\",\n          whiteSpace: \"nowrap\",\n          zIndex: isPinned ? 1 : 0,\n          display: \"flex\",\n          overflow: \"hidden\",\n          height: \"var(--header-row-height)\",\n          position: \"relative\",\n          flexShrink: 0,\n          alignItems: \"center\",\n          gap: \"8px\",\n          justifyContent: \"space-between\",\n          padding: \"6px 12px\",\n          boxSizing: \"border-box\",\n          fontWeight: 600,\n          backgroundColor: isPinned\n            ? (theme) => theme.palette.background.paper\n            : \"transparent\",\n          borderRight:\n            ((isPinned === \"start\" && !isLastPinned) || !isPinned) &&\n            !isLast &&\n            !(isLastCenter && isSomeColumnsPinnedRight)\n              ? (theme) => `1px solid ${theme.palette.divider}`\n              : undefined,\n          borderLeft:\n            isPinned === \"end\" && !isLastPinned\n              ? (theme) => `1px solid ${theme.palette.divider}`\n              : undefined,\n        }}\n      >\n        <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n          {children}\n        </div>\n      </TableCell>\n    );\n  }),\n);\n\nexport { AnoccaSkin };\n"
   ],
-  "mappings": "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",
-  "debugId": "F8ED3ACAC068742B64756E2164756E21",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,IAXP;AAsBO,IAVP;AAWqC,IAArC;AAC+B,IAA/B;AAAA;AAEA,IAAM,aAAmB;AAAA,EACvB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,kBAAkB,qBAAM,KAAK,SAAS,gBAAgB,GAAG,YAAY;AAAA,IACnE,QAAQ,OAAO,WAAW,0BAAc;AAAA,MACtC,UAAU,CAAC,UAAU,MAAM;AAAA,MAC3B,UAAU,GAAG,eAAO,sBAAa;AAAA,QAC/B,OAAO;AAAA,UACL;AAAA,UACA;AAAA,QACF;AAAA;AAAA,MAEF,cAAc,CAAC,EAAE,MAAM,WAAW,CAAC;AAAA,MACnC,wBAAwB;AAAA,IAC1B,CAAC;AAAA,IACD,MAAM,UAAU,4BAAgB;AAAA,IAChC,uBACE,gBAUE,OAVF;AAAA,MACE,WAAU;AAAA,MACV,OAAO;AAAA,QACL,UAAU;AAAA,QACV,OAAO,QAAQ;AAAA,QACf,QAAQ,SAAS;AAAA,WACd;AAAA,MACL;AAAA,MAPF;AAAA,KAUE;AAAA,GAEL;AAAA,EACD,gBAAgB,GAAG,eAAe;AAAA,IAChC,QAAQ,sBAAsB,4BAAgB;AAAA,IAE9C,uBACE,gBAeE,uBAfF;AAAA,MACE,KAAK;AAAA,MACL,WAAU;AAAA,MACV,WAAW;AAAA,MACX,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,cAAc;AAAA,MAChB;AAAA,MAZF;AAAA,KAeE;AAAA;AAAA,EAGN,eAAe,MAAM;AAAA,IACnB,uBACE,gBAQG,OARH;AAAA,MACE,WAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QACE;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,KACC;AAAA;AAAA,EAGP,aAAa,GAAG,eAAe;AAAA,IAC7B,uBACE,gBAiBE,2BAjBF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA,QACrD,WAAW,CAAC,UAAU,WAAW,MAAM,QAAQ;AAAA,QAC/C,SAAS;AAAA,QACT,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,YAAY;AAAA,MACd;AAAA,MAdF;AAAA,KAiBE;AAAA;AAAA,EAGN,aAAa,GAAG,eAAe;AAAA,IAC7B,uBACE,gBAaE,6BAbF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA,QACrD,WAAW,CAAC,UAAU,YAAY,MAAM,QAAQ;AAAA,MAClD;AAAA,MAVF;AAAA,KAaE;AAAA;AAAA,EAGN,WAAW;AAAA,EACX,YAAY,qBAAM,KAChB,qBAAM,WAAW,CAAC,OAAO,QAAQ;AAAA,IAC/B,uBAAO,gBAAC,iBAAD;AAAA,SAAqB;AAAA,MAAO;AAAA,KAAU;AAAA,GAC9C,CACH;AAAA,EACA,WAAW,GAAG,eAAe;AAAA,IAC3B,uBACE,gBAcE,2BAdF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,YAAY;AAAA,MACd;AAAA,MAXF;AAAA,KAcE;AAAA;AAAA,EAGN,YAAY,GAAG,UAAU,eAAe;AAAA,IACtC,MAAM,QAAwB;AAAA,MAC5B,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,IACA,IAAI,aAAa,OAAO;AAAA,MACtB,MAAM,MAAM;AAAA,MACZ,MAAM,eAAe,CAAC,UAAU,aAAa,MAAM,QAAQ;AAAA,MAC3D,MAAM,YACJ;AAAA,IACJ,EAAO,SAAI,aAAa,UAAU;AAAA,MAChC,MAAM,SAAS;AAAA,MACf,MAAM,YAAY,CAAC,UAAU,aAAa,MAAM,QAAQ;AAAA,MACxD,MAAM,YACJ;AAAA,IACJ;AAAA,IAEA,MAAM,YAAY,aAAa,QAAQ,4BAAY;AAAA,IAEnD,uBACE,gBAME,WANF;AAAA,MACE,WAAU;AAAA,MACV,WAAW,UAAU;AAAA,MACrB,IAAI;AAAA,MAHN;AAAA,KAME;AAAA;AAAA,EAGN,YAAY,qBAAM,KAAK,GAAG,UAAU,eAAe;AAAA,IACjD,MAAM,QAAwB;AAAA,MAC5B,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IAEA,IAAI,aAAa,QAAQ;AAAA,MACvB,MAAM,OAAO;AAAA,IACf,EAAO,SAAI,aAAa,SAAS;AAAA,MAC/B,MAAM,QAAQ;AAAA,IAChB;AAAA,IAEA,uBACE,gBAEE,qBAFF;AAAA,MAAK,WAAU;AAAA,MAAM,WAAW,UAAU;AAAA,MAAiB,IAAI;AAAA,MAA/D;AAAA,KAEE;AAAA,GAEL;AAAA,EAED,iBAAiB,qBAAM,KACrB,qBAAM,WAAW,GAAG,YAAY,QAAQ;AAAA,IACtC,MAAM,QAAQ,yBAAS;AAAA,IACvB,QAAQ,eAAe,aAAa,wBAAY;AAAA,MAC9C,UAAU,CAAC,QAAQ;AAAA,QACjB,OAAO,EAAE,eAAe,IAAI,eAAe,UAAU,IAAI,SAAS;AAAA;AAAA,MAEpE,wBAAwB;AAAA,MACxB,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAAA,IAC3C,CAAC;AAAA,IACD,MAAM,kBAAkB,CAAC,WAAiB;AAAA,MACxC,MAAM,YACJ,gBAAgB,MAAM,IAClB,OAAM,QAAQ,WAAW,QACzB,OAAM,QAAQ,SAAS,SACrB,OAAM,QAAQ,KAAK,OACnB,OAAM,QAAQ,KAAK;AAAA,MAC3B,OAAO;AAAA;AAAA,IAGT,MAAM,OAA+B;AAAA,MACnC,0BAA0B,gBAAgB,KAAK;AAAA,IACjD;AAAA,IAEA,uBACE,gBAaE,qBAbF;AAAA,MACE,IAAI;AAAA,WACC;AAAA,QACH,OAAO;AAAA,QACP,SAAS;AAAA,QACT,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,YAAY;AAAA,MACd;AAAA,MACA,cAAY;AAAA,MACZ;AAAA,MAVF;AAAA,KAaE;AAAA,GAEL,CACH;AAAA,EACA,UAAU,qBAAM,KAAK,GAAG,eAAe;AAAA,IACrC,uBACE,gBAsBE,0BAtBF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,WAAW;AAAA,UACT,iBAAiB,CAAC,UAAU;AAAA,YAE1B,OAAO,MAAM,QAAQ,SAAS,SAC1B,YACA;AAAA;AAAA,QAER;AAAA,MACF;AAAA,MAnBF;AAAA,KAsBE;AAAA,GAEL;AAAA,EACD,yBAAyB,qBAAM,KAAK,GAAG,eAAe;AAAA,IACpD,QAAQ,kBAAkB,0BAAc;AAAA,MACtC,UAAU,CAAC,UAAU;AAAA,QACnB,OAAO;AAAA,UACL,eAAe,MAAM,cAAc,kBAAkB,EAAE;AAAA,QACzD;AAAA;AAAA,MAEF,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAAA,MACzC,wBAAwB;AAAA,IAC1B,CAAC;AAAA,IACD,uBACE,gBAiBE,0BAjBF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV,IAAI;AAAA,QACF,iBAAiB,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA,MACvD;AAAA,MALF,0BAOE,gBASE,2BATF;AAAA,QACE,WAAU;AAAA,QACV,WAAU;AAAA,QACV,SAAS;AAAA,QACT,IAAI;AAAA,UACF,SAAS;AAAA,QACX;AAAA,QANF;AAAA,OASE;AAAA,KACF;AAAA,GAEL;AAAA,EACD,MAAM,qBAAM,KACV,qBAAM,WAAW,SAAS,IAAI,GAAG,mBAAmB,YAAY,KAAK;AAAA,IACnE;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,yBAAa;AAAA,MACf,UAAU,CAAC,MAAM,UAAU;AAAA,QACzB,MAAM,QAAQ,KAAK,OAAO;AAAA,QAC1B,OAAO;AAAA,UACL,UAAU,MAAM;AAAA,UAChB,cAAc,MAAM;AAAA,UACpB,QAAQ,MAAM;AAAA,UACd,cAAc,MAAM;AAAA,UACpB,OAAO,MAAM;AAAA,UACb,0BACE,MAAM,cAAc,uBAAuB,OAAO;AAAA,QACtD;AAAA;AAAA,MAEF,wBAAwB;AAAA,MACxB,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAAA,IAC3C,CAAC;AAAA,IAED,uBACE,gBA8CE,2BA9CF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV;AAAA,MACA,OAAO,EAAE,OAAO,oBAAoB,SAAS,MAAM;AAAA,MACnD,IAAI;AAAA,QACF,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,QAAQ,WAAW,IAAI;AAAA,QACvB,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cACI,aAAa,YAAY,iBAAkB,cAC5C,YACC,gBAAgB,4BACd,CAAC,UAAU,aAAa,MAAM,QAAQ,YACtC;AAAA,QACN,YACE,aAAa,UAAU,eACnB,CAAC,UAAU,aAAa,MAAM,QAAQ,YACtC;AAAA,QACN,sBAAsB;AAAA,UACpB,iBAAiB,CAAC,UAAU;AAAA,YAE1B,OAAO,MAAM,QAAQ,SAAS,SAC1B,YACA;AAAA;AAAA,UAEN,QAAQ,WAAW,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,MA3CF;AAAA,KA8CE;AAAA,GAEL,CACH;AAAA,EACA,mBAAmB,GAAG,eAAe;AAAA,IACnC,MAAM,QAAQ,0BAAc;AAAA,MAC1B,UAAU,CAAC,UAAU;AAAA,QACnB,KAAK,MAAM,cAAc,uBAAuB,QAAQ,GAAG;AAAA,UACzD;AAAA,QACF;AAAA,QACA,OAAO,aAAa,SAChB,MAAM,cAAc,iBAAiB,IACrC,MAAM,cAAc,kBAAkB;AAAA;AAAA,IAE9C,CAAC;AAAA,IAED,IAAI,UAAU,WAAW;AAAA,MACvB,OAAO;AAAA,IACT;AAAA,IAEA,MAAM,QAAuB;AAAA,MAC3B;AAAA,OACC,WAAW;AAAA,MACZ,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,IACjB;AAAA,IAEA,IAAI,aAAa,QAAQ;AAAA,MACvB,MAAM,YACJ;AAAA,IACJ,EAAO,SAAI,aAAa,SAAS;AAAA,MAC/B,MAAM,YACJ;AAAA,IACJ;AAAA,IACA,uBAAO,gBAAC,OAAD;AAAA,MAAK,WAAW,UAAU;AAAA,MAAoB;AAAA,KAAc;AAAA;AAEvE;AAEA,IAAM,kBAAkB,qBAAM,KAC5B,qBAAM,WAMJ,GAAG,mBAAmB,YAAY,QAAQ;AAAA,EAC1C;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,wBAAY;AAAA,IACd,UAAU,GAAG,SAAS,oBAAoB;AAAA,MACxC,MAAM,QAAQ,QAAQ;AAAA,MACtB,OAAO;AAAA,QACL,0BACE,cAAc,cAAc,uBAAuB,OAAO;AAAA,QAC5D,UAAU,QAAQ,OAAO;AAAA,QACzB,UAAU,MAAM;AAAA,QAChB,OAAO,MAAM;AAAA,QACb,QAAQ,MAAM;AAAA,QACd,cAAc,MAAM;AAAA,QACpB,cAAc,MAAM;AAAA,MACtB;AAAA;AAAA,IAEF,wBAAwB;AAAA,IACxB,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAAA,EAC3C,CAAC;AAAA,EAED,uBACE,gBAwCE,2BAxCF;AAAA,IACE;AAAA,IACA,WAAU;AAAA,IACV,WAAU;AAAA,IACV,kBAAgB;AAAA,IAChB,kBAAgB;AAAA,IAChB,OAAO,EAAE,OAAO,oBAAoB,SAAS,MAAM;AAAA,IACnD,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,QAAQ,WAAW,IAAI;AAAA,MACvB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,iBAAiB,WACb,CAAC,UAAU,MAAM,QAAQ,WAAW,QACpC;AAAA,MACJ,cACI,aAAa,YAAY,iBAAkB,cAC5C,YACC,gBAAgB,4BACd,CAAC,UAAU,aAAa,MAAM,QAAQ,YACtC;AAAA,MACN,YACE,aAAa,UAAU,eACnB,CAAC,UAAU,aAAa,MAAM,QAAQ,YACtC;AAAA,IACR;AAAA,IAnCF,0BAqCE,gBAEE,OAFF;AAAA,MAAK,OAAO,EAAE,MAAM,GAAG,SAAS,QAAQ,gBAAgB,aAAa;AAAA,MAArE;AAAA,KAEE;AAAA,GACF;AAAA,CAEL,CACH;",
+  "debugId": "BAF6A6599BF2E2EB64756E2164756E21",
   "names": []
 }

package/dist/cjs/header_pin_buttons.cjs

@@ -36,10 +36,14 @@ var import_core = require("@rttui/core");
 var import_md = require("react-icons/md");
 var jsx_runtime = require("react/jsx-runtime");
 var HeaderPinButtons = () => {
-  const { isPinned, canPin } = import_core.useColProps(({ vheader }) => ({
-    isPinned: vheader.getState().isPinned,
-    canPin: vheader.header().column.getCanPin()
-  }));
+  const { isPinned, canPin } = import_core.useColProps({
+    callback: ({ vheader }) => ({
+      isPinned: vheader.state.isPinned,
+      canPin: vheader.header.column.getCanPin()
+    }),
+    dependencies: [{ type: "tanstack_table" }],
+    areCallbackOutputEqual: import_core.shallowEqual
+  });
   const headerRef = import_core.useColRef();
   if (!canPin) {
     return null;
@@ -59,7 +63,7 @@ var HeaderPinButtons = () => {
           opacity: 0.5
         },
         onClick: () => {
-          headerRef.current.column.pin("left");
+          headerRef().column.pin("left");
         },
         children: /* @__PURE__ */ jsx_runtime.jsx(import_md.MdChevronLeft, {})
       }) : null,
@@ -75,7 +79,7 @@ var HeaderPinButtons = () => {
           opacity: 0.7
         },
         onClick: () => {
-          headerRef.current.column.pin(false);
+          headerRef().column.pin(false);
         },
         children: /* @__PURE__ */ jsx_runtime.jsx(import_md.MdClose, {})
       }) : null,
@@ -91,7 +95,7 @@ var HeaderPinButtons = () => {
           opacity: 0.5
         },
         onClick: () => {
-          headerRef.current.column.pin("right");
+          headerRef().column.pin("right");
         },
         children: /* @__PURE__ */ jsx_runtime.jsx(import_md.MdChevronRight, {})
       }) : null
@@ -99,4 +103,4 @@ var HeaderPinButtons = () => {
   });
 };
 
-//# debugId=A77F7618C9F2C38B64756E2164756E21
+//# debugId=85A337EDBD27329664756E2164756E21

package/dist/cjs/header_pin_buttons.cjs.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../../src/header_pin_buttons.tsx"],
   "sourcesContent": [
-    "import { useColProps, useColRef } from \"@rttui/core\";\nimport { MdChevronLeft, MdChevronRight, MdClose } from \"react-icons/md\";\n\nexport const HeaderPinButtons = () => {\n  const { isPinned, canPin } = useColProps(({ vheader }) => ({\n    isPinned: vheader.getState().isPinned,\n    canPin: vheader.header().column.getCanPin(),\n  }));\n\n  const headerRef = useColRef();\n  if (!canPin) {\n    return null;\n  }\n  return (\n    <div style={{ display: \"flex\", gap: \"-4px\", justifyContent: \"flex-start\" }}>\n      {isPinned !== \"start\" ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.5,\n          }}\n          onClick={() => {\n            headerRef.current.column.pin(\"left\");\n          }}\n        >\n          <MdChevronLeft />\n        </button>\n      ) : null}\n      {isPinned ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.7,\n          }}\n          onClick={() => {\n            headerRef.current.column.pin(false);\n          }}\n        >\n          <MdClose />\n        </button>\n      ) : null}\n      {isPinned !== \"end\" ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.5,\n          }}\n          onClick={() => {\n            headerRef.current.column.pin(\"right\");\n          }}\n        >\n          <MdChevronRight />\n        </button>\n      ) : null}\n    </div>\n  );\n};\n"
+    "import { shallowEqual, useColProps, useColRef } from \"@rttui/core\";\nimport { MdChevronLeft, MdChevronRight, MdClose } from \"react-icons/md\";\n\nexport const HeaderPinButtons = () => {\n  const { isPinned, canPin } = useColProps({\n    callback: ({ vheader }) => ({\n      isPinned: vheader.state.isPinned,\n      canPin: vheader.header.column.getCanPin(),\n    }),\n    dependencies: [{ type: \"tanstack_table\" }],\n    areCallbackOutputEqual: shallowEqual,\n  });\n\n  const headerRef = useColRef();\n  if (!canPin) {\n    return null;\n  }\n  return (\n    <div style={{ display: \"flex\", gap: \"-4px\", justifyContent: \"flex-start\" }}>\n      {isPinned !== \"start\" ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.5,\n          }}\n          onClick={() => {\n            headerRef().column.pin(\"left\");\n          }}\n        >\n          <MdChevronLeft />\n        </button>\n      ) : null}\n      {isPinned ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.7,\n          }}\n          onClick={() => {\n            headerRef().column.pin(false);\n          }}\n        >\n          <MdClose />\n        </button>\n      ) : null}\n      {isPinned !== \"end\" ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.5,\n          }}\n          onClick={() => {\n            headerRef().column.pin(\"right\");\n          }}\n        >\n          <MdChevronRight />\n        </button>\n      ) : null}\n    </div>\n  );\n};\n"
   ],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAuC,IAAvC;AACuD,IAAvD;AAAA;AAEO,IAAM,mBAAmB,MAAM;AAAA,EACpC,QAAQ,UAAU,WAAW,wBAAY,GAAG,eAAe;AAAA,IACzD,UAAU,QAAQ,SAAS,EAAE;AAAA,IAC7B,QAAQ,QAAQ,OAAO,EAAE,OAAO,UAAU;AAAA,EAC5C,EAAE;AAAA,EAEF,MAAM,YAAY,sBAAU;AAAA,EAC5B,KAAK,QAAQ;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,uBACE,iBA0DE,OA1DF;AAAA,IAAK,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,gBAAgB,aAAa;AAAA,IAAzE,UA0DE;AAAA,MAzDC,aAAa,0BACZ,gBAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,QAAQ,OAAO,IAAI,MAAM;AAAA;AAAA,QAZvC,0BAeE,gBAAC,yBAAD,EAAe;AAAA,OACf,IACA;AAAA,MACH,2BACC,gBAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,QAAQ,OAAO,IAAI,KAAK;AAAA;AAAA,QAZtC,0BAeE,gBAAC,mBAAD,EAAS;AAAA,OACT,IACA;AAAA,MACH,aAAa,wBACZ,gBAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,QAAQ,OAAO,IAAI,OAAO;AAAA;AAAA,QAZxC,0BAeE,gBAAC,0BAAD,EAAgB;AAAA,OAChB,IACA;AAAA;AAAA,GACJ;AAAA;",
-  "debugId": "A77F7618C9F2C38B64756E2164756E21",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAqD,IAArD;AACuD,IAAvD;AAAA;AAEO,IAAM,mBAAmB,MAAM;AAAA,EACpC,QAAQ,UAAU,WAAW,wBAAY;AAAA,IACvC,UAAU,GAAG,eAAe;AAAA,MAC1B,UAAU,QAAQ,MAAM;AAAA,MACxB,QAAQ,QAAQ,OAAO,OAAO,UAAU;AAAA,IAC1C;AAAA,IACA,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAAA,IACzC,wBAAwB;AAAA,EAC1B,CAAC;AAAA,EAED,MAAM,YAAY,sBAAU;AAAA,EAC5B,KAAK,QAAQ;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,uBACE,iBA0DE,OA1DF;AAAA,IAAK,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,gBAAgB,aAAa;AAAA,IAAzE,UA0DE;AAAA,MAzDC,aAAa,0BACZ,gBAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,EAAE,OAAO,IAAI,MAAM;AAAA;AAAA,QAZjC,0BAeE,gBAAC,yBAAD,EAAe;AAAA,OACf,IACA;AAAA,MACH,2BACC,gBAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,EAAE,OAAO,IAAI,KAAK;AAAA;AAAA,QAZhC,0BAeE,gBAAC,mBAAD,EAAS;AAAA,OACT,IACA;AAAA,MACH,aAAa,wBACZ,gBAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,EAAE,OAAO,IAAI,OAAO;AAAA;AAAA,QAZlC,0BAeE,gBAAC,0BAAD,EAAgB;AAAA,OAChB,IACA;AAAA;AAAA,GACJ;AAAA;",
+  "debugId": "85A337EDBD27329664756E2164756E21",
   "names": []
 }

package/dist/cjs/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@rttui/skin-anocca",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "type": "commonjs"
 }

package/dist/cjs/resizer.cjs

@@ -49,14 +49,19 @@ var import_material = require("@mui/material");
 var import_core = require("@rttui/core");
 var import_core2 = require("@rttui/core");
 var import_react = __toESM(require("react"));
+var import_core3 = require("@rttui/core");
 var jsx_runtime = require("react/jsx-runtime");
 function Resizer() {
   const crushHeader = import_core.useCrushHeader();
-  const { canResize, isResizing } = import_core2.useColProps(({ column }) => {
-    return {
-      canResize: column.getCanResize(),
-      isResizing: column.getIsResizing()
-    };
+  const { canResize, isResizing } = import_core2.useColProps({
+    callback: ({ column }) => {
+      return {
+        canResize: column.getCanResize(),
+        isResizing: column.getIsResizing()
+      };
+    },
+    areCallbackOutputEqual: import_core3.shallowEqual,
+    dependencies: [{ type: "tanstack_table" }]
   });
   const colRef = import_core.useColRef();
   import_react.default.useEffect(() => {
@@ -80,11 +85,13 @@ function Resizer() {
   }
   return /* @__PURE__ */ jsx_runtime.jsx(jsx_runtime.Fragment, {
     children: canResize && /* @__PURE__ */ jsx_runtime.jsx(import_material.Box, {
-      onDoubleClick: () => {
-        crushHeader(colRef.current.header);
+      onDoubleClick: (ev) => {
+        crushHeader(colRef().header);
+        ev.stopPropagation();
+        ev.preventDefault();
       },
-      onMouseDown: (ev) => colRef.current.header.getResizeHandler()(ev),
-      onTouchStart: (ev) => colRef.current.header.getResizeHandler()(ev),
+      onMouseDown: (ev) => colRef().header.getResizeHandler()(ev),
+      onTouchStart: (ev) => colRef().header.getResizeHandler()(ev),
       className: `resizer ${isResizing ? "isResizing" : ""}`,
       sx: {
         position: "absolute",
@@ -108,4 +115,4 @@ function Resizer() {
   });
 }
 
-//# debugId=680EECB07A9325B764756E2164756E21
+//# debugId=0645AE5FD94845BE64756E2164756E21

package/dist/cjs/resizer.cjs.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../../src/resizer.tsx"],
   "sourcesContent": [
-    "import { Box } from \"@mui/material\";\nimport { useColRef, useCrushHeader } from \"@rttui/core\";\nimport { useColProps } from \"@rttui/core\";\nimport React from \"react\";\n\nexport function Resizer() {\n  const crushHeader = useCrushHeader();\n\n  const { canResize, isResizing } = useColProps(({ column }) => {\n    return {\n      canResize: column.getCanResize(),\n      isResizing: column.getIsResizing(),\n    };\n  });\n\n  const colRef = useColRef();\n\n  React.useEffect(() => {\n    if (!isResizing) {\n      return;\n    }\n    const preventDefault = (e: Event) => {\n      e.preventDefault();\n    };\n    document.body.addEventListener(\"select\", preventDefault);\n    document.body.addEventListener(\"selectstart\", preventDefault);\n    document.body.style.userSelect = \"none\";\n    return () => {\n      document.body.removeEventListener(\"select\", preventDefault);\n      document.body.removeEventListener(\"selectstart\", preventDefault);\n      document.body.style.userSelect = \"auto\";\n    };\n  }, [isResizing]);\n\n  if (!canResize) {\n    return null;\n  }\n\n  return (\n    <>\n      {canResize && (\n        <Box\n          {...{\n            onDoubleClick: () => {\n              crushHeader(colRef.current.header);\n            },\n            onMouseDown: (ev: any) => colRef.current.header.getResizeHandler()(ev),\n            onTouchStart: (ev: any) => colRef.current.header.getResizeHandler()(ev),\n            className: `resizer ${isResizing ? \"isResizing\" : \"\"}`,\n            sx: {\n              position: \"absolute\",\n              right: 0,\n              top: 0,\n              bottom: 0,\n              width: \"3px\",\n              cursor: \"col-resize\",\n              userSelect: \"none\",\n              touchAction: \"none\",\n              opacity: 0,\n              backgroundColor: (theme) => theme.palette.text.secondary,\n              transition: \"opacity 0.2s\",\n              \"&.isResizing\": {\n                backgroundColor: (theme) => theme.palette.primary.main,\n                opacity: 1,\n                width: \"1px\",\n              },\n            },\n          }}\n        />\n      )}\n    </>\n  );\n}\n"
+    "import { Box } from \"@mui/material\";\nimport { useColRef, useCrushHeader } from \"@rttui/core\";\nimport { useColProps } from \"@rttui/core\";\nimport React from \"react\";\nimport { shallowEqual } from \"@rttui/core\";\nexport function Resizer() {\n  const crushHeader = useCrushHeader();\n\n  const { canResize, isResizing } = useColProps({\n    callback: ({ column }) => {\n      return {\n        canResize: column.getCanResize(),\n        isResizing: column.getIsResizing(),\n      };\n    },\n    areCallbackOutputEqual: shallowEqual,\n    dependencies: [{ type: \"tanstack_table\" }],\n  });\n\n  const colRef = useColRef();\n\n  React.useEffect(() => {\n    if (!isResizing) {\n      return;\n    }\n    const preventDefault = (e: Event) => {\n      e.preventDefault();\n    };\n    document.body.addEventListener(\"select\", preventDefault);\n    document.body.addEventListener(\"selectstart\", preventDefault);\n    document.body.style.userSelect = \"none\";\n    return () => {\n      document.body.removeEventListener(\"select\", preventDefault);\n      document.body.removeEventListener(\"selectstart\", preventDefault);\n      document.body.style.userSelect = \"auto\";\n    };\n  }, [isResizing]);\n\n  if (!canResize) {\n    return null;\n  }\n\n  return (\n    <>\n      {canResize && (\n        <Box\n          onDoubleClick={(ev) => {\n            crushHeader(colRef().header);\n            ev.stopPropagation();\n            ev.preventDefault();\n          }}\n          onMouseDown={(ev: any) => colRef().header.getResizeHandler()(ev)}\n          onTouchStart={(ev: any) => colRef().header.getResizeHandler()(ev)}\n          className={`resizer ${isResizing ? \"isResizing\" : \"\"}`}\n          sx={{\n            position: \"absolute\",\n            right: 0,\n            top: 0,\n            bottom: 0,\n            width: \"3px\",\n            cursor: \"col-resize\",\n            userSelect: \"none\",\n            touchAction: \"none\",\n            opacity: 0,\n            backgroundColor: (theme) => theme.palette.text.secondary,\n            transition: \"opacity 0.2s\",\n            \"&.isResizing\": {\n              backgroundColor: (theme) => theme.palette.primary.main,\n              opacity: 1,\n              width: \"1px\",\n            },\n          }}\n        />\n      )}\n    </>\n  );\n}\n"
   ],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAoB,IAApB;AAC0C,IAA1C;AAC4B,IAA5B;AACkB,IAAlB;AAAA;AAEO,SAAS,OAAO,GAAG;AAAA,EACxB,MAAM,cAAc,2BAAe;AAAA,EAEnC,QAAQ,WAAW,eAAe,yBAAY,GAAG,aAAa;AAAA,IAC5D,OAAO;AAAA,MACL,WAAW,OAAO,aAAa;AAAA,MAC/B,YAAY,OAAO,cAAc;AAAA,IACnC;AAAA,GACD;AAAA,EAED,MAAM,SAAS,sBAAU;AAAA,EAEzB,qBAAM,UAAU,MAAM;AAAA,IACpB,KAAK,YAAY;AAAA,MACf;AAAA,IACF;AAAA,IACA,MAAM,iBAAiB,CAAC,MAAa;AAAA,MACnC,EAAE,eAAe;AAAA;AAAA,IAEnB,SAAS,KAAK,iBAAiB,UAAU,cAAc;AAAA,IACvD,SAAS,KAAK,iBAAiB,eAAe,cAAc;AAAA,IAC5D,SAAS,KAAK,MAAM,aAAa;AAAA,IACjC,OAAO,MAAM;AAAA,MACX,SAAS,KAAK,oBAAoB,UAAU,cAAc;AAAA,MAC1D,SAAS,KAAK,oBAAoB,eAAe,cAAc;AAAA,MAC/D,SAAS,KAAK,MAAM,aAAa;AAAA;AAAA,KAElC,CAAC,UAAU,CAAC;AAAA,EAEf,KAAK,WAAW;AAAA,IACd,OAAO;AAAA,EACT;AAAA,EAEA,uBACE;AAAA,cACG,6BACC,gBAAC,qBAAD;AAAA,MAEI,eAAe,MAAM;AAAA,QACnB,YAAY,OAAO,QAAQ,MAAM;AAAA;AAAA,MAEnC,aAAa,CAAC,OAAY,OAAO,QAAQ,OAAO,iBAAiB,EAAE,EAAE;AAAA,MACrE,cAAc,CAAC,OAAY,OAAO,QAAQ,OAAO,iBAAiB,EAAE,EAAE;AAAA,MACtE,WAAW,WAAW,aAAa,eAAe;AAAA,MAClD,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,SAAS;AAAA,QACT,iBAAiB,CAAC,UAAU,MAAM,QAAQ,KAAK;AAAA,QAC/C,YAAY;AAAA,QACZ,gBAAgB;AAAA,UACd,iBAAiB,CAAC,UAAU,MAAM,QAAQ,QAAQ;AAAA,UAClD,SAAS;AAAA,UACT,OAAO;AAAA,QACT;AAAA,MACF;AAAA,KAEJ;AAAA,GAEF;AAAA;",
-  "debugId": "680EECB07A9325B764756E2164756E21",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAoB,IAApB;AAC0C,IAA1C;AAC4B,IAA5B;AACkB,IAAlB;AAC6B,IAA7B;AAAA;AACO,SAAS,OAAO,GAAG;AAAA,EACxB,MAAM,cAAc,2BAAe;AAAA,EAEnC,QAAQ,WAAW,eAAe,yBAAY;AAAA,IAC5C,UAAU,GAAG,aAAa;AAAA,MACxB,OAAO;AAAA,QACL,WAAW,OAAO,aAAa;AAAA,QAC/B,YAAY,OAAO,cAAc;AAAA,MACnC;AAAA;AAAA,IAEF,wBAAwB;AAAA,IACxB,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAAA,EAC3C,CAAC;AAAA,EAED,MAAM,SAAS,sBAAU;AAAA,EAEzB,qBAAM,UAAU,MAAM;AAAA,IACpB,KAAK,YAAY;AAAA,MACf;AAAA,IACF;AAAA,IACA,MAAM,iBAAiB,CAAC,MAAa;AAAA,MACnC,EAAE,eAAe;AAAA;AAAA,IAEnB,SAAS,KAAK,iBAAiB,UAAU,cAAc;AAAA,IACvD,SAAS,KAAK,iBAAiB,eAAe,cAAc;AAAA,IAC5D,SAAS,KAAK,MAAM,aAAa;AAAA,IACjC,OAAO,MAAM;AAAA,MACX,SAAS,KAAK,oBAAoB,UAAU,cAAc;AAAA,MAC1D,SAAS,KAAK,oBAAoB,eAAe,cAAc;AAAA,MAC/D,SAAS,KAAK,MAAM,aAAa;AAAA;AAAA,KAElC,CAAC,UAAU,CAAC;AAAA,EAEf,KAAK,WAAW;AAAA,IACd,OAAO;AAAA,EACT;AAAA,EAEA,uBACE;AAAA,cACG,6BACC,gBAAC,qBAAD;AAAA,MACE,eAAe,CAAC,OAAO;AAAA,QACrB,YAAY,OAAO,EAAE,MAAM;AAAA,QAC3B,GAAG,gBAAgB;AAAA,QACnB,GAAG,eAAe;AAAA;AAAA,MAEpB,aAAa,CAAC,OAAY,OAAO,EAAE,OAAO,iBAAiB,EAAE,EAAE;AAAA,MAC/D,cAAc,CAAC,OAAY,OAAO,EAAE,OAAO,iBAAiB,EAAE,EAAE;AAAA,MAChE,WAAW,WAAW,aAAa,eAAe;AAAA,MAClD,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,SAAS;AAAA,QACT,iBAAiB,CAAC,UAAU,MAAM,QAAQ,KAAK;AAAA,QAC/C,YAAY;AAAA,QACZ,gBAAgB;AAAA,UACd,iBAAiB,CAAC,UAAU,MAAM,QAAQ,QAAQ;AAAA,UAClD,SAAS;AAAA,UACT,OAAO;AAAA,QACT;AAAA,MACF;AAAA,KACF;AAAA,GAEF;AAAA;",
+  "debugId": "0645AE5FD94845BE64756E2164756E21",
   "names": []
 }

package/dist/mjs/anocca_skin.mjs

@@ -10,13 +10,15 @@ import {
   useTheme
 } from "@mui/material";
 import {
+  shallowEqual,
+  strictEqual,
   useCellProps,
   useColProps,
   useRowProps,
   useTableContext,
-  useTableCssVars
+  useTableCssVars,
+  useTableProps
 } from "@rttui/core";
-import { shallowEqual, useTableProps } from "@rttui/core";
 import React from "react";
 import { TableHeaderRow } from "./table_header_row.mjs";
 import { jsx } from "react/jsx-runtime";
@@ -24,8 +26,18 @@ var AnoccaSkin = {
   rowHeight: 32,
   headerRowHeight: 32,
   footerRowHeight: 32,
-  OverlayContainer: ({ children }) => {
-    const { width, height } = useTableContext();
+  OverlayContainer: React.memo(function OverlayContainer({ children }) {
+    const { width, height } = useTableProps({
+      selector: (props) => props.uiProps,
+      callback: ({ width: width2, height: height2 }) => {
+        return {
+          width: width2,
+          height: height2
+        };
+      },
+      dependencies: [{ type: "ui_props" }],
+      areCallbackOutputEqual: shallowEqual
+    });
     const cssVars = useTableCssVars();
     return /* @__PURE__ */ jsx("div", {
       className: "rttui-overlay-container",
@@ -37,7 +49,7 @@ var AnoccaSkin = {
       },
       children
     });
-  },
+  }),
   OuterContainer: ({ children }) => {
     const { tableContainerRef } = useTableContext();
     return /* @__PURE__ */ jsx(Paper, {
@@ -145,7 +157,7 @@ var AnoccaSkin = {
       children
     });
   },
-  PinnedCols: ({ children, position }) => {
+  PinnedCols: React.memo(({ children, position }) => {
     const style = {
       position: "sticky",
       zIndex: 3,
@@ -162,14 +174,18 @@ var AnoccaSkin = {
       sx: style,
       children
     });
-  },
-  TableRowWrapper: React.forwardRef(({ children }, ref) => {
+  }),
+  TableRowWrapper: React.memo(React.forwardRef(({ children }, ref) => {
     const theme = useTheme();
-    const { flatIndex } = useRowProps((row) => {
-      return { flatIndex: row.flatIndex };
+    const { relativeIndex, rowIndex } = useRowProps({
+      callback: (row) => {
+        return { relativeIndex: row.relativeIndex, rowIndex: row.rowIndex };
+      },
+      areCallbackOutputEqual: shallowEqual,
+      dependencies: [{ type: "tanstack_table" }]
     });
     const backgroundColor = (theme2) => {
-      const baseColor = flatIndex % 2 === 0 ? theme2.palette.background.paper : theme2.palette.mode === "dark" ? theme2.palette.grey[900] : theme2.palette.grey[100];
+      const baseColor = relativeIndex % 2 === 0 ? theme2.palette.background.paper : theme2.palette.mode === "dark" ? theme2.palette.grey[900] : theme2.palette.grey[100];
       return baseColor;
     };
     const vars = {
@@ -184,12 +200,12 @@ var AnoccaSkin = {
         justifyContent: "flex-start",
         alignItems: "stretch"
       },
-      "data-index": flatIndex,
+      "data-index": rowIndex,
       ref,
       children
     });
-  }),
-  TableRow: ({ children }) => {
+  })),
+  TableRow: React.memo(({ children }) => {
     return /* @__PURE__ */ jsx(TableRow, {
       component: "div",
       className: "table-row",
@@ -209,10 +225,16 @@ var AnoccaSkin = {
       },
       children
     });
-  },
-  TableRowExpandedContent: ({ children }) => {
-    const { leafColLength } = useTableProps((table) => {
-      return { leafColLength: table.getAllLeafColumns().length };
+  }),
+  TableRowExpandedContent: React.memo(({ children }) => {
+    const { leafColLength } = useTableProps({
+      callback: (table) => {
+        return {
+          leafColLength: table.tanstackTable.getAllLeafColumns().length
+        };
+      },
+      dependencies: [{ type: "tanstack_table" }],
+      areCallbackOutputEqual: strictEqual
     });
     return /* @__PURE__ */ jsx(TableRow, {
       component: "div",
@@ -230,8 +252,8 @@ var AnoccaSkin = {
         children
       })
     });
-  },
-  Cell: React.memo(React.forwardRef(({ isMeasuring, children }, ref) => {
+  }),
+  Cell: React.memo(React.forwardRef(function Cell({ isMeasureInstance, children }, ref) {
     const {
       isPinned,
       isLastPinned,
@@ -239,26 +261,26 @@ var AnoccaSkin = {
       isLastCenter,
       width,
       isSomeColumnsPinnedRight
-    } = useCellProps((cell, table) => {
-      const state = cell.vheader.getState();
-      return {
-        isPinned: state.isPinned,
-        isLastPinned: state.isLastPinned,
-        isLast: state.isLast,
-        isLastCenter: state.isLastCenter,
-        width: state.width,
-        isSomeColumnsPinnedRight: table.getIsSomeColumnsPinned("right")
-      };
-    }, {
-      arePropsEqual: (prev, next) => {
-        return shallowEqual(prev, next, ["content"]);
-      }
+    } = useCellProps({
+      callback: (cell, table) => {
+        const state = cell.header.state;
+        return {
+          isPinned: state.isPinned,
+          isLastPinned: state.isLastPinned,
+          isLast: state.isLast,
+          isLastCenter: state.isLastCenter,
+          width: state.width,
+          isSomeColumnsPinnedRight: table.tanstackTable.getIsSomeColumnsPinned("right")
+        };
+      },
+      areCallbackOutputEqual: shallowEqual,
+      dependencies: [{ type: "tanstack_table" }]
     });
     return /* @__PURE__ */ jsx(TableCell, {
       className: "td",
       component: "div",
       ref,
-      style: { width: isMeasuring ? "auto" : width },
+      style: { width: isMeasureInstance ? "auto" : width },
       sx: {
         height: "var(--row-height)",
         overflow: "hidden",
@@ -291,11 +313,13 @@ var AnoccaSkin = {
     });
   })),
   PinnedColsOverlay: ({ position }) => {
-    const width = useTableProps((table) => {
-      if (!table.getIsSomeColumnsPinned(position)) {
-        return;
+    const width = useTableProps({
+      callback: (table) => {
+        if (!table.tanstackTable.getIsSomeColumnsPinned(position)) {
+          return;
+        }
+        return position === "left" ? table.tanstackTable.getLeftTotalSize() : table.tanstackTable.getRightTotalSize();
       }
-      return position === "left" ? table.getLeftTotalSize() : table.getRightTotalSize();
     });
     if (width === undefined) {
       return null;
@@ -320,7 +344,7 @@ var AnoccaSkin = {
     });
   }
 };
-var TableHeaderCell = React.memo(React.forwardRef(({ isMeasuring, children }, ref) => {
+var TableHeaderCell = React.memo(React.forwardRef(({ isMeasureInstance, children }, ref) => {
   const {
     isSomeColumnsPinnedRight,
     headerId,
@@ -329,17 +353,21 @@ var TableHeaderCell = React.memo(React.forwardRef(({ isMeasuring, children }, re
     isLast,
     isLastPinned,
     isLastCenter
-  } = useColProps(({ vheader, table }) => {
-    const state = vheader.getState();
-    return {
-      isSomeColumnsPinnedRight: table.getIsSomeColumnsPinned("right"),
-      headerId: vheader.id,
-      isPinned: state.isPinned,
-      width: state.width,
-      isLast: state.isLast,
-      isLastPinned: state.isLastPinned,
-      isLastCenter: state.isLastCenter
-    };
+  } = useColProps({
+    callback: ({ vheader, selectorValue }) => {
+      const state = vheader.state;
+      return {
+        isSomeColumnsPinnedRight: selectorValue.tanstackTable.getIsSomeColumnsPinned("right"),
+        headerId: vheader.header.id,
+        isPinned: state.isPinned,
+        width: state.width,
+        isLast: state.isLast,
+        isLastPinned: state.isLastPinned,
+        isLastCenter: state.isLastCenter
+      };
+    },
+    areCallbackOutputEqual: shallowEqual,
+    dependencies: [{ type: "tanstack_table" }]
   });
   return /* @__PURE__ */ jsx(TableCell, {
     ref,
@@ -347,7 +375,7 @@ var TableHeaderCell = React.memo(React.forwardRef(({ isMeasuring, children }, re
     className: "th",
     "data-header-id": headerId,
     "data-is-pinned": isPinned,
-    style: { width: isMeasuring ? "auto" : width },
+    style: { width: isMeasureInstance ? "auto" : width },
     sx: {
       transition: "background-color 0.2s ease",
       whiteSpace: "nowrap",
@@ -377,4 +405,4 @@ export {
   AnoccaSkin
 };
 
-//# debugId=E3F85326C401268564756E2164756E21
+//# debugId=5127F7E8710CBE6564756E2164756E21

package/dist/mjs/anocca_skin.mjs.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../../src/anocca_skin.tsx"],
   "sourcesContent": [
-    "import {\n  Box,\n  Paper,\n  SxProps,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableRow,\n  Theme,\n  useTheme,\n} from \"@mui/material\";\nimport {\n  Skin,\n  useCellProps,\n  useColProps,\n  useRowProps,\n  useTableContext,\n  useTableCssVars,\n} from \"@rttui/core\";\nimport { shallowEqual, useTableProps } from \"@rttui/core\";\nimport React, { CSSProperties } from \"react\";\nimport { TableHeaderRow } from \"./table_header_row.mjs\";\n\nconst AnoccaSkin: Skin = {\n  rowHeight: 32,\n  headerRowHeight: 32,\n  footerRowHeight: 32,\n  OverlayContainer: ({ children }) => {\n    const { width, height } = useTableContext();\n    const cssVars = useTableCssVars();\n    return (\n      <div\n        className=\"rttui-overlay-container\"\n        style={{\n          position: \"relative\",\n          width: width + \"px\",\n          height: height + \"px\",\n          ...cssVars,\n        }}\n      >\n        {children}\n      </div>\n    );\n  },\n  OuterContainer: ({ children }) => {\n    const { tableContainerRef } = useTableContext();\n\n    return (\n      <Paper\n        ref={tableContainerRef}\n        className=\"outer-container\"\n        elevation={2}\n        sx={{\n          overflow: \"auto\",\n          width: \"var(--table-container-width)\",\n          height: \"var(--table-container-height)\",\n          position: \"relative\",\n          contain: \"paint\",\n          willChange: \"transform\",\n          borderRadius: 1,\n        }}\n      >\n        {children}\n      </Paper>\n    );\n  },\n  TableScroller: () => {\n    return (\n      <div\n        className=\"table-scroller\"\n        style={{\n          width: \"var(--table-width)\",\n          height:\n            \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n          position: \"absolute\",\n        }}\n      ></div>\n    );\n  },\n  TableHeader: ({ children }) => {\n    return (\n      <TableHead\n        component=\"div\"\n        className=\"thead\"\n        sx={{\n          position: \"sticky\",\n          top: 0,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-start\",\n          alignItems: \"stretch\",\n        }}\n      >\n        {children}\n      </TableHead>\n    );\n  },\n  TableFooter: ({ children }) => {\n    return (\n      <TableFooter\n        component=\"div\"\n        className=\"table-footer\"\n        sx={{\n          position: \"sticky\",\n          bottom: -1,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n        }}\n      >\n        {children}\n      </TableFooter>\n    );\n  },\n  HeaderRow: TableHeaderRow,\n  HeaderCell: React.memo(\n    React.forwardRef((props, ref) => {\n      return <TableHeaderCell {...props} ref={ref} />;\n    }),\n  ),\n  TableBody: ({ children }) => {\n    return (\n      <TableBody\n        component=\"div\"\n        className=\"table-body\"\n        sx={{\n          position: \"relative\",\n          width: \"var(--table-width)\",\n          height: \"var(--table-height)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-start\",\n          alignItems: \"stretch\",\n        }}\n      >\n        {children}\n      </TableBody>\n    );\n  },\n  PinnedRows: ({ children, position }) => {\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n    };\n    if (position === \"top\") {\n      style.top = \"var(--header-height)\";\n      style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"bottom\") {\n      style.bottom = \"var(--footer-height)\";\n      style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n\n    const Component = position === \"top\" ? TableHead : TableFooter;\n\n    return (\n      <Component\n        component=\"div\"\n        className={`sticky-${position}-rows`}\n        sx={style}\n      >\n        {children}\n      </Component>\n    );\n  },\n  PinnedCols: ({ children, position }) => {\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n      display: \"flex\",\n    };\n\n    if (position === \"left\") {\n      style.left = 0;\n    } else if (position === \"right\") {\n      style.right = 0;\n    }\n\n    return (\n      <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n        {children}\n      </Box>\n    );\n  },\n\n  TableRowWrapper: React.forwardRef(({ children }, ref) => {\n    const theme = useTheme();\n    const { flatIndex } = useRowProps((row) => {\n      return { flatIndex: row.flatIndex };\n    });\n    const backgroundColor = (theme: Theme) => {\n      const baseColor =\n        flatIndex % 2 === 0\n          ? theme.palette.background.paper\n          : theme.palette.mode === \"dark\"\n            ? theme.palette.grey[900]\n            : theme.palette.grey[100];\n      return baseColor;\n    };\n\n    const vars: Record<string, string> = {\n      \"--row-background-color\": backgroundColor(theme),\n    };\n\n    return (\n      <Box\n        sx={{\n          ...vars,\n          width: \"var(--table-width)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-start\",\n          alignItems: \"stretch\",\n        }}\n        data-index={flatIndex}\n        ref={ref}\n      >\n        {children}\n      </Box>\n    );\n  }),\n  TableRow: ({ children }) => {\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"table-row\"\n        sx={{\n          position: \"relative\",\n          width: \"var(--table-width)\",\n          display: \"flex\",\n          height: \"var(--row-height)\",\n          zIndex: 1,\n          boxSizing: \"border-box\",\n          backgroundColor: \"var(--row-background-color)\",\n          \"&:hover\": {\n            backgroundColor: (theme) => {\n              // Always use solid background colors for all cells on hover\n              return theme.palette.mode === \"dark\"\n                ? \"#1e1e52\" // Dark blue solid color\n                : \"#E3F2FD\"; // Light blue solid color\n            },\n          },\n        }}\n      >\n        {children}\n      </TableRow>\n    );\n  },\n  TableRowExpandedContent: ({ children }) => {\n    const { leafColLength } = useTableProps((table) => {\n      return { leafColLength: table.getAllLeafColumns().length };\n    });\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"expanded-row\"\n        sx={{\n          backgroundColor: (theme) => theme.palette.background.default,\n        }}\n      >\n        <TableCell\n          component=\"div\"\n          className=\"expanded-cell\"\n          colSpan={leafColLength}\n          sx={{\n            padding: 2,\n          }}\n        >\n          {children}\n        </TableCell>\n      </TableRow>\n    );\n  },\n  Cell: React.memo(\n    React.forwardRef(({ isMeasuring, children }, ref) => {\n      const {\n        isPinned,\n        isLastPinned,\n        isLast,\n        isLastCenter,\n        width,\n        isSomeColumnsPinnedRight,\n      } = useCellProps(\n        (cell, table) => {\n          const state = cell.vheader.getState();\n          return {\n            isPinned: state.isPinned,\n            isLastPinned: state.isLastPinned,\n            isLast: state.isLast,\n            isLastCenter: state.isLastCenter,\n            width: state.width,\n            isSomeColumnsPinnedRight: table.getIsSomeColumnsPinned(\"right\"),\n          };\n        },\n        {\n          arePropsEqual: (prev, next) => {\n            return shallowEqual(prev, next, [\"content\"]);\n          },\n        },\n      );\n\n      return (\n        <TableCell\n          className=\"td\"\n          component=\"div\"\n          ref={ref}\n          style={{ width: isMeasuring ? \"auto\" : width }}\n          sx={{\n            height: \"var(--row-height)\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n            zIndex: isPinned ? 5 : 0,\n            boxSizing: \"border-box\",\n            fontSize: \"0.875rem\",\n            color: \"text.primary\",\n            alignItems: \"center\",\n            gap: \"8px\",\n            display: \"flex\",\n            justifyContent: \"flex-start\",\n            alignContent: \"center\",\n            padding: \"6px 12px\",\n            backgroundColor: \"var(--row-background-color)\",\n            borderBottom: \"none\",\n            flexShrink: 0,\n            position: \"relative\",\n            borderRight:\n              ((isPinned === \"start\" && !isLastPinned) || !isPinned) &&\n              !isLast &&\n              !(isLastCenter && isSomeColumnsPinnedRight)\n                ? (theme) => `1px solid ${theme.palette.divider}`\n                : undefined,\n            borderLeft:\n              isPinned === \"end\" && !isLastPinned\n                ? (theme) => `1px solid ${theme.palette.divider}`\n                : undefined,\n            \".table-row:hover &\": {\n              backgroundColor: (theme) => {\n                // Always use solid background colors for all cells on hover\n                return theme.palette.mode === \"dark\"\n                  ? \"#1e1e52\" // Dark blue solid color\n                  : \"#E3F2FD\"; // Light blue solid color\n              },\n              zIndex: isPinned ? 2 : 0,\n            },\n          }}\n        >\n          {children}\n        </TableCell>\n      );\n    }),\n  ),\n  PinnedColsOverlay: ({ position }) => {\n    const width = useTableProps((table) => {\n      if (!table.getIsSomeColumnsPinned(position)) {\n        return undefined;\n      }\n      return position === \"left\"\n        ? table.getLeftTotalSize()\n        : table.getRightTotalSize();\n    });\n\n    if (width === undefined) {\n      return null;\n    }\n\n    const style: CSSProperties = {\n      width,\n      [position]: 0,\n      position: \"sticky\",\n      top: 0,\n      bottom: 0,\n      zIndex: 20,\n      pointerEvents: \"none\",\n    };\n\n    if (position === \"left\") {\n      style.boxShadow =\n        \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"right\") {\n      style.boxShadow =\n        \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n    return <div className={`pinned-${position}-overlay`} style={style} />;\n  },\n};\n\nconst TableHeaderCell = React.memo(\n  React.forwardRef<\n    HTMLDivElement,\n    {\n      isMeasuring: boolean;\n      children: React.ReactNode;\n    }\n  >(({ isMeasuring, children }, ref) => {\n    const {\n      isSomeColumnsPinnedRight,\n      headerId,\n      isPinned,\n      width,\n      isLast,\n      isLastPinned,\n      isLastCenter,\n    } = useColProps(({ vheader, table }) => {\n      const state = vheader.getState();\n      return {\n        isSomeColumnsPinnedRight: table.getIsSomeColumnsPinned(\"right\"),\n        headerId: vheader.id,\n        isPinned: state.isPinned,\n        width: state.width,\n        isLast: state.isLast,\n        isLastPinned: state.isLastPinned,\n        isLastCenter: state.isLastCenter,\n      };\n    });\n\n    return (\n      <TableCell\n        ref={ref}\n        component=\"div\"\n        className=\"th\"\n        data-header-id={headerId}\n        data-is-pinned={isPinned}\n        style={{ width: isMeasuring ? \"auto\" : width }}\n        sx={{\n          transition: \"background-color 0.2s ease\",\n          whiteSpace: \"nowrap\",\n          zIndex: isPinned ? 1 : 0,\n          display: \"flex\",\n          overflow: \"hidden\",\n          height: \"var(--header-row-height)\",\n          position: \"relative\",\n          flexShrink: 0,\n          alignItems: \"center\",\n          gap: \"8px\",\n          justifyContent: \"space-between\",\n          padding: \"6px 12px\",\n          boxSizing: \"border-box\",\n          fontWeight: 600,\n          backgroundColor: isPinned\n            ? (theme) => theme.palette.background.paper\n            : \"transparent\",\n          borderRight:\n            ((isPinned === \"start\" && !isLastPinned) || !isPinned) &&\n            !isLast &&\n            !(isLastCenter && isSomeColumnsPinnedRight)\n              ? (theme) => `1px solid ${theme.palette.divider}`\n              : undefined,\n          borderLeft:\n            isPinned === \"end\" && !isLastPinned\n              ? (theme) => `1px solid ${theme.palette.divider}`\n              : undefined,\n        }}\n      >\n        <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n          {children}\n        </div>\n      </TableCell>\n    );\n  }),\n);\n\nexport { AnoccaSkin };\n"
+    "import {\n  Box,\n  Paper,\n  SxProps,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableRow,\n  Theme,\n  useTheme,\n} from \"@mui/material\";\nimport {\n  shallowEqual,\n  Skin,\n  strictEqual,\n  useCellProps,\n  useColProps,\n  useRowProps,\n  useTableContext,\n  useTableCssVars,\n  useTableProps,\n} from \"@rttui/core\";\nimport React, { CSSProperties } from \"react\";\nimport { TableHeaderRow } from \"./table_header_row.mjs\";\n\nconst AnoccaSkin: Skin = {\n  rowHeight: 32,\n  headerRowHeight: 32,\n  footerRowHeight: 32,\n  OverlayContainer: React.memo(function OverlayContainer({ children }) {\n    const { width, height } = useTableProps({\n      selector: (props) => props.uiProps,\n      callback: ({ width, height }) => {\n        return {\n          width,\n          height,\n        };\n      },\n      dependencies: [{ type: \"ui_props\" }],\n      areCallbackOutputEqual: shallowEqual,\n    });\n    const cssVars = useTableCssVars();\n    return (\n      <div\n        className=\"rttui-overlay-container\"\n        style={{\n          position: \"relative\",\n          width: width + \"px\",\n          height: height + \"px\",\n          ...cssVars,\n        }}\n      >\n        {children}\n      </div>\n    );\n  }),\n  OuterContainer: ({ children }) => {\n    const { tableContainerRef } = useTableContext();\n\n    return (\n      <Paper\n        ref={tableContainerRef}\n        className=\"outer-container\"\n        elevation={2}\n        sx={{\n          overflow: \"auto\",\n          width: \"var(--table-container-width)\",\n          height: \"var(--table-container-height)\",\n          position: \"relative\",\n          contain: \"paint\",\n          willChange: \"transform\",\n          borderRadius: 1,\n        }}\n      >\n        {children}\n      </Paper>\n    );\n  },\n  TableScroller: () => {\n    return (\n      <div\n        className=\"table-scroller\"\n        style={{\n          width: \"var(--table-width)\",\n          height:\n            \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n          position: \"absolute\",\n        }}\n      ></div>\n    );\n  },\n  TableHeader: ({ children }) => {\n    return (\n      <TableHead\n        component=\"div\"\n        className=\"thead\"\n        sx={{\n          position: \"sticky\",\n          top: 0,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-start\",\n          alignItems: \"stretch\",\n        }}\n      >\n        {children}\n      </TableHead>\n    );\n  },\n  TableFooter: ({ children }) => {\n    return (\n      <TableFooter\n        component=\"div\"\n        className=\"table-footer\"\n        sx={{\n          position: \"sticky\",\n          bottom: -1,\n          width: \"var(--table-width)\",\n          zIndex: 2,\n          backgroundColor: (theme) => theme.palette.background.paper,\n          boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n        }}\n      >\n        {children}\n      </TableFooter>\n    );\n  },\n  HeaderRow: TableHeaderRow,\n  HeaderCell: React.memo(\n    React.forwardRef((props, ref) => {\n      return <TableHeaderCell {...props} ref={ref} />;\n    }),\n  ),\n  TableBody: ({ children }) => {\n    return (\n      <TableBody\n        component=\"div\"\n        className=\"table-body\"\n        sx={{\n          position: \"relative\",\n          width: \"var(--table-width)\",\n          height: \"var(--table-height)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"flex-start\",\n          alignItems: \"stretch\",\n        }}\n      >\n        {children}\n      </TableBody>\n    );\n  },\n  PinnedRows: ({ children, position }) => {\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n    };\n    if (position === \"top\") {\n      style.top = \"var(--header-height)\";\n      style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"bottom\") {\n      style.bottom = \"var(--footer-height)\";\n      style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n      style.boxShadow =\n        \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n\n    const Component = position === \"top\" ? TableHead : TableFooter;\n\n    return (\n      <Component\n        component=\"div\"\n        className={`sticky-${position}-rows`}\n        sx={style}\n      >\n        {children}\n      </Component>\n    );\n  },\n  PinnedCols: React.memo(({ children, position }) => {\n    const style: SxProps<Theme> = {\n      position: \"sticky\",\n      zIndex: 3,\n      display: \"flex\",\n    };\n\n    if (position === \"left\") {\n      style.left = 0;\n    } else if (position === \"right\") {\n      style.right = 0;\n    }\n\n    return (\n      <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n        {children}\n      </Box>\n    );\n  }),\n\n  TableRowWrapper: React.memo(\n    React.forwardRef(({ children }, ref) => {\n      const theme = useTheme();\n      const { relativeIndex, rowIndex } = useRowProps({\n        callback: (row) => {\n          return { relativeIndex: row.relativeIndex, rowIndex: row.rowIndex };\n        },\n        areCallbackOutputEqual: shallowEqual,\n        dependencies: [{ type: \"tanstack_table\" }],\n      });\n      const backgroundColor = (theme: Theme) => {\n        const baseColor =\n          relativeIndex % 2 === 0\n            ? theme.palette.background.paper\n            : theme.palette.mode === \"dark\"\n              ? theme.palette.grey[900]\n              : theme.palette.grey[100];\n        return baseColor;\n      };\n\n      const vars: Record<string, string> = {\n        \"--row-background-color\": backgroundColor(theme),\n      };\n\n      return (\n        <Box\n          sx={{\n            ...vars,\n            width: \"var(--table-width)\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            justifyContent: \"flex-start\",\n            alignItems: \"stretch\",\n          }}\n          data-index={rowIndex}\n          ref={ref}\n        >\n          {children}\n        </Box>\n      );\n    }),\n  ),\n  TableRow: React.memo(({ children }) => {\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"table-row\"\n        sx={{\n          position: \"relative\",\n          width: \"var(--table-width)\",\n          display: \"flex\",\n          height: \"var(--row-height)\",\n          zIndex: 1,\n          boxSizing: \"border-box\",\n          backgroundColor: \"var(--row-background-color)\",\n          \"&:hover\": {\n            backgroundColor: (theme) => {\n              // Always use solid background colors for all cells on hover\n              return theme.palette.mode === \"dark\"\n                ? \"#1e1e52\" // Dark blue solid color\n                : \"#E3F2FD\"; // Light blue solid color\n            },\n          },\n        }}\n      >\n        {children}\n      </TableRow>\n    );\n  }),\n  TableRowExpandedContent: React.memo(({ children }) => {\n    const { leafColLength } = useTableProps({\n      callback: (table) => {\n        return {\n          leafColLength: table.tanstackTable.getAllLeafColumns().length,\n        };\n      },\n      dependencies: [{ type: \"tanstack_table\" }],\n      areCallbackOutputEqual: strictEqual,\n    });\n    return (\n      <TableRow\n        component=\"div\"\n        className=\"expanded-row\"\n        sx={{\n          backgroundColor: (theme) => theme.palette.background.default,\n        }}\n      >\n        <TableCell\n          component=\"div\"\n          className=\"expanded-cell\"\n          colSpan={leafColLength}\n          sx={{\n            padding: 2,\n          }}\n        >\n          {children}\n        </TableCell>\n      </TableRow>\n    );\n  }),\n  Cell: React.memo(\n    React.forwardRef(function Cell({ isMeasureInstance, children }, ref) {\n      const {\n        isPinned,\n        isLastPinned,\n        isLast,\n        isLastCenter,\n        width,\n        isSomeColumnsPinnedRight,\n      } = useCellProps({\n        callback: (cell, table) => {\n          const state = cell.header.state;\n          return {\n            isPinned: state.isPinned,\n            isLastPinned: state.isLastPinned,\n            isLast: state.isLast,\n            isLastCenter: state.isLastCenter,\n            width: state.width,\n            isSomeColumnsPinnedRight:\n              table.tanstackTable.getIsSomeColumnsPinned(\"right\"),\n          };\n        },\n        areCallbackOutputEqual: shallowEqual,\n        dependencies: [{ type: \"tanstack_table\" }],\n      });\n\n      return (\n        <TableCell\n          className=\"td\"\n          component=\"div\"\n          ref={ref}\n          style={{ width: isMeasureInstance ? \"auto\" : width }}\n          sx={{\n            height: \"var(--row-height)\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n            zIndex: isPinned ? 5 : 0,\n            boxSizing: \"border-box\",\n            fontSize: \"0.875rem\",\n            color: \"text.primary\",\n            alignItems: \"center\",\n            gap: \"8px\",\n            display: \"flex\",\n            justifyContent: \"flex-start\",\n            alignContent: \"center\",\n            padding: \"6px 12px\",\n            backgroundColor: \"var(--row-background-color)\",\n            borderBottom: \"none\",\n            flexShrink: 0,\n            position: \"relative\",\n            borderRight:\n              ((isPinned === \"start\" && !isLastPinned) || !isPinned) &&\n              !isLast &&\n              !(isLastCenter && isSomeColumnsPinnedRight)\n                ? (theme) => `1px solid ${theme.palette.divider}`\n                : undefined,\n            borderLeft:\n              isPinned === \"end\" && !isLastPinned\n                ? (theme) => `1px solid ${theme.palette.divider}`\n                : undefined,\n            \".table-row:hover &\": {\n              backgroundColor: (theme) => {\n                // Always use solid background colors for all cells on hover\n                return theme.palette.mode === \"dark\"\n                  ? \"#1e1e52\" // Dark blue solid color\n                  : \"#E3F2FD\"; // Light blue solid color\n              },\n              zIndex: isPinned ? 2 : 0,\n            },\n          }}\n        >\n          {children}\n        </TableCell>\n      );\n    }),\n  ),\n  PinnedColsOverlay: ({ position }) => {\n    const width = useTableProps({\n      callback: (table) => {\n        if (!table.tanstackTable.getIsSomeColumnsPinned(position)) {\n          return undefined;\n        }\n        return position === \"left\"\n          ? table.tanstackTable.getLeftTotalSize()\n          : table.tanstackTable.getRightTotalSize();\n      },\n    });\n\n    if (width === undefined) {\n      return null;\n    }\n\n    const style: CSSProperties = {\n      width,\n      [position]: 0,\n      position: \"sticky\",\n      top: 0,\n      bottom: 0,\n      zIndex: 20,\n      pointerEvents: \"none\",\n    };\n\n    if (position === \"left\") {\n      style.boxShadow =\n        \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    } else if (position === \"right\") {\n      style.boxShadow =\n        \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n    }\n    return <div className={`pinned-${position}-overlay`} style={style} />;\n  },\n};\n\nconst TableHeaderCell = React.memo(\n  React.forwardRef<\n    HTMLDivElement,\n    {\n      isMeasureInstance: boolean;\n      children: React.ReactNode;\n    }\n  >(({ isMeasureInstance, children }, ref) => {\n    const {\n      isSomeColumnsPinnedRight,\n      headerId,\n      isPinned,\n      width,\n      isLast,\n      isLastPinned,\n      isLastCenter,\n    } = useColProps({\n      callback: ({ vheader, selectorValue }) => {\n        const state = vheader.state;\n        return {\n          isSomeColumnsPinnedRight:\n            selectorValue.tanstackTable.getIsSomeColumnsPinned(\"right\"),\n          headerId: vheader.header.id,\n          isPinned: state.isPinned,\n          width: state.width,\n          isLast: state.isLast,\n          isLastPinned: state.isLastPinned,\n          isLastCenter: state.isLastCenter,\n        };\n      },\n      areCallbackOutputEqual: shallowEqual,\n      dependencies: [{ type: \"tanstack_table\" }],\n    });\n\n    return (\n      <TableCell\n        ref={ref}\n        component=\"div\"\n        className=\"th\"\n        data-header-id={headerId}\n        data-is-pinned={isPinned}\n        style={{ width: isMeasureInstance ? \"auto\" : width }}\n        sx={{\n          transition: \"background-color 0.2s ease\",\n          whiteSpace: \"nowrap\",\n          zIndex: isPinned ? 1 : 0,\n          display: \"flex\",\n          overflow: \"hidden\",\n          height: \"var(--header-row-height)\",\n          position: \"relative\",\n          flexShrink: 0,\n          alignItems: \"center\",\n          gap: \"8px\",\n          justifyContent: \"space-between\",\n          padding: \"6px 12px\",\n          boxSizing: \"border-box\",\n          fontWeight: 600,\n          backgroundColor: isPinned\n            ? (theme) => theme.palette.background.paper\n            : \"transparent\",\n          borderRight:\n            ((isPinned === \"start\" && !isLastPinned) || !isPinned) &&\n            !isLast &&\n            !(isLastCenter && isSomeColumnsPinnedRight)\n              ? (theme) => `1px solid ${theme.palette.divider}`\n              : undefined,\n          borderLeft:\n            isPinned === \"end\" && !isLastPinned\n              ? (theme) => `1px solid ${theme.palette.divider}`\n              : undefined,\n        }}\n      >\n        <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n          {children}\n        </div>\n      </TableCell>\n    );\n  }),\n);\n\nexport { AnoccaSkin };\n"
   ],
-  "mappings": "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",
-  "debugId": "E3F85326C401268564756E2164756E21",
+  "mappings": "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",
+  "debugId": "5127F7E8710CBE6564756E2164756E21",
   "names": []
 }

package/dist/mjs/header_pin_buttons.mjs

@@ -1,12 +1,16 @@
 // packages/skin-anocca/src/header_pin_buttons.tsx
-import { useColProps, useColRef } from "@rttui/core";
+import { shallowEqual, useColProps, useColRef } from "@rttui/core";
 import { MdChevronLeft, MdChevronRight, MdClose } from "react-icons/md";
 import { jsx, jsxs } from "react/jsx-runtime";
 var HeaderPinButtons = () => {
-  const { isPinned, canPin } = useColProps(({ vheader }) => ({
-    isPinned: vheader.getState().isPinned,
-    canPin: vheader.header().column.getCanPin()
-  }));
+  const { isPinned, canPin } = useColProps({
+    callback: ({ vheader }) => ({
+      isPinned: vheader.state.isPinned,
+      canPin: vheader.header.column.getCanPin()
+    }),
+    dependencies: [{ type: "tanstack_table" }],
+    areCallbackOutputEqual: shallowEqual
+  });
   const headerRef = useColRef();
   if (!canPin) {
     return null;
@@ -26,7 +30,7 @@ var HeaderPinButtons = () => {
           opacity: 0.5
         },
         onClick: () => {
-          headerRef.current.column.pin("left");
+          headerRef().column.pin("left");
         },
         children: /* @__PURE__ */ jsx(MdChevronLeft, {})
       }) : null,
@@ -42,7 +46,7 @@ var HeaderPinButtons = () => {
           opacity: 0.7
         },
         onClick: () => {
-          headerRef.current.column.pin(false);
+          headerRef().column.pin(false);
         },
         children: /* @__PURE__ */ jsx(MdClose, {})
       }) : null,
@@ -58,7 +62,7 @@ var HeaderPinButtons = () => {
           opacity: 0.5
         },
         onClick: () => {
-          headerRef.current.column.pin("right");
+          headerRef().column.pin("right");
         },
         children: /* @__PURE__ */ jsx(MdChevronRight, {})
       }) : null
@@ -69,4 +73,4 @@ export {
   HeaderPinButtons
 };
 
-//# debugId=5FE86953EC01456464756E2164756E21
+//# debugId=BFF9E65644399B9D64756E2164756E21

package/dist/mjs/header_pin_buttons.mjs.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../../src/header_pin_buttons.tsx"],
   "sourcesContent": [
-    "import { useColProps, useColRef } from \"@rttui/core\";\nimport { MdChevronLeft, MdChevronRight, MdClose } from \"react-icons/md\";\n\nexport const HeaderPinButtons = () => {\n  const { isPinned, canPin } = useColProps(({ vheader }) => ({\n    isPinned: vheader.getState().isPinned,\n    canPin: vheader.header().column.getCanPin(),\n  }));\n\n  const headerRef = useColRef();\n  if (!canPin) {\n    return null;\n  }\n  return (\n    <div style={{ display: \"flex\", gap: \"-4px\", justifyContent: \"flex-start\" }}>\n      {isPinned !== \"start\" ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.5,\n          }}\n          onClick={() => {\n            headerRef.current.column.pin(\"left\");\n          }}\n        >\n          <MdChevronLeft />\n        </button>\n      ) : null}\n      {isPinned ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.7,\n          }}\n          onClick={() => {\n            headerRef.current.column.pin(false);\n          }}\n        >\n          <MdClose />\n        </button>\n      ) : null}\n      {isPinned !== \"end\" ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.5,\n          }}\n          onClick={() => {\n            headerRef.current.column.pin(\"right\");\n          }}\n        >\n          <MdChevronRight />\n        </button>\n      ) : null}\n    </div>\n  );\n};\n"
+    "import { shallowEqual, useColProps, useColRef } from \"@rttui/core\";\nimport { MdChevronLeft, MdChevronRight, MdClose } from \"react-icons/md\";\n\nexport const HeaderPinButtons = () => {\n  const { isPinned, canPin } = useColProps({\n    callback: ({ vheader }) => ({\n      isPinned: vheader.state.isPinned,\n      canPin: vheader.header.column.getCanPin(),\n    }),\n    dependencies: [{ type: \"tanstack_table\" }],\n    areCallbackOutputEqual: shallowEqual,\n  });\n\n  const headerRef = useColRef();\n  if (!canPin) {\n    return null;\n  }\n  return (\n    <div style={{ display: \"flex\", gap: \"-4px\", justifyContent: \"flex-start\" }}>\n      {isPinned !== \"start\" ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.5,\n          }}\n          onClick={() => {\n            headerRef().column.pin(\"left\");\n          }}\n        >\n          <MdChevronLeft />\n        </button>\n      ) : null}\n      {isPinned ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.7,\n          }}\n          onClick={() => {\n            headerRef().column.pin(false);\n          }}\n        >\n          <MdClose />\n        </button>\n      ) : null}\n      {isPinned !== \"end\" ? (\n        <button\n          style={{\n            border: \"none\",\n            background: \"transparent\",\n            cursor: \"pointer\",\n            padding: \"2px\",\n            borderRadius: \"4px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            opacity: 0.5,\n          }}\n          onClick={() => {\n            headerRef().column.pin(\"right\");\n          }}\n        >\n          <MdChevronRight />\n        </button>\n      ) : null}\n    </div>\n  );\n};\n"
   ],
-  "mappings": ";AAAA;AACA;AAAA;AAEO,IAAM,mBAAmB,MAAM;AAAA,EACpC,QAAQ,UAAU,WAAW,YAAY,GAAG,eAAe;AAAA,IACzD,UAAU,QAAQ,SAAS,EAAE;AAAA,IAC7B,QAAQ,QAAQ,OAAO,EAAE,OAAO,UAAU;AAAA,EAC5C,EAAE;AAAA,EAEF,MAAM,YAAY,UAAU;AAAA,EAC5B,KAAK,QAAQ;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,uBACE,KA0DE,OA1DF;AAAA,IAAK,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,gBAAgB,aAAa;AAAA,IAAzE,UA0DE;AAAA,MAzDC,aAAa,0BACZ,IAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,QAAQ,OAAO,IAAI,MAAM;AAAA;AAAA,QAZvC,0BAeE,IAAC,eAAD,EAAe;AAAA,OACf,IACA;AAAA,MACH,2BACC,IAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,QAAQ,OAAO,IAAI,KAAK;AAAA;AAAA,QAZtC,0BAeE,IAAC,SAAD,EAAS;AAAA,OACT,IACA;AAAA,MACH,aAAa,wBACZ,IAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,QAAQ,OAAO,IAAI,OAAO;AAAA;AAAA,QAZxC,0BAeE,IAAC,gBAAD,EAAgB;AAAA,OAChB,IACA;AAAA;AAAA,GACJ;AAAA;",
-  "debugId": "5FE86953EC01456464756E2164756E21",
+  "mappings": ";AAAA;AACA;AAAA;AAEO,IAAM,mBAAmB,MAAM;AAAA,EACpC,QAAQ,UAAU,WAAW,YAAY;AAAA,IACvC,UAAU,GAAG,eAAe;AAAA,MAC1B,UAAU,QAAQ,MAAM;AAAA,MACxB,QAAQ,QAAQ,OAAO,OAAO,UAAU;AAAA,IAC1C;AAAA,IACA,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAAA,IACzC,wBAAwB;AAAA,EAC1B,CAAC;AAAA,EAED,MAAM,YAAY,UAAU;AAAA,EAC5B,KAAK,QAAQ;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,uBACE,KA0DE,OA1DF;AAAA,IAAK,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,gBAAgB,aAAa;AAAA,IAAzE,UA0DE;AAAA,MAzDC,aAAa,0BACZ,IAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,EAAE,OAAO,IAAI,MAAM;AAAA;AAAA,QAZjC,0BAeE,IAAC,eAAD,EAAe;AAAA,OACf,IACA;AAAA,MACH,2BACC,IAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,EAAE,OAAO,IAAI,KAAK;AAAA;AAAA,QAZhC,0BAeE,IAAC,SAAD,EAAS;AAAA,OACT,IACA;AAAA,MACH,aAAa,wBACZ,IAgBE,UAhBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,UAAU,EAAE,OAAO,IAAI,OAAO;AAAA;AAAA,QAZlC,0BAeE,IAAC,gBAAD,EAAgB;AAAA,OAChB,IACA;AAAA;AAAA,GACJ;AAAA;",
+  "debugId": "BFF9E65644399B9D64756E2164756E21",
   "names": []
 }

package/dist/mjs/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@rttui/skin-anocca",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "type": "module"
 }

package/dist/mjs/resizer.mjs

@@ -3,14 +3,19 @@ import { Box } from "@mui/material";
 import { useColRef, useCrushHeader } from "@rttui/core";
 import { useColProps } from "@rttui/core";
 import React from "react";
+import { shallowEqual } from "@rttui/core";
 import { jsx, Fragment } from "react/jsx-runtime";
 function Resizer() {
   const crushHeader = useCrushHeader();
-  const { canResize, isResizing } = useColProps(({ column }) => {
-    return {
-      canResize: column.getCanResize(),
-      isResizing: column.getIsResizing()
-    };
+  const { canResize, isResizing } = useColProps({
+    callback: ({ column }) => {
+      return {
+        canResize: column.getCanResize(),
+        isResizing: column.getIsResizing()
+      };
+    },
+    areCallbackOutputEqual: shallowEqual,
+    dependencies: [{ type: "tanstack_table" }]
   });
   const colRef = useColRef();
   React.useEffect(() => {
@@ -34,11 +39,13 @@ function Resizer() {
   }
   return /* @__PURE__ */ jsx(Fragment, {
     children: canResize && /* @__PURE__ */ jsx(Box, {
-      onDoubleClick: () => {
-        crushHeader(colRef.current.header);
+      onDoubleClick: (ev) => {
+        crushHeader(colRef().header);
+        ev.stopPropagation();
+        ev.preventDefault();
       },
-      onMouseDown: (ev) => colRef.current.header.getResizeHandler()(ev),
-      onTouchStart: (ev) => colRef.current.header.getResizeHandler()(ev),
+      onMouseDown: (ev) => colRef().header.getResizeHandler()(ev),
+      onTouchStart: (ev) => colRef().header.getResizeHandler()(ev),
       className: `resizer ${isResizing ? "isResizing" : ""}`,
       sx: {
         position: "absolute",
@@ -65,4 +72,4 @@ export {
   Resizer
 };
 
-//# debugId=100EB075C60209B764756E2164756E21
+//# debugId=8C805E33E6EA178264756E2164756E21

package/dist/mjs/resizer.mjs.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../../src/resizer.tsx"],
   "sourcesContent": [
-    "import { Box } from \"@mui/material\";\nimport { useColRef, useCrushHeader } from \"@rttui/core\";\nimport { useColProps } from \"@rttui/core\";\nimport React from \"react\";\n\nexport function Resizer() {\n  const crushHeader = useCrushHeader();\n\n  const { canResize, isResizing } = useColProps(({ column }) => {\n    return {\n      canResize: column.getCanResize(),\n      isResizing: column.getIsResizing(),\n    };\n  });\n\n  const colRef = useColRef();\n\n  React.useEffect(() => {\n    if (!isResizing) {\n      return;\n    }\n    const preventDefault = (e: Event) => {\n      e.preventDefault();\n    };\n    document.body.addEventListener(\"select\", preventDefault);\n    document.body.addEventListener(\"selectstart\", preventDefault);\n    document.body.style.userSelect = \"none\";\n    return () => {\n      document.body.removeEventListener(\"select\", preventDefault);\n      document.body.removeEventListener(\"selectstart\", preventDefault);\n      document.body.style.userSelect = \"auto\";\n    };\n  }, [isResizing]);\n\n  if (!canResize) {\n    return null;\n  }\n\n  return (\n    <>\n      {canResize && (\n        <Box\n          {...{\n            onDoubleClick: () => {\n              crushHeader(colRef.current.header);\n            },\n            onMouseDown: (ev: any) => colRef.current.header.getResizeHandler()(ev),\n            onTouchStart: (ev: any) => colRef.current.header.getResizeHandler()(ev),\n            className: `resizer ${isResizing ? \"isResizing\" : \"\"}`,\n            sx: {\n              position: \"absolute\",\n              right: 0,\n              top: 0,\n              bottom: 0,\n              width: \"3px\",\n              cursor: \"col-resize\",\n              userSelect: \"none\",\n              touchAction: \"none\",\n              opacity: 0,\n              backgroundColor: (theme) => theme.palette.text.secondary,\n              transition: \"opacity 0.2s\",\n              \"&.isResizing\": {\n                backgroundColor: (theme) => theme.palette.primary.main,\n                opacity: 1,\n                width: \"1px\",\n              },\n            },\n          }}\n        />\n      )}\n    </>\n  );\n}\n"
+    "import { Box } from \"@mui/material\";\nimport { useColRef, useCrushHeader } from \"@rttui/core\";\nimport { useColProps } from \"@rttui/core\";\nimport React from \"react\";\nimport { shallowEqual } from \"@rttui/core\";\nexport function Resizer() {\n  const crushHeader = useCrushHeader();\n\n  const { canResize, isResizing } = useColProps({\n    callback: ({ column }) => {\n      return {\n        canResize: column.getCanResize(),\n        isResizing: column.getIsResizing(),\n      };\n    },\n    areCallbackOutputEqual: shallowEqual,\n    dependencies: [{ type: \"tanstack_table\" }],\n  });\n\n  const colRef = useColRef();\n\n  React.useEffect(() => {\n    if (!isResizing) {\n      return;\n    }\n    const preventDefault = (e: Event) => {\n      e.preventDefault();\n    };\n    document.body.addEventListener(\"select\", preventDefault);\n    document.body.addEventListener(\"selectstart\", preventDefault);\n    document.body.style.userSelect = \"none\";\n    return () => {\n      document.body.removeEventListener(\"select\", preventDefault);\n      document.body.removeEventListener(\"selectstart\", preventDefault);\n      document.body.style.userSelect = \"auto\";\n    };\n  }, [isResizing]);\n\n  if (!canResize) {\n    return null;\n  }\n\n  return (\n    <>\n      {canResize && (\n        <Box\n          onDoubleClick={(ev) => {\n            crushHeader(colRef().header);\n            ev.stopPropagation();\n            ev.preventDefault();\n          }}\n          onMouseDown={(ev: any) => colRef().header.getResizeHandler()(ev)}\n          onTouchStart={(ev: any) => colRef().header.getResizeHandler()(ev)}\n          className={`resizer ${isResizing ? \"isResizing\" : \"\"}`}\n          sx={{\n            position: \"absolute\",\n            right: 0,\n            top: 0,\n            bottom: 0,\n            width: \"3px\",\n            cursor: \"col-resize\",\n            userSelect: \"none\",\n            touchAction: \"none\",\n            opacity: 0,\n            backgroundColor: (theme) => theme.palette.text.secondary,\n            transition: \"opacity 0.2s\",\n            \"&.isResizing\": {\n              backgroundColor: (theme) => theme.palette.primary.main,\n              opacity: 1,\n              width: \"1px\",\n            },\n          }}\n        />\n      )}\n    </>\n  );\n}\n"
   ],
-  "mappings": ";AAAA;AACA;AACA;AACA;AAAA;AAEO,SAAS,OAAO,GAAG;AAAA,EACxB,MAAM,cAAc,eAAe;AAAA,EAEnC,QAAQ,WAAW,eAAe,YAAY,GAAG,aAAa;AAAA,IAC5D,OAAO;AAAA,MACL,WAAW,OAAO,aAAa;AAAA,MAC/B,YAAY,OAAO,cAAc;AAAA,IACnC;AAAA,GACD;AAAA,EAED,MAAM,SAAS,UAAU;AAAA,EAEzB,MAAM,UAAU,MAAM;AAAA,IACpB,KAAK,YAAY;AAAA,MACf;AAAA,IACF;AAAA,IACA,MAAM,iBAAiB,CAAC,MAAa;AAAA,MACnC,EAAE,eAAe;AAAA;AAAA,IAEnB,SAAS,KAAK,iBAAiB,UAAU,cAAc;AAAA,IACvD,SAAS,KAAK,iBAAiB,eAAe,cAAc;AAAA,IAC5D,SAAS,KAAK,MAAM,aAAa;AAAA,IACjC,OAAO,MAAM;AAAA,MACX,SAAS,KAAK,oBAAoB,UAAU,cAAc;AAAA,MAC1D,SAAS,KAAK,oBAAoB,eAAe,cAAc;AAAA,MAC/D,SAAS,KAAK,MAAM,aAAa;AAAA;AAAA,KAElC,CAAC,UAAU,CAAC;AAAA,EAEf,KAAK,WAAW;AAAA,IACd,OAAO;AAAA,EACT;AAAA,EAEA,uBACE;AAAA,cACG,6BACC,IAAC,KAAD;AAAA,MAEI,eAAe,MAAM;AAAA,QACnB,YAAY,OAAO,QAAQ,MAAM;AAAA;AAAA,MAEnC,aAAa,CAAC,OAAY,OAAO,QAAQ,OAAO,iBAAiB,EAAE,EAAE;AAAA,MACrE,cAAc,CAAC,OAAY,OAAO,QAAQ,OAAO,iBAAiB,EAAE,EAAE;AAAA,MACtE,WAAW,WAAW,aAAa,eAAe;AAAA,MAClD,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,SAAS;AAAA,QACT,iBAAiB,CAAC,UAAU,MAAM,QAAQ,KAAK;AAAA,QAC/C,YAAY;AAAA,QACZ,gBAAgB;AAAA,UACd,iBAAiB,CAAC,UAAU,MAAM,QAAQ,QAAQ;AAAA,UAClD,SAAS;AAAA,UACT,OAAO;AAAA,QACT;AAAA,MACF;AAAA,KAEJ;AAAA,GAEF;AAAA;",
-  "debugId": "100EB075C60209B764756E2164756E21",
+  "mappings": ";AAAA;AACA;AACA;AACA;AACA;AAAA;AACO,SAAS,OAAO,GAAG;AAAA,EACxB,MAAM,cAAc,eAAe;AAAA,EAEnC,QAAQ,WAAW,eAAe,YAAY;AAAA,IAC5C,UAAU,GAAG,aAAa;AAAA,MACxB,OAAO;AAAA,QACL,WAAW,OAAO,aAAa;AAAA,QAC/B,YAAY,OAAO,cAAc;AAAA,MACnC;AAAA;AAAA,IAEF,wBAAwB;AAAA,IACxB,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAAA,EAC3C,CAAC;AAAA,EAED,MAAM,SAAS,UAAU;AAAA,EAEzB,MAAM,UAAU,MAAM;AAAA,IACpB,KAAK,YAAY;AAAA,MACf;AAAA,IACF;AAAA,IACA,MAAM,iBAAiB,CAAC,MAAa;AAAA,MACnC,EAAE,eAAe;AAAA;AAAA,IAEnB,SAAS,KAAK,iBAAiB,UAAU,cAAc;AAAA,IACvD,SAAS,KAAK,iBAAiB,eAAe,cAAc;AAAA,IAC5D,SAAS,KAAK,MAAM,aAAa;AAAA,IACjC,OAAO,MAAM;AAAA,MACX,SAAS,KAAK,oBAAoB,UAAU,cAAc;AAAA,MAC1D,SAAS,KAAK,oBAAoB,eAAe,cAAc;AAAA,MAC/D,SAAS,KAAK,MAAM,aAAa;AAAA;AAAA,KAElC,CAAC,UAAU,CAAC;AAAA,EAEf,KAAK,WAAW;AAAA,IACd,OAAO;AAAA,EACT;AAAA,EAEA,uBACE;AAAA,cACG,6BACC,IAAC,KAAD;AAAA,MACE,eAAe,CAAC,OAAO;AAAA,QACrB,YAAY,OAAO,EAAE,MAAM;AAAA,QAC3B,GAAG,gBAAgB;AAAA,QACnB,GAAG,eAAe;AAAA;AAAA,MAEpB,aAAa,CAAC,OAAY,OAAO,EAAE,OAAO,iBAAiB,EAAE,EAAE;AAAA,MAC/D,cAAc,CAAC,OAAY,OAAO,EAAE,OAAO,iBAAiB,EAAE,EAAE;AAAA,MAChE,WAAW,WAAW,aAAa,eAAe;AAAA,MAClD,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,SAAS;AAAA,QACT,iBAAiB,CAAC,UAAU,MAAM,QAAQ,KAAK;AAAA,QAC/C,YAAY;AAAA,QACZ,gBAAgB;AAAA,UACd,iBAAiB,CAAC,UAAU,MAAM,QAAQ,QAAQ;AAAA,UAClD,SAAS;AAAA,UACT,OAAO;AAAA,QACT;AAAA,MACF;AAAA,KACF;AAAA,GAEF;AAAA;",
+  "debugId": "8C805E33E6EA178264756E2164756E21",
   "names": []
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@rttui/skin-anocca",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "main": "./dist/cjs/index.cjs",
   "dependencies": {
-    "@rttui/core": "^1.0.28"
+    "@rttui/core": "^1.0.30"
   },
   "module": "./dist/mjs/index.mjs",
   "types": "./dist/types/index.d.ts",