@astral/ui 1.48.0 → 1.49.0

package/Grid/Grid.d.ts

@@ -1,3 +1,8 @@
-/// <reference types="react" />
-import { GridProps } from './types';
-export declare const Grid: ({ container, templateColumns, templateRows, templateAreas, columnSpacing, rowSpacing, spacing, autoColumns, autoRows, autoFlow, column, row, area, component, children, ...props }: GridProps) => JSX.Element;
+import { ReactNode } from 'react';
+import { GridContainerProps, GridElementsProps } from './types';
+export type GridProps = GridContainerProps & GridElementsProps & {
+    children?: ReactNode;
+};
+export declare const Grid: import("react").ForwardRefExoticComponent<GridContainerProps & GridElementsProps & {
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/Grid/Grid.js

@@ -13,9 +13,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styled_1 = require("./styled");
-const Grid = (_a) => {
+exports.Grid = (0, react_1.forwardRef)((_a, ref) => {
     var { container = false, templateColumns, templateRows, templateAreas, columnSpacing, rowSpacing, spacing, autoColumns, autoRows, autoFlow, column, row, area, component = 'div', children } = _a, props = __rest(_a, ["container", "templateColumns", "templateRows", "templateAreas", "columnSpacing", "rowSpacing", "spacing", "autoColumns", "autoRows", "autoFlow", "column", "row", "area", "component", "children"]);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledGrid, Object.assign({ container: container, gridTemplateColumns: templateColumns, gridTemplateRows: templateRows, gridTemplateAreas: templateAreas, columnGap: columnSpacing, rowGap: rowSpacing, gap: spacing, gridAutoColumns: autoColumns, gridAutoRows: autoRows, gridAutoFlow: autoFlow, gridColumn: column, gridRow: row, gridArea: area, component: component }, props, { children: children })));
-};
-exports.Grid = Grid;
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledGrid, Object.assign({ ref: ref, container: container, gridTemplateColumns: templateColumns, gridTemplateRows: templateRows, gridTemplateAreas: templateAreas, columnGap: columnSpacing, rowGap: rowSpacing, gap: spacing, gridAutoColumns: autoColumns, gridAutoRows: autoRows, gridAutoFlow: autoFlow, gridColumn: column, gridRow: row, gridArea: area, component: component }, props, { children: children })));
+});

package/Grid/Grid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/Grid/Grid.test.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tests_1 = require("@astral/tests");
+const vitest_1 = require("vitest");
+const react_1 = require("react");
+const Grid_1 = require("./Grid");
+(0, vitest_1.describe)('Grid', () => {
+    (0, vitest_1.it)('Prop:ref: is present', () => {
+        const resultRef = { current: null };
+        const GridWithRef = () => {
+            const ref = (0, react_1.useRef)(null);
+            (0, react_1.useEffect)(() => {
+                resultRef.current = ref.current;
+            }, []);
+            return (0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({ ref: ref }, { children: "Grid" }));
+        };
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(GridWithRef, {}));
+        (0, vitest_1.expect)(resultRef === null || resultRef === void 0 ? void 0 : resultRef.current).not.toBeNull();
+    });
+});

