From 5e3358f991634645a14bc35dda66a078fab60765 Mon Sep 17 00:00:00 2001
From: danewhitfield <danejwhitfield@gmail.com>
Date: Sat, 6 Jul 2024 15:20:50 +0100
Subject: [PATCH] fix(combobox): fixes issue 4101 with combobox

---
 .../__registry__/default/block/chart-pie-label.tsx    |  2 +-
 .../__registry__/default/block/chart-pie-legend.tsx   | 11 ++---------
 apps/www/__registry__/default/block/dashboard-01.tsx  |  4 +++-
 apps/www/__registry__/default/block/dashboard-02.tsx  |  3 +--
 apps/www/__registry__/default/block/dashboard-03.tsx  |  6 ++----
 apps/www/__registry__/default/block/dashboard-04.tsx  |  3 +--
 apps/www/__registry__/default/block/dashboard-05.tsx  |  8 ++++++--
 apps/www/__registry__/default/block/dashboard-07.tsx  |  3 +--
 .../new-york/block/chart-bar-interactive.tsx          |  4 ++--
 .../new-york/block/chart-pie-label-custom.tsx         |  7 ++-----
 .../new-york/block/chart-pie-label-list.tsx           |  2 +-
 .../__registry__/new-york/block/chart-pie-label.tsx   |  2 +-
 .../__registry__/new-york/block/chart-pie-legend.tsx  | 11 ++---------
 apps/www/__registry__/new-york/block/dashboard-01.tsx |  4 +++-
 apps/www/__registry__/new-york/block/dashboard-02.tsx |  3 +--
 apps/www/__registry__/new-york/block/dashboard-03.tsx |  6 ++----
 apps/www/__registry__/new-york/block/dashboard-04.tsx |  3 +--
 apps/www/__registry__/new-york/block/dashboard-05.tsx |  8 ++++++--
 apps/www/__registry__/new-york/block/dashboard-07.tsx |  3 +--
 apps/www/content/docs/components/combobox.mdx         | 11 +++++++----
 apps/www/registry/default/example/combobox-demo.tsx   | 11 +++++++----
 apps/www/registry/new-york/example/combobox-demo.tsx  | 11 +++++++----
 22 files changed, 60 insertions(+), 66 deletions(-)

diff --git a/apps/www/__registry__/default/block/chart-pie-label.tsx b/apps/www/__registry__/default/block/chart-pie-label.tsx
index 54914a25478..26c294cd652 100644
--- a/apps/www/__registry__/default/block/chart-pie-label.tsx
+++ b/apps/www/__registry__/default/block/chart-pie-label.tsx
@@ -64,7 +64,7 @@ export default function Component() {
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px] pb-0"
+          className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
         >
           <PieChart>
             <ChartTooltip content={<ChartTooltipContent hideLabel />} />
