@kopexa/data-grid 0.0.0-canary-20250921225330

package/dist/index.js

@@ -0,0 +1,421 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DataGrid: () => DataGrid2
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/data-grid.tsx
+var import_checkbox = require("@kopexa/checkbox");
+var import_react_utils = require("@kopexa/react-utils");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react_table = require("@tanstack/react-table");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [DataGridProvider, useDataGridContext] = (
+  // biome-ignore lint/suspicious/noExplicitAny: no idea.
+  (0, import_react_utils.createContext)()
+);
+function DataGrid(props) {
+  const {
+    children,
+    table,
+    columnsResizable = import_theme.datagrid.defaultVariants.columnsResizable,
+    columnsDraggable,
+    columnsPinnable,
+    stripped,
+    border = import_theme.datagrid.defaultVariants.border,
+    rowBorder = import_theme.datagrid.defaultVariants.rowBorder,
+    dense = import_theme.datagrid.defaultVariants.dense,
+    rowRounded = import_theme.datagrid.defaultVariants.rowRounded,
+    headerBackground = import_theme.datagrid.defaultVariants.headerBackground,
+    width = import_theme.datagrid.defaultVariants.width,
+    loadingMode,
+    emptyMessage,
+    isLoading = false,
+    pageSize = 20,
+    cellBorder,
+    ...rest
+  } = props;
+  const styles = (0, import_theme.datagrid)({
+    border,
+    columnsResizable,
+    columnsDraggable,
+    columnsPinnable,
+    headerBackground,
+    stripped,
+    rowBorder,
+    loadingMode,
+    cellBorder,
+    rowRounded,
+    width,
+    dense
+  });
+  if (!table) {
+    throw new Error('DataGrid requires a "table" prop');
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DataGridProvider,
+    {
+      value: {
+        table,
+        styles,
+        columnsResizable,
+        columnsDraggable,
+        columnsPinnable,
+        stripped,
+        rowBorder,
+        loadingMode,
+        emptyMessage,
+        isLoading,
+        pageSize
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function DataGridContainer({
+  children,
+  className
+}) {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "data-grid", className: (0, import_shared_utils.cn)(styles.container({ className })), children });
+}
+function DataGridTableHead({
+  children,
+  className,
+  ...restProps
+}) {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { className: styles.head({ className }), ...restProps, children });
+}
+function DataGridTableHeadRow({
+  children,
+  headerGroup,
+  className,
+  ...restProps
+}) {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "tr",
+    {
+      className: styles.headerRow({ className }),
+      ...restProps,
+      children
+    },
+    headerGroup.id
+  );
+}
+function DataGridTableBase({
+  children,
+  className,
+  ...restProps
+}) {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "table",
+    {
+      "data-slot": "data-grid-table",
+      className: styles.table({ className }),
+      ...restProps,
+      children
+    }
+  );
+}
+function DataGridTableHeadRowCell({
+  children,
+  header,
+  dndRef
+}) {
+  var _a;
+  const { styles } = useDataGridContext();
+  const { column } = header;
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "th",
+    {
+      ref: dndRef,
+      style: {
+        "--size": `${header.getSize()}px`
+      },
+      "data-pinned": isPinned || void 0,
+      "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
+      className: (0, import_shared_utils.cn)(
+        styles.headerRowCell(),
+        (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName
+      ),
+      children
+    },
+    header.id
+  );
+}
+function DataGridTableRowSpacer() {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { "aria-hidden": "true", className: styles.rowSpacer() });
+}
+function DataGridTableHeadRowCellResize({
+  header
+}) {
+  const { column } = header;
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        onDoubleClick: () => column.resetSize(),
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        className: styles.headRowCellResize()
+      }
+    }
+  );
+}
+function DataGridTableBody({
+  children,
+  className,
+  ...restProps
+}) {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { className: (0, import_shared_utils.cn)(styles.body({ className })), ...restProps, children });
+}
+function DataGridTableEmpty() {
+  const { styles, table, emptyMessage } = useDataGridContext();
+  const totalColumns = table.getAllColumns().length;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
+}
+function DataGridTableBodyRowSkeleton({ children }) {
+  const { table, styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "tr",
+    {
+      className: (0, import_shared_utils.cn)(
+        styles.bodyRowSkeleton,
+        // props.onRowClick && 'cursor-pointer',
+        table.options.enableRowSelection && "[&_>:first-child]:relative"
+      ),
+      children
+    }
+  );
+}
+function DataGridTableBodyRowCell({
+  children,
+  cell,
+  dndRef,
+  dndStyle
+}) {
+  var _a;
+  const { styles, columnsResizable, columnsDraggable, columnsPinnable } = useDataGridContext();
+  const { column } = cell;
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "td",
+    {
+      ref: dndRef,
+      ...columnsDraggable && !isPinned ? { cell } : {},
+      style: {
+        ...columnsPinnable && column.getCanPin() && getPinningStyles(column),
+        ...dndStyle ? dndStyle : null
+      },
+      "data-pinned": isPinned || void 0,
+      "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
+      className: (0, import_shared_utils.cn)(
+        styles.bodyRowCell(),
+        columnsResizable && column.getCanResize() && "truncate",
+        (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
+        columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"'
+        // column.getIndex() === 0 || column.getIndex() === row.getVisibleCells().length - 1
+        //   ? props.tableClassNames?.edgeCell
+        //   : '',
+      ),
+      children
+    },
+    cell.id
+  );
+}
+function DataGridTableBodyRowSkeletonCell({
+  children,
+  column
+}) {
+  var _a;
+  const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "td",
+    {
+      className: (0, import_shared_utils.cn)(
+        styles.bodyRowSkeletonCell(),
+        columnsResizable && column.getCanResize() && "truncate",
+        (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
+        columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"'
+        // column.getIndex() === 0 || column.getIndex() === table.getVisibleFlatColumns().length - 1
+        //   ? props.tableClassNames?.edgeCell
+        //   : '',
+      ),
+      children
+    }
+  );
+}
+function DataGridTableBodyRow({
+  children,
+  row,
+  dndRef,
+  dndStyle
+}) {
+  const { styles, table } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "tr",
+    {
+      ref: dndRef,
+      style: { ...dndStyle ? dndStyle : null },
+      "data-state": table.options.enableRowSelection && row.getIsSelected() ? "selected" : void 0,
+      className: (0, import_shared_utils.cn)(
+        styles.bodyRow(),
+        //props.onRowClick && 'cursor-pointer',
+        table.options.enableRowSelection && "[&_>:first-child]:relative"
+      ),
+      children
+    }
+  );
+}
+function DataGridTableBodyRowExpanded({ row }) {
+  var _a, _b, _c;
+  const { table, styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: row.getVisibleCells().length, children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
+    var _a2;
+    return (_a2 = column.columnDef.meta) == null ? void 0 : _a2.expandedContent;
+  })) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.expandedContent) == null ? void 0 : _c.call(_b, row.original) }) });
+}
+function DataGridTable() {
+  const {
+    table,
+    columnsResizable,
+    stripped,
+    rowBorder,
+    loadingMode,
+    isLoading,
+    pageSize
+  } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBase, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRow, { headerGroup, children: headerGroup.headers.map((header) => {
+      const { column } = header;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableHeadRowCell, { header, children: [
+        header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+          header.column.columnDef.header,
+          header.getContext()
+        ),
+        columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
+      ] }, column.id);
+    }) }, headerGroup.id)) }),
+    (stripped || !rowBorder) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableRowSpacer, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => {
+      var _a;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DataGridTableBodyRowSkeletonCell,
+        {
+          column,
+          children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
+        },
+        colIndex.toString()
+      );
+    }) }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRow, { row, children: row.getVisibleCells().map((cell) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowCell, { cell, children: (0, import_react_table.flexRender)(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id);
+        }) }, row.id),
+        row.getIsExpanded() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowExpanded, { row })
+      ] }, row.id);
+    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableEmpty, {}) })
+  ] });
+}
+function getPinningStyles(column) {
+  const isPinned = column.getIsPinned();
+  return {
+    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+    position: isPinned ? "sticky" : "relative",
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : 0
+  };
+}
+function DataGridTableRowSelectAll({
+  size
+}) {
+  const { table, isLoading } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_checkbox.Checkbox,
+    {
+      checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+      disabled: isLoading || table.getRowModel().rows.length === 0,
+      onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+      "aria-label": "Select all",
+      size,
+      className: "align-[inherit]"
+    }
+  );
+}
+function DataGridTableRowSelect({
+  row,
+  size
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_shared_utils.cn)(
+          "hidden absolute top-0 bottom-0 start-0 w-[2px] bg-primary",
+          row.getIsSelected() && "block"
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_checkbox.Checkbox,
+      {
+        checked: row.getIsSelected(),
+        onCheckedChange: (value) => row.toggleSelected(!!value),
+        "aria-label": "Select row",
+        size: size != null ? size : "sm",
+        className: "align-[inherit]"
+      }
+    )
+  ] });
+}
+
+// src/index.ts
+var DataGrid2 = Object.assign(DataGrid, {
+  Container: DataGridContainer,
+  Table: DataGridTable,
+  SelectAll: DataGridTableRowSelectAll,
+  RowSelect: DataGridTableRowSelect
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataGrid
+});

