@sanity/ui - npm Package Compare versions

Comparing version 2.7.1-canary.1 to 2.7.1-canary.2

package.json

 {
   "name": "@sanity/ui",
-  "version": "2.7.1-canary.1",
+  "version": "2.7.1-canary.2",
   "keywords": [
@@ -119,2 +119,3 @@ "sanity",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
@@ -130,3 +131,3 @@ "@types/jest-axe": "^3.5.9",
     "commitizen": "^4.3.0",
-    "cypress": "^13.13.0",
+    "cypress": "^13.13.1",
     "cypress-real-events": "^1.13.0",
@@ -133,0 +134,0 @@ "cz-conventional-changelog": "^3.3.0",

src/core/components/menu/menuContext.ts

@@ -8,3 +8,3 @@ import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void
+  onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
@@ -11,0 +11,0 @@ onItemClick?: () => void

src/core/hooks/useClickOutside.ts

@@ -8,8 +8,13 @@ import {useEffect, useState} from 'react'
  */
-export type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
+export type ClickOutsideListener = (event: MouseEvent) => void
 
 /**
  * @public
- * @deprecated -- do not use
  */
+export type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
+
+/**
+ * @public
+ * @deprecated - use your own `const [element, setElement] = useState(null)` logic instead
+ */
 export type UseClickOutsideSetElement = (el: HTMLElement | null) => void
@@ -21,9 +26,26 @@
 export function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg: () => (HTMLElement | HTMLElement[] | null)[],
-  boundaryElement?: HTMLElement | null,
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: () => ClickOutsideElements,
+  boundaryElement?: () => HTMLElement | null,
 ): void
-
 /**
  * @public
+ * @deprecated - change `useClickOutside(handler, () => [...], boundary)` to `useClickOutside(handler, () => [...], () => boundary)`
+ */
+export function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: () => ClickOutsideElements,
+  boundaryElement: HTMLElement | null,
+): void
+/**
+ * @public
+ * @deprecated - change `useClickOutside(handler, [...], () => boundary)` to `useClickOutside(handler, () => [...], () => boundary)`
+ */
+export function useClickOutside(
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
+  boundaryElement: () => HTMLElement | null,
+): UseClickOutsideSetElement
+/**
+ * @public
  * @deprecated
@@ -55,4 +77,4 @@ * Instead of:
 export function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg: (HTMLElement | HTMLElement[] | null)[],
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements,
   boundaryElement?: HTMLElement | null,
@@ -65,7 +87,5 @@ ): UseClickOutsideSetElement
 export function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg:
-    | (HTMLElement | HTMLElement[] | null)[]
-    | (() => (HTMLElement | HTMLElement[] | null)[]) = EMPTY_ARRAY,
-  boundaryElement?: HTMLElement | null,
+  listener: ClickOutsideListener | false | undefined,
+  elementsArg: ClickOutsideElements | (() => ClickOutsideElements) = EMPTY_ARRAY,
+  boundaryElement?: HTMLElement | null | (() => HTMLElement | null),
 ): UseClickOutsideSetElement | void {
@@ -79,3 +99,7 @@ /** @deprecated */
    */
-  const onEvent = useEffectEvent((evt: MouseEvent | TouchEvent) => {
+  const onEvent = useEffectEvent((evt: MouseEvent) => {
+    if (!listener) {
+      return
+    }
+
     const target = evt.target
@@ -87,3 +111,5 @@
 
-    if (boundaryElement && !boundaryElement.contains(target)) {
+    const resolvedBoundaryElement =
+      typeof boundaryElement === 'function' ? boundaryElement() : boundaryElement
+    if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) {
       return
@@ -113,10 +139,8 @@ }
 
-    const handleEvent = (evt: MouseEvent | TouchEvent) => onEvent(evt)
+    const handleEvent = (evt: MouseEvent) => onEvent(evt)
 
     document.addEventListener('mousedown', handleEvent)
-    document.addEventListener('touchstart', handleEvent)
 
     return () => {
       document.removeEventListener('mousedown', handleEvent)
-      document.removeEventListener('touchstart', handleEvent)
     }
@@ -123,0 +147,0 @@ }, [hasListener, onEvent])

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

4547196

increased by0.49%

Lines of code

63570

increased by0.74%

Worsened metrics

Dev dependency count

74

increased by1.37%

No dependency changes