@webiny/admin-ui 6.4.11 → 6.6.0-alpha.1

package/Tree/components/ItemIcon.d.ts

@@ -4,21 +4,22 @@ interface ItemIconProps extends Omit<IconProps, "icon"> {
     element?: React.ReactNode;
     active?: boolean;
 }
-declare const ItemIcon: (({ element, active, ...props }: ItemIconProps) => React.JSX.Element) & {
-    original: ({ element, active, ...props }: ItemIconProps) => React.JSX.Element;
+declare const BaseItemIcon: ({ element, active, ...props }: ItemIconProps) => React.JSX.Element;
+declare const ItemIcon: typeof BaseItemIcon & {
+    original: typeof BaseItemIcon;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ element, active, ...props }: ItemIconProps) => React.JSX.Element) & {
-        original: ({ element, active, ...props }: ItemIconProps) => React.JSX.Element;
+    original: typeof BaseItemIcon & {
+        original: typeof BaseItemIcon;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ element, active, ...props }: ItemIconProps) => React.JSX.Element) & {
-        original: ({ element, active, ...props }: ItemIconProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseItemIcon & {
+        original: typeof BaseItemIcon;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tree/components/ItemPlaceholder.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 interface ItemPlaceholderProps {
     depth: number;
 }
-declare const ItemPlaceholder: (({ depth }: ItemPlaceholderProps) => React.JSX.Element) & {
-    original: ({ depth }: ItemPlaceholderProps) => React.JSX.Element;
+declare const BaseItemPlaceholder: ({ depth }: ItemPlaceholderProps) => React.JSX.Element;
+declare const ItemPlaceholder: typeof BaseItemPlaceholder & {
+    original: typeof BaseItemPlaceholder;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ depth }: ItemPlaceholderProps) => React.JSX.Element) & {
-        original: ({ depth }: ItemPlaceholderProps) => React.JSX.Element;
+    original: typeof BaseItemPlaceholder & {
+        original: typeof BaseItemPlaceholder;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ depth }: ItemPlaceholderProps) => React.JSX.Element) & {
-        original: ({ depth }: ItemPlaceholderProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseItemPlaceholder & {
+        original: typeof BaseItemPlaceholder;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tree/components/ItemSubIndentation.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 interface ItemSubIndentationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     level: number;
 }
-declare const ItemSubIndentation: (({ level }: ItemSubIndentationProps) => React.JSX.Element) & {
-    original: ({ level }: ItemSubIndentationProps) => React.JSX.Element;
+declare const BaseItemSubIndentation: ({ level }: ItemSubIndentationProps) => React.JSX.Element;
+declare const ItemSubIndentation: typeof BaseItemSubIndentation & {
+    original: typeof BaseItemSubIndentation;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ level }: ItemSubIndentationProps) => React.JSX.Element) & {
-        original: ({ level }: ItemSubIndentationProps) => React.JSX.Element;
+    original: typeof BaseItemSubIndentation & {
+        original: typeof BaseItemSubIndentation;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ level }: ItemSubIndentationProps) => React.JSX.Element) & {
-        original: ({ level }: ItemSubIndentationProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseItemSubIndentation & {
+        original: typeof BaseItemSubIndentation;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tree/useTree.js

@@ -41,6 +41,7 @@ const useTree = (props)=>{
                 droppable: node.droppable,
                 data: node.data
             }));
+        await presenter.handleDrop(newNodeTree);
         if (props.onDrop) {
             const { dragSourceId, dropTargetId } = options;
             const newTreeDto = newNodeTree.map((node)=>NodeFormatter.toDto(node));
@@ -50,13 +51,8 @@ const useTree = (props)=>{
                 dragSource: newTreeDto.find((node)=>node.id === String(options.dragSourceId)),
                 dropTarget: newTreeDto.find((node)=>node.id === String(options.dropTargetId))
             };
-            try {
-                await props.onDrop(newTreeDto, dropOptions);
-            } catch  {
-                return;
-            }
+            await props.onDrop(newTreeDto, dropOptions);
         }
-        await presenter.handleDrop(newNodeTree);
     };
     const changeOpen = (newOpenIds)=>{
         if (props.onChangeOpen) {

package/Tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree/useTree.js","sources":["../../src/Tree/useTree.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport type { DropOptions as DndDropOptions, NodeModel } from \"@minoru/react-dnd-treeview\";\nimport { autorun } from \"mobx\";\nimport { TreePresenter, type TreePresenterInitParams } from \"./presenters/index.js\";\nimport type { TreeProps, DropOptions } from \"./Tree.js\";\nimport { Node, NodeFormatter } from \"./domains/index.js\";\n\nexport const useTree = <TData = Record<string, any>>(props: TreeProps<TData>) => {\n    const params: TreePresenterInitParams = useMemo(() => {\n        return {\n            rootId: props.rootId,\n            defaultOpenNodeIds: props.defaultOpenNodeIds,\n            defaultLockedOpenNodeIds: props.defaultLockedOpenNodeIds,\n            loadingNodeIds: props.loadingNodeIds\n        };\n    }, [\n        props.rootId,\n        props.defaultOpenNodeIds,\n        props.defaultLockedOpenNodeIds,\n        props.loadingNodeIds\n    ]);\n\n    const presenter = useMemo(() => {\n        return new TreePresenter<TData>();\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        presenter.initNodes(props.nodes);\n    }, [props.nodes]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    const handleDrop = async (newTree: NodeModel<TData>[], options: DndDropOptions) => {\n        if (options.dragSourceId === options.dropTargetId) {\n            // Drag source and drop target are the same, no action taken.\n            return;\n        }\n\n        const newNodeTree = newTree.map(node => {\n            return Node.create<TData>({\n                id: String(node.id),\n                label: node.text,\n                parentId: String(node.parent),\n                droppable: node.droppable,\n                data: node.data as TData\n            });\n        });\n\n        if (props.onDrop) {\n            const { dragSourceId, dropTargetId } = options;\n\n            const newTreeDto = newNodeTree.map(node => NodeFormatter.toDto<TData>(node));\n\n            const dropOptions: DropOptions<TData> = {\n                dragSourceId: String(dragSourceId),\n                dropTargetId: String(dropTargetId),\n                dragSource: newTreeDto.find(node => node.id === String(options.dragSourceId)),\n                dropTarget: newTreeDto.find(node => node.id === String(options.dropTargetId))\n            };\n\n            try {\n                await props.onDrop(newTreeDto, dropOptions);\n            } catch {\n                return;\n            }\n        }\n\n        await presenter.handleDrop(newNodeTree);\n    };\n\n    const changeOpen = (newOpenIds: NodeModel<TData>[\"id\"][]) => {\n        if (props.onChangeOpen) {\n            const newOpenNodes = vm.nodes\n                .filter(node => newOpenIds.includes(node.id))\n                .map(node =>\n                    NodeFormatter.toDto<TData>(\n                        Node.create<TData>({\n                            id: String(node.id),\n                            label: node.text,\n                            parentId: String(node.parent),\n                            droppable: node.droppable,\n                            data: node.data as TData\n                        })\n                    )\n                );\n\n            props.onChangeOpen(newOpenNodes);\n        }\n    };\n\n    const canDrag = (node: NodeModel<TData> | undefined) => {\n        if (!node) {\n            return false;\n        }\n\n        const nodeDto = NodeFormatter.toDto<TData>(\n            Node.create<TData>({\n                id: String(node.id),\n                parentId: String(node.parent),\n                droppable: node.droppable,\n                label: node.text,\n                data: node.data as TData\n            })\n        );\n\n        return props.canDrag ? props.canDrag(nodeDto) : true;\n    };\n\n    const canDrop = (tree: NodeModel<TData>[], options: DndDropOptions) => {\n        if (props.canDrop) {\n            const { dragSourceId, dropTargetId } = options;\n\n            const nodeTree = tree.map(node => {\n                return Node.create<TData>({\n                    id: String(node.id),\n                    label: node.text,\n                    parentId: String(node.parent),\n                    droppable: node.droppable,\n                    data: node.data as TData\n                });\n            });\n\n            const nodeTreeDto = nodeTree.map(node => NodeFormatter.toDto<TData>(node));\n\n            const dropOptions: DropOptions<TData> = {\n                dragSourceId: String(dragSourceId),\n                dropTargetId: String(dropTargetId),\n                dragSource: nodeTreeDto.find(node => node.id === String(options.dragSourceId)),\n                dropTarget: nodeTreeDto.find(node => node.id === String(options.dropTargetId))\n            };\n\n            return props.canDrop(nodeTreeDto, dropOptions);\n        }\n\n        return true;\n    };\n\n    const sort = (a: NodeModel<TData>, b: NodeModel<TData>): number => {\n        if (typeof props.sort === \"function\") {\n            const nodeTreeA = Node.create<TData>({\n                id: String(a.id),\n                label: a.text,\n                parentId: String(a.parent),\n                droppable: a.droppable,\n                data: a.data\n            });\n\n            const nodeTreeB = Node.create<TData>({\n                id: String(b.id),\n                label: b.text,\n                parentId: String(b.parent),\n                droppable: b.droppable,\n                data: b.data\n            });\n\n            return props.sort(\n                NodeFormatter.toDto<TData>(nodeTreeA),\n                NodeFormatter.toDto<TData>(nodeTreeB)\n            );\n        }\n\n        return 0;\n    };\n\n    return { vm, handleDrop, changeOpen, canDrag, canDrop, sort };\n};\n"],"names":["useTree","props","params","useMemo","presenter","TreePresenter","vm","setVm","useState","useEffect","autorun","handleDrop","newTree","options","newNodeTree","node","Node","String","dragSourceId","dropTargetId","newTreeDto","NodeFormatter","dropOptions","changeOpen","newOpenIds","newOpenNodes","canDrag","nodeDto","canDrop","tree","nodeTree","nodeTreeDto","sort","a","b","nodeTreeA","nodeTreeB"],"mappings":"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"}
+{"version":3,"file":"Tree/useTree.js","sources":["../../src/Tree/useTree.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport type { DropOptions as DndDropOptions, NodeModel } from \"@minoru/react-dnd-treeview\";\nimport { autorun } from \"mobx\";\nimport { TreePresenter, type TreePresenterInitParams } from \"./presenters/index.js\";\nimport type { TreeProps, DropOptions } from \"./Tree.js\";\nimport { Node, NodeFormatter } from \"./domains/index.js\";\n\nexport const useTree = <TData = Record<string, any>>(props: TreeProps<TData>) => {\n    const params: TreePresenterInitParams = useMemo(() => {\n        return {\n            rootId: props.rootId,\n            defaultOpenNodeIds: props.defaultOpenNodeIds,\n            defaultLockedOpenNodeIds: props.defaultLockedOpenNodeIds,\n            loadingNodeIds: props.loadingNodeIds\n        };\n    }, [\n        props.rootId,\n        props.defaultOpenNodeIds,\n        props.defaultLockedOpenNodeIds,\n        props.loadingNodeIds\n    ]);\n\n    const presenter = useMemo(() => {\n        return new TreePresenter<TData>();\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        presenter.initNodes(props.nodes);\n    }, [props.nodes]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    const handleDrop = async (newTree: NodeModel<TData>[], options: DndDropOptions) => {\n        if (options.dragSourceId === options.dropTargetId) {\n            // Drag source and drop target are the same, no action taken.\n            return;\n        }\n\n        const newNodeTree = newTree.map(node => {\n            return Node.create<TData>({\n                id: String(node.id),\n                label: node.text,\n                parentId: String(node.parent),\n                droppable: node.droppable,\n                data: node.data as TData\n            });\n        });\n\n        await presenter.handleDrop(newNodeTree);\n\n        if (props.onDrop) {\n            const { dragSourceId, dropTargetId } = options;\n\n            const newTreeDto = newNodeTree.map(node => NodeFormatter.toDto<TData>(node));\n\n            const dropOptions: DropOptions<TData> = {\n                dragSourceId: String(dragSourceId),\n                dropTargetId: String(dropTargetId),\n                dragSource: newTreeDto.find(node => node.id === String(options.dragSourceId)),\n                dropTarget: newTreeDto.find(node => node.id === String(options.dropTargetId))\n            };\n\n            await props.onDrop(newTreeDto, dropOptions);\n        }\n    };\n\n    const changeOpen = (newOpenIds: NodeModel<TData>[\"id\"][]) => {\n        if (props.onChangeOpen) {\n            const newOpenNodes = vm.nodes\n                .filter(node => newOpenIds.includes(node.id))\n                .map(node =>\n                    NodeFormatter.toDto<TData>(\n                        Node.create<TData>({\n                            id: String(node.id),\n                            label: node.text,\n                            parentId: String(node.parent),\n                            droppable: node.droppable,\n                            data: node.data as TData\n                        })\n                    )\n                );\n\n            props.onChangeOpen(newOpenNodes);\n        }\n    };\n\n    const canDrag = (node: NodeModel<TData> | undefined) => {\n        if (!node) {\n            return false;\n        }\n\n        const nodeDto = NodeFormatter.toDto<TData>(\n            Node.create<TData>({\n                id: String(node.id),\n                parentId: String(node.parent),\n                droppable: node.droppable,\n                label: node.text,\n                data: node.data as TData\n            })\n        );\n\n        return props.canDrag ? props.canDrag(nodeDto) : true;\n    };\n\n    const canDrop = (tree: NodeModel<TData>[], options: DndDropOptions) => {\n        if (props.canDrop) {\n            const { dragSourceId, dropTargetId } = options;\n\n            const nodeTree = tree.map(node => {\n                return Node.create<TData>({\n                    id: String(node.id),\n                    label: node.text,\n                    parentId: String(node.parent),\n                    droppable: node.droppable,\n                    data: node.data as TData\n                });\n            });\n\n            const nodeTreeDto = nodeTree.map(node => NodeFormatter.toDto<TData>(node));\n\n            const dropOptions: DropOptions<TData> = {\n                dragSourceId: String(dragSourceId),\n                dropTargetId: String(dropTargetId),\n                dragSource: nodeTreeDto.find(node => node.id === String(options.dragSourceId)),\n                dropTarget: nodeTreeDto.find(node => node.id === String(options.dropTargetId))\n            };\n\n            return props.canDrop(nodeTreeDto, dropOptions);\n        }\n\n        return true;\n    };\n\n    const sort = (a: NodeModel<TData>, b: NodeModel<TData>): number => {\n        if (typeof props.sort === \"function\") {\n            const nodeTreeA = Node.create<TData>({\n                id: String(a.id),\n                label: a.text,\n                parentId: String(a.parent),\n                droppable: a.droppable,\n                data: a.data\n            });\n\n            const nodeTreeB = Node.create<TData>({\n                id: String(b.id),\n                label: b.text,\n                parentId: String(b.parent),\n                droppable: b.droppable,\n                data: b.data\n            });\n\n            return props.sort(\n                NodeFormatter.toDto<TData>(nodeTreeA),\n                NodeFormatter.toDto<TData>(nodeTreeB)\n            );\n        }\n\n        return 0;\n    };\n\n    return { vm, handleDrop, changeOpen, canDrag, canDrop, sort };\n};\n"],"names":["useTree","props","params","useMemo","presenter","TreePresenter","vm","setVm","useState","useEffect","autorun","handleDrop","newTree","options","newNodeTree","node","Node","String","dragSourceId","dropTargetId","newTreeDto","NodeFormatter","dropOptions","changeOpen","newOpenIds","newOpenNodes","canDrag","nodeDto","canDrop","tree","nodeTree","nodeTreeDto","sort","a","b","nodeTreeA","nodeTreeB"],"mappings":"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"}

package/Widget/Widget.d.ts

@@ -14,39 +14,25 @@ interface WidgetProps extends Omit<React.ComponentPropsWithoutRef<typeof WidgetC
     outline?: boolean;
     children: React.ReactNode;
 }
