From c6b2fe6feeb8c8254d8adab363371ec8d94cb5d2 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 20 Jan 2026 11:58:31 +0800 Subject: [PATCH] Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard (#41818) * Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard * Forgot to add ui changes lol * Clean uop --- .../grid/components/editor/DateTimeEditor.tsx | 2 +- .../formatter/ForeignKeyFormatter.tsx | 2 +- .../header/filter/FilterPopover.tsx | 10 +--- .../header/filter/FilterPopoverPrimitive.tsx | 4 +- .../components/header/sort/SortPopover.tsx | 4 +- .../header/sort/SortPopoverPrimitive.tsx | 4 +- .../interfaces/Auth/Hooks/CreateHookSheet.tsx | 1 - .../BranchManagement/BranchSelector.tsx | 2 +- .../Connect/DatabaseConnectionString.tsx | 2 +- .../Backups/PITR/TimezoneSelection.tsx | 2 +- .../Functions/CreateFunction/index.tsx | 1 - .../Database/Indexes/CreateIndexSidePanel.tsx | 4 +- .../interfaces/Database/Indexes/Indexes.tsx | 2 +- .../interfaces/Database/Tables/TableList.tsx | 2 +- .../EdgeFunctionTesterSheet.tsx | 2 +- .../interfaces/Home/ServiceStatus.tsx | 2 +- .../GettingStarted/FrameworkSelector.tsx | 8 ++- .../interfaces/HomeNew/ServiceStatus.tsx | 2 +- .../components/interfaces/HomePageActions.tsx | 8 +-- .../CronJobs/SqlFunctionSection.tsx | 1 - .../Vercel/OrganizationPicker.tsx | 1 - .../VercelGithub/ProjectLinker.tsx | 1 - .../BillingCustomerDataForm.tsx | 4 +- .../Inspector/ChooseChannelPopover.tsx | 2 +- .../Inspector/RealtimeFilterPopover/index.tsx | 29 +++++++++-- .../interfaces/Realtime/Inspector/index.tsx | 6 +-- .../interfaces/Reports/ReportFilterBar.tsx | 6 +-- .../Reports/ReportFilterPopover.tsx | 22 ++++---- .../Reports/v2/ReportsNumericFilter.tsx | 2 +- .../Reports/v2/ReportsSelectFilter.tsx | 7 +-- .../RoleImpersonationPopover.tsx | 28 ++--------- .../RoleImpersonationSelector/index.tsx | 18 +++---- .../GitHubIntegrationConnectionForm.tsx | 7 +-- .../Settings/Logs/Logs.DatePickers.tsx | 1 - .../Settings/Logs/LogsFilterPopover.tsx | 8 +-- .../TableGridEditor/GridHeaderActions.tsx | 30 ++--------- .../ForeignRowSelector/ForeignRowSelector.tsx | 12 +---- .../SidePanelEditor/TableEditor/Column.tsx | 2 +- .../EdgeFunctionDetailsLayout.tsx | 2 +- .../TableEditorLayout/TableEditorMenu.tsx | 1 - .../AIAssistantChatSelector.tsx | 2 +- .../ui/AIAssistantPanel/Message.Actions.tsx | 18 +++---- .../ui/DataTable/DataTableViewOptions.tsx | 2 +- .../studio/components/ui/DatabaseSelector.tsx | 6 +-- apps/studio/components/ui/FilterPopover.tsx | 1 - .../ui/OrganizationProjectSelector.tsx | 1 - apps/studio/components/ui/SchemaSelector.tsx | 5 +- .../pages/project/[ref]/functions/new.tsx | 2 +- .../src/FilterBar/FilterCondition.tsx | 2 - .../ui-patterns/src/FilterBar/FilterGroup.tsx | 1 - .../components/ClientSelectDropdown.tsx | 2 +- .../ui/src/components/shadcn/ui/popover.tsx | 50 +++++++------------ 52 files changed, 128 insertions(+), 218 deletions(-) diff --git a/apps/studio/components/grid/components/editor/DateTimeEditor.tsx b/apps/studio/components/grid/components/editor/DateTimeEditor.tsx index 289228f7068..129cf6440be 100644 --- a/apps/studio/components/grid/components/editor/DateTimeEditor.tsx +++ b/apps/studio/components/grid/components/editor/DateTimeEditor.tsx @@ -76,7 +76,7 @@ function BaseEditor({ {value === null ? 'NULL' : value} - + { tooltip={{ content: { side: 'bottom', text: 'View referencing record' } }} /> - + { +export const FilterPopover = () => { const { urlFilters, onApplyFilters } = useTableFilter() // Convert string[] to Filter[] @@ -16,7 +12,5 @@ export const FilterPopover = ({ portal = true }: FilterPopoverProps) => { return formatFilterURLParams(urlFilters ?? []) }, [urlFilters]) - return ( - - ) + return } diff --git a/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx b/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx index 868b2e2715e..a3e4eb1c329 100644 --- a/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx +++ b/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx @@ -17,14 +17,12 @@ export interface FilterPopoverPrimitiveProps { buttonText?: string filters: Filter[] onApplyFilters: (filters: Filter[]) => void - portal?: boolean } export const FilterPopoverPrimitive = ({ buttonText, filters, onApplyFilters, - portal = true, }: FilterPopoverPrimitiveProps) => { const [open, setOpen] = useState(false) const snap = useTableEditorTableStateSnapshot() @@ -94,7 +92,7 @@ export const FilterPopoverPrimitive = ({ {displayButtonText} - +
{localFilters.map((filter, index) => ( diff --git a/apps/studio/components/grid/components/header/sort/SortPopover.tsx b/apps/studio/components/grid/components/header/sort/SortPopover.tsx index 70afe576c34..cc3cc715324 100644 --- a/apps/studio/components/grid/components/header/sort/SortPopover.tsx +++ b/apps/studio/components/grid/components/header/sort/SortPopover.tsx @@ -6,11 +6,10 @@ import { useTableEditorTableStateSnapshot } from 'state/table-editor-table' import { SortPopoverPrimitive } from './SortPopoverPrimitive' export interface SortPopoverProps { - portal?: boolean tableQueriesEnabled?: boolean } -export const SortPopover = ({ portal = true, tableQueriesEnabled }: SortPopoverProps) => { +export const SortPopover = ({ tableQueriesEnabled }: SortPopoverProps) => { const { urlSorts, onApplySorts } = useTableSort() const snap = useTableEditorTableStateSnapshot() @@ -23,7 +22,6 @@ export const SortPopover = ({ portal = true, tableQueriesEnabled }: SortPopoverP return ( void - portal?: boolean defaultOpen?: boolean tableQueriesEnabled?: boolean } @@ -48,7 +47,6 @@ export const SortPopoverPrimitive = ({ buttonText, sorts, onApplySorts, - portal = true, defaultOpen = false, tableQueriesEnabled = true, }: SortPopoverPrimitiveProps) => { @@ -225,7 +223,7 @@ export const SortPopoverPrimitive = ({ {displayButtonText} - +
{localSorts.map((sort, index) => ( - + diff --git a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx index 130a129a3df..b59b6e0a6e1 100644 --- a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx +++ b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx @@ -300,7 +300,7 @@ export const DatabaseConnectionString = () => {
- + diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx index 095acb0f487..b28b5eb7221 100644 --- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx +++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx @@ -203,7 +203,6 @@ export const CreateFunction = ({ > s.name)} size="small" diff --git a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx index 6db649328cf..8d762cc918d 100644 --- a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx +++ b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx @@ -44,7 +44,7 @@ interface CreateIndexSidePanelProps { onClose: () => void } -const CreateIndexSidePanel = ({ visible, onClose }: CreateIndexSidePanelProps) => { +export const CreateIndexSidePanel = ({ visible, onClose }: CreateIndexSidePanelProps) => { const { data: project } = useSelectedProjectQuery() const isOrioleDb = useIsOrioleDb() @@ -420,5 +420,3 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp ) } - -export default CreateIndexSidePanel diff --git a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx index e463dcb4811..8188e9c224b 100644 --- a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx +++ b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx @@ -30,7 +30,7 @@ import { Input } from 'ui-patterns/DataInputs/Input' import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal' import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning' -import CreateIndexSidePanel from './CreateIndexSidePanel' +import { CreateIndexSidePanel } from './CreateIndexSidePanel' const Indexes = () => { const { data: project } = useSelectedProjectQuery() diff --git a/apps/studio/components/interfaces/Database/Tables/TableList.tsx b/apps/studio/components/interfaces/Database/Tables/TableList.tsx index fb764651592..6b01b6f1dd6 100644 --- a/apps/studio/components/interfaces/Database/Tables/TableList.tsx +++ b/apps/studio/components/interfaces/Database/Tables/TableList.tsx @@ -235,7 +235,7 @@ export const TableList = ({ icon={} /> - +

Show entity types

diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx index 7819382c6fa..b8853cad5e9 100644 --- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx +++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx @@ -428,7 +428,7 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester - + - + {services.map((service) => (
- {/* Render in a portal to avoid layout/stacking shifts; prevent auto-focus to stop scroll jump */} e.preventDefault()} > diff --git a/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx b/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx index 810f3eb0d07..ba4d114d0c4 100644 --- a/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx +++ b/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx @@ -269,7 +269,7 @@ export const ServiceStatus = () => { value={{overallStatusLabel}} /> - + {services.map((service) => ( } /> - +

Filter projects by status

diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx index 3d25f88e61e..41777b56e3c 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx @@ -21,7 +21,6 @@ export const SqlFunctionSection = ({ form }: SqlFunctionSectionProps) => { render={({ field }) => ( diff --git a/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx b/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx index 8b8939875da..ef6c0330bd1 100644 --- a/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx +++ b/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx @@ -328,7 +328,6 @@ const ProjectLinker = ({ side="bottom" align="center" sameWidthAsTrigger - portal > diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx index 245b0f3ceec..5e29dc38cdc 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerDataForm.tsx @@ -154,7 +154,7 @@ export const BillingCustomerDataForm = ({ - + @@ -260,7 +260,7 @@ export const BillingCustomerDataForm = ({ - + diff --git a/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx b/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx index 108d516567b..6cf53e61e07 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx @@ -92,7 +92,7 @@ export const ChooseChannelPopover = ({ config, onChangeConfig }: ChooseChannelPo

- +
{config.channelName.length === 0 ? ( <> diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx index 1a355c6251e..2453a2d0564 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx @@ -2,6 +2,9 @@ import { PlusCircle } from 'lucide-react' import Link from 'next/link' import { Dispatch, SetStateAction, useEffect, useState } from 'react' +import { InlineLink } from '@/components/ui/InlineLink' +import { useDatabasePublicationsQuery } from '@/data/database-publications/database-publications-query' +import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject' import { useParams } from 'common' import { useSendEventMutation } from 'data/telemetry/send-event-mutation' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' @@ -35,9 +38,18 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter const [tempConfig, setTempConfig] = useState(config) const { ref } = useParams() + const { data: project } = useSelectedProjectQuery() const { data: org } = useSelectedOrganizationQuery() const { mutate: sendEvent } = useSendEventMutation() + const { data: publications } = useDatabasePublicationsQuery({ + projectRef: project?.ref, + connectionString: project?.connectionString, + }) + const realtimePublication = (publications ?? []).find( + (publication) => publication.name === 'supabase_realtime' + ) + // Update tempConfig when config changes to ensure consistency useEffect(() => { setTempConfig(config) @@ -75,7 +87,7 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter )} - +
Listen to event types
@@ -155,10 +167,19 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter />

- {config.enableDbChanges - ? 'Listen for Database inserts, updates, deletes and more' - : 'Enable realtime publications to listen for database changes'} + Listen for Database inserts, updates, deletes and more

+ {!config.enableDbChanges && ( +

+ Enable{' '} + + realtime publications + {' '} + for your tables to listen for database changes +

+ )}
{tempConfig.enableDbChanges && config.enableDbChanges && ( diff --git a/apps/studio/components/interfaces/Realtime/Inspector/index.tsx b/apps/studio/components/interfaces/Realtime/Inspector/index.tsx index 098da67887c..287024092cc 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/index.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/index.tsx @@ -1,15 +1,15 @@ import { useParams } from 'common' -import { useState, useEffect } from 'react' +import { useEffect, useState } from 'react' -import { useSendEventMutation } from 'data/telemetry/send-event-mutation' import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query' +import { useSendEventMutation } from 'data/telemetry/send-event-mutation' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' +import { EmptyRealtime } from './EmptyRealtime' import { Header } from './Header' import MessagesTable from './MessagesTable' import { SendMessageModal } from './SendMessageModal' import { RealtimeConfig, useRealtimeMessages } from './useRealtimeMessages' -import { EmptyRealtime } from './EmptyRealtime' /** * Acts as a container component for the entire log display diff --git a/apps/studio/components/interfaces/Reports/ReportFilterBar.tsx b/apps/studio/components/interfaces/Reports/ReportFilterBar.tsx index babafd843c7..80cde9d7d65 100644 --- a/apps/studio/components/interfaces/Reports/ReportFilterBar.tsx +++ b/apps/studio/components/interfaces/Reports/ReportFilterBar.tsx @@ -289,11 +289,7 @@ const ReportFilterBar = ({ Add filter - 0 ? 'end' : 'start'} - portal={true} - className="p-0 w-60" - > + 0 ? 'end' : 'start'} className="p-0 w-60">
{ setSelectedSchema(name) }} onSelectCreateSchema={() => snap.onAddSchema()} - portal={!isMobile} />
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx index f379f6c1254..4dac2ec53d5 100644 --- a/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx +++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx @@ -98,7 +98,7 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel - + No chats found. diff --git a/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx b/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx index 2170e2afee8..7ee1705bbf7 100644 --- a/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx +++ b/apps/studio/components/ui/AIAssistantPanel/Message.Actions.tsx @@ -1,22 +1,22 @@ -import { Pencil, ThumbsDown, ThumbsUp, Trash2 } from 'lucide-react' -import { type PropsWithChildren, useState, useEffect } from 'react' import { zodResolver } from '@hookform/resolvers/zod' +import { Pencil, ThumbsDown, ThumbsUp, Trash2 } from 'lucide-react' +import { type PropsWithChildren, useEffect, useState } from 'react' import { useForm } from 'react-hook-form' import * as z from 'zod' -import { ButtonTooltip } from '../ButtonTooltip' import { - cn, Button, - Popover_Shadcn_, - PopoverTrigger_Shadcn_, - PopoverContent_Shadcn_, + cn, Form_Shadcn_, - FormField_Shadcn_, FormControl_Shadcn_, + FormField_Shadcn_, + Popover_Shadcn_, + PopoverContent_Shadcn_, + PopoverTrigger_Shadcn_, TextArea_Shadcn_, } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' +import { ButtonTooltip } from '../ButtonTooltip' export function MessageActions({ children, @@ -172,7 +172,7 @@ function MessageActionsThumbsDown({ /> - + {form.formState.isSubmitSuccessful ? (

We appreciate your feedback!

) : ( diff --git a/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx b/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx index 3c04c19a30a..668532eb6f4 100644 --- a/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx +++ b/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx @@ -46,7 +46,7 @@ export function DataTableViewOptions() { tooltip={{ content: { side: 'bottom', text: 'Toggle column visibility' } }} /> - + diff --git a/apps/studio/components/ui/DatabaseSelector.tsx b/apps/studio/components/ui/DatabaseSelector.tsx index 686a9bd2a18..2b45f0dafa7 100644 --- a/apps/studio/components/ui/DatabaseSelector.tsx +++ b/apps/studio/components/ui/DatabaseSelector.tsx @@ -38,8 +38,8 @@ interface DatabaseSelectorProps { additionalOptions?: { id: string; name: string }[] buttonProps?: ButtonProps onSelectId?: (id: string) => void // Optional callback - portal?: boolean className?: string + align?: 'start' | 'end' } export const DatabaseSelector = ({ @@ -48,7 +48,7 @@ export const DatabaseSelector = ({ additionalOptions = [], onSelectId = noop, buttonProps, - portal = true, + align = 'end', className, }: DatabaseSelectorProps) => { const router = useRouter() @@ -118,7 +118,7 @@ export const DatabaseSelector = ({
- + {additionalOptions.length > 0 && ( diff --git a/apps/studio/components/ui/FilterPopover.tsx b/apps/studio/components/ui/FilterPopover.tsx index 317b3d1b607..a052ed2dd0c 100644 --- a/apps/studio/components/ui/FilterPopover.tsx +++ b/apps/studio/components/ui/FilterPopover.tsx @@ -208,7 +208,6 @@ export const FilterPopover = >({
diff --git a/apps/studio/components/ui/OrganizationProjectSelector.tsx b/apps/studio/components/ui/OrganizationProjectSelector.tsx index 83481a26a5b..8105ceb42f0 100644 --- a/apps/studio/components/ui/OrganizationProjectSelector.tsx +++ b/apps/studio/components/ui/OrganizationProjectSelector.tsx @@ -150,7 +150,6 @@ export const OrganizationProjectSelector = ({ )} void onSelectCreateSchema?: () => void - portal?: boolean align?: 'start' | 'end' } @@ -48,7 +47,6 @@ export const SchemaSelector = ({ excludedSchemas = [], onSelectSchema, onSelectCreateSchema, - portal = true, align = 'start', }: SchemaSelectorProps) => { const [open, setOpen] = useState(false) @@ -133,11 +131,10 @@ export const SchemaSelector = ({ className="p-0 min-w-[200px] pointer-events-auto" side="bottom" align={align} - portal={portal} sameWidthAsTrigger > - + No schemas found diff --git a/apps/studio/pages/project/[ref]/functions/new.tsx b/apps/studio/pages/project/[ref]/functions/new.tsx index df447398a86..027e33b597d 100644 --- a/apps/studio/pages/project/[ref]/functions/new.tsx +++ b/apps/studio/pages/project/[ref]/functions/new.tsx @@ -290,7 +290,7 @@ const NewFunctionPage = () => { Templates - + diff --git a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx index 265c00f8c9c..89ede8d736f 100644 --- a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx +++ b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx @@ -227,7 +227,6 @@ export function FilterCondition({ className="min-w-[220px] p-0" align="start" side="bottom" - portal onOpenAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} onInteractOutside={(e) => { @@ -269,7 +268,6 @@ export function FilterCondition({ className="min-w-[220px] w-fit p-0" align="start" side="bottom" - portal onOpenAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} onInteractOutside={(e) => { diff --git a/packages/ui-patterns/src/FilterBar/FilterGroup.tsx b/packages/ui-patterns/src/FilterBar/FilterGroup.tsx index 660ca9ebf24..7ef2bbf5fd0 100644 --- a/packages/ui-patterns/src/FilterBar/FilterGroup.tsx +++ b/packages/ui-patterns/src/FilterBar/FilterGroup.tsx @@ -201,7 +201,6 @@ export function FilterGroup({ group, path }: FilterGroupProps) { className="min-w-[220px] p-0" align="start" side="bottom" - portal onOpenAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} onInteractOutside={(e) => { diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx index cc16454ac9e..7c1111c2b78 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx +++ b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx @@ -77,7 +77,7 @@ export const ClientSelectDropdown = ({
- + diff --git a/packages/ui/src/components/shadcn/ui/popover.tsx b/packages/ui/src/components/shadcn/ui/popover.tsx index 88bf5f28a7a..fb5f859eb0d 100644 --- a/packages/ui/src/components/shadcn/ui/popover.tsx +++ b/packages/ui/src/components/shadcn/ui/popover.tsx @@ -11,7 +11,6 @@ const PopoverTrigger = PopoverPrimitive.Trigger const PopoverAnchor = PopoverPrimitive.Anchor type PopoverContentProps = { - portal?: boolean align?: 'center' | 'start' | 'end' sideOffset?: number sameWidthAsTrigger?: boolean @@ -20,36 +19,23 @@ type PopoverContentProps = { const PopoverContent = React.forwardRef< React.ElementRef, PopoverContentProps ->( - ( - { - className, - align = 'center', - sideOffset = 4, - portal = false, - sameWidthAsTrigger = false, - ...props - }, - ref - ) => { - const Portal = portal ? PopoverPrimitive.Portal : React.Fragment - return ( - - - - ) - } -) +>(({ className, align = 'center', sideOffset = 4, sameWidthAsTrigger = false, ...props }, ref) => { + return ( + + + + ) +}) PopoverContent.displayName = 'PopoverContent' const PopoverSeparator = React.forwardRef>( @@ -59,4 +45,4 @@ const PopoverSeparator = React.forwardRef