@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/hooks/keyboard.tsx

@@ -1,128 +1,128 @@
-import { useCallback, useEffect, useRef } from 'react'
-
-interface Options<T extends HTMLElement = HTMLDivElement> {
-  /**
-   * A query selector that returns every html element that must be navigable through the keyboard.
-   */
-  querySelectors: string,
-  /**
-   * Function to call when ESC is pressed. or when TAB is pressed at the last item in the list of items returned by the query selector.
-   */
-  onPressEscape?: () => void,
-  /**
-   * Function to call when TAB is pressed at the last item in the list of items returned by the query selector. Will be the same as
-   * onPressEscape if not specified.
-   * 
-   * Attention: has no effect if `disableTabBehavior` is true.
-   */
-  onPressLastTab?: () => void,
-  /**
-   * Pass this function if you want any behavior when the user presses the arrow left.
-   */
-  onPressArrowLeft?: () => void,
-  /**
-   * Pass this function if you want any behavior when the user presses the arrow right.
-   */
-  onPressArrowRight?: () => void,
-  /**
-   * Disables any alteration to the tab key.
-   * @default false
-   */
-  disableTabBehavior?: boolean,
-  /**
-   * If you already have a ref to the element you want to attach the events to, you can pass it in this prop.
-   * 
-   * If you pass a ref. The events won't be attached to the document, instead, they will be attached to the element referred by the ref.
-   */
-  ref?: React.RefObject<T>,
-}
-
-/**
- * Creates listeners for controlling a Menu UI through the keyboard.
- * - Arrow down: next element in the iterator returned by the query selectors. First element, if the current element is the last.
- * - Arrow up: previous element in the iterator returned by the query selectors. Last element, if the current element is the first.
- * - Tab: same as Arrow down, but has a different behavior if the element is the last (see onPressLastTab).
- * - Esc: determined by onPressEscape.
- * @param props {@link Options}.
- * @returns an object with the element controlled by the keyboard (useRef); a function to attach the keyboard events and a function to
- * detach the keyboard events.
- */
-export function useKeyboardControls<T extends HTMLElement = HTMLDivElement>(
-  /**
-   * Options for the keyboard controls.
-   */
-  {
-    querySelectors, onPressEscape, onPressLastTab = onPressEscape, onPressArrowLeft, onPressArrowRight, disableTabBehavior, ref,
-  }: Options<T>,
-  /**
-   * Calls `attachKeyboardListeners` (mount) and `detachKeyboardListeners` (unmount) whenever the deps passed as parameter changes.
-   * 
-   * If deps are undefined, this component doesn't automatically add these listeners and you have to use the functions returned in the
-   * result.
-   */
-  deps?: any[],
-) {
-  const localRef = useRef<T>(null)
-  const keyboardControlledElement = ref ?? localRef
-  const listeners = useRef<Pick<Options, 'onPressEscape' | 'onPressLastTab'>>({})
-  listeners.current = { onPressEscape, onPressLastTab }
-
-  const keyboardControls = useCallback((event: Event) => {
-    const eventKey = (event as KeyboardEvent).key
-    const target = event?.target as HTMLElement | null
-
-    function getSelectableAnchors() {
-      return keyboardControlledElement.current?.querySelectorAll(querySelectors) ?? []
-    }
-
-    function handleArrows(key = eventKey) {
-      const anchors = getSelectableAnchors()
-      let i = 0
-      while (i < anchors.length && document.activeElement !== anchors[i]) i++
-      const next: any = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1])
-      next?.focus?.()
-    }
-      
-    const handlers: Record<string, (() => void) | undefined> = {
-      Escape: () => {
-        listeners.current.onPressEscape?.()
-        event.stopPropagation()
-        event.preventDefault()
-      },
-      Enter: () => {
-        target?.click()
-      },
-      Tab: () => {
-        if (disableTabBehavior) return
-        const anchors = getSelectableAnchors()
-        if (document.activeElement === anchors[anchors.length - 1]) listeners.current.onPressLastTab?.()
-        else  handleArrows('ArrowDown')
-        event.preventDefault()
-      },
-      ArrowUp: handleArrows,
-      ArrowDown: handleArrows,
-      ArrowLeft: onPressArrowLeft,
-      ArrowRight: onPressArrowRight,
-    }
-
-    handlers[eventKey]?.()
-  }, [])
-
-  const attachKeyboardListeners = useCallback(() => {
-    const element = ref?.current ?? document
-    element.addEventListener('keydown', keyboardControls)
-  }, [])
-
-  const detachKeyboardListeners = useCallback(() => {
-    const element = ref?.current ?? document
-    element.removeEventListener('keydown', keyboardControls)
-  }, [])
-
-  useEffect(() => {
-    if (!deps) return
-    attachKeyboardListeners()
-    return detachKeyboardListeners
-  }, deps)
-
-  return { keyboardControlledElement, attachKeyboardListeners, detachKeyboardListeners }
-}
+import { useCallback, useEffect, useRef } from 'react'
+
+interface Options<T extends HTMLElement = HTMLDivElement> {
+  /**
+   * A query selector that returns every html element that must be navigable through the keyboard.
+   */
+  querySelectors: string,
+  /**
+   * Function to call when ESC is pressed. or when TAB is pressed at the last item in the list of items returned by the query selector.
+   */
+  onPressEscape?: () => void,
+  /**
+   * Function to call when TAB is pressed at the last item in the list of items returned by the query selector. Will be the same as
+   * onPressEscape if not specified.
+   * 
+   * Attention: has no effect if `disableTabBehavior` is true.
+   */
+  onPressLastTab?: () => void,
+  /**
+   * Pass this function if you want any behavior when the user presses the arrow left.
+   */
+  onPressArrowLeft?: () => void,
+  /**
+   * Pass this function if you want any behavior when the user presses the arrow right.
+   */
+  onPressArrowRight?: () => void,
+  /**
+   * Disables any alteration to the tab key.
+   * @default false
+   */
+  disableTabBehavior?: boolean,
+  /**
+   * If you already have a ref to the element you want to attach the events to, you can pass it in this prop.
+   * 
+   * If you pass a ref. The events won't be attached to the document, instead, they will be attached to the element referred by the ref.
+   */
+  ref?: React.RefObject<T>,
+}
+
+/**
+ * Creates listeners for controlling a Menu UI through the keyboard.
+ * - Arrow down: next element in the iterator returned by the query selectors. First element, if the current element is the last.
+ * - Arrow up: previous element in the iterator returned by the query selectors. Last element, if the current element is the first.
+ * - Tab: same as Arrow down, but has a different behavior if the element is the last (see onPressLastTab).
+ * - Esc: determined by onPressEscape.
+ * @param props {@link Options}.
+ * @returns an object with the element controlled by the keyboard (useRef); a function to attach the keyboard events and a function to
+ * detach the keyboard events.
+ */
+export function useKeyboardControls<T extends HTMLElement = HTMLDivElement>(
+  /**
+   * Options for the keyboard controls.
+   */
+  {
+    querySelectors, onPressEscape, onPressLastTab = onPressEscape, onPressArrowLeft, onPressArrowRight, disableTabBehavior, ref,
+  }: Options<T>,
+  /**
+   * Calls `attachKeyboardListeners` (mount) and `detachKeyboardListeners` (unmount) whenever the deps passed as parameter changes.
+   * 
+   * If deps are undefined, this component doesn't automatically add these listeners and you have to use the functions returned in the
+   * result.
+   */
+  deps?: any[],
+) {
+  const localRef = useRef<T>(null)
+  const keyboardControlledElement = ref ?? localRef
+  const listeners = useRef<Pick<Options, 'onPressEscape' | 'onPressLastTab'>>({})
+  listeners.current = { onPressEscape, onPressLastTab }
+
+  const keyboardControls = useCallback((event: Event) => {
+    const eventKey = (event as KeyboardEvent).key
+    const target = event?.target as HTMLElement | null
+
+    function getSelectableAnchors() {
+      return keyboardControlledElement.current?.querySelectorAll(querySelectors) ?? []
+    }
+
+    function handleArrows(key = eventKey) {
+      const anchors = getSelectableAnchors()
+      let i = 0
+      while (i < anchors.length && document.activeElement !== anchors[i]) i++
+      const next: any = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1])
+      next?.focus?.()
+    }
+      
+    const handlers: Record<string, (() => void) | undefined> = {
+      Escape: () => {
+        listeners.current.onPressEscape?.()
+        event.stopPropagation()
+        event.preventDefault()
+      },
+      Enter: () => {
+        target?.click()
+      },
+      Tab: () => {
+        if (disableTabBehavior) return
+        const anchors = getSelectableAnchors()
+        if (document.activeElement === anchors[anchors.length - 1]) listeners.current.onPressLastTab?.()
+        else  handleArrows('ArrowDown')
+        event.preventDefault()
+      },
+      ArrowUp: handleArrows,
+      ArrowDown: handleArrows,
+      ArrowLeft: onPressArrowLeft,
+      ArrowRight: onPressArrowRight,
+    }
+
+    handlers[eventKey]?.()
+  }, [])
+
+  const attachKeyboardListeners = useCallback(() => {
+    const element = ref?.current ?? document
+    element.addEventListener('keydown', keyboardControls)
+  }, [])
+
+  const detachKeyboardListeners = useCallback(() => {
+    const element = ref?.current ?? document
+    element.removeEventListener('keydown', keyboardControls)
+  }, [])
+
+  useEffect(() => {
+    if (!deps) return
+    attachKeyboardListeners()
+    return detachKeyboardListeners
+  }, deps)
+
+  return { keyboardControlledElement, attachKeyboardListeners, detachKeyboardListeners }
+}

package/src/hooks/manual-render.tsx

@@ -1,10 +1,10 @@
-import { useCallback, useState } from 'react'
-
-/**
- * Use this hook to manually trigger a re-render from React.
- * @returns an object with a function to re-render the component.
- */
-export function useManualRender() {
-  const [, setCount] = useState(0)
-  return { repaint: useCallback(() => setCount(v => v + 1), []) }
-}
+import { useCallback, useState } from 'react'
+
+/**
+ * Use this hook to manually trigger a re-render from React.
+ * @returns an object with a function to re-render the component.
+ */
+export function useManualRender() {
+  const [, setCount] = useState(0)
+  return { repaint: useCallback(() => setCount(v => v + 1), []) }
+}