@payloadcms/ui 4.0.0-internal.0b9bec1 → 4.0.0-internal.167c7cd
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/app.css +121 -0
- package/dist/css/forms.css +0 -6
- package/dist/css/spacing.css +10 -3
- package/dist/css/z-index.css +1 -0
- package/dist/elements/AddNewRelation/index.css +0 -1
- package/dist/elements/AppHeader/index.css +0 -3
- package/dist/elements/AppHeader/index.d.ts.map +1 -1
- package/dist/elements/AppHeader/index.js +5 -1
- package/dist/elements/AppHeader/index.js.map +1 -1
- package/dist/elements/BulkUpload/EditMany/DrawerContent.js +2 -2
- package/dist/elements/BulkUpload/EditMany/DrawerContent.js.map +1 -1
- package/dist/elements/CodeEditor/index.css +0 -5
- package/dist/elements/CommandPalette/index.css +0 -7
- package/dist/elements/CreateDocumentButton/index.d.ts.map +1 -1
- package/dist/elements/CreateDocumentButton/index.js +4 -1
- package/dist/elements/CreateDocumentButton/index.js.map +1 -1
- package/dist/elements/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/elements/DatePicker/DatePicker.js +1 -0
- package/dist/elements/DatePicker/DatePicker.js.map +1 -1
- package/dist/elements/DatePicker/index.css +1 -1
- package/dist/elements/DeleteDocument/index.d.ts.map +1 -1
- package/dist/elements/DeleteDocument/index.js +16 -1
- package/dist/elements/DeleteDocument/index.js.map +1 -1
- package/dist/elements/EditMany/DrawerContent.js +2 -2
- package/dist/elements/EditMany/DrawerContent.js.map +1 -1
- package/dist/elements/FieldSelect/reduceFieldOptions.d.ts.map +1 -1
- package/dist/elements/FieldSelect/reduceFieldOptions.js +3 -1
- package/dist/elements/FieldSelect/reduceFieldOptions.js.map +1 -1
- package/dist/elements/FieldSelect/reduceFieldOptions.spec.js +143 -0
- package/dist/elements/FieldSelect/reduceFieldOptions.spec.js.map +1 -0
- package/dist/elements/FileDetails/StaticFileDetails/index.css +8 -9
- package/dist/elements/FileManager/index.js +1 -0
- package/dist/elements/FileManager/index.js.map +1 -1
- package/dist/elements/Hierarchy/ColumnBrowser/ColumnItem/index.css +0 -1
- package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.d.ts.map +1 -1
- package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.js +109 -89
- package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.js.map +1 -1
- package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.server.d.ts.map +1 -1
- package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.server.js +2 -0
- package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.server.js.map +1 -1
- package/dist/elements/Hierarchy/Tree/TreeNode/index.css +0 -1
- package/dist/elements/InputStepper/index.css +0 -1
- package/dist/elements/Locked/index.css +0 -8
- package/dist/elements/Locked/index.d.ts.map +1 -1
- package/dist/elements/Locked/index.js +70 -64
- package/dist/elements/Locked/index.js.map +1 -1
- package/dist/elements/Nav/SidebarTabs/index.client.d.ts.map +1 -1
- package/dist/elements/Nav/SidebarTabs/index.client.js +12 -5
- package/dist/elements/Nav/SidebarTabs/index.client.js.map +1 -1
- package/dist/elements/Nav/SidebarTabs/index.css +0 -5
- package/dist/elements/Nav/SidebarTabs/renderTabServerFn.d.ts +1 -0
- package/dist/elements/Nav/SidebarTabs/renderTabServerFn.d.ts.map +1 -1
- package/dist/elements/Nav/SidebarTabs/renderTabServerFn.js +2 -1
- package/dist/elements/Nav/SidebarTabs/renderTabServerFn.js.map +1 -1
- package/dist/elements/NavGroup/index.css +0 -1
- package/dist/elements/PreviewButton/index.d.ts +1 -2
- package/dist/elements/PreviewButton/index.d.ts.map +1 -1
- package/dist/elements/PreviewButton/index.js +11 -5
- package/dist/elements/PreviewButton/index.js.map +1 -1
- package/dist/elements/PreviewSizes/index.css +8 -9
- package/dist/elements/ReactSelect/ClearIndicator/index.css +0 -1
- package/dist/elements/ReactSelect/MultiValue/index.css +0 -1
- package/dist/elements/ReactSelect/index.css +0 -3
- package/dist/elements/RelationshipTable/index.d.ts.map +1 -1
- package/dist/elements/RelationshipTable/index.js +32 -0
- package/dist/elements/RelationshipTable/index.js.map +1 -1
- package/dist/elements/SelectRow/index.d.ts +4 -3
- package/dist/elements/SelectRow/index.d.ts.map +1 -1
- package/dist/elements/SelectRow/index.js +10 -7
- package/dist/elements/SelectRow/index.js.map +1 -1
- package/dist/elements/SidebarToggle/index.css +0 -17
- package/dist/elements/SortColumn/index.d.ts.map +1 -1
- package/dist/elements/SortColumn/index.js +42 -38
- package/dist/elements/SortColumn/index.js.map +1 -1
- package/dist/elements/Tooltip/index.css +15 -34
- package/dist/elements/Tooltip/index.d.ts +11 -3
- package/dist/elements/Tooltip/index.d.ts.map +1 -1
- package/dist/elements/Tooltip/index.js +151 -85
- package/dist/elements/Tooltip/index.js.map +1 -1
- package/dist/elements/Upload/index.css +0 -5
- package/dist/exports/client/index.d.ts +3 -0
- package/dist/exports/client/index.d.ts.map +1 -1
- package/dist/exports/client/index.js +1 -1
- package/dist/exports/client/index.js.map +3 -3
- package/dist/fields/Checkbox/Input.d.ts +2 -0
- package/dist/fields/Checkbox/Input.d.ts.map +1 -1
- package/dist/fields/Checkbox/Input.js +32 -26
- package/dist/fields/Checkbox/Input.js.map +1 -1
- package/dist/fields/Checkbox/index.css +37 -73
- package/dist/fields/FieldError/index.css +0 -9
- package/dist/fields/FieldError/index.d.ts.map +1 -1
- package/dist/fields/FieldError/index.js +19 -9
- package/dist/fields/FieldError/index.js.map +1 -1
- package/dist/fields/RadioGroup/index.css +0 -7
- package/dist/fields/Relationship/Input.d.ts.map +1 -1
- package/dist/fields/Relationship/Input.js +32 -14
- package/dist/fields/Relationship/Input.js.map +1 -1
- package/dist/fields/Slug/index.css +0 -1
- package/dist/fields/Slug/index.d.ts.map +1 -1
- package/dist/fields/Slug/index.js +80 -125
- package/dist/fields/Slug/index.js.map +1 -1
- package/dist/forms/Form/fieldReducer.d.ts.map +1 -1
- package/dist/forms/Form/fieldReducer.js +3 -1
- package/dist/forms/Form/fieldReducer.js.map +1 -1
- package/dist/forms/Form/index.d.ts.map +1 -1
- package/dist/forms/Form/index.js +6 -1
- package/dist/forms/Form/index.js.map +1 -1
- package/dist/forms/Form/types.d.ts +1 -1
- package/dist/forms/Form/types.d.ts.map +1 -1
- package/dist/forms/Form/types.js.map +1 -1
- package/dist/forms/WatchChildErrors/index.d.ts.map +1 -1
- package/dist/forms/WatchChildErrors/index.js +2 -2
- package/dist/forms/WatchChildErrors/index.js.map +1 -1
- package/dist/forms/fieldSchemasToFormState/addFieldStatePromise.js +1 -1
- package/dist/forms/fieldSchemasToFormState/addFieldStatePromise.js.map +1 -1
- package/dist/forms/fieldSchemasToFormState/renderField.d.ts.map +1 -1
- package/dist/forms/fieldSchemasToFormState/renderField.js +1 -3
- package/dist/forms/fieldSchemasToFormState/renderField.js.map +1 -1
- package/dist/layouts/Root/index.d.ts +1 -1
- package/dist/layouts/Root/index.d.ts.map +1 -1
- package/dist/layouts/Root/index.js +8 -2
- package/dist/layouts/Root/index.js.map +1 -1
- package/dist/providers/Embed/index.d.ts +24 -0
- package/dist/providers/Embed/index.d.ts.map +1 -0
- package/dist/providers/Embed/index.js +105 -0
- package/dist/providers/Embed/index.js.map +1 -0
- package/dist/providers/FormErrorHandler/index.d.ts +20 -0
- package/dist/providers/FormErrorHandler/index.d.ts.map +1 -0
- package/dist/providers/FormErrorHandler/index.js +6 -0
- package/dist/providers/FormErrorHandler/index.js.map +1 -0
- package/dist/providers/Root/index.d.ts +1 -0
- package/dist/providers/Root/index.d.ts.map +1 -1
- package/dist/providers/Root/index.js +33 -27
- package/dist/providers/Root/index.js.map +1 -1
- package/dist/providers/SidebarTabs/index.d.ts +3 -2
- package/dist/providers/SidebarTabs/index.d.ts.map +1 -1
- package/dist/providers/SidebarTabs/index.js.map +1 -1
- package/dist/providers/Theme/index.d.ts +3 -0
- package/dist/providers/Theme/index.d.ts.map +1 -1
- package/dist/providers/Theme/index.js +107 -95
- package/dist/providers/Theme/index.js.map +1 -1
- package/dist/styles.css +12 -10
- package/dist/utilities/combineFieldLabel.d.ts.map +1 -1
- package/dist/utilities/combineFieldLabel.js +5 -1
- package/dist/utilities/combineFieldLabel.js.map +1 -1
- package/dist/utilities/generateFieldID.d.ts +1 -1
- package/dist/utilities/generateFieldID.d.ts.map +1 -1
- package/dist/utilities/generateFieldID.js +2 -2
- package/dist/utilities/generateFieldID.js.map +1 -1
- package/dist/utilities/getRequestEmbed.d.ts +14 -0
- package/dist/utilities/getRequestEmbed.d.ts.map +1 -0
- package/dist/utilities/getRequestEmbed.js +10 -0
- package/dist/utilities/getRequestEmbed.js.map +1 -0
- package/dist/utilities/renderTable.d.ts.map +1 -1
- package/dist/utilities/renderTable.js +18 -2
- package/dist/utilities/renderTable.js.map +1 -1
- package/dist/utilities/slugify.d.ts.map +1 -1
- package/dist/utilities/slugify.js +49 -6
- package/dist/utilities/slugify.js.map +1 -1
- package/dist/views/Dashboard/Default/ModularDashboard/index.css +0 -8
- package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.js +4 -4
- package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.js.map +1 -1
- package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js +10 -10
- package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js.map +1 -1
- package/dist/views/List/index.d.ts.map +1 -1
- package/dist/views/List/index.js +4 -0
- package/dist/views/List/index.js.map +1 -1
- package/dist/views/Logout/index.d.ts.map +1 -1
- package/dist/views/Logout/index.js +11 -0
- package/dist/views/Logout/index.js.map +1 -1
- package/package.json +5 -10
- package/dist/scss/app.scss +0 -183
- package/dist/scss/colors.scss +0 -191
- package/dist/scss/custom.css +0 -1
- package/dist/scss/queries.scss +0 -27
- package/dist/scss/styles.scss +0 -9
- package/dist/scss/svg.scss +0 -10
- package/dist/scss/toastify.scss +0 -61
- package/dist/scss/vars.scss +0 -192
- package/dist/scss/z-index.scss +0 -9
|
@@ -10,11 +10,13 @@ import { CheckIcon } from '../../icons/Check/index.js';
|
|
|
10
10
|
import { LineIcon } from '../../icons/Line/index.js';
|
|
11
11
|
export const inputBaseClass = 'checkbox-input';
|
|
12
12
|
export const CheckboxInput = t0 => {
|
|
13
|
-
const $ = _c(
|
|
13
|
+
const $ = _c(37);
|
|
14
14
|
const {
|
|
15
15
|
id: idFromProps,
|
|
16
16
|
name,
|
|
17
17
|
AfterInput,
|
|
18
|
+
"aria-label": ariaLabelFromProps,
|
|
19
|
+
"aria-labelledby": ariaLabelledByFromProps,
|
|
18
20
|
BeforeInput,
|
|
19
21
|
checked,
|
|
20
22
|
className,
|
|
@@ -35,6 +37,8 @@ export const CheckboxInput = t0 => {
|
|
|
35
37
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
36
38
|
const fallbackID = useId();
|
|
37
39
|
const id = idFromProps || fallbackID;
|
|
40
|
+
const ariaLabel = ariaLabelFromProps || undefined;
|
|
41
|
+
const ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps || name;
|
|
38
42
|
let t2;
|
|
39
43
|
let t3;
|
|
40
44
|
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
@@ -85,10 +89,10 @@ export const CheckboxInput = t0 => {
|
|
|
85
89
|
}
|
|
86
90
|
const t12 = Boolean(checked);
|
|
87
91
|
let t13;
|
|
88
|
-
if ($[12] !== AfterInput || $[13] !== BeforeInput || $[14] !== Error || $[15] !== Label || $[16] !==
|
|
92
|
+
if ($[12] !== AfterInput || $[13] !== BeforeInput || $[14] !== Error || $[15] !== Label || $[16] !== ariaLabel || $[17] !== ariaLabelledBy || $[18] !== checked || $[19] !== id || $[20] !== inputRef || $[21] !== label || $[22] !== localized || $[23] !== name || $[24] !== onToggle || $[25] !== partialChecked || $[26] !== readOnly || $[27] !== required || $[28] !== showTooltip || $[29] !== t10 || $[30] !== t11 || $[31] !== t12 || $[32] !== t9 || $[33] !== tooltip) {
|
|
89
93
|
const t14 = _jsx("input", {
|
|
90
|
-
"aria-label":
|
|
91
|
-
"aria-labelledby":
|
|
94
|
+
"aria-label": ariaLabel,
|
|
95
|
+
"aria-labelledby": ariaLabelledBy,
|
|
92
96
|
checked: t12,
|
|
93
97
|
disabled: readOnly,
|
|
94
98
|
id,
|
|
@@ -101,12 +105,12 @@ export const CheckboxInput = t0 => {
|
|
|
101
105
|
});
|
|
102
106
|
const t15 = !checked && partialChecked ? "partial" : "check";
|
|
103
107
|
let t16;
|
|
104
|
-
if ($[
|
|
108
|
+
if ($[35] !== t15) {
|
|
105
109
|
t16 = [`${inputBaseClass}__icon`, t15].filter(Boolean);
|
|
106
|
-
$[
|
|
107
|
-
$[
|
|
110
|
+
$[35] = t15;
|
|
111
|
+
$[36] = t16;
|
|
108
112
|
} else {
|
|
109
|
-
t16 = $[
|
|
113
|
+
t16 = $[36];
|
|
110
114
|
}
|
|
111
115
|
t13 = _jsxs("div", {
|
|
112
116
|
className: t9,
|
|
@@ -140,25 +144,27 @@ export const CheckboxInput = t0 => {
|
|
|
140
144
|
$[13] = BeforeInput;
|
|
141
145
|
$[14] = Error;
|
|
142
146
|
$[15] = Label;
|
|
143
|
-
$[16] =
|
|
144
|
-
$[17] =
|
|
145
|
-
$[18] =
|
|
146
|
-
$[19] =
|
|
147
|
-
$[20] =
|
|
148
|
-
$[21] =
|
|
149
|
-
$[22] =
|
|
150
|
-
$[23] =
|
|
151
|
-
$[24] =
|
|
152
|
-
$[25] =
|
|
153
|
-
$[26] =
|
|
154
|
-
$[27] =
|
|
155
|
-
$[28] =
|
|
156
|
-
$[29] =
|
|
157
|
-
$[30] =
|
|
158
|
-
$[31] =
|
|
159
|
-
$[32] =
|
|
147
|
+
$[16] = ariaLabel;
|
|
148
|
+
$[17] = ariaLabelledBy;
|
|
149
|
+
$[18] = checked;
|
|
150
|
+
$[19] = id;
|
|
151
|
+
$[20] = inputRef;
|
|
152
|
+
$[21] = label;
|
|
153
|
+
$[22] = localized;
|
|
154
|
+
$[23] = name;
|
|
155
|
+
$[24] = onToggle;
|
|
156
|
+
$[25] = partialChecked;
|
|
157
|
+
$[26] = readOnly;
|
|
158
|
+
$[27] = required;
|
|
159
|
+
$[28] = showTooltip;
|
|
160
|
+
$[29] = t10;
|
|
161
|
+
$[30] = t11;
|
|
162
|
+
$[31] = t12;
|
|
163
|
+
$[32] = t9;
|
|
164
|
+
$[33] = tooltip;
|
|
165
|
+
$[34] = t13;
|
|
160
166
|
} else {
|
|
161
|
-
t13 = $[
|
|
167
|
+
t13 = $[34];
|
|
162
168
|
}
|
|
163
169
|
return t13;
|
|
164
170
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["c","_c","React","useEffect","useId","useState","RenderCustomComponent","Tooltip","FieldLabel","CheckIcon","LineIcon","inputBaseClass","CheckboxInput","t0","$","id","idFromProps","name","AfterInput","BeforeInput","checked","className","Error","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","tooltip","variant","t1","undefined","isHydrated","setIsHydrated","showTooltip","setShowTooltip","fallbackID","t2","t3","Symbol","for","t4","t5","t6","t7","t8","filter","Boolean","t9","join","t10","t11","t12","t13","t14","_jsx","disabled","onChange","ref","title","type","t15","t16","_jsxs","onPointerEnter","onPointerLeave","children","CustomComponent","Fallback","htmlFor","alignCaret","show"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React, { useEffect, useId, useState } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { LineIcon } from '../../icons/Line/index.js'\n\nexport type CheckboxInputProps = {\n readonly AfterInput?: React.ReactNode\n readonly BeforeInput?: React.ReactNode\n readonly checked?: boolean\n readonly className?: string\n readonly Error?: React.ReactNode\n readonly id?: string\n readonly inputRef?: React.RefObject<HTMLInputElement | null>\n readonly Label?: React.ReactNode\n readonly label?: StaticLabel\n readonly localized?: boolean\n readonly name?: string\n readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n readonly partialChecked?: boolean\n readonly readOnly?: boolean\n readonly required?: boolean\n readonly tooltip?: string\n /**\n * Visual variant for the checkbox\n * - 'default': Dark border, transparent background (for form fields)\n * - 'muted': Light gray background and border (for tables)\n */\n readonly variant?: 'default' | 'muted'\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n id: idFromProps,\n name,\n AfterInput,\n BeforeInput,\n checked,\n className,\n Error,\n inputRef,\n Label,\n label,\n localized,\n onToggle,\n partialChecked,\n readOnly: readOnlyFromProps,\n required,\n tooltip,\n variant = 'default',\n}) => {\n const [isHydrated, setIsHydrated] = useState(false)\n const [showTooltip, setShowTooltip] = useState(false)\n const fallbackID = useId()\n const id = idFromProps || fallbackID\n\n useEffect(() => {\n setIsHydrated(true)\n }, [])\n\n const readOnly = readOnlyFromProps || !isHydrated\n\n return (\n <div\n className={[\n className,\n inputBaseClass,\n checked && `${inputBaseClass}--checked`,\n readOnly && `${inputBaseClass}--read-only`,\n tooltip && `${inputBaseClass}--has-tooltip`,\n variant !== 'default' && `${inputBaseClass}--${variant}`,\n ]\n .filter(Boolean)\n .join(' ')}\n onPointerEnter={tooltip ? () => setShowTooltip(true) : undefined}\n onPointerLeave={tooltip ? () => setShowTooltip(false) : undefined}\n >\n {BeforeInput}\n <div className={`${inputBaseClass}__wrap`}>\n <div className={`${inputBaseClass}__input`}>\n <input\n aria-label
|
|
1
|
+
{"version":3,"file":"Input.js","names":["c","_c","React","useEffect","useId","useState","RenderCustomComponent","Tooltip","FieldLabel","CheckIcon","LineIcon","inputBaseClass","CheckboxInput","t0","$","id","idFromProps","name","AfterInput","ariaLabelFromProps","ariaLabelledByFromProps","BeforeInput","checked","className","Error","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","tooltip","variant","t1","undefined","isHydrated","setIsHydrated","showTooltip","setShowTooltip","fallbackID","ariaLabel","ariaLabelledBy","t2","t3","Symbol","for","t4","t5","t6","t7","t8","filter","Boolean","t9","join","t10","t11","t12","t13","t14","_jsx","disabled","onChange","ref","title","type","t15","t16","_jsxs","onPointerEnter","onPointerLeave","children","CustomComponent","Fallback","htmlFor","alignCaret","show"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React, { useEffect, useId, useState } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { LineIcon } from '../../icons/Line/index.js'\n\nexport type CheckboxInputProps = {\n readonly AfterInput?: React.ReactNode\n readonly 'aria-label'?: string\n readonly 'aria-labelledby'?: string\n readonly BeforeInput?: React.ReactNode\n readonly checked?: boolean\n readonly className?: string\n readonly Error?: React.ReactNode\n readonly id?: string\n readonly inputRef?: React.RefObject<HTMLInputElement | null>\n readonly Label?: React.ReactNode\n readonly label?: StaticLabel\n readonly localized?: boolean\n readonly name?: string\n readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n readonly partialChecked?: boolean\n readonly readOnly?: boolean\n readonly required?: boolean\n readonly tooltip?: string\n /**\n * Visual variant for the checkbox\n * - 'default': Dark border, transparent background (for form fields)\n * - 'muted': Light gray background and border (for tables)\n */\n readonly variant?: 'default' | 'muted'\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n id: idFromProps,\n name,\n AfterInput,\n 'aria-label': ariaLabelFromProps,\n 'aria-labelledby': ariaLabelledByFromProps,\n BeforeInput,\n checked,\n className,\n Error,\n inputRef,\n Label,\n label,\n localized,\n onToggle,\n partialChecked,\n readOnly: readOnlyFromProps,\n required,\n tooltip,\n variant = 'default',\n}) => {\n const [isHydrated, setIsHydrated] = useState(false)\n const [showTooltip, setShowTooltip] = useState(false)\n const fallbackID = useId()\n const id = idFromProps || fallbackID\n const ariaLabel = ariaLabelFromProps || undefined\n const ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps || name\n\n useEffect(() => {\n setIsHydrated(true)\n }, [])\n\n const readOnly = readOnlyFromProps || !isHydrated\n\n return (\n <div\n className={[\n className,\n inputBaseClass,\n checked && `${inputBaseClass}--checked`,\n readOnly && `${inputBaseClass}--read-only`,\n tooltip && `${inputBaseClass}--has-tooltip`,\n variant !== 'default' && `${inputBaseClass}--${variant}`,\n ]\n .filter(Boolean)\n .join(' ')}\n onPointerEnter={tooltip ? () => setShowTooltip(true) : undefined}\n onPointerLeave={tooltip ? () => setShowTooltip(false) : undefined}\n >\n {BeforeInput}\n <div className={`${inputBaseClass}__wrap`}>\n <div className={`${inputBaseClass}__input`}>\n <input\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n checked={Boolean(checked)}\n disabled={readOnly}\n id={id}\n name={name}\n onChange={onToggle}\n ref={inputRef}\n required={required}\n title={name}\n type=\"checkbox\"\n />\n <span\n className={[`${inputBaseClass}__icon`, !checked && partialChecked ? 'partial' : 'check']\n .filter(Boolean)\n .join(' ')}\n >\n {checked && <CheckIcon />}\n {!checked && partialChecked && <LineIcon />}\n </span>\n </div>\n <RenderCustomComponent\n CustomComponent={Label}\n Fallback={\n <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n }\n />\n {Error}\n </div>\n {tooltip && (\n <Tooltip alignCaret=\"left\" className={`${inputBaseClass}__tooltip`} show={showTooltip}>\n {tooltip}\n </Tooltip>\n )}\n {AfterInput}\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,15 +1,6 @@
|
|
|
1
1
|
@layer payload-default {
|
|
2
2
|
.checkbox {
|
|
3
3
|
position: relative;
|
|
4
|
-
|
|
5
|
-
.tooltip:not([aria-hidden='true']) {
|
|
6
|
-
left: auto;
|
|
7
|
-
right: calc(-1 * var(--spacer-2));
|
|
8
|
-
position: absolute;
|
|
9
|
-
transform: translateY(calc(var(--caret-size) * -1));
|
|
10
|
-
margin-bottom: 0.2em;
|
|
11
|
-
max-width: fit-content;
|
|
12
|
-
}
|
|
13
4
|
}
|
|
14
5
|
|
|
15
6
|
.checkbox-input {
|
|
@@ -159,7 +150,6 @@
|
|
|
159
150
|
|
|
160
151
|
/* Allow Wrap */
|
|
161
152
|
.checkbox-input__tooltip {
|
|
162
|
-
--tooltip-x: 0;
|
|
163
153
|
left: 0;
|
|
164
154
|
width: max-content;
|
|
165
155
|
max-width: 280px;
|
|
@@ -178,83 +168,57 @@
|
|
|
178
168
|
transform: translateX(-50%) rotate(180deg);
|
|
179
169
|
}
|
|
180
170
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
/* Allow Wrap */
|
|
188
|
-
.checkbox-input__tooltip {
|
|
189
|
-
--tooltip-x: 0;
|
|
190
|
-
left: 0;
|
|
191
|
-
width: max-content;
|
|
192
|
-
max-width: 280px;
|
|
193
|
-
white-space: normal;
|
|
194
|
-
text-align: start;
|
|
195
|
-
}
|
|
171
|
+
/* Muted variant - used in tables with lighter appearance */
|
|
172
|
+
.checkbox-input--muted {
|
|
173
|
+
.checkbox-input__input {
|
|
174
|
+
background: var(--color-bg-secondary);
|
|
175
|
+
border-color: var(--color-border);
|
|
176
|
+
}
|
|
196
177
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
178
|
+
&:not(.checkbox-input--read-only):not(.checkbox-input--checked) {
|
|
179
|
+
&:hover {
|
|
180
|
+
.checkbox-input__input {
|
|
181
|
+
border-color: var(--field-color-toggle-border-hover);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
203
185
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
/* Muted variant - used in tables with lighter appearance */
|
|
207
|
-
.checkbox-input--muted {
|
|
186
|
+
/* Ensure checked state overrides muted base styles */
|
|
187
|
+
&.checkbox-input--checked {
|
|
208
188
|
.checkbox-input__input {
|
|
209
|
-
background: var(--color-bg-
|
|
210
|
-
border-color: var(--color-border);
|
|
189
|
+
background-color: var(--field-color-toggle-bg-checked);
|
|
190
|
+
border-color: var(--field-color-toggle-border-checked);
|
|
211
191
|
}
|
|
192
|
+
}
|
|
212
193
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
}
|
|
194
|
+
/* Ensure partial state overrides muted base styles */
|
|
195
|
+
&:has(.checkbox-input__icon.partial) {
|
|
196
|
+
.checkbox-input__input {
|
|
197
|
+
background-color: var(--field-color-toggle-bg-checked);
|
|
198
|
+
border-color: var(--field-color-toggle-border-checked);
|
|
219
199
|
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
220
202
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
}
|
|
203
|
+
.checkbox.error {
|
|
204
|
+
.checkbox-input--checked {
|
|
205
|
+
.checkbox-input__input {
|
|
206
|
+
background-color: var(--field-color-error-bg);
|
|
207
|
+
border-color: var(--field-color-border-error);
|
|
227
208
|
}
|
|
228
209
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
.checkbox-input__input {
|
|
232
|
-
background-color: var(--field-color-toggle-bg-checked);
|
|
233
|
-
border-color: var(--field-color-toggle-border-checked);
|
|
234
|
-
}
|
|
210
|
+
&:hover .checkbox-input__input {
|
|
211
|
+
border-color: var(--field-color-border-error);
|
|
235
212
|
}
|
|
236
213
|
}
|
|
237
214
|
|
|
238
|
-
.checkbox.
|
|
239
|
-
.checkbox-
|
|
240
|
-
|
|
241
|
-
background-color: var(--field-color-error-bg);
|
|
242
|
-
border-color: var(--field-color-border-error);
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
&:hover .checkbox-input__input {
|
|
246
|
-
border-color: var(--field-color-border-error);
|
|
247
|
-
}
|
|
215
|
+
.checkbox-input:not(.checkbox-input--checked) {
|
|
216
|
+
.checkbox-input__input {
|
|
217
|
+
border-color: var(--field-color-border-error);
|
|
248
218
|
}
|
|
249
219
|
|
|
250
|
-
.checkbox-
|
|
251
|
-
|
|
252
|
-
border-color: var(--field-color-border-error);
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
&:hover .checkbox-input__input {
|
|
256
|
-
border-color: var(--field-color-border-error);
|
|
257
|
-
}
|
|
220
|
+
&:hover .checkbox-input__input {
|
|
221
|
+
border-color: var(--field-color-border-error);
|
|
258
222
|
}
|
|
259
223
|
}
|
|
260
224
|
}
|
|
@@ -1,15 +1,6 @@
|
|
|
1
1
|
@layer payload-default {
|
|
2
2
|
.field-error.tooltip {
|
|
3
|
-
--tooltip-x: 0%;
|
|
4
|
-
left: auto;
|
|
5
|
-
max-width: 75%;
|
|
6
|
-
right: 0;
|
|
7
3
|
color: var(--field-color-error-text);
|
|
8
4
|
background-color: var(--field-color-error-bg);
|
|
9
|
-
|
|
10
|
-
&::after {
|
|
11
|
-
border-top-color: var(--field-color-error-bg);
|
|
12
|
-
border-bottom-color: var(--field-color-error-bg);
|
|
13
|
-
}
|
|
14
5
|
}
|
|
15
6
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldError/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldError/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiClD,CAAA"}
|
|
@@ -4,11 +4,13 @@ import { c as _c } from "react/compiler-runtime";
|
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { Tooltip } from '../../elements/Tooltip/index.js';
|
|
7
|
-
import { useFormFields, useFormSubmitted } from '../../forms/Form/context.js';
|
|
7
|
+
import { useForm, useFormFields, useFormSubmitted } from '../../forms/Form/context.js';
|
|
8
|
+
import { useEditDepth } from '../../providers/EditDepth/index.js';
|
|
9
|
+
import { generateFieldID } from '../../utilities/generateFieldID.js';
|
|
8
10
|
import './index.css';
|
|
9
11
|
const baseClass = 'field-error';
|
|
10
12
|
export const FieldError = props => {
|
|
11
|
-
const $ = _c(
|
|
13
|
+
const $ = _c(11);
|
|
12
14
|
const {
|
|
13
15
|
alignCaret: t0,
|
|
14
16
|
message: messageFromProps,
|
|
@@ -17,6 +19,10 @@ export const FieldError = props => {
|
|
|
17
19
|
} = props;
|
|
18
20
|
const alignCaret = t0 === undefined ? "right" : t0;
|
|
19
21
|
const hasSubmitted = useFormSubmitted();
|
|
22
|
+
const {
|
|
23
|
+
uuid
|
|
24
|
+
} = useForm();
|
|
25
|
+
const editDepth = useEditDepth();
|
|
20
26
|
let t1;
|
|
21
27
|
if ($[0] !== path) {
|
|
22
28
|
t1 = t2 => {
|
|
@@ -30,7 +36,7 @@ export const FieldError = props => {
|
|
|
30
36
|
}
|
|
31
37
|
const field = useFormFields(t1);
|
|
32
38
|
let t2;
|
|
33
|
-
if ($[2] !== alignCaret || $[3] !==
|
|
39
|
+
if ($[2] !== alignCaret || $[3] !== editDepth || $[4] !== field || $[5] !== hasSubmitted || $[6] !== messageFromProps || $[7] !== path || $[8] !== showErrorFromProps || $[9] !== uuid) {
|
|
34
40
|
t2 = Symbol.for("react.early_return_sentinel");
|
|
35
41
|
bb0: {
|
|
36
42
|
const {
|
|
@@ -44,6 +50,7 @@ export const FieldError = props => {
|
|
|
44
50
|
alignCaret,
|
|
45
51
|
className: baseClass,
|
|
46
52
|
delay: 0,
|
|
53
|
+
id: generateFieldID(path, editDepth, uuid, "field-error"),
|
|
47
54
|
staticPositioning: true,
|
|
48
55
|
children: message
|
|
49
56
|
});
|
|
@@ -51,13 +58,16 @@ export const FieldError = props => {
|
|
|
51
58
|
}
|
|
52
59
|
}
|
|
53
60
|
$[2] = alignCaret;
|
|
54
|
-
$[3] =
|
|
55
|
-
$[4] =
|
|
56
|
-
$[5] =
|
|
57
|
-
$[6] =
|
|
58
|
-
$[7] =
|
|
61
|
+
$[3] = editDepth;
|
|
62
|
+
$[4] = field;
|
|
63
|
+
$[5] = hasSubmitted;
|
|
64
|
+
$[6] = messageFromProps;
|
|
65
|
+
$[7] = path;
|
|
66
|
+
$[8] = showErrorFromProps;
|
|
67
|
+
$[9] = uuid;
|
|
68
|
+
$[10] = t2;
|
|
59
69
|
} else {
|
|
60
|
-
t2 = $[
|
|
70
|
+
t2 = $[10];
|
|
61
71
|
}
|
|
62
72
|
if (t2 !== Symbol.for("react.early_return_sentinel")) {
|
|
63
73
|
return t2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","React","Tooltip","useFormFields","useFormSubmitted","baseClass","FieldError","props","$","alignCaret","t0","message","messageFromProps","path","showError","showErrorFromProps","undefined","hasSubmitted","t1","t2","fields","field","Symbol","for","errorMessage","valid","showMessage","length","_jsx","className","delay","staticPositioning","children"],"sources":["../../../src/fields/FieldError/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GenericErrorProps } from 'payload'\n\nimport React from 'react'\n\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { useFormFields, useFormSubmitted } from '../../forms/Form/context.js'\nimport './index.css'\n\nconst baseClass = 'field-error'\n\nexport const FieldError: React.FC<GenericErrorProps> = (props) => {\n const {\n alignCaret = 'right',\n message: messageFromProps,\n path,\n showError: showErrorFromProps,\n } = props\n\n const hasSubmitted = useFormSubmitted()\n const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)\n\n const { errorMessage, valid } = field || {}\n\n const message = messageFromProps || errorMessage\n const showMessage = showErrorFromProps || (hasSubmitted && valid === false)\n\n if (showMessage && message?.length) {\n return (\n <Tooltip
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","React","Tooltip","useForm","useFormFields","useFormSubmitted","useEditDepth","generateFieldID","baseClass","FieldError","props","$","alignCaret","t0","message","messageFromProps","path","showError","showErrorFromProps","undefined","hasSubmitted","uuid","editDepth","t1","t2","fields","field","Symbol","for","errorMessage","valid","showMessage","length","_jsx","className","delay","id","staticPositioning","children"],"sources":["../../../src/fields/FieldError/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GenericErrorProps } from 'payload'\n\nimport React from 'react'\n\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { useForm, useFormFields, useFormSubmitted } from '../../forms/Form/context.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport './index.css'\n\nconst baseClass = 'field-error'\n\nexport const FieldError: React.FC<GenericErrorProps> = (props) => {\n const {\n alignCaret = 'right',\n message: messageFromProps,\n path,\n showError: showErrorFromProps,\n } = props\n\n const hasSubmitted = useFormSubmitted()\n const { uuid } = useForm()\n const editDepth = useEditDepth()\n const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)\n\n const { errorMessage, valid } = field || {}\n\n const message = messageFromProps || errorMessage\n const showMessage = showErrorFromProps || (hasSubmitted && valid === false)\n\n if (showMessage && message?.length) {\n return (\n <Tooltip\n alignCaret={alignCaret}\n className={baseClass}\n delay={0}\n id={generateFieldID(path, editDepth, uuid, 'field-error')}\n staticPositioning\n >\n {message}\n </Tooltip>\n )\n }\n\n return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,EAAEC,aAAa,EAAEC,gBAAgB,QAAQ;AACzD,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAA0CC,KAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EACrD;IAAAY,UAAA,EAAAC,EAAA;IAAAC,OAAA,EAAAC,gBAAA;IAAAC,IAAA;IAAAC,SAAA,EAAAC;EAAA,IAKIR,KAAA;EAJF,MAAAE,UAAA,GAAAC,EAAoB,KAAAM,SAAA,GAAP,OAAO,GAApBN,EAAoB;EAMtB,MAAAO,YAAA,GAAqBf,gBAAA;EACrB;IAAAgB;EAAA,IAAiBlB,OAAA;EACjB,MAAAmB,SAAA,GAAkBhB,YAAA;EAAA,IAAAiB,EAAA;EAAA,IAAAZ,CAAA,QAAAK,IAAA;IACUO,EAAA,GAAAC,EAAA;MAAC,OAAAC,MAAA,IAAAD,EAAQ;MAAA,OAAKC,MAAC,IAAUA,MAAA,GAAST,IAAA,CAAK,QAAK;IAAA;IAAAL,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAY,EAAA;EAAA;IAAAA,EAAA,GAAAZ,CAAA;EAAA;EAAxE,MAAAe,KAAA,GAActB,aAAA,CAAcmB,EAA4C;EAAA,IAAAC,EAAA;EAAA,IAAAb,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAW,SAAA,IAAAX,CAAA,QAAAe,KAAA,IAAAf,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAI,gBAAA,IAAAJ,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAO,kBAAA,IAAAP,CAAA,QAAAU,IAAA;IASpEG,EAAA,GAAAG,MAAA,CAAAC,GAAA,8B;;MAPJ;QAAAC,YAAA;QAAAC;MAAA,IAAgCJ,KAAA,MAAU;MAE1C,MAAAZ,OAAA,GAAgBC,gBAAA,IAAoBc,YAAA;MACpC,MAAAE,WAAA,GAAoBb,kBAAA,IAAuBE,YAAA,IAAgBU,KAAA,UAAU;MAAA,IAEjEC,WAAA,IAAejB,OAAA,EAAAkB,MAAS;QAExBR,EAAA,GAAAS,IAAA,CAAA/B,OAAA;UAAAU,UAAA;UAAAsB,SAAA,EAAA1B,SAAA;UAAA2B,KAAA;UAAAC,EAAA,EAIM7B,eAAA,CAAgBS,IAAA,EAAMM,SAAA,EAAWD,IAAA,EAAM;UAAAgB,iBAAA;UAAAC,QAAA,EAG1CxB;QAAA,C;;;;;;;;;;;;;;;;;;;;CAMT","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/Input.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAA;AAK5F,OAAO,KAAK,EAA6B,sBAAsB,EAAiB,MAAM,YAAY,CAAA;AAuBlG,OAAO,aAAa,CAAA;AAMpB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/Input.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAA;AAK5F,OAAO,KAAK,EAA6B,sBAAsB,EAAiB,MAAM,YAAY,CAAA;AAuBlG,OAAO,aAAa,CAAA;AAMpB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAy5B9D,CAAA"}
|
|
@@ -406,13 +406,31 @@ export const RelationshipInput = props => {
|
|
|
406
406
|
if (!value) {
|
|
407
407
|
return false;
|
|
408
408
|
}
|
|
409
|
-
|
|
409
|
+
// Delete events only carry the deleted `id` (no `doc`), whereas create/update events
|
|
410
|
+
// carry the full `doc`. Resolve from both so the delete branch below can match.
|
|
411
|
+
const docID = mostRecentUpdate_0.doc?.id ?? mostRecentUpdate_0.id;
|
|
412
|
+
// A document referenced by this field, deleted elsewhere (e.g. via the DeleteDocument
|
|
413
|
+
// event), should be removed from the value — otherwise it keeps showing as if it existed.
|
|
414
|
+
if (mostRecentUpdate_0.operation === 'delete') {
|
|
415
|
+
if (hasMany === true) {
|
|
416
|
+
const currentValue = Array.isArray(value) ? value : [value];
|
|
417
|
+
const valuesToSet = currentValue.filter(option_0 => {
|
|
418
|
+
return !(option_0.value === docID && option_0.relationTo === mostRecentUpdate_0.entitySlug);
|
|
419
|
+
});
|
|
420
|
+
if (valuesToSet.length !== currentValue.length) {
|
|
421
|
+
onChange(valuesToSet);
|
|
422
|
+
}
|
|
423
|
+
} else if (hasMany === false && value?.value === docID && value?.relationTo === mostRecentUpdate_0.entitySlug) {
|
|
424
|
+
onChange(null);
|
|
425
|
+
}
|
|
426
|
+
return;
|
|
427
|
+
}
|
|
410
428
|
let isMatchingUpdate = false;
|
|
411
429
|
if (mostRecentUpdate_0.operation === 'update') {
|
|
412
430
|
if (hasMany === true) {
|
|
413
|
-
const
|
|
414
|
-
isMatchingUpdate =
|
|
415
|
-
return
|
|
431
|
+
const currentValue_0 = Array.isArray(value) ? value : [value];
|
|
432
|
+
isMatchingUpdate = currentValue_0.some(option_1 => {
|
|
433
|
+
return option_1.value === docID && option_1.relationTo === mostRecentUpdate_0.entitySlug;
|
|
416
434
|
});
|
|
417
435
|
} else if (hasMany === false) {
|
|
418
436
|
isMatchingUpdate = value?.value === docID && value?.relationTo === mostRecentUpdate_0.entitySlug;
|
|
@@ -437,14 +455,14 @@ export const RelationshipInput = props => {
|
|
|
437
455
|
i18n
|
|
438
456
|
});
|
|
439
457
|
if (hasMany) {
|
|
440
|
-
const
|
|
441
|
-
const
|
|
458
|
+
const currentValue_1 = value ? Array.isArray(value) ? value : [value] : [];
|
|
459
|
+
const valuesToSet_0 = currentValue_1.map(option_2 => {
|
|
442
460
|
return {
|
|
443
|
-
relationTo:
|
|
444
|
-
value:
|
|
461
|
+
relationTo: option_2.value === docID ? mostRecentUpdate_0.entitySlug : option_2.relationTo,
|
|
462
|
+
value: option_2.value
|
|
445
463
|
};
|
|
446
464
|
});
|
|
447
|
-
onChange(
|
|
465
|
+
onChange(valuesToSet_0);
|
|
448
466
|
} else if (hasMany === false) {
|
|
449
467
|
onChange({
|
|
450
468
|
relationTo: mostRecentUpdate_0.entitySlug,
|
|
@@ -494,8 +512,8 @@ export const RelationshipInput = props => {
|
|
|
494
512
|
i18n
|
|
495
513
|
});
|
|
496
514
|
if (hasMany) {
|
|
497
|
-
onChange(value ? value.filter(
|
|
498
|
-
return
|
|
515
|
+
onChange(value ? value.filter(option_3 => {
|
|
516
|
+
return option_3.value !== args_0.id;
|
|
499
517
|
}) : null);
|
|
500
518
|
} else {
|
|
501
519
|
onChange(null);
|
|
@@ -675,11 +693,11 @@ export const RelationshipInput = props => {
|
|
|
675
693
|
},
|
|
676
694
|
disabled: readOnly || isDrawerOpen || isListDrawerOpen,
|
|
677
695
|
filterOption: enableWordBoundarySearch ? filterOption : undefined,
|
|
678
|
-
getOptionValue:
|
|
679
|
-
if (!
|
|
696
|
+
getOptionValue: option_4 => {
|
|
697
|
+
if (!option_4) {
|
|
680
698
|
return undefined;
|
|
681
699
|
}
|
|
682
|
-
return hasMany && Array.isArray(relationTo) ? `${
|
|
700
|
+
return hasMany && Array.isArray(relationTo) ? `${option_4.relationTo}_${option_4.value}` : option_4.value;
|
|
683
701
|
},
|
|
684
702
|
isLoading: appearance === 'select' && isLoading,
|
|
685
703
|
isMulti: hasMany,
|