@simplybusiness/mobius 10.2.0 → 10.3.0

package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import type { RefAttributes, ReactNode } from "react";
 import "./Breadcrumbs.css";
-export type BreadcrumbsElementType = HTMLUListElement;
+export type BreadcrumbsElementType = HTMLElement;
 export interface BreadcrumbsProps extends RefAttributes<BreadcrumbsElementType> {
     /** Custom class name for setting specific CSS */
     className?: string;

package/dist/types/components/Grid/Grid.d.ts

@@ -25,7 +25,7 @@ export interface GridProps extends RefAttributes<GridElementType>, DOMProps {
     style?: React.CSSProperties;
 }
 declare const Grid: {
-    ({ ref: _ref, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Grid };

package/dist/types/components/Grid/Item.d.ts

@@ -25,7 +25,7 @@ export interface GridItemProps extends RefAttributes<GridItemElementType>, DOMPr
 export declare const getBreakpointMap: (config: Partial<Record<SizeType, number>>) => Record<string, number | undefined>;
 export declare const DEFAULT_SPAN = 12;
 declare const GridItem: {
-    ({ ref: _ref, ...props }: GridItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, ...props }: GridItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { GridItem };

package/dist/types/components/List/List.d.ts

@@ -10,7 +10,7 @@ export interface ListProps extends DOMProps {
     liststyletype?: ListStyleType;
     icon?: ReactNode;
     className?: string;
-    ref?: Ref<HTMLOListElement & HTMLUListElement>;
+    ref?: Ref<HTMLElement>;
 }
 declare const List: {
     ({ ref, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Logo/Logo.d.ts

@@ -8,6 +8,14 @@ export interface LogoProps extends DOMProps, RefAttributes<LogoElementType> {
     width?: string;
     /** Custom height. When defined along with width, it will scale proportionally */
     height?: string;
+    /** ARIA role for the SVG element */
+    role?: React.AriaRole;
+    /** Accessible label for the logo */
+    "aria-label"?: string;
+    /** Whether the logo is hidden from screen readers */
+    "aria-hidden"?: boolean | "true" | "false";
+    /** ID of an element that labels the logo */
+    "aria-labelledby"?: string;
 }
 export declare const Logo: {
     ({ ref, ...props }: LogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Modal/types.d.ts

@@ -13,4 +13,6 @@ export interface ModalProps extends RefAttributes<ModalElementType> {
 export type ModalContextProps = {
     onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;
     closeLabel: string | undefined;
+    titleId: string | undefined;
+    setTitleId: (id: string) => void;
 };

package/dist/types/components/Modal/useModal.d.ts

@@ -1,4 +1,6 @@
 export declare const useModal: () => {
     onClose: (event?: import("react").SyntheticEvent<HTMLElement, Event>) => void;
     closeLabel: string | undefined;
+    titleId: string | undefined;
+    setTitleId: (id: string) => void;
 };

package/dist/types/components/SVG/SVG.d.ts

@@ -4,6 +4,10 @@ export interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {
     children: React.ReactElement<React.SVGProps<SVGSVGElement>>;
     className?: string;
     style?: React.CSSProperties;
+    role?: React.AriaRole;
+    "aria-label"?: string;
+    "aria-hidden"?: boolean | "true" | "false";
+    "aria-labelledby"?: string;
 }
 declare const SVG: {
     ({ ref, ...props }: SVGProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Segment/Segment.d.ts

@@ -1,7 +1,8 @@
-import type { ReactNode } from "react";
+import type { ReactNode, RefAttributes } from "react";
 import type { DOMProps } from "../../types/dom";
 import "./Segment.css";
-export interface SegmentProps extends DOMProps {
+export type SegmentElementType = HTMLDivElement;
+export interface SegmentProps extends DOMProps, RefAttributes<SegmentElementType> {
     className?: string;
     heading?: string;
     /** Background colour for Segment */
@@ -11,7 +12,7 @@ export interface SegmentProps extends DOMProps {
     children?: ReactNode;
 }
 declare const Segment: {
-    (props: SegmentProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, ...props }: SegmentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Segment };

package/dist/types/components/Table/HeaderCell.d.ts

@@ -4,10 +4,11 @@ export interface HeaderCellProps extends RefAttributes<HTMLTableCellElement> {
     className?: string;
     colSpan?: number;
     rowSpan?: number;
+    scope?: "col" | "row" | "colgroup" | "rowgroup";
 }
 export type HeaderCellRef = Ref<HTMLTableCellElement>;
 declare const HeaderCell: {
-    ({ ref, ...props }: HeaderCellProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, scope, ...props }: HeaderCellProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { HeaderCell };

package/dist/types/components/Text/Text.d.ts

@@ -17,7 +17,7 @@ export interface TextProps extends DOMProps, RefAttributes<TextElementType> {
     style?: React.CSSProperties;
 }
 declare const Text: {
-    ({ ref, elementType: Component, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, elementType, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Text };

package/dist/types/utils/filterUnsetValues.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Drops `undefined`, `null`, and empty string entries.
+ * Use when merging style objects so “unset” values from `style` do not override
+ * computed values from component props.
+ */
+export declare const filterUnsetValues: (props: Record<string, unknown>) => Record<string, unknown>;

package/dist/types/utils/index.d.ts

@@ -2,6 +2,7 @@ export * from "./changeCSS";
 export * from "./delay";
 export * from "./excludeControls";
 export * from "./filterUndefinedProps";
+export * from "./filterUnsetValues";
 export * from "./getSpacingValue";
 export * from "./mergeRefs";
 export * from "./polyfill-tests";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -68,8 +68,8 @@
     "@eslint/js": "^9.39.3",
     "@react-types/progress": "^3.5.18",
     "@simplybusiness/build-scripts": "^3.0.0",
-    "@simplybusiness/eslint-config": "^2.0.4",
-    "@simplybusiness/eslint-plugin": "^1.3.0",
+    "@simplybusiness/eslint-config": "^2.0.5",
+    "@simplybusiness/eslint-plugin": "^1.3.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -98,7 +98,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "@loadable/component": "^5.16.7",
-    "@simplybusiness/icons": "^5.0.3",
+    "@simplybusiness/icons": "^5.0.4",
     "@simplybusiness/mobius-hooks": "^0.1.1",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",

package/src/components/Accordion/Accordion.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { AccordionLinkElementType } from "./AccordionLink";
@@ -408,4 +409,10 @@ describe("Accordion", () => {
       expect(screen.queryByText(customShow)).not.toBeInTheDocument();
     });
   });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Accordion ref={ref}>Text</Accordion>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
 });

package/src/components/Box/Box.test.tsx

@@ -1,4 +1,6 @@
+import { createRef } from "react";
 import { render } from "@testing-library/react";
+import type { CSSProperties } from "react";
 import { Box } from ".";
 
 const CLASS_NAME = "mobius-box";
@@ -216,5 +218,27 @@ describe("Box", () => {
 
       expect(elementStyles.padding).toEqual("100px");
     });
+
+    it("does not remove prop padding when style padding is undefined", () => {
+      const { container } = render(
+        <Box padding={50} style={{ padding: undefined } as CSSProperties} />,
+      );
+
+      expect(container.firstChild).toHaveStyle({ padding: "50px" });
+    });
+
+    it("does not remove prop padding when style padding is an empty string", () => {
+      const { container } = render(
+        <Box padding={50} style={{ padding: "" }} />,
+      );
+
+      expect(container.firstChild).toHaveStyle({ padding: "50px" });
+    });
+  });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Box ref={ref}>Text</Box>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
   });
 });

package/src/components/Box/Box.tsx

@@ -1,6 +1,10 @@
 import classNames from "classnames/dedupe";
 import type { BoxProps } from "./types";
-import { getSpacingValue, filterUndefinedProps } from "../../utils";
+import {
+  filterUndefinedProps,
+  filterUnsetValues,
+  getSpacingValue,
+} from "../../utils";
 import "./Box.css";
 
 const Box = ({ ref, ...props }: BoxProps) => {
@@ -31,7 +35,7 @@ const Box = ({ ref, ...props }: BoxProps) => {
 
   const classes = classNames("mobius", "mobius-box", otherProps.className);
 
-  const styleProps = filterUndefinedProps({
+  const fromProps = filterUndefinedProps({
     padding: getSpacingValue(padding),
     paddingInline: getSpacingValue(paddingInline || paddingX),
     paddingBlock: getSpacingValue(paddingBlock || paddingY),
@@ -45,7 +49,11 @@ const Box = ({ ref, ...props }: BoxProps) => {
     maxHeight,
     width,
     height,
-    ...style,
+  });
+
+  const styleProps = filterUndefinedProps({
+    ...fromProps,
+    ...(style ? filterUnsetValues(style as Record<string, unknown>) : {}),
   });
 
   return (

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { Breadcrumbs, BreadcrumbItem } from ".";
 import { Link } from "../Link";
@@ -93,4 +94,133 @@ describe("Breadcrumbs", () => {
       );
     });
   });
+
+  describe("semantic HTML and ARIA", () => {
+    it("renders a <nav> element with aria-label", () => {
+      render(
+        <Breadcrumbs data-testid="nav">
+          <BreadcrumbItem>Home</BreadcrumbItem>
+          <BreadcrumbItem>Current</BreadcrumbItem>
+        </Breadcrumbs>,
+      );
+      const nav = screen.getByTestId("nav");
+      expect(nav.nodeName).toBe("NAV");
+      expect(nav).toHaveAttribute("aria-label", "Breadcrumbs");
+    });
+
+    it("supports custom aria-label on the nav element", () => {
+      render(
+        <Breadcrumbs data-testid="nav" aria-label="Page navigation">
+          <BreadcrumbItem>Home</BreadcrumbItem>
+          <BreadcrumbItem>Current</BreadcrumbItem>
+        </Breadcrumbs>,
+      );
+      expect(screen.getByTestId("nav")).toHaveAttribute(
+        "aria-label",
+        "Page navigation",
+      );
+    });
+
+    it("contains a <ul> list inside the nav", () => {
+      render(
+        <Breadcrumbs data-testid="nav">
+          <BreadcrumbItem>Home</BreadcrumbItem>
+          <BreadcrumbItem>Current</BreadcrumbItem>
+        </Breadcrumbs>,
+      );
+      expect(screen.getByRole("list")).toBeInTheDocument();
+    });
+
+    it("renders each BreadcrumbItem as a <li>", () => {
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem>Home</BreadcrumbItem>
+          <BreadcrumbItem>About</BreadcrumbItem>
+          <BreadcrumbItem>Current</BreadcrumbItem>
+        </Breadcrumbs>,
+      );
+      expect(screen.getAllByRole("listitem")).toHaveLength(3);
+    });
+
+    it("sets aria-current on the last (current) item", () => {
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem>
+            <Link href="/home">Home</Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem>Current page</BreadcrumbItem>
+        </Breadcrumbs>,
+      );
+      // The last item gets isCurrent=true automatically, which sets aria-current="page"
+      const currentItem = screen.getByText("Current page");
+      expect(currentItem).toHaveAttribute("aria-current", "page");
+    });
+
+    it("does not set aria-current on non-current items", () => {
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem>
+            <Link href="/home" data-testid="home-link">
+              Home
+            </Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem>Current page</BreadcrumbItem>
+        </Breadcrumbs>,
+      );
+      expect(screen.getByTestId("home-link")).not.toHaveAttribute(
+        "aria-current",
+      );
+    });
+
+    it("sets aria-disabled on a disabled item", () => {
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem isDisabled>Disabled item</BreadcrumbItem>
+          <BreadcrumbItem>Current</BreadcrumbItem>
+        </Breadcrumbs>,
+      );
+      expect(screen.getByText("Disabled item")).toHaveAttribute(
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    it("sets aria-disabled on the current (last) item", () => {
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem>
+            <Link href="/home">Home</Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem>Current page</BreadcrumbItem>
+        </Breadcrumbs>,
+      );
+      // isCurrent=true causes aria-disabled to be true (current page is not navigable)
+      expect(screen.getByText("Current page")).toHaveAttribute(
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    it("hides the separator from assistive technology", () => {
+      render(
+        <Breadcrumbs>
+          <BreadcrumbItem>
+            <Link href="/home">Home</Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem>Current</BreadcrumbItem>
+        </Breadcrumbs>,
+      );
+      expect(screen.getByText(">")).toHaveAttribute("aria-hidden", "true");
+    });
+  });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLUListElement>();
+    render(
+      <Breadcrumbs ref={ref}>
+        <BreadcrumbItem>Home</BreadcrumbItem>
+      </Breadcrumbs>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+  });
 });

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -5,7 +5,7 @@ import { Children, cloneElement } from "react";
 import classNames from "classnames/dedupe";
 import "./Breadcrumbs.css";
 
-export type BreadcrumbsElementType = HTMLUListElement;
+export type BreadcrumbsElementType = HTMLElement;
 
 export interface BreadcrumbsProps extends RefAttributes<BreadcrumbsElementType> {
   /** Custom class name for setting specific CSS */

package/src/components/Button/Button.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { chevronDown } from "@simplybusiness/icons";
@@ -74,6 +75,61 @@ describe("Button", () => {
     });
   });
 
+  describe("keyboard interactions", () => {
+    it("activates on Enter key", async () => {
+      const onPress = vi.fn();
+      render(<Button onPress={onPress}>Click</Button>);
+      await userEvent.tab();
+      await userEvent.keyboard("[Enter]");
+      expect(onPress).toHaveBeenCalled();
+    });
+
+    it("activates on Space key", async () => {
+      const onPress = vi.fn();
+      render(<Button onPress={onPress}>Click</Button>);
+      await userEvent.tab();
+      await userEvent.keyboard("[Space]");
+      expect(onPress).toHaveBeenCalled();
+    });
+  });
+
+  describe("when disabled", () => {
+    it("does not fire onPress", async () => {
+      const onPress = vi.fn();
+      render(
+        <Button onPress={onPress} isDisabled>
+          Click
+        </Button>,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it("does not fire onClick", async () => {
+      const onClick = vi.fn();
+      render(
+        <Button onClick={onClick} isDisabled>
+          Click
+        </Button>,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it("has aria-disabled attribute", () => {
+      render(<Button isDisabled>Click</Button>);
+      expect(screen.getByRole("button")).toHaveAttribute(
+        "aria-disabled",
+        "true",
+      );
+    });
+
+    it("is not focusable", () => {
+      render(<Button isDisabled>Click</Button>);
+      expect(screen.getByRole("button")).toHaveAttribute("tabIndex", "-1");
+    });
+  });
+
   describe("uses correct class names", () => {
     it("uses Mobius class", () => {
       render(<Button />);
@@ -106,5 +162,26 @@ describe("Button", () => {
 
       expect(button).toHaveClass("--variant-link");
     });
+
+    it.each(["sm", "md", "lg"] as const)("applies --size-%s class", size => {
+      render(<Button size={size} />);
+      expect(screen.getByRole("button")).toHaveClass(`--size-${size}`);
+    });
+
+    it("applies --is-loading class when isLoading is true", () => {
+      render(<Button isLoading>Loading</Button>);
+      expect(screen.getByRole("button")).toHaveClass("--is-loading");
+    });
+
+    it("applies --is-success class when isSuccess is true", () => {
+      render(<Button isSuccess>Done</Button>);
+      expect(screen.getByRole("button")).toHaveClass("--is-success");
+    });
+  });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Text</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
   });
 });

package/src/components/Container/Container.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { Container } from ".";
 
@@ -51,5 +52,23 @@ describe("Container", () => {
       expect(screen.getByTestId("test")).toHaveClass("my-class");
       expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
     });
+
+    it.each(["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] as const)(
+      "applies --is-%s class",
+      size => {
+        render(
+          <Container size={size} data-testid="test">
+            Sample text
+          </Container>,
+        );
+        expect(screen.getByTestId("test")).toHaveClass(`--is-${size}`);
+      },
+    );
+  });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Container ref={ref}>Text</Container>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
   });
 });

package/src/components/Divider/Divider.test.tsx

@@ -30,4 +30,22 @@ describe("Divider", () => {
       expect(screen.getByRole("separator")).toHaveClass(CLASS_NAME);
     });
   });
+
+  describe("ARIA attributes", () => {
+    it("has aria-orientation='horizontal' by default", () => {
+      render(<Divider />);
+      expect(screen.getByRole("separator")).toHaveAttribute(
+        "aria-orientation",
+        "horizontal",
+      );
+    });
+
+    it("supports aria-orientation='vertical'", () => {
+      render(<Divider aria-orientation="vertical" />);
+      expect(screen.getByRole("separator")).toHaveAttribute(
+        "aria-orientation",
+        "vertical",
+      );
+    });
+  });
 });

package/src/components/Flex/Flex.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { Flex } from ".";
 
@@ -73,4 +74,10 @@ describe("Test for Flex", () => {
       expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
     });
   });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Flex ref={ref}>Text</Flex>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
 });