-declare const Widget: {
+declare const WidgetBase: {
     (props: WidgetProps): React.JSX.Element;
     displayName: string;
-} & {
-    original: {
-        (props: WidgetProps): React.JSX.Element;
-        displayName: string;
-    };
+};
+declare const Widget: typeof WidgetBase & {
+    original: typeof WidgetBase;
     originalName: string;
     displayName: string;
 } & {
-    original: {
-        (props: WidgetProps): React.JSX.Element;
-        displayName: string;
-    } & {
-        original: {
-            (props: WidgetProps): React.JSX.Element;
-            displayName: string;
-        };
+    original: typeof WidgetBase & {
+        original: typeof WidgetBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<{
-        (props: WidgetProps): React.JSX.Element;
-        displayName: string;
-    } & {
-        original: {
-            (props: WidgetProps): React.JSX.Element;
-            displayName: string;
-        };
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof WidgetBase & {
+        original: typeof WidgetBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Widget/components/Icon.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import type { IconProps as IconComponentProps } from "../../Icon/index.js";
 type IconProps = IconComponentProps;
-export declare const Icon: ((props: IconProps) => React.JSX.Element) & {
-    original: (props: IconProps) => React.JSX.Element;
+declare const IconBase: (props: IconProps) => React.JSX.Element;
+export declare const Icon: typeof IconBase & {
+    original: typeof IconBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: IconProps) => React.JSX.Element) & {
-        original: (props: IconProps) => React.JSX.Element;
+    original: typeof IconBase & {
+        original: typeof IconBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: IconProps) => React.JSX.Element) & {
-        original: (props: IconProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof IconBase & {
+        original: typeof IconBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Widget/components/WidgetAction.d.ts

@@ -1,21 +1,23 @@
 import * as React from "react";
 import { ButtonProps } from "../../Button/index.js";
-export declare const WidgetAction: ((props: ButtonProps) => React.JSX.Element) & {
-    original: (props: ButtonProps) => React.JSX.Element;
+declare const WidgetActionBase: (props: ButtonProps) => React.JSX.Element;
+export declare const WidgetAction: typeof WidgetActionBase & {
+    original: typeof WidgetActionBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    original: typeof WidgetActionBase & {
+        original: typeof WidgetActionBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof WidgetActionBase & {
+        original: typeof WidgetActionBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
+export {};

package/Widget/components/WidgetContent.d.ts

@@ -2,15 +2,15 @@ import * as React from "react";
 import { type VariantProps } from "../../utils.js";
 declare const widgetContentVariants: (props?: ({
     variant?: "accent" | "base" | "light" | null | undefined;
-    elevation?: "sm" | "md" | "none" | "lg" | null | undefined;
+    elevation?: "lg" | "md" | "none" | "sm" | null | undefined;
     outline?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface WidgetContentProps extends VariantProps<typeof widgetContentVariants> {
     className?: string;
     children: React.ReactNode;
 }
-declare const WidgetContent: {
-    ({ children }: WidgetContentProps): React.JSX.Element;
-    displayName: string;
-};
+declare function WidgetContent({ children }: WidgetContentProps): React.JSX.Element;
+declare namespace WidgetContent {
+    var displayName: string;
+}
 export { WidgetContent };

package/exports/admin/ui.d.ts

@@ -3,6 +3,7 @@ export { Accordion } from "../../Accordion/index.js";
 export { Alert } from "../../Alert/index.js";
 export { AutoComplete } from "../../AutoComplete/index.js";
 export { Avatar } from "../../Avatar/index.js";
+export { BetaBadge } from "../../BetaBadge/BetaBadge.js";
 export { Button, CopyButton, IconButton } from "../../Button/index.js";
 export { Card } from "../../Card/index.js";
 export { Checkbox } from "../../Checkbox/index.js";
@@ -16,6 +17,7 @@ export { Dialog } from "../../Dialog/index.js";
 export { Drawer } from "../../Drawer/index.js";
 export { DropdownMenu } from "../../DropdownMenu/index.js";
 export { DynamicFieldset } from "../../DynamicFieldset/index.js";
+export { EmptyState } from "../../EmptyState/index.js";
 export { FilePicker } from "../../FilePicker/index.js";
 export { FillViewportHeight, FillViewportWidth, FillViewport } from "../../FillViewport/index.js";
 export { Grid } from "../../Grid/index.js";

package/exports/admin/ui.js

@@ -3,6 +3,7 @@ export { Accordion } from "../../Accordion/index.js";
 export { Alert } from "../../Alert/index.js";
 export { AutoComplete } from "../../AutoComplete/index.js";
 export { Avatar } from "../../Avatar/index.js";
+export { BetaBadge } from "../../BetaBadge/BetaBadge.js";
 export { Button, CopyButton, IconButton } from "../../Button/index.js";
 export { Card } from "../../Card/index.js";
 export { Checkbox } from "../../Checkbox/index.js";
@@ -16,6 +17,7 @@ export { Dialog } from "../../Dialog/index.js";
 export { Drawer } from "../../Drawer/index.js";
 export { DropdownMenu } from "../../DropdownMenu/index.js";
 export { DynamicFieldset } from "../../DynamicFieldset/index.js";
+export { EmptyState } from "../../EmptyState/index.js";
 export { FilePicker } from "../../FilePicker/index.js";
 export { FillViewport, FillViewportHeight, FillViewportWidth } from "../../FillViewport/index.js";
 export { Grid } from "../../Grid/index.js";

package/index.d.ts

@@ -2,6 +2,8 @@ export * from "./Accordion/index.js";
 export * from "./Alert/index.js";
 export * from "./AutoComplete/index.js";
 export * from "./Avatar/index.js";
+export * from "./BetaBadge/BetaBadge.js";
+export * from "./Breadcrumbs/index.js";
 export * from "./Button/index.js";
 export * from "./Card/index.js";
 export * from "./Checkbox/index.js";
@@ -19,6 +21,7 @@ export * from "./Drawer/index.js";
 export * from "./DropdownMenu/index.js";
 export * from "./DynamicFieldset/index.js";
 export * from "./EditableTitle/index.js";
+export * from "./EmptyState/index.js";
 export * from "./FilePicker/index.js";
 export * from "./FillViewport/index.js";
 export * from "./FormComponent/index.js";
@@ -29,6 +32,7 @@ export * from "./Heading/index.js";
 export * from "./Icon/index.js";
 export * from "./IconPicker/index.js";
 export * from "./Image/index.js";
+export * from "./ImageEditor/index.js";
 export * from "./Input/index.js";
 export * from "./Label/index.js";
 export * from "./Link/index.js";
@@ -57,6 +61,7 @@ export * from "./Table/index.js";
 export * from "./Tabs/index.js";
 export * from "./Tag/index.js";
 export * from "./Tags/index.js";
+export * from "./Markdown/index.js";
 export * from "./Text/index.js";
 export * from "./Textarea/index.js";
 export * from "./Toggle/index.js";

package/index.js

@@ -2,6 +2,8 @@ export * from "./Accordion/index.js";
 export * from "./Alert/index.js";
 export * from "./AutoComplete/index.js";
 export * from "./Avatar/index.js";
+export * from "./BetaBadge/BetaBadge.js";
+export * from "./Breadcrumbs/index.js";
 export * from "./Button/index.js";
 export * from "./Card/index.js";
 export * from "./Checkbox/index.js";
@@ -19,6 +21,7 @@ export * from "./Drawer/index.js";
 export * from "./DropdownMenu/index.js";
 export * from "./DynamicFieldset/index.js";
 export * from "./EditableTitle/index.js";
+export * from "./EmptyState/index.js";
 export * from "./FilePicker/index.js";
 export * from "./FillViewport/index.js";
 export * from "./FormComponent/index.js";
@@ -28,6 +31,7 @@ export * from "./Heading/index.js";
 export * from "./Icon/index.js";
 export * from "./IconPicker/index.js";
 export * from "./Image/index.js";
+export * from "./ImageEditor/index.js";
 export * from "./Input/index.js";
 export * from "./Label/index.js";
 export * from "./Link/index.js";
@@ -56,6 +60,7 @@ export * from "./Table/index.js";
 export * from "./Tabs/index.js";
 export * from "./Tag/index.js";
 export * from "./Tags/index.js";
+export * from "./Markdown/index.js";
 export * from "./Text/index.js";
 export * from "./Textarea/index.js";
 export * from "./Toggle/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/admin-ui",
-	"version": "6.4.11",
+	"version": "6.6.0-alpha.1",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -13,59 +13,59 @@
 	"description": "The UI component library for Webiny's Admin app.",
 	"license": "MIT",
 	"dependencies": {
-		"@fortawesome/fontawesome-svg-core": "7.3.0",
-		"@fortawesome/react-fontawesome": "3.4.0",
+		"@fortawesome/fontawesome-svg-core": "7.3.1",
+		"@fortawesome/react-fontawesome": "3.5.0",
 		"@minoru/react-dnd-treeview": "3.5.4",
 		"@monaco-editor/react": "4.7.0",
-		"@radix-ui/react-scroll-area": "1.2.14",
-		"@tanstack/react-table": "8.21.3",
-		"@webiny/icons": "6.4.11",
-		"@webiny/react-composition": "6.4.11",
-		"@webiny/utils": "6.4.11",
+		"@radix-ui/react-scroll-area": "1.2.18",
+		"@tanstack/react-table": "9.1.2",
+		"@webiny/icons": "6.6.0-alpha.1",
+		"@webiny/react-composition": "6.6.0-alpha.1",
+		"@webiny/utils": "6.6.0-alpha.1",
 		"bytes": "3.1.2",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
 		"cmdk": "1.1.1",
 		"date-fns": "4.4.0",
 		"lodash": "4.18.1",
-		"minimatch": "10.2.5",
-		"mobx": "6.16.1",
+		"minimatch": "10.2.6",
+		"mobx": "7.0.3",
 		"monaco-editor": "0.53.0",
-		"radix-ui": "1.6.2",
+		"radix-ui": "1.6.7",
 		"react": "18.3.1",
 		"react-color": "2.19.3",
 		"react-custom-scrollbars": "4.2.1",
 		"react-day-picker": "10.0.1",
 		"react-dnd": "16.0.1",
 		"react-virtualized": "9.22.6",
-		"sonner": "2.0.7",
-		"tailwind-merge": "2.6.1",
-		"tailwindcss": "4.3.2",
+		"sonner": "2.0.8",
+		"tailwind-merge": "3.6.0",
+		"tailwindcss": "4.3.3",
 		"tw-animate-css": "1.4.0",
 		"type-fest": "5.8.0"
 	},
 	"devDependencies": {
-		"@fortawesome/free-solid-svg-icons": "7.3.0",
-		"@rsbuild/core": "2.1.5",
+		"@fortawesome/free-solid-svg-icons": "7.3.1",
+		"@rsbuild/core": "2.1.13",
 		"@rsbuild/plugin-svgr": "2.0.5",
-		"@storybook/addon-a11y": "10.4.6",
-		"@storybook/addon-docs": "10.4.6",
-		"@storybook/react": "10.4.6",
-		"@tailwindcss/postcss": "4.3.2",
+		"@storybook/addon-a11y": "10.5.10",
+		"@storybook/addon-docs": "10.5.10",
+		"@storybook/react": "10.5.10",
+		"@tailwindcss/postcss": "4.3.3",
 		"@types/react": "18.3.31",
 		"@types/react-color": "3.0.13",
 		"@types/react-custom-scrollbars": "4.0.13",
 		"@types/react-virtualized": "9.22.3",
-		"@webiny/build-tools": "6.4.11",
-		"@webiny/project": "6.4.11",
-		"chalk": "5.6.2",
-		"oxfmt": "0.58.0",
+		"@webiny/build-tools": "6.6.0-alpha.1",
+		"@webiny/project": "6.6.0-alpha.1",
+		"chalk": "6.0.0",
+		"oxfmt": "0.64.0",
 		"rimraf": "6.1.3",
-		"sass": "1.101.0",
-		"storybook": "10.4.6",
-		"storybook-react-rsbuild": "3.3.4",
-		"typescript": "6.0.3",
-		"vitest": "4.1.10"
+		"sass": "1.103.1",
+		"storybook": "10.5.10",
+		"storybook-react-rsbuild": "3.4.2",
+		"typescript": "7.0.2",
+		"vitest": "4.1.11"
 	},
 	"publishConfig": {
 		"access": "public"

package/theme.css

@@ -86,6 +86,7 @@
   --color-primary-strong: var(--color-primary-700);
   --color-primary-subtle: var(--color-primary-100);
   --color-primary-xstrong: var(--color-primary-900);
+  --color-primary-light: var(--color-primary-200);
 
   --color-secondary: var(--color-success-500);
   --color-secondary-disabled: var(--color-success-400);
@@ -342,6 +343,17 @@
       background-color: var(--color-neutral-muted);
     }
   }
+
+  --animate-skeleton-pulse-light: skeleton-pulse-light 1400ms ease-in-out infinite;
+  @keyframes skeleton-pulse-light {
+    0%,
+    100% {
+      background-color: var(--color-neutral-subtle);
+    }
+    50% {
+      background-color: var(--color-neutral-disabled);
+    }
+  }
 }
 
 @utility container {
@@ -351,7 +363,16 @@
 @utility fill-grid {
   background-image: radial-gradient(var(--color-neutral-strong) 1px, transparent 0px);
   background-size: 15px 15px;
-  @apply bg-neutral-subtle;
+  @apply bg-neutral-light;
+}
+
+@utility fill-checker {
+  background-image: repeating-conic-gradient(
+    var(--color-neutral-dimmed) 0% 25%,
+    transparent 0% 50%
+  );
+  background-size: 16px 16px;
+  @apply bg-white;
 }
 
 @layer base {

package/utils.js

@@ -2,15 +2,13 @@ import react from "react";
 import { clsx } from "clsx";
 import { generateId } from "@webiny/utils/generateId.js";
 import { extendTailwindMerge } from "tailwind-merge";
+const BORDER_WIDTHS = [
+    "sm",
+    "md",
+    "none"
+];
 const twMerge = extendTailwindMerge({
     override: {
-        theme: {
-            borderWidth: [
-                "sm",
-                "md",
-                "none"
-            ]
-        },
         classGroups: {
             "border-color": [
                 "border-transparent",
@@ -73,39 +71,59 @@ const twMerge = extendTailwindMerge({
         }
     },
     extend: {
-        theme: {
-            padding: [
-                "lg",
-                "md",
-                "md-extra",
-                "none",
-                "sm",
-                "sm-extra",
-                "sm-plus",
-                "xl",
-                "xs",
-                "xs-plus",
-                "xxl",
-                "xxs"
+        classGroups: {
+            "border-w": [
+                {
+                    border: BORDER_WIDTHS
+                }
             ],
-            margin: [
-                "lg",
-                "md",
-                "md-plus",
-                "none",
-                "sm",
-                "sm-extra",
-                "sm-plus",
-                "xl",
-                "xs",
-                "xs-plus",
-                "xxl",
-                "xxs"
+            "border-w-x": [
+                {
+                    "border-x": BORDER_WIDTHS
+                }
+            ],
+            "border-w-y": [
+                {
+                    "border-y": BORDER_WIDTHS
+                }
             ],
+            "border-w-t": [
+                {
+                    "border-t": BORDER_WIDTHS
+                }
+            ],
+            "border-w-r": [
+                {
+                    "border-r": BORDER_WIDTHS
+                }
+            ],
+            "border-w-b": [
+                {
+                    "border-b": BORDER_WIDTHS
+                }
+            ],
+            "border-w-l": [
+                {
+                    "border-l": BORDER_WIDTHS
+                }
+            ],
+            "border-w-s": [
+                {
+                    "border-s": BORDER_WIDTHS
+                }
+            ],
+            "border-w-e": [
+                {
+                    "border-e": BORDER_WIDTHS
+                }
+            ]
+        },
+        theme: {
             spacing: [
                 "3xl",
                 "lg",
                 "md",
+                "md-extra",
                 "md-plus",
                 "none",
                 "sm",