diff --git a/apps/www/__registry__/default/block/chart-pie-legend.tsx b/apps/www/__registry__/default/block/chart-pie-legend.tsx
index aca8cac60f1..3e3d7534a82 100644
--- a/apps/www/__registry__/default/block/chart-pie-legend.tsx
+++ b/apps/www/__registry__/default/block/chart-pie-legend.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { LabelList, Pie, PieChart } from "recharts"
+import { Pie, PieChart } from "recharts"
 
 import {
   Card,
@@ -65,14 +65,7 @@ export default function Component() {
           className="mx-auto aspect-square max-h-[300px]"
         >
           <PieChart>
-            <Pie data={chartData} dataKey="visitors">
-              <LabelList
-                dataKey="visitors"
-                className="fill-background"
-                stroke="none"
-                fontSize={12}
-              />
-            </Pie>
+            <Pie data={chartData} dataKey="visitors" />
             <ChartLegend
               content={<ChartLegendContent nameKey="browser" />}
               className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
diff --git a/apps/www/__registry__/default/block/dashboard-01.tsx b/apps/www/__registry__/default/block/dashboard-01.tsx
index 74bc72a8cde..f503c767f82 100644
--- a/apps/www/__registry__/default/block/dashboard-01.tsx
+++ b/apps/www/__registry__/default/block/dashboard-01.tsx
@@ -229,7 +229,9 @@ export default function Dashboard() {
           </Card>
         </div>
         <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-          <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
+          <Card
+            className="xl:col-span-2" x-chunk="dashboard-01-chunk-4"
+          >
             <CardHeader className="flex flex-row items-center">
               <div className="grid gap-2">
                 <CardTitle>Transactions</CardTitle>
diff --git a/apps/www/__registry__/default/block/dashboard-02.tsx b/apps/www/__registry__/default/block/dashboard-02.tsx
index 10e217352a4..7da1285d986 100644
--- a/apps/www/__registry__/default/block/dashboard-02.tsx
+++ b/apps/www/__registry__/default/block/dashboard-02.tsx
@@ -227,8 +227,7 @@ export default function Dashboard() {
             <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
           </div>
           <div
-            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-            x-chunk="dashboard-02-chunk-1"
+            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm" x-chunk="dashboard-02-chunk-1"
           >
             <div className="flex flex-col items-center gap-1 text-center">
               <h3 className="text-2xl font-bold tracking-tight">
diff --git a/apps/www/__registry__/default/block/dashboard-03.tsx b/apps/www/__registry__/default/block/dashboard-03.tsx
index ea89e0e67a9..bb71b92b2f2 100644
--- a/apps/www/__registry__/default/block/dashboard-03.tsx
+++ b/apps/www/__registry__/default/block/dashboard-03.tsx
@@ -302,8 +302,7 @@ export default function Dashboard() {
         </header>
         <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
           <div
-            className="relative hidden flex-col items-start gap-8 md:flex"
-            x-chunk="dashboard-03-chunk-0"
+            className="relative hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0"
           >
             <form className="grid w-full items-start gap-6">
               <fieldset className="grid gap-6 rounded-lg border p-4">
@@ -420,8 +419,7 @@ export default function Dashboard() {
             </Badge>
             <div className="flex-1" />
             <form
-              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-              x-chunk="dashboard-03-chunk-1"
+              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring" x-chunk="dashboard-03-chunk-1"
             >
               <Label htmlFor="message" className="sr-only">
                 Message
diff --git a/apps/www/__registry__/default/block/dashboard-04.tsx b/apps/www/__registry__/default/block/dashboard-04.tsx
index 991a45cc950..4beff40b9fd 100644
--- a/apps/www/__registry__/default/block/dashboard-04.tsx
+++ b/apps/www/__registry__/default/block/dashboard-04.tsx
@@ -157,8 +157,7 @@ export default function Dashboard() {
         </div>
         <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
           <nav
-            className="grid gap-4 text-sm text-muted-foreground"
-            x-chunk="dashboard-04-chunk-0"
+            className="grid gap-4 text-sm text-muted-foreground" x-chunk="dashboard-04-chunk-0"
           >
             <Link href="#" className="font-semibold text-primary">
               General
diff --git a/apps/www/__registry__/default/block/dashboard-05.tsx b/apps/www/__registry__/default/block/dashboard-05.tsx
index f94522d7f17..57f6d27ed1d 100644
--- a/apps/www/__registry__/default/block/dashboard-05.tsx
+++ b/apps/www/__registry__/default/block/dashboard-05.tsx
@@ -283,7 +283,9 @@ export default function Dashboard() {
         <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
           <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
             <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-              <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
+              <Card
+                className="sm:col-span-2" x-chunk="dashboard-05-chunk-0"
+              >
                 <CardHeader className="pb-3">
                   <CardTitle>Your Orders</CardTitle>
                   <CardDescription className="max-w-lg text-balance leading-relaxed">
@@ -561,7 +563,9 @@ export default function Dashboard() {
             </Tabs>
           </div>
           <div>
-            <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
+            <Card
+              className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
+            >
               <CardHeader className="flex flex-row items-start bg-muted/50">
                 <div className="grid gap-0.5">
                   <CardTitle className="group flex items-center gap-2 text-lg">
diff --git a/apps/www/__registry__/default/block/dashboard-07.tsx b/apps/www/__registry__/default/block/dashboard-07.tsx
index 5c78dee0561..e1d03c2c2dc 100644
--- a/apps/www/__registry__/default/block/dashboard-07.tsx
+++ b/apps/www/__registry__/default/block/dashboard-07.tsx
@@ -535,8 +535,7 @@ export default function Dashboard() {
                   </CardContent>
                 </Card>
                 <Card
-                  className="overflow-hidden"
-                  x-chunk="dashboard-07-chunk-4"
+                  className="overflow-hidden" x-chunk="dashboard-07-chunk-4"
                 >
                   <CardHeader>
                     <CardTitle>Product Images</CardTitle>
diff --git a/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx b/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx
index 84bcc6a28c2..f988ef5e11c 100644
--- a/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx
+++ b/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx
@@ -9,13 +9,13 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/default/ui/card"
+} from "@/registry/new-york/ui/card"
 import {
   ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/registry/default/ui/chart"
+} from "@/registry/new-york/ui/chart"
 
 export const description = "An interactive bar chart"
 
diff --git a/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx b/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx
index 5d31328d3a4..ff956ebf9dc 100644
--- a/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx
+++ b/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx
@@ -64,7 +64,7 @@ export default function Component() {
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
+          className="mx-auto aspect-square max-h-[250px] px-0"
         >
           <PieChart>
             <ChartTooltip
@@ -85,10 +85,7 @@ export default function Component() {
                     dominantBaseline={props.dominantBaseline}
                     fill="hsla(var(--foreground))"
                   >
-                    {`${
-                      chartConfig[payload.browser as keyof typeof chartConfig]
-                        ?.label
-                    } (${payload.visitors})`}
+                    {payload.visitors}
                   </text>
                 )
               }}
diff --git a/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx b/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx
index 8c0841d27a4..0bc77dfde07 100644
--- a/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx
+++ b/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx
@@ -64,7 +64,7 @@ export default function Component() {
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
+          className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
         >
           <PieChart>
             <ChartTooltip
diff --git a/apps/www/__registry__/new-york/block/chart-pie-label.tsx b/apps/www/__registry__/new-york/block/chart-pie-label.tsx
index e125077413a..e4a13c93975 100644
--- a/apps/www/__registry__/new-york/block/chart-pie-label.tsx
+++ b/apps/www/__registry__/new-york/block/chart-pie-label.tsx
@@ -64,7 +64,7 @@ export default function Component() {
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={chartConfig}
-          className="mx-auto aspect-square max-h-[250px] pb-0"
+          className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
         >
           <PieChart>
             <ChartTooltip content={<ChartTooltipContent hideLabel />} />
diff --git a/apps/www/__registry__/new-york/block/chart-pie-legend.tsx b/apps/www/__registry__/new-york/block/chart-pie-legend.tsx
index c5a280bfb06..d75f89eacf1 100644
--- a/apps/www/__registry__/new-york/block/chart-pie-legend.tsx
+++ b/apps/www/__registry__/new-york/block/chart-pie-legend.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { LabelList, Pie, PieChart } from "recharts"
+import { Pie, PieChart } from "recharts"
 
 import {
   Card,
@@ -65,14 +65,7 @@ export default function Component() {
           className="mx-auto aspect-square max-h-[300px]"
         >
           <PieChart>
-            <Pie data={chartData} dataKey="visitors">
-              <LabelList
-                dataKey="visitors"
-                className="fill-background"
-                stroke="none"
-                fontSize={12}
-              />
-            </Pie>
+            <Pie data={chartData} dataKey="visitors" />
             <ChartLegend
               content={<ChartLegendContent nameKey="browser" />}
               className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
diff --git a/apps/www/__registry__/new-york/block/dashboard-01.tsx b/apps/www/__registry__/new-york/block/dashboard-01.tsx
index 2c4672f5c69..67077abe1c3 100644
--- a/apps/www/__registry__/new-york/block/dashboard-01.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-01.tsx
@@ -229,7 +229,9 @@ export default function Dashboard() {
           </Card>
         </div>
         <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-          <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
+          <Card
+            className="xl:col-span-2" x-chunk="dashboard-01-chunk-4"
+          >
             <CardHeader className="flex flex-row items-center">
               <div className="grid gap-2">
                 <CardTitle>Transactions</CardTitle>
diff --git a/apps/www/__registry__/new-york/block/dashboard-02.tsx b/apps/www/__registry__/new-york/block/dashboard-02.tsx
index 5f9215f5547..853c34bddd8 100644
--- a/apps/www/__registry__/new-york/block/dashboard-02.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-02.tsx
@@ -227,8 +227,7 @@ export default function Dashboard() {
             <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
           </div>
           <div
-            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-            x-chunk="dashboard-02-chunk-1"
+            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm" x-chunk="dashboard-02-chunk-1"
           >
             <div className="flex flex-col items-center gap-1 text-center">
               <h3 className="text-2xl font-bold tracking-tight">
diff --git a/apps/www/__registry__/new-york/block/dashboard-03.tsx b/apps/www/__registry__/new-york/block/dashboard-03.tsx
index b8808b42f0f..3ca48dc4177 100644
--- a/apps/www/__registry__/new-york/block/dashboard-03.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-03.tsx
@@ -302,8 +302,7 @@ export default function Dashboard() {
         </header>
         <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
           <div
-            className="relative hidden flex-col items-start gap-8 md:flex"
-            x-chunk="dashboard-03-chunk-0"
+            className="relative hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0"
           >
             <form className="grid w-full items-start gap-6">
               <fieldset className="grid gap-6 rounded-lg border p-4">
@@ -420,8 +419,7 @@ export default function Dashboard() {
             </Badge>
             <div className="flex-1" />
             <form
-              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-              x-chunk="dashboard-03-chunk-1"
+              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring" x-chunk="dashboard-03-chunk-1"
             >
               <Label htmlFor="message" className="sr-only">
                 Message
diff --git a/apps/www/__registry__/new-york/block/dashboard-04.tsx b/apps/www/__registry__/new-york/block/dashboard-04.tsx
index 69e19a57a2b..ad0853d906b 100644
--- a/apps/www/__registry__/new-york/block/dashboard-04.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-04.tsx
@@ -157,8 +157,7 @@ export default function Dashboard() {
         </div>
         <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
           <nav
-            className="grid gap-4 text-sm text-muted-foreground"
-            x-chunk="dashboard-04-chunk-0"
+            className="grid gap-4 text-sm text-muted-foreground" x-chunk="dashboard-04-chunk-0"
           >
             <Link href="#" className="font-semibold text-primary">
               General
diff --git a/apps/www/__registry__/new-york/block/dashboard-05.tsx b/apps/www/__registry__/new-york/block/dashboard-05.tsx
index db41324a421..817885ebc36 100644
--- a/apps/www/__registry__/new-york/block/dashboard-05.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-05.tsx
@@ -284,7 +284,9 @@ export default function Dashboard() {
         <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
           <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
             <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-              <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
+              <Card
+                className="sm:col-span-2" x-chunk="dashboard-05-chunk-0"
+              >
                 <CardHeader className="pb-3">
                   <CardTitle>Your Orders</CardTitle>
                   <CardDescription className="max-w-lg text-balance leading-relaxed">
@@ -562,7 +564,9 @@ export default function Dashboard() {
             </Tabs>
           </div>
           <div>
-            <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
+            <Card
+              className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
+            >
               <CardHeader className="flex flex-row items-start bg-muted/50">
                 <div className="grid gap-0.5">
                   <CardTitle className="group flex items-center gap-2 text-lg">
diff --git a/apps/www/__registry__/new-york/block/dashboard-07.tsx b/apps/www/__registry__/new-york/block/dashboard-07.tsx
index bf65a018734..60624f94880 100644
--- a/apps/www/__registry__/new-york/block/dashboard-07.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-07.tsx
@@ -535,8 +535,7 @@ export default function Dashboard() {
                   </CardContent>
                 </Card>
                 <Card
-                  className="overflow-hidden"
-                  x-chunk="dashboard-07-chunk-4"
+                  className="overflow-hidden" x-chunk="dashboard-07-chunk-4"
                 >
                   <CardHeader>
                     <CardTitle>Product Images</CardTitle>
diff --git a/apps/www/content/docs/components/combobox.mdx b/apps/www/content/docs/components/combobox.mdx
index 2ec52b83e6c..e166c691917 100644
--- a/apps/www/content/docs/components/combobox.mdx
+++ b/apps/www/content/docs/components/combobox.mdx
@@ -69,11 +69,14 @@ export function ComboboxDemo() {
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[200px] justify-between"
+          className="flex w-[200px] items-center justify-between"
         >
-          {value
-            ? frameworks.find((framework) => framework.value === value)?.label
-            : "Select framework..."}
+          <span className="truncate">
+            {value
+              ? frameworks.find((framework) => framework.value === value)
+                  ?.label || ""
+              : "Select framework..."}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
diff --git a/apps/www/registry/default/example/combobox-demo.tsx b/apps/www/registry/default/example/combobox-demo.tsx
index b16ad8fd7b5..166881432b1 100644
--- a/apps/www/registry/default/example/combobox-demo.tsx
+++ b/apps/www/registry/default/example/combobox-demo.tsx
@@ -52,11 +52,14 @@ export default function ComboboxDemo() {
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[200px] justify-between"
+          className="flex w-[200px] items-center justify-between"
         >
-          {value
-            ? frameworks.find((framework) => framework.value === value)?.label
-            : "Select framework..."}
+          <span className="truncate">
+            {value
+              ? frameworks.find((framework) => framework.value === value)
+                  ?.label || ""
+              : "Select framework..."}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
diff --git a/apps/www/registry/new-york/example/combobox-demo.tsx b/apps/www/registry/new-york/example/combobox-demo.tsx
index 43545503a68..b1d30b2b059 100644
--- a/apps/www/registry/new-york/example/combobox-demo.tsx
+++ b/apps/www/registry/new-york/example/combobox-demo.tsx
@@ -52,11 +52,14 @@ export default function ComboboxDemo() {
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[200px] justify-between"
+          className="flex w-[200px] items-center justify-between"
         >
-          {value
-            ? frameworks.find((framework) => framework.value === value)?.label
-            : "Select framework..."}
+          <span className="truncate">
+            {value
+              ? frameworks.find((framework) => framework.value === value)
+                  ?.label || ""
+              : "Select framework..."}
+          </span>
           <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>