From 00935235854738b155d0769a30f6ca76652f9626 Mon Sep 17 00:00:00 2001
From: donskov <donskovdmitriyv@gmail.com>
Date: Tue, 27 Feb 2024 14:32:05 +0200
Subject: [PATCH] fix(react-components): replace "shouldForwardProp" for Box
 and Typography

---
 packages/react-components/src/Backdrop/backdrop.tsx         | 6 +++++-
 packages/react-components/src/Box/box.tsx                   | 5 +++--
 .../react-components/src/LinearProgress/linear_progress.tsx | 1 +
 packages/react-components/src/Skeleton/skeleton.tsx         | 4 +++-
 packages/react-components/src/Typography/typography.tsx     | 5 +++--
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/src/Backdrop/backdrop.tsx b/packages/react-components/src/Backdrop/backdrop.tsx
index a12df1fa..f5419d62 100644
--- a/packages/react-components/src/Backdrop/backdrop.tsx
+++ b/packages/react-components/src/Backdrop/backdrop.tsx
@@ -33,10 +33,14 @@ export type BackdropProps = BackdropOwnProps
  *
  */
 
+const reactPropsRegex = /^(as|open|invisible|transitionDuration|variant)$/;
+
 /**
  * Styles.
  */
-const BackdropRoot = styled(Box)<Required<Pick<BackdropOwnProps, 'invisible'>>>((props) => ({
+const BackdropRoot = styled(Box, {
+  shouldForwardProp: (prop) => !reactPropsRegex.test(prop),
+})<Required<Pick<BackdropOwnProps, 'invisible'>>>((props) => ({
   zIndex: -1,
   position: 'fixed',
   right: 0,
diff --git a/packages/react-components/src/Box/box.tsx b/packages/react-components/src/Box/box.tsx
index f9f61786..901e16b7 100644
--- a/packages/react-components/src/Box/box.tsx
+++ b/packages/react-components/src/Box/box.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ColorType } from '../styles';
 
@@ -34,11 +33,13 @@ export type BoxProps<
  *
  */
 
+const reactPropsRegex = /^(as|background|borderColor|borderWidth|borderStyle|borderPosition|borderRadius)$/;
+
 /**
  * Styles.
  */
 const BoxRoot = styled('div', {
-  shouldForwardProp: (prop) => isPropValid(prop),
+  shouldForwardProp: (prop) => !reactPropsRegex.test(prop),
 })<BoxOwnProps>(
   (props) => ({
     background: props.background && `var(--pv-color-${props.background})`,
diff --git a/packages/react-components/src/LinearProgress/linear_progress.tsx b/packages/react-components/src/LinearProgress/linear_progress.tsx
index 639307b7..26f63745 100644
--- a/packages/react-components/src/LinearProgress/linear_progress.tsx
+++ b/packages/react-components/src/LinearProgress/linear_progress.tsx
@@ -61,6 +61,7 @@ export const LinearProgress = React.forwardRef<HTMLDivElement, LinearProgressPro
   (props, ref) => {
     const {
       color,
+      variant,
       ...other
     } = props;
 
diff --git a/packages/react-components/src/Skeleton/skeleton.tsx b/packages/react-components/src/Skeleton/skeleton.tsx
index f2fe2534..d8e09986 100644
--- a/packages/react-components/src/Skeleton/skeleton.tsx
+++ b/packages/react-components/src/Skeleton/skeleton.tsx
@@ -42,6 +42,8 @@ export type SkeletonProps<
  *
  */
 
+const reactPropsRegex = /^(as|height|width|variant)$/;
+
 /**
  * Styles.
  */
@@ -58,7 +60,7 @@ const pulseKeyframe = keyframes`
 `;
 
 const SkeletonRoot = styled(Box, {
-  shouldForwardProp: (prop) => !['width', 'height'].includes(prop),
+  shouldForwardProp: (prop) => !reactPropsRegex.test(prop),
 })<SkeletonProps>((props) => ({
   display: 'block',
   height: '1.2em',
diff --git a/packages/react-components/src/Typography/typography.tsx b/packages/react-components/src/Typography/typography.tsx
index 222a392e..5181c9f1 100644
--- a/packages/react-components/src/Typography/typography.tsx
+++ b/packages/react-components/src/Typography/typography.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import {
   ColorType,
@@ -45,11 +44,13 @@ export type TypographyProps<
  *
  */
 
+const reactPropsRegex = /^(as|color|variant|noWrap)$/;
+
 /**
  * Styles.
  */
 const TypographyRoot = styled('p', {
-  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
+  shouldForwardProp: (prop) => !reactPropsRegex.test(prop),
 })<TypographyOwnProps>((props) => ({
   margin: 0,
   color: props.color === 'inherit' ? 'inherit' : `var(--pv-color-${props.color})`,