From 021aa25e02546d8ae5bd018c8df654e1c0d322a9 Mon Sep 17 00:00:00 2001
From: Adrian Smijulj <adrian1358@gmail.com>
Date: Thu, 16 Jan 2025 11:41:22 +0100
Subject: [PATCH 01/14] fix: remove `TopProgressBar` component (#4493)

---
 packages/ui/package.json                      |  2 --
 packages/ui/src/TopProgressBar/README.md      | 11 --------
 .../ui/src/TopProgressBar/TopProgressBar.tsx  | 24 ------------------
 packages/ui/src/TopProgressBar/hoc/index.ts   |  1 -
 .../TopProgressBar/hoc/withTopProgressBar.tsx | 25 -------------------
 packages/ui/src/TopProgressBar/index.ts       |  1 -
 packages/ui/src/TopProgressBar/style.scss     | 21 ----------------
 yarn.lock                                     |  2 --
 8 files changed, 87 deletions(-)
 delete mode 100644 packages/ui/src/TopProgressBar/README.md
 delete mode 100644 packages/ui/src/TopProgressBar/TopProgressBar.tsx
 delete mode 100644 packages/ui/src/TopProgressBar/hoc/index.ts
 delete mode 100644 packages/ui/src/TopProgressBar/hoc/withTopProgressBar.tsx
 delete mode 100644 packages/ui/src/TopProgressBar/index.ts
 delete mode 100644 packages/ui/src/TopProgressBar/style.scss

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 09c1e95d116..eecdacbbd28 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -39,7 +39,6 @@
     "load-script": "^1.0.0",
     "lodash": "^4.17.21",
     "material-components-web": "^14.0.0",
-    "nprogress": "^0.2.0",
     "nuka-carousel": "4.7.1",
     "react-butterfiles": "^1.3.3",
     "react-color": "^2.19.3",
@@ -52,7 +51,6 @@
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
     "@testing-library/react": "^15.0.7",
-    "@types/nprogress": "^0.2.0",
     "@types/react-color": "^2.17.11",
     "@types/react-custom-scrollbars": "^4.0.10",
     "@types/react-transition-group": "^4.4.4",
diff --git a/packages/ui/src/TopProgressBar/README.md b/packages/ui/src/TopProgressBar/README.md
deleted file mode 100644
index b602420074e..00000000000
--- a/packages/ui/src/TopProgressBar/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# TopProgressBar
-
-### Description
-
-Use `TopProgressBar` to let users know their actions are being processed.
-
-### Import
-
-```js
-import { TopProgressBar } from "@webiny/ui/TopProgressBar";
-```
diff --git a/packages/ui/src/TopProgressBar/TopProgressBar.tsx b/packages/ui/src/TopProgressBar/TopProgressBar.tsx
deleted file mode 100644
index d02ea78ea4c..00000000000
--- a/packages/ui/src/TopProgressBar/TopProgressBar.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import nprogress from "nprogress";
-import "./style.scss";
-
-export interface TopProgressBarRender {
-    start: () => void;
-    finish: () => void;
-    nprogress: typeof nprogress;
-}
-
-export interface TopProgressBarProps {
-    /**
-     * Elements that require top loading bar to be shown.
-     */
-    children: (params: TopProgressBarRender) => React.ReactElement;
-}
-
-export const TopProgressBar = (props: TopProgressBarProps) => {
-    return props.children({
-        start: nprogress.start,
-        finish: nprogress.done,
-        nprogress
-    });
-};
diff --git a/packages/ui/src/TopProgressBar/hoc/index.ts b/packages/ui/src/TopProgressBar/hoc/index.ts
deleted file mode 100644
index 9ca0173b8ff..00000000000
--- a/packages/ui/src/TopProgressBar/hoc/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as withTopProgressBar } from "./withTopProgressBar";
diff --git a/packages/ui/src/TopProgressBar/hoc/withTopProgressBar.tsx b/packages/ui/src/TopProgressBar/hoc/withTopProgressBar.tsx
deleted file mode 100644
index ff299f46949..00000000000
--- a/packages/ui/src/TopProgressBar/hoc/withTopProgressBar.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { TopProgressBar } from "..";
-
-const withTopProgressBar = () => {
-    return (BaseComponent: React.ComponentType<any>) => {
-        const WithTopProgressBar = (props: any) => {
-            return (
-                <TopProgressBar>
-                    {({ start, finish, nprogress }) => (
-                        <BaseComponent
-                            {...props}
-                            startTopProgressBar={start}
-                            finishTopProgressBar={finish}
-                            nprogress={nprogress}
-                        />
-                    )}
-                </TopProgressBar>
-            );
-        };
-
-        return WithTopProgressBar;
-    };
-};
-
-export default withTopProgressBar;
diff --git a/packages/ui/src/TopProgressBar/index.ts b/packages/ui/src/TopProgressBar/index.ts
deleted file mode 100644
index f885bc298ce..00000000000
--- a/packages/ui/src/TopProgressBar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./TopProgressBar";
diff --git a/packages/ui/src/TopProgressBar/style.scss b/packages/ui/src/TopProgressBar/style.scss
deleted file mode 100644
index d2ae4d4c0b0..00000000000
--- a/packages/ui/src/TopProgressBar/style.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/* Make clicks pass-through */
-#nprogress {
-  pointer-events: none;
-}
-
-#nprogress .bar {
-  background: var(--mdc-theme-secondary);
-
-  position: fixed;
-  z-index: 1031;
-  top: 64px;
-  left: 0;
-
-  width: 100%;
-  height: 2px;
-}
-
-/* Fancy blur effect */
-#nprogress .peg {
-  display: none;
-}
diff --git a/yarn.lock b/yarn.lock
index 0f52185306a..a53b57ab1e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19580,7 +19580,6 @@ __metadata:
     "@svgr/webpack": "npm:^6.1.1"
     "@tanstack/react-table": "npm:^8.5.22"
     "@testing-library/react": "npm:^15.0.7"
