From 961fa8b7e0ecc298632881c48b09fa9272b1adf3 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 12 Sep 2024 17:51:36 +0700
Subject: [PATCH] check container first

---
 package.json                                        |  4 ++--
 packages/pigment-css-react/src/Grid.jsx             |  2 +-
 packages/pigment-css-react/tests/Grid/Grid.test.js  | 13 +++++++++++++
 .../tests/Grid/fixtures/Grid.output.js              |  2 +-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 26089de2..255db5ee 100644
--- a/package.json
+++ b/package.json
@@ -120,9 +120,9 @@
     "unist-util-visit": "^2.0.3",
     "yargs": "^17.7.2"
   },
-  "packageManager": "pnpm@9.7.1",
+  "packageManager": "pnpm@9.10.0",
   "engines": {
-    "pnpm": "9.7.1"
+    "pnpm": "9.10.0"
   },
   "resolutions": {
     "@babel/core": "^7.24.4",
diff --git a/packages/pigment-css-react/src/Grid.jsx b/packages/pigment-css-react/src/Grid.jsx
index fef1c22c..752ffeea 100644
--- a/packages/pigment-css-react/src/Grid.jsx
+++ b/packages/pigment-css-react/src/Grid.jsx
@@ -209,7 +209,7 @@ const Grid = React.forwardRef(function Grid(
       ownerState={ownerState}
     >
       {React.Children.map(children, (child) => {
-        if (React.isValidElement(child) && isGridComponent(child)) {
+        if (container && React.isValidElement(child) && isGridComponent(child)) {
           return React.cloneElement(child, {
             unstable_parent_columns: selfColumns,
             unstable_parent_column_spacing: selfColumnSpacing,
diff --git a/packages/pigment-css-react/tests/Grid/Grid.test.js b/packages/pigment-css-react/tests/Grid/Grid.test.js
index db2f7cbb..c8b7d81b 100644
--- a/packages/pigment-css-react/tests/Grid/Grid.test.js
+++ b/packages/pigment-css-react/tests/Grid/Grid.test.js
@@ -36,4 +36,17 @@ describe('Pigment CSS - Grid', () => {
     expect(getByTestId('grid-container')).not.to.equal(null);
     expect(getByTestId('grid-item')).not.to.equal(null);
   });
+
+  it('should not pass down unstable props for non container Grid', () => {
+    function Child({ unstable_parent_columns }) {
+      return <div>{unstable_parent_columns}</div>;
+    }
+    Child.muiName = 'Grid';
+    const { queryByText } = render(
+      <GridOutput>
+        <Child />
+      </GridOutput>,
+    );
+    expect(queryByText('12')).to.equal(null);
+  });
 });
diff --git a/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.js b/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.js
index 31de9307..985c3a61 100644
--- a/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.js
+++ b/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.js
@@ -305,7 +305,7 @@ const Grid = React.forwardRef(function Grid(
       ownerState={ownerState}
     >
       {React.Children.map(children, (child) => {
-        if (React.isValidElement(child) && isGridComponent(child)) {
+        if (container && React.isValidElement(child) && isGridComponent(child)) {
           return React.cloneElement(child, {
             unstable_parent_columns: selfColumns,
             unstable_parent_column_spacing: selfColumnSpacing,