@olenbetong/appframe-ds 1.6.0 → 1.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 (154) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/package.json +3 -3
  3. package/scripts/copyAssets.mjs +27 -27
  4. package/src/autocomplete/Autocomplete.css +253 -253
  5. package/src/autocomplete/Autocomplete.tsx +320 -320
  6. package/src/autocomplete/AutocompleteFrame.tsx +168 -168
  7. package/src/autocomplete/Combobox.tsx +286 -286
  8. package/src/autocomplete/index.ts +4 -4
  9. package/src/autocomplete/types.ts +204 -204
  10. package/src/autocomplete/utils.ts +183 -183
  11. package/src/binding/BoundNumberInput.tsx +42 -42
  12. package/src/binding/BoundNumericTextField.tsx +102 -102
  13. package/src/binding/BoundTextField.tsx +49 -49
  14. package/src/binding/CancelButton.tsx +30 -30
  15. package/src/binding/CancelIconButton.tsx +30 -30
  16. package/src/binding/DataEditToolbar.css +23 -23
  17. package/src/binding/DataEditToolbar.tsx +84 -84
  18. package/src/binding/DeleteButton.tsx +35 -35
  19. package/src/binding/DeleteIconButton.tsx +35 -35
  20. package/src/binding/RefreshButton.tsx +31 -31
  21. package/src/binding/RefreshIconButton.tsx +33 -33
  22. package/src/binding/RefreshRowIconButton.tsx +33 -33
  23. package/src/binding/SaveButton.tsx +37 -37
  24. package/src/binding/SaveIconButton.tsx +38 -38
  25. package/src/binding/index.ts +20 -20
  26. package/src/container/Container.tsx +50 -50
  27. package/src/container/index.ts +1 -1
  28. package/src/cutoff/CutOffPicker.css +12 -12
  29. package/src/cutoff/CutOffPicker.tsx +165 -165
  30. package/src/cutoff/context.tsx +194 -194
  31. package/src/cutoff/dsCutOffDates.ts +21 -21
  32. package/src/cutoff/index.ts +4 -4
  33. package/src/cutoff/utils.test.ts +59 -59
  34. package/src/cutoff/utils.ts +276 -276
  35. package/src/filter/ChipListInput.tsx +79 -79
  36. package/src/filter/FieldFilterPanel.css +150 -150
  37. package/src/filter/FieldFilterPanel.tsx +309 -309
  38. package/src/filter/FilterBuilder.css +152 -152
  39. package/src/filter/FilterBuilder.test.tsx +153 -153
  40. package/src/filter/FilterBuilder.tsx +435 -435
  41. package/src/filter/FilterEditor.css +231 -231
  42. package/src/filter/FilterEditor.test.tsx +285 -285
  43. package/src/filter/FilterEditor.tsx +75 -75
  44. package/src/filter/FilterGroupEditor.tsx +160 -160
  45. package/src/filter/FilterNameDialog.css +22 -22
  46. package/src/filter/FilterNameDialog.tsx +81 -81
  47. package/src/filter/FilterRow.tsx +117 -117
  48. package/src/filter/FilterShareDialog.css +28 -28
  49. package/src/filter/FilterShareDialog.tsx +201 -201
  50. package/src/filter/FilterStringField.tsx +78 -78
  51. package/src/filter/FilterValueEditor.tsx +239 -239
  52. package/src/filter/SavedFilterTree.css +107 -107
  53. package/src/filter/SavedFilterTree.test.tsx +94 -94
  54. package/src/filter/SavedFilterTree.tsx +218 -218
  55. package/src/filter/fieldFilter.test.ts +158 -158
  56. package/src/filter/fieldFilter.ts +139 -139
  57. package/src/filter/index.ts +27 -27
  58. package/src/filter/types.ts +38 -38
  59. package/src/filter/useDistinctValues.test.ts +102 -102
  60. package/src/filter/useDistinctValues.ts +230 -230
  61. package/src/global.d.ts +11 -11
  62. package/src/grid/formatters.ts +23 -0
  63. package/src/grid/index.css +8 -2
  64. package/src/grid/index.tsx +73 -3
  65. package/src/grid/useAfColumns.tsx +28 -4
  66. package/src/grid/useAfGridApi.ts +3 -0
  67. package/src/grid/utcDate.test.ts +25 -0
  68. package/src/grid/utcDate.ts +28 -0
  69. package/src/grid/utcDateEditing.tsx +11 -0
  70. package/src/i18n.ts +13 -13
  71. package/src/index.ts +14 -14
  72. package/src/input/InputAdornments.css +80 -80
  73. package/src/input/InputAdornments.tsx +102 -102
  74. package/src/input/NumberInput.css +9 -9
  75. package/src/input/NumberInput.test.tsx +212 -212
  76. package/src/input/NumberInput.tsx +268 -268
  77. package/src/input/index.ts +3 -3
  78. package/src/input/numberFormat.test.ts +79 -79
  79. package/src/input/numberFormat.ts +94 -94
  80. package/src/layout/AppMenu.tsx +74 -74
  81. package/src/layout/AppMenuDrawer.css +71 -71
  82. package/src/layout/AppMenuDrawer.tsx +122 -122
  83. package/src/layout/AppMenuItem.css +6 -2
  84. package/src/layout/DialogMotion.css +79 -79
  85. package/src/layout/ErrorBoundary.tsx +162 -162
  86. package/src/layout/PageContainer.css +48 -48
  87. package/src/layout/PageContainer.tsx +41 -41
  88. package/src/layout/ResponsiveDialog.css +86 -86
  89. package/src/layout/ResponsiveDialog.tsx +55 -55
  90. package/src/layout/index.tsx +70 -70
  91. package/src/link/Link.tsx +23 -23
  92. package/src/link/index.ts +1 -1
  93. package/src/mdi/Mdi.css +8 -8
  94. package/src/mdi/Mdi.test.tsx +91 -91
  95. package/src/mdi/Mdi.tsx +141 -141
  96. package/src/mdi/MdiConfirmCloseDialog.tsx +47 -47
  97. package/src/mdi/MdiContext.tsx +59 -59
  98. package/src/mdi/MdiDocumentContext.tsx +60 -60
  99. package/src/mdi/MdiPanel.tsx +61 -61
  100. package/src/mdi/MdiRestore.test.tsx +86 -86
  101. package/src/mdi/MdiTab.tsx +30 -30
  102. package/src/mdi/controller.test.ts +382 -382
  103. package/src/mdi/controller.ts +656 -656
  104. package/src/mdi/dockviewHost.ts +132 -132
  105. package/src/mdi/fakeHost.ts +200 -200
  106. package/src/mdi/host.ts +44 -44
  107. package/src/mdi/ids.test.ts +20 -20
  108. package/src/mdi/ids.ts +18 -18
  109. package/src/mdi/index.ts +31 -31
  110. package/src/mdi/layoutRestore.test.ts +156 -156
  111. package/src/mdi/layoutRestore.ts +311 -311
  112. package/src/mdi/layoutSpec.test.ts +143 -143
  113. package/src/mdi/layoutSpec.ts +214 -214
  114. package/src/mdi/layoutStore.test.ts +93 -93
  115. package/src/mdi/layoutStore.ts +99 -99
  116. package/src/mdi/memorySettingsStore.ts +21 -21
  117. package/src/mdi/registry.ts +34 -34
  118. package/src/mdi/testTypes.ts +37 -37
  119. package/src/mdi/theme.ts +22 -22
  120. package/src/mdi/types.ts +214 -214
  121. package/src/page/Page.css +57 -57
  122. package/src/page/PageBlock.css +64 -64
  123. package/src/page/PageBlock.tsx +93 -93
  124. package/src/page/PageHeader.css +88 -88
  125. package/src/page/PageHeader.tsx +115 -115
  126. package/src/page/PageTitle.css +5 -5
  127. package/src/page/PageTitle.tsx +21 -21
  128. package/src/page/index.ts +4 -4
  129. package/src/paper/Paper.tsx +52 -52
  130. package/src/progress/LinearProgress.css +121 -121
  131. package/src/progress/LinearProgress.tsx +106 -106
  132. package/src/progress/index.ts +1 -1
  133. package/src/report-downloader/ReportDownloader.css +67 -67
  134. package/src/report-downloader/components/StatusItem.tsx +87 -87
  135. package/src/report-downloader/components/StatusList.tsx +28 -28
  136. package/src/report-downloader/index.ts +41 -41
  137. package/src/report-downloader/status.tsx +92 -92
  138. package/src/sortable/DropIndicator.css +51 -51
  139. package/src/sortable/DropIndicator.tsx +27 -27
  140. package/src/sortable/SortableItemList.css +21 -21
  141. package/src/sortable/SortableItemList.tsx +264 -264
  142. package/src/sortable/index.ts +8 -8
  143. package/src/sortable/reorderSortOrder.ts +126 -126
  144. package/src/sortable/sortOrder.ts +101 -101
  145. package/src/sortable/types.ts +9 -9
  146. package/src/sortable/useSortableContainer.ts +53 -53
  147. package/src/sortable/useSortableItem.ts +95 -95
  148. package/src/sortable/useSortableList.ts +117 -117
  149. package/src/test/happy-dom-document-class.ts +24 -24
  150. package/src/test/setup.ts +27 -27
  151. package/src/theme/useDsColorScheme.ts +53 -53
  152. package/tsconfig.build.json +9 -9
  153. package/tsconfig.json +8 -8
  154. package/vitest.config.ts +10 -10
