feat: Sync VueUse

meta/index.json

@@ -360,7 +360,7 @@
       "lastUpdated": 1681642048000,
       "docs": "https://solidjs-use.github.io/solidjs-use/core/onKeyStroke/",
       "category": "Sensors",
-      "description": "listen for keyboard key being stroked"
+      "description": "listen for keyboard keystrokes"
     },
     {
       "name": "onLongPress",
@@ -1008,7 +1008,7 @@
     {
       "name": "useEventListener",
       "package": "core",
-      "lastUpdated": 1681642048000,
+      "lastUpdated": 1690083115000,
       "docs": "https://solidjs-use.github.io/solidjs-use/core/useEventListener/",
       "category": "Browser",
       "description": "use EventListener with ease"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs-use/monorepo",
   "version": "2.2.1",
-  "vueuse-git-commit-id": "4f4141ad3ce9bbb86dbf57c57ceb3792a28ffdd6",
+  "vueuse-git-commit-id": "028a732333ea6792a984f39c18f1fdad8b0587bd",
   "private": true,
   "packageManager": "pnpm@8.3.1",
   "description": "Collection of SolidJS utilities inspired completely by VueUse",
@@ -70,7 +70,6 @@
     "vite": "^4.3.4",
     "vite-plugin-solid": "^2.7.0"
   },
-  "prettier": "@giveerr/prettier-config",
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   }

packages/core/src/onClickOutside/index.ts

