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

Move shadow style from TableCell and InlineCell to FieldInputs (#2078)

Browse Source 
* Move shadow style from TableCell and InlineCell to FieldInputs

* Move overlay to inputs

* Complete work
This commit is contained in:
Charles Bochet
2023-10-17 20:59:56 +02:00
committed by GitHub
parent a40516df83
commit 01e9545a59
22 changed files with 164 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/ui/data/data-table/components/DataTableHeader.tsx
View File

@ -19,7 +19,7 @@ import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
import { DataTableHeaderPlusButton } from './DataTableHeaderPlusButton'; import { DataTableHeaderPlusButton } from './DataTableHeaderPlusButton';
import { SelectAllCheckbox } from './SelectAllCheckbox'; import { SelectAllCheckbox } from './SelectAllCheckbox';
const COLUMN_MIN_WIDTH = 75; const COLUMN_MIN_WIDTH = 104;
const StyledColumnHeaderCell = styled.th<{ const StyledColumnHeaderCell = styled.th<{
columnWidth: number; columnWidth: number;

52
front/src/modules/ui/data/data-table/constants/countries.json
View File

@ -1,52 +0,0 @@
{
"ch": "Switzerland",
"de": "Germany",
"ca": "Canada",
"us": "US",
"se": "Sweden",
"jp": "Japan",
"au": "Australia",
"gb": "UK",
"fr": "France",
"dk": "Denmark",
"nz": "New Zealand",
"nl": "Netherlands",
"no": "Norway",
"it": "Italy",
"fi": "Finland",
"es": "Spain",
"cn": "China",
"be": "Belgium",
"sg": "Singapore",
"kr": "South Korea",
"ae": "UAE",
"at": "Austria",
"ie": "Ireland",
"lu": "Luxembourg",
"gr": "Greece",
"pt": "Portugal",
"br": "Brazil",
"th": "Thailand",
"qa": "Qatar",
"tr": "Turkey",
"in": "India",
"pl": "Poland",
"mx": "Mexico",
"sa": "Saudi Arabia",
"eg": "Egypt",
"ru": "Russia",
"il": "Israel",
"ar": "Argentina",
"my": "Malaysia",
"cr": "Costa Rica",
"id": "Indonesia",
"za": "South Africa",
"ma": "Morocco",
"cz": "Czechia",
"hr": "Croatia",
"ph": "Philippines",
"vn": "Vietnam",
"hu": "Hungary",
"cl": "Chile",
"pe": "Peru"
}

4
front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx
View File

@ -54,8 +54,6 @@ export const TableCellContainer = ({
editModeContent, editModeContent,
nonEditModeContent, nonEditModeContent,
editHotkeyScope, editHotkeyScope,
transparent = false,
maxContentWidth,
buttonIcon, buttonIcon,
}: TableCellContainerProps) => { }: TableCellContainerProps) => {
const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode(); const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
@ -114,8 +112,6 @@ export const TableCellContainer = ({
> >
{isCurrentTableCellInEditMode ? ( {isCurrentTableCellInEditMode ? (
<TableCellEditMode <TableCellEditMode
maxContentWidth={maxContentWidth}
transparent={transparent}
editModeHorizontalAlign={editModeHorizontalAlign} editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition} editModeVerticalPosition={editModeVerticalPosition}
> >

23
front/src/modules/ui/data/data-table/table-cell/components/TableCellEditMode.tsx
View File

@ -1,27 +1,12 @@
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { overlayBackground } from '@/ui/theme/constants/effects';
const StyledEditableCellEditModeContainer = styled.div<TableCellEditModeProps>` const StyledEditableCellEditModeContainer = styled.div<TableCellEditModeProps>`
align-items: center; align-items: center;
border: ${({ transparent, theme }) =>
transparent ? 'none' : `1px solid ${theme.border.color.light}`};
border-radius: ${({ transparent, theme }) =>
transparent ? 'none' : theme.border.radius.sm};
display: flex; display: flex;
left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
margin: -1px; margin: -1px;
max-width: ${({ maxContentWidth }) => min-width: 200px;
maxContentWidth ? `${maxContentWidth}px` : 'none'}; width: calc(100% + 2px);
min-height: 100%;
min-width: ${({ maxContentWidth }) => (maxContentWidth ? `none` : '100%')};
position: absolute;
right: ${(props) =>
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
${({ transparent }) => (transparent ? '' : overlayBackground)};
z-index: 1; z-index: 1;
`; `;
@ -38,12 +23,8 @@ export const TableCellEditMode = ({
editModeHorizontalAlign, editModeHorizontalAlign,
editModeVerticalPosition, editModeVerticalPosition,
children, children,
transparent = false,
maxContentWidth,
}: TableCellEditModeProps) => ( }: TableCellEditModeProps) => (
<StyledEditableCellEditModeContainer <StyledEditableCellEditModeContainer
maxContentWidth={maxContentWidth}
transparent={transparent}
data-testid="editable-cell-edit-mode-container" data-testid="editable-cell-edit-mode-container"
editModeHorizontalAlign={editModeHorizontalAlign} editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition} editModeVerticalPosition={editModeVerticalPosition}

25
front/src/modules/ui/data/field/meta-types/input/components/ChipFieldInput.tsx
View File

@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { usePersistField } from '../../../hooks/usePersistField'; import { usePersistField } from '../../../hooks/usePersistField';
import { useChipField } from '../../hooks/useChipField'; import { useChipField } from '../../hooks/useChipField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput'; import { FieldInputEvent } from './DateFieldInput';
export type ChipFieldInputProps = { export type ChipFieldInputProps = {
@ -48,16 +49,18 @@ export const ChipFieldInput = ({
}; };
return ( return (
<TextInput <FieldInputOverlay>
placeholder={fieldDefinition.metadata.placeHolder} <TextInput
autoFocus placeholder={fieldDefinition.metadata.placeHolder}
value={contentFieldValue ?? ''} autoFocus
onClickOutside={handleClickOutside} value={contentFieldValue ?? ''}
onEnter={handleEnter} onClickOutside={handleClickOutside}
onEscape={handleEscape} onEnter={handleEnter}
onShiftTab={handleShiftTab} onEscape={handleEscape}
onTab={handleTab} onShiftTab={handleShiftTab}
hotkeyScope={hotkeyScope} onTab={handleTab}
/> hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
); );
}; };

27
front/src/modules/ui/data/field/meta-types/input/components/DoubleTextChipFieldInput.tsx
View File

@ -4,6 +4,7 @@ import { FieldDoubleText } from '@/ui/data/field/types/FieldDoubleText';
import { usePersistField } from '../../../hooks/usePersistField'; import { usePersistField } from '../../../hooks/usePersistField';
import { useDoubleTextChipField } from '../../hooks/useDoubleTextChipField'; import { useDoubleTextChipField } from '../../hooks/useDoubleTextChipField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput'; import { FieldInputEvent } from './DateFieldInput';
export type DoubleTextChipFieldInputProps = { export type DoubleTextChipFieldInputProps = {
@ -50,17 +51,19 @@ export const DoubleTextChipFieldInput = ({
}; };
return ( return (
<DoubleTextInput <FieldInputOverlay>
firstValue={firstValue ?? ''} <DoubleTextInput
secondValue={secondValue ?? ''} firstValue={firstValue ?? ''}
firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder} secondValue={secondValue ?? ''}
secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder} firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
onClickOutside={handleClickOutside} secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
onEnter={handleEnter} onClickOutside={handleClickOutside}
onEscape={handleEscape} onEnter={handleEnter}
onShiftTab={handleShiftTab} onEscape={handleEscape}
onTab={handleTab} onShiftTab={handleShiftTab}
hotkeyScope={hotkeyScope} onTab={handleTab}
/> hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
); );
}; };

27
front/src/modules/ui/data/field/meta-types/input/components/DoubleTextFieldInput.tsx
View File

@ -4,6 +4,7 @@ import { FieldDoubleText } from '@/ui/data/field/types/FieldDoubleText';
import { usePersistField } from '../../../hooks/usePersistField'; import { usePersistField } from '../../../hooks/usePersistField';
import { useDoubleTextField } from '../../hooks/useDoubleTextField'; import { useDoubleTextField } from '../../hooks/useDoubleTextField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput'; import { FieldInputEvent } from './DateFieldInput';
export type DoubleTextFieldInputProps = { export type DoubleTextFieldInputProps = {
@ -50,17 +51,19 @@ export const DoubleTextFieldInput = ({
}; };
return ( return (
<DoubleTextInput <FieldInputOverlay>
firstValue={firstValue ?? ''} <DoubleTextInput
secondValue={secondValue ?? ''} firstValue={firstValue ?? ''}
firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder} secondValue={secondValue ?? ''}
secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder} firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
onClickOutside={handleClickOutside} secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
onEnter={handleEnter} onClickOutside={handleClickOutside}
onEscape={handleEscape} onEnter={handleEnter}
onShiftTab={handleShiftTab} onEscape={handleEscape}
onTab={handleTab} onShiftTab={handleShiftTab}
hotkeyScope={hotkeyScope} onTab={handleTab}
/> hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
); );
}; };

25
front/src/modules/ui/data/field/meta-types/input/components/EmailFieldInput.tsx
View File

@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { usePersistField } from '../../../hooks/usePersistField'; import { usePersistField } from '../../../hooks/usePersistField';
import { useEmailField } from '../../hooks/useEmailField'; import { useEmailField } from '../../hooks/useEmailField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput'; import { FieldInputEvent } from './DateFieldInput';
export type EmailFieldInputProps = { export type EmailFieldInputProps = {
@ -48,16 +49,18 @@ export const EmailFieldInput = ({
}; };
return ( return (
<TextInput <FieldInputOverlay>
placeholder={fieldDefinition.metadata.placeHolder} <TextInput
autoFocus placeholder={fieldDefinition.metadata.placeHolder}
value={fieldValue ?? ''} autoFocus
onClickOutside={handleClickOutside} value={fieldValue ?? ''}
onEnter={handleEnter} onClickOutside={handleClickOutside}
onEscape={handleEscape} onEnter={handleEnter}
onShiftTab={handleShiftTab} onEscape={handleEscape}
onTab={handleTab} onShiftTab={handleShiftTab}
hotkeyScope={hotkeyScope} onTab={handleTab}
/> hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
); );
}; };

26
front/src/modules/ui/data/field/meta-types/input/components/MoneyFieldInput.tsx
View File

@ -2,6 +2,8 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { useMoneyField } from '../../hooks/useMoneyField'; import { useMoneyField } from '../../hooks/useMoneyField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
export type FieldInputEvent = (persist: () => void) => void; export type FieldInputEvent = (persist: () => void) => void;
export type MoneyFieldInputProps = { export type MoneyFieldInputProps = {
@ -46,16 +48,18 @@ export const MoneyFieldInput = ({
}; };
return ( return (
<TextInput <FieldInputOverlay>
placeholder={fieldDefinition.metadata.placeHolder} <TextInput
autoFocus placeholder={fieldDefinition.metadata.placeHolder}
value={fieldValue?.toLocaleString() ?? ''} autoFocus
onClickOutside={handleClickOutside} value={fieldValue?.toLocaleString() ?? ''}
onEnter={handleEnter} onClickOutside={handleClickOutside}
onEscape={handleEscape} onEnter={handleEnter}
onShiftTab={handleShiftTab} onEscape={handleEscape}
onTab={handleTab} onShiftTab={handleShiftTab}
hotkeyScope={hotkeyScope} onTab={handleTab}
/> hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
); );
}; };

26
front/src/modules/ui/data/field/meta-types/input/components/NumberFieldInput.tsx
View File

@ -2,6 +2,8 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { useNumberField } from '../../hooks/useNumberField'; import { useNumberField } from '../../hooks/useNumberField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
export type FieldInputEvent = (persist: () => void) => void; export type FieldInputEvent = (persist: () => void) => void;
export type NumberFieldInputProps = { export type NumberFieldInputProps = {
@ -46,16 +48,18 @@ export const NumberFieldInput = ({
}; };
return ( return (
<TextInput <FieldInputOverlay>
placeholder={fieldDefinition.metadata.placeHolder} <TextInput
autoFocus placeholder={fieldDefinition.metadata.placeHolder}
value={fieldValue?.toString() ?? ''} autoFocus
onClickOutside={handleClickOutside} value={fieldValue?.toString() ?? ''}
onEnter={handleEnter} onClickOutside={handleClickOutside}
onEscape={handleEscape} onEnter={handleEnter}
onShiftTab={handleShiftTab} onEscape={handleEscape}
onTab={handleTab} onShiftTab={handleShiftTab}
hotkeyScope={hotkeyScope} onTab={handleTab}
/> hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
); );
}; };

25
front/src/modules/ui/data/field/meta-types/input/components/PhoneFieldInput.tsx
View File

@ -2,6 +2,7 @@ import { PhoneInput } from '@/ui/data/field/meta-types/input/components/internal
import { usePhoneField } from '../../hooks/usePhoneField'; import { usePhoneField } from '../../hooks/usePhoneField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput'; import { FieldInputEvent } from './DateFieldInput';
export type PhoneFieldInputProps = { export type PhoneFieldInputProps = {
@ -46,16 +47,18 @@ export const PhoneFieldInput = ({
}; };
return ( return (
<PhoneInput <FieldInputOverlay>
placeholder={fieldDefinition.metadata.placeHolder} <PhoneInput
autoFocus placeholder={fieldDefinition.metadata.placeHolder}
value={fieldValue ?? ''} autoFocus
onClickOutside={handleClickOutside} value={fieldValue ?? ''}
onEnter={handleEnter} onClickOutside={handleClickOutside}
onEscape={handleEscape} onEnter={handleEnter}
onShiftTab={handleShiftTab} onEscape={handleEscape}
onTab={handleTab} onShiftTab={handleShiftTab}
hotkeyScope={hotkeyScope} onTab={handleTab}
/> hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
); );
}; };

4
front/src/modules/ui/data/field/meta-types/input/components/RelationFieldInput.tsx
View File

@ -12,9 +12,9 @@ import { useRelationField } from '../../hooks/useRelationField';
import { FieldInputEvent } from './DateFieldInput'; import { FieldInputEvent } from './DateFieldInput';
const StyledRelationPickerContainer = styled.div` const StyledRelationPickerContainer = styled.div`
left: 0px; left: -1px;
position: absolute; position: absolute;
top: -8px; top: -1px;
`; `;
export type RelationFieldInputProps = { export type RelationFieldInputProps = {

25
front/src/modules/ui/data/field/meta-types/input/components/TextFieldInput.tsx
View File

@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { usePersistField } from '../../../hooks/usePersistField'; import { usePersistField } from '../../../hooks/usePersistField';
import { useTextField } from '../../hooks/useTextField'; import { useTextField } from '../../hooks/useTextField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput'; import { FieldInputEvent } from './DateFieldInput';
export type TextFieldInputProps = { export type TextFieldInputProps = {
@ -48,16 +49,18 @@ export const TextFieldInput = ({
}; };
return ( return (
<TextInput <FieldInputOverlay>
placeholder={fieldDefinition.metadata.placeHolder} <TextInput
autoFocus placeholder={fieldDefinition.metadata.placeHolder}
value={fieldValue ?? ''} autoFocus
onClickOutside={handleClickOutside} value={fieldValue ?? ''}
onEnter={handleEnter} onClickOutside={handleClickOutside}
onEscape={handleEscape} onEnter={handleEnter}
onShiftTab={handleShiftTab} onEscape={handleEscape}
onTab={handleTab} onShiftTab={handleShiftTab}
hotkeyScope={hotkeyScope} onTab={handleTab}
/> hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
); );
}; };

25
front/src/modules/ui/data/field/meta-types/input/components/URLFieldInput.tsx
View File

@ -2,6 +2,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { useURLField } from '../../hooks/useURLField'; import { useURLField } from '../../hooks/useURLField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput'; import { FieldInputEvent } from './DateFieldInput';
export type URLFieldInputProps = { export type URLFieldInputProps = {
@ -46,16 +47,18 @@ export const URLFieldInput = ({
}; };
return ( return (
<TextInput <FieldInputOverlay>
placeholder={fieldDefinition.metadata.placeHolder} <TextInput
autoFocus placeholder={fieldDefinition.metadata.placeHolder}
value={fieldValue ?? ''} autoFocus
onClickOutside={handleClickOutside} value={fieldValue ?? ''}
onEnter={handleEnter} onClickOutside={handleClickOutside}
onEscape={handleEscape} onEnter={handleEnter}
onShiftTab={handleShiftTab} onEscape={handleEscape}
onTab={handleTab} onShiftTab={handleShiftTab}
hotkeyScope={hotkeyScope} onTab={handleTab}
/> hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
); );
}; };

14
front/src/modules/ui/data/field/meta-types/input/components/internal/FieldInputOverlay.tsx Normal file
View File

@ -0,0 +1,14 @@
import styled from '@emotion/styled';
import { overlayBackground } from '@/ui/theme/constants/effects';
const StyledFieldInputOverlay = styled.div`
border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
border-radius: ${({ theme }) => theme.border.radius.sm};
${overlayBackground}
display: flex;
height: 32px;
width: 100%;
`;
export const FieldInputOverlay = StyledFieldInputOverlay;

5
front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx
View File

@ -38,6 +38,11 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
outline: none; outline: none;
} }
} }
& svg {
border-radius: ${({ theme }) => theme.border.radius.xs};
height: 12px;
}
`; `;
export type PhoneInputProps = { export type PhoneInputProps = {

2
front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx
View File

@ -7,8 +7,8 @@ import { useRegisterInputEvents } from '../../hooks/useRegisterInputEvents';
export const StyledInput = styled.input` export const StyledInput = styled.input`
margin: 0; margin: 0;
width: 100%;
${textInputStyle} ${textInputStyle}
width: 100%;
`; `;
type TextInputProps = { type TextInputProps = {

7
front/src/modules/ui/data/inline-cell/components/InlineCellEditMode.tsx
View File

@ -13,14 +13,11 @@ const StyledInlineCellEditModeContainer = styled.div<InlineCellEditModeProps>`
const StyledInlineCellInput = styled.div` const StyledInlineCellInput = styled.div`
align-items: center; align-items: center;
background: ${({ theme }) => theme.background.transparent.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex; display: flex;
margin-left: -1px; margin-left: -1px;
min-height: 32px; min-height: 32px;
min-width: 200px;
width: inherit; width: inherit;
z-index: 10; z-index: 10;

1
front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
View File

@ -29,7 +29,6 @@ export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProp
color: ${({ color }) => color ?? 'none'}; color: ${({ color }) => color ?? 'none'};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
height: 32px; height: 32px;

9
front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownSelect.tsx
View File

@ -20,17 +20,18 @@ const StyledIconContainer = styled.div`
svg { svg {
align-items: center; align-items: center;
border-radius: ${({ theme }) => theme.border.radius.xs};
display: flex; display: flex;
height: 16px; height: 12px;
justify-content: center; justify-content: center;
} }
`; `;
const StyledDropdownMenuContainer = styled.ul` const StyledDropdownMenuContainer = styled.ul`
left: 0; left: 6px;
padding: 0; padding: 0;
position: absolute; position: absolute;
top: 24px; top: 26px;
`; `;
export const CountryPickerDropdownSelect = ({ export const CountryPickerDropdownSelect = ({
@ -57,7 +58,7 @@ export const CountryPickerDropdownSelect = ({
return ( return (
<> <>
<StyledDropdownMenuContainer data-select-disable> <StyledDropdownMenuContainer data-select-disable>
<StyledDropdownMenu width={'240px'}> <StyledDropdownMenu width="240px" disableBlur>
<DropdownMenuSearchInput <DropdownMenuSearchInput
value={searchFilter} value={searchFilter}
onChange={(event) => setSearchFilter(event.currentTarget.value)} onChange={(event) => setSearchFilter(event.currentTarget.value)}

2
front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx
View File

@ -43,7 +43,7 @@ export const SingleEntitySelect = <
onCreate, onCreate,
onEntitySelected, onEntitySelected,
selectedEntity, selectedEntity,
width, width = 200,
}: SingleEntitySelectProps<CustomEntityForSelect>) => { }: SingleEntitySelectProps<CustomEntityForSelect>) => {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);

2
front/src/modules/ui/layout/dropdown/components/StyledDropdownMenu.tsx
View File

@ -7,7 +7,7 @@ export const StyledDropdownMenu = styled.div<{
backdrop-filter: ${({ disableBlur }) => backdrop-filter: ${({ disableBlur }) =>
disableBlur ? 'none' : 'blur(20px)'}; disableBlur ? 'none' : 'blur(20px)'};
background: ${({ theme }) => theme.background.transparent.secondary}; background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium}; border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md}; border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.strong}; box-shadow: ${({ theme }) => theme.boxShadow.strong};