diff --git a/ee/packages/git-sync-manager/src/models.ts b/ee/packages/git-sync-manager/src/models.ts index 41da155cdd..b7b694a531 100644 --- a/ee/packages/git-sync-manager/src/models.ts +++ b/ee/packages/git-sync-manager/src/models.ts @@ -724,6 +724,7 @@ export enum EnumDataType { DateTime = 'DateTime', DecimalNumber = 'DecimalNumber', Email = 'Email', + File = 'File', GeographicLocation = 'GeographicLocation', Id = 'Id', Json = 'Json', diff --git a/libs/ui/design-system/src/lib/components/SelectField/SelectField.scss b/libs/ui/design-system/src/lib/components/SelectField/SelectField.scss index 2b3a71a1fc..af1476dd8e 100644 --- a/libs/ui/design-system/src/lib/components/SelectField/SelectField.scss +++ b/libs/ui/design-system/src/lib/components/SelectField/SelectField.scss @@ -22,6 +22,7 @@ .select-field__control { @include textField; padding: 0; + height: auto; &--is-focused, &:hover { diff --git a/libs/ui/design-system/src/lib/components/SelectField/SelectField.tsx b/libs/ui/design-system/src/lib/components/SelectField/SelectField.tsx index a0e426e363..e4cf3648ab 100644 --- a/libs/ui/design-system/src/lib/components/SelectField/SelectField.tsx +++ b/libs/ui/design-system/src/lib/components/SelectField/SelectField.tsx @@ -9,6 +9,7 @@ import Select, { MultiValue, SingleValue, } from "react-select"; +import Creatable from "react-select/creatable"; import { OptionItem } from "../types"; import { LABEL_CLASS, LABEL_VALUE_CLASS } from "../constants"; import { Props as InputToolTipProps } from "../InputTooltip/InputTooltip"; @@ -22,6 +23,7 @@ export type Props = { options: OptionItem[]; isMulti?: boolean; isClearable?: boolean; + isCreatable?: boolean; disabled?: boolean; inputToolTip?: InputToolTipProps | undefined; }; @@ -32,6 +34,7 @@ export const SelectField = ({ options, isMulti, isClearable, + isCreatable, disabled, inputToolTip, }: Props) => { @@ -55,10 +58,21 @@ export const SelectField = ({ const value = useMemo(() => { const values = field.value || []; + if (isCreatable && isMulti && Array.isArray(values)) { + const currOptions = options.filter((option) => + values.includes(option.value) + ); + const newOptions = values + .filter((value) => !options.find((option) => option.value === value)) + .map((value) => ({ value, label: value })); + + return [...currOptions, ...newOptions]; + } + return isMulti ? options.filter((option) => values.includes(option.value)) : options.find((option) => option.value === values); - }, [field, isMulti, options]); + }, [field, isMulti, options, isCreatable]); const groupedOptions = useMemo(() => { if (!options || options.length === 0) { @@ -93,18 +107,37 @@ export const SelectField = ({ >