@stackframe/stack-ui 2.7.13 → 2.7.16

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @stackframe/stack-ui
 
+## 2.7.16
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackframe/stack-shared@2.7.16
+
+## 2.7.15
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackframe/stack-shared@2.7.15
+
+## 2.7.14
+
+### Patch Changes
+
+- Various changes
+- Updated dependencies
+  - @stackframe/stack-shared@2.7.14
+
 ## 2.7.13
 
 ### Patch Changes

package/dist/components/copy-button.d.ts

@@ -5,8 +5,8 @@ declare const CopyButton: React.FC<{
 } & {
     asChild?: boolean | undefined;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & import("class-variance-authority").VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "plain" | null | undefined;
+    size?: "default" | "plain" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     ref?: React.Ref<HTMLButtonElement> | undefined;
 } & {

package/dist/components/copy-field.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function CopyField(props: {
     value: string;
     label?: React.ReactNode;

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

@@ -6,6 +6,7 @@ export declare function TextCell(props: {
 }): import("react/jsx-runtime").JSX.Element;
 export declare function AvatarCell(props: {
     src?: string;
+    fallback?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function DateCell(props: {
     date: Date;

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

@@ -3,7 +3,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DotsHorizontalIcon } from "@radix-ui/react-icons";
 import React, { useEffect, useRef, useState } from "react";
-import { SimpleTooltip, cn, Avatar, AvatarImage, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../..";
+import { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, SimpleTooltip, cn } from "../..";
 export function TextCell(props) {
     const textRef = useRef(null);
     const [isOverflowing, setIsOverflowing] = useState(false);
@@ -24,7 +24,7 @@ export function TextCell(props) {
     return (_jsx("div", { className: "relative", style: { minWidth: props.size }, children: _jsxs("div", { className: "flex items-center gap-2 absolute inset-0", children: [_jsx("div", { className: overflowStyle, ref: textRef, children: isOverflowing ? (_jsx(SimpleTooltip, { tooltip: props.children, children: _jsx("div", { className: overflowStyle, children: props.children }) })) : props.children }), props.icon && _jsx("div", { children: props.icon })] }) }));
 }
 export function AvatarCell(props) {
-    return (_jsx(Avatar, { className: "h-6 w-6", children: _jsx(AvatarImage, { src: props.src }) }));
+    return (_jsxs(Avatar, { className: "h-6 w-6", children: [_jsx(AvatarImage, { src: props.src }), _jsx(AvatarFallback, { children: props.fallback })] }));
 }
 export function DateCell(props) {
     const ignore = !!props.ignoreAfterYears && new Date(new Date().setFullYear(new Date().getFullYear() + props.ignoreAfterYears)) < props.date;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Column } from "@tanstack/react-table";
 type DataTableColumnHeaderProps<TData, TValue> = {
     column: Column<TData, TValue>;

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

@@ -7,6 +7,7 @@ export declare function TableView<TData, TValue>(props: {
     showDefaultToolbar?: boolean;
     defaultColumnFilters: ColumnFiltersState;
     defaultSorting: SortingState;
+    onRowClick?: (row: TData) => void;
 }): import("react/jsx-runtime").JSX.Element;
 type DataTableProps<TData, TValue> = {
     columns: ColumnDef<TData, TValue>[];
@@ -16,6 +17,7 @@ type DataTableProps<TData, TValue> = {
     defaultColumnFilters: ColumnFiltersState;
     defaultSorting: SortingState;
     showDefaultToolbar?: boolean;
+    onRowClick?: (row: TData) => void;
 };
 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> & {
@@ -29,5 +31,5 @@ type DataTableManualPaginationProps<TData, TValue> = DataTableProps<TData, TValu
         nextCursor: string | null;
     }>;
 };
-export declare function DataTableManualPagination<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onUpdate, showDefaultToolbar, }: DataTableManualPaginationProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableManualPagination<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onRowClick, onUpdate, showDefaultToolbar, }: DataTableManualPaginationProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,7 +10,12 @@ export function TableView(props) {
                                     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 })] }));
+                                }) }, headerGroup.id))) }), _jsx(TableBody, { children: props.table.getRowModel().rows.length ? (props.table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", onClick: (ev) => {
+                                    // only trigger onRowClick if the element is a direct descendant; don't trigger for portals
+                                    if (ev.target instanceof Node && ev.currentTarget.contains(ev.target)) {
+                                        props.onRowClick?.(row.original);
+                                    }
+                                }, 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);
@@ -22,7 +27,7 @@ export function DataTable({ columns, data, toolbarRender, defaultVisibility, def
     const [globalFilter, setGlobalFilter] = React.useState();
     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, }) {
+export function DataTableManualPagination({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onRowClick, 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 +57,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, showDefaultToolbar: showDefaultToolbar });
+    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, onRowClick: onRowClick });
 }
