@rttui/skin-anocca 1.0.15 → 1.0.17

package/dist/mjs/RowPinButtons.mjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/RowPinButtons.tsx"],
+  "sourcesContent": [
+    "import { Row } from \"@tanstack/react-table\";\nimport { IconButton, Stack } from \"@mui/material\";\nimport { FiX, FiChevronUp, FiChevronDown } from \"react-icons/fi\";\n\nexport function RowPinButtons({ row }: { row: Row<any> }) {\n  if (!row.getCanPin()) {\n    return null;\n  }\n\n  if (row.getIsPinned()) {\n    return (\n      <IconButton\n        onClick={() => row.pin(false, true, true)}\n        size=\"small\"\n        sx={{ color: \"text.secondary\" }}\n      >\n        <FiX size={16} />\n      </IconButton>\n    );\n  }\n\n  return (\n    <Stack direction=\"row\">\n      <IconButton\n        onClick={() => row.pin(\"top\", true, true)}\n        size=\"small\"\n        sx={{ color: \"text.secondary\" }}\n      >\n        <FiChevronUp size={16} />\n      </IconButton>\n      <IconButton\n        onClick={() => row.pin(\"bottom\", true, true)}\n        size=\"small\"\n        sx={{ color: \"text.secondary\" }}\n      >\n        <FiChevronDown size={16} />\n      </IconButton>\n    </Stack>\n  );\n}\n"
+  ],
+  "mappings": ";AACA;AACA;AAAA;AAEO,SAAS,aAAa,GAAG,OAA0B;AAAA,EACxD,KAAK,IAAI,UAAU,GAAG;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EAEA,IAAI,IAAI,YAAY,GAAG;AAAA,IACrB,uBACE,IAME,YANF;AAAA,MACE,SAAS,MAAM,IAAI,IAAI,OAAO,MAAM,IAAI;AAAA,MACxC,MAAK;AAAA,MACL,IAAI,EAAE,OAAO,iBAAiB;AAAA,MAHhC,0BAKE,IAAC,KAAD;AAAA,QAAK,MAAM;AAAA,OAAI;AAAA,KACf;AAAA,EAEN;AAAA,EAEA,uBACE,KAeE,OAfF;AAAA,IAAO,WAAU;AAAA,IAAjB,UAeE;AAAA,sBAdA,IAME,YANF;AAAA,QACE,SAAS,MAAM,IAAI,IAAI,OAAO,MAAM,IAAI;AAAA,QACxC,MAAK;AAAA,QACL,IAAI,EAAE,OAAO,iBAAiB;AAAA,QAHhC,0BAKE,IAAC,aAAD;AAAA,UAAa,MAAM;AAAA,SAAI;AAAA,OACvB;AAAA,sBACF,IAME,YANF;AAAA,QACE,SAAS,MAAM,IAAI,IAAI,UAAU,MAAM,IAAI;AAAA,QAC3C,MAAK;AAAA,QACL,IAAI,EAAE,OAAO,iBAAiB;AAAA,QAHhC,0BAKE,IAAC,eAAD;AAAA,UAAe,MAAM;AAAA,SAAI;AAAA,OACzB;AAAA;AAAA,GACF;AAAA;",
+  "debugId": "38BB8AEEFF76B3B064756E2164756E21",
+  "names": []
+}

package/dist/mjs/index.mjs

