@os-design/core 1.0.272 → 1.0.274

package/dist/Drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAA8C,MAAM,OAAO,CAAC;AAInE,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,QAAQ;IACxD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAmGD,eAAO,MAAM,cAAc,cAF0B,IAEa,CAAC;AAEnE;;GAEG;AACH,QAAA,MAAM,MAAM,oFAmEX,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAsD,MAAM,OAAO,CAAC;AAI3E,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,QAAQ;IACxD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAmGD,eAAO,MAAM,cAAc,cAF0B,IAEa,CAAC;AAEnE;;GAEG;AACH,QAAA,MAAM,MAAM,oFAwFX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/Drawer/index.js

@@ -4,7 +4,7 @@ import Portal from '@os-design/portal';
 import { enableScrollingStyles, resetFocusStyles, sizeStyles } from '@os-design/styles';
 import { clr, useTheme } from '@os-design/theming';
 import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
-import React, { forwardRef, useCallback, useContext } from 'react';
+import React, { forwardRef, useCallback, useContext, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
 import { ModalMask } from '../Modal/index.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -93,8 +93,21 @@ const Drawer = /*#__PURE__*/forwardRef(({
   } = useTheme();
   const mounted = useClosable(visible, theme.transitionDelay);
   useBodyScroll(!visible);
