banhaten 0.4.0 → 0.5.0

package/registry/hooks/use-direction.ts

@@ -1,207 +1,207 @@
-"use client"
-
-import * as React from "react"
-
-export type Direction = "ltr" | "rtl"
-
-type DirectionStore = {
-  listeners: Set<() => void>
-  observer?: MutationObserver
-}
-
-const DirectionContext = React.createContext<Direction | undefined>(undefined)
-const directionStores = new WeakMap<Document, DirectionStore>()
-const noop = () => undefined
-
-export type DirectionProviderProps = {
-  children: React.ReactNode
-  dir: Direction
-}
-
-export function DirectionProvider({
-  children,
-  dir,
-}: DirectionProviderProps) {
-  return React.createElement(DirectionContext.Provider, { value: dir }, children)
-}
-
-export function resolveDirection(
-  explicitDirection?: Direction,
-  element?: Element | null
-): Direction {
-  if (explicitDirection) return explicitDirection
-
-  let ancestor = element?.parentElement
-  while (ancestor) {
-    const inheritedDirection = normalizeDirection(ancestor.getAttribute("dir"))
-    if (inheritedDirection) return inheritedDirection
-    ancestor = ancestor.parentElement
-  }
-
-  const ownerDocument = element?.ownerDocument ?? getBrowserDocument()
-  const documentDirection = normalizeDirection(
-    ownerDocument?.documentElement.getAttribute("dir")
-  )
-
-  return documentDirection ?? "ltr"
-}
-
-export function useResolvedDirection<T extends Element>(
-  explicitDirection: Direction | undefined,
-  elementRef: React.RefObject<T | null>
-) {
-  const contextDirection = React.useContext(DirectionContext)
-  const preferredDirection = explicitDirection ?? contextDirection
-
-  const subscribe = React.useCallback(
-    (listener: () => void) => {
-      if (preferredDirection) return noop
-
-      const ownerDocument =
-        elementRef.current?.ownerDocument ?? getBrowserDocument()
-
-      return ownerDocument
-        ? subscribeToDirectionChanges(ownerDocument, listener)
-        : noop
-    },
-    [elementRef, preferredDirection]
-  )
-  const getSnapshot = React.useCallback(
-    () => resolveDirection(preferredDirection, elementRef.current),
-    [elementRef, preferredDirection]
-  )
-  const getServerSnapshot = React.useCallback(
-    () => preferredDirection ?? "ltr",
-    [preferredDirection]
-  )
-
-  return React.useSyncExternalStore(
-    subscribe,
-    getSnapshot,
-    getServerSnapshot
-  )
-}
-
-export function useDirection(defaultDirection?: Direction) {
-  const contextDirection = React.useContext(DirectionContext)
-  const preferredDirection = defaultDirection ?? contextDirection
-  const observedDirection = useDocumentDirection(preferredDirection)
-  const observedDirectionRef = React.useRef(observedDirection)
-  const [directionOverride, setDirectionOverride] = React.useState<
-    Direction | undefined
-  >(undefined)
-
-  observedDirectionRef.current = observedDirection
-
-  const setDirection = React.useCallback<
-    React.Dispatch<React.SetStateAction<Direction>>
-  >((nextDirection) => {
-    setDirectionOverride((currentDirection) => {
-      const selectedDirection =
-        currentDirection ?? observedDirectionRef.current
-
-      return typeof nextDirection === "function"
-        ? nextDirection(selectedDirection)
-        : nextDirection
-    })
-  }, [])
-
-  React.useEffect(() => {
-    if (defaultDirection === undefined && contextDirection) {
-      setDirectionOverride(contextDirection)
-    }
-  }, [contextDirection, defaultDirection])
-
-  return [directionOverride ?? observedDirection, setDirection] as const
-}
-
-function useDocumentDirection(preferredDirection?: Direction) {
-  const subscribe = React.useCallback(
-    (listener: () => void) => {
-      if (preferredDirection) return noop
-
-      const ownerDocument = getBrowserDocument()
-      return ownerDocument
-        ? subscribeToDirectionChanges(ownerDocument, listener)
-        : noop
-    },
-    [preferredDirection]
-  )
-  const getSnapshot = React.useCallback(
-    () => resolveDirection(preferredDirection),
-    [preferredDirection]
-  )
-  const getServerSnapshot = React.useCallback(
-    () => preferredDirection ?? "ltr",
-    [preferredDirection]
-  )
-
-  return React.useSyncExternalStore(
-    subscribe,
-    getSnapshot,
-    getServerSnapshot
-  )
-}
-
-function subscribeToDirectionChanges(
-  ownerDocument: Document,
-  listener: () => void
-) {
-  const store = getDirectionStore(ownerDocument)
-  store.listeners.add(listener)
-
-  if (store.listeners.size === 1) {
-    startDirectionObserver(ownerDocument, store)
-  }
-
-  return () => {
-    store.listeners.delete(listener)
-
-    if (store.listeners.size === 0) {
-      store.observer?.disconnect()
-      store.observer = undefined
-    }
-  }
-}
-
-function getDirectionStore(ownerDocument: Document) {
-  const existingStore = directionStores.get(ownerDocument)
-  if (existingStore) return existingStore
-
-  const store: DirectionStore = { listeners: new Set() }
-  directionStores.set(ownerDocument, store)
-  return store
-}
-
-function startDirectionObserver(
-  ownerDocument: Document,
-  store: DirectionStore
-) {
-  const MutationObserverConstructor =
-    ownerDocument.defaultView?.MutationObserver
-  const directionRoot = ownerDocument.documentElement
-
-  if (!MutationObserverConstructor || !directionRoot) return
-
-  store.observer = new MutationObserverConstructor(() => {
-    for (const listener of [...store.listeners]) {
-      listener()
-    }
-  })
-  store.observer.observe(directionRoot, {
-    attributeFilter: ["dir"],
-    attributes: true,
-    subtree: true,
-  })
-}
-
-function getBrowserDocument() {
-  return typeof document === "undefined" ? undefined : document
-}
-
-function normalizeDirection(value?: string | null): Direction | undefined {
-  const normalizedValue = value?.trim().toLowerCase()
-  return normalizedValue === "ltr" || normalizedValue === "rtl"
-    ? normalizedValue
-    : undefined
-}
+"use client"
+
+import * as React from "react"
+
+export type Direction = "ltr" | "rtl"
+
+type DirectionStore = {
+  listeners: Set<() => void>
+  observer?: MutationObserver
+}
+
+const DirectionContext = React.createContext<Direction | undefined>(undefined)
+const directionStores = new WeakMap<Document, DirectionStore>()
+const noop = () => undefined
+
+export type DirectionProviderProps = {
+  children: React.ReactNode
+  dir: Direction
+}
+
+export function DirectionProvider({
+  children,
+  dir,
+}: DirectionProviderProps) {
+  return React.createElement(DirectionContext.Provider, { value: dir }, children)
+}
+
+export function resolveDirection(
+  explicitDirection?: Direction,
+  element?: Element | null
+): Direction {
+  if (explicitDirection) return explicitDirection
+
+  let ancestor = element?.parentElement
+  while (ancestor) {
+    const inheritedDirection = normalizeDirection(ancestor.getAttribute("dir"))
+    if (inheritedDirection) return inheritedDirection
+    ancestor = ancestor.parentElement
+  }
+
+  const ownerDocument = element?.ownerDocument ?? getBrowserDocument()
+  const documentDirection = normalizeDirection(
+    ownerDocument?.documentElement.getAttribute("dir")
+  )
+
+  return documentDirection ?? "ltr"
+}
+
+export function useResolvedDirection<T extends Element>(
+  explicitDirection: Direction | undefined,
+  elementRef: React.RefObject<T | null>
+) {
+  const contextDirection = React.useContext(DirectionContext)
+  const preferredDirection = explicitDirection ?? contextDirection
+
+  const subscribe = React.useCallback(
+    (listener: () => void) => {
+      if (preferredDirection) return noop
+
+      const ownerDocument =
+        elementRef.current?.ownerDocument ?? getBrowserDocument()
+
+      return ownerDocument
+        ? subscribeToDirectionChanges(ownerDocument, listener)
+        : noop
+    },
+    [elementRef, preferredDirection]
+  )
+  const getSnapshot = React.useCallback(
+    () => resolveDirection(preferredDirection, elementRef.current),
+    [elementRef, preferredDirection]
+  )
+  const getServerSnapshot = React.useCallback(
+    () => preferredDirection ?? "ltr",
+    [preferredDirection]
+  )
+
+  return React.useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  )
+}
+
+export function useDirection(defaultDirection?: Direction) {
+  const contextDirection = React.useContext(DirectionContext)
+  const preferredDirection = defaultDirection ?? contextDirection
+  const observedDirection = useDocumentDirection(preferredDirection)
+  const observedDirectionRef = React.useRef(observedDirection)
+  const [directionOverride, setDirectionOverride] = React.useState<
+    Direction | undefined
+  >(undefined)
+
+  observedDirectionRef.current = observedDirection
+
+  const setDirection = React.useCallback<
+    React.Dispatch<React.SetStateAction<Direction>>
+  >((nextDirection) => {
+    setDirectionOverride((currentDirection) => {
+      const selectedDirection =
+        currentDirection ?? observedDirectionRef.current
+
+      return typeof nextDirection === "function"
+        ? nextDirection(selectedDirection)
+        : nextDirection
+    })
+  }, [])
+
+  React.useEffect(() => {
+    if (defaultDirection === undefined && contextDirection) {
+      setDirectionOverride(contextDirection)
+    }
+  }, [contextDirection, defaultDirection])
+
+  return [directionOverride ?? observedDirection, setDirection] as const
+}
+
+function useDocumentDirection(preferredDirection?: Direction) {
+  const subscribe = React.useCallback(
+    (listener: () => void) => {
+      if (preferredDirection) return noop
+
+      const ownerDocument = getBrowserDocument()
+      return ownerDocument
+        ? subscribeToDirectionChanges(ownerDocument, listener)
+        : noop
+    },
+    [preferredDirection]
+  )
+  const getSnapshot = React.useCallback(
+    () => resolveDirection(preferredDirection),
+    [preferredDirection]
+  )
+  const getServerSnapshot = React.useCallback(
+    () => preferredDirection ?? "ltr",
+    [preferredDirection]
+  )
+
+  return React.useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  )
+}
+
+function subscribeToDirectionChanges(
+  ownerDocument: Document,
+  listener: () => void
+) {
+  const store = getDirectionStore(ownerDocument)
+  store.listeners.add(listener)
+
+  if (store.listeners.size === 1) {
+    startDirectionObserver(ownerDocument, store)
+  }
+
+  return () => {
+    store.listeners.delete(listener)
+
+    if (store.listeners.size === 0) {
+      store.observer?.disconnect()
+      store.observer = undefined
+    }
+  }
+}
+
+function getDirectionStore(ownerDocument: Document) {
+  const existingStore = directionStores.get(ownerDocument)
+  if (existingStore) return existingStore
+
+  const store: DirectionStore = { listeners: new Set() }
+  directionStores.set(ownerDocument, store)
+  return store
+}
+
+function startDirectionObserver(
+  ownerDocument: Document,
+  store: DirectionStore
+) {
+  const MutationObserverConstructor =
+    ownerDocument.defaultView?.MutationObserver
+  const directionRoot = ownerDocument.documentElement
+
+  if (!MutationObserverConstructor || !directionRoot) return
+
+  store.observer = new MutationObserverConstructor(() => {
+    for (const listener of [...store.listeners]) {
+      listener()
+    }
+  })
+  store.observer.observe(directionRoot, {
+    attributeFilter: ["dir"],
+    attributes: true,
+    subtree: true,
+  })
+}
+
+function getBrowserDocument() {
+  return typeof document === "undefined" ? undefined : document
+}
+
+function normalizeDirection(value?: string | null): Direction | undefined {
+  const normalizedValue = value?.trim().toLowerCase()
+  return normalizedValue === "ltr" || normalizedValue === "rtl"
+    ? normalizedValue
+    : undefined
+}