-function DataTableBase({ columns, data, toolbarRender, defaultVisibility, sorting, setSorting, defaultColumnFilters, defaultSorting, 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, onRowClick, }) {
     const [rowSelection, setRowSelection] = React.useState({});
     const [columnVisibility, setColumnVisibility] = React.useState(defaultVisibility || {});
     const table = useReactTable({
@@ -87,5 +92,5 @@ function DataTableBase({ columns, data, toolbarRender, defaultVisibility, sortin
         manualFiltering,
         rowCount,
     });
-    return _jsx(TableView, { table: table, columns: columns, toolbarRender: toolbarRender, showDefaultToolbar: showDefaultToolbar, defaultColumnFilters: defaultColumnFilters, defaultSorting: defaultSorting });
+    return _jsx(TableView, { table: table, columns: columns, toolbarRender: toolbarRender, showDefaultToolbar: showDefaultToolbar, defaultColumnFilters: defaultColumnFilters, defaultSorting: defaultSorting, onRowClick: onRowClick });
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ColumnFiltersState, SortingState, Table } from "@tanstack/react-table";
 type DataTableToolbarProps<TData> = {
     table: Table<TData>;

package/dist/components/simple-tooltip.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
 export declare function SimpleTooltip(props: {
     tooltip: React.ReactNode;
     children?: React.ReactNode;
     type?: 'info' | 'warning';
+    inline?: boolean;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/simple-tooltip.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "..";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleAlert, Info } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn } from "..";
 export function SimpleTooltip(props) {
+    const iconClassName = cn("w-4 h-4 text-zinc-500", props.inline && "inline");
     const icon = props.type === 'warning' ?
-        _jsx(CircleAlert, { className: "w-4 h-4 text-zinc-500" }) :
+        _jsx(CircleAlert, { className: iconClassName }) :
         props.type === 'info' ?
-            _jsx(Info, { className: "w-4 h-4 text-zinc-500" }) :
+            _jsx(Info, { className: iconClassName }) :
             null;
-    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-1", children: [props.children, " ", icon] }) }), _jsx(TooltipContent, { children: _jsx("div", { className: "max-w-60 text-center text-wrap whitespace-pre-wrap", children: props.tooltip }) })] }) }));
+    const trigger = (_jsxs(_Fragment, { children: [icon, props.children] }));
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: props.inline ? (_jsx("span", { className: cn(props.className), children: trigger })) : (_jsx("div", { className: cn("flex items-center gap-1", props.className), children: trigger })) }), _jsx(TooltipContent, { children: _jsx("div", { className: "max-w-60 text-center text-wrap whitespace-pre-wrap", children: props.tooltip }) })] }) }));
 }

package/dist/components/ui/aspect-ratio.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
 export { AspectRatio };

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

@@ -1,8 +1,8 @@
 import { type VariantProps } from "class-variance-authority";
 import React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "plain" | null | undefined;
