From f3ba8dd53abc697c096165185764235012ada90f Mon Sep 17 00:00:00 2001
From: Tim Kolberger <tim@kolberger.eu>
Date: Sat, 6 Feb 2021 13:02:08 +0100
Subject: [PATCH] fix: narrow theme types for defaultProps and
 ComponentMultiStyleConfig

---
 .changeset/tricky-beers-smell.md           |  7 +++++++
 packages/react/tests/extend-theme.test.tsx | 14 ++++++++++++++
 packages/theme/src/theme.types.ts          |  4 ++--
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tricky-beers-smell.md

diff --git a/.changeset/tricky-beers-smell.md b/.changeset/tricky-beers-smell.md
new file mode 100644
index 00000000000..06eb05595fe
--- /dev/null
+++ b/.changeset/tricky-beers-smell.md
@@ -0,0 +1,7 @@
+---
+"@chakra-ui/react": patch
+"@chakra-ui/theme": patch
+---
+
+Fixed an issue where the TypeScript types were too narrow for component
+defaultProps and ComponentMultiStyleConfig
diff --git a/packages/react/tests/extend-theme.test.tsx b/packages/react/tests/extend-theme.test.tsx
index a461ced3fa4..63517eda691 100644
--- a/packages/react/tests/extend-theme.test.tsx
+++ b/packages/react/tests/extend-theme.test.tsx
@@ -90,6 +90,20 @@ describe("extendTheme", () => {
     expect(Object.keys(solidStyles).length).toBeGreaterThan(1)
   })
 
+  it("should be able to extend a multipart component", () => {
+    const override: ThemeOverride = {
+      components: {
+        Textarea: {
+          defaultProps: {
+            focusBorderColor: "green.200",
+          },
+        },
+      },
+    }
+
+    extendTheme(override)
+  })
+
   it("should pass typescript lint with random custom theme", () => {
     const override = {
       shadows: {
diff --git a/packages/theme/src/theme.types.ts b/packages/theme/src/theme.types.ts
index a3b32d99820..00e81fe8728 100644
--- a/packages/theme/src/theme.types.ts
+++ b/packages/theme/src/theme.types.ts
@@ -33,7 +33,7 @@ export interface ColorHues {
 
 export type ThemeDirection = "ltr" | "rtl"
 
-interface ComponentDefaultProps {
+interface ComponentDefaultProps extends Record<string, any> {
   size?: string
   variant?: string
   colorScheme?: string
@@ -51,7 +51,7 @@ export interface ComponentSingleStyleConfig {
 }
 
 export interface ComponentMultiStyleConfig {
-  parts: string[]
+  parts?: string[]
   baseStyle?: ThemeThunk<SystemStyleObjectRecord>
   sizes?: SystemStyleObjectRecord
   variants?: SystemStyleObjectRecord