@trackunit/react-table 0.0.209 → 0.0.210-alpha-1820203754.0

package/index.cjs.js

@@ -405,9 +405,9 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
 /**
  * ColumnFilter component for managing visibility and order of table columns.
  *
- * @template T - The type representing the data model associated with the columns.
- * @template V - The type representing the value of columns.
- * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
+ * @template TColumnFilter - The type representing the data model associated with the columns.
+ * @template TColumnFilterValue - The type representing the value of columns.
+ * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }) => {
@@ -558,12 +558,12 @@ const CompactIcon = () => {
 /**
  * Sorting component for managing table column sorting.
  *
- * @template T - The type representing the data model associated with the columns.
- * @template V - The type representing the value of columns.
- * @param {SortingProps<T, V>} props - The props object containing sorting properties.
+ * @template TSorting - The type representing the data model associated with the columns.
+ * @template TSortingValue - The type representing the value of columns.
+ * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
  * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
  */
-const Sorting = ({ columns }) => {
+const Sorting = ({ columns, }) => {
     var _a, _b;
     const [t] = useTranslation();
     const sortableColumns = columns.filter(column => column.getCanSort());
@@ -588,60 +588,6 @@ const Sorting = ({ columns }) => {
                                 }) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
-/**
- * Custom hook for handling Relay pagination in tables.
- *
- * @param {RelayPaginationProps} props - The props object containing pagination configuration.
- * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
- */
-const useRelayPagination = (props = { pageSize: 50 }) => {
-    const [variables, setVariables] = React.useState({ first: props.pageSize });
-    const [pageInfo, setPageInfo] = React.useState();
-    const [isLoading, setIsLoading] = React.useState(false);
-    const nextPage = React.useCallback(() => {
-        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
-            setVariables({
-                after: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor,
-                first: props.pageSize,
-            });
-        }
-    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
-    const previousPage = React.useCallback(() => {
-        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
-            setVariables({
-                before: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor,
-                last: props.pageSize,
-            });
-        }
-    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
-    const reset = React.useCallback(() => {
-        setVariables({
-            last: undefined,
-            before: undefined,
-            after: undefined,
-            first: props.pageSize,
-        });
-        if (props.onReset) {
-            props.onReset();
-        }
-    }, [props.onReset, props.pageSize]);
-    const pagination = React.useMemo(() => {
-        return {
-            variables,
-            table: {
-                nextPage,
-                previousPage,
-                isLoading,
-                setIsLoading,
-                reset,
-                pageInfo: pageInfo === null ? undefined : pageInfo,
-                setPageInfo,
-            },
-        };
-    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
-    return pagination;
-};
-
 /**
  * Hook for managing and controlling a table's state and behavior.
  *
@@ -745,7 +691,7 @@ const useTable = (_a) => {
  *     columns,
  * });
  */
-const useTableSelection = ({ data, defaultSelectedIds, }) => {
+const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true, }) => {
     const [rowSelection, setRowSelection] = React.useState({});
     React.useEffect(() => {
         const initialSelection = {};
@@ -786,8 +732,8 @@ const useTableSelection = ({ data, defaultSelectedIds, }) => {
     const selectionTableProps = React.useMemo(() => ({
         onRowSelectionChange: setRowSelection,
         getRowId: row => row.id,
-        enableRowSelection: true,
-    }), []);
+        enableRowSelection,
+    }), [enableRowSelection]);
     return React.useMemo(() => ({
         toggleRowSelectionState,
         selectionColumn,
@@ -862,6 +808,5 @@ exports.fromTUSortToTanStack = fromTUSortToTanStack;
 exports.fromTUSortToTanStackSite = fromTUSortToTanStackSite;
 exports.fromTanStackToTUSort = fromTanStackToTUSort;
 exports.fromTanStackToTUSortSite = fromTanStackToTUSortSite;
-exports.useRelayPagination = useRelayPagination;
 exports.useTable = useTable;
 exports.useTableSelection = useTableSelection;

package/index.esm.js

@@ -380,9 +380,9 @@ const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-cent
 /**
  * ColumnFilter component for managing visibility and order of table columns.
  *
- * @template T - The type representing the data model associated with the columns.
- * @template V - The type representing the value of columns.
- * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
+ * @template TColumnFilter - The type representing the data model associated with the columns.
+ * @template TColumnFilterValue - The type representing the value of columns.
+ * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }) => {
@@ -533,12 +533,12 @@ const CompactIcon = () => {
 /**
  * Sorting component for managing table column sorting.
  *
- * @template T - The type representing the data model associated with the columns.
- * @template V - The type representing the value of columns.
- * @param {SortingProps<T, V>} props - The props object containing sorting properties.
+ * @template TSorting - The type representing the data model associated with the columns.
+ * @template TSortingValue - The type representing the value of columns.
+ * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
  * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
  */
-const Sorting = ({ columns }) => {
+const Sorting = ({ columns, }) => {
     var _a, _b;
     const [t] = useTranslation();
     const sortableColumns = columns.filter(column => column.getCanSort());
@@ -563,60 +563,6 @@ const Sorting = ({ columns }) => {
                                 }) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
-/**
- * Custom hook for handling Relay pagination in tables.
- *
- * @param {RelayPaginationProps} props - The props object containing pagination configuration.
- * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
- */
-const useRelayPagination = (props = { pageSize: 50 }) => {
-    const [variables, setVariables] = useState({ first: props.pageSize });
-    const [pageInfo, setPageInfo] = useState();
-    const [isLoading, setIsLoading] = useState(false);
-    const nextPage = useCallback(() => {
-        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
-            setVariables({
-                after: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor,
-                first: props.pageSize,
-            });
-        }
-    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
-    const previousPage = useCallback(() => {
-        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
-            setVariables({
-                before: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor,
-                last: props.pageSize,
-            });
-        }
-    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
-    const reset = useCallback(() => {
-        setVariables({
-            last: undefined,
-            before: undefined,
-            after: undefined,
-            first: props.pageSize,
-        });
-        if (props.onReset) {
-            props.onReset();
-        }
-    }, [props.onReset, props.pageSize]);
-    const pagination = useMemo(() => {
-        return {
-            variables,
-            table: {
-                nextPage,
-                previousPage,
-                isLoading,
-                setIsLoading,
-                reset,
-                pageInfo: pageInfo === null ? undefined : pageInfo,
-                setPageInfo,
-            },
-        };
-    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
-    return pagination;
-};
-
 /**
  * Hook for managing and controlling a table's state and behavior.
  *
@@ -720,7 +666,7 @@ const useTable = (_a) => {
  *     columns,
  * });
  */
-const useTableSelection = ({ data, defaultSelectedIds, }) => {
+const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true, }) => {
     const [rowSelection, setRowSelection] = useState({});
     useEffect(() => {
         const initialSelection = {};
@@ -761,8 +707,8 @@ const useTableSelection = ({ data, defaultSelectedIds, }) => {
     const selectionTableProps = useMemo(() => ({
         onRowSelectionChange: setRowSelection,
         getRowId: row => row.id,
-        enableRowSelection: true,
-    }), []);
+        enableRowSelection,
+    }), [enableRowSelection]);
     return useMemo(() => ({
         toggleRowSelectionState,
         selectionColumn,
@@ -824,4 +770,4 @@ const fromTanStackToTUSortSite = (input) => {
  */
 setupLibraryTranslations();
 
-export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useRelayPagination, useTable, useTableSelection };
+export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useTable, useTableSelection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.209",
+  "version": "0.0.210-alpha-1820203754.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -21,7 +21,8 @@
     "@trackunit/react-core-contexts-api": "*",
     "@trackunit/css-class-variance-utilities": "*",
     "@trackunit/ui-icons": "*",
-    "@trackunit/i18n-library-translation": "*"
+    "@trackunit/i18n-library-translation": "*",
+    "@trackunit/react-graphql-hooks": "*"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/Table.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Table as ReactTable, Row } from "@tanstack/react-table";
 import { CommonProps } from "@trackunit/react-components";
-import { RelayPagination } from "./types";
+import { RelayPagination } from "@trackunit/react-graphql-hooks";
 export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps {
     pagination: RelayPagination;
     headerLeftActions?: React.ReactNode;

package/src/index.d.ts

@@ -5,7 +5,6 @@ export * from "./menus/ColumnFilter";
 export * from "./menus/RowSpacing";
 export * from "./menus/Sorting";
 export * from "./types";
-export * from "./useRelayPagination";
 export * from "./useTable";
 export * from "./useTableSelection";
 export * from "./utils";

package/src/menus/ColumnFilter.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Column, ColumnOrderState, Updater } from "@tanstack/react-table";
-export interface IColumnFilterProps<T extends object, V> {
-    columns: Column<T, V>[];
+export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterValue> {
+    columns: Column<TColumnFilter, TColumnFilterValue>[];
     defaultColumnOrder: ColumnOrderState;
     columnOrder?: ColumnOrderState;
     className?: string;
@@ -11,14 +11,14 @@ export interface IColumnFilterProps<T extends object, V> {
 /**
  * ColumnFilter component for managing visibility and order of table columns.
  *
- * @template T - The type representing the data model associated with the columns.
- * @template V - The type representing the value of columns.
- * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
+ * @template TColumnFilter - The type representing the data model associated with the columns.
+ * @template TColumnFilterValue - The type representing the value of columns.
+ * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
-export declare const ColumnFilter: <T extends Object, V>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: IColumnFilterProps<T, V>) => JSX.Element | null;
-export interface ColumnFiltersDragAndDropProps<T extends object, V> {
-    columns: Column<T, V>[];
+export declare const ColumnFilter: <TColumnFilter extends Object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => JSX.Element | null;
+export interface ColumnFiltersDragAndDropProps<TColumnFiltersDragAndDrop extends object, TColumnFiltersDragAndDropValue> {
+    columns: Column<TColumnFiltersDragAndDrop, TColumnFiltersDragAndDropValue>[];
     setColumnOrder: (updater: Updater<ColumnOrderState>) => void;
     onUserEvent?: (event: "Column Reordering" | "Column Filter", payload: Record<string, unknown>) => void;
 }

package/src/menus/Sorting.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 import { Column } from "@tanstack/react-table";
-interface SortingProps<T extends object, V> {
-    columns: Column<T, V>[];
+interface SortingProps<TSorting extends object, TSortingValue> {
+    columns: Column<TSorting, TSortingValue>[];
 }
 /**
  * Sorting component for managing table column sorting.
  *
- * @template T - The type representing the data model associated with the columns.
- * @template V - The type representing the value of columns.
- * @param {SortingProps<T, V>} props - The props object containing sorting properties.
+ * @template TSorting - The type representing the data model associated with the columns.
+ * @template TSortingValue - The type representing the value of columns.
+ * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
  * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
  */
-export declare const Sorting: <T extends Object, V>({ columns }: SortingProps<T, V>) => JSX.Element | null;
+export declare const Sorting: <TSorting extends Object, TSortingValue>({ columns, }: SortingProps<TSorting, TSortingValue>) => JSX.Element | null;
 export {};

package/src/types.d.ts

@@ -9,17 +9,4 @@ declare module "@tanstack/react-table" {
         isCustomField?: boolean;
     }
 }
-export interface RelayPageInfo {
-    count?: number | null;
-    endCursor?: string | null;
-    hasNextPage?: boolean;
-    hasPreviousPage?: boolean;
-    startCursor?: string | null;
-}
-export interface RelayPagination {
-    nextPage: () => void;
-    previousPage: () => void;
-    pageInfo?: RelayPageInfo;
-    isLoading: boolean;
-}
 export type Alignment = "left" | "center" | "right";

package/src/useInfiniteScroll.d.ts

@@ -1,6 +1,6 @@
 import { VirtualItem } from "@tanstack/react-virtual";
+import { RelayPagination } from "@trackunit/react-graphql-hooks";
 import { RefObject } from "react";
-import { RelayPagination } from "./types";
 interface InfiniteScrollProps {
     pagination: RelayPagination;
     containerRef: RefObject<HTMLDivElement>;

package/src/useTableSelection.d.ts

@@ -1,6 +1,6 @@
 import { ColumnDef, RowSelectionState } from "@tanstack/react-table";
 import { Dispatch, SetStateAction } from "react";
-type selectableTableData = {
+export type selectableTableData = {
     id: string;
 } & object;
 export interface TableSelectionReturn<TData extends selectableTableData> {
@@ -21,7 +21,7 @@ export interface TableSelectionReturn<TData extends selectableTableData> {
     selectionTableProps: {
         onRowSelectionChange: Dispatch<SetStateAction<RowSelectionState>>;
         getRowId: (row: TData) => TData["id"];
-        enableRowSelection: true;
+        enableRowSelection: boolean;
     };
     /**
      * A function to update the row selection state.
@@ -39,8 +39,22 @@ export interface TableSelectionReturn<TData extends selectableTableData> {
     toggleRowSelectionState: (id: TData["id"]) => void;
 }
 export interface TableSelectionProps<TData extends selectableTableData> {
+    /**
+     * The data that is displayed in the table.
+     * This must have an `id` field, to enable selection.
+     * The same data should be passed to the `data` prop of the `useTable` Hook.
+     */
     data: TData[];
+    /**
+     * An array of ids of the rows that should be selected by default.
+     * This is useful when you want to preselect rows, for example when editing an existing entity.
+     */
     defaultSelectedIds?: TData["id"][];
+    /**
+     * Whether or not to enable row selection.
+     * If set to `false`, the selection column will still be displayed, but the checkboxes will be disabled.
+     */
+    enableRowSelection?: boolean;
 }
 /**
  * `useTableSelection` is a custom hook that provides functionality for row selection in a table.
@@ -69,5 +83,4 @@ export interface TableSelectionProps<TData extends selectableTableData> {
  *     columns,
  * });
  */
-export declare const useTableSelection: <TData extends selectableTableData>({ data, defaultSelectedIds, }: TableSelectionProps<TData>) => TableSelectionReturn<TData>;
-export {};
+export declare const useTableSelection: <TData extends selectableTableData>({ data, defaultSelectedIds, enableRowSelection, }: TableSelectionProps<TData>) => TableSelectionReturn<TData>;

package/src/useTableSelection.demo.d.ts

@@ -0,0 +1,11 @@
+import { TableSelectionProps, selectableTableData } from "./useTableSelection";
+export interface UseTableSelectionDemoComponentProps<TData extends selectableTableData> extends TableSelectionProps<TData> {
+}
+/**
+ * The `useTableSelection` Hook provides functionality for row selection in a table.
+ *
+ * It returns an object containing methods and values related to row selection.
+ *
+ * It Also returns a `selectionColumn` object that can be used as a column definition in a table.
+ */
+export declare const UseTableSelectionDemoComponent: <TData extends selectableTableData>(props: UseTableSelectionDemoComponentProps<TData>) => JSX.Element;

package/src/useRelayPagination.d.ts

@@ -1,29 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-import { RelayPageInfo, RelayPagination } from "./types";
-export interface RelayPaginationProps {
-    pageSize?: number;
-    onReset?: () => void;
-}
-export interface RelayPaginationQueryVariables {
-    first?: number | null;
-    last?: number | null;
-    before?: string | null;
-    after?: string | null;
-}
-export interface RelayTableSupport extends RelayPagination {
-    isLoading: boolean;
-    setIsLoading: Dispatch<SetStateAction<boolean>>;
-    reset: () => void;
-    setPageInfo: Dispatch<SetStateAction<RelayPageInfo | null | undefined>>;
-}
-export interface RelayPaginationSupport {
-    variables: RelayPaginationQueryVariables;
-    table: RelayTableSupport;
-}
-/**
- * Custom hook for handling Relay pagination in tables.
- *
- * @param {RelayPaginationProps} props - The props object containing pagination configuration.
- * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
- */
-export declare const useRelayPagination: (props?: RelayPaginationProps) => RelayPaginationSupport;