@mirohq/design-system-use-press - npm Package Compare versions

Comparing version 0.3.0-toolbar-item-use-press.10 to 0.3.0-toolbar-item-use-press.11

dist/main.js

@@ -12,13 +12,19 @@ 'use strict';
 const handleFocus = ({
-  target,
+  event,
   disabled,
-  preventFocusOnPress
+  preventFocusOnPress,
+  shouldPreventDefault = () => false
 }) => {
   if (disabled) {
+    event == null ? void 0 : event.preventDefault();
     return;
   }
+  if (preventFocusOnPress === "auto") {
+    return;
+  }
+  if (shouldPreventDefault(event.currentTarget)) {
+    event == null ? void 0 : event.preventDefault();
+  }
   if (!preventFocusOnPress) {
-    if (document.activeElement !== target) {
-      utils.focusWithoutScrolling(target);
-    }
+    utils.focusWithoutScrolling(event.currentTarget);
   }
@@ -86,3 +92,3 @@ };
         handleFocus({
-          target: e.currentTarget,
+          event: e,
           disabled,
@@ -102,5 +108,2 @@ preventFocusOnPress
     }
-    if (shouldPreventDefault$1(e.currentTarget) && !preventFocusOnPress) {
-      e.preventDefault();
-    }
     if (state.ignoreEmulatedMouseEvents) {
@@ -114,5 +117,6 @@ return;
     handleFocus({
-      target: e.currentTarget,
+      event: e,
       disabled,
-      preventFocusOnPress
+      preventFocusOnPress,
+      shouldPreventDefault: shouldPreventDefault$1
     });
@@ -221,3 +225,3 @@ triggerPressStart(e, state.pointerType);
       handleFocus({
-        target: e.currentTarget,
+        event: e,
         disabled,
@@ -392,3 +396,3 @@ preventFocusOnPress
     handleFocus({
-      target: e.currentTarget,
+      event: e,
       disabled,
@@ -574,5 +578,2 @@ preventFocusOnPress
     }
-    if (shouldPreventDefault(e.currentTarget) && !preventFocusOnPress) {
-      e.preventDefault();
-    }
     state.pointerType = e.pointerType;
@@ -585,5 +586,6 @@ if (!state.isPressed) {
       handleFocus({
-        target: e.currentTarget,
+        event: e,
         disabled,
-        preventFocusOnPress
+        preventFocusOnPress,
+        shouldPreventDefault
       });
@@ -604,3 +606,3 @@ if (!allowTextSelectionOnPress) {
     if (e.button === 0) {
-      if (shouldPreventDefault(e.currentTarget) && !preventFocusOnPress) {
+      if (shouldPreventDefault(e.currentTarget) && preventFocusOnPress !== "auto") {
         e.preventDefault();
@@ -641,3 +643,3 @@ }
     pressed,
-    preventFocusOnPress,
+    preventFocusOnPress = false,
     shouldCancelOnPointerExit,
@@ -644,0 +646,0 @@ allowTextSelectionOnPress = false,

dist/module.js

@@ -8,13 +8,19 @@ import { useRef, useState, useEffect } from 'react';
 const handleFocus = ({
-  target,
+  event,
   disabled,
-  preventFocusOnPress
+  preventFocusOnPress,
+  shouldPreventDefault = () => false
 }) => {
   if (disabled) {
+    event == null ? void 0 : event.preventDefault();
     return;
   }
+  if (preventFocusOnPress === "auto") {
+    return;
+  }
+  if (shouldPreventDefault(event.currentTarget)) {
+    event == null ? void 0 : event.preventDefault();
+  }
   if (!preventFocusOnPress) {
-    if (document.activeElement !== target) {
-      focusWithoutScrolling(target);
-    }
+    focusWithoutScrolling(event.currentTarget);
   }
@@ -82,3 +88,3 @@ };
         handleFocus({
-          target: e.currentTarget,
+          event: e,
           disabled,
@@ -98,5 +104,2 @@ preventFocusOnPress
     }
-    if (shouldPreventDefault$1(e.currentTarget) && !preventFocusOnPress) {
-      e.preventDefault();
-    }
     if (state.ignoreEmulatedMouseEvents) {
@@ -110,5 +113,6 @@ return;
     handleFocus({
-      target: e.currentTarget,
+      event: e,
       disabled,
-      preventFocusOnPress
+      preventFocusOnPress,
+      shouldPreventDefault: shouldPreventDefault$1
     });
@@ -217,3 +221,3 @@ triggerPressStart(e, state.pointerType);
       handleFocus({
-        target: e.currentTarget,
+        event: e,
         disabled,
@@ -388,3 +392,3 @@ preventFocusOnPress
     handleFocus({
-      target: e.currentTarget,
+      event: e,
       disabled,
@@ -570,5 +574,2 @@ preventFocusOnPress
     }
-    if (shouldPreventDefault(e.currentTarget) && !preventFocusOnPress) {
-      e.preventDefault();
-    }
     state.pointerType = e.pointerType;
@@ -581,5 +582,6 @@ if (!state.isPressed) {
       handleFocus({
-        target: e.currentTarget,
+        event: e,
         disabled,
-        preventFocusOnPress
+        preventFocusOnPress,
+        shouldPreventDefault
       });
@@ -600,3 +602,3 @@ if (!allowTextSelectionOnPress) {
     if (e.button === 0) {
-      if (shouldPreventDefault(e.currentTarget) && !preventFocusOnPress) {
+      if (shouldPreventDefault(e.currentTarget) && preventFocusOnPress !== "auto") {
         e.preventDefault();
@@ -637,3 +639,3 @@ }
     pressed,
-    preventFocusOnPress,
+    preventFocusOnPress = false,
     shouldCancelOnPointerExit,
@@ -640,0 +642,0 @@ allowTextSelectionOnPress = false,

dist/types.d.ts

@@ -59,6 +59,8 @@ import { AriaAttributes, DOMAttributes as DOMAttributes$1, AriaRole, CSSProperties } from 'react';
      * Controls the focus behavior on press for the target component.
+     * - 'auto': The usePress does not manage focus on press.
      * - true: Prevents the target component from receiving focus when pressed.
      * - false: Focus is applied to the target component when pressed, without scrolling the page.
+     * @default false
      */
-    preventFocusOnPress?: boolean;
+    preventFocusOnPress?: boolean | 'auto';
     /** Whether text selection should be enabled on the pressable element. */
@@ -77,3 +79,4 @@ allowTextSelectionOnPress?: boolean;
 }
-declare type AllEvents = MouseEvent | KeyboardEvent | PointerEvent | EventBase | ScrollEvent | React.KeyboardEvent<FocusableElement> | React.MouseEvent<FocusableElement> | React.TouchEvent<FocusableElement> | React.DragEvent<FocusableElement> | React.PointerEvent<HTMLElement>;
+declare type AllEvents = MouseEvent | KeyboardEvent | PointerEvent | EventBase | ScrollEvent | FocusableEvent;
+declare type FocusableEvent = React.KeyboardEvent<FocusableElement> | React.MouseEvent<FocusableElement> | React.TouchEvent<FocusableElement> | React.DragEvent<FocusableElement> | React.PointerEvent<HTMLElement>;
 interface EventBase {
@@ -80,0 +83,0 @@ currentTarget: EventTarget;

package.json

 {
   "name": "@mirohq/design-system-use-press",
-  "version": "0.3.0-toolbar-item-use-press.10",
+  "version": "0.3.0-toolbar-item-use-press.11",
   "description": "",
@@ -30,4 +30,4 @@ "author": "Miro",
     "@mirohq/design-system-use-logger": "^0.1.6",
-    "@mirohq/design-system-utils": "^0.14.3",
-    "@mirohq/design-system-use-listeners": "^0.1.1"
+    "@mirohq/design-system-use-listeners": "^0.1.1",
+    "@mirohq/design-system-utils": "^0.14.3"
   },
@@ -34,0 +34,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

168691

increased by0.15%

Lines of code

1690

increased by0.42%

No dependency changes