package/src/mdi/types.ts CHANGED
@@ -1,214 +1,214 @@
1
- import type { SerializedDockview } from "dockview-react";
2
- import type { ComponentType } from "react";
3
-
4
- /** Parameters handed to a document component. Must be JSON-serialisable, as they are persisted with the layout. */
5
- export type MdiParams = Record<string, unknown>;
6
-
7
- export type MdiDocumentProps<P extends MdiParams = MdiParams> = {
8
- /** Panel id: `type` for singleton types, `type:key` otherwise */
9
- id: string;
10
- type: string;
11
- /** The document key (`key` itself is reserved by React) */
12
- documentKey?: string;
13
- params: P;
14
- };
15
-
16
- export type MdiRestoreResult<P extends MdiParams = MdiParams> = boolean | Partial<{ params: P; title: string }>;
17
-
18
- export type MdiDocumentType<P extends MdiParams = MdiParams> = {
19
- component: ComponentType<MdiDocumentProps<P>>;
20
- /** Initial tab caption. Documents usually override it with `setTitle()` once their data is loaded. */
21
- title?: string | ((params: P, key?: string) => string);
22
- /** One instance per type; `key` is ignored. Default `false` (one instance per key). */
23
- singleton?: boolean;
24
- /** Default for documents of this type; can be overridden per document. Default `true`. */
25
- closable?: boolean;
26
- /**
27
- * Runs for every persisted document of this type before a saved layout is restored.
28
- * Return `false` to drop it (record deleted, no access, …), `true` to keep it, or an
29
- * object with new `params`/`title` to keep it with updated values.
30
- */
31
- restore?: (doc: { key?: string; params: P }) => MdiRestoreResult<P> | Promise<MdiRestoreResult<P>>;
32
- };
33
-
34
- // oxlint-disable-next-line typescript/no-explicit-any -- the registry holds types with different param shapes
35
- export type MdiDocumentTypes = Record<string, MdiDocumentType<any>>;
36
-
37
- /* ---------------------------------------------------------------------------
38
- * Layout spec (what apps write as `defaultLayout`)
39
- * ------------------------------------------------------------------------- */
40
-
41
- export type MdiDocumentSpec<P extends MdiParams = MdiParams> = {
42
- type: string;
43
- key?: string;
44
- params?: P;
45
- title?: string;
46
- /** Overrides the type default */
47
- closable?: boolean;
48
- };
49
-
50
- /**
51
- * How a group treats drops. `true`: nothing can be dropped into the group (onto its tabs
52
- * or its centre), so it keeps exactly the tabs the layout gives it, but documents can
53
- * still be dropped beside it and split its space. `"no-drop-target"`: the group shows
54
- * no drop zones at all, not even along its edges. Either way its tabs cannot be reordered,
55
- * but they can still be dragged out; see `disableDnd` on `Mdi` for fully fixed layouts.
56
- */
57
- export type MdiLocked = boolean | "no-drop-target";
58
-
59
- export type MdiGroupSpec = {
60
- /** Tabs in this group, in order */
61
- tabs: MdiDocumentSpec[];
62
- /** Panel id of the active tab (`type` or `type:key`). Default: the first tab. */
63
- active?: string;
64
- /**
65
- * See {@link MdiLocked}. Defaults to `true` when `hideHeader` is set: a tab dropped into
66
- * a group without a tab bar could neither be seen nor moved back out.
67
- */
68
- locked?: MdiLocked;
69
- /** Hide the tab bar, for a single fixed pane such as a tree. */
70
- hideHeader?: boolean;
71
- /** Relative weight within the parent split. Default `1`. */
72
- size?: number;
73
- };
74
-
75
- export type MdiSplitSpec = {
76
- /** `horizontal` lays children out side by side, `vertical` stacks them. */
77
- direction: "horizontal" | "vertical";
78
- children: MdiLayoutNode[];
79
- /** Relative weight within the parent split. Default `1`. */
80
- size?: number;
81
- };
82
-
83
- export type MdiLayoutNode = MdiGroupSpec | MdiSplitSpec;
84
-
85
- export type MdiLayoutSpec = {
86
- root: MdiLayoutNode;
87
- };
88
-
89
- /* ---------------------------------------------------------------------------
90
- * Persisted layout (IndexedDB value, and what `saveLayout()` returns)
91
- * ------------------------------------------------------------------------- */
92
-
93
- export type MdiDocumentState = {
94
- type: string;
95
- key?: string;
96
- params: MdiParams;
97
- /** Last title shown, so the tab has a caption before the component sets its own */
98
- title?: string;
99
- closable: boolean;
100
- };
101
-
102
- export type MdiLayout = {
103
- /** Schema version of this wrapper. Bump when `MdiLayout` itself changes shape. */
104
- format: 1;
105
- layoutVersion: string | number;
106
- /** What each dockview panel is, keyed by panel id */
107
- documents: Record<string, MdiDocumentState>;
108
- /** dockview's own layout JSON (splits, groups, tabs, popouts) */
109
- dockview: SerializedDockview;
110
- };
111
-
112
- /* ---------------------------------------------------------------------------
113
- * Imperative API
114
- * ------------------------------------------------------------------------- */
115
-
116
- export type MdiDirection = "left" | "right" | "above" | "below";
117
-
118
- export type MdiPosition =
119
- | { referencePanel: string; direction: MdiDirection | "within"; index?: number }
120
- | { direction: MdiDirection };
121
-
122
- export type MdiOpenOptions<P extends MdiParams = MdiParams> = {
123
- type: string;
124
- key?: string;
125
- params?: P;
126
- title?: string;
127
- closable?: boolean;
128
- /** Where to put a new panel. Default: in the active group. Ignored when the document is already open. */
129
- position?: MdiPosition;
130
- /** Open without activating. Default `false`. */
131
- inactive?: boolean;
132
- };
133
-
134
- export type MdiDocumentInfo = MdiDocumentState & {
135
- id: string;
136
- dirty: boolean;
137
- isActive: boolean;
138
- };
139
-
140
- export type MdiCloseOptions = {
141
- /** Skip the closable check, the `onClosing` guard and the dirty prompt */
142
- force?: boolean;
143
- };
144
-
145
- export type MdiConfirmCloseResult = "save" | "discard" | "cancel";
146
-
147
- export type MdiEvents = {
148
- open: MdiDocumentInfo;
149
- close: MdiDocumentInfo;
150
- activeChange: MdiDocumentInfo | undefined;
151
- titleChange: { id: string; title: string };
152
- dirtyChange: { id: string; dirty: boolean };
153
- layoutChange: undefined;
154
- };
155
-
156
- export type MdiApi = {
157
- /**
158
- * Opens a document, or activates it if it is already open. An open document gets the
159
- * new `params` (its component re-renders). Returns the panel id.
160
- */
161
- openDocument<P extends MdiParams = MdiParams>(options: MdiOpenOptions<P>): string;
162
- activate(id: string): void;
163
- /** Runs the close guards and the dirty prompt. Resolves `true` when the document was closed. */
164
- close(id: string, options?: MdiCloseOptions): Promise<boolean>;
165
- /** Closes every document with this key, across types. Forces by default, for when the record is gone. */
166
- closeByKey(key: string, options?: MdiCloseOptions): Promise<void>;
167
- /** Closes all closable documents, optionally of one type. Stops at the first cancelled close and returns `false`. */
168
- closeAll(type?: string): Promise<boolean>;
169
- setTitle(id: string, title: string): void;
170
- setDirty(id: string, dirty: boolean): void;
171
- getActive(): MdiDocumentInfo | undefined;
172
- getDocument(id: string): MdiDocumentInfo | undefined;
173
- getDocuments(type?: string): MdiDocumentInfo[];
174
- hasDirty(): boolean;
175
- /** Moves the document's group to a separate browser window. Resolves `false` if the window was blocked. */
176
- popout(id: string): Promise<boolean>;
177
- subscribe<K extends keyof MdiEvents>(event: K, handler: (event: MdiEvents[K]) => void): () => void;
178
- /** Writes the current layout to IndexedDB immediately and returns it */
179
- saveLayout(): Promise<MdiLayout | undefined>;
180
- /** Re-applies the given layout, or the persisted one, or the default */
181
- loadLayout(layout?: MdiLayout): Promise<void>;
182
- /** Removes the persisted layout and applies the default */
183
- resetLayout(): Promise<void>;
184
- getLayout(): MdiLayout | undefined;
185
- /** The panel id for a type/key pair */
186
- panelId(type: string, key?: string): string;
187
- };
188
-
189
- export type MdiDocumentOptions = {
190
- /**
191
- * Called when the document is dirty and the user chose "Save" in the close prompt.
192
- * Resolve `true` when saved (the close continues) or `false` to keep the document open.
193
- */
194
- onSave?: () => boolean | Promise<boolean>;
195
- /** Runs before the dirty prompt. Return `false` to veto the close. */
196
- onClosing?: () => boolean | Promise<boolean>;
197
- };
198
-
199
- export type MdiDocumentHandle<P extends MdiParams = MdiParams> = {
200
- id: string;
201
- type: string;
202
- key?: string;
203
- params: P;
204
- isActive: boolean;
205
- dirty: boolean;
206
- closable: boolean;
207
- setTitle(title: string): void;
208
- setDirty(dirty: boolean): void;
209
- close(options?: MdiCloseOptions): Promise<boolean>;
210
- activate(): void;
211
- /** The window the document is rendered in (the main window or a popout). Use it as a portal container. */
212
- getWindow(): Window;
213
- mdi: MdiApi;
214
- };
1
+ import type { SerializedDockview } from "dockview-react";
2
+ import type { ComponentType } from "react";
3
+
4
+ /** Parameters handed to a document component. Must be JSON-serialisable, as they are persisted with the layout. */
5
+ export type MdiParams = Record<string, unknown>;
6
+
7
+ export type MdiDocumentProps<P extends MdiParams = MdiParams> = {
8
+ /** Panel id: `type` for singleton types, `type:key` otherwise */
9
+ id: string;
10
+ type: string;
11
+ /** The document key (`key` itself is reserved by React) */
12
+ documentKey?: string;
13
+ params: P;
14
+ };
15
+
16
+ export type MdiRestoreResult<P extends MdiParams = MdiParams> = boolean | Partial<{ params: P; title: string }>;
17
+
18
+ export type MdiDocumentType<P extends MdiParams = MdiParams> = {
19
+ component: ComponentType<MdiDocumentProps<P>>;
20
+ /** Initial tab caption. Documents usually override it with `setTitle()` once their data is loaded. */
21
+ title?: string | ((params: P, key?: string) => string);
22
+ /** One instance per type; `key` is ignored. Default `false` (one instance per key). */
23
+ singleton?: boolean;
24
+ /** Default for documents of this type; can be overridden per document. Default `true`. */
25
+ closable?: boolean;
26
+ /**
27
+ * Runs for every persisted document of this type before a saved layout is restored.
28
+ * Return `false` to drop it (record deleted, no access, …), `true` to keep it, or an
29
+ * object with new `params`/`title` to keep it with updated values.
30
+ */
31
+ restore?: (doc: { key?: string; params: P }) => MdiRestoreResult<P> | Promise<MdiRestoreResult<P>>;
32
+ };
33
+
34
+ // oxlint-disable-next-line typescript/no-explicit-any -- the registry holds types with different param shapes
35
+ export type MdiDocumentTypes = Record<string, MdiDocumentType<any>>;
36
+
37
+ /* ---------------------------------------------------------------------------
38
+ * Layout spec (what apps write as `defaultLayout`)
39
+ * ------------------------------------------------------------------------- */
40
+
41
+ export type MdiDocumentSpec<P extends MdiParams = MdiParams> = {
42
+ type: string;
43
+ key?: string;
44
+ params?: P;
45
+ title?: string;
46
+ /** Overrides the type default */
47
+ closable?: boolean;
48
+ };
49
+
50
+ /**
51
+ * How a group treats drops. `true`: nothing can be dropped into the group (onto its tabs
52
+ * or its centre), so it keeps exactly the tabs the layout gives it, but documents can
53
+ * still be dropped beside it and split its space. `"no-drop-target"`: the group shows
54
+ * no drop zones at all, not even along its edges. Either way its tabs cannot be reordered,
55
+ * but they can still be dragged out; see `disableDnd` on `Mdi` for fully fixed layouts.
56
+ */
57
+ export type MdiLocked = boolean | "no-drop-target";
58
+
59
+ export type MdiGroupSpec = {
60
+ /** Tabs in this group, in order */
61
+ tabs: MdiDocumentSpec[];
62
+ /** Panel id of the active tab (`type` or `type:key`). Default: the first tab. */
63
+ active?: string;
64
+ /**
65
+ * See {@link MdiLocked}. Defaults to `true` when `hideHeader` is set: a tab dropped into
66
+ * a group without a tab bar could neither be seen nor moved back out.
67
+ */
68
+ locked?: MdiLocked;
69
+ /** Hide the tab bar, for a single fixed pane such as a tree. */
70
+ hideHeader?: boolean;
71
+ /** Relative weight within the parent split. Default `1`. */
72
+ size?: number;
73
+ };
74
+
75
+ export type MdiSplitSpec = {
76
+ /** `horizontal` lays children out side by side, `vertical` stacks them. */
77
+ direction: "horizontal" | "vertical";
78
+ children: MdiLayoutNode[];
79
+ /** Relative weight within the parent split. Default `1`. */
80
+ size?: number;
81
+ };
82
+
83
+ export type MdiLayoutNode = MdiGroupSpec | MdiSplitSpec;
84
+
85
+ export type MdiLayoutSpec = {
86
+ root: MdiLayoutNode;
87
+ };
88
+
89
+ /* ---------------------------------------------------------------------------
90
+ * Persisted layout (IndexedDB value, and what `saveLayout()` returns)
91
+ * ------------------------------------------------------------------------- */
92
+
93
+ export type MdiDocumentState = {
94
+ type: string;
95
+ key?: string;
96
+ params: MdiParams;
97
+ /** Last title shown, so the tab has a caption before the component sets its own */
98
+ title?: string;
99
+ closable: boolean;
100
+ };
101
+
102
+ export type MdiLayout = {
103
+ /** Schema version of this wrapper. Bump when `MdiLayout` itself changes shape. */
104
+ format: 1;
105
+ layoutVersion: string | number;
106
+ /** What each dockview panel is, keyed by panel id */
107
+ documents: Record<string, MdiDocumentState>;
108
+ /** dockview's own layout JSON (splits, groups, tabs, popouts) */
109
+ dockview: SerializedDockview;
110
+ };
111
+
112
+ /* ---------------------------------------------------------------------------
113
+ * Imperative API
114
+ * ------------------------------------------------------------------------- */
115
+
116
+ export type MdiDirection = "left" | "right" | "above" | "below";
117
+
118
+ export type MdiPosition =
119
+ | { referencePanel: string; direction: MdiDirection | "within"; index?: number }
120
+ | { direction: MdiDirection };
121
+
122
+ export type MdiOpenOptions<P extends MdiParams = MdiParams> = {
123
+ type: string;
124
+ key?: string;
125
+ params?: P;
126
+ title?: string;
127
+ closable?: boolean;
128
+ /** Where to put a new panel. Default: in the active group. Ignored when the document is already open. */
129
+ position?: MdiPosition;
130
+ /** Open without activating. Default `false`. */
131
+ inactive?: boolean;
132
+ };
133
+
134
+ export type MdiDocumentInfo = MdiDocumentState & {
135
+ id: string;
136
+ dirty: boolean;
137
+ isActive: boolean;
138
+ };
139
+
140
+ export type MdiCloseOptions = {
141
+ /** Skip the closable check, the `onClosing` guard and the dirty prompt */
142
+ force?: boolean;
143
+ };
144
+
145
+ export type MdiConfirmCloseResult = "save" | "discard" | "cancel";
146
+
147
+ export type MdiEvents = {
148
+ open: MdiDocumentInfo;
149
+ close: MdiDocumentInfo;
150
+ activeChange: MdiDocumentInfo | undefined;
151
+ titleChange: { id: string; title: string };
152
+ dirtyChange: { id: string; dirty: boolean };
153
+ layoutChange: undefined;
154
+ };
155
+
156
+ export type MdiApi = {
157
+ /**
158
+ * Opens a document, or activates it if it is already open. An open document gets the
159
+ * new `params` (its component re-renders). Returns the panel id.
160
+ */
161
+ openDocument<P extends MdiParams = MdiParams>(options: MdiOpenOptions<P>): string;
162
+ activate(id: string): void;
163
+ /** Runs the close guards and the dirty prompt. Resolves `true` when the document was closed. */
164
+ close(id: string, options?: MdiCloseOptions): Promise<boolean>;
165
+ /** Closes every document with this key, across types. Forces by default, for when the record is gone. */
166
+ closeByKey(key: string, options?: MdiCloseOptions): Promise<void>;
167
+ /** Closes all closable documents, optionally of one type. Stops at the first cancelled close and returns `false`. */
168
+ closeAll(type?: string): Promise<boolean>;
169
+ setTitle(id: string, title: string): void;
170
+ setDirty(id: string, dirty: boolean): void;
171
+ getActive(): MdiDocumentInfo | undefined;
172
+ getDocument(id: string): MdiDocumentInfo | undefined;
173
+ getDocuments(type?: string): MdiDocumentInfo[];
174
+ hasDirty(): boolean;
175
+ /** Moves the document's group to a separate browser window. Resolves `false` if the window was blocked. */
176
+ popout(id: string): Promise<boolean>;
177
+ subscribe<K extends keyof MdiEvents>(event: K, handler: (event: MdiEvents[K]) => void): () => void;
178
+ /** Writes the current layout to IndexedDB immediately and returns it */
179
+ saveLayout(): Promise<MdiLayout | undefined>;
180
+ /** Re-applies the given layout, or the persisted one, or the default */
181
+ loadLayout(layout?: MdiLayout): Promise<void>;
182
+ /** Removes the persisted layout and applies the default */
183
+ resetLayout(): Promise<void>;
184
+ getLayout(): MdiLayout | undefined;
185
+ /** The panel id for a type/key pair */
186
+ panelId(type: string, key?: string): string;
187
+ };
188
+
189
+ export type MdiDocumentOptions = {
190
+ /**
191
+ * Called when the document is dirty and the user chose "Save" in the close prompt.
192
+ * Resolve `true` when saved (the close continues) or `false` to keep the document open.
193
+ */
194
+ onSave?: () => boolean | Promise<boolean>;
195
+ /** Runs before the dirty prompt. Return `false` to veto the close. */
196
+ onClosing?: () => boolean | Promise<boolean>;
197
+ };
198
+
199
+ export type MdiDocumentHandle<P extends MdiParams = MdiParams> = {
200
+ id: string;
201
+ type: string;
202
+ key?: string;
203
+ params: P;
204
+ isActive: boolean;
205
+ dirty: boolean;
206
+ closable: boolean;
207
+ setTitle(title: string): void;
208
+ setDirty(dirty: boolean): void;
209
+ close(options?: MdiCloseOptions): Promise<boolean>;
210
+ activate(): void;
211
+ /** The window the document is rendered in (the main window or a popout). Use it as a portal container. */
212
+ getWindow(): Window;
213
+ mdi: MdiApi;
214
+ };
package/src/page/Page.css CHANGED
@@ -1,57 +1,57 @@
1
- @media screen {
2
- /*
3
- * Pages get a tinted background so surfaces (Paper, drawer, dialogs —
4
- * which use neutral-background/surface-default) stand out, matching the
5
- * old site design. Scoped to Page usage so the token itself is untouched.
6
- */
7
- body:has(.ObPage-root) {
8
- background-color: var(--ds-color-neutral-background-tinted, #f3f3f4);
9
- }
10
-
11
- .ObPage-root {
12
- display: flex;
13
- flex-direction: column;
14
- box-sizing: border-box;
15
- /* Containing block for the app-menu drawer, so the drawer is confined to the page
16
- rather than the viewport. That is what keeps it clear of a site toolbar rendered
17
- above the app, without needing to know the toolbar's height. */
18
- position: relative;
19
- /* On the base rule, not the drawer-open one below: the content has to slide back when the
20
- drawer closes too, and a transition declared only where the padding is set stops
21
- applying the moment that rule stops matching. Same timing as the drawer itself
22
- (AppMenuDrawer.css), so the content edge follows the drawer edge. */
23
- transition: padding-left 225ms cubic-bezier(0.4, 0, 0.2, 1);
24
- }
25
-
26
- .ObPage-document {
27
- min-height: 100%;
28
- }
29
-
30
- /*
31
- * Fills the element the app is mounted in, not the viewport. A site template may render
32
- * chrome above #root (ob.2026.application renders a toolbar), in which case 100vh is taller
33
- * than the space available and the bottom of the page is cut off.
34
- */
35
- .ObPage-app {
36
- height: 100%;
37
- overflow: hidden;
38
- }
39
-
40
- /* Offset content when a docked Page.Header drawer is open (desktop) */
41
- .ObPage-root:has(.ObPageHeader-drawer.ObPageHeader-drawerDocked.ObPageHeader-drawerOpen) {
42
- padding-left: var(--ob-page-drawer-width, 20rem);
43
- }
44
- }
45
-
46
- @media print {
47
- .ObPage-root,
48
- .ObPage-app {
49
- display: block;
50
- height: auto;
51
- overflow: visible;
52
- }
53
-
54
- .ObPage-root:has(.ObPageHeader-drawer.ObPageHeader-drawerDocked.ObPageHeader-drawerOpen) {
55
- padding-left: 0;
56
- }
57
- }
1
+ @media screen {
2
+ /*
3
+ * Pages get a tinted background so surfaces (Paper, drawer, dialogs —
4
+ * which use neutral-background/surface-default) stand out, matching the
5
+ * old site design. Scoped to Page usage so the token itself is untouched.
6
+ */
7
+ body:has(.ObPage-root) {
8
+ background-color: var(--ds-color-neutral-background-tinted, #f3f3f4);
9
+ }
10
+
11
+ .ObPage-root {
12
+ display: flex;
13
+ flex-direction: column;
14
+ box-sizing: border-box;
15
+ /* Containing block for the app-menu drawer, so the drawer is confined to the page
16
+ rather than the viewport. That is what keeps it clear of a site toolbar rendered
17
+ above the app, without needing to know the toolbar's height. */
18
+ position: relative;
19
+ /* On the base rule, not the drawer-open one below: the content has to slide back when the
20
+ drawer closes too, and a transition declared only where the padding is set stops
21
+ applying the moment that rule stops matching. Same timing as the drawer itself
22
+ (AppMenuDrawer.css), so the content edge follows the drawer edge. */
23
+ transition: padding-left 225ms cubic-bezier(0.4, 0, 0.2, 1);
24
+ }
25
+
26
+ .ObPage-document {
27
+ min-height: 100%;
28
+ }
29
+
30
+ /*
31
+ * Fills the element the app is mounted in, not the viewport. A site template may render
32
+ * chrome above #root (ob.2026.application renders a toolbar), in which case 100vh is taller
33
+ * than the space available and the bottom of the page is cut off.
34
+ */
35
+ .ObPage-app {
36
+ height: 100%;
37
+ overflow: hidden;
38
+ }
39
+
40
+ /* Offset content when a docked Page.Header drawer is open (desktop) */
41
+ .ObPage-root:has(.ObPageHeader-drawer.ObPageHeader-drawerDocked.ObPageHeader-drawerOpen) {
42
+ padding-left: var(--ob-page-drawer-width, 20rem);
43
+ }
44
+ }
45
+
46
+ @media print {
47
+ .ObPage-root,
48
+ .ObPage-app {
49
+ display: block;
50
+ height: auto;
51
+ overflow: visible;
52
+ }
53
+
54
+ .ObPage-root:has(.ObPageHeader-drawer.ObPageHeader-drawerDocked.ObPageHeader-drawerOpen) {
55
+ padding-left: 0;
56
+ }
57
+ }
@@ -1,64 +1,64 @@
1
- .ObPageBlock-root {
2
- box-sizing: border-box;
3
- width: 100%;
4
- margin-inline: auto;
5
- }
6
-
7
- /* The widths are in rem for a 14px root (the 2026 site's 87.5%), so they follow the browser's
8
- font size: text 574px, md 770px, lg 1022px, xl 1540px at the default setting. */
9
- .ObPageBlock-text {
10
- max-width: calc(41rem + 2 * var(--ob-page-gutter, 0rem));
11
- }
12
-
13
- .ObPageBlock-md {
14
- max-width: 55rem;
15
- }
16
-
17
- .ObPageBlock-lg {
18
- max-width: 73rem;
19
- }
20
-
21
- /* 2xl is a deprecated alias: at 90rem it had become narrower than xl. */
22
- .ObPageBlock-xl,
23
- .ObPageBlock-2xl {
24
- max-width: 110rem;
25
- }
26
-
27
- /* Against the leading edge instead of centred in the space left over. */
28
- .ObPageBlock-alignStart {
29
- margin-inline-start: 0;
30
- }
31
-
32
- .ObPageBlock-gutters {
33
- --ob-page-gutter: 1rem;
34
-
35
- padding-inline: var(--ob-page-gutter);
36
- }
37
-
38
- @media screen and (min-width: 600px) {
39
- .ObPageBlock-gutters {
40
- --ob-page-gutter: 1.5rem;
41
- }
42
- }
43
-
44
- @media screen {
45
- .ObPageBlock-grow {
46
- flex: 1 1 auto;
47
- min-height: 0;
48
- }
49
-
50
- .ObPageBlock-overflowAuto {
51
- overflow: auto;
52
- }
53
-
54
- .ObPageBlock-overflowHidden {
55
- overflow: hidden;
56
- }
57
- }
58
-
59
- @media print {
60
- .ObPageBlock-overflowAuto,
61
- .ObPageBlock-overflowHidden {
62
- overflow: visible;
63
- }
64
- }
1
+ .ObPageBlock-root {
2
+ box-sizing: border-box;
3
+ width: 100%;
4
+ margin-inline: auto;
5
+ }
6
+
7
+ /* The widths are in rem for a 14px root (the 2026 site's 87.5%), so they follow the browser's
8
+ font size: text 574px, md 770px, lg 1022px, xl 1540px at the default setting. */
9
+ .ObPageBlock-text {
10
+ max-width: calc(41rem + 2 * var(--ob-page-gutter, 0rem));
11
+ }
12
+
13
+ .ObPageBlock-md {
14
+ max-width: 55rem;
15
+ }
16
+
17
+ .ObPageBlock-lg {
18
+ max-width: 73rem;
19
+ }
20
+
21
+ /* 2xl is a deprecated alias: at 90rem it had become narrower than xl. */
22
+ .ObPageBlock-xl,
23
+ .ObPageBlock-2xl {
24
+ max-width: 110rem;
25
+ }
26
+
27
+ /* Against the leading edge instead of centred in the space left over. */
28
+ .ObPageBlock-alignStart {
29
+ margin-inline-start: 0;
30
+ }
31
+
32
+ .ObPageBlock-gutters {
33
+ --ob-page-gutter: 1rem;
34
+
35
+ padding-inline: var(--ob-page-gutter);
36
+ }
37
+
38
+ @media screen and (min-width: 600px) {
39
+ .ObPageBlock-gutters {
40
+ --ob-page-gutter: 1.5rem;
41
+ }
42
+ }
43
+
44
+ @media screen {
45
+ .ObPageBlock-grow {
46
+ flex: 1 1 auto;
47
+ min-height: 0;
48
+ }
49
+
50
+ .ObPageBlock-overflowAuto {
51
+ overflow: auto;
52
+ }
53
+
54
+ .ObPageBlock-overflowHidden {
55
+ overflow: hidden;
56
+ }
57
+ }
58
+
59
+ @media print {
60
+ .ObPageBlock-overflowAuto,
61
+ .ObPageBlock-overflowHidden {
62
+ overflow: visible;
63
+ }
64
+ }