@object-ui/fields 17.5.0 → 17.7.0

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 (249) hide show
  1. package/CHANGELOG.md +6150 -0
  2. package/README.md +108 -8
  3. package/dist/FieldEditWidget.d.ts +70 -8
  4. package/dist/coerceToSafeValue.d.ts +54 -0
  5. package/dist/currency.d.ts +1 -1
  6. package/dist/field-type-alias.d.ts +16 -0
  7. package/dist/index.cjs +5 -5
  8. package/dist/index.css +53 -11
  9. package/dist/index.d.ts +653 -128
  10. package/dist/index.js +4275 -3171
  11. package/dist/widgets/AddressField.d.ts +3 -3
  12. package/dist/widgets/AutoNumberField.d.ts +1 -1
  13. package/dist/widgets/AvatarField.d.ts +20 -4
  14. package/dist/widgets/BooleanField.d.ts +2 -2
  15. package/dist/widgets/CapabilityMultiSelectField.d.ts +1 -1
  16. package/dist/widgets/CheckboxesField.d.ts +1 -1
  17. package/dist/widgets/CodeField.d.ts +1 -1
  18. package/dist/widgets/ColorField.d.ts +1 -1
  19. package/dist/widgets/CurrencyField.d.ts +1 -1
  20. package/dist/widgets/DateField.d.ts +2 -2
  21. package/dist/widgets/DateTimeField.d.ts +2 -2
  22. package/dist/widgets/EmailField.d.ts +1 -1
  23. package/dist/widgets/FileField.d.ts +18 -2
  24. package/dist/widgets/FilterConditionField.d.ts +43 -2
  25. package/dist/widgets/FormulaField.d.ts +1 -1
  26. package/dist/widgets/FullscreenFieldEditor.d.ts +9 -2
  27. package/dist/widgets/GeolocationField.d.ts +10 -4
  28. package/dist/widgets/GridField.d.ts +102 -86
  29. package/dist/widgets/ImageField.d.ts +1 -1
  30. package/dist/widgets/LocationField.d.ts +31 -4
  31. package/dist/widgets/LookupField.d.ts +9 -1
  32. package/dist/widgets/MasterDetailField.d.ts +1 -1
  33. package/dist/widgets/MultiSelectField.d.ts +1 -1
  34. package/dist/widgets/NumberField.d.ts +2 -2
  35. package/dist/widgets/ObjectField.d.ts +10 -3
  36. package/dist/widgets/ObjectRefField.d.ts +1 -1
  37. package/dist/widgets/OptionsEmptyState.d.ts +38 -8
  38. package/dist/widgets/PasswordField.d.ts +15 -1
  39. package/dist/widgets/PeoplePicker.d.ts +17 -2
  40. package/dist/widgets/PercentField.d.ts +3 -2
  41. package/dist/widgets/PersonRow.d.ts +13 -2
  42. package/dist/widgets/PhoneField.d.ts +1 -1
  43. package/dist/widgets/QRCodeField.d.ts +1 -1
  44. package/dist/widgets/RadioField.d.ts +1 -1
  45. package/dist/widgets/RatingField.d.ts +1 -1
  46. package/dist/widgets/RecipientPickerField.d.ts +44 -1
  47. package/dist/widgets/RecordPickerDialog.d.ts +33 -16
  48. package/dist/widgets/RichTextField.d.ts +37 -1
  49. package/dist/widgets/SelectField.d.ts +1 -1
  50. package/dist/widgets/SelectionTray.d.ts +13 -2
  51. package/dist/widgets/SignatureField.d.ts +32 -2
  52. package/dist/widgets/SliderField.d.ts +37 -2
  53. package/dist/widgets/SummaryField.d.ts +1 -1
  54. package/dist/widgets/TagsField.d.ts +1 -1
  55. package/dist/widgets/TextAreaField.d.ts +6 -2
  56. package/dist/widgets/TextField.d.ts +2 -2
  57. package/dist/widgets/TimeField.d.ts +2 -2
  58. package/dist/widgets/UrlField.d.ts +1 -1
  59. package/dist/widgets/UserField.d.ts +1 -1
  60. package/dist/widgets/VectorField.d.ts +1 -1
  61. package/dist/widgets/_cell-renderer-bridge.d.ts +1 -1
  62. package/dist/widgets/address-format.d.ts +27 -7
  63. package/dist/widgets/file-affordance.d.ts +33 -0
  64. package/dist/widgets/file-size-guard.d.ts +5 -23
  65. package/dist/widgets/file-value.d.ts +38 -9
  66. package/dist/widgets/lookupColumnDisplay.d.ts +110 -0
  67. package/dist/widgets/nativeDateValue.d.ts +9 -27
  68. package/dist/widgets/number-format.d.ts +137 -0
  69. package/dist/widgets/numberBadInput.d.ts +135 -0
  70. package/dist/widgets/personDisplay.d.ts +22 -4
  71. package/dist/widgets/richTextDisplay.d.ts +116 -0
  72. package/dist/widgets/toDomProps.d.ts +10 -1
  73. package/dist/widgets/toHostGroupProps.d.ts +172 -21
  74. package/dist/widgets/toHostProps.d.ts +105 -0
  75. package/dist/widgets/types.d.ts +19 -6
  76. package/dist/widgets/upload-error-message.d.ts +6 -0
  77. package/dist/widgets/uploadingScope.d.ts +142 -0
  78. package/dist/widgets/useCascadingOptions.d.ts +3 -2
  79. package/dist/widgets/useRecordQuery.d.ts +4 -2
  80. package/dist/widgets/useUploadingSignal.d.ts +8 -0
  81. package/package.json +11 -13
  82. package/dist/widgets/CharacterCount.d.ts +0 -56
  83. package/src/FieldEditWidget.test.ts +0 -133
  84. package/src/FieldEditWidget.tsx +0 -207
  85. package/src/__tests__/AddressCellRenderer.test.tsx +0 -166
  86. package/src/__tests__/CurrencyField.minorUnits.test.tsx +0 -191
  87. package/src/__tests__/CurrencyField.symbol.test.tsx +0 -198
  88. package/src/__tests__/DateCellRenderer.test.tsx +0 -82
  89. package/src/__tests__/NumberCellRenderer.grouping.test.tsx +0 -146
  90. package/src/__tests__/NumberCellRenderer.test.tsx +0 -60
  91. package/src/__tests__/PercentCellRenderer.locale.test.tsx +0 -152
  92. package/src/__tests__/PercentCellRenderer.test.tsx +0 -115
  93. package/src/__tests__/boolean-label-association-e2e.test.tsx +0 -298
  94. package/src/__tests__/capability-multiselect-retired.test.ts +0 -109
  95. package/src/__tests__/cell-truncation.test.tsx +0 -96
  96. package/src/__tests__/composite-group-label-e2e.test.tsx +0 -436
  97. package/src/__tests__/composite-group-label-readonly-e2e.test.tsx +0 -403
  98. package/src/__tests__/date-formatter-residue-4272.test.ts +0 -120
  99. package/src/__tests__/date-locale-channel.test.tsx +0 -305
  100. package/src/__tests__/field-carrier-sdui.test.tsx +0 -169
  101. package/src/__tests__/formatCurrency.centsDigit.test.tsx +0 -158
  102. package/src/__tests__/formatCurrency.minorUnits.test.tsx +0 -221
  103. package/src/__tests__/group-labelling-declaration.test.ts +0 -148
  104. package/src/__tests__/lookupCellDisplayField.test.tsx +0 -107
  105. package/src/__tests__/lookupCellDisplayName.test.tsx +0 -119
  106. package/src/__tests__/lookupCellRecordLink.test.tsx +0 -171
  107. package/src/__tests__/lookupCellReferenceKey.test.tsx +0 -57
  108. package/src/__tests__/percent-cell-vs-measure-4576.test.ts +0 -115
  109. package/src/__tests__/percent-formatter-locale-4553.test.ts +0 -147
  110. package/src/__tests__/percent-tie-halfup-4590.test.ts +0 -224
  111. package/src/__tests__/registry-collision.test.ts +0 -91
  112. package/src/__tests__/resolveFieldCurrency.test.ts +0 -20
  113. package/src/__tests__/select-label-association-e2e.test.tsx +0 -199
  114. package/src/__tests__/spec-symbol-batch7.test.ts +0 -126
  115. package/src/__tests__/validation-feedback.test.tsx +0 -361
  116. package/src/__tests__/widget-aria-invalid-e2e.test.tsx +0 -265
  117. package/src/__tests__/widget-aria-invalid-registry-e2e.test.tsx +0 -338
  118. package/src/__tests__/widget-dom-leak-e2e.test.tsx +0 -357
  119. package/src/__tests__/widget-props-contract.test.tsx +0 -142
  120. package/src/coerce-safe-value.test.ts +0 -34
  121. package/src/complex-widgets.test.tsx +0 -924
  122. package/src/currency.ts +0 -144
  123. package/src/datetime-widgets.test.tsx +0 -185
  124. package/src/field-type-alias.multiple.test.ts +0 -81
  125. package/src/field-type-alias.ts +0 -156
  126. package/src/field-type-coverage.test.ts +0 -67
  127. package/src/index.css +0 -44
  128. package/src/index.tsx +0 -2745
  129. package/src/standard-widgets.test.tsx +0 -364
  130. package/src/widgets/AddressField.postalCode.test.tsx +0 -257
  131. package/src/widgets/AddressField.tsx +0 -182
  132. package/src/widgets/AddressField.uniqueIds.test.tsx +0 -93
  133. package/src/widgets/AutoNumberField.tsx +0 -18
  134. package/src/widgets/AvatarField.tsx +0 -117
  135. package/src/widgets/BooleanField.tsx +0 -86
  136. package/src/widgets/CapabilityMultiSelectField.test.tsx +0 -168
  137. package/src/widgets/CapabilityMultiSelectField.tsx +0 -241
  138. package/src/widgets/CharacterCount.tsx +0 -263
  139. package/src/widgets/CheckboxesField.cascade.test.tsx +0 -143
  140. package/src/widgets/CheckboxesField.tsx +0 -169
  141. package/src/widgets/CodeField.tsx +0 -41
  142. package/src/widgets/ColorField.tsx +0 -53
  143. package/src/widgets/CurrencyField.tsx +0 -135
  144. package/src/widgets/DateField.tsx +0 -40
  145. package/src/widgets/DateTimeField.tsx +0 -46
  146. package/src/widgets/EmailField.tsx +0 -37
  147. package/src/widgets/FileField.tsx +0 -512
  148. package/src/widgets/FilterConditionField.tsx +0 -454
  149. package/src/widgets/FormulaField.tsx +0 -38
  150. package/src/widgets/FullscreenFieldEditor.tsx +0 -60
  151. package/src/widgets/GeolocationField.tsx +0 -193
  152. package/src/widgets/GeolocationField.uniqueIds.test.tsx +0 -88
  153. package/src/widgets/GridField.test.tsx +0 -632
  154. package/src/widgets/GridField.tsx +0 -1070
  155. package/src/widgets/ImageCropperDialog.tsx +0 -245
  156. package/src/widgets/ImageField.maxSize.test.tsx +0 -154
  157. package/src/widgets/ImageField.tsx +0 -305
  158. package/src/widgets/ImageLightbox.test.tsx +0 -52
  159. package/src/widgets/ImageLightbox.tsx +0 -108
  160. package/src/widgets/LocationField.tsx +0 -57
  161. package/src/widgets/LookupField.dependsOn.test.tsx +0 -233
  162. package/src/widgets/LookupField.gateHintLabel.test.tsx +0 -135
  163. package/src/widgets/LookupField.hydration.test.tsx +0 -136
  164. package/src/widgets/LookupField.idField.test.tsx +0 -61
  165. package/src/widgets/LookupField.tsx +0 -1295
  166. package/src/widgets/MarkdownContent.tsx +0 -19
  167. package/src/widgets/MasterDetailField.tsx +0 -131
  168. package/src/widgets/MultiSelectField.cascade.test.tsx +0 -143
  169. package/src/widgets/MultiSelectField.tsx +0 -196
  170. package/src/widgets/NumberField.tsx +0 -49
  171. package/src/widgets/ObjectField.tsx +0 -94
  172. package/src/widgets/ObjectRefField.tsx +0 -121
  173. package/src/widgets/OptionsEmptyState.no-provider.test.tsx +0 -88
  174. package/src/widgets/OptionsEmptyState.test.tsx +0 -169
  175. package/src/widgets/OptionsEmptyState.tsx +0 -99
  176. package/src/widgets/PasswordField.tsx +0 -49
  177. package/src/widgets/PeoplePicker.test.tsx +0 -360
  178. package/src/widgets/PeoplePicker.tsx +0 -579
  179. package/src/widgets/PeoplePickerComponents.test.tsx +0 -104
  180. package/src/widgets/PercentField.tsx +0 -95
  181. package/src/widgets/PersonRow.tsx +0 -117
  182. package/src/widgets/PhoneField.tsx +0 -37
  183. package/src/widgets/QRCodeField.tsx +0 -103
  184. package/src/widgets/RadioField.cascade.test.tsx +0 -141
  185. package/src/widgets/RadioField.tsx +0 -143
  186. package/src/widgets/RatingField.tsx +0 -94
  187. package/src/widgets/RecipientPickerField.test.tsx +0 -157
  188. package/src/widgets/RecipientPickerField.tsx +0 -188
  189. package/src/widgets/RecordPickerDialog.baseFilterShapes.test.tsx +0 -191
  190. package/src/widgets/RecordPickerDialog.dateLocale.test.tsx +0 -124
  191. package/src/widgets/RecordPickerDialog.filterOptions.test.tsx +0 -611
  192. package/src/widgets/RecordPickerDialog.selectLabel.test.tsx +0 -112
  193. package/src/widgets/RecordPickerDialog.tsx +0 -1365
  194. package/src/widgets/RichTextField.tsx +0 -176
  195. package/src/widgets/SelectField.cascade.test.tsx +0 -138
  196. package/src/widgets/SelectField.tsx +0 -193
  197. package/src/widgets/SelectionTray.tsx +0 -110
  198. package/src/widgets/SignatureField.tsx +0 -140
  199. package/src/widgets/SliderField.tsx +0 -39
  200. package/src/widgets/SummaryField.tsx +0 -31
  201. package/src/widgets/TagsField.placeholder.no-provider.test.tsx +0 -68
  202. package/src/widgets/TagsField.placeholder.test.tsx +0 -95
  203. package/src/widgets/TagsField.tsx +0 -88
  204. package/src/widgets/TextAreaField.tsx +0 -213
  205. package/src/widgets/TextField.tsx +0 -45
  206. package/src/widgets/TimeField.tsx +0 -31
  207. package/src/widgets/UrlField.tsx +0 -46
  208. package/src/widgets/UserField.tsx +0 -59
  209. package/src/widgets/UserFieldPicker.test.tsx +0 -78
  210. package/src/widgets/VectorField.tsx +0 -29
  211. package/src/widgets/__tests__/FilterConditionField.matchAll.test.ts +0 -66
  212. package/src/widgets/__tests__/FilterConditionField.operators.test.ts +0 -166
  213. package/src/widgets/__tests__/FullscreenFieldEditor.i18n.test.tsx +0 -248
  214. package/src/widgets/__tests__/FullscreenFieldEditor.no-provider.test.tsx +0 -116
  215. package/src/widgets/__tests__/RichTextField.fullscreenDisabled.test.tsx +0 -244
  216. package/src/widgets/__tests__/RichTextField.mobileFullscreen.test.tsx +0 -195
  217. package/src/widgets/__tests__/TextAreaField.characterCount.announcements.test.tsx +0 -417
  218. package/src/widgets/__tests__/TextAreaField.characterCount.i18n.test.tsx +0 -287
  219. package/src/widgets/__tests__/TextAreaField.characterCount.no-provider.test.tsx +0 -160
  220. package/src/widgets/__tests__/TextAreaField.fullscreenCharacterCount.i18n.test.tsx +0 -161
  221. package/src/widgets/__tests__/TextAreaField.fullscreenCharacterCount.test.tsx +0 -346
  222. package/src/widgets/__tests__/TextAreaField.fullscreenDisabled.test.tsx +0 -246
  223. package/src/widgets/__tests__/TextAreaField.mobileFullscreen.test.tsx +0 -175
  224. package/src/widgets/_cell-renderer-bridge.ts +0 -19
  225. package/src/widgets/address-format.ts +0 -120
  226. package/src/widgets/deriveLookupColumns.test.ts +0 -112
  227. package/src/widgets/deriveLookupColumns.ts +0 -108
  228. package/src/widgets/file-size-guard.ts +0 -55
  229. package/src/widgets/file-value.test.ts +0 -230
  230. package/src/widgets/file-value.ts +0 -246
  231. package/src/widgets/nativeDateValue.test.ts +0 -115
  232. package/src/widgets/nativeDateValue.ts +0 -112
  233. package/src/widgets/openNativePicker.ts +0 -18
  234. package/src/widgets/optionWidgets.gatedOptions.test.tsx +0 -267
  235. package/src/widgets/optionWidgets.unconfiguredOptions.test.tsx +0 -150
  236. package/src/widgets/personDisplay.test.ts +0 -113
  237. package/src/widgets/personDisplay.ts +0 -92
  238. package/src/widgets/recentLookups.test.ts +0 -45
  239. package/src/widgets/recentLookups.ts +0 -47
  240. package/src/widgets/toDomProps.ts +0 -204
  241. package/src/widgets/toHostGroupProps.ts +0 -102
  242. package/src/widgets/types.ts +0 -242
  243. package/src/widgets/useCascadingOptions.ts +0 -46
  244. package/src/widgets/useFieldTranslation.ts +0 -132
  245. package/src/widgets/useRecordQuery.test.ts +0 -174
  246. package/src/widgets/useRecordQuery.ts +0 -291
  247. package/src/widgets/useUploadingSignal.test.tsx +0 -62
  248. package/src/widgets/useUploadingSignal.ts +0 -20
  249. package/src/withFieldCarrier.tsx +0 -75
