@olenbetong/appframe-ds 1.8.0 → 1.9.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 (147) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +2 -2
  3. package/src/AfLookup/Lookup.css +9 -1
  4. package/src/AfLookup/Lookup.tsx +8 -10
  5. package/src/AfLookup/LookupCombobox.tsx +1 -9
  6. package/src/AfLookup/LookupEdit.tsx +3 -3
  7. package/src/AfLookup/LookupGrid.css +3 -2
  8. package/src/AfLookup/LookupGrid.tsx +8 -4
  9. package/src/autocomplete/Autocomplete.css +6 -17
  10. package/src/binding/BoundNumberInput.tsx +42 -42
  11. package/src/binding/BoundNumericTextField.tsx +102 -102
  12. package/src/binding/BoundTextField.tsx +49 -49
  13. package/src/binding/CancelButton.tsx +30 -30
  14. package/src/binding/CancelIconButton.tsx +30 -30
  15. package/src/binding/DataEditToolbar.css +23 -23
  16. package/src/binding/DataEditToolbar.tsx +84 -84
  17. package/src/binding/DeleteButton.tsx +35 -35
  18. package/src/binding/DeleteIconButton.tsx +35 -35
  19. package/src/binding/RefreshButton.tsx +31 -31
  20. package/src/binding/RefreshIconButton.tsx +33 -33
  21. package/src/binding/RefreshRowIconButton.tsx +33 -33
  22. package/src/binding/SaveButton.tsx +37 -37
  23. package/src/binding/SaveIconButton.tsx +38 -38
  24. package/src/binding/index.ts +20 -20
  25. package/src/container/Container.tsx +50 -50
  26. package/src/container/index.ts +1 -1
  27. package/src/cutoff/CutOffPicker.css +12 -12
  28. package/src/cutoff/CutOffPicker.tsx +165 -165
  29. package/src/cutoff/context.tsx +194 -194
  30. package/src/cutoff/dsCutOffDates.ts +21 -21
  31. package/src/cutoff/index.ts +4 -4
  32. package/src/cutoff/utils.test.ts +59 -59
  33. package/src/cutoff/utils.ts +276 -276
  34. package/src/filter/ChipListInput.tsx +79 -79
  35. package/src/filter/FieldFilterPanel.css +150 -150
  36. package/src/filter/FieldFilterPanel.tsx +303 -309
  37. package/src/filter/FilterBuilder.css +152 -152
  38. package/src/filter/FilterBuilder.test.tsx +153 -153
  39. package/src/filter/FilterBuilder.tsx +435 -435
  40. package/src/filter/FilterEditor.css +231 -231
  41. package/src/filter/FilterEditor.test.tsx +285 -285
  42. package/src/filter/FilterEditor.tsx +75 -75
  43. package/src/filter/FilterGroupEditor.tsx +160 -160
  44. package/src/filter/FilterNameDialog.css +22 -22
  45. package/src/filter/FilterNameDialog.tsx +81 -81
  46. package/src/filter/FilterRow.tsx +117 -117
  47. package/src/filter/FilterShareDialog.css +28 -28
  48. package/src/filter/FilterShareDialog.tsx +195 -201
  49. package/src/filter/FilterStringField.tsx +72 -78
  50. package/src/filter/FilterValueEditor.tsx +239 -239
  51. package/src/filter/SavedFilterTree.css +107 -107
  52. package/src/filter/SavedFilterTree.test.tsx +94 -94
  53. package/src/filter/SavedFilterTree.tsx +218 -218
  54. package/src/filter/fieldFilter.test.ts +158 -158
  55. package/src/filter/fieldFilter.ts +139 -139
  56. package/src/filter/index.ts +27 -27
  57. package/src/filter/types.ts +38 -38
  58. package/src/filter/useDistinctValues.test.ts +102 -102
  59. package/src/filter/useDistinctValues.ts +230 -230
  60. package/src/global.d.ts +11 -11
  61. package/src/grid/AfGridColumnsPanel.tsx +4 -7
  62. package/src/grid/AfGridError.tsx +2 -2
  63. package/src/grid/AfHeaderFilterCell.tsx +0 -3
  64. package/src/grid/AfHeaderFilterPanel.tsx +1 -3
  65. package/src/grid/GridEditLookup.tsx +0 -2
  66. package/src/grid/Toolbar.tsx +9 -38
  67. package/src/grid/index.css +44 -0
  68. package/src/grid/index.tsx +12 -3
  69. package/src/grid/slots/index.tsx +15 -40
  70. package/src/grid/useAfGridApi.ts +0 -1
  71. package/src/grid/useAfPersistedState.ts +4 -8
  72. package/src/grid/useAfSizeMode.ts +19 -0
  73. package/src/i18n.ts +13 -13
  74. package/src/index.ts +14 -14
  75. package/src/input/NumberInput.tsx +0 -2
  76. package/src/layout/AppMenu.tsx +74 -74
  77. package/src/layout/AppMenuDrawer.css +71 -71
  78. package/src/layout/AppMenuDrawer.tsx +122 -122
  79. package/src/layout/DialogMotion.css +79 -79
  80. package/src/layout/ErrorBoundary.tsx +162 -162
  81. package/src/layout/PageContainer.css +48 -48
  82. package/src/layout/PageContainer.tsx +41 -41
  83. package/src/layout/ResponsiveDialog.css +86 -86
  84. package/src/layout/ResponsiveDialog.tsx +55 -55
  85. package/src/layout/index.tsx +70 -70
  86. package/src/link/Link.tsx +23 -23
  87. package/src/link/index.ts +1 -1
  88. package/src/list/ItemList.css +2 -1
  89. package/src/mdi/Mdi.test.tsx +91 -91
  90. package/src/mdi/Mdi.tsx +141 -141
  91. package/src/mdi/MdiConfirmCloseDialog.tsx +41 -47
  92. package/src/mdi/MdiContext.tsx +59 -59
  93. package/src/mdi/MdiDocumentContext.tsx +60 -60
  94. package/src/mdi/MdiPanel.tsx +61 -61
  95. package/src/mdi/MdiRestore.test.tsx +86 -86
  96. package/src/mdi/MdiTab.tsx +30 -30
  97. package/src/mdi/controller.test.ts +382 -382
  98. package/src/mdi/controller.ts +656 -656
  99. package/src/mdi/dockviewHost.ts +132 -132
  100. package/src/mdi/fakeHost.ts +200 -200
  101. package/src/mdi/host.ts +44 -44
  102. package/src/mdi/ids.test.ts +20 -20
  103. package/src/mdi/ids.ts +18 -18
  104. package/src/mdi/index.ts +31 -31
  105. package/src/mdi/layoutRestore.test.ts +156 -156
  106. package/src/mdi/layoutRestore.ts +311 -311
  107. package/src/mdi/layoutSpec.test.ts +143 -143
  108. package/src/mdi/layoutSpec.ts +214 -214
  109. package/src/mdi/layoutStore.test.ts +93 -93
  110. package/src/mdi/layoutStore.ts +99 -99
  111. package/src/mdi/memorySettingsStore.ts +21 -21
  112. package/src/mdi/registry.ts +34 -34
  113. package/src/mdi/testTypes.ts +37 -37
  114. package/src/mdi/theme.ts +22 -22
  115. package/src/mdi/types.ts +214 -214
  116. package/src/page/Page.css +57 -57
  117. package/src/page/PageBlock.css +64 -64
  118. package/src/page/PageBlock.tsx +93 -93
  119. package/src/page/PageHeader.css +88 -88
  120. package/src/page/PageHeader.tsx +115 -115
  121. package/src/page/PageTitle.css +5 -5
  122. package/src/page/PageTitle.tsx +21 -21
  123. package/src/page/index.ts +4 -4
  124. package/src/paper/Paper.tsx +52 -52
  125. package/src/progress/LinearProgress.css +121 -121
  126. package/src/progress/LinearProgress.tsx +106 -106
  127. package/src/progress/index.ts +1 -1
  128. package/src/report-downloader/ReportDownloader.css +67 -67
  129. package/src/report-downloader/components/StatusItem.tsx +87 -87
  130. package/src/report-downloader/components/StatusList.tsx +28 -28
  131. package/src/report-downloader/index.ts +41 -41
  132. package/src/report-downloader/status.tsx +92 -92
  133. package/src/sortable/DropIndicator.css +51 -51
  134. package/src/sortable/DropIndicator.tsx +27 -27
  135. package/src/sortable/SortableItemList.css +21 -21
  136. package/src/sortable/SortableItemList.tsx +264 -264
  137. package/src/sortable/index.ts +8 -8
  138. package/src/sortable/reorderSortOrder.ts +126 -126
  139. package/src/sortable/sortOrder.ts +101 -101
  140. package/src/sortable/types.ts +9 -9
  141. package/src/sortable/useSortableContainer.ts +53 -53
  142. package/src/sortable/useSortableItem.ts +95 -95
  143. package/src/sortable/useSortableList.ts +117 -117
  144. package/src/test/happy-dom-document-class.ts +24 -24
  145. package/src/test/setup.ts +27 -27
  146. package/src/theme/sizeMode.ts +62 -0
  147. package/src/theme/useDsColorScheme.ts +53 -53
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
+ }