diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md index 570e94eacd02c..375c746079490 100644 --- a/packages/connect-react/CHANGELOG.md +++ b/packages/connect-react/CHANGELOG.md @@ -2,6 +2,21 @@ # Changelog +## [2.2.0] - 2025-11-29 + +### Added + +- Added React 19 support to peer dependencies + +### Fixed + +- Fixed dropdown menus being clipped or hidden behind other elements when rendered inside containers with overflow constraints (e.g., workflow builders, modals) +- All select components now portal their menus to the document body with proper z-index handling + +### Changed + +- Upgraded `react-select` from 5.8.2 to 5.9.0 for React 19 compatibility + ## [2.1.2] - 2025-11-14 ### Fixed diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json index 193a2fb576a59..bcd1a8a0d89f4 100644 --- a/packages/connect-react/package.json +++ b/packages/connect-react/package.json @@ -1,6 +1,6 @@ { "name": "@pipedream/connect-react", - "version": "2.1.2", + "version": "2.2.0", "description": "Pipedream Connect library for React", "files": [ "dist" @@ -34,7 +34,7 @@ "@tanstack/react-query": "^5.59.16", "lodash.isequal": "^4.5.0", "react-markdown": "^9.0.1", - "react-select": "^5.8.2" + "react-select": "^5.9.0" }, "devDependencies": { "@emotion/react": "^11.13.5", @@ -44,7 +44,7 @@ "vite-plugin-dts": "^4.3.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } } diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx index 7f91b4e25e2e6..2c97211dfd320 100644 --- a/packages/connect-react/src/components/ControlApp.tsx +++ b/packages/connect-react/src/components/ControlApp.tsx @@ -146,44 +146,62 @@ export function ControlApp({ app }: ControlAppProps) { app, ...formFieldCtx, })}> - {isLoadingAccounts ? - `Loading ${app.name} accounts...` - : accounts.length ? - a.name ?? ""} + getOptionValue={(a) => a.id} + menuPortalTarget={ + typeof document !== "undefined" + ? document.body + : null + } + menuPosition="fixed" + styles={{ + ...selectProps.styles, + menuPortal: (base) => ({ + ...base, + zIndex: 99999, + }), + }} + onChange={(a) => { + if (a) { + if (a.id === "_new") { + // start connect account and then select it, etc. + // TODO unset / put in loading state + startConnectAccount(); + } else { + onChange({ + authProvisionId: a.id, + }); + } } else { - onChange({ - authProvisionId: a.id, - }); + onChange(undefined); } - } else { - onChange(undefined); - } - }} - /> - : - + }} + /> + ) + : ( + + ) } ); diff --git a/packages/connect-react/src/components/ControlSelect.tsx b/packages/connect-react/src/components/ControlSelect.tsx index 03221d11f9b0d..9c037aca2a33d 100644 --- a/packages/connect-react/src/components/ControlSelect.tsx +++ b/packages/connect-react/src/components/ControlSelect.tsx @@ -256,8 +256,25 @@ export function ControlSelect({ onChange={handleChange} {...props} {...selectProps} - components={finalComponents} {...additionalProps} + // These must come AFTER spreads to avoid being overridden + classNamePrefix="react-select" + menuPortalTarget={ + typeof document !== "undefined" + ? document.body + : null + } + menuPosition="fixed" + styles={{ + // eslint-disable-next-line react/prop-types + ...props.styles, + ...selectProps?.styles, + menuPortal: (base) => ({ + ...base, + zIndex: 99999, + }), + }} + components={finalComponents} /> ); } diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx index 1ed1c56156800..d44989e8d2852 100644 --- a/packages/connect-react/src/components/SelectApp.tsx +++ b/packages/connect-react/src/components/SelectApp.tsx @@ -172,6 +172,18 @@ export function SelectApp({ }} onMenuScrollToBottom={handleMenuScrollToBottom} isLoading={isLoading} + menuPortalTarget={ + typeof document !== "undefined" + ? document.body + : null + } + menuPosition="fixed" + styles={{ + menuPortal: (base) => ({ + ...base, + zIndex: 99999, + }), + }} /> ); } diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx index 5ec772566862e..5763d544024b7 100644 --- a/packages/connect-react/src/components/SelectComponent.tsx +++ b/packages/connect-react/src/components/SelectComponent.tsx @@ -98,6 +98,18 @@ export function SelectComponent({ onMenuScrollToBottom={handleMenuScrollToBottom} isLoading={isLoading} components={customComponents} + menuPortalTarget={ + typeof document !== "undefined" + ? document.body + : null + } + menuPosition="fixed" + styles={{ + menuPortal: (base) => ({ + ...base, + zIndex: 99999, + }), + }} /> ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9ec063664a96f..f7c76aa622871 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2589,8 +2589,7 @@ importers: specifier: ^3.1.1 version: 3.1.1 - components/chartly: - specifiers: {} + components/chartly: {} components/chartmogul: dependencies: @@ -3541,8 +3540,7 @@ importers: specifier: ^3.1.1 version: 3.1.1 - components/cryptlex: - specifiers: {} + components/cryptlex: {} components/crypto_apis_by_alternative: {} @@ -4289,8 +4287,7 @@ importers: specifier: ^3.1.1 version: 3.1.1 - components/docuwriter_ai: - specifiers: {} + components/docuwriter_ai: {} components/dokan: {} @@ -5776,8 +5773,7 @@ importers: specifier: 4.0.4 version: 4.0.4 - components/genpage: - specifiers: {} + components/genpage: {} components/geoapify: dependencies: @@ -7118,8 +7114,7 @@ importers: specifier: ^3.1.1 version: 3.1.1 - components/hybrid_analysis: - specifiers: {} + components/hybrid_analysis: {} components/hygraph: {} @@ -7732,8 +7727,7 @@ importers: components/junip: {} - components/just_invoice: - specifiers: {} + components/just_invoice: {} components/justcall: dependencies: @@ -11434,8 +11428,7 @@ importers: specifier: ^1.6.8 version: 1.6.8 - components/pod_ai: - specifiers: {} + components/pod_ai: {} components/podio: dependencies: @@ -11735,8 +11728,7 @@ importers: specifier: ^1.6.8 version: 1.6.8 - components/productify_ai: - specifiers: {} + components/productify_ai: {} components/productive_io: dependencies: @@ -11788,8 +11780,7 @@ importers: specifier: ^1.6.8 version: 1.6.8 - components/proovl: - specifiers: {} + components/proovl: {} components/propelauth: {} @@ -13831,8 +13822,7 @@ importers: specifier: ^3.1.1 version: 3.1.1 - components/slab: - specifiers: {} + components/slab: {} components/slack: dependencies: @@ -15934,8 +15924,7 @@ importers: specifier: 4.0.4 version: 4.0.4 - components/vatfix_plus: - specifiers: {} + components/vatfix_plus: {} components/vbout: dependencies: @@ -17461,16 +17450,16 @@ importers: specifier: ^4.5.0 version: 4.5.0 react: - specifier: ^16.8.0 || ^17.0.0 || ^18.0.0 + specifier: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 version: 18.3.1 react-dom: - specifier: ^16.8.0 || ^17.0.0 || ^18.0.0 + specifier: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 version: 18.3.1(react@18.3.1) react-markdown: specifier: ^9.0.1 version: 9.1.0(@types/react@18.3.26)(react@18.3.1) react-select: - specifier: ^5.8.2 + specifier: ^5.9.0 version: 5.10.2(@types/react@18.3.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@emotion/react':