package/src/components/Grid/Grid.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { Grid } from ".";
 
@@ -14,6 +15,35 @@ describe("Test for Grid", () => {
     expect(view).toBeTruthy();
   });
 
+  it("forwards ref to the grid container", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <Grid ref={ref}>
+        <Grid.Item>Item</Grid.Item>
+      </Grid>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it("forwards ref to the grid item", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <Grid>
+        <Grid.Item ref={ref}>Item</Grid.Item>
+      </Grid>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it("uses mobius class on Grid.Item", () => {
+    render(
+      <Grid>
+        <Grid.Item>Item</Grid.Item>
+      </Grid>,
+    );
+    expect(screen.getByText("Item")).toHaveClass("mobius");
+  });
+
   describe("given the span prop is an array", () => {
     it("should render default as fallback", () => {
       const span = [1, 2, 3];

package/src/components/Grid/Grid.tsx

@@ -40,7 +40,7 @@ export interface GridProps extends RefAttributes<GridElementType>, DOMProps {
   style?: React.CSSProperties;
 }
 
-const Grid = ({ ref: _ref, ...props }: GridProps) => {
+const Grid = ({ ref, ...props }: GridProps) => {
   const {
     columns = 12,
     gap,
@@ -70,7 +70,7 @@ const Grid = ({ ref: _ref, ...props }: GridProps) => {
     ...style,
   });
 
-  return <div style={styles} className={classes} {...rest} />;
+  return <div ref={ref} style={styles} className={classes} {...rest} />;
 };
 
 Grid.displayName = "Grid";

package/src/components/Grid/Item.tsx

@@ -43,7 +43,7 @@ export const getBreakpointMap = (config: Partial<Record<SizeType, number>>) =>
 
 export const DEFAULT_SPAN = 12;
 
-const GridItem = ({ ref: _ref, ...props }: GridItemProps) => {
+const GridItem = ({ ref, ...props }: GridItemProps) => {
   const {
     breakpoint: { size: breakpointSize },
   } = useBreakpoint();
@@ -69,7 +69,7 @@ const GridItem = ({ ref: _ref, ...props }: GridItemProps) => {
     xxl,
   });
   const [responsiveSpan, setResponsiveSpan] = useState<number | undefined>();
-  const classes = classNames("mobius-grid__item", className);
+  const classes = classNames("mobius", "mobius-grid__item", className);
 
   useEffect(() => {
     setResponsiveSpan(breakpointMap[breakpointSize]);
@@ -81,7 +81,7 @@ const GridItem = ({ ref: _ref, ...props }: GridItemProps) => {
     justifySelf,
   };
 
-  return <div style={{ ...styles }} className={classes} {...rest} />;
+  return <div ref={ref} style={{ ...styles }} className={classes} {...rest} />;
 };
 
 GridItem.displayName = "GridItem";