admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix csv import dropdown overlay (#9262)

Browse Source 
## Context
Fixing https://github.com/twentyhq/twenty/issues/9245 using the new
OverlayContainer component instead of custom styled component

## Test
<img width="352" alt="Screenshot 2024-12-27 at 16 52 55"
src="https://github.com/user-attachments/assets/27ebcdd1-8fe4-425b-995b-bc4e7220192c"
/>
This commit is contained in:
Weiko
2024-12-27 17:07:37 +01:00
committed by GitHub
parent 522b51581d
commit acc07f5bbd
1 changed files with 45 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
View File

@ -18,6 +18,7 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useUpdateEffect } from '~/hooks/useUpdateEffect'; import { useUpdateEffect } from '~/hooks/useUpdateEffect';
@ -25,13 +26,6 @@ const StyledFloatingDropdown = styled.div`
z-index: ${({ theme }) => theme.lastLayerZIndex}; z-index: ${({ theme }) => theme.lastLayerZIndex};
`; `;
const StyledDropdownMenu = styled(DropdownMenu)`
background-color: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) => theme.boxShadow.light};
`;
interface MatchColumnSelectProps { interface MatchColumnSelectProps {
onChange: (value: ReadonlyDeep<SelectOption> | null) => void; onChange: (value: ReadonlyDeep<SelectOption> | null) => void;
value?: ReadonlyDeep<SelectOption>; value?: ReadonlyDeep<SelectOption>;
@ -128,7 +122,8 @@ export const MatchColumnSelect = ({
{isOpen && {isOpen &&
createPortal( createPortal(
<StyledFloatingDropdown ref={refs.setFloating} style={floatingStyles}> <StyledFloatingDropdown ref={refs.setFloating} style={floatingStyles}>
<StyledDropdownMenu <OverlayContainer>
<DropdownMenu
data-select-disable data-select-disable
ref={dropdownContainerRef} ref={dropdownContainerRef}
// width={refs.domReference.current?.clientWidth} // width={refs.domReference.current?.clientWidth}
@ -169,7 +164,8 @@ export const MatchColumnSelect = ({
<MenuItem key="No result" text="No result" /> <MenuItem key="No result" text="No result" />
)} )}
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
</StyledDropdownMenu> </DropdownMenu>
</OverlayContainer>
</StyledFloatingDropdown>, </StyledFloatingDropdown>,
document.body, document.body,
)} )}