-
- This custom activity is private to the {templateTeam.name} team.
-
-
-
- As a member of the team you can share this activity with other teams at the{' '}
- {templateTeam.organization.name} organization so that they can also use the activity.
-
-
-
-
{type === 'retrospective' && (
<>
diff --git a/packages/client/components/DropdownToggleInner.tsx b/packages/client/components/DropdownToggleInner.tsx
deleted file mode 100644
index 673493093eb..00000000000
--- a/packages/client/components/DropdownToggleInner.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import styled from '@emotion/styled'
-import React, {forwardRef} from 'react'
-import {PALETTE} from '~/styles/paletteV3'
-
-const Container = styled('div')({
- alignItems: 'center',
- display: 'flex',
- flex: 1,
- minWidth: 0
-})
-
-const IconContainer = styled('div')({
- marginRight: 16
-})
-
-const MenuToggleLabelContainer = styled('div')({
- overflow: 'hidden'
-})
-
-const MenuToggleLabel = styled('div')({
- flex: 1,
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- whiteSpace: 'nowrap',
- fontSize: 20,
- fontWeight: 600,
- color: PALETTE.SLATE_900
-})
-
-const MenuToggleTitle = styled('div')({
- fontSize: 14,
- lineHeight: '16px',
- fontWeight: 400,
- color: PALETTE.SLATE_900
-})
-
-interface Props {
- label: string
- icon?: React.ReactElement
- title?: string
-}
-const DropdownToggleInner = forwardRef((props: Props, ref: any) => {
- const {icon, label, title} = props
- return (
-
- {icon && {icon} }
-
- {title && {title} }
- {label}
-
-
- )
-})
-
-export default DropdownToggleInner
diff --git a/packages/client/components/DropdownToggleV2.tsx b/packages/client/components/DropdownToggleV2.tsx
deleted file mode 100644
index b7111cd7384..00000000000
--- a/packages/client/components/DropdownToggleV2.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import styled from '@emotion/styled'
-import {ExpandMore as ExpandMoreIcon, KeyboardArrowRight} from '@mui/icons-material'
-import React, {ReactNode, Ref, forwardRef} from 'react'
-import useMenu from '../hooks/useMenu'
-import {PALETTE} from '../styles/paletteV3'
-
-const DropdownIcon = styled('div')<{opened: boolean | undefined}>(({opened}) => ({
- color: PALETTE.SLATE_600,
- height: 36,
- width: 36,
- svg: {
- fontSize: 36
- },
- alignSelf: 'center',
- transform: opened ? 'rotateX(180deg)' : 'none',
- transition: 'transform 0.2s'
-}))
-
-const DropdownBlock = styled('div')<{disabled: boolean | undefined}>(({disabled}) => ({
- background: PALETTE.SLATE_200,
- borderRadius: '8px',
- cursor: disabled ? 'not-allowed' : 'pointer',
- display: 'flex',
- fontSize: 14,
- lineHeight: '24px',
- fontWeight: 600,
- userSelect: 'none',
- width: '100%',
- ':hover': {
- backgroundColor: PALETTE.SLATE_300
- },
- padding: 16
-}))
-
-interface Props {
- className?: string
- disabled?: boolean
- icon?: string
- onClick: ReturnType
['togglePortal']
- onMouseEnter?: () => void
- children: ReactNode
- opened?: boolean
-}
-
-const DropdownToggleV2 = forwardRef((props: Props, ref: Ref) => {
- const {className, children, icon, onClick, onMouseEnter, disabled, opened} = props
- return (
-
- {children}
- {!disabled && (
-
- {icon ?
- )}
-
- )
-})
-
-export default DropdownToggleV2
diff --git a/packages/client/components/NewMeetingDropdown.tsx b/packages/client/components/NewMeetingDropdown.tsx
deleted file mode 100644
index c27f812c293..00000000000
--- a/packages/client/components/NewMeetingDropdown.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, {forwardRef} from 'react'
-import useMenu from '../hooks/useMenu'
-import DropdownToggleInner from './DropdownToggleInner'
-import DropdownToggleV2 from './DropdownToggleV2'
-
-interface Props {
- className?: string
- icon?: React.ReactElement
- dropdownIcon?: string
- label: string
- disabled?: boolean
- onClick: ReturnType['togglePortal']
- onMouseEnter?: () => void
- title?: string
- opened?: boolean
-}
-
-const NewMeetingDropdown = forwardRef((props: Props, ref: any) => {
- const {className, icon, dropdownIcon, label, disabled, onClick, onMouseEnter, title, opened} =
- props
- return (
-
-
- )
-})
-
-export default NewMeetingDropdown
diff --git a/packages/client/components/NewMeetingTeamPicker.tsx b/packages/client/components/NewMeetingTeamPicker.tsx
index 199499dc2dc..8761276b9a8 100644
--- a/packages/client/components/NewMeetingTeamPicker.tsx
+++ b/packages/client/components/NewMeetingTeamPicker.tsx
@@ -1,41 +1,23 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import {ExpandMore} from '@mui/icons-material'
import graphql from 'babel-plugin-relay/macro'
import React from 'react'
import {useFragment} from 'react-relay'
import {NewMeetingTeamPicker_selectedTeam$key} from '~/__generated__/NewMeetingTeamPicker_selectedTeam.graphql'
import {NewMeetingTeamPicker_teams$key} from '~/__generated__/NewMeetingTeamPicker_teams.graphql'
import useAtmosphere from '../hooks/useAtmosphere'
-import {MenuPosition} from '../hooks/useCoords'
-import useMenu from '../hooks/useMenu'
-import {PortalStatus} from '../hooks/usePortal'
-import lazyPreload from '../utils/lazyPreload'
+import {Menu} from '../ui/Menu/Menu'
import setPreferredTeamId from '../utils/relay/setPreferredTeamId'
-import NewMeetingDropdown from './NewMeetingDropdown'
import NewMeetingTeamPickerAvatars from './NewMeetingTeamPickerAvatars'
-const SelectTeamDropdown = lazyPreload(
- () =>
- import(
- /* webpackChunkName: 'SelectTeamDropdown' */
- './SelectTeamDropdown'
- )
-)
-
interface Props {
selectedTeamRef: NewMeetingTeamPicker_selectedTeam$key
teamsRef: NewMeetingTeamPicker_teams$key
onSelectTeam: (teamId: string) => void
- positionOverride?: MenuPosition
- customPortal?: React.ReactNode
}
const NewMeetingTeamPicker = (props: Props) => {
- const {selectedTeamRef, teamsRef, onSelectTeam, positionOverride, customPortal} = props
- const {togglePortal, menuPortal, originRef, menuProps, portalStatus} = useMenu(
- positionOverride ?? MenuPosition.LOWER_RIGHT,
- {
- isDropdown: true
- }
- )
+ const {selectedTeamRef, teamsRef, onSelectTeam} = props
const atmosphere = useAtmosphere()
@@ -66,29 +48,48 @@ const NewMeetingTeamPicker = (props: Props) => {
)
const {name} = selectedTeam
+
return (
<>
-
+
+
+
+
+
+
+ }
+ >
+