package/registry/hooks/use-listbox-navigation.ts

@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+
+/**
+ * Active-option state for a listbox that a text field drives through
+ * `aria-activedescendant`. Arrow moves wrap and skip disabled options; the
+ * active option stays put while it remains valid and otherwise falls back to
+ * the first enabled one, so filtering never strands it.
+ */
+export function useListboxNavigation<T>({
+  idPrefix,
+  isDisabled,
+  open,
+  options,
+}: {
+  idPrefix: string
+  isDisabled?: (option: T) => boolean
+  open: boolean
+  options: readonly T[]
+}) {
+  const [activeIndex, setActiveIndex] = React.useState(-1)
+  const isDisabledRef = React.useRef(isDisabled)
+  isDisabledRef.current = isDisabled
+
+  const enabledIndexes = () =>
+    options.flatMap((option, index) =>
+      isDisabledRef.current?.(option) ? [] : [index]
+    )
+
+  React.useEffect(() => {
+    if (!open) {
+      setActiveIndex(-1)
+      return
+    }
+    setActiveIndex((current) => {
+      const enabled = options.flatMap((option, index) =>
+        isDisabledRef.current?.(option) ? [] : [index]
+      )
+      return enabled.includes(current) ? current : enabled[0] ?? -1
+    })
+  }, [open, options])
+
+  /** Moves by one enabled option, wrapping at either end. */
+  const move = (offset: 1 | -1) => {
+    const enabled = enabledIndexes()
+    setActiveIndex((current) => {
+      if (enabled.length === 0) return -1
+      const position = enabled.indexOf(current)
+      if (position === -1) return offset > 0 ? enabled[0] : enabled[enabled.length - 1]
+      return enabled[(position + offset + enabled.length) % enabled.length]
+    })
+  }
+
+  /** Jumps to the first or last enabled option. */
+  const moveToEdge = (edge: "first" | "last") => {
+    const enabled = enabledIndexes()
+    setActiveIndex((edge === "first" ? enabled[0] : enabled[enabled.length - 1]) ?? -1)
+  }
+
+  const optionId = (index: number) => `${idPrefix}-option-${index}`
+  const current =
+    open && activeIndex >= 0 && activeIndex < options.length ? activeIndex : -1
+
+  return {
+    activeIndex: current,
+    activeOptionId: current >= 0 ? optionId(current) : undefined,
+    move,
+    moveToEdge,
+    optionId,
+    setActiveIndex,
+  }
+}