-    "@types/nprogress": "npm:^0.2.0"
     "@types/react-color": "npm:^2.17.11"
     "@types/react-custom-scrollbars": "npm:^4.0.10"
     "@types/react-transition-group": "npm:^4.4.4"
@@ -19601,7 +19600,6 @@ __metadata:
     lodash: "npm:^4.17.21"
     material-components-web: "npm:^14.0.0"
     ncp: "npm:^2.0.0"
-    nprogress: "npm:^0.2.0"
     nuka-carousel: "npm:4.7.1"
     raw-loader: "npm:^4.0.2"
     react-butterfiles: "npm:^1.3.3"

From 78883528f59965cad43f0d161e5a81039425510b Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Thu, 16 Jan 2025 11:53:42 +0100
Subject: [PATCH 02/14] fix: remove `| string` when using `React.ReactNode`

---
 packages/admin-ui/src/Card/Card.tsx     | 4 ++--
 packages/admin-ui/src/Dialog/Dialog.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/admin-ui/src/Card/Card.tsx b/packages/admin-ui/src/Card/Card.tsx
index 6d97fc86e92..06e15a8894b 100644
--- a/packages/admin-ui/src/Card/Card.tsx
+++ b/packages/admin-ui/src/Card/Card.tsx
@@ -52,8 +52,8 @@ CardRootBase.displayName = "CardRoot";
 const CardRoot = makeDecoratable("CardRoot", CardRootBase);
 
 interface CardProps extends CardRootProps, VariantProps<typeof cardRootVariants> {
-    title?: React.ReactNode | string;
-    description?: React.ReactNode | string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
     actions?: React.ReactNode;
     options?: React.ReactNode;
 }