@@ -0,0 +1,352 @@
+// packages/skin-anocca/src/index.tsx
+import {
+  Box,
+  Paper,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableRow,
+  useTheme
+} from "@mui/material";
+import {
+  useTableContext,
+  useTableCssVars
+} from "@rttui/core";
+import React from "react";
+import { flexRender } from "@tanstack/react-table";
+import { jsx } from "react/jsx-runtime";
+var AnoccaSkin = {
+  rowHeight: 32,
+  headerRowHeight: 32,
+  footerRowHeight: 32,
+  OverlayContainer: ({ children }) => {
+    const { width, height } = useTableContext();
+    const cssVars = useTableCssVars();
+    return /* @__PURE__ */ jsx("div", {
+      className: "rttui-overlay-container",
+      style: {
+        position: "relative",
+        width: width + "px",
+        height: height + "px",
+        ...cssVars
+      },
+      children
+    });
+  },
+  OuterContainer: ({ children }) => {
+    const { tableContainerRef } = useTableContext();
+    return /* @__PURE__ */ jsx(Paper, {
+      ref: tableContainerRef,
+      className: "outer-container",
+      elevation: 2,
+      sx: {
+        overflow: "auto",
+        width: "var(--table-container-width)",
+        height: "var(--table-container-height)",
+        position: "relative",
+        contain: "paint",
+        willChange: "transform",
+        borderRadius: 1
+      },
+      children
+    });
+  },
+  TableScroller: () => {
+    return /* @__PURE__ */ jsx("div", {
+      className: "table-scroller",
+      style: {
+        width: "var(--table-width)",
+        height: "calc(var(--table-height) + var(--header-height) + var(--footer-height))",
+        position: "absolute"
+      }
+    });
+  },
+  TableHeader: ({ children }) => {
+    return /* @__PURE__ */ jsx(TableHead, {
+      component: "div",
+      className: "thead",
+      sx: {
+        position: "sticky",
+        top: 0,
+        width: "var(--table-width)",
+        zIndex: 2,
+        backgroundColor: (theme) => theme.palette.background.paper,
+        boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        alignItems: "stretch"
+      },
+      children
+    });
+  },
+  TableFooter: ({ children }) => {
+    return /* @__PURE__ */ jsx(TableFooter, {
+      component: "div",
+      className: "table-footer",
+      sx: {
+        position: "sticky",
+        bottom: -1,
+        width: "var(--table-width)",
+        zIndex: 2,
+        backgroundColor: (theme) => theme.palette.background.paper,
+        boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`
+      },
+      children
+    });
+  },
+  HeaderRow: TableHeaderRow,
+  HeaderCell: React.forwardRef((props, ref) => {
+    return /* @__PURE__ */ jsx(TableHeaderCell, {
+      ...props,
+      ref
+    });
+  }),
+  TableBody: ({ children }) => {
+    return /* @__PURE__ */ jsx(TableBody, {
+      component: "div",
+      className: "table-body",
+      sx: {
+        position: "relative",
+        width: "var(--table-width)",
+        height: "var(--table-height)",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        alignItems: "stretch"
+      },
+      children
+    });
+  },
+  PinnedRows: ({ children, position, pinned }) => {
+    if (pinned.length === 0) {
+      return null;
+    }
+    const style = {
+      position: "sticky",
+      zIndex: 3
+    };
+    if (position === "top") {
+      style.top = "var(--header-height)";
+      style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;
+      style.boxShadow = "0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)";
+    } else if (position === "bottom") {
+      style.bottom = "var(--footer-height)";
+      style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;
+      style.boxShadow = "0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)";
+    }
+    const Component = position === "top" ? TableHead : TableFooter;
+    return /* @__PURE__ */ jsx(Component, {
+      component: "div",
+      className: `sticky-${position}-rows`,
+      sx: style,
+      children
+    });
+  },
+  PinnedCols: ({ children, position, pinned }) => {
+    if (pinned.length === 0) {
+      return null;
+    }
+    const style = {
+      position: "sticky",
+      zIndex: 3,
+      display: "flex"
+    };
+    if (position === "left") {
+      style.left = 0;
+    } else if (position === "right") {
+      style.right = 0;
+    }
+    return /* @__PURE__ */ jsx(Box, {
+      component: "div",
+      className: `sticky-${position}-cols`,
+      sx: style,
+      children
+    });
+  },
+  TableRowWrapper: React.forwardRef(({ children, flatIndex, dndStyle }, ref) => {
+    const theme = useTheme();
+    const backgroundColor = (theme2) => {
+      const baseColor = flatIndex % 2 === 0 ? theme2.palette.background.paper : theme2.palette.mode === "dark" ? theme2.palette.grey[900] : theme2.palette.grey[100];
+      return baseColor;
+    };
+    const vars = {
+      "--row-background-color": backgroundColor(theme)
+    };
+    return /* @__PURE__ */ jsx(Box, {
+      sx: {
+        ...dndStyle,
+        ...vars,
+        width: "var(--table-width)",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        alignItems: "stretch"
+      },
+      "data-index": flatIndex,
+      ref,
+      children
+    });
+  }),
+  TableRow: ({ children }) => {
+    return /* @__PURE__ */ jsx(TableRow, {
+      component: "div",
+      className: "table-row",
+      sx: {
+        position: "relative",
+        width: "var(--table-width)",
+        display: "flex",
+        height: "var(--row-height)",
+        zIndex: 1,
+        boxSizing: "border-box",
+        backgroundColor: "var(--row-background-color)",
+        "&:hover": {
+          backgroundColor: (theme) => {
+            return theme.palette.mode === "dark" ? "#1e1e52" : "#E3F2FD";
+          }
+        }
+      },
+      children
+    });
+  },
+  TableRowExpandedContent: ({ children }) => {
+    const { table } = useTableContext();
+    return /* @__PURE__ */ jsx(TableRow, {
+      component: "div",
+      className: "expanded-row",
+      sx: {
+        backgroundColor: (theme) => theme.palette.background.default
+      },
+      children: /* @__PURE__ */ jsx(TableCell, {
+        component: "div",
+        className: "expanded-cell",
+        colSpan: table.getAllLeafColumns().length,
+        sx: {
+          padding: 2
+        },
+        children
+      })
+    });
+  },
+  Cell: React.forwardRef(({ children, header, isMeasuring, isLastPinned, isLast, isLastCenter }, ref) => {
+    const { isPinned } = header;
+    const { table } = useTableContext();
+    return /* @__PURE__ */ jsx(TableCell, {
+      className: "td",
+      component: "div",
+      ref,
+      sx: {
+        height: "var(--row-height)",
+        width: isMeasuring ? "auto" : header.width,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        zIndex: isPinned ? 5 : 0,
+        boxSizing: "border-box",
+        fontSize: "0.875rem",
+        color: "text.primary",
+        alignItems: "center",
+        gap: "8px",
+        display: "flex",
+        justifyContent: "flex-start",
+        alignContent: "center",
+        padding: "6px 12px",
+        backgroundColor: "var(--row-background-color)",
+        borderBottom: "none",
+        flexShrink: 0,
+        position: "relative",
+        borderRight: (isPinned === "start" && !isLastPinned || !isPinned) && !isLast && !(isLastCenter && table.getIsSomeColumnsPinned("right")) ? (theme) => `1px solid ${theme.palette.divider}` : undefined,
+        borderLeft: isPinned === "end" && !isLastPinned ? (theme) => `1px solid ${theme.palette.divider}` : undefined,
+        ".table-row:hover &": {
+          backgroundColor: (theme) => {
+            return theme.palette.mode === "dark" ? "#1e1e52" : "#E3F2FD";
+          },
+          zIndex: isPinned ? 2 : 0
+        }
+      },
+      children
+    });
+  }),
+  PinnedColsOverlay: ({ position }) => {
+    const { table } = useTableContext();
+    if (!table.getIsSomeColumnsPinned(position)) {
+      return null;
+    }
+    const width = position === "left" ? table.getLeftTotalSize() : table.getRightTotalSize();
+    const style = {
+      width,
+      [position]: 0,
+      position: "sticky",
+      top: 0,
+      bottom: 0,
+      zIndex: 20,
+      pointerEvents: "none"
+    };
+    if (position === "left") {
+      style.boxShadow = "4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
+    } else if (position === "right") {
+      style.boxShadow = "-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
+    }
+    return /* @__PURE__ */ jsx("div", {
+      className: `pinned-${position}-overlay`,
+      style
+    });
+  }
+};
+var TableHeaderCell = React.forwardRef(({
+  headerId,
+  isPinned,
+  width,
+  header,
+  type,
+  isLast,
+  isLastPinned,
+  isLastCenter,
+  isMeasuring
+}, ref) => {
+  const { table } = useTableContext();
+  return /* @__PURE__ */ jsx(TableCell, {
+    ref,
+    component: "div",
+    className: "th",
+    "data-header-id": headerId,
+    "data-is-pinned": isPinned,
+    sx: {
+      transition: "background-color 0.2s ease",
+      whiteSpace: "nowrap",
+      zIndex: isPinned ? 1 : 0,
+      display: "flex",
+      overflow: "hidden",
+      height: "var(--header-row-height)",
+      width: isMeasuring ? "auto" : width,
+      position: "relative",
+      flexShrink: 0,
+      alignItems: "center",
+      gap: "8px",
+      justifyContent: "space-between",
+      padding: "6px 12px",
+      boxSizing: "border-box",
+      fontWeight: 600,
+      backgroundColor: isPinned ? (theme) => theme.palette.background.paper : "transparent",
+      borderRight: (isPinned === "start" && !isLastPinned || !isPinned) && !isLast && !(isLastCenter && table.getIsSomeColumnsPinned("right")) ? (theme) => `1px solid ${theme.palette.divider}` : undefined,
+      borderLeft: isPinned === "end" && !isLastPinned ? (theme) => `1px solid ${theme.palette.divider}` : undefined
+    },
+    children: /* @__PURE__ */ jsx("div", {
+      style: { flex: 1, display: "flex", justifyContent: "flex-start" },
+      children: header && !header.isPlaceholder ? flexRender(header.column.columnDef[type], header.getContext()) : null
+    })
+  });
+});
+function TableHeaderRow({ children }) {
+  return /* @__PURE__ */ jsx(TableRow, {
+    component: "div",
+    sx: { height: "var(--row-height)", display: "flex" },
+    children
+  });
+}
+export {
+  AnoccaSkin
+};
+
+//# debugId=001892AC4490D51E64756E2164756E21

package/dist/mjs/index.mjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.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  useTableContext,\n  useTableCssVars,\n  VirtualHeader,\n} from \"@rttui/core\";\nimport React, { CSSProperties } from \"react\";\nimport { flexRender } from \"@tanstack/react-table\";\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.forwardRef((props, ref) => {\n    return <TableHeaderCell {...props} ref={ref} />;\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, pinned }) => {\n    if (pinned.length === 0) {\n      return null;\n    }\n\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, pinned }) => {\n    if (pinned.length === 0) {\n      return null;\n    }\n\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(\n    ({ children, flatIndex, dndStyle }, ref) => {\n      const theme = useTheme();\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            ...dndStyle,\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  ),\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 { table } = useTableContext();\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={table.getAllLeafColumns().length}\n          sx={{\n            padding: 2,\n          }}\n        >\n          {children}\n        </TableCell>\n      </TableRow>\n    );\n  },\n  Cell: React.forwardRef(\n    (\n      { children, header, isMeasuring, isLastPinned, isLast, isLastCenter },\n      ref,\n    ) => {\n      const { isPinned } = header;\n      const { table } = useTableContext();\n      return (\n        <TableCell\n          className=\"td\"\n          component=\"div\"\n          ref={ref}\n          sx={{\n            height: \"var(--row-height)\",\n            width: isMeasuring ? \"auto\" : header.width,\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 && table.getIsSomeColumnsPinned(\"right\"))\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 { table } = useTableContext();\n    if (!table.getIsSomeColumnsPinned(position)) {\n      return null;\n    }\n    const width =\n      position === \"left\"\n        ? table.getLeftTotalSize()\n        : table.getRightTotalSize();\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.forwardRef<\n  HTMLDivElement,\n  VirtualHeader & {\n    type: \"header\" | \"footer\";\n    isLast: boolean;\n    isFirst: boolean;\n    isLastPinned: boolean;\n    isFirstPinned: boolean;\n    isLastCenter: boolean;\n    isFirstCenter: boolean;\n    isMeasuring: boolean;\n  }\n>(\n  (\n    {\n      headerId,\n      isPinned,\n      width,\n      header,\n      type,\n      isLast,\n      isLastPinned,\n      isLastCenter,\n      isMeasuring,\n    },\n    ref,\n  ) => {\n    const { table } = useTableContext();\n    return (\n      <TableCell\n        ref={ref}\n        component=\"div\"\n        className=\"th\"\n        data-header-id={headerId}\n        data-is-pinned={isPinned}\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          width: isMeasuring ? \"auto\" : width,\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 && table.getIsSomeColumnsPinned(\"right\"))\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          {header && !header.isPlaceholder\n            ? flexRender(header.column.columnDef[type], header.getContext())\n            : null}\n        </div>\n      </TableCell>\n    );\n  },\n);\n\nexport { AnoccaSkin };\n\nfunction TableHeaderRow({ children }: { children: React.ReactNode }) {\n  return (\n    <TableRow\n      component=\"div\"\n      sx={{ height: \"var(--row-height)\", display: \"flex\" }}\n    >\n      {children}\n    </TableRow>\n  );\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "001892AC4490D51E64756E2164756E21",
+  "names": []
+}

package/dist/mjs/package.json

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

package/dist/mjs/stories/ReactTanstackTableUiStory.stories.mjs

@@ -0,0 +1,204 @@
+// packages/skin-anocca/src/stories/ReactTanstackTableUiStory.stories.tsx
+import { getCoreRowModel } from "@tanstack/react-table";
+import { AnoccaSkin } from "..";
+import { ReactTanstackTableUi } from "./ReactTanstackTableUiStoryComponent.mjs";
+import { createSourceCode } from "./createSourceCode.mjs";
+var meta = {
+  title: "ReactTanstackTableUi",
+  component: ReactTanstackTableUi,
+  parameters: {
+    layout: "centered"
+  },
+  argTypes: {
+    data: { control: "select" },
+    columns: { control: "select" },
+    pinColsRelativeTo: { control: "select", options: ["cols", "table"] },
+    skin: {
+      control: "object",
+      table: { disable: true }
+    }
+  },
+  args: {
+    width: 600,
+    height: 400,
+    skin: AnoccaSkin,
+    autoCrushColumns: false,
+    data: "big",
+    columns: "few",
+    getCoreRowModel: getCoreRowModel(),
+    pinColsRelativeTo: "cols",
+    fillAvailableSpaceAfterCrush: false,
+    scrollbarWidth: 16,
+    getRowId: (row) => row.id
+  }
+};
+var ReactTanstackTableUiStory_stories_default = meta;
+var Basic = {
+  args: {
+    enableColumnPinning: true,
+    autoCrushColumns: false,
+    fillAvailableSpaceAfterCrush: false,
+    pinColsRelativeTo: "cols"
+  },
+  parameters: {
+    docs: {
+      source: { language: "tsx", code: createSourceCode() }
+    }
+  }
+};
+var AutoCrushColumns = {
+  args: {
+    autoCrushColumns: true
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: "tsx",
+        code: createSourceCode({ props: "  autoCrushColumns" })
+      }
+    }
+  }
+};
+var AutoCrushColumnsExceptName = {
+  args: {
+    autoCrushColumns: true,
+    enableColumnPinning: true,
+    meta: {
+      name: {
+        autoCrush: false
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: "tsx",
+        code: createSourceCode({
+          props: "  autoCrushColumns",
+          nameMeta: "    autoCrush: false,"
+        })
+      }
+    }
+  }
+};
+var PinRelativeToCols = {
+  args: {
+    autoCrushColumns: true,
+    pinColsRelativeTo: "cols",
+    enableColumnPinning: true,
+    initialState: {
+      columnPinning: {
+        right: ["city"]
+      }
+    }
+  }
+};
+var PinRelativeToTable = {
+  args: {
+    autoCrushColumns: true,
+    pinColsRelativeTo: "table",
+    enableColumnPinning: true,
+    initialState: {
+      columnPinning: {
+        right: ["city"]
+      }
+    }
+  }
+};
+var FillAvailableSpaceAfterCrush = {
+  args: {
+    autoCrushColumns: true,
+    fillAvailableSpaceAfterCrush: true
+  }
+};
+var FillAvailableSpaceAfterCrushExceptName = {
+  args: {
+    autoCrushColumns: true,
+    fillAvailableSpaceAfterCrush: true,
+    meta: {
+      name: {
+        fillAvailableSpaceAfterCrush: false
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: "tsx",
+        code: createSourceCode({
+          props: `  autoCrushColumns
+  fillAvailableSpaceAfterCrush`,
+          nameMeta: "    fillAvailableSpaceAfterCrush: false,"
+        })
+      }
+    }
+  }
+};
+var FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth = {
+  args: {
+    autoCrushColumns: true,
+    fillAvailableSpaceAfterCrush: true,
+    scrollbarWidth: 0
+  }
+};
+var CanPinRowsRelativeToRows = {
+  args: {
+    enableRowPinning: true,
+    enableColumnPinning: true,
+    data: "small",
+    pinRowsRelativeTo: "rows",
+    initialState: {
+      rowPinning: {
+        bottom: ["3"]
+      }
+    }
+  }
+};
+var CanPinRowsRelativeToTable = {
+  args: {
+    enableRowPinning: true,
+    enableColumnPinning: true,
+    data: "small",
+    pinRowsRelativeTo: "table",
+    initialState: {
+      rowPinning: {
+        bottom: ["3"]
+      }
+    }
+  }
+};
+var SizeByLargestHeader = {
+  args: {
+    autoCrushColumns: true,
+    crushMinSizeBy: "cell"
+  }
+};
+var SizeByLargestHeaderWithMeta = {
+  args: {
+    autoCrushColumns: true,
+    crushMinSizeBy: "header",
+    enableColumnPinning: true,
+    meta: {
+      age: {
+        crushMinSizeBy: "cell"
+      }
+    }
+  }
+};
+export {
+  ReactTanstackTableUiStory_stories_default as default,
+  SizeByLargestHeaderWithMeta,
+  SizeByLargestHeader,
+  PinRelativeToTable,
+  PinRelativeToCols,
+  FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth,
+  FillAvailableSpaceAfterCrushExceptName,
+  FillAvailableSpaceAfterCrush,
+  CanPinRowsRelativeToTable,
+  CanPinRowsRelativeToRows,
+  Basic,
+  AutoCrushColumnsExceptName,
+  AutoCrushColumns
+};
+
+//# debugId=1AEDED9358F80BC564756E2164756E21

package/dist/mjs/stories/ReactTanstackTableUiStory.stories.mjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/ReactTanstackTableUiStory.stories.tsx"],
+  "sourcesContent": [
+    "import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { getCoreRowModel } from \"@tanstack/react-table\";\nimport { AnoccaSkin } from \"..\";\nimport { ReactTanstackTableUi } from \"./ReactTanstackTableUiStoryComponent.mjs\";\nimport { createSourceCode } from \"./createSourceCode.mjs\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n  title: \"ReactTanstackTableUi\",\n  component: ReactTanstackTableUi,\n  parameters: {\n    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n    layout: \"centered\",\n  },\n  // More on argTypes: https://storybook.js.org/docs/api/argtypes\n  argTypes: {\n    data: { control: \"select\" },\n    columns: { control: \"select\" },\n    pinColsRelativeTo: { control: \"select\", options: [\"cols\", \"table\"] },\n    skin: {\n      control: \"object\",\n      table: { disable: true },\n    },\n  },\n  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n  args: {\n    width: 600,\n    height: 400,\n    skin: AnoccaSkin,\n    autoCrushColumns: false,\n    data: \"big\",\n    columns: \"few\",\n    getCoreRowModel: getCoreRowModel(),\n    pinColsRelativeTo: \"cols\",\n    fillAvailableSpaceAfterCrush: false,\n    scrollbarWidth: 16,\n    getRowId: (row) => row.id,\n  },\n} satisfies Meta<typeof ReactTanstackTableUi>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Basic: Story = {\n  args: {\n    enableColumnPinning: true,\n    autoCrushColumns: false,\n    fillAvailableSpaceAfterCrush: false,\n    pinColsRelativeTo: \"cols\",\n  },\n  parameters: {\n    docs: {\n      source: { language: \"tsx\", code: createSourceCode() },\n    },\n  },\n};\n\nexport const AutoCrushColumns: Story = {\n  args: {\n    autoCrushColumns: true,\n  },\n  parameters: {\n    docs: {\n      source: {\n        language: \"tsx\",\n        code: createSourceCode({ props: \"  autoCrushColumns\" }),\n      },\n    },\n  },\n};\n\nexport const AutoCrushColumnsExceptName: Story = {\n  args: {\n    autoCrushColumns: true,\n    enableColumnPinning: true,\n    meta: {\n      name: {\n        autoCrush: false,\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      source: {\n        language: \"tsx\",\n        code: createSourceCode({\n          props: \"  autoCrushColumns\",\n          nameMeta: \"    autoCrush: false,\",\n        }),\n      },\n    },\n  },\n};\n\nexport const PinRelativeToCols: Story = {\n  args: {\n    autoCrushColumns: true,\n    pinColsRelativeTo: \"cols\",\n    enableColumnPinning: true,\n    initialState: {\n      columnPinning: {\n        right: [\"city\"],\n      },\n    },\n  },\n};\n\nexport const PinRelativeToTable: Story = {\n  args: {\n    autoCrushColumns: true,\n    pinColsRelativeTo: \"table\",\n    enableColumnPinning: true,\n    initialState: {\n      columnPinning: {\n        right: [\"city\"],\n      },\n    },\n  },\n};\n\nexport const FillAvailableSpaceAfterCrush: Story = {\n  args: {\n    autoCrushColumns: true,\n    fillAvailableSpaceAfterCrush: true,\n  },\n};\n\nexport const FillAvailableSpaceAfterCrushExceptName: Story = {\n  args: {\n    autoCrushColumns: true,\n    fillAvailableSpaceAfterCrush: true,\n    meta: {\n      name: {\n        fillAvailableSpaceAfterCrush: false,\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      source: {\n        language: \"tsx\",\n        code: createSourceCode({\n          props: \"  autoCrushColumns\\n  fillAvailableSpaceAfterCrush\",\n          nameMeta: \"    fillAvailableSpaceAfterCrush: false,\",\n        }),\n      },\n    },\n  },\n};\n\nexport const FillAvailableSpaceAfterCrushWithoutSpecifiedScrollbarWidth: Story =\n  {\n    args: {\n      autoCrushColumns: true,\n      fillAvailableSpaceAfterCrush: true,\n      scrollbarWidth: 0,\n    },\n  };\n\nexport const CanPinRowsRelativeToRows: Story = {\n  args: {\n    enableRowPinning: true,\n    enableColumnPinning: true,\n    data: \"small\",\n    pinRowsRelativeTo: \"rows\",\n    initialState: {\n      rowPinning: {\n        bottom: [\"3\"],\n      },\n    },\n  },\n};\n\nexport const CanPinRowsRelativeToTable: Story = {\n  args: {\n    enableRowPinning: true,\n    enableColumnPinning: true,\n    data: \"small\",\n    pinRowsRelativeTo: \"table\",\n    initialState: {\n      rowPinning: {\n        bottom: [\"3\"],\n      },\n    },\n  },\n};\n\nexport const SizeByLargestHeader: Story = {\n  args: {\n    autoCrushColumns: true,\n    crushMinSizeBy: \"cell\",\n  },\n};\n\nexport const SizeByLargestHeaderWithMeta: Story = {\n  args: {\n    autoCrushColumns: true,\n    crushMinSizeBy: \"header\",\n    enableColumnPinning: true,\n    meta: {\n      age: {\n        crushMinSizeBy: 'cell',\n      },\n    },\n  },\n};\n"
+  ],
+  "mappings": "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",
+  "debugId": "1AEDED9358F80BC564756E2164756E21",
+  "names": []
+}