fix(ui): forward HTML attributes on Box component

Extended BoxProps to include React.HTMLAttributes<HTMLDivElement>
and spread restProps onto the rendered element. This allows
standard HTML attributes like onClick, aria-*, data-*, etc. to
be passed through to the underlying div.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/cute-parts-smash.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed Box component to forward HTML attributes to the underlying div element.
+
+**Affected components:** Box

packages/ui/report.api.md

@@ -282,7 +282,11 @@ export type BoxOwnProps = {
 };
 
 // @public (undocumented)
-export interface BoxProps extends SpaceProps, BoxOwnProps, BoxUtilityProps {}
+export interface BoxProps
+  extends SpaceProps,
+    BoxOwnProps,
+    BoxUtilityProps,
+    React.HTMLAttributes<HTMLDivElement> {}
 
 // @public (undocumented)
 export type BoxUtilityProps = {

packages/ui/src/components/Box/Box.tsx

@@ -21,7 +21,7 @@ import { BoxDefinition } from './definition';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
-  const { ownProps, dataAttributes, utilityStyle } = useDefinition(
+  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(
     BoxDefinition,
     props,
   );
@@ -34,6 +34,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
       className: classes.root,
       style: { ...ownProps.style, ...utilityStyle },
       ...dataAttributes,
+      ...restProps,
     },
     surfaceChildren,
   );

packages/ui/src/components/Box/types.ts

@@ -41,4 +41,8 @@ export type BoxUtilityProps = {
 };
 
 /** @public */
-export interface BoxProps extends SpaceProps, BoxOwnProps, BoxUtilityProps {}
+export interface BoxProps
+  extends SpaceProps,
+    BoxOwnProps,
+    BoxUtilityProps,
+    React.HTMLAttributes<HTMLDivElement> {}