@stackframe/stack-ui 2.6.16 → 2.6.19

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @stackframe/stack-ui
 
+## 2.6.19
+
+### Patch Changes
+
+- Bugfixes
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.19
+
+## 2.6.18
+
+### Patch Changes
+
+- fixed user update bug
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.18
+
+## 2.6.17
+
+### Patch Changes
+
+- Loading skeletons
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.17
+
 ## 2.6.16
 
 ### Patch Changes

package/dist/components/action-dialog.d.ts

@@ -22,5 +22,6 @@ export type ActionDialogProps = {
     }>;
     confirmText?: string;
     children?: React.ReactNode;
+    preventClose?: boolean;
 };
 export declare function ActionDialog(props: ActionDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/action-dialog.js

@@ -25,7 +25,7 @@ export function ActionDialog(props) {
         setOpenState(open);
         props.onOpenChange?.(open);
     };
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [props.trigger && _jsx(DialogTrigger, { asChild: true, children: props.trigger }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center", children: [_jsx(TitleIcon, { className: "h-4 w-4 mr-2" }), title] }), _jsx(DialogDescription, { children: props.description })] }), _jsxs(DialogBody, { className: "pb-2", children: [_jsx("div", { children: props.children }), props.confirmText && _jsx(Alert, { children: _jsxs(Label, { className: "flex gap-4 items-center", children: [_jsx(Checkbox, { id: confirmId, checked: confirmed, onCheckedChange: (v) => setConfirmed(!!v) }), props.confirmText] }) })] }), anyButton && _jsxs(DialogFooter, { className: "gap-2", children: [cancelButton && (_jsx(Button, { variant: "secondary", color: "neutral", onClick: async () => {
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [props.trigger && _jsx(DialogTrigger, { asChild: true, children: props.trigger }), _jsxs(DialogContent, { onInteractOutside: props.preventClose ? (e) => e.preventDefault() : undefined, className: props.preventClose ? "[&>button]:hidden" : "", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center", children: [_jsx(TitleIcon, { className: "h-4 w-4 mr-2" }), title] }), _jsx(DialogDescription, { children: props.description })] }), _jsxs(DialogBody, { className: "pb-2", children: [_jsx("div", { children: props.children }), props.confirmText && _jsx(Alert, { children: _jsxs(Label, { className: "flex gap-4 items-center", children: [_jsx(Checkbox, { id: confirmId, checked: confirmed, onCheckedChange: (v) => setConfirmed(!!v) }), props.confirmText] }) })] }), anyButton && _jsxs(DialogFooter, { className: "gap-2", children: [cancelButton && (_jsx(Button, { variant: "secondary", color: "neutral", onClick: async () => {
                                     if (await cancelButton.onClick?.() !== "prevent-close") {
                                         onOpenChange(false);
                                     }

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

@@ -10,8 +10,10 @@ type DataTableProps<TData, TValue> = {
     data: TData[];
     toolbarRender?: (table: TableType<TData>) => React.ReactNode;
     defaultVisibility?: VisibilityState;
+    defaultFilters?: ColumnFiltersState;
+    defaultSorting?: SortingState;
 };
-export declare function DataTable<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultFilters, defaultSorting, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 type DataTableServerProps<TData, TValue> = DataTableProps<TData, TValue> & {
     sorting?: SortingState;
     setSorting?: OnChangeFn<SortingState>;

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

@@ -12,9 +12,9 @@ export function TableView(props) {
                                             : 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, }) {
-    const [sorting, setSorting] = React.useState([]);
-    const [columnFilters, setColumnFilters] = React.useState([]);
+export function DataTable({ columns, data, toolbarRender, defaultVisibility, defaultFilters, defaultSorting, }) {
+    const [sorting, setSorting] = React.useState(defaultSorting || []);
+    const [columnFilters, setColumnFilters] = React.useState(defaultFilters || []);
     const [pagination, setPagination] = React.useState({
         pageIndex: 0,
         pageSize: 10,

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

@@ -1,5 +1,3 @@
 import React from "react";
-declare const Skeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    deactivated?: boolean | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export { Skeleton };

package/dist/components/ui/skeleton.js

@@ -1,48 +1,7 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../..";
-// TODO: add this to the generated global CSS
-const styleSheet = `
-@keyframes animation-light {
-0% {
-  filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.8);
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { className: cn("animate-pulse rounded-md bg-primary/10", className), ...props }));
 }
-100% {
-  filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.9);
-}
-
-@keyframes animation-dark {
-0% {
-  filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.2);
-}
-100% {
-  filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.1);
-}
-
-.stack-skeleton[data-stack-state="activated"],
-.stack-skeleton[data-stack-state="activated"] * {
-  pointer-events: none !important;
-  -webkit-user-select: none !important;
-  -moz-user-select: none !important;
-  user-select: none !important;
-  cursor: default !important;
-}
-
-.stack-skeleton[data-stack-state="activated"] {
-  animation: animation-light 1s infinite alternate-reverse !important;
-}
-
-html[data-stack-theme='dark'] .stack-skeleton[data-stack-state="activated"] {
-  animation: animation-dark 1s infinite alternate-reverse !important;
-}
-
-html[data-stack-theme='dark'] .stack-skeleton[data-stack-state="activated"] {
-  animation: animation-dark 1s infinite alternate-reverse !important;
-}
-`;
-const Skeleton = React.forwardRef((props, ref) => {
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: styleSheet }), _jsx("span", { ...props, ref: ref, "data-stack-state": props.deactivated ? "deactivated" : "activated", className: cn(props.className, "stack-skeleton") })] }));
-});
-Skeleton.displayName = "Skeleton";
 export { Skeleton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack-ui",
-  "version": "2.6.16",
+  "version": "2.6.19",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -68,7 +68,7 @@
     "react-hook-form": "^7.51.4",
     "react-resizable-panels": "^2.0.19",
     "tailwind-merge": "^2.3.0",
-    "@stackframe/stack-shared": "2.6.16"
+    "@stackframe/stack-shared": "2.6.19"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",