@prt-ts/fluent-react-table-v2 9.36.0-build.3.0 → 9.40.0-build.10.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.36.0-build.3.0",
+  "version": "9.40.0-build.10.0",
   "main": "./index.js",
   "types": "./src\\index.d.ts",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@fluentui/react-components": ">=9.36.0",
+    "@fluentui/react-components": ">=9.40.0",
+    "@fluentui/react-datepicker-compat": ">=0.4.5",
     "@fluentui/react-icons": ">=2.0.221"
   },
   "dependencies": {

package/src/lib/components/filters/Filter.d.ts

@@ -1,5 +1,5 @@
-import { Column, Table } from "@tanstack/react-table";
-export declare const Filter: <TItem extends object>({ column, table }: {
+import { Column, Table } from '@tanstack/react-table';
+export declare const Filter: <TItem extends object>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filters/FilterDate.d.ts

@@ -0,0 +1,7 @@
+import { Column, Table } from '@tanstack/react-table';
+type FilterNumberRangeProps<TItem extends object> = {
+    column: Column<TItem, unknown>;
+    table: Table<TItem>;
+};
+export declare const FilterDate: <TItem extends object>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/filters/FilterDateRange.d.ts

@@ -0,0 +1,7 @@
+import { Column, Table } from '@tanstack/react-table';
+type FilterNumberRangeProps<TItem extends object> = {
+    column: Column<TItem, unknown>;
+    table: Table<TItem>;
+};
+export declare const FilterDateRange: <TItem extends object>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/filters/FilterDrawer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Table } from '@tanstack/react-table';
+type FilterDrawerProps<TItem extends object> = {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    table: Table<TItem>;
+};
+export declare const FilterDrawer: <TItem extends object>({ open, setOpen, table }: FilterDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/filters/FilterMultiSelectCheckbox.d.ts

@@ -1,5 +1,5 @@
-import { Column, Table } from "@tanstack/react-table";
-export declare const FilterMultiSelectCheckbox: <TItem extends object>({ column, table }: {
+import { Column, Table } from '@tanstack/react-table';
+export declare const FilterMultiSelectCheckbox: <TItem extends object>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filters/FilterNumberRange.d.ts

@@ -0,0 +1,7 @@
+import { Column, Table } from '@tanstack/react-table';
+type FilterNumberRangeProps<TItem extends object> = {
+    column: Column<TItem, unknown>;
+    table: Table<TItem>;
+};
+export declare const FilterNumberRange: <TItem extends object>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/filters/{FilterMultiSelectRadio.d.ts → FilterSelectRadio.d.ts}

@@ -1,5 +1,5 @@
 import { Column, Table } from "@tanstack/react-table";
-export declare const FilterMultiSelectRadio: <TItem extends object>({ column, table }: {
+export declare const FilterSelectRadio: <TItem extends object>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filters/index.d.ts

@@ -1 +1,2 @@
 export { Filter } from "./Filter";
+export { FilterDrawer } from "./FilterDrawer";

package/src/lib/components/grid-header/GridHeader.d.ts

@@ -1,10 +1,16 @@
 import * as React from 'react';
-import { Table } from '@tanstack/react-table';
+import { Table, TableState } from '@tanstack/react-table';
 type GridHeaderProps<TItem extends object> = {
     table: Table<TItem>;
     gridTitle: JSX.Element | React.ReactNode;
+    headerMenu?: JSX.Element | React.ReactNode;
     globalFilter: string;
     setGlobalFilter: (value: string) => void;
+    applyTableState: (tableState: Partial<TableState>) => boolean;
+    openFilterDrawer: boolean;
+    setFilterDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    openViewsDrawer: boolean;
+    setViewsDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export declare const GridHeader: <TItem extends object>(props: GridHeaderProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/table/Table.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { Table } from "@tanstack/react-table";
+import * as React from 'react';
+import { Table } from '@tanstack/react-table';
 type TableContainerProps<TItem extends object> = {
-    rowSelectionMode?: "single" | "multiple";
+    rowSelectionMode?: 'single' | 'multiple';
     table: Table<TItem>;
     noItemPage?: React.ReactNode;
     noFilterMatchPage?: React.ReactNode;

package/src/lib/components/useGridContainer.d.ts

@@ -0,0 +1,14 @@
+import { TableState } from '@tanstack/react-table';
+import { TableProps } from '..';
+import { TableRef, TableView } from '../types';
+import * as React from 'react';
+export declare const useGridContainer: <TItem extends object>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>) => {
+    table: import("@tanstack/react-table").Table<TItem>;
+    globalFilter: string;
+    tableViews: TableView[];
+    headerMenu: JSX.Element | React.ReactNode;
+    setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
+    resetToDefaultView: () => boolean;
+    applyTableState: (tableState: Partial<TableState>) => boolean;
+    getTableState: () => Partial<TableState>;
+};

package/src/lib/components/views/ViewSaveForm.d.ts

@@ -0,0 +1,9 @@
+import { TableProps } from "../../types";
+import { TableState } from '@tanstack/react-table';
+type ViewSaveFormProps<TItem extends object> = {
+    mode: 'create' | 'edit';
+    onSave: TableProps<TItem>['onTableViewSave'];
+    getTableState: () => Partial<TableState>;
+};
+export declare const ViewSaveForm: <TItem extends object>(props: ViewSaveFormProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/components/views/ViewsDrawer.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { TableProps, TableView } from '../../types';
+import { Table, TableState } from '@tanstack/react-table';
+type ViewsDrawerProps<TItem extends object> = {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    table: Table<TItem>;
+    tableViews: TableView[];
+    applyTableState: (tableView: Partial<TableState>) => void;
+    resetToGridDefaultView: () => boolean;
+    getTableState: () => Partial<TableState>;
+    onTableViewSave?: TableProps<TItem>['onTableViewSave'];
+    onTableViewDelete?: TableProps<TItem>['onTableViewDelete'];
+};
+export declare const ViewsDrawer: <TItem extends object>(props: ViewsDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/helpers/FilterHelpers.d.ts

@@ -0,0 +1,4 @@
+import { FilterFn } from "@tanstack/react-table";
+export declare const arrIncludesSome: FilterFn<unknown>;
+export declare const dateRange: FilterFn<unknown>;
+export declare const date: FilterFn<unknown>;

package/src/lib/helpers/Helpers.d.ts

@@ -0,0 +1,2 @@
+import { Column } from "@tanstack/react-table";
+export declare const getLeafColumns: <TItem extends object>(columns: Column<TItem, unknown>[]) => Column<TItem, unknown>[];

package/src/lib/index.d.ts

@@ -1,4 +1,12 @@
+import { FilterFn } from "@tanstack/react-table";
+declare module '@tanstack/table-core' {
+    interface FilterFns {
+        arrIncludesSome: FilterFn<unknown>;
+        matchDate: FilterFn<unknown>;
+        inDateRange: FilterFn<unknown>;
+    }
+}
 export { Table } from "./components";
-export type { TableProps, TableRef } from "./types";
-export type { ColumnDef } from "@tanstack/react-table";
+export type { TableProps, TableRef, TableView } from "./types";
+export type { ColumnDef, TableState } from "@tanstack/react-table";
 export { createColumnHelper } from "@tanstack/react-table";

package/src/lib/types/TableProps.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ExpandedState, GroupingState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
+import { TableView } from "./TableView";
 export type TableProps<TItem extends object> = {
     /**
      * Table Columns definitions.
@@ -17,6 +18,10 @@ export type TableProps<TItem extends object> = {
      * Grid title
      */
     gridTitle?: JSX.Element | React.ReactNode;
+    /**
+     * Table header menu
+     */
+    headerMenu?: (selectedItems: TItem[]) => JSX.Element | React.ReactNode;
     /**
      * Table default page size.
      */
@@ -75,4 +80,16 @@ export type TableProps<TItem extends object> = {
      * @default defaultNoItemComponent
      */
     noItemPage?: React.ReactNode;
+    /**
+     * Table Views
+     */
+    views?: TableView[];
+    /**
+     * Callback when a table view is saved
+     */
+    onTableViewSave?: (tableView: TableView) => void;
+    /**
+     * Callback when a table view is deleted
+     */
+    onTableViewDelete?: (tableView: TableView) => void;
 };

package/src/lib/types/TableRef.d.ts

@@ -1,7 +1,7 @@
-import { Table } from "@tanstack/react-table";
+import { Table, TableState } from "@tanstack/react-table";
 export type TableRef<TItem extends object> = {
     table: Table<TItem>;
-    getTableState: () => Record<string, unknown>;
-    saveCurrentTableState: (viewName: string) => boolean;
-    applySavedView: (viewName: string) => boolean;
+    getTableState: () => Partial<TableState>;
+    applyTableState: (tableState: Partial<TableState>) => boolean;
+    resetToDefaultView: () => boolean;
 };

package/src/lib/types/TableView.d.ts

@@ -0,0 +1,8 @@
+import { TableState } from "@tanstack/react-table";
+export type TableView = {
+    id: number;
+    viewName: string;
+    tableState: Partial<TableState>;
+    isGlobal?: boolean;
+    isViewOwner?: boolean;
+};

package/src/lib/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./TableProps";
 export * from "./TableRef";
+export * from "./TableView";

package/src/lib/components/thead/useGridContainer.d.ts

@@ -1,8 +0,0 @@
-import { TableProps } from "../..";
-import { TableRef } from "../../types";
-import * as React from "react";
-export declare const useGridContainer: <TItem extends object>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>) => {
-    table: import("@tanstack/react-table").Table<TItem>;
-    globalFilter: string;
-    setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
-};