@@ -1,8 +1,8 @@
-import { toValue, isIOS, noop } from '@solidjs-use/shared'
-import { useEventListener } from '../useEventListener'
-import { defaultWindow } from '../_configurable'
-import type { Fn, MaybeElementAccessor } from '@solidjs-use/shared'
-import type { ConfigurableWindow } from '../_configurable'
+import { toValue, isIOS, noop } from "@solidjs-use/shared"
+import { useEventListener } from "../useEventListener"
+import { defaultWindow } from "../_configurable"
+import type { Fn, MaybeElementAccessor } from "@solidjs-use/shared"
+import type { ConfigurableWindow } from "../_configurable"
 
 export interface OnClickOutsideOptions extends ConfigurableWindow {
   /**
@@ -22,8 +22,8 @@ export interface OnClickOutsideOptions extends ConfigurableWindow {
 }
 
 export type OnClickOutsideHandler<
-  T extends { detectIframe: OnClickOutsideOptions['detectIframe'] } = { detectIframe: false }
-> = (evt: T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void
+  T extends { detectIframe: OnClickOutsideOptions["detectIframe"] } = { detectIframe: false }
+> = (evt: T["detectIframe"] extends true ? PointerEvent | FocusEvent : PointerEvent) => void
 
 let _iOSWorkaround = false
 
@@ -34,7 +34,7 @@ let _iOSWorkaround = false
  */
 export function onClickOutside<T extends OnClickOutsideOptions>(
   target: MaybeElementAccessor,
-  handler: OnClickOutsideHandler<{ detectIframe: T['detectIframe'] }>,
+  handler: OnClickOutsideHandler<{ detectIframe: T["detectIframe"] }>,
   options: T = {} as T
 ) {
   const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options
@@ -45,14 +45,15 @@ export function onClickOutside<T extends OnClickOutsideOptions>(
   // How it works: https://stackoverflow.com/a/39712411
   if (isIOS && !_iOSWorkaround) {
     _iOSWorkaround = true
-    Array.from(window.document.body.children).forEach(el => el.addEventListener('click', noop))
+    Array.from(window.document.body.children).forEach(el => el.addEventListener("click", noop))
+    window.document.documentElement.addEventListener("click", noop)
   }
 
   let shouldListen = true
 
   const shouldIgnore = (event: PointerEvent) => {
     return ignore.some(target => {
-      if (typeof target === 'string') {
+      if (typeof target === "string") {
         return Array.from(window.document.querySelectorAll(target)).some(
           el => el === event.target || event.composedPath().includes(el)
         )
@@ -78,21 +79,24 @@ export function onClickOutside<T extends OnClickOutsideOptions>(
   }
 
   const cleanup = [
-    useEventListener(window, 'click', listener, { passive: true, capture }),
+    useEventListener(window, "click", listener, { passive: true, capture }),
     useEventListener(
       window,
-      'pointerdown',
+      "pointerdown",
       e => {
         const el = toValue(target)
         if (el) shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e)
       },
       { passive: true }
     ),
     detectIframe &&
-      useEventListener(window, 'blur', event => {
+      useEventListener(window, "blur", event => {
         setTimeout(() => {
           const el = toValue(target)
-          if (window.document.activeElement?.tagName === 'IFRAME' && !el?.contains(window.document.activeElement))
+          if (
+            window.document.activeElement?.tagName === "IFRAME" &&
+            !el?.contains(window.document.activeElement)
+          )
             handler(event as any)
         }, 0)
       })

packages/core/src/onKeyStroke/index.md

@@ -4,14 +4,14 @@ category: Sensors
 
 # onKeyStroke
 
-Listen for keyboard key being stroked.
+Listen for keyboard keystrokes.
 
 ## Usage
 
 ```js
-import { onKeyStroke } from 'solidjs-use'
+import { onKeyStroke } from "solidjs-use"
 
-onKeyStroke('ArrowDown', e => {
+onKeyStroke("ArrowDown", e => {
   e.preventDefault()
 })
 ```
@@ -21,9 +21,9 @@ See [this table](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/
 ### Listen To Multiple Keys
 
 ```js
-import { onKeyStroke } from 'solidjs-use'
+import { onKeyStroke } from "solidjs-use"
 
-onKeyStroke(['s', 'S', 'ArrowDown'], e => {
+onKeyStroke(["s", "S", "ArrowDown"], e => {
   e.preventDefault()
 })
 
@@ -40,9 +40,9 @@ onKeyStroke(e => {
 
 ```js
 onKeyStroke(
-  'A',
+  "A",
   e => {
-    console.log('Key A pressed on document')
+    console.log("Key A pressed on document")
   },
   { target: document }
 )
@@ -53,13 +53,13 @@ onKeyStroke(
 The callback will trigger only once when pressing `A` and **hold down**.
 
 ```js
-import { onKeyStroke } from 'solidjs-use'
+import { onKeyStroke } from "solidjs-use"
 
 // use `autoRepeat` option
 onKeyStroke(
-  'A',
+  "A",
   e => {
-    console.log('Key A pressed')
+    console.log("Key A pressed")
   },
   { dedupe: false }
 )
@@ -71,18 +71,18 @@ Reference: [KeyboardEvent.repeat](https://developer.mozilla.org/en-US/docs/Web/A
 
 ```js
 onKeyStroke(
-  'Shift',
+  "Shift",
   e => {
-    console.log('Shift key up')
+    console.log("Shift key up")
   },
-  { eventName: 'keyup' }
+  { eventName: "keyup" }
 )
 ```
 
 Or
 
 ```js
-onKeyUp('Shift', () => console.log('Shift key up'))
+onKeyUp("Shift", () => console.log("Shift key up"))
 ```
 
 ## Shorthands

packages/core/src/onKeyStroke/index.ts

@@ -1,11 +1,11 @@
-import { toValue } from '@solidjs-use/shared'
-import { useEventListener } from '../useEventListener'
-import { defaultWindow } from '../_configurable'
-import type { MaybeAccessor } from '@solidjs-use/shared'
+import { toValue } from "@solidjs-use/shared"
+import { useEventListener } from "../useEventListener"
+import { defaultWindow } from "../_configurable"
+import type { MaybeAccessor } from "@solidjs-use/shared"
 
 export type KeyPredicate = (event: KeyboardEvent) => boolean
 export type KeyFilter = true | string | string[] | KeyPredicate
-export type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup'
+export type KeyStrokeEventName = "keydown" | "keypress" | "keyup"
 export interface OnKeyStrokeOptions {
   eventName?: KeyStrokeEventName
   target?: MaybeAccessor<EventTarget | null | undefined>
@@ -19,8 +19,8 @@ export interface OnKeyStrokeOptions {
 }
 
 function createKeyPredicate(keyFilter: KeyFilter): KeyPredicate {
-  if (typeof keyFilter === 'function') return keyFilter
-  else if (typeof keyFilter === 'string') return (event: KeyboardEvent) => event.key === keyFilter
+  if (typeof keyFilter === "function") return keyFilter
+  else if (typeof keyFilter === "string") return (event: KeyboardEvent) => event.key === keyFilter
   else if (Array.isArray(keyFilter)) return (event: KeyboardEvent) => keyFilter.includes(event.key)
 
   return () => true
@@ -31,17 +31,23 @@ export function onKeyStroke(
   handler: (event: KeyboardEvent) => void,
   options?: OnKeyStrokeOptions
 ): () => void
-export function onKeyStroke(handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void
+export function onKeyStroke(
+  handler: (event: KeyboardEvent) => void,
+  options?: OnKeyStrokeOptions
+): () => void
 
 /**
- * Listen for keyboard keys being stroked.
+ * Listen for keyboard keystrokes.
  */
 export function onKeyStroke(
   key: KeyFilter,
   handler: (event: KeyboardEvent) => void,
   options?: OnKeyStrokeOptions
 ): () => void
-export function onKeyStroke(handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void
+export function onKeyStroke(
+  handler: (event: KeyboardEvent) => void,
+  options?: OnKeyStrokeOptions
+): () => void
 export function onKeyStroke(...args: any[]) {
   let key: KeyFilter
   let handler: (event: KeyboardEvent) => void
@@ -52,7 +58,7 @@ export function onKeyStroke(...args: any[]) {
     handler = args[1]
     options = args[2]
   } else if (args.length === 2) {
-    if (typeof args[1] === 'object') {
+    if (typeof args[1] === "object") {
       key = true
       handler = args[0]
       options = args[1]
@@ -65,7 +71,7 @@ export function onKeyStroke(...args: any[]) {
     handler = args[0]
   }
 
-  const { target = defaultWindow, eventName = 'keydown', passive = false, dedupe = false } = options
+  const { target = defaultWindow, eventName = "keydown", passive = false, dedupe = false } = options
   const predicate = createKeyPredicate(key)
   const listener = (e: KeyboardEvent) => {
     if (e.repeat && toValue(dedupe)) return
@@ -84,9 +90,9 @@ export function onKeyStroke(...args: any[]) {
 export function onKeyDown(
   key: KeyFilter,
   handler: (event: KeyboardEvent) => void,
-  options: Omit<OnKeyStrokeOptions, 'eventName'> = {}
+  options: Omit<OnKeyStrokeOptions, "eventName"> = {}
 ) {
-  return onKeyStroke(key, handler, { ...options, eventName: 'keydown' })
+  return onKeyStroke(key, handler, { ...options, eventName: "keydown" })
 }
 
 /**
@@ -95,9 +101,9 @@ export function onKeyDown(
 export function onKeyPressed(
   key: KeyFilter,
   handler: (event: KeyboardEvent) => void,
-  options: Omit<OnKeyStrokeOptions, 'eventName'> = {}
+  options: Omit<OnKeyStrokeOptions, "eventName"> = {}
 ) {
-  return onKeyStroke(key, handler, { ...options, eventName: 'keypress' })
+  return onKeyStroke(key, handler, { ...options, eventName: "keypress" })
 }
 
 /**
@@ -106,7 +112,7 @@ export function onKeyPressed(
 export function onKeyUp(
   key: KeyFilter,
   handler: (event: KeyboardEvent) => void,
-  options: Omit<OnKeyStrokeOptions, 'eventName'> = {}
+  options: Omit<OnKeyStrokeOptions, "eventName"> = {}
 ) {
-  return onKeyStroke(key, handler, { ...options, eventName: 'keyup' })
+  return onKeyStroke(key, handler, { ...options, eventName: "keyup" })
 }

packages/core/src/onLongPress/index.ts

@@ -1,6 +1,6 @@
-import { toAccessor } from '@solidjs-use/shared'
-import { useEventListener } from '../useEventListener'
-import type { MaybeElementAccessor } from '@solidjs-use/shared'
+import { toAccessor } from "@solidjs-use/shared"
+import { useEventListener } from "../useEventListener"
+import type { MaybeElementAccessor } from "@solidjs-use/shared"
 
 const DEFAULT_DELAY = 500
 
@@ -61,7 +61,6 @@ export function onLongPress(
     once: options?.modifiers?.once
   }
 
-  useEventListener(elementRef, 'pointerdown', onDown, listenerOptions)
-  useEventListener(elementRef, 'pointerup', clear, listenerOptions)
-  useEventListener(elementRef, 'pointerleave', clear, listenerOptions)
+  useEventListener(elementRef, "pointerdown", onDown, listenerOptions)
+  useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions)
 }

packages/core/src/useActiveElement/index.ts

@@ -1,26 +1,43 @@
-import { createSignal } from 'solid-js'
-import { useEventListener } from '../useEventListener'
-import { defaultWindow } from '../_configurable'
-import type { ConfigurableWindow, ConfigurableDocumentOrShadowRoot } from '../_configurable'
+import { createSignal } from "solid-js"
+import { useEventListener } from "../useEventListener"
+import { defaultWindow } from "../_configurable"
+import type { ConfigurableWindow, ConfigurableDocumentOrShadowRoot } from "../_configurable"
 
-export interface UseActiveElementOptions extends ConfigurableWindow, ConfigurableDocumentOrShadowRoot {}
+export interface UseActiveElementOptions
+  extends ConfigurableWindow,
+    ConfigurableDocumentOrShadowRoot {
+  /**
+   * Search active element deeply inside shadow dom
+   *
+   * @default true
+   */
+  deep?: boolean
+}
 
 /**
  * Reactive `document.activeElement`
  *
  * @see https://solidjs-use.github.io/solidjs-use/core/useActiveElement
  */
 export function useActiveElement<T extends HTMLElement>(options: UseActiveElementOptions = {}) {
-  const { window = defaultWindow } = options
+  const { window = defaultWindow, deep = true } = options
   const document = options.document ?? window?.document
+  const getDeepActiveElement = () => {
+    let element = document?.activeElement
+    if (deep) {
+      while (element?.shadowRoot) element = element?.shadowRoot?.activeElement
+    }
+    return element
+  }
+
   const [activeElement, setActiveElement] = createSignal<T | null | undefined>(
-    document?.activeElement as T | null | undefined
+    getDeepActiveElement() as T | null | undefined
   )
 
   if (window) {
     useEventListener(
       window,
-      'blur',
+      "blur",
       event => {
         if (event.relatedTarget !== null) return
 
@@ -30,7 +47,7 @@ export function useActiveElement<T extends HTMLElement>(options: UseActiveElemen
     )
     useEventListener(
       window,
-      'focus',
+      "focus",
       () => {
         setActiveElement(() => document?.activeElement as T)
       },