@@ -1,241 +0,0 @@
1
- import React from 'react';
2
- import { Badge, EmptyValue, cn } from '@object-ui/components';
3
- import { SchemaRendererContext } from '@object-ui/react';
4
- import type { DataSource, QueryParams } from '@object-ui/types';
5
- import { FieldWidgetComponentProps } from './types';
6
- import { useFieldTranslation } from './useFieldTranslation';
7
-
8
- /**
9
- * CapabilityMultiSelectField — structured picker for a permission set's
10
- * `system_permissions` (ADR-0056 / epic #2398, phase P2).
11
- *
12
- * `sys_permission_set.system_permissions` is framework-declared as a
13
- * `Field.textarea` that stores a **JSON-serialized array of capability names**
14
- * (e.g. `["setup.access","studio.access"]`; `security-plugin.ts` writes
15
- * `JSON.stringify(...)` and reads `parseJson(...)`). Editing that as raw JSON is
16
- * the anti-pattern ADR-0056 removes. This widget renders the same value as a
17
- * multi-select over the live `sys_capability` registry — grouped by scope,
18
- * labelled, with the capability description on hover — while round-tripping the
19
- * stored value **byte-for-byte** as a JSON string of names.
20
- *
21
- * ## Not a registry field widget (objectui#3308)
22
- *
23
- * This is a plain component, imported directly by its host — Studio's
24
- * `PermissionMatrixEditor` (`packages/app-shell`), which is where ADR-0056 P2
25
- * put the capability editor. It is deliberately NOT reachable through the field
26
- * registry, and `widget: 'capability-multiselect'` is a **retired** hint: the
27
- * key only ever existed on the docs-site-only `registerFields()` path, nothing
28
- * ever stamped the hint (ADR-0056 P1 stamps `permission-facet-link` on all six
29
- * `sys_permission_set` facets), and it was removed under ADR-0049
30
- * enforce-or-remove. Do not re-register it without re-deciding ADR-0056 P2 —
31
- * a field carrying that hint now degrades to its declared `type` renderer,
32
- * which is the defined behavior for an unregistered widget.
33
- */
34
-
35
- interface Capability {
36
- name: string;
37
- label?: string;
38
- description?: string;
39
- scope?: string;
40
- active?: boolean;
41
- }
42
-
43
- /**
44
- * Parse the stored value into the selected capability-name list. The canonical
45
- * storage is a JSON-string array; we also tolerate an already-parsed array (in
46
- * case a caller hands us the parsed value) and a bare comma-separated string
47
- * (legacy/hand-authored) so no selection is silently dropped.
48
- */
49
- export function parseCapabilityNames(value: unknown): string[] {
50
- if (Array.isArray(value)) return value.map((v) => String(v)).filter(Boolean);
51
- if (typeof value === 'string') {
52
- const s = value.trim();
53
- if (!s) return [];
54
- try {
55
- const parsed = JSON.parse(s);
56
- if (Array.isArray(parsed)) return parsed.map((v) => String(v)).filter(Boolean);
57
- // A JSON scalar (unexpected) — treat as a single name.
58
- return [String(parsed)].filter(Boolean);
59
- } catch {
60
- // Not JSON — fall back to comma-splitting so legacy values survive.
61
- return s.split(',').map((x) => x.trim()).filter(Boolean);
62
- }
63
- }
64
- return [];
65
- }
66
-
67
- /**
68
- * Scope → group header order (platform powers first). The visible header is
69
- * localized via `capability.group.<scope>` (objectui#2600 B5) — the capability
70
- * *labels themselves* still come from the sys_capability registry, whose
71
- * per-locale localization is tracked separately (framework).
72
- */
73
- const SCOPE_ORDER = ['platform', 'org', 'other'] as const;
74
-
75
- /**
76
- * objectui#2600 B5 — the curated platform capabilities are a FIXED, known set
77
- * whose labels the sys_capability registry serves in English. Localize just
78
- * these client-side via `capability.label.<name>` (dots → underscores);
79
- * package- and admin-authored capabilities keep their authored registry label.
80
- * (Mirrors @objectstack/spec/security `PLATFORM_CAPABILITIES`.)
81
- */
82
- const CURATED_CAPABILITY_LABELS = new Set([
83
- 'manage_users',
84
- 'manage_org_users',
85
- 'manage_metadata',
86
- 'manage_platform_settings',
87
- 'setup_access',
88
- 'setup_write',
89
- 'studio_access',
90
- ]);
91
-
92
- export function CapabilityMultiSelectField({
93
- value,
94
- onChange,
95
- readonly,
96
- className,
97
- ...props
98
- }: FieldWidgetComponentProps<string | string[]>) {
99
- const { t } = useFieldTranslation();
100
- const ctx = React.useContext(SchemaRendererContext);
101
- const dataSource: DataSource | null =
102
- (props.dataSource as any) ?? (ctx as any)?.dataSource ?? null;
103
- const disabled = props.disabled;
104
-
105
- const [caps, setCaps] = React.useState<Capability[] | null>(null);
106
-
107
- const selected = React.useMemo(() => parseCapabilityNames(value), [value]);
108
-
109
- // Load the live capability registry (active only). Mirrors LookupField's
110
- // context-dataSource access: no registration path forwards a `dataSource`
111
- // prop to a field widget, so the SchemaRenderer context is the reliable
112
- // source. (The absent forwarder named here used to be the docs-demo
113
- // `createFieldRenderer`, removed in objectui#3910 — the conclusion is
114
- // unchanged and now holds for the only remaining path.)
115
- React.useEffect(() => {
116
- if (!dataSource || typeof (dataSource as any).find !== 'function') return;
117
- let cancelled = false;
118
- (async () => {
119
- try {
120
- const res = await dataSource.find('sys_capability', {
121
- $filter: { active: true },
122
- $top: 500,
123
- } as QueryParams);
124
- const rows: Capability[] =
125
- (res as any)?.data ?? (res as any)?.records ?? (Array.isArray(res) ? res : []);
126
- if (!cancelled) setCaps(Array.isArray(rows) ? rows : []);
127
- } catch {
128
- if (!cancelled) setCaps([]);
129
- }
130
- })();
131
- return () => {
132
- cancelled = true;
133
- };
134
- }, [dataSource]);
135
-
136
- // Emit as a JSON string so the value round-trips byte-equivalent to the
137
- // `system_permissions` textarea's `JSON.stringify(string[])` storage.
138
- const emit = React.useCallback(
139
- (names: string[]) => onChange(JSON.stringify(names) as any),
140
- [onChange],
141
- );
142
-
143
- // Union of the fetched registry and any *selected* names not present in it
144
- // (unknown / legacy / package-owned-inactive), so no current grant is hidden
145
- // or dropped. Unknown names land in the "other" group.
146
- const byName = React.useMemo(() => {
147
- const map = new Map<string, Capability>();
148
- for (const c of caps ?? []) if (c?.name) map.set(c.name, c);
149
- for (const n of selected) if (!map.has(n)) map.set(n, { name: n, label: n, scope: 'other' });
150
- return map;
151
- }, [caps, selected]);
152
-
153
- // Curated platform caps get a localized label (objectui#2600 B5); everything
154
- // else keeps the registry-served label.
155
- const labelFor = (name: string) => {
156
- const norm = name.replace(/\./g, '_');
157
- if (CURATED_CAPABILITY_LABELS.has(norm)) return t(`capability.label.${norm}`);
158
- return byName.get(name)?.label || name;
159
- };
160
-
161
- // Group options by scope for the editable grid. Computed BEFORE the readonly
162
- // early-return so the hook order stays stable regardless of `readonly`.
163
- const groups = React.useMemo(() => {
164
- const buckets = new Map<string, Capability[]>();
165
- for (const c of byName.values()) {
166
- const key = (SCOPE_ORDER as readonly string[]).includes(c.scope as string)
167
- ? (c.scope as string)
168
- : 'other';
169
- const list = buckets.get(key) ?? [];
170
- list.push(c);
171
- buckets.set(key, list);
172
- }
173
- return SCOPE_ORDER.filter((s) => buckets.has(s)).map((s) => ({
174
- scope: s,
175
- label: t(`capability.group.${s}`),
176
- items: (buckets.get(s) ?? []).sort((a, b) =>
177
- (a.label || a.name).localeCompare(b.label || b.name),
178
- ),
179
- }));
180
- }, [byName, t]);
181
-
182
- if (readonly) {
183
- if (selected.length === 0) return <EmptyValue />;
184
- return (
185
- <div className="flex flex-wrap gap-1">
186
- {selected.map((name) => (
187
- <Badge key={name} variant="outline" title={byName.get(name)?.description}>
188
- {labelFor(name)}
189
- </Badge>
190
- ))}
191
- </div>
192
- );
193
- }
194
-
195
- const toggle = (name: string) => {
196
- const next = selected.includes(name)
197
- ? selected.filter((x) => x !== name)
198
- : [...selected, name];
199
- emit(next);
200
- };
201
-
202
- return (
203
- <div className={cn('flex flex-col gap-3', className)}>
204
- {caps === null && groups.length === 0 && (
205
- <span className="text-sm text-muted-foreground">Loading capabilities…</span>
206
- )}
207
- {groups.map((group) => (
208
- <div key={group.scope} className="flex flex-col gap-1.5">
209
- <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
210
- {group.label}
211
- </div>
212
- <div className="flex flex-wrap gap-1.5">
213
- {group.items.map((cap) => {
214
- const active = selected.includes(cap.name);
215
- return (
216
- <button
217
- type="button"
218
- key={cap.name}
219
- onClick={() => toggle(cap.name)}
220
- disabled={disabled}
221
- aria-pressed={active}
222
- title={cap.description || undefined}
223
- className={cn(
224
- 'rounded-full border px-3 py-1 text-sm transition-colors disabled:opacity-50',
225
- active
226
- ? 'border-primary bg-primary text-primary-foreground'
227
- : 'border-input bg-background text-foreground hover:bg-accent',
228
- )}
229
- >
230
- {labelFor(cap.name)}
231
- </button>
232
- );
233
- })}
234
- </div>
235
- </div>
236
- ))}
237
- </div>
238
- );
239
- }
240
-
241
- export default CapabilityMultiSelectField;
@@ -1,263 +0,0 @@
1
- /**
2
- * ObjectUI
3
- * Copyright (c) 2024-present ObjectStack Inc.
4
- *
5
- * This source code is licensed under the MIT license found in the
6
- * LICENSE file in the root directory of this source tree.
7
- */
8
-
9
- import React, { useEffect, useState } from 'react';
10
- import { useFieldTranslation } from './useFieldTranslation';
11
-
12
- /**
13
- * The character counter a capped long-text field renders, in the GOV.UK
14
- * character-count shape — extracted from `TextAreaField` so that widget's TWO
15
- * editing surfaces (the inline textarea and the fullscreen dialog) render the
16
- * SAME counting UI instead of two hand-written copies (objectui#3417).
17
- *
18
- * ## Why this is shared rather than copied
19
- *
20
- * objectui#3408 gave the inline counter three nodes — decorative digits, an
21
- * accessible description, a gated status region. The fullscreen dialog's
22
- * counter, passed to `FullscreenFieldEditor` as a `footer`, stayed what it had
23
- * always been: a bare `{n}/{max}` `span` with no accessible name, no
24
- * `aria-describedby` association with the dialog's textarea, and nothing
25
- * `aria-live`. Same field, same cap, same user — and a screen reader in the
26
- * fullscreen dialog got nothing at all, while browse mode read "5 slash 500".
27
- *
28
- * That is the failure mode this package keeps paying for (objectui#3301: the
29
- * fullscreen flag reached `RichTextField` for as long as the feature existed
30
- * and that widget never read it). A second hand-written copy of a counting UI
31
- * is the same failure with an extra step: it drifts, and nothing reports the
32
- * drift. So the counter has ONE implementation and each surface renders it.
33
- *
34
- * ## The three nodes, and why the third is a prop
35
- *
36
- * 1. the visible `{n}/{max}` digits, `aria-hidden` — a glance affordance;
37
- * 2. a visually-hidden DESCRIPTION carrying the translated sentence. The host
38
- * owns {@link CharacterCountProps.descriptionId} and MUST name it in the
39
- * edited control's `aria-describedby`, which is what makes the sentence
40
- * reachable on focus rather than only in browse mode;
41
- * 3. a visually-hidden `aria-live="polite"` STATUS region, silent until the
42
- * value is inside the last 10% / 20 characters of the cap and updated only
43
- * after the typist pauses.
44
- *
45
- * Node 3 is opt-in per surface ({@link CharacterCountProps.announceNearLimit}),
46
- * required rather than defaulted, because "should this surface interrupt the
47
- * user while they type?" is a real decision and neither answer should be
48
- * reached by leaving a prop off. The fullscreen dialog answers no: it is a
49
- * modal the user opened deliberately to write at length, the description
50
- * already tells them the cap on focus, and the dialog's own textarea carries
51
- * the same native `maxLength` stop as the inline one. The inline surface
52
- * answers yes, unchanged from objectui#3408.
53
- */
54
-
55
- /**
56
- * How long the typist must pause before the counter's status region is allowed
57
- * to change (objectui#3408). The GOV.UK Design System character-count component
58
- * uses the same shape and the same order of magnitude.
59
- *
60
- * The number this replaces was effectively 0: the counter WAS the live region,
61
- * so every keystroke re-rendered it and every re-render was an announcement.
62
- * Measured on `origin/main`, zh session, `maxLength: 500`, typing a 52-character
63
- * sentence one character at a time: 52 keystrokes produced 52 distinct
64
- * announcements totalling 979 spoken characters — ~19x the text the user was
65
- * trying to write, each one interrupting the screen reader's echo of what they
66
- * had just typed.
67
- */
68
- const COUNTER_STATUS_DEBOUNCE_MS = 1000;
69
-
70
- /** Announce inside the last 10% of the cap … */
71
- const COUNTER_STATUS_REMAINING_RATIO = 0.1;
72
- /** … or the last 20 characters — whichever the typist reaches FIRST. */
73
- const COUNTER_STATUS_MIN_REMAINING = 20;
74
-
75
- /**
76
- * The remaining-character count at or below which the status region speaks.
77
- *
78
- * "10% remaining OR 20 characters remaining, whichever comes first" is a
79
- * disjunction, and because `remaining` only ever counts DOWN as the user types,
80
- * the branch that fires first is simply the LARGER of the two — hence `max`.
81
- * A 500-character cap starts warning at 50 remaining; a 100-character cap at 20
82
- * (10% of it would be 10, which the typist would reach later, not sooner).
83
- *
84
- * A cap smaller than {@link COUNTER_STATUS_MIN_REMAINING} is therefore "near
85
- * the limit" from the first keystroke, which is correct: on a 10-character
86
- * field every character genuinely is one of the last few. The debounce still
87
- * bounds it to one announcement per pause.
88
- */
89
- function counterStatusThreshold(maxLength: number): number {
90
- return Math.max(
91
- Math.ceil(maxLength * COUNTER_STATUS_REMAINING_RATIO),
92
- COUNTER_STATUS_MIN_REMAINING,
93
- );
94
- }
95
-
96
- export interface CharacterCountProps {
97
- /**
98
- * Length of the text this surface is counting. The inline surface passes the
99
- * committed value's length; the fullscreen dialog passes the DRAFT's, which
100
- * is the number that is true of what the user is looking at.
101
- */
102
- length: number;
103
- /**
104
- * The declared cap. Callers render this component only when the field
105
- * declares one, so it is non-optional here — a counter with no cap to count
106
- * against has nothing to say and must not be mounted at all (an unconditional
107
- * live region in every long-text field is the objectui#3408 defect back
108
- * again).
109
- */
110
- maxLength: number;
111
- /**
112
- * The description node's `id`, minted by the host from `useId()`.
113
- *
114
- * The host MUST also name it in the edited control's `aria-describedby` —
115
- * this component renders the sentence, only the host knows which element is
116
- * being described, and a description nothing references is a node no screen
117
- * reader will ever reach. That association is asserted from the OUTSIDE (the
118
- * tests resolve `aria-describedby` and concatenate the referenced nodes' text,
119
- * exactly as an assistive technology does) rather than trusted here.
120
- *
121
- * Two surfaces of one widget therefore need two ids: the dialog's draft and
122
- * the inline value diverge the moment the user types in the dialog, so one
123
- * shared id would point both controls at whichever sentence rendered last.
124
- */
125
- descriptionId: string;
126
- /**
127
- * Render node 3, the threshold-gated debounced `aria-live` status region.
128
- *
129
- * Required on purpose — see the component doc above. `false` removes the
130
- * region from the DOM entirely (not merely empties it), which is the only
131
- * form of "no live region" a test can tell apart from "a live region that
132
- * happens to be silent right now".
133
- */
134
- announceNearLimit: boolean;
135
- /**
136
- * Classes for the visible digits. Required because placement is entirely the
137
- * surface's business — inline pins them to the textarea's bottom-right
138
- * corner, the dialog lays them out as a footer item — and a default borrowed
139
- * from either one would position the other wrongly while looking deliberate.
140
- */
141
- className: string;
142
- /**
143
- * `data-testid` for the visible digits, namespaced per surface
144
- * (`textarea-character-count`, `textarea-fullscreen-character-count`) so a
145
- * test that finds digits can say WHICH surface it found them on. Same
146
- * convention, same reason, as `FullscreenFieldEditor`'s `testIdPrefix`.
147
- */
148
- testId: string;
149
- }
150
-
151
- export function CharacterCount({
152
- length,
153
- maxLength,
154
- descriptionId,
155
- announceNearLimit,
156
- className,
157
- testId,
158
- }: CharacterCountProps) {
159
- const { t } = useFieldTranslation();
160
-
161
- /**
162
- * The counter sentence as a DESCRIPTION (objectui#3408). Reached through the
163
- * edited control's `aria-describedby`, so focusing it says "12 characters,
164
- * 500 max" once and then shuts up. Before this the cap was announced only as
165
- * a side effect of typing — focus told a screen reader user nothing at all
166
- * that a sighted user could read off the corner of the box.
167
- */
168
- const description = t('fields.textarea.characterCount', { count: length, max: maxLength });
169
-
170
- /**
171
- * The near-limit warning, gated. Silent for the whole comfortable middle of
172
- * the field — a count nobody is close to is not news — and phrased as what
173
- * is LEFT rather than what has been typed, because that is the number the
174
- * user is about to act on. Over-long values (a cap lowered after the record
175
- * was saved) clamp to 0: the textarea's own `maxLength` blocks further
176
- * input, so "0 left" is the true actionable state, and the description above
177
- * still carries the honest `503 of 500`.
178
- *
179
- * Short-circuited by `announceNearLimit` rather than only hidden at render
180
- * time, so a surface that renders no status region also schedules no timer —
181
- * a debounce firing into a region that does not exist is a state update with
182
- * no consumer, and in tests an `act()` warning with no cause.
183
- */
184
- const pendingStatus =
185
- announceNearLimit && maxLength - length <= counterStatusThreshold(maxLength)
186
- ? t('fields.textarea.charactersRemaining', { count: Math.max(maxLength - length, 0) })
187
- : '';
188
-
189
- /**
190
- * The last sentence a PAUSE settled on. Only ever written by the timer —
191
- * never cleared synchronously — so this effect adds no cascading render on
192
- * the keystrokes it is busy staying quiet through
193
- * (`react-hooks/set-state-in-effect`).
194
- */
195
- const [settledStatus, setSettledStatus] = useState('');
196
-
197
- useEffect(() => {
198
- if (!pendingStatus) return;
199
- const timer = setTimeout(() => setSettledStatus(pendingStatus), COUNTER_STATUS_DEBOUNCE_MS);
200
- // Every keystroke cancels the previous pending announcement, so a typist
201
- // who never pauses is never interrupted. The dependency is the SENTENCE,
202
- // not the length: re-typing back to the same count produces the same string
203
- // and therefore no DOM change and no second announcement.
204
- return () => clearTimeout(timer);
205
- }, [pendingStatus]);
206
-
207
- /**
208
- * Speak the settled sentence only while it is still TRUE — i.e. while it is
209
- * the one the current value would produce. Everything else renders empty,
210
- * which costs no speech (emptying a live region announces nothing), and that
211
- * is what makes leaving the warning band silent IMMEDIATELY rather than a
212
- * second later.
213
- *
214
- * The obvious alternative, `pendingStatus ? settledStatus : ''`, is wrong in
215
- * one specific way: delete back out of the band and type into it again, and
216
- * the region re-announces the STALE count from before the excursion a full
217
- * second before the timer corrects it. Announcing a wrong number is worse
218
- * than announcing a right one twice, which is the bounded, sub-second,
219
- * correct-content cost of the comparison below. Pinned by `never
220
- * re-announces the STALE count when the user types back into the band`.
221
- */
222
- const status = settledStatus === pendingStatus ? pendingStatus : '';
223
-
224
- return (
225
- <>
226
- {/*
227
- The VISIBLE counter, and visible ONLY (objectui#3408). It used to be
228
- three things at once: the digits a sighted user glances at, the carrier
229
- of the translated sentence (objectui#3406), and the live region itself —
230
- so the sentence was re-announced on every single keystroke. Split into
231
- the three nodes here, this one is decorative: `aria-hidden` keeps a
232
- screen reader from reading "5 slash 200" on top of the description that
233
- says it properly.
234
- */}
235
- <div className={className} aria-hidden="true" data-testid={testId}>
236
- {length}/{maxLength}
237
- </div>
238
-
239
- {/*
240
- The DESCRIPTION. Referenced by the edited control's `aria-describedby`,
241
- never announced on its own — a screen reader reads it when focus lands
242
- on the control and not again. Visually hidden because the digits above
243
- already say it to the eye.
244
- */}
245
- <span id={descriptionId} className="sr-only">
246
- {description}
247
- </span>
248
-
249
- {/*
250
- The STATUS region, on the surfaces that opted in. Rendered
251
- unconditionally there and starting EMPTY on purpose: a live region has
252
- to be in the DOM before its content changes or the first change is not
253
- announced at all. `aria-atomic` so the whole sentence is spoken rather
254
- than the digits that differ from last time.
255
- */}
256
- {announceNearLimit && (
257
- <span className="sr-only" aria-live="polite" aria-atomic="true">
258
- {status}
259
- </span>
260
- )}
261
- </>
262
- );
263
- }
@@ -1,143 +0,0 @@
1
- /**
2
- * ObjectUI
3
- * Copyright (c) 2024-present ObjectStack Inc.
4
- *
5
- * This source code is licensed under the MIT license found in the
6
- * LICENSE file in the root directory of this source tree.
7
- */
8
-
9
- /**
10
- * Cascading / role-gated `checkboxes` options (#2715 follow-up) — parity with
11
- * `MultiSelectField` (ADR-0058 / #2284).
12
- *
13
- * Exercises the observable widget behaviour: the dependency gate (a "select the
14
- * parent first" empty-state) and the per-element cascade clear — a selection
15
- * dropped from the array when the offered set no longer includes it, while
16
- * still-valid selections are kept. The per-option filtering itself is unit-tested
17
- * in `@object-ui/core` (`optionRules.test.ts`); here we prove the checkbox list
18
- * wires `dependentValues` + predicate scope into that resolver via the shared
19
- * `useCascadingOptions` hook.
20
- */
21
- import { describe, it, expect, vi, beforeEach } from 'vitest';
22
- import React from 'react';
23
- import { render, screen } from '@testing-library/react';
24
- import '@testing-library/jest-dom';
25
- import { PredicateScopeProvider } from '@object-ui/react';
26
- import { CheckboxesField } from './CheckboxesField';
27
-
28
- const provinceField = {
29
- name: 'provinces',
30
- type: 'checkboxes',
31
- dependsOn: 'country',
32
- options: [
33
- { label: 'Zhejiang', value: 'zj', visibleWhen: "record.country == 'cn'" },
34
- { label: 'California', value: 'ca', visibleWhen: "record.country == 'us'" },
35
- ],
36
- } as any;
37
-
38
- beforeEach(() => {
39
- vi.clearAllMocks();
40
- });
41
-
42
- describe('CheckboxesField — dependency gating (#2715)', () => {
43
- it('gates with a "select parent first" hint while the controlling field is empty', () => {
44
- render(
45
- <CheckboxesField
46
- value={[]}
47
- onChange={vi.fn()}
48
- field={provinceField}
49
- {...({ name: 'provinces', dependentValues: {} } as any)}
50
- />,
51
- );
52
- const gate = screen.getByTestId('checkboxes-empty-provinces');
53
- expect(gate).toHaveTextContent(/select country first/i);
54
- // Gated → no checkboxes offered.
55
- expect(screen.queryAllByRole('checkbox')).toHaveLength(0);
56
- });
57
-
58
- it('unlocks the checkboxes once the controlling field is set', () => {
59
- render(
60
- <CheckboxesField
61
- value={[]}
62
- onChange={vi.fn()}
63
- field={provinceField}
64
- {...({ name: 'provinces', dependentValues: { country: 'cn' } } as any)}
65
- />,
66
- );
67
- expect(screen.queryByTestId('checkboxes-empty-provinces')).not.toBeInTheDocument();
68
- // Only the `cn` option is offered.
69
- expect(screen.getByRole('checkbox', { name: 'Zhejiang' })).toBeInTheDocument();
70
- expect(screen.queryByRole('checkbox', { name: 'California' })).not.toBeInTheDocument();
71
- });
72
- });
73
-
74
- describe('CheckboxesField — cascade clear (#2715)', () => {
75
- it('drops only the selections the parent change no longer offers', () => {
76
- const onChange = vi.fn();
77
- render(
78
- <CheckboxesField
79
- value={['zj', 'ca']}
80
- onChange={onChange}
81
- field={provinceField}
82
- {...({ name: 'provinces', dependentValues: { country: 'cn' } } as any)}
83
- />,
84
- );
85
- // 'ca' is a US province — under country=cn it is not offered, so it is
86
- // pruned; the still-valid 'zj' is kept.
87
- expect(onChange).toHaveBeenCalledWith(['zj']);
88
- });
89
-
90
- it('keeps selections that are all still offered', () => {
91
- const onChange = vi.fn();
92
- render(
93
- <CheckboxesField
94
- value={['zj']}
95
- onChange={onChange}
96
- field={provinceField}
97
- {...({ name: 'provinces', dependentValues: { country: 'cn' } } as any)}
98
- />,
99
- );
100
- expect(onChange).not.toHaveBeenCalled();
101
- });
102
- });
103
-
104
- describe('CheckboxesField — role / context gating (#2715)', () => {
105
- const tierField = {
106
- name: 'tiers',
107
- type: 'checkboxes',
108
- options: [
109
- { label: 'Standard', value: 'standard' },
110
- { label: 'Admin only', value: 'admin_only', visibleWhen: "'admin' in current_user.positions" },
111
- ],
112
- } as any;
113
-
114
- it('prunes an admin-only value for a non-admin (offered set excludes it)', () => {
115
- const onChange = vi.fn();
116
- render(
117
- <PredicateScopeProvider scope={{ current_user: { positions: ['sales'] } }}>
118
- <CheckboxesField
119
- value={['standard', 'admin_only']}
120
- onChange={onChange}
121
- field={tierField}
122
- {...({ name: 'tiers', dependentValues: {} } as any)}
123
- />
124
- </PredicateScopeProvider>,
125
- );
126
- expect(onChange).toHaveBeenCalledWith(['standard']);
127
- });
128
-
129
- it('keeps an admin-only value for an admin', () => {
130
- const onChange = vi.fn();
131
- render(
132
- <PredicateScopeProvider scope={{ current_user: { positions: ['admin'] } }}>
133
- <CheckboxesField
134
- value={['standard', 'admin_only']}
135
- onChange={onChange}
136
- field={tierField}
137
- {...({ name: 'tiers', dependentValues: {} } as any)}
138
- />
139
- </PredicateScopeProvider>,
140
- );
141
- expect(onChange).not.toHaveBeenCalled();
142
- });
143
- });