@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.
Files changed (180) hide show
  1. package/dist/css/app.css +121 -0
  2. package/dist/css/forms.css +0 -6
  3. package/dist/css/spacing.css +10 -3
  4. package/dist/css/z-index.css +1 -0
  5. package/dist/elements/AddNewRelation/index.css +0 -1
  6. package/dist/elements/AppHeader/index.css +0 -3
  7. package/dist/elements/AppHeader/index.d.ts.map +1 -1
  8. package/dist/elements/AppHeader/index.js +5 -1
  9. package/dist/elements/AppHeader/index.js.map +1 -1
  10. package/dist/elements/BulkUpload/EditMany/DrawerContent.js +2 -2
  11. package/dist/elements/BulkUpload/EditMany/DrawerContent.js.map +1 -1
  12. package/dist/elements/CodeEditor/index.css +0 -5
  13. package/dist/elements/CommandPalette/index.css +0 -7
  14. package/dist/elements/CreateDocumentButton/index.d.ts.map +1 -1
  15. package/dist/elements/CreateDocumentButton/index.js +4 -1
  16. package/dist/elements/CreateDocumentButton/index.js.map +1 -1
  17. package/dist/elements/DatePicker/DatePicker.d.ts.map +1 -1
  18. package/dist/elements/DatePicker/DatePicker.js +1 -0
  19. package/dist/elements/DatePicker/DatePicker.js.map +1 -1
  20. package/dist/elements/DatePicker/index.css +1 -1
  21. package/dist/elements/DeleteDocument/index.d.ts.map +1 -1
  22. package/dist/elements/DeleteDocument/index.js +16 -1
  23. package/dist/elements/DeleteDocument/index.js.map +1 -1
  24. package/dist/elements/EditMany/DrawerContent.js +2 -2
  25. package/dist/elements/EditMany/DrawerContent.js.map +1 -1
  26. package/dist/elements/FieldSelect/reduceFieldOptions.d.ts.map +1 -1
  27. package/dist/elements/FieldSelect/reduceFieldOptions.js +3 -1
  28. package/dist/elements/FieldSelect/reduceFieldOptions.js.map +1 -1
  29. package/dist/elements/FieldSelect/reduceFieldOptions.spec.js +143 -0
  30. package/dist/elements/FieldSelect/reduceFieldOptions.spec.js.map +1 -0
  31. package/dist/elements/FileDetails/StaticFileDetails/index.css +8 -9
  32. package/dist/elements/FileManager/index.js +1 -0
  33. package/dist/elements/FileManager/index.js.map +1 -1
  34. package/dist/elements/Hierarchy/ColumnBrowser/ColumnItem/index.css +0 -1
  35. package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.d.ts.map +1 -1
  36. package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.js +109 -89
  37. package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.js.map +1 -1
  38. package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.server.d.ts.map +1 -1
  39. package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.server.js +2 -0
  40. package/dist/elements/Hierarchy/Tree/HierarchySidebarTab.server.js.map +1 -1
  41. package/dist/elements/Hierarchy/Tree/TreeNode/index.css +0 -1
  42. package/dist/elements/InputStepper/index.css +0 -1
  43. package/dist/elements/Locked/index.css +0 -8
  44. package/dist/elements/Locked/index.d.ts.map +1 -1
  45. package/dist/elements/Locked/index.js +70 -64
  46. package/dist/elements/Locked/index.js.map +1 -1
  47. package/dist/elements/Nav/SidebarTabs/index.client.d.ts.map +1 -1
  48. package/dist/elements/Nav/SidebarTabs/index.client.js +12 -5
  49. package/dist/elements/Nav/SidebarTabs/index.client.js.map +1 -1
  50. package/dist/elements/Nav/SidebarTabs/index.css +0 -5
  51. package/dist/elements/Nav/SidebarTabs/renderTabServerFn.d.ts +1 -0
  52. package/dist/elements/Nav/SidebarTabs/renderTabServerFn.d.ts.map +1 -1
  53. package/dist/elements/Nav/SidebarTabs/renderTabServerFn.js +2 -1
  54. package/dist/elements/Nav/SidebarTabs/renderTabServerFn.js.map +1 -1
  55. package/dist/elements/NavGroup/index.css +0 -1
  56. package/dist/elements/PreviewButton/index.d.ts +1 -2
  57. package/dist/elements/PreviewButton/index.d.ts.map +1 -1
  58. package/dist/elements/PreviewButton/index.js +11 -5
  59. package/dist/elements/PreviewButton/index.js.map +1 -1
  60. package/dist/elements/PreviewSizes/index.css +8 -9
  61. package/dist/elements/ReactSelect/ClearIndicator/index.css +0 -1
  62. package/dist/elements/ReactSelect/MultiValue/index.css +0 -1
  63. package/dist/elements/ReactSelect/index.css +0 -3
  64. package/dist/elements/RelationshipTable/index.d.ts.map +1 -1
  65. package/dist/elements/RelationshipTable/index.js +32 -0
  66. package/dist/elements/RelationshipTable/index.js.map +1 -1
  67. package/dist/elements/SelectRow/index.d.ts +4 -3
  68. package/dist/elements/SelectRow/index.d.ts.map +1 -1
  69. package/dist/elements/SelectRow/index.js +10 -7
  70. package/dist/elements/SelectRow/index.js.map +1 -1
  71. package/dist/elements/SidebarToggle/index.css +0 -17
  72. package/dist/elements/SortColumn/index.d.ts.map +1 -1
  73. package/dist/elements/SortColumn/index.js +42 -38
  74. package/dist/elements/SortColumn/index.js.map +1 -1
  75. package/dist/elements/Tooltip/index.css +15 -34
  76. package/dist/elements/Tooltip/index.d.ts +11 -3
  77. package/dist/elements/Tooltip/index.d.ts.map +1 -1
  78. package/dist/elements/Tooltip/index.js +151 -85
  79. package/dist/elements/Tooltip/index.js.map +1 -1
  80. package/dist/elements/Upload/index.css +0 -5
  81. package/dist/exports/client/index.d.ts +3 -0
  82. package/dist/exports/client/index.d.ts.map +1 -1
  83. package/dist/exports/client/index.js +1 -1
  84. package/dist/exports/client/index.js.map +3 -3
  85. package/dist/fields/Checkbox/Input.d.ts +2 -0
  86. package/dist/fields/Checkbox/Input.d.ts.map +1 -1
  87. package/dist/fields/Checkbox/Input.js +32 -26
  88. package/dist/fields/Checkbox/Input.js.map +1 -1
  89. package/dist/fields/Checkbox/index.css +37 -73
  90. package/dist/fields/FieldError/index.css +0 -9
  91. package/dist/fields/FieldError/index.d.ts.map +1 -1
  92. package/dist/fields/FieldError/index.js +19 -9
  93. package/dist/fields/FieldError/index.js.map +1 -1
  94. package/dist/fields/RadioGroup/index.css +0 -7
  95. package/dist/fields/Relationship/Input.d.ts.map +1 -1
  96. package/dist/fields/Relationship/Input.js +32 -14
  97. package/dist/fields/Relationship/Input.js.map +1 -1
  98. package/dist/fields/Slug/index.css +0 -1
  99. package/dist/fields/Slug/index.d.ts.map +1 -1
  100. package/dist/fields/Slug/index.js +80 -125
  101. package/dist/fields/Slug/index.js.map +1 -1
  102. package/dist/forms/Form/fieldReducer.d.ts.map +1 -1
  103. package/dist/forms/Form/fieldReducer.js +3 -1
  104. package/dist/forms/Form/fieldReducer.js.map +1 -1
  105. package/dist/forms/Form/index.d.ts.map +1 -1
  106. package/dist/forms/Form/index.js +6 -1
  107. package/dist/forms/Form/index.js.map +1 -1
  108. package/dist/forms/Form/types.d.ts +1 -1
  109. package/dist/forms/Form/types.d.ts.map +1 -1
  110. package/dist/forms/Form/types.js.map +1 -1
  111. package/dist/forms/WatchChildErrors/index.d.ts.map +1 -1
  112. package/dist/forms/WatchChildErrors/index.js +2 -2
  113. package/dist/forms/WatchChildErrors/index.js.map +1 -1
  114. package/dist/forms/fieldSchemasToFormState/addFieldStatePromise.js +1 -1
  115. package/dist/forms/fieldSchemasToFormState/addFieldStatePromise.js.map +1 -1
  116. package/dist/forms/fieldSchemasToFormState/renderField.d.ts.map +1 -1
  117. package/dist/forms/fieldSchemasToFormState/renderField.js +1 -3
  118. package/dist/forms/fieldSchemasToFormState/renderField.js.map +1 -1
  119. package/dist/layouts/Root/index.d.ts +1 -1
  120. package/dist/layouts/Root/index.d.ts.map +1 -1
  121. package/dist/layouts/Root/index.js +8 -2
  122. package/dist/layouts/Root/index.js.map +1 -1
  123. package/dist/providers/Embed/index.d.ts +24 -0
  124. package/dist/providers/Embed/index.d.ts.map +1 -0
  125. package/dist/providers/Embed/index.js +105 -0
  126. package/dist/providers/Embed/index.js.map +1 -0
  127. package/dist/providers/FormErrorHandler/index.d.ts +20 -0
  128. package/dist/providers/FormErrorHandler/index.d.ts.map +1 -0
  129. package/dist/providers/FormErrorHandler/index.js +6 -0
  130. package/dist/providers/FormErrorHandler/index.js.map +1 -0
  131. package/dist/providers/Root/index.d.ts +1 -0
  132. package/dist/providers/Root/index.d.ts.map +1 -1
  133. package/dist/providers/Root/index.js +33 -27
  134. package/dist/providers/Root/index.js.map +1 -1
  135. package/dist/providers/SidebarTabs/index.d.ts +3 -2
  136. package/dist/providers/SidebarTabs/index.d.ts.map +1 -1
  137. package/dist/providers/SidebarTabs/index.js.map +1 -1
  138. package/dist/providers/Theme/index.d.ts +3 -0
  139. package/dist/providers/Theme/index.d.ts.map +1 -1
  140. package/dist/providers/Theme/index.js +107 -95
  141. package/dist/providers/Theme/index.js.map +1 -1
  142. package/dist/styles.css +12 -10
  143. package/dist/utilities/combineFieldLabel.d.ts.map +1 -1
  144. package/dist/utilities/combineFieldLabel.js +5 -1
  145. package/dist/utilities/combineFieldLabel.js.map +1 -1
  146. package/dist/utilities/generateFieldID.d.ts +1 -1
  147. package/dist/utilities/generateFieldID.d.ts.map +1 -1
  148. package/dist/utilities/generateFieldID.js +2 -2
  149. package/dist/utilities/generateFieldID.js.map +1 -1
  150. package/dist/utilities/getRequestEmbed.d.ts +14 -0
  151. package/dist/utilities/getRequestEmbed.d.ts.map +1 -0
  152. package/dist/utilities/getRequestEmbed.js +10 -0
  153. package/dist/utilities/getRequestEmbed.js.map +1 -0
  154. package/dist/utilities/renderTable.d.ts.map +1 -1
  155. package/dist/utilities/renderTable.js +18 -2
  156. package/dist/utilities/renderTable.js.map +1 -1
  157. package/dist/utilities/slugify.d.ts.map +1 -1
  158. package/dist/utilities/slugify.js +49 -6
  159. package/dist/utilities/slugify.js.map +1 -1
  160. package/dist/views/Dashboard/Default/ModularDashboard/index.css +0 -8
  161. package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.js +4 -4
  162. package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.js.map +1 -1
  163. package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js +10 -10
  164. package/dist/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js.map +1 -1
  165. package/dist/views/List/index.d.ts.map +1 -1
  166. package/dist/views/List/index.js +4 -0
  167. package/dist/views/List/index.js.map +1 -1
  168. package/dist/views/Logout/index.d.ts.map +1 -1
  169. package/dist/views/Logout/index.js +11 -0
  170. package/dist/views/Logout/index.js.map +1 -1
  171. package/package.json +5 -10
  172. package/dist/scss/app.scss +0 -183
  173. package/dist/scss/colors.scss +0 -191
  174. package/dist/scss/custom.css +0 -1
  175. package/dist/scss/queries.scss +0 -27
  176. package/dist/scss/styles.scss +0 -9
  177. package/dist/scss/svg.scss +0 -10
  178. package/dist/scss/toastify.scss +0 -61
  179. package/dist/scss/vars.scss +0 -192
  180. 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(35);
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] !== checked || $[17] !== id || $[18] !== inputRef || $[19] !== label || $[20] !== localized || $[21] !== name || $[22] !== onToggle || $[23] !== partialChecked || $[24] !== readOnly || $[25] !== required || $[26] !== showTooltip || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t9 || $[31] !== tooltip) {
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": name,
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 ($[33] !== t15) {
108
+ if ($[35] !== t15) {
105
109
  t16 = [`${inputBaseClass}__icon`, t15].filter(Boolean);
106
- $[33] = t15;
107
- $[34] = t16;
110
+ $[35] = t15;
111
+ $[36] = t16;
108
112
  } else {
109
- t16 = $[34];
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] = checked;
144
- $[17] = id;
145
- $[18] = inputRef;
146
- $[19] = label;
147
- $[20] = localized;
148
- $[21] = name;
149
- $[22] = onToggle;
150
- $[23] = partialChecked;
151
- $[24] = readOnly;
152
- $[25] = required;
153
- $[26] = showTooltip;
154
- $[27] = t10;
155
- $[28] = t11;
156
- $[29] = t12;
157
- $[30] = t9;
158
- $[31] = tooltip;
159
- $[32] = t13;
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 = $[32];
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=\"\"\n aria-labelledby={name}\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
+ {"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
- .checkbox-input--has-tooltip {
182
- position: relative;
183
- width: max-content;
184
- max-width: 100%;
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
- /* Center the caret on the checkbox box itself (0.5rem from the row's
198
- left edge = center of the 1rem-wide checkbox input). */
199
- .checkbox-input__tooltip.tooltip--caret-left .tooltip__caret {
200
- left: 0.5rem;
201
- transform: translateX(-50%);
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
- .checkbox-input__tooltip.tooltip--caret-left.tooltip--position-bottom .tooltip__caret {
205
- transform: translateX(-50%) rotate(180deg);
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-secondary);
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
- &:not(.checkbox-input--read-only):not(.checkbox-input--checked) {
214
- &:hover {
215
- .checkbox-input__input {
216
- border-color: var(--field-color-toggle-border-hover);
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
- /* Ensure checked state overrides muted base styles */
222
- &.checkbox-input--checked {
223
- .checkbox-input__input {
224
- background-color: var(--field-color-toggle-bg-checked);
225
- border-color: var(--field-color-toggle-border-checked);
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
- /* Ensure partial state overrides muted base styles */
230
- &:has(.checkbox-input__icon.partial) {
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.error {
239
- .checkbox-input--checked {
240
- .checkbox-input__input {
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-input:not(.checkbox-input--checked) {
251
- .checkbox-input__input {
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;AAIzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyBlD,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(8);
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] !== field || $[4] !== hasSubmitted || $[5] !== messageFromProps || $[6] !== showErrorFromProps) {
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] = field;
55
- $[4] = hasSubmitted;
56
- $[5] = messageFromProps;
57
- $[6] = showErrorFromProps;
58
- $[7] = t2;
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 = $[7];
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 alignCaret={alignCaret} className={baseClass} delay={0} staticPositioning>\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,aAAa,EAAEC,gBAAgB,QAAQ;AAChD,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAA0CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACrD;IAAAS,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,GAAqBb,gBAAA;EAAA,IAAAc,EAAA;EAAA,IAAAV,CAAA,QAAAK,IAAA;IACOK,EAAA,GAAAC,EAAA;MAAC,OAAAC,MAAA,IAAAD,EAAQ;MAAA,OAAKC,MAAC,IAAUA,MAAA,GAASP,IAAA,CAAK,QAAK;IAAA;IAAAL,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAxE,MAAAa,KAAA,GAAclB,aAAA,CAAce,EAA4C;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAa,KAAA,IAAAb,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAI,gBAAA,IAAAJ,CAAA,QAAAO,kBAAA;IASpEI,EAAA,GAAAG,MAAA,CAAAC,GAAA,8B;;MAPJ;QAAAC,YAAA;QAAAC;MAAA,IAAgCJ,KAAA,MAAU;MAE1C,MAAAV,OAAA,GAAgBC,gBAAA,IAAoBY,YAAA;MACpC,MAAAE,WAAA,GAAoBX,kBAAA,IAAuBE,YAAA,IAAgBQ,KAAA,UAAU;MAAA,IAEjEC,WAAA,IAAef,OAAA,EAAAgB,MAAS;QAExBR,EAAA,GAAAS,IAAA,CAAA1B,OAAA;UAAAO,UAAA;UAAAoB,SAAA,EAAAxB,SAAA;UAAAyB,KAAA;UAAAC,iBAAA;UAAAC,QAAA,EACGrB;QAAA,C;;;;;;;;;;;;;;;;;CAMT","ignoreList":[]}
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":[]}
@@ -10,13 +10,6 @@
10
10
  gap: var(--spacer-2);
11
11
  }
12
12
 
13
- .tooltip:not([aria-hidden='true']) {
14
- right: auto;
15
- position: static;
16
- margin-bottom: 0.2em;
17
- max-width: fit-content;
18
- }
19
-
20
13
  ul {
21
14
  list-style: none;
22
15
  padding: 0;
@@ -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,CAg4B9D,CAAA"}
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
- const docID = mostRecentUpdate_0.doc.id;
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 currentValue = Array.isArray(value) ? value : [value];
414
- isMatchingUpdate = currentValue.some(option_0 => {
415
- return option_0.value === docID && option_0.relationTo === mostRecentUpdate_0.entitySlug;
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 currentValue_0 = value ? Array.isArray(value) ? value : [value] : [];
441
- const valuesToSet = currentValue_0.map(option_1 => {
458
+ const currentValue_1 = value ? Array.isArray(value) ? value : [value] : [];
459
+ const valuesToSet_0 = currentValue_1.map(option_2 => {
442
460
  return {
443
- relationTo: option_1.value === docID ? mostRecentUpdate_0.entitySlug : option_1.relationTo,
444
- value: option_1.value
461
+ relationTo: option_2.value === docID ? mostRecentUpdate_0.entitySlug : option_2.relationTo,
462
+ value: option_2.value
445
463
  };
446
464
  });
447
- onChange(valuesToSet);
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(option_2 => {
498
- return option_2.value !== args_0.id;
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: option_3 => {
679
- if (!option_3) {
696
+ getOptionValue: option_4 => {
697
+ if (!option_4) {
680
698
  return undefined;
681
699
  }
682
- return hasMany && Array.isArray(relationTo) ? `${option_3.relationTo}_${option_3.value}` : option_3.value;
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,