@agnos-ui/react-bootstrap 0.9.3 → 0.10.0-next.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.
- package/components/drawer/drawer.d.ts +22 -0
- package/components/drawer/drawer.gen.d.ts +289 -0
- package/components/drawer/index.cjs +7 -0
- package/components/drawer/index.d.ts +2 -0
- package/components/drawer/index.js +7 -0
- package/components/modal/index.cjs +2 -1
- package/components/modal/index.js +2 -1
- package/components/modal/modal.gen.d.ts +7 -1
- package/components/toast/index.cjs +1 -1
- package/components/toast/index.js +1 -1
- package/config.gen.d.ts +5 -0
- package/drawer-D1dVH8iO.cjs +33 -0
- package/drawer-iEXzDYco.js +34 -0
- package/generated/index.d.ts +1 -0
- package/generated/services/focusElement.cjs +9 -0
- package/generated/services/focusElement.d.ts +1 -0
- package/generated/services/focusElement.js +1 -0
- package/index.cjs +15 -2
- package/index.d.ts +1 -0
- package/index.js +10 -3
- package/{modal-CHNXwCta.js → modal-CCDHxJ6u.js} +3 -1
- package/{modal-C22MXJLV.cjs → modal-DSduAQXI.cjs} +2 -0
- package/package.json +3 -3
- package/{toasterProvider-AZi99tUa.js → toasterProvider-BU8FKWH6.js} +1 -1
- package/{toasterProvider-DeTgUXN8.cjs → toasterProvider-Dt2XqB9t.cjs} +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { Ref } from 'react';
|
|
2
|
+
import type { DrawerApi, DrawerContext, DrawerProps } from './drawer.gen';
|
|
3
|
+
/**
|
|
4
|
+
* Renders the default slot structure for a Drawer component.
|
|
5
|
+
*
|
|
6
|
+
* @param slotContext - The context containing the state and properties for the Drawer component.
|
|
7
|
+
* @returns The JSX element representing the default slot structure of the Drawer.
|
|
8
|
+
*/
|
|
9
|
+
export declare const DefaultDrawerSlotStructure: (slotContext: DrawerContext) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
/**
|
|
11
|
+
* Drawer component that integrates with a widget context and renders a slot structure.
|
|
12
|
+
*
|
|
13
|
+
* @param props - The properties for the Drawer component.
|
|
14
|
+
* @param props.ref - Ref to expose the Drawer API.
|
|
15
|
+
* @returns The rendered Drawer component.
|
|
16
|
+
*
|
|
17
|
+
* The Drawer component uses the {@link useWidget} hook to create a widget context with the provided
|
|
18
|
+
* configuration. It renders the slot content using the `Slot` component.
|
|
19
|
+
*/
|
|
20
|
+
export declare function Drawer(props: Partial<DrawerProps> & {
|
|
21
|
+
ref?: Ref<DrawerApi>;
|
|
22
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,289 @@
|
|
|
1
|
+
import type { WidgetSlotContext, SlotContent, Directive, Widget, WidgetFactory } from '@agnos-ui/react-headless/types';
|
|
2
|
+
import type { TransitionFn } from '@agnos-ui/react-headless/services/transitions/baseTransitions';
|
|
3
|
+
/**
|
|
4
|
+
* Retrieve a shallow copy of the default Drawer config
|
|
5
|
+
* @returns the default Drawer config
|
|
6
|
+
*/
|
|
7
|
+
declare const export_getDrawerDefaultConfig: () => DrawerProps;
|
|
8
|
+
export { export_getDrawerDefaultConfig as getDrawerDefaultConfig };
|
|
9
|
+
/**
|
|
10
|
+
* Represents the context for a Drawer widget.
|
|
11
|
+
* This interface is an alias for `WidgetSlotContext<DrawerWidget>`.
|
|
12
|
+
*/
|
|
13
|
+
export type DrawerContext = WidgetSlotContext<DrawerWidget>;
|
|
14
|
+
/**
|
|
15
|
+
* Represents the state of a Drawer component.
|
|
16
|
+
*/
|
|
17
|
+
export interface DrawerState {
|
|
18
|
+
/**
|
|
19
|
+
* Whether the backdrop is fully hidden. This can be true either because {@link DrawerProps.backdrop|backdrop} is false or
|
|
20
|
+
* because {@link DrawerProps.visible|visible} is false and there is no current transition.
|
|
21
|
+
*/
|
|
22
|
+
backdropHidden: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Flag to show whether the drawer is fully hidden.
|
|
25
|
+
*/
|
|
26
|
+
hidden: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Which element should contain the drawer and backdrop DOM elements.
|
|
29
|
+
* If it is not null, the drawer and backdrop DOM elements are moved to the specified container.
|
|
30
|
+
* Otherwise, they stay where the widget is located.
|
|
31
|
+
*
|
|
32
|
+
* @defaultValue
|
|
33
|
+
* ```ts
|
|
34
|
+
* typeof window !== 'undefined' ? document.body : null
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
container: HTMLElement | null;
|
|
38
|
+
/**
|
|
39
|
+
* Classes to add on the backdrop DOM element.
|
|
40
|
+
*
|
|
41
|
+
* @defaultValue `''`
|
|
42
|
+
*/
|
|
43
|
+
backdropClass: string;
|
|
44
|
+
/**
|
|
45
|
+
* If `true`, the drawer is shown; otherwise, it is hidden.
|
|
46
|
+
*
|
|
47
|
+
* @defaultValue `false`
|
|
48
|
+
*/
|
|
49
|
+
visible: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* If `true`, the drawer can be resized by the user.
|
|
52
|
+
*
|
|
53
|
+
* @defaultValue `false`
|
|
54
|
+
*/
|
|
55
|
+
resizable: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* CSS classes to be applied on the widget main container
|
|
58
|
+
*
|
|
59
|
+
* @defaultValue `''`
|
|
60
|
+
*/
|
|
61
|
+
className: string;
|
|
62
|
+
/**
|
|
63
|
+
* Global template for the drawer component
|
|
64
|
+
*/
|
|
65
|
+
structure: SlotContent<DrawerContext>;
|
|
66
|
+
/**
|
|
67
|
+
* Template for the drawer header
|
|
68
|
+
*/
|
|
69
|
+
header: SlotContent<DrawerContext>;
|
|
70
|
+
/**
|
|
71
|
+
* Template for the drawer body
|
|
72
|
+
*/
|
|
73
|
+
children: SlotContent<DrawerContext>;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* Represents the properties for the Drawer component.
|
|
77
|
+
*/
|
|
78
|
+
export interface DrawerProps {
|
|
79
|
+
/**
|
|
80
|
+
* The transition function will be executed when the drawer is displayed or hidden.
|
|
81
|
+
*
|
|
82
|
+
* @defaultValue
|
|
83
|
+
* ```ts
|
|
84
|
+
* () => {}
|
|
85
|
+
* ```
|
|
86
|
+
*/
|
|
87
|
+
transition: TransitionFn;
|
|
88
|
+
/**
|
|
89
|
+
* The transition function for vertically positioned drawer (top, bottom) that will be executed when the drawer is displayed or hidden.
|
|
90
|
+
*
|
|
91
|
+
* @defaultValue
|
|
92
|
+
* ```ts
|
|
93
|
+
* () => {}
|
|
94
|
+
* ```
|
|
95
|
+
*/
|
|
96
|
+
verticalTransition: TransitionFn;
|
|
97
|
+
/**
|
|
98
|
+
* The transition to use for the backdrop behind the drawer (if present).
|
|
99
|
+
*
|
|
100
|
+
* @defaultValue
|
|
101
|
+
* ```ts
|
|
102
|
+
* () => {}
|
|
103
|
+
* ```
|
|
104
|
+
*/
|
|
105
|
+
backdropTransition: TransitionFn;
|
|
106
|
+
/**
|
|
107
|
+
* If `true` opening and closing will be animated.
|
|
108
|
+
*/
|
|
109
|
+
animated: boolean;
|
|
110
|
+
/**
|
|
111
|
+
* aria-labelledby attribute to use for the drawer element.
|
|
112
|
+
*/
|
|
113
|
+
ariaLabelledBy: string;
|
|
114
|
+
/**
|
|
115
|
+
* aria-describedby attribute to use for the drawer element.
|
|
116
|
+
*/
|
|
117
|
+
ariaDescribedBy: string;
|
|
118
|
+
/**
|
|
119
|
+
* The width of the drawer in pixels.
|
|
120
|
+
*/
|
|
121
|
+
width: number;
|
|
122
|
+
/**
|
|
123
|
+
* The height of the drawer in pixels.
|
|
124
|
+
*/
|
|
125
|
+
height: number;
|
|
126
|
+
/**
|
|
127
|
+
* If `true` displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable
|
|
128
|
+
*/
|
|
129
|
+
backdrop: boolean;
|
|
130
|
+
/**
|
|
131
|
+
* If `true` allows body scrolling when the drawer is open.
|
|
132
|
+
*/
|
|
133
|
+
bodyScroll: boolean;
|
|
134
|
+
/**
|
|
135
|
+
* Event to be triggered when the transition is completed and the drawer is not visible.
|
|
136
|
+
*
|
|
137
|
+
* @defaultValue
|
|
138
|
+
* ```ts
|
|
139
|
+
* () => {}
|
|
140
|
+
* ```
|
|
141
|
+
*/
|
|
142
|
+
onHidden: () => void;
|
|
143
|
+
/**
|
|
144
|
+
* Event to be triggered when the transition is completed and the drawer is visible.
|
|
145
|
+
*
|
|
146
|
+
* @defaultValue
|
|
147
|
+
* ```ts
|
|
148
|
+
* () => {}
|
|
149
|
+
* ```
|
|
150
|
+
*/
|
|
151
|
+
onShown: () => void;
|
|
152
|
+
/**
|
|
153
|
+
* An event emitted when the width is changed.
|
|
154
|
+
*
|
|
155
|
+
* Event payload is equal to the newly selected width.
|
|
156
|
+
*
|
|
157
|
+
* @defaultValue
|
|
158
|
+
* ```ts
|
|
159
|
+
* () => {}
|
|
160
|
+
* ```
|
|
161
|
+
*/
|
|
162
|
+
onWidthChange: (width: number) => void;
|
|
163
|
+
/**
|
|
164
|
+
* An event emitted when the height is changed.
|
|
165
|
+
*
|
|
166
|
+
* Event payload is equal to the newly selected height.
|
|
167
|
+
*
|
|
168
|
+
* @defaultValue
|
|
169
|
+
* ```ts
|
|
170
|
+
* () => {}
|
|
171
|
+
* ```
|
|
172
|
+
*/
|
|
173
|
+
onHeightChange: (width: number) => void;
|
|
174
|
+
/**
|
|
175
|
+
* Event to be triggered when the visible property changes.
|
|
176
|
+
*
|
|
177
|
+
* @param visible - new value of the visible propery
|
|
178
|
+
*
|
|
179
|
+
* @defaultValue
|
|
180
|
+
* ```ts
|
|
181
|
+
* () => {}
|
|
182
|
+
* ```
|
|
183
|
+
*/
|
|
184
|
+
onVisibleChange: (visible: boolean) => void;
|
|
185
|
+
/**
|
|
186
|
+
* Which element should contain the drawer and backdrop DOM elements.
|
|
187
|
+
* If it is not null, the drawer and backdrop DOM elements are moved to the specified container.
|
|
188
|
+
* Otherwise, they stay where the widget is located.
|
|
189
|
+
*
|
|
190
|
+
* @defaultValue
|
|
191
|
+
* ```ts
|
|
192
|
+
* typeof window !== 'undefined' ? document.body : null
|
|
193
|
+
* ```
|
|
194
|
+
*/
|
|
195
|
+
container: HTMLElement | null;
|
|
196
|
+
/**
|
|
197
|
+
* Classes to add on the backdrop DOM element.
|
|
198
|
+
*
|
|
199
|
+
* @defaultValue `''`
|
|
200
|
+
*/
|
|
201
|
+
backdropClass: string;
|
|
202
|
+
/**
|
|
203
|
+
* If `true`, the drawer is shown; otherwise, it is hidden.
|
|
204
|
+
*
|
|
205
|
+
* @defaultValue `false`
|
|
206
|
+
*/
|
|
207
|
+
visible: boolean;
|
|
208
|
+
/**
|
|
209
|
+
* If `true`, the drawer can be resized by the user.
|
|
210
|
+
*
|
|
211
|
+
* @defaultValue `false`
|
|
212
|
+
*/
|
|
213
|
+
resizable: boolean;
|
|
214
|
+
/**
|
|
215
|
+
* CSS classes to be applied on the widget main container
|
|
216
|
+
*
|
|
217
|
+
* @defaultValue `''`
|
|
218
|
+
*/
|
|
219
|
+
className: string;
|
|
220
|
+
/**
|
|
221
|
+
* Global template for the drawer component
|
|
222
|
+
*/
|
|
223
|
+
structure: SlotContent<DrawerContext>;
|
|
224
|
+
/**
|
|
225
|
+
* Template for the drawer header
|
|
226
|
+
*/
|
|
227
|
+
header: SlotContent<DrawerContext>;
|
|
228
|
+
/**
|
|
229
|
+
* Template for the drawer body
|
|
230
|
+
*/
|
|
231
|
+
children: SlotContent<DrawerContext>;
|
|
232
|
+
}
|
|
233
|
+
/**
|
|
234
|
+
* Represents the directives for the Drawer component.
|
|
235
|
+
*/
|
|
236
|
+
export interface DrawerDirectives {
|
|
237
|
+
/**
|
|
238
|
+
* Directive to put on the drawer DOM element.
|
|
239
|
+
*/
|
|
240
|
+
drawerDirective: Directive;
|
|
241
|
+
/**
|
|
242
|
+
* Directive to put on the backdrop DOM element.
|
|
243
|
+
*/
|
|
244
|
+
backdropDirective: Directive;
|
|
245
|
+
/**
|
|
246
|
+
* Directive to put on the splitter DOM element.
|
|
247
|
+
*/
|
|
248
|
+
splitterDirective: Directive;
|
|
249
|
+
/**
|
|
250
|
+
* Directive to put on the container DOM element in order for the drawer to size correctly.
|
|
251
|
+
*/
|
|
252
|
+
containerDirective: Directive;
|
|
253
|
+
/**
|
|
254
|
+
* Portal directive to put on the drawer DOM element.
|
|
255
|
+
*/
|
|
256
|
+
drawerPortalDirective: Directive;
|
|
257
|
+
/**
|
|
258
|
+
* Portal directive to put on the backdrop DOM element.
|
|
259
|
+
*/
|
|
260
|
+
backdropPortalDirective: Directive;
|
|
261
|
+
}
|
|
262
|
+
/**
|
|
263
|
+
* Represents a Drawer widget component.
|
|
264
|
+
*/
|
|
265
|
+
export type DrawerWidget = Widget<DrawerProps, DrawerState, DrawerApi, DrawerDirectives>;
|
|
266
|
+
/**
|
|
267
|
+
* Create a Drawer with given config props
|
|
268
|
+
* @param config - an optional Drawer config
|
|
269
|
+
* @returns a DrawerWidget
|
|
270
|
+
*/
|
|
271
|
+
declare const export_createDrawer: WidgetFactory<DrawerWidget>;
|
|
272
|
+
export { export_createDrawer as createDrawer };
|
|
273
|
+
/**
|
|
274
|
+
* Possible values for the drawer positions
|
|
275
|
+
*/
|
|
276
|
+
export type DrawerPositions = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
|
|
277
|
+
/**
|
|
278
|
+
* Interface representing the API for a Drawer component.
|
|
279
|
+
*/
|
|
280
|
+
export interface DrawerApi {
|
|
281
|
+
/**
|
|
282
|
+
* Trigger the opening of the drawer.
|
|
283
|
+
*/
|
|
284
|
+
open: () => void;
|
|
285
|
+
/**
|
|
286
|
+
* Trigger the closing of the drawer.
|
|
287
|
+
*/
|
|
288
|
+
close: () => void;
|
|
289
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const drawer = require("../../drawer-D1dVH8iO.cjs");
|
|
4
|
+
exports.DefaultDrawerSlotStructure = drawer.DefaultDrawerSlotStructure;
|
|
5
|
+
exports.Drawer = drawer.Drawer;
|
|
6
|
+
exports.createDrawer = drawer.export_createDrawer;
|
|
7
|
+
exports.getDrawerDefaultConfig = drawer.export_getDrawerDefaultConfig;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const modal = require("../../modal-
|
|
3
|
+
const modal = require("../../modal-DSduAQXI.cjs");
|
|
4
4
|
exports.Modal = modal.Modal;
|
|
5
5
|
exports.ModalDefaultSlotHeader = modal.ModalDefaultSlotHeader;
|
|
6
6
|
exports.ModalDefaultSlotStructure = modal.ModalDefaultSlotStructure;
|
|
7
7
|
exports.createModal = modal.export_createModal;
|
|
8
8
|
exports.getModalDefaultConfig = modal.export_getModalDefaultConfig;
|
|
9
9
|
exports.modalCloseButtonClick = modal.export_modalCloseButtonClick;
|
|
10
|
+
exports.modalCloseEscape = modal.export_modalCloseEscape;
|
|
10
11
|
exports.modalOutsideClick = modal.export_modalOutsideClick;
|
|
11
12
|
exports.openModal = modal.openModal;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { b, M, a, c, e, f, d, o } from "../../modal-
|
|
1
|
+
import { b, M, a, c, e, f, g, d, o } from "../../modal-CCDHxJ6u.js";
|
|
2
2
|
export {
|
|
3
3
|
b as Modal,
|
|
4
4
|
M as ModalDefaultSlotHeader,
|
|
@@ -6,6 +6,7 @@ export {
|
|
|
6
6
|
c as createModal,
|
|
7
7
|
e as getModalDefaultConfig,
|
|
8
8
|
f as modalCloseButtonClick,
|
|
9
|
+
g as modalCloseEscape,
|
|
9
10
|
d as modalOutsideClick,
|
|
10
11
|
o as openModal
|
|
11
12
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { modalOutsideClick, modalCloseButtonClick } from '@agnos-ui/core-bootstrap/components/modal';
|
|
1
|
+
import { modalOutsideClick, modalCloseButtonClick, modalCloseEscape } from '@agnos-ui/core-bootstrap/components/modal';
|
|
2
2
|
import type { WidgetSlotContext, SlotContent, Widget, PropsConfig, Directive } from '@agnos-ui/react-headless/types';
|
|
3
3
|
import type { TransitionFn } from '@agnos-ui/react-headless/services/transitions/baseTransitions';
|
|
4
4
|
/**
|
|
@@ -309,6 +309,12 @@ export { export_modalOutsideClick as modalOutsideClick };
|
|
|
309
309
|
*/
|
|
310
310
|
declare const export_modalCloseButtonClick: typeof modalCloseButtonClick;
|
|
311
311
|
export { export_modalCloseButtonClick as modalCloseButtonClick };
|
|
312
|
+
/**
|
|
313
|
+
* Value present in the {@link ModalBeforeCloseEvent.result|result} property of the {@link ModalProps.onBeforeClose|onBeforeClose} event
|
|
314
|
+
* and returned by the {@link ModalApi.open|open} method, when the modal is closed by pressing the Escape key.
|
|
315
|
+
*/
|
|
316
|
+
declare const export_modalCloseEscape: typeof modalCloseEscape;
|
|
317
|
+
export { export_modalCloseEscape as modalCloseEscape };
|
|
312
318
|
/**
|
|
313
319
|
* Type of the parameter of {@link ModalProps.onBeforeClose|onBeforeClose}.
|
|
314
320
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const toasterProvider = require("../../toasterProvider-
|
|
3
|
+
const toasterProvider = require("../../toasterProvider-Dt2XqB9t.cjs");
|
|
4
4
|
exports.Toast = toasterProvider.Toast;
|
|
5
5
|
exports.ToastDefaultSlotStructure = toasterProvider.ToastDefaultSlotStructure;
|
|
6
6
|
exports.ToasterContainer = toasterProvider.ToasterContainer;
|
package/config.gen.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { AccordionProps } from './components/accordion';
|
|
|
2
2
|
import type { AlertProps } from './components/alert';
|
|
3
3
|
import type { CarouselProps } from './components/carousel';
|
|
4
4
|
import type { CollapseProps } from './components/collapse';
|
|
5
|
+
import type { DrawerProps } from './components/drawer';
|
|
5
6
|
import type { ModalProps } from './components/modal';
|
|
6
7
|
import type { PaginationProps } from './components/pagination';
|
|
7
8
|
import type { ProgressbarProps } from './components/progressbar';
|
|
@@ -27,6 +28,10 @@ export type WidgetsConfig = {
|
|
|
27
28
|
* the collapse widget config
|
|
28
29
|
*/
|
|
29
30
|
collapse: CollapseProps;
|
|
31
|
+
/**
|
|
32
|
+
* the drawer widget config
|
|
33
|
+
*/
|
|
34
|
+
drawer: DrawerProps;
|
|
30
35
|
/**
|
|
31
36
|
* the modal widget config
|
|
32
37
|
*/
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
+
const slot = require("@agnos-ui/react-headless/slot");
|
|
4
|
+
const directive = require("@agnos-ui/react-headless/utils/directive");
|
|
5
|
+
const portal = require("@agnos-ui/react-headless/utils/portal");
|
|
6
|
+
const React = require("react");
|
|
7
|
+
const generated_config = require("./generated/config.cjs");
|
|
8
|
+
const drawer = require("@agnos-ui/core-bootstrap/components/drawer");
|
|
9
|
+
const export_getDrawerDefaultConfig = drawer.getDrawerDefaultConfig;
|
|
10
|
+
const export_createDrawer = drawer.createDrawer;
|
|
11
|
+
const BackdropElement = ({ directives }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(directives.backdropDirective) });
|
|
12
|
+
const DrawerElement = (slotContext) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(slotContext.directives.drawerDirective), children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(slotContext.directives.containerDirective), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.structure, props: slotContext }) }) });
|
|
13
|
+
const DefaultDrawerSlotStructure = (slotContext) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
14
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-drawer-header", children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.header, props: slotContext }) }),
|
|
15
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-drawer-body", children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.children, props: slotContext }) }),
|
|
16
|
+
slotContext.state.resizable && /* @__PURE__ */ jsxRuntime.jsx(Splitter, { ...slotContext })
|
|
17
|
+
] });
|
|
18
|
+
const Splitter = (slotContext) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(slotContext.directives.splitterDirective) });
|
|
19
|
+
const defaultConfig = {
|
|
20
|
+
structure: DefaultDrawerSlotStructure
|
|
21
|
+
};
|
|
22
|
+
function Drawer(props) {
|
|
23
|
+
const widgetContext = generated_config.useWidget(export_createDrawer, props, { ...defaultConfig });
|
|
24
|
+
React.useImperativeHandle(props.ref, () => widgetContext.api, [widgetContext.api]);
|
|
25
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(portal.Portal, { container: widgetContext.state.container, children: [
|
|
26
|
+
!widgetContext.state.backdropHidden && /* @__PURE__ */ jsxRuntime.jsx(BackdropElement, { ...widgetContext }),
|
|
27
|
+
!widgetContext.state.hidden && /* @__PURE__ */ jsxRuntime.jsx(DrawerElement, { ...widgetContext })
|
|
28
|
+
] });
|
|
29
|
+
}
|
|
30
|
+
exports.DefaultDrawerSlotStructure = DefaultDrawerSlotStructure;
|
|
31
|
+
exports.Drawer = Drawer;
|
|
32
|
+
exports.export_createDrawer = export_createDrawer;
|
|
33
|
+
exports.export_getDrawerDefaultConfig = export_getDrawerDefaultConfig;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Slot } from "@agnos-ui/react-headless/slot";
|
|
3
|
+
import { useDirective } from "@agnos-ui/react-headless/utils/directive";
|
|
4
|
+
import { Portal } from "@agnos-ui/react-headless/utils/portal";
|
|
5
|
+
import { useImperativeHandle } from "react";
|
|
6
|
+
import { useWidget } from "./generated/config.js";
|
|
7
|
+
import { getDrawerDefaultConfig, createDrawer } from "@agnos-ui/core-bootstrap/components/drawer";
|
|
8
|
+
const export_getDrawerDefaultConfig = getDrawerDefaultConfig;
|
|
9
|
+
const export_createDrawer = createDrawer;
|
|
10
|
+
const BackdropElement = ({ directives }) => /* @__PURE__ */ jsx("div", { ...useDirective(directives.backdropDirective) });
|
|
11
|
+
const DrawerElement = (slotContext) => /* @__PURE__ */ jsx("div", { ...useDirective(slotContext.directives.drawerDirective), children: /* @__PURE__ */ jsx("div", { ...useDirective(slotContext.directives.containerDirective), children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.structure, props: slotContext }) }) });
|
|
12
|
+
const DefaultDrawerSlotStructure = (slotContext) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
13
|
+
/* @__PURE__ */ jsx("div", { className: "au-drawer-header", children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.header, props: slotContext }) }),
|
|
14
|
+
/* @__PURE__ */ jsx("div", { className: "au-drawer-body", children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.children, props: slotContext }) }),
|
|
15
|
+
slotContext.state.resizable && /* @__PURE__ */ jsx(Splitter, { ...slotContext })
|
|
16
|
+
] });
|
|
17
|
+
const Splitter = (slotContext) => /* @__PURE__ */ jsx("div", { ...useDirective(slotContext.directives.splitterDirective) });
|
|
18
|
+
const defaultConfig = {
|
|
19
|
+
structure: DefaultDrawerSlotStructure
|
|
20
|
+
};
|
|
21
|
+
function Drawer(props) {
|
|
22
|
+
const widgetContext = useWidget(export_createDrawer, props, { ...defaultConfig });
|
|
23
|
+
useImperativeHandle(props.ref, () => widgetContext.api, [widgetContext.api]);
|
|
24
|
+
return /* @__PURE__ */ jsxs(Portal, { container: widgetContext.state.container, children: [
|
|
25
|
+
!widgetContext.state.backdropHidden && /* @__PURE__ */ jsx(BackdropElement, { ...widgetContext }),
|
|
26
|
+
!widgetContext.state.hidden && /* @__PURE__ */ jsx(DrawerElement, { ...widgetContext })
|
|
27
|
+
] });
|
|
28
|
+
}
|
|
29
|
+
export {
|
|
30
|
+
DefaultDrawerSlotStructure as D,
|
|
31
|
+
export_createDrawer as a,
|
|
32
|
+
Drawer as b,
|
|
33
|
+
export_getDrawerDefaultConfig as e
|
|
34
|
+
};
|
package/generated/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export * from './services/matchMedia';
|
|
|
16
16
|
export * from './services/intersection';
|
|
17
17
|
export * from './services/hash';
|
|
18
18
|
export * from './services/focustrack';
|
|
19
|
+
export * from './services/focusElement';
|
|
19
20
|
export * from './services/floatingUI';
|
|
20
21
|
export * from './services/extendWidget';
|
|
21
22
|
export * from './services/transitions/simpleClassTransition';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const focusElement = require("@agnos-ui/react-headless/services/focusElement");
|
|
4
|
+
Object.keys(focusElement).forEach((k) => {
|
|
5
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: () => focusElement[k]
|
|
8
|
+
});
|
|
9
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@agnos-ui/react-headless/services/focusElement';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "@agnos-ui/react-headless/services/focusElement";
|
package/index.cjs
CHANGED
|
@@ -4,14 +4,15 @@ const accordion = require("./accordion-DkUnHzTx.cjs");
|
|
|
4
4
|
const alert = require("./alert-56ypguOK.cjs");
|
|
5
5
|
const carousel = require("./carousel-DyA8lWos.cjs");
|
|
6
6
|
const collapse = require("./collapse-Dtanmp3a.cjs");
|
|
7
|
-
const modal = require("./modal-
|
|
7
|
+
const modal = require("./modal-DSduAQXI.cjs");
|
|
8
8
|
const pagination = require("./pagination-ZxTUf5Pm.cjs");
|
|
9
9
|
const progressbar = require("./progressbar-CC5WyAKM.cjs");
|
|
10
10
|
const rating = require("./rating-B2erO56i.cjs");
|
|
11
11
|
const select = require("./select-DgXUNQIA.cjs");
|
|
12
12
|
const slider = require("./slider-DhviBEZe.cjs");
|
|
13
|
-
const toasterProvider = require("./toasterProvider-
|
|
13
|
+
const toasterProvider = require("./toasterProvider-Dt2XqB9t.cjs");
|
|
14
14
|
const tree = require("./tree--CHag_Wm.cjs");
|
|
15
|
+
const drawer = require("./drawer-D1dVH8iO.cjs");
|
|
15
16
|
const types = require("@agnos-ui/react-headless/types");
|
|
16
17
|
const types$1 = require("@agnos-ui/core-bootstrap/types");
|
|
17
18
|
const slot = require("@agnos-ui/react-headless/slot");
|
|
@@ -31,6 +32,7 @@ const matchMedia = require("@agnos-ui/react-headless/services/matchMedia");
|
|
|
31
32
|
const intersection = require("@agnos-ui/react-headless/services/intersection");
|
|
32
33
|
const hash = require("@agnos-ui/react-headless/services/hash");
|
|
33
34
|
const focustrack = require("@agnos-ui/react-headless/services/focustrack");
|
|
35
|
+
const focusElement = require("@agnos-ui/react-headless/services/focusElement");
|
|
34
36
|
const floatingUI = require("@agnos-ui/react-headless/services/floatingUI");
|
|
35
37
|
const extendWidget = require("@agnos-ui/react-headless/services/extendWidget");
|
|
36
38
|
const simpleClassTransition = require("@agnos-ui/react-headless/services/transitions/simpleClassTransition");
|
|
@@ -63,6 +65,7 @@ exports.ModalDefaultSlotStructure = modal.ModalDefaultSlotStructure;
|
|
|
63
65
|
exports.createModal = modal.export_createModal;
|
|
64
66
|
exports.getModalDefaultConfig = modal.export_getModalDefaultConfig;
|
|
65
67
|
exports.modalCloseButtonClick = modal.export_modalCloseButtonClick;
|
|
68
|
+
exports.modalCloseEscape = modal.export_modalCloseEscape;
|
|
66
69
|
exports.modalOutsideClick = modal.export_modalOutsideClick;
|
|
67
70
|
exports.openModal = modal.openModal;
|
|
68
71
|
exports.NavButton = pagination.NavButton;
|
|
@@ -104,6 +107,10 @@ exports.DefaultTreeSlotStructure = tree.DefaultTreeSlotStructure;
|
|
|
104
107
|
exports.Tree = tree.Tree;
|
|
105
108
|
exports.createTree = tree.export_createTree;
|
|
106
109
|
exports.getTreeDefaultConfig = tree.export_getTreeDefaultConfig;
|
|
110
|
+
exports.DefaultDrawerSlotStructure = drawer.DefaultDrawerSlotStructure;
|
|
111
|
+
exports.Drawer = drawer.Drawer;
|
|
112
|
+
exports.createDrawer = drawer.export_createDrawer;
|
|
113
|
+
exports.getDrawerDefaultConfig = drawer.export_getDrawerDefaultConfig;
|
|
107
114
|
exports.WidgetsConfigContext = generated_config.WidgetsConfigContext;
|
|
108
115
|
exports.WidgetsDefaultConfig = generated_config.WidgetsDefaultConfig;
|
|
109
116
|
exports.useWidget = generated_config.useWidget;
|
|
@@ -216,6 +223,12 @@ Object.keys(focustrack).forEach((k) => {
|
|
|
216
223
|
get: () => focustrack[k]
|
|
217
224
|
});
|
|
218
225
|
});
|
|
226
|
+
Object.keys(focusElement).forEach((k) => {
|
|
227
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
228
|
+
enumerable: true,
|
|
229
|
+
get: () => focusElement[k]
|
|
230
|
+
});
|
|
231
|
+
});
|
|
219
232
|
Object.keys(floatingUI).forEach((k) => {
|
|
220
233
|
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
221
234
|
enumerable: true,
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -2,14 +2,15 @@ import { b, a, A, d, c, f, e } from "./accordion-Bkttdgi2.js";
|
|
|
2
2
|
import { a as a2, A as A2, b as b2, e as e2 } from "./alert-D2bu7Ulu.js";
|
|
3
3
|
import { c as c2, C, b as b3, a as a3, e as e3 } from "./carousel-C6hfiwd2.js";
|
|
4
4
|
import { C as C2, a as a4, e as e4 } from "./collapse-D2gce6s6.js";
|
|
5
|
-
import { b as b4, M, a as a5, c as c3, e as e5, f as f2, d as d2, o } from "./modal-
|
|
5
|
+
import { b as b4, M, a as a5, c as c3, e as e5, f as f2, g, d as d2, o } from "./modal-CCDHxJ6u.js";
|
|
6
6
|
import { N, P, c as c4, a as a6, b as b5, d as d3, e as e6 } from "./pagination-60ge4D0q.js";
|
|
7
7
|
import { a as a7, P as P2, b as b6, e as e7 } from "./progressbar-B1ZwY3G2.js";
|
|
8
8
|
import { R, a as a8, e as e8 } from "./rating-Dt-vNocw.js";
|
|
9
9
|
import { S, a as a9, e as e9 } from "./select-aWj112ds.js";
|
|
10
10
|
import { c as c5, S as S2, b as b7, a as a10, d as d4, e as e10 } from "./slider-CBzyKG2u.js";
|
|
11
|
-
import { a as a11, T, f as f3, g, b as b8, d as d5, e as e11, c as c6, u } from "./toasterProvider-
|
|
11
|
+
import { a as a11, T, f as f3, g as g2, b as b8, d as d5, e as e11, c as c6, u } from "./toasterProvider-BU8FKWH6.js";
|
|
12
12
|
import { b as b9, a as a12, D, c as c7, T as T2, d as d6, e as e12 } from "./tree-DTg_JB2R.js";
|
|
13
|
+
import { D as D2, b as b10, a as a13, e as e13 } from "./drawer-iEXzDYco.js";
|
|
13
14
|
export * from "@agnos-ui/react-headless/types";
|
|
14
15
|
export * from "@agnos-ui/core-bootstrap/types";
|
|
15
16
|
export * from "@agnos-ui/react-headless/slot";
|
|
@@ -29,6 +30,7 @@ export * from "@agnos-ui/react-headless/services/matchMedia";
|
|
|
29
30
|
export * from "@agnos-ui/react-headless/services/intersection";
|
|
30
31
|
export * from "@agnos-ui/react-headless/services/hash";
|
|
31
32
|
export * from "@agnos-ui/react-headless/services/focustrack";
|
|
33
|
+
export * from "@agnos-ui/react-headless/services/focusElement";
|
|
32
34
|
export * from "@agnos-ui/react-headless/services/floatingUI";
|
|
33
35
|
export * from "@agnos-ui/react-headless/services/extendWidget";
|
|
34
36
|
export * from "@agnos-ui/react-headless/services/transitions/simpleClassTransition";
|
|
@@ -46,10 +48,12 @@ export {
|
|
|
46
48
|
C as CarouselDefaultNavigation,
|
|
47
49
|
b3 as CarouselDefaultStructure,
|
|
48
50
|
C2 as Collapse,
|
|
51
|
+
D2 as DefaultDrawerSlotStructure,
|
|
49
52
|
b9 as DefaultTreeSlotItem,
|
|
50
53
|
a12 as DefaultTreeSlotItemContent,
|
|
51
54
|
D as DefaultTreeSlotItemToggle,
|
|
52
55
|
c7 as DefaultTreeSlotStructure,
|
|
56
|
+
b10 as Drawer,
|
|
53
57
|
b4 as Modal,
|
|
54
58
|
M as ModalDefaultSlotHeader,
|
|
55
59
|
a5 as ModalDefaultSlotStructure,
|
|
@@ -69,7 +73,7 @@ export {
|
|
|
69
73
|
a11 as Toast,
|
|
70
74
|
T as ToastDefaultSlotStructure,
|
|
71
75
|
f3 as ToasterContainer,
|
|
72
|
-
|
|
76
|
+
g2 as ToasterProvider,
|
|
73
77
|
T2 as Tree,
|
|
74
78
|
WidgetsConfigContext,
|
|
75
79
|
WidgetsDefaultConfig,
|
|
@@ -78,6 +82,7 @@ export {
|
|
|
78
82
|
b2 as createAlert,
|
|
79
83
|
a3 as createCarousel,
|
|
80
84
|
a4 as createCollapse,
|
|
85
|
+
a13 as createDrawer,
|
|
81
86
|
c3 as createModal,
|
|
82
87
|
d3 as createPagination,
|
|
83
88
|
b6 as createProgressbar,
|
|
@@ -92,6 +97,7 @@ export {
|
|
|
92
97
|
e2 as getAlertDefaultConfig,
|
|
93
98
|
e3 as getCarouselDefaultConfig,
|
|
94
99
|
e4 as getCollapseDefaultConfig,
|
|
100
|
+
e13 as getDrawerDefaultConfig,
|
|
95
101
|
e5 as getModalDefaultConfig,
|
|
96
102
|
e6 as getPaginationDefaultConfig,
|
|
97
103
|
e7 as getProgressbarDefaultConfig,
|
|
@@ -101,6 +107,7 @@ export {
|
|
|
101
107
|
e11 as getToastDefaultConfig,
|
|
102
108
|
e12 as getTreeDefaultConfig,
|
|
103
109
|
f2 as modalCloseButtonClick,
|
|
110
|
+
g as modalCloseEscape,
|
|
104
111
|
d2 as modalOutsideClick,
|
|
105
112
|
o as openModal,
|
|
106
113
|
c6 as toastPositions,
|
|
@@ -6,11 +6,12 @@ import clsx from "clsx";
|
|
|
6
6
|
import { useImperativeHandle } from "react";
|
|
7
7
|
import ReactDOM from "react-dom/client";
|
|
8
8
|
import { useWidget } from "./generated/config.js";
|
|
9
|
-
import { getModalDefaultConfig, createModal, modalOutsideClick, modalCloseButtonClick } from "@agnos-ui/core-bootstrap/components/modal";
|
|
9
|
+
import { getModalDefaultConfig, createModal, modalOutsideClick, modalCloseButtonClick, modalCloseEscape } from "@agnos-ui/core-bootstrap/components/modal";
|
|
10
10
|
const export_getModalDefaultConfig = getModalDefaultConfig;
|
|
11
11
|
const export_createModal = createModal;
|
|
12
12
|
const export_modalOutsideClick = modalOutsideClick;
|
|
13
13
|
const export_modalCloseButtonClick = modalCloseButtonClick;
|
|
14
|
+
const export_modalCloseEscape = modalCloseEscape;
|
|
14
15
|
const CloseButton = ({ directive }) => /* @__PURE__ */ jsx("button", { className: "btn-close", ...useDirective(directive) });
|
|
15
16
|
const ModalDefaultSlotHeader = (slotContext) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
16
17
|
/* @__PURE__ */ jsx("h5", { className: "modal-title", children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.title, props: slotContext }) }),
|
|
@@ -56,5 +57,6 @@ export {
|
|
|
56
57
|
export_modalOutsideClick as d,
|
|
57
58
|
export_getModalDefaultConfig as e,
|
|
58
59
|
export_modalCloseButtonClick as f,
|
|
60
|
+
export_modalCloseEscape as g,
|
|
59
61
|
openModal as o
|
|
60
62
|
};
|
|
@@ -12,6 +12,7 @@ const export_getModalDefaultConfig = modal.getModalDefaultConfig;
|
|
|
12
12
|
const export_createModal = modal.createModal;
|
|
13
13
|
const export_modalOutsideClick = modal.modalOutsideClick;
|
|
14
14
|
const export_modalCloseButtonClick = modal.modalCloseButtonClick;
|
|
15
|
+
const export_modalCloseEscape = modal.modalCloseEscape;
|
|
15
16
|
const CloseButton = ({ directive: directive$1 }) => /* @__PURE__ */ jsxRuntime.jsx("button", { className: "btn-close", ...directive.useDirective(directive$1) });
|
|
16
17
|
const ModalDefaultSlotHeader = (slotContext) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
17
18
|
/* @__PURE__ */ jsxRuntime.jsx("h5", { className: "modal-title", children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.title, props: slotContext }) }),
|
|
@@ -55,5 +56,6 @@ exports.ModalDefaultSlotStructure = ModalDefaultSlotStructure;
|
|
|
55
56
|
exports.export_createModal = export_createModal;
|
|
56
57
|
exports.export_getModalDefaultConfig = export_getModalDefaultConfig;
|
|
57
58
|
exports.export_modalCloseButtonClick = export_modalCloseButtonClick;
|
|
59
|
+
exports.export_modalCloseEscape = export_modalCloseEscape;
|
|
58
60
|
exports.export_modalOutsideClick = export_modalOutsideClick;
|
|
59
61
|
exports.openModal = openModal;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agnos-ui/react-bootstrap",
|
|
3
3
|
"description": "Bootstrap-based component library for React.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.10.0-next.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./index.cjs",
|
|
7
7
|
"module": "./index.js",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@agnos-ui/core-bootstrap": "0.
|
|
53
|
-
"@agnos-ui/react-headless": "0.
|
|
52
|
+
"@agnos-ui/core-bootstrap": "0.10.0-next.0",
|
|
53
|
+
"@agnos-ui/react-headless": "0.10.0-next.0",
|
|
54
54
|
"clsx": "^2.1.1"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|