diff --git a/packages/admin-ui/src/Dialog/Dialog.tsx b/packages/admin-ui/src/Dialog/Dialog.tsx
index 729494c4d68..a88422b4dce 100644
--- a/packages/admin-ui/src/Dialog/Dialog.tsx
+++ b/packages/admin-ui/src/Dialog/Dialog.tsx
@@ -16,12 +16,12 @@ export interface DialogProps
     extends React.ComponentPropsWithoutRef<typeof DialogRoot>,
         Omit<React.ComponentPropsWithoutRef<typeof DialogContent>, "title"> {
     trigger?: React.ReactNode;
-    title?: React.ReactNode | string;
+    title?: React.ReactNode;
     titleIcon?: React.ReactElement;
     showCloseButton?: boolean;
     preventOutsideDismiss?: boolean;
     bodyPadding?: boolean;
-    description?: React.ReactNode | string;
+    description?: React.ReactNode;
     children: React.ReactNode;
     actions?: React.ReactNode;
     info?: React.ReactNode;

From a51c50105fa069f2c64168fa87e58c4120f37130 Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Thu, 16 Jan 2025 11:56:32 +0100
Subject: [PATCH 03/14] fix: memoize `preventOutsideDismissProps` calculation

---
 .../src/Dialog/components/DialogContent.tsx   | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/admin-ui/src/Dialog/components/DialogContent.tsx b/packages/admin-ui/src/Dialog/components/DialogContent.tsx
index 659db9b8cce..09794bcea2a 100644
--- a/packages/admin-ui/src/Dialog/components/DialogContent.tsx
+++ b/packages/admin-ui/src/Dialog/components/DialogContent.tsx
@@ -11,16 +11,18 @@ const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     DialogContentProps
 >(({ className, preventOutsideDismiss, children, ...props }, ref) => {
-    let preventOutsideDismissProps: Pick<
-        DialogPrimitive.DialogContentProps,
-        "onInteractOutside" | "onEscapeKeyDown"
-    > = {};
-    if (preventOutsideDismiss) {
-        preventOutsideDismissProps = {
-            onInteractOutside: event => event.preventDefault(),
-            onEscapeKeyDown: event => event.preventDefault()
-        };
-    }
+    const preventOutsideDismissProps = React.useMemo<
+        Pick<DialogPrimitive.DialogContentProps, "onInteractOutside" | "onEscapeKeyDown">
+    >(() => {
+        if (preventOutsideDismiss) {
+            return {
+                onInteractOutside: event => event.preventDefault(),
+                onEscapeKeyDown: event => event.preventDefault()
+            };
+        }
+
+        return {};
+    }, [preventOutsideDismiss]);
 
     return (
         <DialogPrimitive.Content

From 08dfbc1d7ecdedd6eba13a3c689b382a7638bcae Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Thu, 16 Jan 2025 12:36:48 +0100
Subject: [PATCH 04/14] fix: remove displayName

---
 packages/admin-ui/src/Dialog/components/DialogDescription.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/admin-ui/src/Dialog/components/DialogDescription.tsx b/packages/admin-ui/src/Dialog/components/DialogDescription.tsx
index 3715ac25eb7..7f36243e7c2 100644
--- a/packages/admin-ui/src/Dialog/components/DialogDescription.tsx
+++ b/packages/admin-ui/src/Dialog/components/DialogDescription.tsx
@@ -12,5 +12,3 @@ export const DialogDescription = ({ className, ...props }: DialogDescriptionProp
         className={cn("text-sm text-neutral-strong", className)}
     />
 );
-
-DialogDescription.displayName = DialogPrimitive.Description.displayName;

From 720fcb128f720bdcdcda8f321f6b1dca416edff3 Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Thu, 16 Jan 2025 12:38:33 +0100
Subject: [PATCH 05/14] fix: implement outer checks

---
 .../admin-ui/src/Dialog/components/DialogFooter.tsx    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/admin-ui/src/Dialog/components/DialogFooter.tsx b/packages/admin-ui/src/Dialog/components/DialogFooter.tsx
index 7f2d65ee50b..21a36b947dc 100644
--- a/packages/admin-ui/src/Dialog/components/DialogFooter.tsx
+++ b/packages/admin-ui/src/Dialog/components/DialogFooter.tsx
@@ -13,10 +13,12 @@ export const DialogFooter = ({ actions, info, className, ...props }: DialogFoote
 
     return (
         <div {...props} className={cn("flex justify-between p-lg pt-md-extra", className)}>
-            <div className={"text-sm flex items-center"}>
-                <div>{info}</div>
-            </div>
-            <div className={"flex gap-x-sm"}>{actions}</div>
+            {info && (
+                <div className={"text-sm flex items-center"}>
+                    <div>{info}</div>
+                </div>
+            )}
+            {actions && <div className={"flex gap-x-sm"}>{actions}</div>}
         </div>
     );
 };

From 23191a46b4d44a2db7dc0e607f538b99f5367426 Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Thu, 16 Jan 2025 12:50:47 +0100
Subject: [PATCH 06/14] fix: do not use VisuallyHidden component

---
 .../src/Dialog/components/DialogHeader.tsx    | 32 +++----------------
 1 file changed, 5 insertions(+), 27 deletions(-)

diff --git a/packages/admin-ui/src/Dialog/components/DialogHeader.tsx b/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
index 8e119379a2a..763a0f44125 100644
--- a/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
+++ b/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
@@ -3,7 +3,6 @@ import { cn } from "~/utils";
 import { type DialogProps } from "../Dialog";
 import { DialogTitle } from "./DialogTitle";
 import { DialogDescription } from "./DialogDescription";
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { ReactComponent as XIcon } from "@material-design-icons/svg/filled/close.svg";
 import { IconButton } from "~/Button";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -19,30 +18,6 @@ export const DialogHeader = ({
     className,
     ...props
 }: DialogHeaderProps) => {
-    let renderedTitle = (
-        <DialogTitle>
-            {titleIcon}
-            {title}
-        </DialogTitle>
-    );
-    if (!title) {
-        renderedTitle = <VisuallyHidden.Root>{renderedTitle}</VisuallyHidden.Root>;
-    }
-
-    let renderedDescription = <DialogDescription>{description}</DialogDescription>;
-    if (!description) {
-        renderedDescription = <VisuallyHidden.Root>{renderedDescription}</VisuallyHidden.Root>;
-    }
-
-    if (!title && !description) {
-        return (
-            <>
-                {renderedTitle}
-                {renderedDescription}
-            </>
-        );
-    }
-
     return (
         <div
             {...props}
@@ -57,9 +32,12 @@ export const DialogHeader = ({
                         <IconButton size="md" iconSize="lg" variant={"ghost"} icon={<XIcon />} />
                     </DialogPrimitive.Close>
                 )}
-                {renderedTitle}
+                <DialogTitle>
+                    {titleIcon}
+                    {title}
+                </DialogTitle>
             </div>
-            {renderedDescription}
+            <DialogDescription>{description}</DialogDescription>
         </div>
     );
 };

From 943e6819b364e854e8a61e065214ea0f3d2413b4 Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Thu, 16 Jan 2025 13:42:06 +0100
Subject: [PATCH 07/14] fix: remove displayName

---
 packages/admin-ui/src/Dialog/components/DialogTitle.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/admin-ui/src/Dialog/components/DialogTitle.tsx b/packages/admin-ui/src/Dialog/components/DialogTitle.tsx
index 64026145296..730770f1fe4 100644
--- a/packages/admin-ui/src/Dialog/components/DialogTitle.tsx
+++ b/packages/admin-ui/src/Dialog/components/DialogTitle.tsx
@@ -7,5 +7,3 @@ export type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimi
 export const DialogTitle = ({ className, ...props }: DialogTitleProps) => (
     <DialogPrimitive.Title {...props} className={cn("text-h4 flex gap-sm", className)} />
 );
-
-DialogTitle.displayName = DialogPrimitive.Title.displayName;

From 89929d3ee072f358817926f78210099c0ed9145c Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Thu, 16 Jan 2025 15:17:00 +0100
Subject: [PATCH 08/14] fix: do not use VisuallyHidden component

---
 packages/admin-ui/src/Dialog/components/DialogHeader.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/admin-ui/src/Dialog/components/DialogHeader.tsx b/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
index 763a0f44125..2b213fd4f99 100644
--- a/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
+++ b/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
@@ -18,6 +18,10 @@ export const DialogHeader = ({
     className,
     ...props
 }: DialogHeaderProps) => {
+    if (!title && !description) {
+        return null;
+    }
+
     return (
         <div
             {...props}

From 24398470229a6bc99e91ae0cd8d156bbeb4d77ff Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Thu, 16 Jan 2025 15:17:18 +0100
Subject: [PATCH 09/14] fix: remove unneeded `text` prop

---
 packages/app-admin-rmwc/src/modules/Overlays/Dialog.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/app-admin-rmwc/src/modules/Overlays/Dialog.tsx b/packages/app-admin-rmwc/src/modules/Overlays/Dialog.tsx
index c3e5d8314a9..25b3abb6feb 100644
--- a/packages/app-admin-rmwc/src/modules/Overlays/Dialog.tsx
+++ b/packages/app-admin-rmwc/src/modules/Overlays/Dialog.tsx
@@ -73,7 +73,6 @@ export const DialogContainer = () => {
                     <DialogAccept
                         data-testid={"confirmationdialog-confirm-action"}
                         onClick={handleConfirm}
-                        text={actions.accept.label}
                     >
                         {actions.accept.label}
                     </DialogAccept>

From 7f99e65ebb433f9267e6edd3c418faddf943356d Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Thu, 16 Jan 2025 15:23:35 +0100
Subject: [PATCH 10/14] fix: implement outer checks

---
 packages/admin-ui/src/Dialog/components/DialogFooter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/admin-ui/src/Dialog/components/DialogFooter.tsx b/packages/admin-ui/src/Dialog/components/DialogFooter.tsx
index 21a36b947dc..4b110b8e97c 100644
--- a/packages/admin-ui/src/Dialog/components/DialogFooter.tsx
+++ b/packages/admin-ui/src/Dialog/components/DialogFooter.tsx
@@ -18,7 +18,7 @@ export const DialogFooter = ({ actions, info, className, ...props }: DialogFoote
                     <div>{info}</div>
                 </div>
             )}
-            {actions && <div className={"flex gap-x-sm"}>{actions}</div>}
+            {actions && <div className={"flex gap-x-sm ml-auto"}>{actions}</div>}
         </div>
     );
 };

From 3b884c6ff65fb6d9ad7e3bc91ad3b1dacd883264 Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Thu, 16 Jan 2025 16:13:31 +0100
Subject: [PATCH 11/14] fix: remove p/div from the list of tags

---
 packages/admin-ui/package.json            |  1 -
 packages/admin-ui/src/Heading/Heading.tsx |  2 +-
 yarn.lock                                 | 20 --------------------
 3 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json
index e5de5587f53..29d61684983 100644
--- a/packages/admin-ui/package.json
+++ b/packages/admin-ui/package.json
@@ -26,7 +26,6 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@radix-ui/react-visually-hidden": "^1.1.1",
     "@webiny/react-composition": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/utils": "0.0.0",
diff --git a/packages/admin-ui/src/Heading/Heading.tsx b/packages/admin-ui/src/Heading/Heading.tsx
index 4e76c3da942..44196de36f8 100644
--- a/packages/admin-ui/src/Heading/Heading.tsx
+++ b/packages/admin-ui/src/Heading/Heading.tsx
@@ -3,7 +3,7 @@ import { makeDecoratable } from "@webiny/react-composition";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "~/utils";
 
-export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
+export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
 
 // Create a mapping of variant to tag
diff --git a/yarn.lock b/yarn.lock
index dee7c1f759b..ea8421df21d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10508,25 +10508,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-visually-hidden@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "@radix-ui/react-visually-hidden@npm:1.1.1"
-  dependencies:
-    "@radix-ui/react-primitive": "npm:2.0.1"
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 10/ccbdf29811283fb257f0b0f8604923e6fe349a264986463f6d6a20946fc51e243527985e69f0af27659f78fd7a4199dacbba5bfc7af3667aa409cd23a0ae3283
-  languageName: node
-  linkType: hard
-
 "@radix-ui/rect@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/rect@npm:1.0.1"
@@ -15306,7 +15287,6 @@ __metadata:
     "@radix-ui/react-tabs": "npm:^1.1.0"
     "@radix-ui/react-toast": "npm:^1.2.1"
     "@radix-ui/react-tooltip": "npm:^1.1.2"
-    "@radix-ui/react-visually-hidden": "npm:^1.1.1"
     "@storybook/addon-a11y": "npm:7.6.20"
     "@storybook/addon-essentials": "npm:7.6.20"
     "@storybook/react": "npm:7.6.20"

From ecd61c2bc9a6a747d6e738603cfe596525163805 Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Mon, 20 Jan 2025 16:12:27 +0100
Subject: [PATCH 12/14] fix: rename `preventOutsideDismiss` to `dismissible`

---
 packages/admin-ui/src/Dialog/Dialog.stories.tsx      |  2 +-
 packages/admin-ui/src/Dialog/Dialog.tsx              |  2 +-
 .../admin-ui/src/Dialog/components/DialogContent.tsx | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/admin-ui/src/Dialog/Dialog.stories.tsx b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
index f54f83fb1f4..eea2e8744e6 100644
--- a/packages/admin-ui/src/Dialog/Dialog.stories.tsx
+++ b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
@@ -133,7 +133,7 @@ export const WithTitleIcon: Story = {
 export const PreventOutsideDismiss: Story = {
     args: {
         ...Default.args,
-        preventOutsideDismiss: true
+        dismissible: false
     }
 };
 
diff --git a/packages/admin-ui/src/Dialog/Dialog.tsx b/packages/admin-ui/src/Dialog/Dialog.tsx
index a88422b4dce..936ecf10ba2 100644
--- a/packages/admin-ui/src/Dialog/Dialog.tsx
+++ b/packages/admin-ui/src/Dialog/Dialog.tsx
@@ -19,7 +19,7 @@ export interface DialogProps
     title?: React.ReactNode;
     titleIcon?: React.ReactElement;
     showCloseButton?: boolean;
-    preventOutsideDismiss?: boolean;
+    dismissible?: boolean;
     bodyPadding?: boolean;
     description?: React.ReactNode;
     children: React.ReactNode;
diff --git a/packages/admin-ui/src/Dialog/components/DialogContent.tsx b/packages/admin-ui/src/Dialog/components/DialogContent.tsx
index 09794bcea2a..cb71e50103f 100644
--- a/packages/admin-ui/src/Dialog/components/DialogContent.tsx
+++ b/packages/admin-ui/src/Dialog/components/DialogContent.tsx
@@ -4,17 +4,17 @@ import { cn } from "~/utils";
 
 export interface DialogContentProps
     extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-    preventOutsideDismiss?: boolean;
+    dismissible?: boolean;
 }
 
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     DialogContentProps
->(({ className, preventOutsideDismiss, children, ...props }, ref) => {
-    const preventOutsideDismissProps = React.useMemo<
+>(({ className, dismissible, children, ...props }, ref) => {
+    const dismissibleProps = React.useMemo<
         Pick<DialogPrimitive.DialogContentProps, "onInteractOutside" | "onEscapeKeyDown">
     >(() => {
-        if (preventOutsideDismiss) {
+        if (dismissible === false) {
             return {
                 onInteractOutside: event => event.preventDefault(),
                 onEscapeKeyDown: event => event.preventDefault()
@@ -22,11 +22,11 @@ const DialogContent = React.forwardRef<
         }
 
         return {};
-    }, [preventOutsideDismiss]);
+    }, [dismissible]);
 
     return (
         <DialogPrimitive.Content
-            {...preventOutsideDismissProps}
+            {...dismissibleProps}
             {...props}
             ref={ref}
             className={cn(

From 5387c267e437f3d21d45e1b3022e0c58fee37da2 Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Mon, 20 Jan 2025 16:16:00 +0100
Subject: [PATCH 13/14] fix: rename `titleIcon` to `icon`

---
 .../admin-ui/src/Dialog/Dialog.stories.tsx     |  4 ++--
 packages/admin-ui/src/Dialog/Dialog.tsx        | 10 +++++-----
 .../src/Dialog/components/DialogHeader.tsx     |  6 +++---
 .../admin-ui/src/Dialog/components/Icon.tsx    | 18 ++++++++++++++++++
 .../src/Dialog/components/TitleIcon.tsx        | 13 -------------
 5 files changed, 28 insertions(+), 23 deletions(-)
 create mode 100644 packages/admin-ui/src/Dialog/components/Icon.tsx
 delete mode 100644 packages/admin-ui/src/Dialog/components/TitleIcon.tsx

diff --git a/packages/admin-ui/src/Dialog/Dialog.stories.tsx b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
index eea2e8744e6..59787be8c06 100644
--- a/packages/admin-ui/src/Dialog/Dialog.stories.tsx
+++ b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
@@ -123,10 +123,10 @@ export const DropdownMenuInDialog: Story = {
     }
 };
 
-export const WithTitleIcon: Story = {
+export const WithIcon: Story = {
     args: {
         ...Default.args,
-        titleIcon: <Dialog.TitleIcon icon={<DoorbellIcon />} label={"Title icon"} />
+        icon: <Dialog.Icon icon={<DoorbellIcon />} label={"Title icon"} />
     }
 };
 
diff --git a/packages/admin-ui/src/Dialog/Dialog.tsx b/packages/admin-ui/src/Dialog/Dialog.tsx
index 936ecf10ba2..932a24b04f3 100644
--- a/packages/admin-ui/src/Dialog/Dialog.tsx
+++ b/packages/admin-ui/src/Dialog/Dialog.tsx
@@ -8,7 +8,7 @@ import { DialogOverlay } from "~/Dialog/components/DialogOverlay";
 import { DialogPortal } from "./components/DialogPortal";
 import { DialogRoot } from "./components/DialogRoot";
 import { DialogTrigger } from "./components/DialogTrigger";
-import { TitleIcon } from "./components/TitleIcon";
+import { Icon } from "./components/Icon";
 import { ConfirmButton } from "./components/ConfirmButton";
 import { CancelButton } from "./components/CancelButton";
 
@@ -17,7 +17,7 @@ export interface DialogProps
         Omit<React.ComponentPropsWithoutRef<typeof DialogContent>, "title"> {
     trigger?: React.ReactNode;
     title?: React.ReactNode;
-    titleIcon?: React.ReactElement;
+    icon?: React.ReactElement;
     showCloseButton?: boolean;
     dismissible?: boolean;
     bodyPadding?: boolean;
@@ -43,7 +43,7 @@ const DialogBase = (props: DialogProps) => {
 
                 // Header props.
                 title,
-                titleIcon,
+                icon,
                 description,
                 showCloseButton,
 
@@ -72,7 +72,7 @@ const DialogBase = (props: DialogProps) => {
                     // that are decorated with `makeDecoratable`. This will be fixed in the future.
                     children: <div>{trigger}</div>
                 },
-                headerProps: { title, titleIcon, description, showCloseButton },
+                headerProps: { title, icon, description, showCloseButton },
                 bodyProps: { children, bodyPadding },
                 footerProps: { info, actions },
                 contentProps
@@ -101,7 +101,7 @@ const DecoratableDialog = makeDecoratable("Dialog", DialogBase);
 const Dialog = withStaticProps(DecoratableDialog, {
     ConfirmButton,
     CancelButton,
-    TitleIcon
+    Icon
 });
 
 export { Dialog };
diff --git a/packages/admin-ui/src/Dialog/components/DialogHeader.tsx b/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
index 2b213fd4f99..4aa4bd245bf 100644
--- a/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
+++ b/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
@@ -8,11 +8,11 @@ import { IconButton } from "~/Button";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 export type DialogHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
-    Pick<DialogProps, "title" | "titleIcon" | "description" | "showCloseButton">;
+    Pick<DialogProps, "title" | "icon" | "description" | "showCloseButton">;
 
 export const DialogHeader = ({
     title,
-    titleIcon,
+    icon,
     description,
     showCloseButton,
     className,
@@ -37,7 +37,7 @@ export const DialogHeader = ({
                     </DialogPrimitive.Close>
                 )}
                 <DialogTitle>
-                    {titleIcon}
+                    {icon}
                     {title}
                 </DialogTitle>
             </div>
diff --git a/packages/admin-ui/src/Dialog/components/Icon.tsx b/packages/admin-ui/src/Dialog/components/Icon.tsx
new file mode 100644
index 00000000000..a327de866e4
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/components/Icon.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { Icon as IconComponent, IconProps as IconComponentProps } from "~/Icon";
+
+type IconProps = IconComponentProps;
+
+const IconBase = ({ className, ...props }: IconProps) => {
+    return (
+        <IconComponent
+            size={"lg"}
+            color={"neutral-strong"}
+            {...props}
+            className={cn("pt-xs", className)}
+        />
+    );
+};
+
+export const Icon = makeDecoratable("Icon", IconBase);
diff --git a/packages/admin-ui/src/Dialog/components/TitleIcon.tsx b/packages/admin-ui/src/Dialog/components/TitleIcon.tsx
deleted file mode 100644
index 2ed35fbb2dc..00000000000
--- a/packages/admin-ui/src/Dialog/components/TitleIcon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from "react";
-import { cn, makeDecoratable } from "~/utils";
-import { Icon, IconProps } from "~/Icon";
-
-type TitleIconProps = IconProps;
-
-const TitleIconBase = ({ className, ...props }: TitleIconProps) => {
-    return (
-        <Icon size={"lg"} color={"neutral-strong"} {...props} className={cn("pt-xs", className)} />
-    );
-};
-
-export const TitleIcon = makeDecoratable("TitleIcon", TitleIconBase);

From 5654db660f63e92bc49a0b4fff06304087204c09 Mon Sep 17 00:00:00 2001
From: adrians5j <adrian@webiny.com>
Date: Mon, 20 Jan 2025 16:25:52 +0100
Subject: [PATCH 14/14] fix: rename `preventOutsideDismiss` to `dismissible`

---
 packages/ui/src/Dialog/Dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/Dialog/Dialog.tsx b/packages/ui/src/Dialog/Dialog.tsx
index 73477035164..49aa7525633 100644
--- a/packages/ui/src/Dialog/Dialog.tsx
+++ b/packages/ui/src/Dialog/Dialog.tsx
@@ -113,7 +113,7 @@ export const Dialog = ({
         <AdminUiDialog
             open={open}
             bodyPadding={false}
-            preventOutsideDismiss={preventOutsideDismiss}
+            dismissible={preventOutsideDismiss === true ? false : true}
             showCloseButton={showCloseButton}
             onOpenChange={opened => {
                 if (!opened && onClose) {