package/registry/hooks/use-motion-end.ts

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+
+/**
+ * Calls `done` once the CSS animations and transitions running on `element`
+ * have finished, so script timing follows the stylesheet and its motion
+ * tokens instead of copying their values. When nothing is running (styles
+ * missing, `animation: none`, or no Web Animations support) it calls `done`
+ * right away. Returns a function that cancels the pending call.
+ */
+export function waitForMotion(element: Element, done: () => void) {
+  let pending = true
+  const running =
+    typeof element.getAnimations === "function"
+      ? element
+          .getAnimations()
+          .filter(
+            (animation) => animation.effect?.getTiming().iterations !== Infinity
+          )
+      : []
+
+  if (running.length === 0) {
+    done()
+  } else {
+    void Promise.allSettled(running.map((animation) => animation.finished)).then(
+      () => {
+        if (pending) done()
+      }
+    )
+  }
+
+  return () => {
+    pending = false
+  }
+}
+
+/**
+ * Calls `onDone` after the motion that turning `active` on starts on the
+ * element in `ref`, for example an exit animation before unmounting.
+ */
+export function useMotionEnd(
+  ref: React.RefObject<Element | null>,
+  active: boolean,
+  onDone: () => void
+) {
+  const onDoneRef = React.useRef(onDone)
+  onDoneRef.current = onDone
+
+  React.useLayoutEffect(() => {
+    const element = ref.current
+    if (!active || !element) return
+    return waitForMotion(element, () => onDoneRef.current())
+  }, [active, ref])
+}

package/registry/hooks/use-reduced-motion.ts

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+
+const query = "(prefers-reduced-motion: reduce)"
+
+function canMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function"
+}
+
+function subscribe(onChange: () => void) {
+  if (!canMatchMedia()) return () => undefined
+  const media = window.matchMedia(query)
+  media.addEventListener?.("change", onChange)
+  return () => media.removeEventListener?.("change", onChange)
+}
+
+function getSnapshot() {
+  return canMatchMedia() && window.matchMedia(query).matches
+}
+
+/**
+ * Whether the user asked for reduced motion. Re-renders when that setting
+ * changes, and reads false where it cannot be queried (server, tests).
+ */
+export function useReducedMotion() {
+  return React.useSyncExternalStore(subscribe, getSnapshot, () => false)
+}