@stackframe/stack-ui 2.6.23 → 2.6.25

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @stackframe/stack-ui
 
+## 2.6.25
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.25
+
+## 2.6.24
+
+### Patch Changes
+
+- Bugfixes
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.24
+
 ## 2.6.23
 
 ### Patch Changes

package/dist/components/data-table/data-table.d.ts

@@ -5,14 +5,16 @@ export declare function TableView<TData, TValue>(props: {
     columns: ColumnDef<TData, TValue>[];
     toolbarRender?: (table: TableType<TData>) => React.ReactNode;
     showDefaultToolbar?: boolean;
+    defaultColumnFilters: ColumnFiltersState;
+    defaultSorting: SortingState;
 }): import("react/jsx-runtime").JSX.Element;
 type DataTableProps<TData, TValue> = {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
     toolbarRender?: (table: TableType<TData>) => React.ReactNode;
     defaultVisibility?: VisibilityState;
-    defaultColumnFilters?: ColumnFiltersState;
-    defaultSorting?: SortingState;
+    defaultColumnFilters: ColumnFiltersState;
+    defaultSorting: SortingState;
     showDefaultToolbar?: boolean;
 };
 export declare function DataTable<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, showDefaultToolbar, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/data-table.js

@@ -6,27 +6,27 @@ import React from "react";
 import { DataTablePagination } from "./pagination";
 import { DataTableToolbar } from "./toolbar";
 export function TableView(props) {
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(DataTableToolbar, { table: props.table, toolbarRender: props.toolbarRender, showDefaultToolbar: props.showDefaultToolbar }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: props.table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(DataTableToolbar, { table: props.table, toolbarRender: props.toolbarRender, showDefaultToolbar: props.showDefaultToolbar, defaultColumnFilters: props.defaultColumnFilters, defaultSorting: props.defaultSorting }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: props.table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
                                     return (_jsx(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder
                                             ? null
                                             : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
                                 }) }, headerGroup.id))) }), _jsx(TableBody, { children: props.table.getRowModel().rows.length ? (props.table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: props.columns.length, className: "h-24 text-center", children: "No results." }) })) })] }) }), _jsx(DataTablePagination, { table: props.table })] }));
 }
 export function DataTable({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, showDefaultToolbar = true, }) {
-    const [sorting, setSorting] = React.useState(defaultSorting || []);
-    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters || []);
+    const [sorting, setSorting] = React.useState(defaultSorting);
+    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters);
     const [pagination, setPagination] = React.useState({
         pageIndex: 0,
         pageSize: 10,
     });
     const [globalFilter, setGlobalFilter] = React.useState();
-    return _jsx(DataTableBase, { columns: columns, data: data, toolbarRender: toolbarRender, defaultVisibility: defaultVisibility, sorting: sorting, setSorting: setSorting, columnFilters: columnFilters, setColumnFilters: setColumnFilters, manualPagination: false, manualFiltering: false, pagination: pagination, setPagination: setPagination, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, showDefaultToolbar: showDefaultToolbar });
+    return _jsx(DataTableBase, { columns: columns, data: data, toolbarRender: toolbarRender, defaultVisibility: defaultVisibility, sorting: sorting, setSorting: setSorting, defaultSorting: defaultSorting, columnFilters: columnFilters, setColumnFilters: setColumnFilters, defaultColumnFilters: defaultColumnFilters, manualPagination: false, manualFiltering: false, pagination: pagination, setPagination: setPagination, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, showDefaultToolbar: showDefaultToolbar });
 }
 export function DataTableManualPagination({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onUpdate, showDefaultToolbar = true, }) {
-    const [sorting, setSorting] = React.useState(defaultSorting || []);
+    const [sorting, setSorting] = React.useState(defaultSorting);
     const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 });
     const [cursors, setCursors] = React.useState({});
