Merge pull request #498 from gluestack/fix/props-forwarding-composition

Fix/props forwarding composition
gluestack · Oct 30, 2023 · f0c4213 · f0c4213
2 parents 0acbcc2 + 15341a6
commit f0c4213
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.8",
+  "version": "1.0.9-alpha.6",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -785,10 +785,13 @@ const getStyleIdsFromMap = (
   styleIds: any
 ) => {
   let componentExtendedConfig = CONFIG;
+
   if (ExtendedConfig) {
-    componentExtendedConfig = deepMerge(CONFIG, ExtendedConfig);
+    componentExtendedConfig = deepMergeObjects(CONFIG, ExtendedConfig);
   }
+
   Object.assign(styledSystemProps, componentExtendedConfig?.aliases);
+
   const componentStyleIds = styleIds.component;
   const componentDescendantStyleIds = styleIds.descendant;
 
@@ -1022,6 +1025,7 @@ export function verboseStyled<P, Variants, ComCon>(
     const applySxDescendantStyleCSSIdsAndPropsWithKey = useRef({});
 
     const styledContext = useStyled();
+
     const { theme: activeTheme } = useTheme();
 
     const ancestorStyleContext = useContext(AncestorStyleContext);
@@ -1041,6 +1045,7 @@ export function verboseStyled<P, Variants, ComCon>(
         ...styledContext.config,
         propertyTokenMap,
       };
+
       // for extended components
 
       const EXTENDED_THEME =
@@ -1107,7 +1112,14 @@ export function verboseStyled<P, Variants, ComCon>(
           // @ts-ignore
           [nonVerbosedTheme, , , Component] = plugins[
             pluginName
-          ]?.inputMiddleWare<P>(nonVerbosedTheme, true, true, Component);
+          ]?.inputMiddleWare<P>(
+            nonVerbosedTheme,
+            true,
+            true,
+            Component,
+            componentStyleConfig,
+            ExtendedConfig
+          );
         }
         nonVerbosedTheme = convertStyledToStyledVerbosed(nonVerbosedTheme);
       }
@@ -1939,6 +1951,7 @@ export function verboseStyled<P, Variants, ComCon>(
       plugins?.length > 0
         ? {
             ...variantProps,
+            states: states,
             sx: componentProps.sx,
           }
         : {};
@@ -1949,7 +1962,9 @@ export function verboseStyled<P, Variants, ComCon>(
         component = (
           <ComponentWithPlugin
             {...resolvedStyleProps}
+            {...variantProps}
             {...propsToBePassedInToPlugin}
+            states={states}
             style={resolvedStyleMemo}
             as={AsComp}
             ref={ref}
@@ -1965,7 +1980,19 @@ export function verboseStyled<P, Variants, ComCon>(
         );
       }
     } else {
-      component = (
+      //@ts-ignores
+      component = Component.isStyledComponent ? (
+        <ComponentWithPlugin
+          {...resolvedStyleProps}
+          {...propsToBePassedInToPlugin}
+          {...variantProps}
+          states={states}
+          style={resolvedStyleMemo}
+          ref={ref}
+        >
+          {children}
+        </ComponentWithPlugin>
+      ) : (
         <ComponentWithPlugin
           {...resolvedStyleProps}
           {...propsToBePassedInToPlugin}