@react-aria/utils

  • Version 3.28.1
  • Published
  • 729 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;
                            • ShadowDOM safe version of document.activeElement.

                            function getEventTarget

                            getEventTarget: (event: any) => Element;
                            • ShadowDOM safe version of event.target.

                            function getOffset

                            getOffset: (element: any, reverse: any, orientation?: string) => any;

                              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) => boolean | 'true';

                                        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<ForwardedRef<T> | MutableRefObject<T> | null | undefined>
                                                  ) => ForwardedRef<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 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>(forwardedRef?: 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 forwardedRef

                                                                          The original ref intended to be used.

                                                                          Returns

                                                                          An object ref that updates the given ref.

                                                                          See Also

                                                                          • https://reactjs.org/docs/forwarding-refs.html

                                                                        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

                                                                                                          Package Files (39)

                                                                                                          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>