-    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters || []);
+    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters);
     const [globalFilter, setGlobalFilter] = React.useState();
     const [refreshCounter, setRefreshCounter] = React.useState(0);
     React.useEffect(() => {
@@ -54,7 +54,7 @@ export function DataTableManualPagination({ columns, data, toolbarRender, defaul
     }, [globalFilter]);
     return _jsx(DataTableBase, { columns: columns, data: data, toolbarRender: toolbarRender, sorting: sorting, setSorting: setSorting, pagination: pagination, setPagination: setPagination, columnFilters: columnFilters, setColumnFilters: setColumnFilters, rowCount: pagination.pageSize * Object.keys(cursors).length + (cursors[pagination.pageIndex + 1] ? 1 : 0), globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, defaultColumnFilters: defaultColumnFilters, defaultSorting: defaultSorting, defaultVisibility: defaultVisibility, showDefaultToolbar: showDefaultToolbar });
 }
-function DataTableBase({ columns, data, toolbarRender, defaultVisibility, sorting, setSorting, pagination, setPagination, rowCount, columnFilters, setColumnFilters, globalFilter, setGlobalFilter, manualPagination = true, manualFiltering = true, showDefaultToolbar = true, }) {
+function DataTableBase({ columns, data, toolbarRender, defaultVisibility, sorting, setSorting, defaultColumnFilters, defaultSorting, pagination, setPagination, rowCount, columnFilters, setColumnFilters, globalFilter, setGlobalFilter, manualPagination = true, manualFiltering = true, showDefaultToolbar = true, }) {
     const [rowSelection, setRowSelection] = React.useState({});
     const [columnVisibility, setColumnVisibility] = React.useState(defaultVisibility || {});
     const table = useReactTable({
@@ -87,5 +87,5 @@ function DataTableBase({ columns, data, toolbarRender, defaultVisibility, sortin
         manualFiltering,
         rowCount,
     });
-    return _jsx(TableView, { table: table, columns: columns, toolbarRender: toolbarRender, showDefaultToolbar: showDefaultToolbar });
+    return _jsx(TableView, { table: table, columns: columns, toolbarRender: toolbarRender, showDefaultToolbar: showDefaultToolbar, defaultColumnFilters: defaultColumnFilters, defaultSorting: defaultSorting });
 }

package/dist/components/data-table/toolbar.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
+import { ColumnFiltersState, SortingState, Table } from "@tanstack/react-table";
 interface DataTableToolbarProps<TData> {
     table: Table<TData>;
     toolbarRender?: (table: Table<TData>) => React.ReactNode;
     showDefaultToolbar?: boolean;
+    defaultColumnFilters: ColumnFiltersState;
+    defaultSorting: SortingState;
 }
-export declare function DataTableToolbar<TData>({ table, toolbarRender, showDefaultToolbar }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableToolbar<TData>({ table, toolbarRender, showDefaultToolbar, defaultColumnFilters, defaultSorting, }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-table/toolbar.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Cross2Icon } from "@radix-ui/react-icons";
+import { deepPlainEquals } from "@stackframe/stack-shared/dist/utils/objects";
 import { Button } from "@stackframe/stack-ui";
-import { DataTableViewOptions } from "./view-options";
+import { download, generateCsv, mkConfig } from 'export-to-csv';
 import { DownloadIcon } from "lucide-react";
-import { mkConfig, generateCsv, download } from 'export-to-csv';
-export function DataTableToolbar({ table, toolbarRender, showDefaultToolbar }) {
-    const isFiltered = table.getState().columnFilters.length > 0;
-    const isSorted = table.getState().sorting.length > 0;
+import { DataTableViewOptions } from "./view-options";
+export function DataTableToolbar({ table, toolbarRender, showDefaultToolbar, defaultColumnFilters, defaultSorting, }) {
+    const isFiltered = !deepPlainEquals(table.getState().columnFilters, defaultColumnFilters);
+    const isSorted = !deepPlainEquals(table.getState().sorting, defaultSorting);
     return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap flex-1", children: [toolbarRender?.(table), (isFiltered || isSorted) && (_jsxs(Button, { variant: "ghost", onClick: () => {
-                            table.resetColumnFilters();
-                            table.resetSorting();
-                        }, className: "h-8 px-2 lg:px-3", children: ["Reset", _jsx(Cross2Icon, { className: "ml-2 h-4 w-4" })] }))] }), showDefaultToolbar && (_jsx(_Fragment, { children: _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx(DataTableViewOptions, { table: table }), _jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto hidden h-8 lg:flex", onClick: () => {
+                            table.setColumnFilters(defaultColumnFilters);
+                            table.setSorting(defaultSorting);
+                        }, className: "h-8 px-2 lg:px-3", children: ["Reset filters", _jsx(Cross2Icon, { className: "ml-2 h-4 w-4" })] }))] }), showDefaultToolbar && (_jsx(_Fragment, { children: _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx(DataTableViewOptions, { table: table }), _jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto hidden h-8 lg:flex", onClick: () => {
                                 const csvConfig = mkConfig({
                                     fieldSeparator: ',',
                                     filename: 'data',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack-ui",
-  "version": "2.6.23",
+  "version": "2.6.25",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -76,7 +76,7 @@
     "react-hook-form": "^7.53.1",
     "react-resizable-panels": "^2.1.6",
     "tailwind-merge": "^2.5.4",
-    "@stackframe/stack-shared": "2.6.23"
+    "@stackframe/stack-shared": "2.6.25"
   },
   "devDependencies": {
     "rimraf": "^5.0.10",