@dmsi/wedgekit-react 0.0.82 → 0.0.83

package/dist/components/useMenuSystem.cjs

@@ -39,16 +39,19 @@ __export(useMenuSystem_exports, {
   useSubMenuSystem: () => useSubMenuSystem
 });
 module.exports = __toCommonJS(useMenuSystem_exports);
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/hooks/useKeydown.ts
 var import_react = require("react");
 
-// src/hooks/useMatchesMedia.ts
+// src/hooks/useInfiniteScroll.tsx
 var import_react2 = require("react");
+
+// src/hooks/useMatchesMedia.ts
+var import_react3 = require("react");
 var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react2.useState)();
-  (0, import_react2.useLayoutEffect)(() => {
+  const [matches, setMatches] = (0, import_react3.useState)();
+  (0, import_react3.useLayoutEffect)(() => {
     const mediaQueryList = window.matchMedia(query);
     const listener = () => setMatches(mediaQueryList.matches);
     listener();
@@ -61,17 +64,17 @@ var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/components/useMenuSystem.tsx
 function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react3.useState)(
+  const [activeMenus, setActiveMenus] = (0, import_react4.useState)(
     {}
   );
-  const [activeMenu, setActiveMenu] = (0, import_react3.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react3.useState)(
+  const [activeMenu, setActiveMenu] = (0, import_react4.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react4.useState)(
     null
   );
-  const menuRootRef = (0, import_react3.useRef)(null);
-  const subMenuRefs = (0, import_react3.useRef)({});
-  const hoverTimeoutRef = (0, import_react3.useRef)(null);
-  const closeTimeoutRef = (0, import_react3.useRef)(null);
+  const menuRootRef = (0, import_react4.useRef)(null);
+  const subMenuRefs = (0, import_react4.useRef)({});
+  const hoverTimeoutRef = (0, import_react4.useRef)(null);
+  const closeTimeoutRef = (0, import_react4.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -169,7 +172,7 @@ function useSubMenuSystem(mobilePositionTo) {
   const isMenuActive = (menuId, level) => {
     return activeMenus[level] === menuId;
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a;
       if (Object.keys(activeMenus).length === 0) return;
@@ -188,7 +191,7 @@ function useSubMenuSystem(mobilePositionTo) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [activeMenus]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -265,13 +268,13 @@ function useSubMenuSystem(mobilePositionTo) {
   };
 }
 function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react3.useState)({
+  const [menuPosition, setMenuPosition] = (0, import_react4.useState)({
     top: 0,
     left: 0,
     minWidth: 0
   });
   const isMobile = useMatchesMobile();
-  const updatePosition = (0, import_react3.useCallback)(() => {
+  const updatePosition = (0, import_react4.useCallback)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
@@ -307,7 +310,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
       minWidth: triggerRect.width
     });
   }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
     const handleClickOutside = (event) => {
       var _a, _b, _c, _d, _e;
@@ -333,7 +336,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     options == null ? void 0 : options.menuRef,
     options == null ? void 0 : options.additionalRefs
   ]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (elementRef == null ? void 0 : elementRef.current) {

package/dist/components/useMenuSystem.js

@@ -2,8 +2,8 @@
 import {
   useMenuPosition,
   useSubMenuSystem
-} from "../chunk-B6PDZCU7.js";
-import "../chunk-SWA5WVQO.js";
+} from "../chunk-5GUW4DUY.js";
+import "../chunk-WNQ53SVY.js";
 import "../chunk-ORMEWXMH.js";
 export {
   useMenuPosition,

package/dist/hooks/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/hooks/index.ts
 var hooks_exports = {};
 __export(hooks_exports, {
+  useInfiniteScroll: () => useInfiniteScroll,
   useKeydown: () => useKeydown,
   useMatchesMedia: () => useMatchesMedia,
   useMatchesMobile: () => useMatchesMobile
@@ -55,11 +56,40 @@ function useKeydown(keys, isActive) {
   }, [keys, isActive]);
 }
 
-// src/hooks/useMatchesMedia.ts
+// src/hooks/useInfiniteScroll.tsx
 var import_react2 = require("react");
+function useInfiniteScroll({
+  containerRef,
+  onLoadMore,
+  isLoading,
+  offset = 50,
+  enabled = true
+  // ✅ Add this
+}) {
+  (0, import_react2.useEffect)(() => {
+    if (!enabled) return;
+    const handleScroll = () => {
+      const el2 = containerRef.current;
+      if (!el2 || isLoading) return;
+      const { scrollTop, scrollHeight, clientHeight } = el2;
+      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
+      if (isNearBottom) {
+        onLoadMore();
+      }
+    };
+    const el = containerRef.current;
+    if (el) el.addEventListener("scroll", handleScroll);
+    return () => {
+      if (el) el.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerRef, onLoadMore, isLoading, offset, enabled]);
+}
+
+// src/hooks/useMatchesMedia.ts
+var import_react3 = require("react");
 var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react2.useState)();
-  (0, import_react2.useLayoutEffect)(() => {
+  const [matches, setMatches] = (0, import_react3.useState)();
+  (0, import_react3.useLayoutEffect)(() => {
     const mediaQueryList = window.matchMedia(query);
     const listener = () => setMatches(mediaQueryList.matches);
     listener();
@@ -71,6 +101,7 @@ var useMatchesMedia = (query) => {
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  useInfiniteScroll,
   useKeydown,
   useMatchesMedia,
   useMatchesMobile

package/dist/hooks/index.js

@@ -1,10 +1,12 @@
 import {
+  useInfiniteScroll,
   useKeydown,
   useMatchesMedia,
   useMatchesMobile
-} from "../chunk-SWA5WVQO.js";
+} from "../chunk-WNQ53SVY.js";
 import "../chunk-ORMEWXMH.js";
 export {
+  useInfiniteScroll,
   useKeydown,
   useMatchesMedia,
   useMatchesMobile

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.82",
+  "version": "0.0.83",
   "type": "module",
   "scripts": {
     "build": "tsup",
@@ -22,6 +22,11 @@
       "import": "./dist/components/*.js",
       "require": "./dist/components/*.cjs"
     },
+    "./components": {
+      "types": "./src/components/index.ts",
+      "import": "./dist/components/index.js",
+      "require": "./dist/components/index.cjs"
+    },
     "./hooks": {
       "types": "./src/hooks/index.ts",
       "import": "./dist/hooks/index.js",

package/src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx

@@ -0,0 +1,32 @@
+import { Column } from "@tanstack/react-table";
+import { useState } from "react";
+import { Checkbox, MenuOption } from "../..";
+
+export function ColumnSelectorMenuOption<T>({
+  id,
+  column,
+  toggleColumnVisibility,
+}: {
+  id?: string;
+  column: Column<T, unknown>;
+  toggleColumnVisibility: (id: string, isVisible: boolean) => void;
+}) {
+  const [isVisible, setIsVisible] = useState(column.getIsVisible());
+  const label =
+    typeof column.columnDef.header === "string"
+      ? column.columnDef.header
+      : null;
+  return (
+    <MenuOption id={id} selected={isVisible} defaultChecked={isVisible}>
+      <Checkbox
+        id={id ? `${id}-checkbox` : undefined}
+        label={label ?? "Unknown"}
+        checked={isVisible}
+        onChange={(e) => {
+          setIsVisible(e.target.checked);
+          toggleColumnVisibility(column.id, e.target.checked);
+        }}
+      />
+    </MenuOption>
+  );
+}

package/src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx

@@ -0,0 +1,66 @@
+import { Table } from "@tanstack/react-table";
+import { useRef, useState } from "react";
+import { Button, DataGridCell, Icon, Menu } from "../..";
+import { ColumnSelectorMenuOption } from "./ColumnSelectorMenuOption";
+
+export function ColumnSelectorHeaderCell<T>({
+  id,
+  table,
+  toggleColumnVisibility,
+  resetColumnVisibility,
+}: {
+  id?: string;
+  table: Table<T>;
+  toggleColumnVisibility: (id: string, isVisible: boolean) => void;
+  resetColumnVisibility: () => void;
+}) {
+  const ref = useRef<HTMLElement>(null);
+  const [show, setShow] = useState(false);
+
+  return (
+    <DataGridCell
+      id={id}
+      width="48"
+      type="header"
+      color="text-secondary-normal"
+      ref={ref}
+    >
+      <Button
+        id={id ? `${id}-button` : undefined}
+        onClick={() => setShow((prev) => !prev)}
+        variant="navigation"
+        iconOnly
+        leftIcon={<Icon name="tune" />}
+      ></Button>
+      <Menu
+        id={id ? `${id}-menu` : undefined}
+        positionTo={ref}
+        position="bottom-right"
+        show={show}
+        setShow={setShow}
+      >
+        <Button
+          id={id ? `${id}-reset-button` : undefined}
+          variant="tertiary"
+          onClick={() => {
+            resetColumnVisibility();
+            setShow(false);
+          }}
+        >
+          Reset to default
+        </Button>
+        {table
+          .getAllColumns()
+          .filter((x) => x.columnDef.meta?.inVisibilityMenu)
+          .map((column) => (
+            <ColumnSelectorMenuOption
+              id={id ? `${id}-option-${column.id}` : undefined}
+              key={column.id}
+              column={column}
+              toggleColumnVisibility={toggleColumnVisibility}
+            />
+          ))}
+      </Menu>
+    </DataGridCell>
+  );
+}

package/src/components/DataGrid/PinnedColumns.tsx

@@ -0,0 +1,145 @@
+import { flexRender, RowData, Table } from "@tanstack/react-table";
+import { Checkbox, DataCellHeader, DataGridCell, Subheader } from "..";
+import { DataGridPagination } from "./types";
+import clsx from "clsx";
+import { getSortIcon } from "./utils";
+import React from "react";
+import { TableBody } from "./TableBody";
+interface PinnedColumnsProps<TData extends RowData> {
+  pinDirection: "left" | "right";
+  table: Table<TData>;
+  tableContainerRef: React.RefObject<HTMLDivElement | null>;
+  pagination: DataGridPagination | undefined;
+  isLoadingMore: boolean;
+  hasMore: boolean;
+  showFilterRow: boolean;
+  enableColumnSelector?: boolean;
+  centerHeader?: boolean;
+  allSelectedAcrossPages?: boolean;
+  someSelectedAcrossPages?: boolean;
+  toggleSelectAllAcrossPages?: () => void;
+}
+
+export function PinnedColumns<TData>({
+  pinDirection = "left",
+  table,
+  centerHeader,
+  allSelectedAcrossPages,
+  someSelectedAcrossPages,
+  toggleSelectAllAcrossPages,
+  ...props
+}: PinnedColumnsProps<TData>) {
+  const headerGroups =
+    pinDirection === "left"
+      ? table.getLeftHeaderGroups()
+      : table.getRightHeaderGroups();
+
+  return (
+    headerGroups[0]?.headers.length > 0 && (
+      <table
+        className={clsx(
+          "flex flex-col min-h-min sticky z-20 bg-background-grouped-primary-normal",
+          pinDirection === "left" ? "left-0" : "right-0",
+        )}
+      >
+        <thead className="sticky top-0 z-20 grid">
+          {headerGroups.map((headerGroup) => {
+            return (
+              <tr key={headerGroup.id} className="flex w-full">
+                {headerGroup.headers.map((header) => {
+                  if (!header) {
+                    return;
+                  }
+
+                  if (typeof header.column.columnDef.header === "string") {
+                    const customHeaderWidth =
+                      header.column.columnDef.meta?.headerWidth;
+
+                    return (
+                      <DataCellHeader
+                        locked
+                        key={header.id}
+                        header={header}
+                        center={centerHeader}
+                        width={customHeaderWidth}
+                        className={clsx(
+                          header.column.getCanSort()
+                            ? "cursor-pointer"
+                            : "cursor-grab",
+                          "group",
+                        )}
+                      >
+                        <Subheader tall>
+                          {header.column.columnDef.header}
+                        </Subheader>
+
+                        {getSortIcon(header.column.getIsSorted())}
+
+                        {!header.column.getIsSorted() &&
+                          header.column.getCanSort() &&
+                          getSortIcon(
+                            header.column.getNextSortingOrder(),
+                            true,
+                          )}
+
+                        {header.column.getSortIndex() !== -1 &&
+                          table.getState().sorting.length > 1 && (
+                            <Subheader tall>
+                              {header.column.getSortIndex() + 1}
+                            </Subheader>
+                          )}
+
+                        {!header.column.columnDef.meta?.locked && (
+                          <div
+                            onDoubleClick={(e) => {
+                              e.stopPropagation();
+                              header.column.resetSize();
+                            }}
+                            onMouseDown={(e) => {
+                              e.stopPropagation();
+                              header.getResizeHandler()(e);
+                            }}
+                            onTouchStart={(e) => {
+                              e.stopPropagation();
+                              header.getResizeHandler()(e);
+                            }}
+                            className="absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                          />
+                        )}
+                      </DataCellHeader>
+                    );
+                  }
+                  return (
+                    <React.Fragment key={header.id}>
+                      {header.column.columnDef.meta?.checkbox ? (
+                        <DataGridCell type="header" component="checkbox" locked>
+                          <Checkbox
+                            checked={allSelectedAcrossPages}
+                            indeterminate={someSelectedAcrossPages}
+                            onChange={toggleSelectAllAcrossPages}
+                          />
+                        </DataGridCell>
+                      ) : (
+                        flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </thead>
+
+        <TableBody
+          {...props}
+          table={table}
+          locked={true}
+          pinDirection={pinDirection}
+        />
+      </table>
+    )
+  );
+}

package/src/components/DataGrid/TableBody/LoadingCell.tsx

@@ -0,0 +1,40 @@
+import { ColumnDef, RowData } from "@tanstack/react-table";
+import { Checkbox, DataGridCell, Input } from "../..";
+
+export function LoadingCell<T extends RowData>({
+  id,
+  column,
+}: {
+  id?: string;
+  column: ColumnDef<T>;
+}) {
+  const key = `loading-${column.id}`;
+  if (column.cell === "checkbox") {
+    return (
+      <DataGridCell id={id ? `${id}-${key}` : undefined} key={key}>
+        <Checkbox id={id ? `${id}-${key}-checkbox` : undefined} disabled />
+      </DataGridCell>
+    );
+  }
+  if (column.cell === "input") {
+    return (
+      <DataGridCell
+        id={id ? `${id}-${key}` : undefined}
+        key={key}
+        component="input"
+      >
+        <Input
+          id={id ? `${id}-${key}-input` : undefined}
+          align="left"
+          disabled
+          wrapperClassName="!rounded-none !border-0"
+        />
+      </DataGridCell>
+    );
+  }
+  return (
+    <DataGridCell id={id ? `${id}-${key}` : undefined} key={key}>
+      <div className="bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6"></div>
+    </DataGridCell>
+  );
+}

package/src/components/DataGrid/TableBody/TableBodyRow.tsx

@@ -0,0 +1,129 @@
+import clsx from "clsx";
+import { Cell, flexRender, Row } from "@tanstack/react-table";
+import { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
+import React from "react";
+import { DataGridCell, DragAlongCell, Paragraph, Tooltip } from "../..";
+
+interface TableBodyRowProps<T> {
+  id?: string;
+  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  row: Row<T>;
+  rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+  virtualPaddingLeft?: number | undefined;
+  virtualPaddingRight?: number | undefined;
+  virtualRow: VirtualItem;
+  showFilterRow: boolean;
+  enableColumnSelector?: boolean;
+  locked?: boolean;
+  pinDirection?: "left" | "right";
+}
+
+export function TableBodyRow<T>({
+  id,
+  columnVirtualizer,
+  row,
+  // rowVirtualizer,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualRow,
+  showFilterRow,
+  enableColumnSelector = false,
+  locked,
+  pinDirection,
+}: TableBodyRowProps<T>) {
+  let visibleCells: Cell<T, unknown>[];
+
+  if (locked) {
+    visibleCells =
+      pinDirection === "left"
+        ? row.getLeftVisibleCells()
+        : row.getRightVisibleCells();
+  } else {
+    visibleCells = row.getCenterVisibleCells();
+  }
+
+  const virtualColumns = columnVirtualizer?.getVirtualItems() ?? [];
+  const columns = locked ? visibleCells : virtualColumns;
+
+  const isError =
+    typeof row.original === "object" &&
+    row.original !== null &&
+    "rowState" in row.original &&
+    row.original.rowState === "error";
+
+  const CellElement = locked ? DataGridCell : DragAlongCell;
+
+  return (
+    <tr
+      key={row.id}
+      className={clsx(
+        "transition-colors hover:bg-background-action-secondary-hover",
+        row.getIsSelected() && "!bg-background-action-secondary-hover",
+        isError && "!bg-background-action-critical-secondary-hover",
+        showFilterRow
+          ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal"
+          : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
+      )}
+      style={{
+        display: "flex",
+        position: "absolute",
+        transform: `translateY(${
+          showFilterRow ? virtualRow.start + 40 : virtualRow.start
+        }px)`,
+        width: "100%",
+      }}
+    >
+      {!locked && virtualPaddingLeft ? (
+        // fake empty column to the left for virtualization scroll padding
+        <td style={{ display: "flex", width: virtualPaddingLeft }} />
+      ) : null}
+
+      {columns.map((column) => {
+        const cell = locked
+          ? (column as Cell<T, unknown>)
+          : visibleCells[(column as VirtualItem).index];
+
+        if (!cell) {
+          return;
+        }
+        const cellValue = cell.getValue();
+
+        return cell.column.columnDef.meta?.useCustomRenderer ? (
+          <React.Fragment key={cell.id}>
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </React.Fragment>
+        ) : (
+          <CellElement
+            key={cell.id}
+            id={id ? `${id}-cell-${cell.id}` : undefined}
+            cell={cell}
+            className={clsx({
+              "justify-end": typeof cellValue === "number",
+            })}
+            width={cell.column.columnDef.meta?.headerWidth}
+          >
+            <Tooltip
+              id={id ? `${id}-tooltip-${cell.id}` : undefined}
+              showOnTruncation
+              message={cellValue as string}
+              position="bottom"
+            >
+              <Paragraph addOverflow tall>
+                {cellValue as React.ReactNode | string}
+              </Paragraph>
+            </Tooltip>
+          </CellElement>
+        );
+      })}
+
+      {!locked && virtualPaddingRight ? (
+        // fake empty column to the right for virtualization scroll padding
+        <td style={{ display: "flex", width: virtualPaddingRight }} />
+      ) : null}
+
+      {enableColumnSelector && !locked && (
+        <td className="p-2" style={{ width: "48.8px" }}></td>
+      )}
+    </tr>
+  );
+}