package/Grid/types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ElementType, ReactNode } from 'react';
+import { CSSProperties, ElementType } from 'react';
 import { Breakpoint } from '@mui/material/styles';
 type StyleCSSType<Type extends keyof CSSProperties> = CSSProperties[Type] | Partial<Record<Breakpoint, CSSProperties[Type]>>;
 export type GridContainerProps = {
@@ -25,7 +25,4 @@ export type GridElementsProps = {
     justifySelf?: StyleCSSType<'justifySelf'>;
     alignSelf?: StyleCSSType<'alignSelf'>;
 };
-export type GridProps = GridContainerProps & GridElementsProps & {
-    children?: ReactNode;
-};
 export {};

package/esm/Grid/Grid.d.ts

@@ -1,3 +1,8 @@
-/// <reference types="react" />
-import { GridProps } from './types';
-export declare const Grid: ({ container, templateColumns, templateRows, templateAreas, columnSpacing, rowSpacing, spacing, autoColumns, autoRows, autoFlow, column, row, area, component, children, ...props }: GridProps) => JSX.Element;
+import { ReactNode } from 'react';
+import { GridContainerProps, GridElementsProps } from './types';
+export type GridProps = GridContainerProps & GridElementsProps & {
+    children?: ReactNode;
+};
+export declare const Grid: import("react").ForwardRefExoticComponent<GridContainerProps & GridElementsProps & {
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/Grid/Grid.js

@@ -10,8 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { StyledGrid } from './styled';
-export const Grid = (_a) => {
+export const Grid = forwardRef((_a, ref) => {
     var { container = false, templateColumns, templateRows, templateAreas, columnSpacing, rowSpacing, spacing, autoColumns, autoRows, autoFlow, column, row, area, component = 'div', children } = _a, props = __rest(_a, ["container", "templateColumns", "templateRows", "templateAreas", "columnSpacing", "rowSpacing", "spacing", "autoColumns", "autoRows", "autoFlow", "column", "row", "area", "component", "children"]);
-    return (_jsx(StyledGrid, Object.assign({ container: container, gridTemplateColumns: templateColumns, gridTemplateRows: templateRows, gridTemplateAreas: templateAreas, columnGap: columnSpacing, rowGap: rowSpacing, gap: spacing, gridAutoColumns: autoColumns, gridAutoRows: autoRows, gridAutoFlow: autoFlow, gridColumn: column, gridRow: row, gridArea: area, component: component }, props, { children: children })));
-};
+    return (_jsx(StyledGrid, Object.assign({ ref: ref, container: container, gridTemplateColumns: templateColumns, gridTemplateRows: templateRows, gridTemplateAreas: templateAreas, columnGap: columnSpacing, rowGap: rowSpacing, gap: spacing, gridAutoColumns: autoColumns, gridAutoRows: autoRows, gridAutoFlow: autoFlow, gridColumn: column, gridRow: row, gridArea: area, component: component }, props, { children: children })));
+});

package/esm/Grid/Grid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/Grid/Grid.test.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithTheme } from '@astral/tests';
+import { describe, expect, it } from 'vitest';
+import { useEffect, useRef } from 'react';
+import { Grid } from './Grid';
+describe('Grid', () => {
+    it('Prop:ref: is present', () => {
+        const resultRef = { current: null };
+        const GridWithRef = () => {
+            const ref = useRef(null);
+            useEffect(() => {
+                resultRef.current = ref.current;
+            }, []);
+            return _jsx(Grid, Object.assign({ ref: ref }, { children: "Grid" }));
+        };
+        renderWithTheme(_jsx(GridWithRef, {}));
+        expect(resultRef === null || resultRef === void 0 ? void 0 : resultRef.current).not.toBeNull();
+    });
+});

package/esm/Grid/types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ElementType, ReactNode } from 'react';
+import { CSSProperties, ElementType } from 'react';
 import { Breakpoint } from '@mui/material/styles';
 type StyleCSSType<Type extends keyof CSSProperties> = CSSProperties[Type] | Partial<Record<Breakpoint, CSSProperties[Type]>>;
 export type GridContainerProps = {
@@ -25,7 +25,4 @@ export type GridElementsProps = {
     justifySelf?: StyleCSSType<'justifySelf'>;
     alignSelf?: StyleCSSType<'alignSelf'>;
 };
-export type GridProps = GridContainerProps & GridElementsProps & {
-    children?: ReactNode;
-};
 export {};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@astral/ui",
-  "version": "1.48.0",
+  "version": "1.49.0",
   "browser": "./esm/index.js",
   "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^1.48.0",
+    "@astral/icons": "^1.49.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",