+    size?: "default" | "plain" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type OriginalButtonProps = {
     asChild?: boolean;
@@ -17,8 +17,8 @@ declare const Button: React.FC<{
 } & {
     asChild?: boolean | undefined;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "plain" | null | undefined;
+    size?: "default" | "plain" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     ref?: React.Ref<HTMLButtonElement> | undefined;
 }>;

package/dist/components/ui/button.js

@@ -15,12 +15,14 @@ const buttonVariants = cva("inline-flex items-center justify-center whitespace-n
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
             link: "text-primary underline-offset-4 hover:underline",
+            plain: "",
         },
         size: {
             default: "h-9 px-4 py-2",
             sm: "h-8 rounded-md px-3 text-xs",
             lg: "h-10 rounded-md px-8",
             icon: "h-9 w-9",
+            plain: "",
         },
     },
     defaultVariants: {
@@ -33,12 +35,12 @@ const OriginalButton = forwardRefIfNeeded(({ className, variant, size, asChild =
     return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
 });
 OriginalButton.displayName = "Button";
-const Button = forwardRefIfNeeded(({ onClick, loading: loadingProp, children, ...props }, ref) => {
+const Button = forwardRefIfNeeded(({ onClick, loading: loadingProp, children, size, ...props }, ref) => {
     const [handleClick, isLoading] = useAsyncCallback(async (e) => {
         await onClick?.(e);
     }, [onClick]);
     const loading = loadingProp || isLoading;
-    return (_jsxs(OriginalButton, { ...props, ref: ref, disabled: props.disabled || loading, onClick: (e) => runAsynchronouslyWithAlert(handleClick(e)), children: [loading && _jsx(Spinner, { className: "mr-2" }), children] }));
+    return (_jsxs(OriginalButton, { ...props, ref: ref, disabled: props.disabled || loading, onClick: (e) => runAsynchronouslyWithAlert(handleClick(e)), size: size, className: cn("relative", loading && "[&>:not(.stack-button-do-not-hide-when-siblings-are)]:invisible", props.className), children: [_jsx(Spinner, { className: cn("absolute inset-0 flex items-center justify-center stack-button-do-not-hide-when-siblings-are", !loading && "invisible") }), typeof children === "string" ? _jsx("span", { children: children }) : children] }));
 });
 Button.displayName = "Button";
 export { Button, buttonVariants };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const Card: import("react").FC<import("react").HTMLAttributes<HTMLDivElement> & {
     ref?: import("react").Ref<HTMLDivElement> | undefined;
 }>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/dropdown-menu.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
-import React from "react";
 import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
+import React from "react";
 import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
@@ -45,6 +45,7 @@ const DropdownMenuItem = forwardRefIfNeeded(({ className, inset, ...props }, ref
     }, [props.onClick]);
     return _jsxs(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props, disabled: isLoading || props.disabled, onClick: props.onClick ? (e) => {
             e.preventDefault();
+            e.stopPropagation();
             runAsynchronouslyWithAlert(handleClick(e));
         } : undefined, children: [_jsx("div", { style: { visibility: isLoading ? "visible" : "hidden", position: "absolute", inset: 0, display: "flex", justifyContent: "center", alignItems: "center" }, children: _jsx(Spinner, {}) }), _jsx("div", { style: { visibility: isLoading ? "hidden" : "visible" }, children: props.children })] });
 });

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type LinkProps = {
     href: string;
     children: React.ReactNode;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const PasswordInput: import("react").FC<{
     prefixItem?: import("react").ReactNode;
 } & import("react").InputHTMLAttributes<HTMLInputElement> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack-ui",
-  "version": "2.7.13",
+  "version": "2.7.16",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": false,
@@ -77,7 +77,7 @@
     "react-hook-form": "^7.53.1",
     "react-resizable-panels": "^2.1.6",
     "tailwind-merge": "^2.5.4",
-    "@stackframe/stack-shared": "2.7.13"
+    "@stackframe/stack-shared": "2.7.16"
   },
   "devDependencies": {
     "@types/react": "^18.2.12",