package/dist/index.mjs

@@ -0,0 +1,19 @@
+"use client";
+import {
+  DataGrid,
+  DataGridContainer,
+  DataGridTable,
+  DataGridTableRowSelect,
+  DataGridTableRowSelectAll
+} from "./chunk-XYG65G3U.mjs";
+
+// src/index.ts
+var DataGrid2 = Object.assign(DataGrid, {
+  Container: DataGridContainer,
+  Table: DataGridTable,
+  SelectAll: DataGridTableRowSelectAll,
+  RowSelect: DataGridTableRowSelect
+});
+export {
+  DataGrid2 as DataGrid
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@kopexa/data-grid",
+  "version": "0.0.0-canary-20250921225330",
+  "description": "A DataGrid Component",
+  "keywords": [
+    "data-grid"
+  ],
+  "author": "Kopexa <hello@kopexa.com>",
+  "homepage": "https://kopexa.com",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kopexa-grc/sight.git",
+    "directory": "packages/components/data-grid"
+  },
+  "bugs": {
+    "url": "https://github.com/kopexa-grc/sight/issues"
+  },
+  "peerDependencies": {
+    "motion": ">=12.23.6",
+    "react": ">=19.0.0-rc.0",
+    "react-dom": ">=19.0.0-rc.0",
+    "@kopexa/theme": "0.0.0-canary-20250921225330"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^8.21.3",
+    "@kopexa/react-utils": "2.0.8",
+    "@kopexa/shared-utils": "1.1.7",
+    "@kopexa/checkbox": "0.0.0-canary-20250921225330"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}