+  const closeRef = useRef(false);
   const pointerDownHandler = useCallback(e => {
     e.stopPropagation();
+    closeRef.current = true;
+  }, []);
+  const pointerUpHandler = useCallback(e => {
+    e.stopPropagation();
+    if (closeRef.current) {
+      closeRef.current = false;
+      onClose();
+    }
+  }, [onClose]);
+  const stopPointerHandler = useCallback(e => {
+    e.stopPropagation();
+    closeRef.current = false;
     onPointerDown(e);
   }, [onPointerDown]);
   const keyDownHandler = useCallback(e => {
@@ -108,7 +121,9 @@ const Drawer = /*#__PURE__*/forwardRef(({
     children: [/*#__PURE__*/_jsx(DrawerMask, {
       visible: visible
     }), /*#__PURE__*/_jsx(Container, {
-      onPointerDown: onClose,
+      onPointerDown: pointerDownHandler,
+      onPointerUp: pointerUpHandler,
+      onClick: e => e.stopPropagation(),
       children: /*#__PURE__*/_jsx(FocusLock, {
         autoFocus: false,
         children: /*#__PURE__*/_jsx(CloseDrawerContext.Provider, {
@@ -120,7 +135,8 @@ const Drawer = /*#__PURE__*/forwardRef(({
             size: size,
             tabIndex: -1,
             onKeyDown: keyDownHandler,
-            onPointerDown: pointerDownHandler,
+            onPointerDown: stopPointerHandler,
+            onPointerUp: stopPointerHandler,
             role: "dialog",
             "aria-modal": true,
             ...rest,

package/dist/Modal/index.d.ts.map

@@ -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;;SAiFW,MAAO,WAEhC;iGAzEP,CAAC;AAsJF,eAAO,MAAM,aAAa,cAF0B,IAEY,CAAC;AAEjE;;GAEG;AACH,QAAA,MAAM,KAAK,mFAyIV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"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,mFAyJV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/Modal/index.js

@@ -188,11 +188,20 @@ const Modal = /*#__PURE__*/forwardRef(({
   useBodyScroll(!visible);
   const titleId = useMemo(() => `modal-title-${Math.random().toString(36).slice(2, 11)}`, []);
   const bodyId = useMemo(() => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`, [id]);
-  const containerPointerDownHandler = useCallback(e => {
+  const closeRef = useRef(false);
+  const pointerDownHandler = useCallback(e => {
     e.stopPropagation();
-    onClose();
+    closeRef.current = true;
+  }, []);
+  const pointerUpHandler = useCallback(e => {
+    e.stopPropagation();
+    if (closeRef.current) {
+      closeRef.current = false;
+      onClose();
+    }
   }, [onClose]);
-  const contentPointerDownHandler = useCallback(e => {
+  const stopPointerHandler = useCallback(e => {
+    closeRef.current = false;
     e.stopPropagation();
     onPointerDown(e);
   }, [onPointerDown]);
@@ -208,7 +217,9 @@ const Modal = /*#__PURE__*/forwardRef(({
     children: [/*#__PURE__*/_jsx(ModalMask, {
       visible: visible
     }), /*#__PURE__*/_jsx(Container, {
-      onPointerDown: containerPointerDownHandler,
+      onPointerDown: pointerDownHandler,
+      onPointerUp: pointerUpHandler,
+      onClick: e => e.stopPropagation(),
       children: /*#__PURE__*/_jsx(FocusLock, {
         autoFocus: false,
         children: /*#__PURE__*/_jsx(CloseModalContext.Provider, {
@@ -218,7 +229,8 @@ const Modal = /*#__PURE__*/forwardRef(({
             size: size,
             tabIndex: -1,
             onKeyDown: contentKeyDownHandler,
-            onPointerDown: contentPointerDownHandler,
+            onPointerDown: stopPointerHandler,
+            onPointerUp: stopPointerHandler,
             role: "dialog",
             "aria-modal": true,
             "aria-labelledby": ariaLabelledBy,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.272",
+  "version": "1.0.274",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "type": "module",
@@ -58,5 +58,5 @@
     "react": "18",
     "react-dom": "18"
   },
-  "gitHead": "76fcd7ad4defc5b75f17760fefd87d5cd2ba9799"
+  "gitHead": "2670f1f372534a39413706dd9af40e6cf0a49b1e"
 }

package/src/Drawer/index.tsx

@@ -9,7 +9,7 @@ import {
 } from '@os-design/styles';
 import { clr, useTheme } from '@os-design/theming';
 import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
-import React, { forwardRef, useCallback, useContext } from 'react';
+import React, { forwardRef, useCallback, useContext, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
 import { ModalMask } from '../Modal/index.js';
 
@@ -159,9 +159,25 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
 
     useBodyScroll(!visible);
 
-    const pointerDownHandler = useCallback(
+    const closeRef = useRef(false);
+    const pointerDownHandler = useCallback((e) => {
+      e.stopPropagation();
+      closeRef.current = true;
+    }, []);
+    const pointerUpHandler = useCallback(
       (e) => {
         e.stopPropagation();
+        if (closeRef.current) {
+          closeRef.current = false;
+          onClose();
+        }
+      },
+      [onClose]
+    );
+    const stopPointerHandler = useCallback(
+      (e) => {
+        e.stopPropagation();
+        closeRef.current = false;
         onPointerDown(e);
       },
       [onPointerDown]
@@ -182,7 +198,11 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
     return (
       <Portal>
         <DrawerMask visible={visible} />
-        <Container onPointerDown={onClose}>
+        <Container
+          onPointerDown={pointerDownHandler}
+          onPointerUp={pointerUpHandler}
+          onClick={(e) => e.stopPropagation()}
+        >
           {/* @ts-expect-error FocusLock has problems with types */}
           <FocusLock autoFocus={false}>
             <CloseDrawerContext.Provider value={onClose}>
@@ -193,7 +213,8 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
                 size={size}
                 tabIndex={-1}
                 onKeyDown={keyDownHandler}
-                onPointerDown={pointerDownHandler}
+                onPointerDown={stopPointerHandler}
+                onPointerUp={stopPointerHandler}
                 role='dialog'
                 aria-modal
                 {...rest}

package/src/Modal/index.tsx

@@ -314,16 +314,27 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
       [id]
     );
 
-    const containerPointerDownHandler = useCallback(
+    const closeRef = useRef(false);
+    const pointerDownHandler = useCallback(
       (e: PointerEvent<HTMLDivElement>) => {
         e.stopPropagation();
-        onClose();
+        closeRef.current = true;
+      },
+      []
+    );
+    const pointerUpHandler = useCallback(
+      (e: PointerEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        if (closeRef.current) {
+          closeRef.current = false;
+          onClose();
+        }
       },
       [onClose]
     );
-
-    const contentPointerDownHandler = useCallback(
+    const stopPointerHandler = useCallback(
       (e: PointerEvent<HTMLDivElement>) => {
+        closeRef.current = false;
         e.stopPropagation();
         onPointerDown(e);
       },
@@ -350,7 +361,11 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
     return (
       <Portal>
         <ModalMask visible={visible} />
-        <Container onPointerDown={containerPointerDownHandler}>
+        <Container
+          onPointerDown={pointerDownHandler}
+          onPointerUp={pointerUpHandler}
+          onClick={(e) => e.stopPropagation()}
+        >
           {/* @ts-expect-error FocusLock has problems with types */}
           <FocusLock autoFocus={false}>
             <CloseModalContext.Provider value={onClose}>
@@ -359,7 +374,8 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
                 size={size}
                 tabIndex={-1}
                 onKeyDown={contentKeyDownHandler}
-                onPointerDown={contentPointerDownHandler}
+                onPointerDown={stopPointerHandler}
+                onPointerUp={stopPointerHandler}
                 role='dialog'
                 aria-modal
                 aria-labelledby={ariaLabelledBy}