@chakra-ui/hooks - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

CHANGELOG.md

 # Change Log
 
+## 1.4.0
+
+### Minor Changes
+
+- [`d1532f0b7`](https://github.com/chakra-ui/chakra-ui/commit/d1532f0b72c36d0609ee4510613d7c76f4f9c113)
+  Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Add support for
+  passing function that returns element to `useEventListener` and
+  `usePointerEvent`
+
+### Patch Changes
+
+- Updated dependencies
+  [[`8b5eb9654`](https://github.com/chakra-ui/chakra-ui/commit/8b5eb9654affe562795d38a19f732f84732a949d)]:
+  - @chakra-ui/utils@1.5.2
+
 ## 1.3.1
@@ -4,0 +19,0 @@

dist/cjs/use-event-listener.js

@@ -6,6 +6,6 @@ "use strict";
 
+var _utils = require("@chakra-ui/utils");
+
 var React = _interopRequireWildcard(require("react"));
 
-var _utils = require("@chakra-ui/utils");
-
 var _useCallbackRef = require("./use-callback-ref");
@@ -24,27 +24,23 @@
  * @param options the event listener options
+ *
+ * @internal
  */
 function useEventListener(event, handler, env, options) {
-  if (env === void 0) {
-    env = _utils.isBrowser ? document : null;
-  }
-
-  var fn = (0, _useCallbackRef.useCallbackRef)(handler);
+  var listener = (0, _useCallbackRef.useCallbackRef)(handler);
   React.useEffect(function () {
-    if (!env) return undefined;
+    var _runIfFn;
 
-    var listener = function listener(event) {
-      fn(event);
-    };
-
-    env.addEventListener(event, listener, options);
+    var node = (_runIfFn = (0, _utils.runIfFn)(env)) != null ? _runIfFn : document;
+    node.addEventListener(event, listener, options);
     return function () {
-      env.removeEventListener(event, listener, options);
+      node.removeEventListener(event, listener, options);
     };
-  }, [event, env, options, fn]);
+  }, [event, env, options, listener]);
   return function () {
-    var _env;
+    var _runIfFn2;
 
-    (_env = env) == null ? void 0 : _env.removeEventListener(event, fn, options);
+    var node = (_runIfFn2 = (0, _utils.runIfFn)(env)) != null ? _runIfFn2 : document;
+    node.removeEventListener(event, listener, options);
   };
 }
 //# sourceMappingURL=use-event-listener.js.map

dist/cjs/use-focus-on-pointerdown.js

@@ -20,17 +20,22 @@ "use strict";
 function useFocusOnPointerDown(props) {
-  var doc = props.doc,
-      elements = props.elements;
+  var ref = props.ref,
+      elements = props.elements,
+      enabled = props.enabled;
   var isSafari = (0, _utils.detectBrowser)("Safari");
+
+  var doc = function doc() {
+    return (0, _utils.getOwnerDocument)(ref.current);
+  };
+
   (0, _usePointerEvent.usePointerEvent)(doc, "pointerdown", function (event) {
-    if (!isSafari) return;
+    if (!isSafari || !enabled) return;
     var target = event.target;
-    var isValidTarget = elements.some(function (element) {
-      if ((0, _utils.isRefObject)(element)) {
-        return target === element.current;
-      }
-
-      return target === element;
+    var els = elements != null ? elements : [ref];
+    var isValidTarget = els.some(function (elementOrRef) {
+      var el = (0, _utils.isRefObject)(elementOrRef) ? elementOrRef.current : elementOrRef;
+      return (0, _utils.contains)(el, target);
     });
 
     if (!(0, _utils.isActiveElement)(target) && isValidTarget) {
+      event.preventDefault();
       (0, _utils.focus)(target);
@@ -37,0 +42,0 @@ }

dist/esm/use-event-listener.js

@@ -0,4 +1,5 @@
+import { runIfFn } from "@chakra-ui/utils";
 import * as React from "react";
-import { isBrowser } from "@chakra-ui/utils";
 import { useCallbackRef } from "./use-callback-ref";
+
 /**
@@ -11,28 +12,23 @@ * React hook to manage browser event listeners
  * @param options the event listener options
+ *
+ * @internal
  */
-
 export function useEventListener(event, handler, env, options) {
-  if (env === void 0) {
-    env = isBrowser ? document : null;
-  }
-
-  var fn = useCallbackRef(handler);
+  var listener = useCallbackRef(handler);
   React.useEffect(() => {
-    if (!env) return undefined;
+    var _runIfFn;
 
-    var listener = event => {
-      fn(event);
-    };
-
-    env.addEventListener(event, listener, options);
+    var node = (_runIfFn = runIfFn(env)) != null ? _runIfFn : document;
+    node.addEventListener(event, listener, options);
     return () => {
-      env.removeEventListener(event, listener, options);
+      node.removeEventListener(event, listener, options);
     };
-  }, [event, env, options, fn]);
+  }, [event, env, options, listener]);
   return () => {
-    var _env;
+    var _runIfFn2;
 
-    (_env = env) == null ? void 0 : _env.removeEventListener(event, fn, options);
+    var node = (_runIfFn2 = runIfFn(env)) != null ? _runIfFn2 : document;
+    node.removeEventListener(event, listener, options);
   };
 }
 //# sourceMappingURL=use-event-listener.js.map

dist/esm/use-focus-on-pointerdown.js

@@ -1,2 +0,2 @@
-import { detectBrowser, focus, isActiveElement, isRefObject } from "@chakra-ui/utils";
+import { contains, detectBrowser, focus, getOwnerDocument, isActiveElement, isRefObject } from "@chakra-ui/utils";
 import { usePointerEvent } from "./use-pointer-event";
@@ -15,18 +15,21 @@
   var {
-    doc,
-    elements
+    ref,
+    elements,
+    enabled
   } = props;
   var isSafari = detectBrowser("Safari");
+
+  var doc = () => getOwnerDocument(ref.current);
+
   usePointerEvent(doc, "pointerdown", event => {
-    if (!isSafari) return;
+    if (!isSafari || !enabled) return;
     var target = event.target;
-    var isValidTarget = elements.some(element => {
-      if (isRefObject(element)) {
-        return target === element.current;
-      }
-
-      return target === element;
+    var els = elements != null ? elements : [ref];
+    var isValidTarget = els.some(elementOrRef => {
+      var el = isRefObject(elementOrRef) ? elementOrRef.current : elementOrRef;
+      return contains(el, target);
     });
 
     if (!isActiveElement(target) && isValidTarget) {
+      event.preventDefault();
       focus(target);
@@ -33,0 +36,0 @@ }

dist/types/use-event-listener.d.ts

@@ -0,1 +1,3 @@
+declare type DocumentOrElement = Document | HTMLElement | null;
+export declare type EventListenerEnv = (() => DocumentOrElement) | DocumentOrElement;
 /**
@@ -8,4 +10,7 @@ * React hook to manage browser event listeners
  * @param options the event listener options
+ *
+ * @internal
  */
-export declare function useEventListener<K extends keyof DocumentEventMap>(event: K | (string & {}), handler: (event: DocumentEventMap[K]) => void, env?: Document | HTMLElement | null, options?: boolean | AddEventListenerOptions): () => void;
+export declare function useEventListener<K extends keyof DocumentEventMap>(event: K | (string & {}), handler: (event: DocumentEventMap[K]) => void, env?: EventListenerEnv, options?: boolean | AddEventListenerOptions): () => void;
+export {};
 //# sourceMappingURL=use-event-listener.d.ts.map

dist/types/use-focus-on-pointerdown.d.ts

 import { RefObject } from "react";
 export interface UseFocusOnMouseDownProps {
-    doc: Document | null;
-    elements: Array<RefObject<HTMLElement> | HTMLElement | null>;
+    enabled?: boolean;
+    ref: RefObject<HTMLElement>;
+    elements?: Array<RefObject<HTMLElement> | HTMLElement | null>;
 }
@@ -6,0 +7,0 @@ /**

dist/types/use-outside-click.d.ts

 import { RefObject } from "react";
 export interface UseOutsideClickProps {
+    /**
+     * The reference to a DOM element.
+     */
     ref: RefObject<HTMLElement>;
+    /**
+     * Function invoked when a click is triggered outside the referenced element.
+     */
     handler?: (e: Event) => void;
@@ -5,0 +11,0 @@ }

dist/types/use-pointer-event.d.ts

@@ -6,3 +6,4 @@ /**
 import { EventListenerWithPointInfo } from "@chakra-ui/utils";
-export declare function usePointerEvent(env: Document | HTMLElement | null, eventName: string, handler: EventListenerWithPointInfo, options?: AddEventListenerOptions): () => void;
+import { EventListenerEnv } from "./use-event-listener";
+export declare function usePointerEvent(env: EventListenerEnv, eventName: string, handler: EventListenerWithPointInfo, options?: AddEventListenerOptions): () => void;
 //# sourceMappingURL=use-pointer-event.d.ts.map

package.json

 {
   "name": "@chakra-ui/hooks",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "React hooks for Chakra components",
@@ -54,3 +54,3 @@ "keywords": [
     "@chakra-ui/react-utils": "1.1.1",
-    "@chakra-ui/utils": "1.5.1",
+    "@chakra-ui/utils": "1.5.2",
     "compute-scroll-into-view": "1.0.14",
@@ -57,0 +57,0 @@ "copy-to-clipboard": "3.3.1"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

240412

increased by1.21%

Lines of code

2355

increased by0.64%

Dependency changes

• + Added@chakra-ui/utils@1.5.2(transitive)

• - Removed@chakra-ui/utils@1.5.1(transitive)

• Updated@chakra-ui/utils@1.5.2