From b52884dfeb5a30045e77a2b663159590c9fd7201 Mon Sep 17 00:00:00 2001
From: Tasso <tasso.evangelista@rocket.chat>
Date: Tue, 22 Oct 2024 14:53:39 -0300
Subject: [PATCH] Add `StylingBox` component

---
 .../src/components/Box/StylingBox.tsx         | 34 +++++++++++++++++++
 packages/fuselage/src/components/Box/index.ts |  2 ++
 .../fuselage/src/components/Box/index.tsx     |  1 -
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 packages/fuselage/src/components/Box/StylingBox.tsx
 create mode 100644 packages/fuselage/src/components/Box/index.ts
 delete mode 100644 packages/fuselage/src/components/Box/index.tsx

diff --git a/packages/fuselage/src/components/Box/StylingBox.tsx b/packages/fuselage/src/components/Box/StylingBox.tsx
new file mode 100644
index 0000000000..b18fd4bb4b
--- /dev/null
+++ b/packages/fuselage/src/components/Box/StylingBox.tsx
@@ -0,0 +1,34 @@
+import type { cssFn } from '@rocket.chat/css-in-js';
+import { cloneElement } from 'react';
+import type { ReactElement } from 'react';
+
+import { useArrayLikeClassNameProp } from '../../hooks/useArrayLikeClassNameProp';
+import type { Falsy } from '../../types/Falsy';
+import type { StylingProps } from './stylingProps';
+import { useStylingProps } from './useStylingProps';
+
+export type StylingBoxProps = {
+  children: ReactElement<{ className?: string }>;
+  className?: string | cssFn | (string | cssFn | Falsy)[];
+} & Partial<StylingProps>;
+
+/**
+ * Merges its `StylingProps` props into a `className` prop passed to a child element.
+ *
+ * This is intended to be used as a wrapper for components that accept styling props but don't need the weight of the
+ * `Box` component prop handling internally.
+ */
+export const StylingBox = ({ children, ...props }: StylingBoxProps) => {
+  const propsWithStringClassName = useArrayLikeClassNameProp(props);
+  propsWithStringClassName.className = [
+    children.props.className,
+    propsWithStringClassName.className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  const propsWithoutStylingProps = useStylingProps(propsWithStringClassName);
+
+  return cloneElement(children, propsWithoutStylingProps);
+};
+
+export default StylingBox;
diff --git a/packages/fuselage/src/components/Box/index.ts b/packages/fuselage/src/components/Box/index.ts
new file mode 100644
index 0000000000..b2f4651178
--- /dev/null
+++ b/packages/fuselage/src/components/Box/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Box';
+export { default as StylingBox, type StylingBoxProps } from './StylingBox';
diff --git a/packages/fuselage/src/components/Box/index.tsx b/packages/fuselage/src/components/Box/index.tsx
deleted file mode 100644
index a3e93ac535..0000000000
--- a/packages/fuselage/src/components/Box/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Box';