Merge pull request #357 from aversini/feat-remove-private-Modal-depen…

…dency-on-ButtonIcon

feat: remove private Modal dependency on ButtonIcon

packages/ui-components/src/components/Panel/Panel.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-import { IconClose } from "../";
+import { ButtonIcon, IconClose } from "../";
 import {
 	Modal,
 	ModalClose,
@@ -44,9 +44,13 @@ export const Panel = ({
 		<Modal open={open} onOpenChange={onOpenChange}>
 			<ModalContent className={panelClassName.main}>
 				<ModalHeading className={panelClassName.header}>
-					<ModalClose>
-						<IconClose />
-					</ModalClose>
+					<ModalClose
+						trigger={
+							<ButtonIcon noBorder label="Close">
+								<IconClose />
+							</ButtonIcon>
+						}
+					></ModalClose>
 					<div>{title}</div>
 				</ModalHeading>
 

packages/ui-components/src/components/private/Modal/Modal.tsx

@@ -7,7 +7,7 @@ import {
 import clsx from "clsx";
 import * as React from "react";
 
-import { ButtonIcon, useUniqueId } from "../..";
+import { useUniqueId } from "../..";
 import { ModalContext } from "./ModalContext";
 import { useModal, useModalContext } from "./ModalHooks";
 import type { ModalOptions } from "./ModalTypes";
@@ -106,22 +106,19 @@ export const ModalDescription = React.forwardRef<
 export const ModalClose = React.forwardRef<
 	HTMLButtonElement,
 	{
-		children?: React.ReactNode;
+		trigger: React.ReactElement;
 	}
 >(function ModalClose(props, ref) {
 	const { setOpen } = useModalContext();
-	const { children, ...rest } = props;
+	const { trigger, ...rest } = props;
 	const handleClose = React.useCallback(() => setOpen(false), [setOpen]);
 	return (
-		<ButtonIcon
-			noBorder
-			label="Close"
-			type="button"
-			{...rest}
-			ref={ref}
-			onClick={handleClose}
-		>
-			{children}
-		</ButtonIcon>
+		<>
+			{React.cloneElement(trigger, {
+				ref,
+				onClick: handleClose,
+				...rest,
+			})}
+		</>
 	);
 });