@stackframe/stack-ui 2.6.20 → 2.6.23

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @stackframe/stack-ui
 
+## 2.6.23
+
+### Patch Changes
+
+- Bugfixes
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.23
+
+## 2.6.22
+
+### Patch Changes
+
+- Bugfixes
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.22
+
+## 2.6.21
+
+### Patch Changes
+
+- Fixed inviteUser
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.21
+
 ## 2.6.20
 
 ### Patch Changes

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

@@ -4,6 +4,7 @@ export declare function TableView<TData, TValue>(props: {
     table: TableType<TData>;
     columns: ColumnDef<TData, TValue>[];
     toolbarRender?: (table: TableType<TData>) => React.ReactNode;
+    showDefaultToolbar?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 type DataTableProps<TData, TValue> = {
     columns: ColumnDef<TData, TValue>[];
@@ -12,8 +13,9 @@ type DataTableProps<TData, TValue> = {
     defaultVisibility?: VisibilityState;
     defaultColumnFilters?: ColumnFiltersState;
     defaultSorting?: SortingState;
+    showDefaultToolbar?: boolean;
 };
-export declare function DataTable<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, showDefaultToolbar, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 type DataTableManualPaginationProps<TData, TValue> = DataTableProps<TData, TValue> & {
     onUpdate: (options: {
         cursor: string;
@@ -25,5 +27,5 @@ type DataTableManualPaginationProps<TData, TValue> = DataTableProps<TData, TValu
         nextCursor: string | null;
     }>;
 };
-export declare function DataTableManualPagination<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onUpdate, }: DataTableManualPaginationProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableManualPagination<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onUpdate, showDefaultToolbar, }: DataTableManualPaginationProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,13 +6,13 @@ 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 }), _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 }), _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, }) {
+export function DataTable({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, showDefaultToolbar = true, }) {
     const [sorting, setSorting] = React.useState(defaultSorting || []);
     const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters || []);
     const [pagination, setPagination] = React.useState({
@@ -20,9 +20,9 @@ export function DataTable({ columns, data, toolbarRender, defaultVisibility, def
         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 });
+    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 });
 }
-export function DataTableManualPagination({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onUpdate, }) {
+export function DataTableManualPagination({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onUpdate, showDefaultToolbar = true, }) {
     const [sorting, setSorting] = React.useState(defaultSorting || []);
     const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 });
     const [cursors, setCursors] = React.useState({});
@@ -52,9 +52,9 @@ export function DataTableManualPagination({ columns, data, toolbarRender, defaul
         }, 500);
         return () => clearTimeout(timer);
     }, [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 });
+    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, }) {
+function DataTableBase({ columns, data, toolbarRender, defaultVisibility, sorting, setSorting, 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 });
+    return _jsx(TableView, { table: table, columns: columns, toolbarRender: toolbarRender, showDefaultToolbar: showDefaultToolbar });
 }

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

@@ -3,4 +3,5 @@ export declare function SearchToolbarItem<TData>(props: {
     table: Table<TData>;
     keyName?: string | null;
     placeholder: string;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Input } from "../..";
+import { Input, cn } from "../..";
 export function SearchToolbarItem(props) {
-    return (_jsx(Input, { placeholder: props.placeholder, value: props.keyName ? `${props.table.getColumn(props.keyName)?.getFilterValue() ?? ""}` : props.table.getState().globalFilter ?? "", onChange: (event) => props.keyName ? props.table.getColumn(props.keyName)?.setFilterValue(event.target.value) : props.table.setGlobalFilter(event.target.value), className: "h-8 w-[150px] lg:w-[250px]" }));
+    return (_jsx(Input, { placeholder: props.placeholder, value: props.keyName ? `${props.table.getColumn(props.keyName)?.getFilterValue() ?? ""}` : props.table.getState().globalFilter ?? "", onChange: (event) => props.keyName ? props.table.getColumn(props.keyName)?.setFilterValue(event.target.value) : props.table.setGlobalFilter(event.target.value), className: cn("h-8 w-[250px]", props.className) }));
 }

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

@@ -3,6 +3,7 @@ import { Table } from "@tanstack/react-table";
 interface DataTableToolbarProps<TData> {
     table: Table<TData>;
     toolbarRender?: (table: Table<TData>) => React.ReactNode;
+    showDefaultToolbar?: boolean;
 }
-export declare function DataTableToolbar<TData>({ table, toolbarRender }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableToolbar<TData>({ table, toolbarRender, showDefaultToolbar }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,45 +1,45 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { Button } from "@stackframe/stack-ui";
 import { DataTableViewOptions } from "./view-options";
 import { DownloadIcon } from "lucide-react";
 import { mkConfig, generateCsv, download } from 'export-to-csv';
-export function DataTableToolbar({ table, toolbarRender }) {
+export function DataTableToolbar({ table, toolbarRender, showDefaultToolbar }) {
     const isFiltered = table.getState().columnFilters.length > 0;
     const isSorted = table.getState().sorting.length > 0;
-    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [toolbarRender?.(table), (isFiltered || isSorted) && (_jsxs(Button, { variant: "ghost", onClick: () => {
+    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" })] }))] }), _jsx("div", { className: "flex-1" }), _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',
-                                decimalSeparator: '.',
-                                useKeysAsHeaders: true,
-                            });
-                            const renderCellValue = (cell) => {
-                                const rendered = cell.renderValue();
-                                if (rendered === null) {
-                                    return undefined;
+                        }, 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: () => {
+                                const csvConfig = mkConfig({
+                                    fieldSeparator: ',',
+                                    filename: 'data',
+                                    decimalSeparator: '.',
+                                    useKeysAsHeaders: true,
+                                });
+                                const renderCellValue = (cell) => {
+                                    const rendered = cell.renderValue();
+                                    if (rendered === null) {
+                                        return undefined;
+                                    }
+                                    if (['string', 'number', 'boolean', 'undefined'].includes(typeof rendered)) {
+                                        return rendered;
+                                    }
+                                    if (rendered instanceof Date) {
+                                        return rendered.toISOString();
+                                    }
+                                    if (typeof rendered === 'object') {
+                                        return JSON.stringify(rendered);
+                                    }
+                                };
+                                const rowModel = table.getCoreRowModel();
+                                const rows = rowModel.rows.map(row => Object.fromEntries(row.getAllCells().map(c => [c.column.id, renderCellValue(c)]).filter(([_, v]) => v !== undefined)));
+                                if (rows.length === 0) {
+                                    alert("No data to export");
+                                    return;
                                 }
-                                if (['string', 'number', 'boolean', 'undefined'].includes(typeof rendered)) {
-                                    return rendered;
-                                }
-                                if (rendered instanceof Date) {
-                                    return rendered.toISOString();
-                                }
-                                if (typeof rendered === 'object') {
-                                    return JSON.stringify(rendered);
-                                }
-                            };
-                            const rowModel = table.getCoreRowModel();
-                            const rows = rowModel.rows.map(row => Object.fromEntries(row.getAllCells().map(c => [c.column.id, renderCellValue(c)]).filter(([_, v]) => v !== undefined)));
-                            if (rows.length === 0) {
-                                alert("No data to export");
-                                return;
-                            }
-                            const csv = generateCsv(csvConfig)(rows);
-                            download(csvConfig)(csv);
-                        }, children: [_jsx(DownloadIcon, { className: "mr-2 h-4 w-4" }), "Export CSV"] })] })] }));
+                                const csv = generateCsv(csvConfig)(rows);
+                                download(csvConfig)(csv);
+                            }, children: [_jsx(DownloadIcon, { className: "mr-2 h-4 w-4" }), "Export CSV"] })] }) }))] }));
 }

