@os-design/core 1.0.270 → 1.0.271
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/Drawer/index.js +6 -6
- package/dist/Modal/index.d.ts.map +1 -1
- package/dist/Modal/index.js +7 -7
- package/package.json +2 -2
- package/src/Drawer/index.tsx +6 -6
- package/src/Modal/index.tsx +10 -10
package/dist/Drawer/index.js
CHANGED
|
@@ -85,7 +85,7 @@ const Drawer = /*#__PURE__*/forwardRef(({
|
|
|
85
85
|
onClose = () => {},
|
|
86
86
|
size,
|
|
87
87
|
children,
|
|
88
|
-
|
|
88
|
+
onPointerDown = () => {},
|
|
89
89
|
...rest
|
|
90
90
|
}, ref) => {
|
|
91
91
|
const {
|
|
@@ -93,10 +93,10 @@ const Drawer = /*#__PURE__*/forwardRef(({
|
|
|
93
93
|
} = useTheme();
|
|
94
94
|
const mounted = useClosable(visible, theme.transitionDelay);
|
|
95
95
|
useBodyScroll(!visible);
|
|
96
|
-
const
|
|
96
|
+
const pointerDownHandler = useCallback(e => {
|
|
97
97
|
e.stopPropagation();
|
|
98
|
-
|
|
99
|
-
}, [
|
|
98
|
+
onPointerDown(e);
|
|
99
|
+
}, [onPointerDown]);
|
|
100
100
|
const keyDownHandler = useCallback(e => {
|
|
101
101
|
if (e.key === 'Escape') {
|
|
102
102
|
e.stopPropagation();
|
|
@@ -108,7 +108,7 @@ const Drawer = /*#__PURE__*/forwardRef(({
|
|
|
108
108
|
children: [/*#__PURE__*/_jsx(DrawerMask, {
|
|
109
109
|
visible: visible
|
|
110
110
|
}), /*#__PURE__*/_jsx(Container, {
|
|
111
|
-
|
|
111
|
+
onPointerDown: onClose,
|
|
112
112
|
children: /*#__PURE__*/_jsx(FocusLock, {
|
|
113
113
|
autoFocus: false,
|
|
114
114
|
children: /*#__PURE__*/_jsx(CloseDrawerContext.Provider, {
|
|
@@ -120,7 +120,7 @@ const Drawer = /*#__PURE__*/forwardRef(({
|
|
|
120
120
|
size: size,
|
|
121
121
|
tabIndex: -1,
|
|
122
122
|
onKeyDown: keyDownHandler,
|
|
123
|
-
|
|
123
|
+
onPointerDown: pointerDownHandler,
|
|
124
124
|
role: "dialog",
|
|
125
125
|
"aria-modal": true,
|
|
126
126
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAsB,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE3E,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA2BD,KAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAsB,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE3E,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA2BD,KAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;SAiFW,MAAO,WAEhC;iGAzEP,CAAC;AAsJF,eAAO,MAAM,aAAa,cAF0B,IAEY,CAAC;AAEjE;;GAEG;AACH,QAAA,MAAM,KAAK,mFAyIV,CAAC;AAIF,eAAe,KAAK,CAAC"}
|
package/dist/Modal/index.js
CHANGED
|
@@ -176,7 +176,7 @@ const Modal = /*#__PURE__*/forwardRef(({
|
|
|
176
176
|
onOk,
|
|
177
177
|
size,
|
|
178
178
|
id,
|
|
179
|
-
|
|
179
|
+
onPointerDown = () => {},
|
|
180
180
|
children,
|
|
181
181
|
...rest
|
|
182
182
|
}, ref) => {
|
|
@@ -188,14 +188,14 @@ const Modal = /*#__PURE__*/forwardRef(({
|
|
|
188
188
|
useBodyScroll(!visible);
|
|
189
189
|
const titleId = useMemo(() => `modal-title-${Math.random().toString(36).slice(2, 11)}`, []);
|
|
190
190
|
const bodyId = useMemo(() => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`, [id]);
|
|
191
|
-
const
|
|
191
|
+
const containerPointerDownHandler = useCallback(e => {
|
|
192
192
|
e.stopPropagation();
|
|
193
193
|
onClose();
|
|
194
194
|
}, [onClose]);
|
|
195
|
-
const
|
|
195
|
+
const contentPointerDownHandler = useCallback(e => {
|
|
196
196
|
e.stopPropagation();
|
|
197
|
-
|
|
198
|
-
}, [
|
|
197
|
+
onPointerDown(e);
|
|
198
|
+
}, [onPointerDown]);
|
|
199
199
|
const contentKeyDownHandler = useCallback(e => {
|
|
200
200
|
if (e.key === 'Escape') {
|
|
201
201
|
e.stopPropagation();
|
|
@@ -208,7 +208,7 @@ const Modal = /*#__PURE__*/forwardRef(({
|
|
|
208
208
|
children: [/*#__PURE__*/_jsx(ModalMask, {
|
|
209
209
|
visible: visible
|
|
210
210
|
}), /*#__PURE__*/_jsx(Container, {
|
|
211
|
-
|
|
211
|
+
onPointerDown: containerPointerDownHandler,
|
|
212
212
|
children: /*#__PURE__*/_jsx(FocusLock, {
|
|
213
213
|
autoFocus: false,
|
|
214
214
|
children: /*#__PURE__*/_jsx(CloseModalContext.Provider, {
|
|
@@ -218,7 +218,7 @@ const Modal = /*#__PURE__*/forwardRef(({
|
|
|
218
218
|
size: size,
|
|
219
219
|
tabIndex: -1,
|
|
220
220
|
onKeyDown: contentKeyDownHandler,
|
|
221
|
-
|
|
221
|
+
onPointerDown: contentPointerDownHandler,
|
|
222
222
|
role: "dialog",
|
|
223
223
|
"aria-modal": true,
|
|
224
224
|
"aria-labelledby": ariaLabelledBy,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.271",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"type": "module",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react": "18",
|
|
59
59
|
"react-dom": "18"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "8d072b274db8bc64fd6dc4f39b86d0960c5584a7"
|
|
62
62
|
}
|
package/src/Drawer/index.tsx
CHANGED
|
@@ -149,7 +149,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
|
|
|
149
149
|
onClose = () => {},
|
|
150
150
|
size,
|
|
151
151
|
children,
|
|
152
|
-
|
|
152
|
+
onPointerDown = () => {},
|
|
153
153
|
...rest
|
|
154
154
|
},
|
|
155
155
|
ref
|
|
@@ -159,12 +159,12 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
|
|
|
159
159
|
|
|
160
160
|
useBodyScroll(!visible);
|
|
161
161
|
|
|
162
|
-
const
|
|
162
|
+
const pointerDownHandler = useCallback(
|
|
163
163
|
(e) => {
|
|
164
164
|
e.stopPropagation();
|
|
165
|
-
|
|
165
|
+
onPointerDown(e);
|
|
166
166
|
},
|
|
167
|
-
[
|
|
167
|
+
[onPointerDown]
|
|
168
168
|
);
|
|
169
169
|
|
|
170
170
|
const keyDownHandler = useCallback(
|
|
@@ -182,7 +182,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
|
|
|
182
182
|
return (
|
|
183
183
|
<Portal>
|
|
184
184
|
<DrawerMask visible={visible} />
|
|
185
|
-
<Container
|
|
185
|
+
<Container onPointerDown={onClose}>
|
|
186
186
|
{/* @ts-expect-error FocusLock has problems with types */}
|
|
187
187
|
<FocusLock autoFocus={false}>
|
|
188
188
|
<CloseDrawerContext.Provider value={onClose}>
|
|
@@ -193,7 +193,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
|
|
|
193
193
|
size={size}
|
|
194
194
|
tabIndex={-1}
|
|
195
195
|
onKeyDown={keyDownHandler}
|
|
196
|
-
|
|
196
|
+
onPointerDown={pointerDownHandler}
|
|
197
197
|
role='dialog'
|
|
198
198
|
aria-modal
|
|
199
199
|
{...rest}
|
package/src/Modal/index.tsx
CHANGED
|
@@ -13,7 +13,7 @@ import { ThemeOverrider, clr, useTheme } from '@os-design/theming';
|
|
|
13
13
|
import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
|
|
14
14
|
import React, {
|
|
15
15
|
type KeyboardEvent,
|
|
16
|
-
type
|
|
16
|
+
type PointerEvent,
|
|
17
17
|
forwardRef,
|
|
18
18
|
useCallback,
|
|
19
19
|
useContext,
|
|
@@ -293,7 +293,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
|
|
|
293
293
|
onOk,
|
|
294
294
|
size,
|
|
295
295
|
id,
|
|
296
|
-
|
|
296
|
+
onPointerDown = () => {},
|
|
297
297
|
children,
|
|
298
298
|
...rest
|
|
299
299
|
},
|
|
@@ -314,20 +314,20 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
|
|
|
314
314
|
[id]
|
|
315
315
|
);
|
|
316
316
|
|
|
317
|
-
const
|
|
318
|
-
(e:
|
|
317
|
+
const containerPointerDownHandler = useCallback(
|
|
318
|
+
(e: PointerEvent<HTMLDivElement>) => {
|
|
319
319
|
e.stopPropagation();
|
|
320
320
|
onClose();
|
|
321
321
|
},
|
|
322
322
|
[onClose]
|
|
323
323
|
);
|
|
324
324
|
|
|
325
|
-
const
|
|
326
|
-
(e:
|
|
325
|
+
const contentPointerDownHandler = useCallback(
|
|
326
|
+
(e: PointerEvent<HTMLDivElement>) => {
|
|
327
327
|
e.stopPropagation();
|
|
328
|
-
|
|
328
|
+
onPointerDown(e);
|
|
329
329
|
},
|
|
330
|
-
[
|
|
330
|
+
[onPointerDown]
|
|
331
331
|
);
|
|
332
332
|
|
|
333
333
|
const contentKeyDownHandler = useCallback(
|
|
@@ -350,7 +350,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
|
|
|
350
350
|
return (
|
|
351
351
|
<Portal>
|
|
352
352
|
<ModalMask visible={visible} />
|
|
353
|
-
<Container
|
|
353
|
+
<Container onPointerDown={containerPointerDownHandler}>
|
|
354
354
|
{/* @ts-expect-error FocusLock has problems with types */}
|
|
355
355
|
<FocusLock autoFocus={false}>
|
|
356
356
|
<CloseModalContext.Provider value={onClose}>
|
|
@@ -359,7 +359,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
|
|
|
359
359
|
size={size}
|
|
360
360
|
tabIndex={-1}
|
|
361
361
|
onKeyDown={contentKeyDownHandler}
|
|
362
|
-
|
|
362
|
+
onPointerDown={contentPointerDownHandler}
|
|
363
363
|
role='dialog'
|
|
364
364
|
aria-modal
|
|
365
365
|
aria-labelledby={ariaLabelledBy}
|