@bolio-ui/core 3.0.2 → 3.0.4
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/dist/Command/index.js +4 -4
- package/dist/Drawer/index.js +3 -3
- package/dist/Mention/index.js +2 -2
- package/dist/Modal/index.js +3 -3
- package/dist/{chunk-25NFUHLR.js → chunk-4DSLA5LJ.js} +23 -16
- package/dist/{chunk-M64V32WO.js → chunk-BUB6MDGJ.js} +2 -2
- package/dist/{chunk-FSO65ZAH.js → chunk-BXEBNLJ4.js} +3 -2
- package/dist/{chunk-CU6SNPIM.js → chunk-DAPM4M4A.js} +13 -19
- package/dist/{chunk-XKJDF225.js → chunk-TWT6F7A7.js} +21 -1
- package/dist/css/Mention.css +12 -0
- package/dist/index.js +6 -6
- package/dist/styles.css +12 -0
- package/dist/styles.d.ts +1 -0
- package/dist/utils/use-dialog-focus.d.ts +3 -0
- package/esm/Command/index.js +3 -3
- package/esm/Drawer/index.js +2 -2
- package/esm/Mention/index.js +1 -1
- package/esm/Modal/index.js +2 -2
- package/esm/{chunk-25NFUHLR.js → chunk-4DSLA5LJ.js} +23 -16
- package/esm/{chunk-M64V32WO.js → chunk-BUB6MDGJ.js} +1 -1
- package/esm/{chunk-FSO65ZAH.js → chunk-BXEBNLJ4.js} +3 -2
- package/esm/{chunk-CU6SNPIM.js → chunk-DAPM4M4A.js} +10 -16
- package/esm/{chunk-XKJDF225.js → chunk-TWT6F7A7.js} +20 -0
- package/esm/css/Mention.css +12 -0
- package/esm/index.js +5 -5
- package/esm/styles.css +12 -0
- package/esm/styles.d.ts +1 -0
- package/esm/utils/use-dialog-focus.d.ts +3 -0
- package/package.json +5 -2
package/dist/Command/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
require('../chunk-
|
|
4
|
+
var _chunkBUB6MDGJjs = require('../chunk-BUB6MDGJ.js');
|
|
5
|
+
require('../chunk-DAPM4M4A.js');
|
|
6
6
|
require('../chunk-NEG5UNM6.js');
|
|
7
7
|
require('../chunk-ISLUC2SD.js');
|
|
8
|
-
require('../chunk-
|
|
8
|
+
require('../chunk-TWT6F7A7.js');
|
|
9
9
|
require('../chunk-F3AL4TQZ.js');
|
|
10
10
|
require('../chunk-O3RTRCY5.js');
|
|
11
11
|
require('../chunk-UOGCO6CV.js');
|
|
@@ -31,4 +31,4 @@ require('../chunk-SZIX7BM5.js');
|
|
|
31
31
|
require('../chunk-5KUROAEP.js');
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
exports.default =
|
|
34
|
+
exports.default = _chunkBUB6MDGJjs.Command_default;
|
package/dist/Drawer/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
require('../chunk-
|
|
4
|
+
var _chunk4DSLA5LJjs = require('../chunk-4DSLA5LJ.js');
|
|
5
|
+
require('../chunk-TWT6F7A7.js');
|
|
6
6
|
require('../chunk-F3AL4TQZ.js');
|
|
7
7
|
require('../chunk-O3RTRCY5.js');
|
|
8
8
|
require('../chunk-33BUV2RX.js');
|
|
@@ -20,4 +20,4 @@ require('../chunk-SZIX7BM5.js');
|
|
|
20
20
|
require('../chunk-5KUROAEP.js');
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
exports.default =
|
|
23
|
+
exports.default = _chunk4DSLA5LJjs.Drawer_default;
|
package/dist/Mention/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkBXEBNLJ4js = require('../chunk-BXEBNLJ4.js');
|
|
5
5
|
require('../chunk-KBZEYKCZ.js');
|
|
6
6
|
require('../chunk-GJZT47MP.js');
|
|
7
7
|
require('../chunk-EUYSKHRS.js');
|
|
@@ -14,4 +14,4 @@ require('../chunk-SZIX7BM5.js');
|
|
|
14
14
|
require('../chunk-5KUROAEP.js');
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
exports.default =
|
|
17
|
+
exports.default = _chunkBXEBNLJ4js.Mention_default;
|
package/dist/Modal/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
require('../chunk-
|
|
4
|
+
var _chunkDAPM4M4Ajs = require('../chunk-DAPM4M4A.js');
|
|
5
|
+
require('../chunk-TWT6F7A7.js');
|
|
6
6
|
require('../chunk-F3AL4TQZ.js');
|
|
7
7
|
require('../chunk-O3RTRCY5.js');
|
|
8
8
|
require('../chunk-33BUV2RX.js');
|
|
@@ -26,4 +26,4 @@ require('../chunk-SZIX7BM5.js');
|
|
|
26
26
|
require('../chunk-5KUROAEP.js');
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
exports.default =
|
|
29
|
+
exports.default = _chunkDAPM4M4Ajs.Modal_default;
|
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
var _chunkTWT6F7A7js = require('./chunk-TWT6F7A7.js');
|
|
8
10
|
|
|
9
11
|
|
|
10
12
|
var _chunkF3AL4TQZjs = require('./chunk-F3AL4TQZ.js');
|
|
@@ -108,19 +110,13 @@ var DrawerWrapper = _react2.default.forwardRef(({ className = "", children, visi
|
|
|
108
110
|
"--drawer-wrapper-transform-hidden": transform.hidden,
|
|
109
111
|
"--drawer-wrapper-transform-visible": transform.visible
|
|
110
112
|
};
|
|
111
|
-
|
|
112
|
-
if (!visible) return;
|
|
113
|
-
const activeElement = document.activeElement;
|
|
114
|
-
const isChild = _chunkUX2B3G6Ujs.isChildElement.call(void 0, modalContent.current, activeElement);
|
|
115
|
-
if (isChild) return;
|
|
116
|
-
if (tabStart.current) tabStart.current.focus();
|
|
117
|
-
}, [visible]);
|
|
113
|
+
_chunkTWT6F7A7js.use_dialog_focus_default.call(void 0, visible, modalContent);
|
|
118
114
|
const onKeyDown = (event) => {
|
|
119
115
|
const isTabDown = event.keyCode === 9;
|
|
120
116
|
if (!visible || !isTabDown) return;
|
|
121
117
|
const activeElement = document.activeElement;
|
|
122
118
|
if (event.shiftKey) {
|
|
123
|
-
if (activeElement === tabStart.current) {
|
|
119
|
+
if (activeElement === tabStart.current || activeElement === modalContent.current) {
|
|
124
120
|
if (tabEnd.current) tabEnd.current.focus();
|
|
125
121
|
}
|
|
126
122
|
} else {
|
|
@@ -179,11 +175,16 @@ var DrawerComponent = _react2.default.forwardRef(
|
|
|
179
175
|
placement,
|
|
180
176
|
onClose,
|
|
181
177
|
onContentClick,
|
|
178
|
+
"aria-labelledby": ariaLabelledby,
|
|
179
|
+
"aria-describedby": ariaDescribedby,
|
|
182
180
|
...props
|
|
183
181
|
}, ref) => {
|
|
184
182
|
const portal = _chunkBXDUHMWSjs.use_portal_default.call(void 0, "drawer");
|
|
183
|
+
const baseId = _react.useId.call(void 0, );
|
|
184
|
+
const titleId = `${baseId}-title`;
|
|
185
|
+
const descriptionId = `${baseId}-description`;
|
|
185
186
|
const [visible, setVisible] = _react.useState.call(void 0, false);
|
|
186
|
-
const [, setBodyHidden] =
|
|
187
|
+
const [, setBodyHidden] = _chunkTWT6F7A7js.use_body_scroll_default.call(void 0, null, { delayReset: 300 });
|
|
187
188
|
const closeDrawer = () => {
|
|
188
189
|
if (onClose) onClose();
|
|
189
190
|
setVisible(false);
|
|
@@ -207,10 +208,14 @@ var DrawerComponent = _react2.default.forwardRef(
|
|
|
207
208
|
if (disableBackdropClick) return;
|
|
208
209
|
closeDrawer();
|
|
209
210
|
};
|
|
211
|
+
const modalConfig = _react.useMemo.call(void 0,
|
|
212
|
+
() => ({ titleId, descriptionId }),
|
|
213
|
+
[titleId, descriptionId]
|
|
214
|
+
);
|
|
210
215
|
if (!portal) return null;
|
|
211
216
|
return _reactdom.createPortal.call(void 0,
|
|
212
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
213
|
-
|
|
217
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTWT6F7A7js.ModalContext.Provider, { value: modalConfig, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
218
|
+
_chunkTWT6F7A7js.backdrop_default,
|
|
214
219
|
{
|
|
215
220
|
onClick: closeFromBackdrop,
|
|
216
221
|
onContentClick,
|
|
@@ -224,12 +229,14 @@ var DrawerComponent = _react2.default.forwardRef(
|
|
|
224
229
|
visible,
|
|
225
230
|
className: wrapClassName,
|
|
226
231
|
placement,
|
|
232
|
+
"aria-labelledby": ariaLabelledby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkTWT6F7A7js.ModalTitle_default) ? titleId : void 0),
|
|
233
|
+
"aria-describedby": ariaDescribedby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkTWT6F7A7js.ModalSubtitle_default) ? descriptionId : void 0),
|
|
227
234
|
...props,
|
|
228
235
|
children
|
|
229
236
|
}
|
|
230
237
|
)
|
|
231
238
|
}
|
|
232
|
-
),
|
|
239
|
+
) }),
|
|
233
240
|
portal
|
|
234
241
|
);
|
|
235
242
|
}
|
|
@@ -239,9 +246,9 @@ var Drawer = _chunkMAICNLTYjs.with_scale_default.call(void 0, DrawerComponent);
|
|
|
239
246
|
var Drawer_default = Drawer;
|
|
240
247
|
|
|
241
248
|
// core/Drawer/index.ts
|
|
242
|
-
Drawer_default.Title =
|
|
243
|
-
Drawer_default.Subtitle =
|
|
244
|
-
Drawer_default.Content =
|
|
249
|
+
Drawer_default.Title = _chunkTWT6F7A7js.ModalTitle_default;
|
|
250
|
+
Drawer_default.Subtitle = _chunkTWT6F7A7js.ModalSubtitle_default;
|
|
251
|
+
Drawer_default.Content = _chunkTWT6F7A7js.ModalContent_default;
|
|
245
252
|
var Drawer_default2 = Drawer_default;
|
|
246
253
|
|
|
247
254
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkDAPM4M4Ajs = require('./chunk-DAPM4M4A.js');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkNEG5UNM6js = require('./chunk-NEG5UNM6.js');
|
|
@@ -60,7 +60,7 @@ var Command = ({
|
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
62
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
63
|
-
|
|
63
|
+
_chunkDAPM4M4Ajs.Modal_default,
|
|
64
64
|
{
|
|
65
65
|
visible,
|
|
66
66
|
onClose,
|
|
@@ -27,7 +27,7 @@ var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
|
|
|
27
27
|
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
28
28
|
|
|
29
29
|
// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Mention/Mention.module.css.bolio-css-module-source
|
|
30
|
-
var Mention_module_css_default = { "mention": "Mention-module_mention__R3-5t", "field": "Mention-module_field__U5FXf", "list": "Mention-module_list__QQ5RM", "empty": "Mention-module_empty__YkZOO", "option": "Mention-module_option__8CupI", "active": "Mention-module_active__8GmDl", "disabled": "Mention-module_disabled__4PL94" };
|
|
30
|
+
var Mention_module_css_default = { "mention": "Mention-module_mention__R3-5t", "field": "Mention-module_field__U5FXf", "list": "Mention-module_list__QQ5RM", "empty": "Mention-module_empty__YkZOO", "option": "Mention-module_option__8CupI", "active": "Mention-module_active__8GmDl", "disabled": "Mention-module_disabled__4PL94", "srOnly": "Mention-module_srOnly__AuP1L" };
|
|
31
31
|
|
|
32
32
|
// core/Mention/Mention.tsx
|
|
33
33
|
var _jsxruntime = require('react/jsx-runtime');
|
|
@@ -231,7 +231,8 @@ var MentionComponent = _react2.default.forwardRef(
|
|
|
231
231
|
},
|
|
232
232
|
option.value
|
|
233
233
|
)) }),
|
|
234
|
-
open && visible.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Mention_module_css_default.empty, children: emptyText })
|
|
234
|
+
open && visible.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Mention_module_css_default.empty, children: emptyText }),
|
|
235
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "status", className: Mention_module_css_default.srOnly, children: expanded ? `${visible.length} result${visible.length === 1 ? "" : "s"} available` : "" })
|
|
235
236
|
]
|
|
236
237
|
}
|
|
237
238
|
);
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
|
|
10
|
+
var _chunkTWT6F7A7js = require('./chunk-TWT6F7A7.js');
|
|
10
11
|
|
|
11
12
|
|
|
12
13
|
var _chunkF3AL4TQZjs = require('./chunk-F3AL4TQZ.js');
|
|
@@ -29,7 +30,6 @@ var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
|
|
|
29
30
|
|
|
30
31
|
|
|
31
32
|
|
|
32
|
-
|
|
33
33
|
var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
|
|
34
34
|
|
|
35
35
|
|
|
@@ -63,19 +63,13 @@ var ModalWrapper = _react2.default.forwardRef(({ className = "", children, visib
|
|
|
63
63
|
_react.useImperativeHandle.call(void 0, ref, () => modalContent.current);
|
|
64
64
|
const tabStart = _react.useRef.call(void 0, null);
|
|
65
65
|
const tabEnd = _react.useRef.call(void 0, null);
|
|
66
|
-
|
|
67
|
-
if (!visible) return;
|
|
68
|
-
const activeElement = document.activeElement;
|
|
69
|
-
const isChild = _chunkUX2B3G6Ujs.isChildElement.call(void 0, modalContent.current, activeElement);
|
|
70
|
-
if (isChild) return;
|
|
71
|
-
if (tabStart.current) tabStart.current.focus();
|
|
72
|
-
}, [visible]);
|
|
66
|
+
_chunkTWT6F7A7js.use_dialog_focus_default.call(void 0, visible, modalContent);
|
|
73
67
|
const onKeyDown = (event) => {
|
|
74
68
|
const isTabDown = event.keyCode === 9;
|
|
75
69
|
if (!visible || !isTabDown) return;
|
|
76
70
|
const activeElement = document.activeElement;
|
|
77
71
|
if (event.shiftKey) {
|
|
78
|
-
if (activeElement === tabStart.current) {
|
|
72
|
+
if (activeElement === tabStart.current || activeElement === modalContent.current) {
|
|
79
73
|
if (tabEnd.current) tabEnd.current.focus();
|
|
80
74
|
}
|
|
81
75
|
} else {
|
|
@@ -155,7 +149,7 @@ var ModalActionComponent = _react2.default.forwardRef(function({
|
|
|
155
149
|
const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
|
|
156
150
|
const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
|
|
157
151
|
const btnRef = _react.useRef.call(void 0, null);
|
|
158
|
-
const { close } =
|
|
152
|
+
const { close } = _chunkTWT6F7A7js.useModalContext.call(void 0, );
|
|
159
153
|
_react.useImperativeHandle.call(void 0, ref, () => btnRef.current);
|
|
160
154
|
const clickHandler = (event) => {
|
|
161
155
|
if (disabled) return;
|
|
@@ -277,7 +271,7 @@ var ModalComponent = _react2.default.forwardRef(
|
|
|
277
271
|
const titleId = `${baseId}-title`;
|
|
278
272
|
const descriptionId = `${baseId}-description`;
|
|
279
273
|
const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
|
|
280
|
-
const [, setBodyHidden] =
|
|
274
|
+
const [, setBodyHidden] = _chunkTWT6F7A7js.use_body_scroll_default.call(void 0, null, { delayReset: 300 });
|
|
281
275
|
const [visible, setVisible] = _react.useState.call(void 0, false);
|
|
282
276
|
const [withoutActionsChildren, ActionsChildren] = _chunkUX2B3G6Ujs.pickChild.call(void 0,
|
|
283
277
|
children,
|
|
@@ -317,8 +311,8 @@ var ModalComponent = _react2.default.forwardRef(
|
|
|
317
311
|
);
|
|
318
312
|
if (!portal) return null;
|
|
319
313
|
return _reactdom.createPortal.call(void 0,
|
|
320
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
321
|
-
|
|
314
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTWT6F7A7js.ModalContext.Provider, { value: modalConfig, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
315
|
+
_chunkTWT6F7A7js.backdrop_default,
|
|
322
316
|
{
|
|
323
317
|
onClick: closeFromBackdrop,
|
|
324
318
|
onContentClick,
|
|
@@ -336,8 +330,8 @@ var ModalComponent = _react2.default.forwardRef(
|
|
|
336
330
|
className: wrapClassName,
|
|
337
331
|
role,
|
|
338
332
|
"aria-label": ariaLabel,
|
|
339
|
-
"aria-labelledby": ariaLabelledby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children,
|
|
340
|
-
"aria-describedby": ariaDescribedby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children,
|
|
333
|
+
"aria-labelledby": ariaLabelledby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkTWT6F7A7js.ModalTitle_default) ? titleId : void 0),
|
|
334
|
+
"aria-describedby": ariaDescribedby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkTWT6F7A7js.ModalSubtitle_default) ? descriptionId : void 0),
|
|
341
335
|
children: [
|
|
342
336
|
withoutActionsChildren,
|
|
343
337
|
hasActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalActions_default, { children: ActionsChildren })
|
|
@@ -355,9 +349,9 @@ var Modal = _chunkMAICNLTYjs.with_scale_default.call(void 0, ModalComponent);
|
|
|
355
349
|
var Modal_default = Modal;
|
|
356
350
|
|
|
357
351
|
// core/Modal/index.ts
|
|
358
|
-
Modal_default.Title =
|
|
359
|
-
Modal_default.Subtitle =
|
|
360
|
-
Modal_default.Content =
|
|
352
|
+
Modal_default.Title = _chunkTWT6F7A7js.ModalTitle_default;
|
|
353
|
+
Modal_default.Subtitle = _chunkTWT6F7A7js.ModalSubtitle_default;
|
|
354
|
+
Modal_default.Content = _chunkTWT6F7A7js.ModalContent_default;
|
|
361
355
|
Modal_default.Action = ModalAction_default;
|
|
362
356
|
var Modal_default2 = Modal_default;
|
|
363
357
|
|
|
@@ -13,6 +13,9 @@ var _chunkLDTDMDE6js = require('./chunk-LDTDMDE6.js');
|
|
|
13
13
|
var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
|
|
14
14
|
|
|
15
15
|
|
|
16
|
+
var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
|
|
17
|
+
|
|
18
|
+
|
|
16
19
|
var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
|
|
17
20
|
|
|
18
21
|
|
|
@@ -206,6 +209,23 @@ BackdropComponent.displayName = "BolioUIBackdrop";
|
|
|
206
209
|
var Backdrop = _react2.default.memo(BackdropComponent);
|
|
207
210
|
var backdrop_default = Backdrop;
|
|
208
211
|
|
|
212
|
+
// core/utils/use-dialog-focus.ts
|
|
213
|
+
|
|
214
|
+
var useDialogFocus = (visible, dialog) => {
|
|
215
|
+
_react.useEffect.call(void 0, () => {
|
|
216
|
+
var _a;
|
|
217
|
+
if (!visible) return;
|
|
218
|
+
const active = document.activeElement;
|
|
219
|
+
if (_chunkUX2B3G6Ujs.isChildElement.call(void 0, dialog.current, active)) return;
|
|
220
|
+
(_a = dialog.current) == null ? void 0 : _a.focus({ preventScroll: true });
|
|
221
|
+
return () => {
|
|
222
|
+
if (active == null ? void 0 : active.isConnected) active.focus({ preventScroll: true });
|
|
223
|
+
};
|
|
224
|
+
}, [visible, dialog]);
|
|
225
|
+
};
|
|
226
|
+
var use_dialog_focus_default = useDialogFocus;
|
|
227
|
+
|
|
228
|
+
|
|
209
229
|
|
|
210
230
|
|
|
211
231
|
|
|
@@ -214,4 +234,4 @@ var backdrop_default = Backdrop;
|
|
|
214
234
|
|
|
215
235
|
|
|
216
236
|
|
|
217
|
-
exports.use_body_scroll_default = use_body_scroll_default2; exports.backdrop_default = backdrop_default; exports.ModalContext = ModalContext; exports.useModalContext = useModalContext; exports.ModalTitle_default = ModalTitle_default; exports.ModalSubtitle_default = ModalSubtitle_default; exports.ModalContent_default = ModalContent_default;
|
|
237
|
+
exports.use_body_scroll_default = use_body_scroll_default2; exports.backdrop_default = backdrop_default; exports.use_dialog_focus_default = use_dialog_focus_default; exports.ModalContext = ModalContext; exports.useModalContext = useModalContext; exports.ModalTitle_default = ModalTitle_default; exports.ModalSubtitle_default = ModalSubtitle_default; exports.ModalContent_default = ModalContent_default;
|
package/dist/css/Mention.css
CHANGED
|
@@ -90,4 +90,16 @@
|
|
|
90
90
|
color: var(--mention-empty-color);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
+
.Mention-module_srOnly__AuP1L {
|
|
94
|
+
position: absolute;
|
|
95
|
+
width: 1px;
|
|
96
|
+
height: 1px;
|
|
97
|
+
margin: -1px;
|
|
98
|
+
padding: 0;
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
clip: rect(0, 0, 0, 0);
|
|
101
|
+
white-space: nowrap;
|
|
102
|
+
border: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
93
105
|
}
|
package/dist/index.js
CHANGED
|
@@ -119,7 +119,7 @@ var _chunkOAMGJMK4js = require('./chunk-OAMGJMK4.js');
|
|
|
119
119
|
var _chunkTJUNBMNFjs = require('./chunk-TJUNBMNF.js');
|
|
120
120
|
|
|
121
121
|
|
|
122
|
-
var
|
|
122
|
+
var _chunkBXEBNLJ4js = require('./chunk-BXEBNLJ4.js');
|
|
123
123
|
|
|
124
124
|
|
|
125
125
|
var _chunkCGS2MT3Gjs = require('./chunk-CGS2MT3G.js');
|
|
@@ -164,7 +164,7 @@ var _chunkD7CNDAYBjs = require('./chunk-D7CNDAYB.js');
|
|
|
164
164
|
var _chunk7N7PEBRBjs = require('./chunk-7N7PEBRB.js');
|
|
165
165
|
|
|
166
166
|
|
|
167
|
-
var
|
|
167
|
+
var _chunk4DSLA5LJjs = require('./chunk-4DSLA5LJ.js');
|
|
168
168
|
|
|
169
169
|
|
|
170
170
|
var _chunkRZSTPJ76js = require('./chunk-RZSTPJ76.js');
|
|
@@ -183,17 +183,17 @@ var _chunkOKZRHSSGjs = require('./chunk-OKZRHSSG.js');
|
|
|
183
183
|
var _chunkKRSISARCjs = require('./chunk-KRSISARC.js');
|
|
184
184
|
|
|
185
185
|
|
|
186
|
-
var
|
|
186
|
+
var _chunkBUB6MDGJjs = require('./chunk-BUB6MDGJ.js');
|
|
187
187
|
|
|
188
188
|
|
|
189
|
-
var
|
|
189
|
+
var _chunkDAPM4M4Ajs = require('./chunk-DAPM4M4A.js');
|
|
190
190
|
|
|
191
191
|
|
|
192
192
|
var _chunkNEG5UNM6js = require('./chunk-NEG5UNM6.js');
|
|
193
193
|
|
|
194
194
|
|
|
195
195
|
var _chunkISLUC2SDjs = require('./chunk-ISLUC2SD.js');
|
|
196
|
-
require('./chunk-
|
|
196
|
+
require('./chunk-TWT6F7A7.js');
|
|
197
197
|
|
|
198
198
|
|
|
199
199
|
|
|
@@ -413,4 +413,4 @@ var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
|
|
|
413
413
|
|
|
414
414
|
|
|
415
415
|
|
|
416
|
-
exports.Alert = _chunkCY5KTINEjs.Alert_default; exports.Avatar = _chunkLQYCPFUAjs.Avatar_default; exports.Badge = _chunkRD4CEB5Sjs.Badge_default; exports.BolioUIProvider = _chunk6ASDJ72Vjs.BolioUIProvider_default; exports.Breadcrumbs = _chunkEEZG4FGYjs.Breadcrumbs_default; exports.Button = _chunkTPZUTHTQjs.Button_default; exports.ButtonDropdown = _chunkRWRFOGCUjs.ButtonDropdown_default; exports.ButtonGroup = _chunkXWRDUQKYjs.ButtonGroup_default; exports.Calendar = _chunkTLVSZCKUjs.Calendar_default; exports.Capacity = _chunkHK6XCH2Cjs.Capacity_default; exports.Card = _chunk56NE4QGRjs.Card_default; exports.Carousel = _chunkMDSRXACMjs.Carousel_default; exports.Checkbox = _chunkEAHIBHMIjs.Checkbox_default; exports.Chip = _chunkFQWH4PDKjs.Chip_default; exports.Code = _chunkA2NLRQ55js.Code_default; exports.Col = _chunkRZSTPJ76js.Col_default; exports.Collapse = _chunkWFGUAR7Kjs.Collapse_default; exports.ColorInput = _chunkDEMQXB46js.ColorInput_default; exports.ColorPicker = _chunkOKZRHSSGjs.ColorPicker_default; exports.Combobox = _chunkKRSISARCjs.Combobox_default; exports.Command =
|
|
416
|
+
exports.Alert = _chunkCY5KTINEjs.Alert_default; exports.Avatar = _chunkLQYCPFUAjs.Avatar_default; exports.Badge = _chunkRD4CEB5Sjs.Badge_default; exports.BolioUIProvider = _chunk6ASDJ72Vjs.BolioUIProvider_default; exports.Breadcrumbs = _chunkEEZG4FGYjs.Breadcrumbs_default; exports.Button = _chunkTPZUTHTQjs.Button_default; exports.ButtonDropdown = _chunkRWRFOGCUjs.ButtonDropdown_default; exports.ButtonGroup = _chunkXWRDUQKYjs.ButtonGroup_default; exports.Calendar = _chunkTLVSZCKUjs.Calendar_default; exports.Capacity = _chunkHK6XCH2Cjs.Capacity_default; exports.Card = _chunk56NE4QGRjs.Card_default; exports.Carousel = _chunkMDSRXACMjs.Carousel_default; exports.Checkbox = _chunkEAHIBHMIjs.Checkbox_default; exports.Chip = _chunkFQWH4PDKjs.Chip_default; exports.Code = _chunkA2NLRQ55js.Code_default; exports.Col = _chunkRZSTPJ76js.Col_default; exports.Collapse = _chunkWFGUAR7Kjs.Collapse_default; exports.ColorInput = _chunkDEMQXB46js.ColorInput_default; exports.ColorPicker = _chunkOKZRHSSGjs.ColorPicker_default; exports.Combobox = _chunkKRSISARCjs.Combobox_default; exports.Command = _chunkBUB6MDGJjs.Command_default; exports.Container = _chunkGJ77XHZ3js.Container_default; exports.ContextMenu = _chunkDYYSUJ35js.ContextMenu_default; exports.CssBaseline = _chunk5BESEB77js.CssBaseline_default; exports.DatePicker = _chunkICACLCJRjs.DatePicker_default; exports.DateRangePicker = _chunkYLLPYRJHjs.DateRangePicker_default; exports.Description = _chunkSDC2VF5Kjs.Description_default; exports.Display = _chunkT5BYQGC3js.Display_default; exports.Divider = _chunkD7CNDAYBjs.Divider_default; exports.Dot = _chunk7N7PEBRBjs.Dot_default; exports.Drawer = _chunk4DSLA5LJjs.Drawer_default; exports.Dropzone = _chunk4X4ELIMQjs.Dropzone_default; exports.EmptyState = _chunkDAZ2GHNPjs.EmptyState_default; exports.Fieldset = _chunkWXW7BYE7js.Fieldset_default; exports.Grid = _chunkJFNYQSEZjs.Grid_default; exports.Highlight = _chunk6U7FXFJPjs.highlight_default; exports.Image = _chunkTWIOSRRPjs.Image_default; exports.ImageZoom = _chunkREWKR7S3js.ImageZoom_default; exports.Input = _chunkNEG5UNM6js.Input_default; exports.KeyCode = _chunkF3AL4TQZjs.KeyCode; exports.KeyMod = _chunkF3AL4TQZjs.KeyMod; exports.Keyboard = _chunkRRFCNZ2Tjs.Keyboard_default; exports.Link = _chunkWEYAL53Ojs.Link_default; exports.Loading = _chunkLMDBE6T6js.Loading_default; exports.Marquee = _chunkTJUNBMNFjs.Marquee_default; exports.Mention = _chunkBXEBNLJ4js.Mention_default; exports.Menu = _chunkFLUNRVVGjs.Menu_default; exports.Modal = _chunkDAPM4M4Ajs.Modal_default; exports.Note = _chunkCGS2MT3Gjs.Note_default; exports.NumberInput = _chunkJAVXTBV2js.NumberInput_default; exports.Page = _chunkLA46RLOTjs.Page_default; exports.Pagination = _chunkE5EDUOQTjs.Pagination_default; exports.PinInput = _chunkX4TPC7HSjs.PinInput_default; exports.Popover = _chunkY432C24Zjs.Popover_default; exports.Progress = _chunkNLJHFKANjs.Progress_default; exports.Radio = _chunkIIKZQZXSjs.Radio_default; exports.Rating = _chunkOAMGJMK4js.Rating_default; exports.Row = _chunkLSSL324Ijs.Row_default; exports.ScaleContext = _chunkMAICNLTYjs.ScaleContext; exports.ScalePropKeys = _chunkMAICNLTYjs.ScalePropKeys; exports.Section = _chunkBJRUC4XLjs.Section_default; exports.SegmentedControl = _chunk2A4BSQ66js.SegmentedControl_default; exports.Select = _chunkXUNC7RB7js.Select_default; exports.Skeleton = _chunk67WAS5AYjs.Skeleton_default; exports.Slider = _chunkIUZV5Y27js.Slider_default; exports.Snippet = _chunkCGEUUDJ4js.Snippet_default; exports.Spacer = _chunkQCE3XFHZjs.Spacer_default; exports.Spinner = _chunkTZ7TOEP3js.Spinner_default; exports.Splitter = _chunkFFEAKF3Ajs.Splitter_default; exports.Stat = _chunk5M4QUTS4js.Stat_default; exports.Stepper = _chunkKWKFVS32js.Stepper_default; exports.Table = _chunkY5CFWIGVjs.Table_default; exports.Tabs = _chunk6U7FXFJPjs.Tabs_default; exports.Tag = _chunkXC33TGGTjs.Tag_default; exports.TagsInput = _chunkG4KB56ROjs.TagsInput_default; exports.Text = _chunkA6N5PIXNjs.Text_default; exports.Textarea = _chunkISLUC2SDjs.Textarea_default; exports.Themes = _chunkX5PGXMVQjs.Themes_default; exports.Timeline = _chunkAHWF22ZQjs.Timeline_default; exports.Toggle = _chunkT74YHCG6js.Toggle_default; exports.Toolbar = _chunkQ3I54DUSjs.Toolbar_default; exports.Tooltip = _chunkIL7L3BELjs.Tooltip_default; exports.Tour = _chunkSJVWKNGYjs.Tour_default; exports.Tree = _chunkK6UULETPjs.Tree_default; exports.useAllThemes = _chunkQILHI3LOjs.use_all_themes_default; exports.useBodyScroll = _chunkO3RTRCY5js.use_body_scroll_default; exports.useClasses = _chunk5KUROAEPjs.use_classes_default; exports.useClickAway = _chunk3WPRUUZ6js.use_click_away_default; exports.useClipboard = _chunkC3ZZPIUOjs.use_clipboard_default; exports.useCurrentState = _chunkGGD4BGH2js.use_current_state_default; exports.useInput = _chunkJ4K4LRBIjs.use_input_default; exports.useKeyboard = _chunkF3AL4TQZjs.use_keyboard_default; exports.useMediaQuery = _chunk6VDRKYLWjs.use_media_query_default; exports.useModal = _chunkYDYRM2KNjs.use_modal_default; exports.useRect = _chunkDSX6YDJMjs.useRect; exports.useScale = _chunkMAICNLTYjs.use_scale_default; exports.useTabs = _chunkI6WWABJNjs.use_tabs_default; exports.useTheme = _chunkV5I4ORQQjs.use_theme_default; exports.useToasts = _chunkNCUSKYUEjs.use_toasts_default; exports.withScale = _chunkMAICNLTYjs.with_scale_default;
|
package/dist/styles.css
CHANGED
|
@@ -3175,6 +3175,18 @@ body:has(.ImageZoom-module_dialog__TjA9E[open]) {
|
|
|
3175
3175
|
color: var(--mention-empty-color);
|
|
3176
3176
|
}
|
|
3177
3177
|
|
|
3178
|
+
.Mention-module_srOnly__AuP1L {
|
|
3179
|
+
position: absolute;
|
|
3180
|
+
width: 1px;
|
|
3181
|
+
height: 1px;
|
|
3182
|
+
margin: -1px;
|
|
3183
|
+
padding: 0;
|
|
3184
|
+
overflow: hidden;
|
|
3185
|
+
clip: rect(0, 0, 0, 0);
|
|
3186
|
+
white-space: nowrap;
|
|
3187
|
+
border: 0;
|
|
3188
|
+
}
|
|
3189
|
+
|
|
3178
3190
|
}
|
|
3179
3191
|
|
|
3180
3192
|
@layer Menu {
|
package/dist/styles.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
package/esm/Command/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import {
|
|
3
3
|
Command_default
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-BUB6MDGJ.js";
|
|
5
|
+
import "../chunk-DAPM4M4A.js";
|
|
6
6
|
import "../chunk-NEG5UNM6.js";
|
|
7
7
|
import "../chunk-ISLUC2SD.js";
|
|
8
|
-
import "../chunk-
|
|
8
|
+
import "../chunk-TWT6F7A7.js";
|
|
9
9
|
import "../chunk-F3AL4TQZ.js";
|
|
10
10
|
import "../chunk-O3RTRCY5.js";
|
|
11
11
|
import "../chunk-UOGCO6CV.js";
|
package/esm/Drawer/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import {
|
|
3
3
|
Drawer_default
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-4DSLA5LJ.js";
|
|
5
|
+
import "../chunk-TWT6F7A7.js";
|
|
6
6
|
import "../chunk-F3AL4TQZ.js";
|
|
7
7
|
import "../chunk-O3RTRCY5.js";
|
|
8
8
|
import "../chunk-33BUV2RX.js";
|
package/esm/Mention/index.js
CHANGED
package/esm/Modal/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import {
|
|
3
3
|
Modal_default
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-DAPM4M4A.js";
|
|
5
|
+
import "../chunk-TWT6F7A7.js";
|
|
6
6
|
import "../chunk-F3AL4TQZ.js";
|
|
7
7
|
import "../chunk-O3RTRCY5.js";
|
|
8
8
|
import "../chunk-33BUV2RX.js";
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ModalContent_default,
|
|
3
|
+
ModalContext,
|
|
3
4
|
ModalSubtitle_default,
|
|
4
5
|
ModalTitle_default,
|
|
5
6
|
backdrop_default,
|
|
6
|
-
use_body_scroll_default
|
|
7
|
-
|
|
7
|
+
use_body_scroll_default,
|
|
8
|
+
use_dialog_focus_default
|
|
9
|
+
} from "./chunk-TWT6F7A7.js";
|
|
8
10
|
import {
|
|
9
11
|
use_keyboard_default
|
|
10
12
|
} from "./chunk-F3AL4TQZ.js";
|
|
@@ -22,7 +24,7 @@ import {
|
|
|
22
24
|
with_scale_default
|
|
23
25
|
} from "./chunk-MAICNLTY.js";
|
|
24
26
|
import {
|
|
25
|
-
|
|
27
|
+
hasChild
|
|
26
28
|
} from "./chunk-UX2B3G6U.js";
|
|
27
29
|
import {
|
|
28
30
|
use_theme_default
|
|
@@ -32,11 +34,11 @@ import {
|
|
|
32
34
|
} from "./chunk-5KUROAEP.js";
|
|
33
35
|
|
|
34
36
|
// core/Drawer/Drawer.tsx
|
|
35
|
-
import React2, { useEffect as
|
|
37
|
+
import React2, { useEffect, useId, useMemo as useMemo2, useState } from "react";
|
|
36
38
|
import { createPortal } from "react-dom";
|
|
37
39
|
|
|
38
40
|
// core/Drawer/DrawerWrapper.tsx
|
|
39
|
-
import React, {
|
|
41
|
+
import React, { useImperativeHandle, useMemo, useRef } from "react";
|
|
40
42
|
|
|
41
43
|
// core/Drawer/helper.ts
|
|
42
44
|
var getDrawerTransform = (placement) => {
|
|
@@ -108,19 +110,13 @@ var DrawerWrapper = React.forwardRef(({ className = "", children, visible = fals
|
|
|
108
110
|
"--drawer-wrapper-transform-hidden": transform.hidden,
|
|
109
111
|
"--drawer-wrapper-transform-visible": transform.visible
|
|
110
112
|
};
|
|
111
|
-
|
|
112
|
-
if (!visible) return;
|
|
113
|
-
const activeElement = document.activeElement;
|
|
114
|
-
const isChild = isChildElement(modalContent.current, activeElement);
|
|
115
|
-
if (isChild) return;
|
|
116
|
-
if (tabStart.current) tabStart.current.focus();
|
|
117
|
-
}, [visible]);
|
|
113
|
+
use_dialog_focus_default(visible, modalContent);
|
|
118
114
|
const onKeyDown = (event) => {
|
|
119
115
|
const isTabDown = event.keyCode === 9;
|
|
120
116
|
if (!visible || !isTabDown) return;
|
|
121
117
|
const activeElement = document.activeElement;
|
|
122
118
|
if (event.shiftKey) {
|
|
123
|
-
if (activeElement === tabStart.current) {
|
|
119
|
+
if (activeElement === tabStart.current || activeElement === modalContent.current) {
|
|
124
120
|
if (tabEnd.current) tabEnd.current.focus();
|
|
125
121
|
}
|
|
126
122
|
} else {
|
|
@@ -179,9 +175,14 @@ var DrawerComponent = React2.forwardRef(
|
|
|
179
175
|
placement,
|
|
180
176
|
onClose,
|
|
181
177
|
onContentClick,
|
|
178
|
+
"aria-labelledby": ariaLabelledby,
|
|
179
|
+
"aria-describedby": ariaDescribedby,
|
|
182
180
|
...props
|
|
183
181
|
}, ref) => {
|
|
184
182
|
const portal = use_portal_default("drawer");
|
|
183
|
+
const baseId = useId();
|
|
184
|
+
const titleId = `${baseId}-title`;
|
|
185
|
+
const descriptionId = `${baseId}-description`;
|
|
185
186
|
const [visible, setVisible] = useState(false);
|
|
186
187
|
const [, setBodyHidden] = use_body_scroll_default(null, { delayReset: 300 });
|
|
187
188
|
const closeDrawer = () => {
|
|
@@ -189,7 +190,7 @@ var DrawerComponent = React2.forwardRef(
|
|
|
189
190
|
setVisible(false);
|
|
190
191
|
setBodyHidden(false);
|
|
191
192
|
};
|
|
192
|
-
|
|
193
|
+
useEffect(() => {
|
|
193
194
|
if (typeof customVisible === "undefined") return;
|
|
194
195
|
setVisible(customVisible);
|
|
195
196
|
setBodyHidden(customVisible);
|
|
@@ -207,9 +208,13 @@ var DrawerComponent = React2.forwardRef(
|
|
|
207
208
|
if (disableBackdropClick) return;
|
|
208
209
|
closeDrawer();
|
|
209
210
|
};
|
|
211
|
+
const modalConfig = useMemo2(
|
|
212
|
+
() => ({ titleId, descriptionId }),
|
|
213
|
+
[titleId, descriptionId]
|
|
214
|
+
);
|
|
210
215
|
if (!portal) return null;
|
|
211
216
|
return createPortal(
|
|
212
|
-
/* @__PURE__ */ jsx2(
|
|
217
|
+
/* @__PURE__ */ jsx2(ModalContext.Provider, { value: modalConfig, children: /* @__PURE__ */ jsx2(
|
|
213
218
|
backdrop_default,
|
|
214
219
|
{
|
|
215
220
|
onClick: closeFromBackdrop,
|
|
@@ -224,12 +229,14 @@ var DrawerComponent = React2.forwardRef(
|
|
|
224
229
|
visible,
|
|
225
230
|
className: wrapClassName,
|
|
226
231
|
placement,
|
|
232
|
+
"aria-labelledby": ariaLabelledby || (hasChild(children, ModalTitle_default) ? titleId : void 0),
|
|
233
|
+
"aria-describedby": ariaDescribedby || (hasChild(children, ModalSubtitle_default) ? descriptionId : void 0),
|
|
227
234
|
...props,
|
|
228
235
|
children
|
|
229
236
|
}
|
|
230
237
|
)
|
|
231
238
|
}
|
|
232
|
-
),
|
|
239
|
+
) }),
|
|
233
240
|
portal
|
|
234
241
|
);
|
|
235
242
|
}
|
|
@@ -27,7 +27,7 @@ import React, {
|
|
|
27
27
|
} from "react";
|
|
28
28
|
|
|
29
29
|
// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Mention/Mention.module.css.bolio-css-module-source
|
|
30
|
-
var Mention_module_css_default = { "mention": "Mention-module_mention__R3-5t", "field": "Mention-module_field__U5FXf", "list": "Mention-module_list__QQ5RM", "empty": "Mention-module_empty__YkZOO", "option": "Mention-module_option__8CupI", "active": "Mention-module_active__8GmDl", "disabled": "Mention-module_disabled__4PL94" };
|
|
30
|
+
var Mention_module_css_default = { "mention": "Mention-module_mention__R3-5t", "field": "Mention-module_field__U5FXf", "list": "Mention-module_list__QQ5RM", "empty": "Mention-module_empty__YkZOO", "option": "Mention-module_option__8CupI", "active": "Mention-module_active__8GmDl", "disabled": "Mention-module_disabled__4PL94", "srOnly": "Mention-module_srOnly__AuP1L" };
|
|
31
31
|
|
|
32
32
|
// core/Mention/Mention.tsx
|
|
33
33
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -231,7 +231,8 @@ var MentionComponent = React.forwardRef(
|
|
|
231
231
|
},
|
|
232
232
|
option.value
|
|
233
233
|
)) }),
|
|
234
|
-
open && visible.length === 0 && /* @__PURE__ */ jsx("div", { className: Mention_module_css_default.empty, children: emptyText })
|
|
234
|
+
open && visible.length === 0 && /* @__PURE__ */ jsx("div", { className: Mention_module_css_default.empty, children: emptyText }),
|
|
235
|
+
/* @__PURE__ */ jsx("div", { role: "status", className: Mention_module_css_default.srOnly, children: expanded ? `${visible.length} result${visible.length === 1 ? "" : "s"} available` : "" })
|
|
235
236
|
]
|
|
236
237
|
}
|
|
237
238
|
);
|
|
@@ -5,8 +5,9 @@ import {
|
|
|
5
5
|
ModalTitle_default,
|
|
6
6
|
backdrop_default,
|
|
7
7
|
useModalContext,
|
|
8
|
-
use_body_scroll_default
|
|
9
|
-
|
|
8
|
+
use_body_scroll_default,
|
|
9
|
+
use_dialog_focus_default
|
|
10
|
+
} from "./chunk-TWT6F7A7.js";
|
|
10
11
|
import {
|
|
11
12
|
use_keyboard_default
|
|
12
13
|
} from "./chunk-F3AL4TQZ.js";
|
|
@@ -28,7 +29,6 @@ import {
|
|
|
28
29
|
} from "./chunk-MAICNLTY.js";
|
|
29
30
|
import {
|
|
30
31
|
hasChild,
|
|
31
|
-
isChildElement,
|
|
32
32
|
pickChild
|
|
33
33
|
} from "./chunk-UX2B3G6U.js";
|
|
34
34
|
import {
|
|
@@ -41,7 +41,7 @@ import {
|
|
|
41
41
|
// core/Modal/Modal.tsx
|
|
42
42
|
import React4, {
|
|
43
43
|
useCallback,
|
|
44
|
-
useEffect as
|
|
44
|
+
useEffect as useEffect2,
|
|
45
45
|
useId,
|
|
46
46
|
useMemo as useMemo2,
|
|
47
47
|
useState as useState2
|
|
@@ -49,7 +49,7 @@ import React4, {
|
|
|
49
49
|
import { createPortal } from "react-dom";
|
|
50
50
|
|
|
51
51
|
// core/Modal/ModalWrapper.tsx
|
|
52
|
-
import React, {
|
|
52
|
+
import React, { useImperativeHandle, useRef } from "react";
|
|
53
53
|
|
|
54
54
|
// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalWrapper.module.css.bolio-css-module-source
|
|
55
55
|
var ModalWrapper_module_css_default = { "wrapper": "ModalWrapper-module_wrapper__DGcJw", "hideTab": "ModalWrapper-module_hideTab__PCR9O" };
|
|
@@ -63,19 +63,13 @@ var ModalWrapper = React.forwardRef(({ className = "", children, visible = false
|
|
|
63
63
|
useImperativeHandle(ref, () => modalContent.current);
|
|
64
64
|
const tabStart = useRef(null);
|
|
65
65
|
const tabEnd = useRef(null);
|
|
66
|
-
|
|
67
|
-
if (!visible) return;
|
|
68
|
-
const activeElement = document.activeElement;
|
|
69
|
-
const isChild = isChildElement(modalContent.current, activeElement);
|
|
70
|
-
if (isChild) return;
|
|
71
|
-
if (tabStart.current) tabStart.current.focus();
|
|
72
|
-
}, [visible]);
|
|
66
|
+
use_dialog_focus_default(visible, modalContent);
|
|
73
67
|
const onKeyDown = (event) => {
|
|
74
68
|
const isTabDown = event.keyCode === 9;
|
|
75
69
|
if (!visible || !isTabDown) return;
|
|
76
70
|
const activeElement = document.activeElement;
|
|
77
71
|
if (event.shiftKey) {
|
|
78
|
-
if (activeElement === tabStart.current) {
|
|
72
|
+
if (activeElement === tabStart.current || activeElement === modalContent.current) {
|
|
79
73
|
if (tabEnd.current) tabEnd.current.focus();
|
|
80
74
|
}
|
|
81
75
|
} else {
|
|
@@ -211,7 +205,7 @@ var ModalAction = with_scale_default(ModalActionComponent);
|
|
|
211
205
|
var ModalAction_default = ModalAction;
|
|
212
206
|
|
|
213
207
|
// core/Modal/ModalActions.tsx
|
|
214
|
-
import React3, { useEffect
|
|
208
|
+
import React3, { useEffect, useRef as useRef3, useState } from "react";
|
|
215
209
|
|
|
216
210
|
// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalActions.module.css.bolio-css-module-source
|
|
217
211
|
var ModalActions_module_css_default = { "footer": "ModalActions-module_footer__gDr-2", "spacer": "ModalActions-module_spacer__zek5w" };
|
|
@@ -226,7 +220,7 @@ var ModalActionsComponent = ({
|
|
|
226
220
|
const ref = useRef3(null);
|
|
227
221
|
const border = theme.type === "dark" ? theme.palette.accents_4 : theme.palette.border;
|
|
228
222
|
const [height, setHeight] = useState("auto");
|
|
229
|
-
|
|
223
|
+
useEffect(() => {
|
|
230
224
|
if (!ref.current) return;
|
|
231
225
|
setHeight(`${ref.current.clientHeight}px`);
|
|
232
226
|
}, [ref]);
|
|
@@ -289,7 +283,7 @@ var ModalComponent = React4.forwardRef(
|
|
|
289
283
|
setVisible(false);
|
|
290
284
|
setBodyHidden(false);
|
|
291
285
|
}, [onClose, setBodyHidden]);
|
|
292
|
-
|
|
286
|
+
useEffect2(() => {
|
|
293
287
|
if (typeof customVisible === "undefined") return;
|
|
294
288
|
setVisible(customVisible);
|
|
295
289
|
setBodyHidden(customVisible);
|
|
@@ -11,6 +11,9 @@ import {
|
|
|
11
11
|
use_scale_default,
|
|
12
12
|
with_scale_default
|
|
13
13
|
} from "./chunk-MAICNLTY.js";
|
|
14
|
+
import {
|
|
15
|
+
isChildElement
|
|
16
|
+
} from "./chunk-UX2B3G6U.js";
|
|
14
17
|
import {
|
|
15
18
|
use_theme_default
|
|
16
19
|
} from "./chunk-V5I4ORQQ.js";
|
|
@@ -206,9 +209,26 @@ BackdropComponent.displayName = "BolioUIBackdrop";
|
|
|
206
209
|
var Backdrop = React2.memo(BackdropComponent);
|
|
207
210
|
var backdrop_default = Backdrop;
|
|
208
211
|
|
|
212
|
+
// core/utils/use-dialog-focus.ts
|
|
213
|
+
import { useEffect } from "react";
|
|
214
|
+
var useDialogFocus = (visible, dialog) => {
|
|
215
|
+
useEffect(() => {
|
|
216
|
+
var _a;
|
|
217
|
+
if (!visible) return;
|
|
218
|
+
const active = document.activeElement;
|
|
219
|
+
if (isChildElement(dialog.current, active)) return;
|
|
220
|
+
(_a = dialog.current) == null ? void 0 : _a.focus({ preventScroll: true });
|
|
221
|
+
return () => {
|
|
222
|
+
if (active == null ? void 0 : active.isConnected) active.focus({ preventScroll: true });
|
|
223
|
+
};
|
|
224
|
+
}, [visible, dialog]);
|
|
225
|
+
};
|
|
226
|
+
var use_dialog_focus_default = useDialogFocus;
|
|
227
|
+
|
|
209
228
|
export {
|
|
210
229
|
use_body_scroll_default2 as use_body_scroll_default,
|
|
211
230
|
backdrop_default,
|
|
231
|
+
use_dialog_focus_default,
|
|
212
232
|
ModalContext,
|
|
213
233
|
useModalContext,
|
|
214
234
|
ModalTitle_default,
|
package/esm/css/Mention.css
CHANGED
|
@@ -90,4 +90,16 @@
|
|
|
90
90
|
color: var(--mention-empty-color);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
+
.Mention-module_srOnly__AuP1L {
|
|
94
|
+
position: absolute;
|
|
95
|
+
width: 1px;
|
|
96
|
+
height: 1px;
|
|
97
|
+
margin: -1px;
|
|
98
|
+
padding: 0;
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
clip: rect(0, 0, 0, 0);
|
|
101
|
+
white-space: nowrap;
|
|
102
|
+
border: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
93
105
|
}
|
package/esm/index.js
CHANGED
|
@@ -119,7 +119,7 @@ import {
|
|
|
119
119
|
} from "./chunk-TJUNBMNF.js";
|
|
120
120
|
import {
|
|
121
121
|
Mention_default
|
|
122
|
-
} from "./chunk-
|
|
122
|
+
} from "./chunk-BXEBNLJ4.js";
|
|
123
123
|
import {
|
|
124
124
|
Note_default
|
|
125
125
|
} from "./chunk-CGS2MT3G.js";
|
|
@@ -164,7 +164,7 @@ import {
|
|
|
164
164
|
} from "./chunk-7N7PEBRB.js";
|
|
165
165
|
import {
|
|
166
166
|
Drawer_default
|
|
167
|
-
} from "./chunk-
|
|
167
|
+
} from "./chunk-4DSLA5LJ.js";
|
|
168
168
|
import {
|
|
169
169
|
Col_default
|
|
170
170
|
} from "./chunk-RZSTPJ76.js";
|
|
@@ -183,17 +183,17 @@ import {
|
|
|
183
183
|
} from "./chunk-KRSISARC.js";
|
|
184
184
|
import {
|
|
185
185
|
Command_default
|
|
186
|
-
} from "./chunk-
|
|
186
|
+
} from "./chunk-BUB6MDGJ.js";
|
|
187
187
|
import {
|
|
188
188
|
Modal_default
|
|
189
|
-
} from "./chunk-
|
|
189
|
+
} from "./chunk-DAPM4M4A.js";
|
|
190
190
|
import {
|
|
191
191
|
Input_default
|
|
192
192
|
} from "./chunk-NEG5UNM6.js";
|
|
193
193
|
import {
|
|
194
194
|
Textarea_default
|
|
195
195
|
} from "./chunk-ISLUC2SD.js";
|
|
196
|
-
import "./chunk-
|
|
196
|
+
import "./chunk-TWT6F7A7.js";
|
|
197
197
|
import {
|
|
198
198
|
KeyCode,
|
|
199
199
|
KeyMod,
|
package/esm/styles.css
CHANGED
|
@@ -3175,6 +3175,18 @@ body:has(.ImageZoom-module_dialog__TjA9E[open]) {
|
|
|
3175
3175
|
color: var(--mention-empty-color);
|
|
3176
3176
|
}
|
|
3177
3177
|
|
|
3178
|
+
.Mention-module_srOnly__AuP1L {
|
|
3179
|
+
position: absolute;
|
|
3180
|
+
width: 1px;
|
|
3181
|
+
height: 1px;
|
|
3182
|
+
margin: -1px;
|
|
3183
|
+
padding: 0;
|
|
3184
|
+
overflow: hidden;
|
|
3185
|
+
clip: rect(0, 0, 0, 0);
|
|
3186
|
+
white-space: nowrap;
|
|
3187
|
+
border: 0;
|
|
3188
|
+
}
|
|
3189
|
+
|
|
3178
3190
|
}
|
|
3179
3191
|
|
|
3180
3192
|
@layer Menu {
|
package/esm/styles.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bolio-ui/core",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.4",
|
|
4
4
|
"description": "Amazing, modern and creative tools for React UI. 🥷🏼",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"bolio",
|
|
@@ -34,7 +34,10 @@
|
|
|
34
34
|
"module": "./esm/index.js",
|
|
35
35
|
"default": "./dist/index.js"
|
|
36
36
|
},
|
|
37
|
-
"./styles.css":
|
|
37
|
+
"./styles.css": {
|
|
38
|
+
"types": "./dist/styles.d.ts",
|
|
39
|
+
"default": "./dist/styles.css"
|
|
40
|
+
},
|
|
38
41
|
"./css/*": "./dist/css/*",
|
|
39
42
|
"./dist/index.js": "./dist/index.js",
|
|
40
43
|
"./dist/*/index.js": "./dist/*/index.js",
|