package/dist/components/ui/accordion.js

@@ -9,6 +9,6 @@ const AccordionItem = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx
 AccordionItem.displayName = "AccordionItem";
 const AccordionTrigger = forwardRefIfNeeded(({ className, children, disabled, ...props }, ref) => (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, !disabled && _jsx(ChevronDownIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })] }) })));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = forwardRefIfNeeded(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn("pb-4 pt-0", className), children: children }) })));
+const AccordionContent = forwardRefIfNeeded(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn("pb-4 pt-0", className), children: children }) })));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/ui/input.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    prefixItem?: React.ReactNode;
 }
-declare const Input: React.FC<InputProps & {
+export declare const Input: React.FC<InputProps & {
     ref?: React.Ref<HTMLInputElement> | undefined;
 }>;
-export { Input };
 export interface DelayedInputProps extends InputProps {
     delay?: number;
 }

package/dist/components/ui/input.js

@@ -1,12 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { cn } from "../../lib/utils";
-const Input = forwardRefIfNeeded(({ className, type, ...props }, ref) => {
-    return (_jsx("input", { type: type, className: cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));
+export const Input = forwardRefIfNeeded(({ className, type, prefixItem, ...props }, ref) => {
+    const baseClasses = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+    if (prefixItem) {
+        return (_jsxs("div", { className: "flex flex-row items-center", children: [_jsx("div", { className: 'flex self-stretch justify-center items-center text-muted-foreground pl-3 select-none bg-muted/70 pr-3 border-r border-input rounded-l-md', children: prefixItem }), _jsx("input", { type: type, className: cn(baseClasses, 'rounded-l-none', className), ref: ref, ...props })] }));
+    }
+    else {
+        return (_jsx("input", { type: type, className: cn(baseClasses, className), ref: ref, ...props }));
+    }
 });
 Input.displayName = "Input";
-export { Input };
 export const DelayedInput = forwardRefIfNeeded(({ delay = 500, defaultValue, ...props }, ref) => {
     const [value, setValue] = React.useState(defaultValue ?? "");
     const timeout = React.useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack-ui",
-  "version": "2.6.20",
+  "version": "2.6.23",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -16,11 +16,11 @@
     }
   },
   "peerDependencies": {
-    "react": ">=18.2",
-    "react-dom": ">=18.2",
-    "@types/react": ">=18.2.12",
-    "@types/react-dom": ">=18.2.12",
-    "next": ">=14.1.0",
+    "react": ">=18.2 || >=19.0.0-rc.0",
+    "react-dom": ">=18.2 || >=19.0.0-rc.0",
+    "@types/react": ">=18.2.12 || >=19.0.0-rc.0",
+    "@types/react-dom": ">=18.2.12 || >=19.0.0-rc.0",
+    "next": ">=14.1.0 || >=15.0.0-rc.0",
     "yup": "^1.4.0"
   },
   "peerDependenciesMeta": {
@@ -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.20"
+    "@stackframe/stack-shared": "2.6.23"
   },
   "devDependencies": {
     "rimraf": "^5.0.10",