@react-aria/utils

  • Version 3.29.1
  • Published
  • 766 kB
  • 6 dependencies
  • Apache-2.0 license

Install

npm i @react-aria/utils
yarn add @react-aria/utils
pnpm add @react-aria/utils

Overview

Spectrum UI components in React

Index

Variables

variable CLEAR_FOCUS_EVENT

const CLEAR_FOCUS_EVENT: string;

    variable FOCUS_EVENT

    const FOCUS_EVENT: string;

      variable isAndroid

      const isAndroid: () => boolean;

        variable isAppleDevice

        const isAppleDevice: () => boolean;

          variable isChrome

          const isChrome: () => boolean;

            variable isFirefox

            const isFirefox: () => boolean;

              variable isIOS

              const isIOS: () => boolean;

                variable isIPad

                const isIPad: () => boolean;

                  variable isIPhone

                  const isIPhone: () => boolean;

                    variable isMac

                    const isMac: () => boolean;

                      variable isWebKit

                      const isWebKit: () => boolean;

                        variable useLayoutEffect

                        const useLayoutEffect: any;

                          Functions

                          function chain

                          chain: (...callbacks: any[]) => (...args: any[]) => void;
                          • Calls all functions in the order they were chained with the same arguments.

                          function createShadowTreeWalker

                          createShadowTreeWalker: (
                          doc: Document,
                          root: Node,
                          whatToShow?: number,
                          filter?: NodeFilter | null
                          ) => TreeWalker;
                          • ShadowDOM safe version of document.createTreeWalker.

                          function filterDOMProps

                          filterDOMProps: (
                          props: DOMProps & AriaLabelingProps & LinkDOMProps,
                          opts?: Options
                          ) => DOMProps & AriaLabelingProps;
                          • Filters out all props that aren't valid DOM props or defined via override prop obj.

                            Parameter props

                            The component props to be filtered.

                            Parameter opts

                            Props to override.

                          function focusWithoutScrolling

                          focusWithoutScrolling: (element: FocusableElement) => void;

                            function getActiveElement

                            getActiveElement: (doc?: Document) => Element | null;
                            • ShadowDOM safe version of document.activeElement.

                            function getEventTarget

                            getEventTarget: <T extends Event>(event: T) => Element;
                            • ShadowDOM safe version of event.target.

                            function getOffset

                            getOffset: (
                            element: HTMLElement,
                            reverse?: boolean,
                            orientation?: Orientation
                            ) => number;

                              function getOwnerDocument

                              getOwnerDocument: (el: Element | null | undefined) => Document;

                                function getOwnerWindow

                                getOwnerWindow: (
                                el: (Window & typeof global) | Element | null | undefined
                                ) => Window & typeof global;

                                  function getScrollParent

                                  getScrollParent: (node: Element, checkForOverflow?: boolean) => Element;

                                    function getScrollParents

                                    getScrollParents: (node: Element, checkForOverflow?: boolean) => Element[];

                                      function inertValue

                                      inertValue: (value?: boolean) => string | boolean | undefined;

                                        function isFocusable

                                        isFocusable: (element: Element) => boolean;

                                          function isScrollable

                                          isScrollable: (node: Element | null, checkForOverflow?: boolean) => boolean;

                                            function isShadowRoot

                                            isShadowRoot: (node: Node | null) => node is ShadowRoot;
                                            • Type guard that checks if a node is a ShadowRoot. Uses nodeType and host property checks to distinguish ShadowRoot from other DocumentFragments.

                                            function isTabbable

                                            isTabbable: (element: Element) => boolean;

                                              function isVirtualClick

                                              isVirtualClick: (event: MouseEvent | PointerEvent) => boolean;

                                                function isVirtualPointerEvent

                                                isVirtualPointerEvent: (event: PointerEvent) => boolean;

                                                  function mergeIds

                                                  mergeIds: (idA: string, idB: string) => string;
                                                  • Merges two ids. Different ids will trigger a side-effect and re-render components hooked up with useId.

                                                  function mergeProps

                                                  mergeProps: <T extends Props[]>(
                                                  ...args: T
                                                  ) => UnionToIntersection<TupleTypes<T>>;
                                                  • Merges multiple props objects together. Event handlers are chained, classNames are combined, and ids are deduplicated - different ids will trigger a side-effect and re-render components hooked up with useId. For all other props, the last prop object overrides all previous ones.

                                                    Parameter args

                                                    Multiple sets of props to merge together.

                                                  function mergeRefs

                                                  mergeRefs: <T>(
                                                  ...refs: Array<Ref<T> | MutableRefObject<T> | null | undefined>
                                                  ) => Ref<T>;
                                                  • Merges multiple refs into one. Works with either callback or object refs.

                                                  function nodeContains

                                                  nodeContains: (
                                                  node: Node | null | undefined,
                                                  otherNode: Node | null | undefined
                                                  ) => boolean;
                                                  • ShadowDOM safe version of Node.contains.

                                                  function runAfterTransition

                                                  runAfterTransition: (fn: () => void) => void;

                                                    function scrollIntoView

                                                    scrollIntoView: (scrollView: HTMLElement, element: HTMLElement) => void;
                                                    • Scrolls scrollView so that element is visible. Similar to element.scrollIntoView({block: 'nearest'}) (not supported in Edge), but doesn't affect parents above scrollView.

                                                    function scrollIntoViewport

                                                    scrollIntoViewport: (
                                                    targetElement: Element | null,
                                                    opts?: ScrollIntoViewportOpts
                                                    ) => void;
                                                    • Scrolls the targetElement so it is visible in the viewport. Accepts an optional opts.containingElement that will be centered in the viewport prior to scrolling the targetElement into view. If scrolling is prevented on the body (e.g. targetElement is in a popover), this will only scroll the scroll parents of the targetElement up to but not including the body itself.

                                                    function UNSTABLE_useLoadMoreSentinel

                                                    UNSTABLE_useLoadMoreSentinel: (
                                                    props: LoadMoreSentinelProps,
                                                    ref: RefObject<HTMLElement>
                                                    ) => void;

                                                      function useDeepMemo

                                                      useDeepMemo: <T>(value: T, isEqual: (a: T, b: T) => boolean) => T;

                                                        function useDescription

                                                        useDescription: (description?: string) => AriaLabelingProps;

                                                          function useDrag1D

                                                          useDrag1D: (props: UseDrag1DProps) => HTMLAttributes<HTMLElement>;

                                                            function useEffectEvent

                                                            useEffectEvent: <T extends Function>(fn?: T) => T;

                                                              function useEnterAnimation

                                                              useEnterAnimation: (ref: RefObject<HTMLElement>, isReady?: boolean) => boolean;

                                                                function useEvent

                                                                useEvent: <K extends keyof GlobalEventHandlersEventMap>(
                                                                ref: RefObject<EventTarget>,
                                                                event: K | (string & {}),
                                                                handler?: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
                                                                options?: boolean | AddEventListenerOptions
                                                                ) => void;

                                                                  function useExitAnimation

                                                                  useExitAnimation: (ref: RefObject<HTMLElement>, isOpen: boolean) => boolean;

                                                                    function useFormReset

                                                                    useFormReset: <T>(
                                                                    ref:
                                                                    | RefObject<
                                                                    HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null
                                                                    >
                                                                    | undefined,
                                                                    initialValue: T,
                                                                    onReset: (value: T) => void
                                                                    ) => void;

                                                                      function useGlobalListeners

                                                                      useGlobalListeners: () => GlobalListeners;

                                                                        function useId

                                                                        useId: (defaultId?: string) => string;
                                                                        • If a default is not provided, generate an id.

                                                                          Parameter defaultId

                                                                          Default component id.

                                                                        function useLabels

                                                                        useLabels: (
                                                                        props: DOMProps & AriaLabelingProps,
                                                                        defaultLabel?: string
                                                                        ) => DOMProps & AriaLabelingProps;
                                                                        • Merges aria-label and aria-labelledby into aria-labelledby when both exist.

                                                                          Parameter props

                                                                          Aria label props.

                                                                          Parameter defaultLabel

                                                                          Default value for aria-label when not present.

                                                                        function useLoadMore

                                                                        useLoadMore: (props: LoadMoreProps, ref: RefObject<HTMLElement>) => void;

                                                                          function useObjectRef

                                                                          useObjectRef: <T>(ref?: any) => MutableRefObject<T>;
                                                                          • Offers an object ref for a given callback ref or an object ref. Especially helfpul when passing forwarded refs (created using React.forwardRef) to React Aria hooks.

                                                                            Parameter ref

                                                                            The original ref intended to be used.

                                                                            Returns

                                                                            An object ref that updates the given ref.

                                                                            See Also

                                                                            • https://react.dev/reference/react/forwardRef

                                                                          function useResizeObserver

                                                                          useResizeObserver: <T extends Element>(
                                                                          options: useResizeObserverOptionsType<T>
                                                                          ) => void;

                                                                            function useSlotId

                                                                            useSlotId: (depArray?: ReadonlyArray<any>) => string;
                                                                            • Used to generate an id, and after render, check if that id is rendered so we know if we can use it in places such as labelledby.

                                                                              Parameter depArray

                                                                              When to recalculate if the id is in the DOM.

                                                                            function useSyncRef

                                                                            useSyncRef: <T>(context?: ContextValue<T> | null, ref?: RefObject<T>) => void;

                                                                              function useUpdateEffect

                                                                              useUpdateEffect: (effect: EffectCallback, dependencies: any[]) => void;

                                                                                function useUpdateLayoutEffect

                                                                                useUpdateLayoutEffect: (effect: EffectCallback, dependencies: any[]) => void;

                                                                                  function useValueEffect

                                                                                  useValueEffect: <S>(
                                                                                  defaultValue: S | (() => S)
                                                                                  ) => [S, Dispatch<SetValueAction<S>>];

                                                                                    function useViewportSize

                                                                                    useViewportSize: () => ViewportSize;

                                                                                      Classes

                                                                                      class ShadowTreeWalker

                                                                                      class ShadowTreeWalker implements TreeWalker {}

                                                                                        constructor

                                                                                        constructor(doc: Document, root: Node, whatToShow?: number, filter?: NodeFilter);

                                                                                          property currentNode

                                                                                          currentNode: Node;

                                                                                            property doc

                                                                                            readonly doc: Document;

                                                                                              property filter

                                                                                              readonly filter: NodeFilter;

                                                                                                property root

                                                                                                readonly root: Node;

                                                                                                  property whatToShow

                                                                                                  readonly whatToShow: number;

                                                                                                    method firstChild

                                                                                                    firstChild: () => Node | null;

                                                                                                      method lastChild

                                                                                                      lastChild: () => Node | null;

                                                                                                        method nextNode

                                                                                                        nextNode: () => Node | null;

                                                                                                          method nextSibling

                                                                                                          nextSibling: () => Node | null;
                                                                                                          • Deprecated

                                                                                                          method parentNode

                                                                                                          parentNode: () => Node | null;
                                                                                                          • Deprecated

                                                                                                          method previousNode

                                                                                                          previousNode: () => Node | null;

                                                                                                            method previousSibling

                                                                                                            previousSibling: () => Node | null;
                                                                                                            • Deprecated

                                                                                                            Interfaces

                                                                                                            interface LoadMoreSentinelProps

                                                                                                            interface LoadMoreSentinelProps extends Omit<AsyncLoadable, 'isLoading'> {}

                                                                                                              property collection

                                                                                                              collection: Collection<any>;

                                                                                                                property scrollOffset

                                                                                                                scrollOffset?: number;
                                                                                                                • The amount of offset from the bottom of your scrollable region that should trigger load more. Uses a percentage value relative to the scroll body's client height. Load more is then triggered when your current scroll position's distance from the bottom of the currently loaded list of items is less than or equal to the provided value. (e.g. 1 = 100% of the scroll region's height). 1

                                                                                                                Package Files (40)

                                                                                                                Dependencies (6)

                                                                                                                Dev Dependencies (0)

                                                                                                                No dev dependencies.

                                                                                                                Peer Dependencies (2)

                                                                                                                Badge

                                                                                                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@react-aria/utils.

                                                                                                                • Markdown
                                                                                                                  [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@react-aria/utils)
                                                                                                                • HTML
                                                                                                                  <a href="https://www.jsdocs.io/package/@react-aria/utils"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>