Fixed dropdown blur and unified components (#9062)
- Removed disableBlur property from dropdown because it is no longer needed since there's only one OverlayContainer component so there can be only one blur at a time. - Removed blur CSS properties from every component that used it because one standalone OverlayContainer is able to handle all cases if placed properly. - Also removed disableBackgroundBlur property from SingleRecordSelect - Removed FieldInputOverlay and FieldTextAreaOverlay components that were a first attempt to create something like an OverlayContainer - Used new unified OverlayContainer in RecordInlineCell and RecordTableCell - Fixed ScrollWrapper so that it works well both for dropdown with non overflowing content and dropdown with overflowing content. - Removed export default value on SearchVariablesDropdown as it is not used in this codebase - Refactored SearchVariablesDropdown function as component anti-pattern - Refactored SearchVariablesDropdownFieldItems UI problems with separator and missing ScrollWrapper behavior - Refactored SearchVariablesDropdownObjectItems with UI problems with separator and missing ScrollWrapper behavior - Fixed blur bug on Firefox due to wrong placement of the element that had the CSS property. Blur works on Firefox it it's on the container that has the highest level in the tree. - Fixed bug in ActivityTargetInlineCell by removing an unnecessary container component StyledSelectContainer - Unified problems of field height with a new common component FieldInputContainer, instead of putting width and height at the wrong abstraction level, width and height are a field's concern not a dropdown, overlay or low-level input concern. - Fixed block editor dropdown with new OverlayContainer - Aligning field dropdown with their anchor on inline and table cells, there are still many small pixel misalignments that give a low quality impression. - Fixed FormDateFieldInput that was missing OverlayContainer
This commit is contained in:
Lucas Bordeau
-1
@@ -137,7 +137,6 @@ export const AdvancedFilterAddFilterRuleSelect = ({
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
disableBlur
|
||||
dropdownId={dropdownId}
|
||||
clickableComponent={
|
||||
<LightButton Icon={IconPlus} title="Add filter rule" />
|
||||
|
||||
-1
@@ -22,7 +22,6 @@ export const AdvancedFilterLogicalOperatorDropdown = ({
|
||||
|
||||
return (
|
||||
<Select
|
||||
disableBlur
|
||||
fullWidth
|
||||
dropdownId={`advanced-filter-logical-operator-${viewFilterGroup.id}`}
|
||||
value={viewFilterGroup.logicalOperator}
|
||||
|
||||
-1
@@ -68,7 +68,6 @@ export const AdvancedFilterRuleOptionsDropdown = ({
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
disableBlur
|
||||
dropdownId={dropdownId}
|
||||
clickableComponent={
|
||||
<AdvancedFilterRuleOptionsDropdownButton dropdownId={dropdownId} />
|
||||
|
||||
-1
@@ -41,7 +41,6 @@ export const AdvancedFilterViewFilterFieldSelect = ({
|
||||
return (
|
||||
<StyledContainer>
|
||||
<Dropdown
|
||||
disableBlur
|
||||
dropdownId={advancedFilterDropdownId}
|
||||
clickableComponent={
|
||||
<SelectControl
|
||||
|
||||
-1
@@ -76,7 +76,6 @@ export const AdvancedFilterViewFilterOperandSelect = ({
|
||||
return (
|
||||
<StyledContainer>
|
||||
<Dropdown
|
||||
disableBlur
|
||||
dropdownId={dropdownId}
|
||||
clickableComponent={
|
||||
<SelectControl
|
||||
|
||||
-1
@@ -39,7 +39,6 @@ export const AdvancedFilterViewFilterValueInput = ({
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
disableBlur
|
||||
dropdownId={dropdownId}
|
||||
clickableComponent={
|
||||
<SelectControl
|
||||
|
||||
+2
-2
@@ -98,7 +98,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
|
||||
{/** TODO: Should be removed when view settings contains more options */}
|
||||
{viewType === ViewType.Kanban && (
|
||||
<>
|
||||
<DropdownMenuItemsContainer>
|
||||
<DropdownMenuItemsContainer withoutScrollWrapper>
|
||||
<MenuItem
|
||||
onClick={() => onContentChange('viewSettings')}
|
||||
LeftIcon={IconLayout}
|
||||
@@ -109,7 +109,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
<DropdownMenuItemsContainer>
|
||||
<DropdownMenuItemsContainer withoutScrollWrapper>
|
||||
<MenuItem
|
||||
onClick={() => onContentChange('fields')}
|
||||
LeftIcon={IconTag}
|
||||
|
||||
+1
-4
@@ -81,11 +81,8 @@ const StyledBoardCard = styled.div<{ selected: boolean }>`
|
||||
`;
|
||||
|
||||
const StyledTextInput = styled(TextInput)`
|
||||
backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
|
||||
background: ${({ theme }) => theme.background.primary};
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
||||
width: ${({ theme }) => theme.spacing(53)};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
width: ${({ theme }) => theme.spacing(53)};
|
||||
`;
|
||||
|
||||
const StyledBoardCardWrapper = styled.div`
|
||||
|
||||
+19
-15
@@ -6,6 +6,7 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
||||
import { MenuItem } from 'twenty-ui';
|
||||
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
|
||||
|
||||
const StyledMenuContainer = styled.div`
|
||||
position: absolute;
|
||||
@@ -20,6 +21,7 @@ type RecordBoardColumnDropdownMenuProps = {
|
||||
stageId: string;
|
||||
};
|
||||
|
||||
// TODO: unify and use Dropdown component
|
||||
export const RecordBoardColumnDropdownMenu = ({
|
||||
onClose,
|
||||
}: RecordBoardColumnDropdownMenuProps) => {
|
||||
@@ -39,21 +41,23 @@ export const RecordBoardColumnDropdownMenu = ({
|
||||
|
||||
return (
|
||||
<StyledMenuContainer ref={boardColumnMenuRef}>
|
||||
<DropdownMenu data-select-disable>
|
||||
<DropdownMenuItemsContainer>
|
||||
{recordGroupActions.map((action) => (
|
||||
<MenuItem
|
||||
key={action.id}
|
||||
onClick={() => {
|
||||
action.callback();
|
||||
closeMenu();
|
||||
}}
|
||||
LeftIcon={action.icon}
|
||||
text={action.label}
|
||||
/>
|
||||
))}
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
<OverlayContainer>
|
||||
<DropdownMenu data-select-disable>
|
||||
<DropdownMenuItemsContainer>
|
||||
{recordGroupActions.map((action) => (
|
||||
<MenuItem
|
||||
key={action.id}
|
||||
onClick={() => {
|
||||
action.callback();
|
||||
closeMenu();
|
||||
}}
|
||||
LeftIcon={action.icon}
|
||||
text={action.label}
|
||||
/>
|
||||
))}
|
||||
</DropdownMenuItemsContainer>
|
||||
</DropdownMenu>
|
||||
</OverlayContainer>
|
||||
</StyledMenuContainer>
|
||||
);
|
||||
};
|
||||
|
||||
+3
-17
@@ -1,23 +1,10 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard';
|
||||
import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector';
|
||||
import { SingleRecordSelect } from '@/object-record/relation-picker/components/SingleRecordSelect';
|
||||
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
const StyledCompanyPickerContainer = styled.div`
|
||||
align-items: center;
|
||||
align-self: baseline;
|
||||
background-color: ${({ theme }) => theme.background.primary};
|
||||
border: none;
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
export const RecordBoardColumnNewOpportunity = ({
|
||||
columnId,
|
||||
position,
|
||||
@@ -36,9 +23,8 @@ export const RecordBoardColumnNewOpportunity = ({
|
||||
return (
|
||||
<>
|
||||
{newRecord.isCreating && newRecord.position === position && (
|
||||
<StyledCompanyPickerContainer>
|
||||
<OverlayContainer>
|
||||
<SingleRecordSelect
|
||||
disableBackgroundBlur
|
||||
onCancel={() => handleCreateSuccess(position, columnId, false)}
|
||||
onRecordSelected={(company) =>
|
||||
company ? handleEntitySelect(position, company) : null
|
||||
@@ -47,7 +33,7 @@ export const RecordBoardColumnNewOpportunity = ({
|
||||
recordPickerInstanceId="relation-picker"
|
||||
selectedRecordIds={[]}
|
||||
/>
|
||||
</StyledCompanyPickerContainer>
|
||||
</OverlayContainer>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
+3
-3
@@ -3,7 +3,6 @@ import { FormFieldInputInputContainer } from '@/object-record/record-field/form-
|
||||
import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
|
||||
import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
|
||||
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
|
||||
import { StyledCalendarContainer } from '@/ui/field/input/components/DateInput';
|
||||
import { InputLabel } from '@/ui/input/components/InputLabel';
|
||||
import {
|
||||
InternalDatePicker,
|
||||
@@ -16,6 +15,7 @@ import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate'
|
||||
import { parseDateToString } from '@/ui/input/components/internal/date/utils/parseDateToString';
|
||||
import { parseStringToDate } from '@/ui/input/components/internal/date/utils/parseStringToDate';
|
||||
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
|
||||
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
|
||||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
||||
import { UserContext } from '@/users/contexts/UserContext';
|
||||
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
|
||||
@@ -338,7 +338,7 @@ export const FormDateFieldInput = ({
|
||||
{draftValue.mode === 'edit' ? (
|
||||
<StyledDateInputContainer>
|
||||
<StyledDateInputAbsoluteContainer>
|
||||
<StyledCalendarContainer>
|
||||
<OverlayContainer>
|
||||
<InternalDatePicker
|
||||
date={pickerDate ?? new Date()}
|
||||
isDateTimeInput={false}
|
||||
@@ -349,7 +349,7 @@ export const FormDateFieldInput = ({
|
||||
onClear={handlePickerClear}
|
||||
hideHeaderInput
|
||||
/>
|
||||
</StyledCalendarContainer>
|
||||
</OverlayContainer>
|
||||
</StyledDateInputAbsoluteContainer>
|
||||
</StyledDateInputContainer>
|
||||
) : null}
|
||||
|
||||
+16
-13
@@ -9,6 +9,7 @@ import { SelectOption } from '@/spreadsheet-import/types';
|
||||
import { SelectDisplay } from '@/ui/field/display/components/SelectDisplay';
|
||||
import { SelectInput } from '@/ui/field/input/components/SelectInput';
|
||||
import { InputLabel } from '@/ui/input/components/InputLabel';
|
||||
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
|
||||
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
|
||||
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
|
||||
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
||||
@@ -238,19 +239,21 @@ export const FormSelectFieldInput = ({
|
||||
<StyledSelectInputContainer>
|
||||
{draftValue.type === 'static' &&
|
||||
draftValue.editingMode === 'edit' && (
|
||||
<SelectInput
|
||||
selectableListId={SINGLE_RECORD_SELECT_BASE_LIST}
|
||||
selectableItemIdArray={optionIds}
|
||||
hotkeyScope={hotkeyScope}
|
||||
onEnter={handleSelectEnter}
|
||||
onOptionSelected={handleSubmit}
|
||||
options={options}
|
||||
onCancel={onCancel}
|
||||
defaultOption={selectedOption}
|
||||
onFilterChange={setFilteredOptions}
|
||||
onClear={handleClearField}
|
||||
clearLabel={clearLabel}
|
||||
/>
|
||||
<OverlayContainer>
|
||||
<SelectInput
|
||||
selectableListId={SINGLE_RECORD_SELECT_BASE_LIST}
|
||||
selectableItemIdArray={optionIds}
|
||||
hotkeyScope={hotkeyScope}
|
||||
onEnter={handleSelectEnter}
|
||||
onOptionSelected={handleSubmit}
|
||||
options={options}
|
||||
onCancel={onCancel}
|
||||
defaultOption={selectedOption}
|
||||
onFilterChange={setFilteredOptions}
|
||||
onClear={handleClearField}
|
||||
clearLabel={clearLabel}
|
||||
/>
|
||||
</OverlayContainer>
|
||||
)}
|
||||
</StyledSelectInputContainer>
|
||||
|
||||
|
||||
+14
-17
@@ -4,7 +4,6 @@ import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
|
||||
import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { CurrencyInput } from '@/ui/field/input/components/CurrencyInput';
|
||||
|
||||
import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
|
||||
import { useCurrencyField } from '../../hooks/useCurrencyField';
|
||||
|
||||
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
|
||||
@@ -118,21 +117,19 @@ export const CurrencyFieldInput = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<FieldInputOverlay>
|
||||
<CurrencyInput
|
||||
value={draftValue?.amount?.toString() ?? ''}
|
||||
currencyCode={currencyCode}
|
||||
autoFocus
|
||||
placeholder="Currency"
|
||||
onClickOutside={handleClickOutside}
|
||||
onEnter={handleEnter}
|
||||
onEscape={handleEscape}
|
||||
onShiftTab={handleShiftTab}
|
||||
onTab={handleTab}
|
||||
onChange={handleChange}
|
||||
onSelect={handleSelect}
|
||||
hotkeyScope={hotkeyScope}
|
||||
/>
|
||||
</FieldInputOverlay>
|
||||
<CurrencyInput
|
||||
value={draftValue?.amount?.toString() ?? ''}
|
||||
currencyCode={currencyCode}
|
||||
autoFocus
|
||||
placeholder="Currency"
|
||||
onClickOutside={handleClickOutside}
|
||||
onEnter={handleEnter}
|
||||
onEscape={handleEscape}
|
||||
onShiftTab={handleShiftTab}
|
||||
onTab={handleTab}
|
||||
onChange={handleChange}
|
||||
onSelect={handleSelect}
|
||||
hotkeyScope={hotkeyScope}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
+18
-21
@@ -1,7 +1,6 @@
|
||||
import { useFullNameField } from '@/object-record/record-field/meta-types/hooks/useFullNameField';
|
||||
import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText';
|
||||
import { DoubleTextInput } from '@/ui/field/input/components/DoubleTextInput';
|
||||
import { FieldInputOverlay } from '@/ui/field/input/components/FieldInputOverlay';
|
||||
|
||||
import { FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/FirstNamePlaceholder';
|
||||
import { LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/LastNamePlaceholder';
|
||||
@@ -79,25 +78,23 @@ export const FullNameFieldInput = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<FieldInputOverlay>
|
||||
<DoubleTextInput
|
||||
firstValue={draftValue?.firstName ?? ''}
|
||||
secondValue={draftValue?.lastName ?? ''}
|
||||
firstValuePlaceholder={
|
||||
FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
|
||||
}
|
||||
secondValuePlaceholder={
|
||||
LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
|
||||
}
|
||||
onClickOutside={handleClickOutside}
|
||||
onEnter={handleEnter}
|
||||
onEscape={handleEscape}
|
||||
onShiftTab={handleShiftTab}
|
||||
onTab={handleTab}
|
||||
onPaste={handlePaste}
|
||||
hotkeyScope={hotkeyScope}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FieldInputOverlay>
|
||||
<DoubleTextInput
|
||||
firstValue={draftValue?.firstName ?? ''}
|
||||
secondValue={draftValue?.lastName ?? ''}
|
||||
firstValuePlaceholder={
|
||||
FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
|
||||
}
|
||||
secondValuePlaceholder={
|
||||
LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS
|
||||
}
|
||||
onClickOutside={handleClickOutside}
|
||||
onEnter={handleEnter}
|
||||
onEscape={handleEscape}
|
||||
onShiftTab={handleShiftTab}
|
||||
onTab={handleTab}
|
||||
onPaste={handlePaste}
|
||||
hotkeyScope={hotkeyScope}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
+2
-8
@@ -1,4 +1,3 @@
|
||||
import styled from '@emotion/styled';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Key } from 'ts-key-enum';
|
||||
import { IconCheck, IconPlus, LightIconButton, MenuItem } from 'twenty-ui';
|
||||
@@ -18,11 +17,6 @@ import { moveArrayItem } from '~/utils/array/moveArrayItem';
|
||||
import { toSpliced } from '~/utils/array/toSpliced';
|
||||
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
|
||||
|
||||
const StyledDropdownMenu = styled(DropdownMenu)`
|
||||
margin: -1px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
type MultiItemFieldInputProps<T> = {
|
||||
items: T[];
|
||||
onPersist: (updatedItems: T[]) => void;
|
||||
@@ -164,7 +158,7 @@ export const MultiItemFieldInput = <T,>({
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledDropdownMenu ref={containerRef} width={200}>
|
||||
<DropdownMenu ref={containerRef} width={200}>
|
||||
{!!items.length && (
|
||||
<>
|
||||
<DropdownMenuItemsContainer>
|
||||
@@ -222,6 +216,6 @@ export const MultiItemFieldInput = <T,>({
|
||||
/>
|
||||
</DropdownMenuItemsContainer>
|
||||
)}
|
||||
</StyledDropdownMenu>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
|
||||
+4
-4
@@ -1,8 +1,8 @@
|
||||
import { TextInput } from '@/ui/field/input/components/TextInput';
|
||||
|
||||
import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
|
||||
import { useNumberField } from '../../hooks/useNumberField';
|
||||
import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput';
|
||||
import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
|
||||
import { useNumberField } from '../../hooks/useNumberField';
|
||||
|
||||
export type FieldInputEvent = (persist: () => void) => void;
|
||||
|
||||
@@ -57,7 +57,7 @@ export const NumberFieldInput = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<FieldInputOverlay>
|
||||
<FieldInputContainer>
|
||||
<TextInput
|
||||
placeholder={fieldDefinition.metadata.placeHolder}
|
||||
autoFocus
|
||||
@@ -70,6 +70,6 @@ export const NumberFieldInput = ({
|
||||
hotkeyScope={hotkeyScope}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FieldInputOverlay>
|
||||
</FieldInputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
-1
@@ -18,7 +18,6 @@ export const DEFAULT_PHONE_COUNTRY_CODE = '1';
|
||||
|
||||
const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
|
||||
font-family: ${({ theme }) => theme.font.family};
|
||||
height: 32px;
|
||||
${TEXT_INPUT_STYLE}
|
||||
padding: 0;
|
||||
|
||||
|
||||
+13
-16
@@ -1,4 +1,3 @@
|
||||
import { FieldTextAreaOverlay } from '@/ui/field/input/components/FieldTextAreaOverlay';
|
||||
import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
|
||||
|
||||
import { useJsonField } from '../../hooks/useJsonField';
|
||||
@@ -59,20 +58,18 @@ export const RawJsonFieldInput = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<FieldTextAreaOverlay>
|
||||
<TextAreaInput
|
||||
placeholder={fieldDefinition.metadata.placeHolder}
|
||||
autoFocus
|
||||
value={draftValue ?? ''}
|
||||
onClickOutside={handleClickOutside}
|
||||
onEnter={handleEnter}
|
||||
onEscape={handleEscape}
|
||||
onShiftTab={handleShiftTab}
|
||||
onTab={handleTab}
|
||||
hotkeyScope={hotkeyScope}
|
||||
onChange={handleChange}
|
||||
maxRows={25}
|
||||
/>
|
||||
</FieldTextAreaOverlay>
|
||||
<TextAreaInput
|
||||
placeholder={fieldDefinition.metadata.placeHolder}
|
||||
autoFocus
|
||||
value={draftValue ?? ''}
|
||||
onClickOutside={handleClickOutside}
|
||||
onEnter={handleEnter}
|
||||
onEscape={handleEscape}
|
||||
onShiftTab={handleShiftTab}
|
||||
onTab={handleTab}
|
||||
hotkeyScope={hotkeyScope}
|
||||
onChange={handleChange}
|
||||
maxRows={25}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
+7
-17
@@ -1,5 +1,3 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { RelationPicker } from '@/object-record/relation-picker/components/RelationPicker';
|
||||
import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
|
||||
|
||||
@@ -8,12 +6,6 @@ import { useRelationField } from '../../hooks/useRelationField';
|
||||
|
||||
import { FieldInputEvent } from './DateTimeFieldInput';
|
||||
|
||||
const StyledRelationPickerContainer = styled.div`
|
||||
left: -1px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
`;
|
||||
|
||||
export type RelationToOneFieldInputProps = {
|
||||
onSubmit?: FieldInputEvent;
|
||||
onCancel?: () => void;
|
||||
@@ -33,14 +25,12 @@ export const RelationToOneFieldInput = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledRelationPickerContainer>
|
||||
<RelationPicker
|
||||
fieldDefinition={fieldDefinition}
|
||||
selectedRecordId={fieldValue?.id}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={onCancel}
|
||||
initialSearchFilter={initialSearchValue}
|
||||
/>
|
||||
</StyledRelationPickerContainer>
|
||||
<RelationPicker
|
||||
fieldDefinition={fieldDefinition}
|
||||
selectedRecordId={fieldValue?.id}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={onCancel}
|
||||
initialSearchFilter={initialSearchValue}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
+3
-3
@@ -1,9 +1,9 @@
|
||||
import { FieldTextAreaOverlay } from '@/ui/field/input/components/FieldTextAreaOverlay';
|
||||
import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
|
||||
|
||||
import { usePersistField } from '../../../hooks/usePersistField';
|
||||
import { useTextField } from '../../hooks/useTextField';
|
||||
|
||||
import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
|
||||
import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly';
|
||||
import {
|
||||
FieldInputClickOutsideEvent,
|
||||
@@ -57,7 +57,7 @@ export const TextFieldInput = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<FieldTextAreaOverlay>
|
||||
<FieldInputContainer>
|
||||
<TextAreaInput
|
||||
placeholder={fieldDefinition.metadata.placeHolder}
|
||||
autoFocus
|
||||
@@ -70,6 +70,6 @@ export const TextFieldInput = ({
|
||||
hotkeyScope={hotkeyScope}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FieldTextAreaOverlay>
|
||||
</FieldInputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
+1
@@ -9,6 +9,7 @@ const StyledInlineCellButtonContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => {
|
||||
return (
|
||||
<AnimatedContainer>
|
||||
|
||||
+5
-14
@@ -1,4 +1,5 @@
|
||||
import { RecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
|
||||
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
|
||||
import styled from '@emotion/styled';
|
||||
import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
|
||||
import { useContext } from 'react';
|
||||
@@ -11,24 +12,14 @@ const StyledInlineCellEditModeContainer = styled.div`
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
`;
|
||||
|
||||
const StyledInlineCellInput = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
min-height: 32px;
|
||||
|
||||
width: 240px;
|
||||
|
||||
z-index: 30;
|
||||
background: transparent;
|
||||
`;
|
||||
|
||||
type RecordInlineCellEditModeProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
// TODO: Refactor this to avoid setting absolute px values.
|
||||
export const RecordInlineCellEditMode = ({
|
||||
children,
|
||||
}: RecordInlineCellEditModeProps) => {
|
||||
@@ -46,7 +37,7 @@ export const RecordInlineCellEditMode = ({
|
||||
}
|
||||
: {
|
||||
mainAxis: -29,
|
||||
crossAxis: -4,
|
||||
crossAxis: -5,
|
||||
},
|
||||
),
|
||||
],
|
||||
@@ -59,9 +50,9 @@ export const RecordInlineCellEditMode = ({
|
||||
data-testid="inline-cell-edit-mode-container"
|
||||
>
|
||||
{createPortal(
|
||||
<StyledInlineCellInput ref={refs.setFloating} style={floatingStyles}>
|
||||
<OverlayContainer ref={refs.setFloating} style={floatingStyles}>
|
||||
{children}
|
||||
</StyledInlineCellInput>,
|
||||
</OverlayContainer>,
|
||||
document.body,
|
||||
)}
|
||||
</StyledInlineCellEditModeContainer>
|
||||
|
||||
+1
@@ -11,6 +11,7 @@ const StyledClickableContainer = styled.div<{
|
||||
readonly?: boolean;
|
||||
isCentered?: boolean;
|
||||
}>`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
width: 100%;
|
||||
|
||||
+5
-14
@@ -1,3 +1,4 @@
|
||||
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
|
||||
import styled from '@emotion/styled';
|
||||
import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
|
||||
import { ReactElement } from 'react';
|
||||
@@ -12,16 +13,6 @@ const StyledEditableCellEditModeContainer = styled.div<RecordTableCellEditModePr
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const StyledTableCellInput = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
min-height: 32px;
|
||||
min-width: 200px;
|
||||
|
||||
z-index: 10;
|
||||
`;
|
||||
|
||||
export type RecordTableCellEditModeProps = {
|
||||
children: ReactElement;
|
||||
transparent?: boolean;
|
||||
@@ -37,8 +28,8 @@ export const RecordTableCellEditMode = ({
|
||||
middleware: [
|
||||
flip(),
|
||||
offset({
|
||||
mainAxis: -31,
|
||||
crossAxis: -2,
|
||||
mainAxis: -33,
|
||||
crossAxis: -3,
|
||||
}),
|
||||
],
|
||||
whileElementsMounted: autoUpdate,
|
||||
@@ -49,9 +40,9 @@ export const RecordTableCellEditMode = ({
|
||||
ref={refs.setReference}
|
||||
data-testid="editable-cell-edit-mode-container"
|
||||
>
|
||||
<StyledTableCellInput ref={refs.setFloating} style={floatingStyles}>
|
||||
<OverlayContainer ref={refs.setFloating} style={floatingStyles}>
|
||||
{children}
|
||||
</StyledTableCellInput>
|
||||
</OverlayContainer>
|
||||
</StyledEditableCellEditModeContainer>
|
||||
);
|
||||
};
|
||||
|
||||
+2
-1
@@ -96,6 +96,7 @@ export const MultiRecordSelect = ({
|
||||
[setSearchFilter],
|
||||
);
|
||||
|
||||
// TODO: refactor this in a separate component
|
||||
const results = (
|
||||
<DropdownMenuItemsContainer hasMaxHeight>
|
||||
<SelectableList
|
||||
@@ -139,7 +140,7 @@ export const MultiRecordSelect = ({
|
||||
onSubmit?.();
|
||||
}}
|
||||
/>
|
||||
<DropdownMenu ref={containerRef} data-select-disable>
|
||||
<DropdownMenu ref={containerRef} data-select-disable width={200}>
|
||||
{dropdownPlacement?.includes('end') && (
|
||||
<>
|
||||
{isDefined(onCreate) && (
|
||||
|
||||
+1
-8
@@ -9,12 +9,10 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
|
||||
export type SingleRecordSelectProps = {
|
||||
disableBackgroundBlur?: boolean;
|
||||
width?: number;
|
||||
} & SingleRecordSelectMenuItemsWithSearchProps;
|
||||
|
||||
export const SingleRecordSelect = ({
|
||||
disableBackgroundBlur = false,
|
||||
EmptyIcon,
|
||||
emptyLabel,
|
||||
excludedRecordIds,
|
||||
@@ -45,12 +43,7 @@ export const SingleRecordSelect = ({
|
||||
});
|
||||
|
||||
return (
|
||||
<DropdownMenu
|
||||
disableBlur={disableBackgroundBlur}
|
||||
ref={containerRef}
|
||||
width={width}
|
||||
data-select-disable
|
||||
>
|
||||
<DropdownMenu ref={containerRef} width={width} data-select-disable>
|
||||
<SingleRecordSelectMenuItemsWithSearch
|
||||
{...{
|
||||
EmptyIcon,
|
||||
|
||||
Reference in New Issue
Block a user