@material/dom

  • Version 11.0.0
  • Published
  • 116 kB
  • 2 dependencies
  • MIT license

Install

npm i @material/dom
yarn add @material/dom
pnpm add @material/dom

Overview

DOM manipulation utilities for Material Components for the web

Index

Namespaces

namespace @material/dom

module '@material/dom' {}

    namespace @material/dom.events

    namespace @material/dom.events {}

      function applyPassive

      applyPassive: (globalObj?: Window) => boolean | EventListenerOptions;
      • Determine whether the current browser supports passive event listeners, and if so, use them.

      namespace @material/dom.focusTrap

      namespace @material/dom.focusTrap {}

        class FocusTrap

        class FocusTrap {}
        • Utility to trap focus in a given root element, e.g. for modal components such as dialogs. The root should have at least one focusable child element, for setting initial focus when trapping focus. Also tracks the previously focused element, and restores focus to that element when releasing focus.

        constructor

        constructor(root: HTMLElement, options?: FocusOptions);

          method releaseFocus

          releaseFocus: () => void;
          • Releases focus from root. Also restores focus to the previously focused element.

          method trapFocus

          trapFocus: () => void;
          • Traps focus in root. Also focuses on either initialFocusEl if set; otherwises sets initial focus to the first focusable child element.

          interface FocusOptions

          interface FocusOptions {}
          • Customization options.

          property initialFocusEl

          initialFocusEl?: HTMLElement;

            property skipInitialFocus

            skipInitialFocus?: boolean;

              property skipRestoreFocus

              skipRestoreFocus?: boolean;

                namespace @material/dom.keyboard

                namespace @material/dom.keyboard {}

                  variable KEY

                  const KEY: {
                  UNKNOWN: string;
                  BACKSPACE: string;
                  ENTER: string;
                  SPACEBAR: string;
                  PAGE_UP: string;
                  PAGE_DOWN: string;
                  END: string;
                  HOME: string;
                  ARROW_LEFT: string;
                  ARROW_UP: string;
                  ARROW_RIGHT: string;
                  ARROW_DOWN: string;
                  DELETE: string;
                  ESCAPE: string;
                  TAB: string;
                  };
                  • KEY provides normalized string values for keys.

                  function isNavigationEvent

                  isNavigationEvent: (evt: KeyboardEvent) => boolean;
                  • isNavigationEvent returns whether the event is a navigation event

                  function normalizeKey

                  normalizeKey: (evt: KeyboardEvent) => string;
                  • normalizeKey returns the normalized string for a navigational action.

                  namespace @material/dom.ponyfill

                  namespace @material/dom.ponyfill {}

                    function closest

                    closest: (element: Element, selector: string) => Element | null;
                    • A "ponyfill" is a polyfill that doesn't modify the global prototype chain. This makes ponyfills safer than traditional polyfills, especially for libraries like MDC.

                    function estimateScrollWidth

                    estimateScrollWidth: (element: Element) => number;
                    • Used to compute the estimated scroll width of elements. When an element is hidden due to display: none; being applied to a parent element, the width is returned as 0. However, the element will have a true width once no longer inside a display: none context. This method computes an estimated width when the element is hidden or returns the true width when the element is visble.

                      Parameter element

                      the element whose width to estimate

                    function matches

                    matches: (element: Element, selector: string) => boolean;

                      namespace @material/dom/events

                      module '@material/dom/events' {}

                        function applyPassive

                        applyPassive: (globalObj?: Window) => boolean | EventListenerOptions;
                        • Determine whether the current browser supports passive event listeners, and if so, use them.

                        namespace @material/dom/focus-trap

                        module '@material/dom/focus-trap' {}

                          class FocusTrap

                          class FocusTrap {}
                          • Utility to trap focus in a given root element, e.g. for modal components such as dialogs. The root should have at least one focusable child element, for setting initial focus when trapping focus. Also tracks the previously focused element, and restores focus to that element when releasing focus.

                          constructor

                          constructor(root: HTMLElement, options?: FocusOptions);

                            method releaseFocus

                            releaseFocus: () => void;
                            • Releases focus from root. Also restores focus to the previously focused element.

                            method trapFocus

                            trapFocus: () => void;
                            • Traps focus in root. Also focuses on either initialFocusEl if set; otherwises sets initial focus to the first focusable child element.

                            interface FocusOptions

                            interface FocusOptions {}
                            • Customization options.

                            property initialFocusEl

                            initialFocusEl?: HTMLElement;

                              property skipInitialFocus

                              skipInitialFocus?: boolean;

                                property skipRestoreFocus

                                skipRestoreFocus?: boolean;

                                  namespace @material/dom/keyboard

                                  module '@material/dom/keyboard' {}

                                    variable KEY

                                    const KEY: {
                                    UNKNOWN: string;
                                    BACKSPACE: string;
                                    ENTER: string;
                                    SPACEBAR: string;
                                    PAGE_UP: string;
                                    PAGE_DOWN: string;
                                    END: string;
                                    HOME: string;
                                    ARROW_LEFT: string;
                                    ARROW_UP: string;
                                    ARROW_RIGHT: string;
                                    ARROW_DOWN: string;
                                    DELETE: string;
                                    ESCAPE: string;
                                    TAB: string;
                                    };
                                    • KEY provides normalized string values for keys.

                                    function isNavigationEvent

                                    isNavigationEvent: (evt: KeyboardEvent) => boolean;
                                    • isNavigationEvent returns whether the event is a navigation event

                                    function normalizeKey

                                    normalizeKey: (evt: KeyboardEvent) => string;
                                    • normalizeKey returns the normalized string for a navigational action.

                                    namespace @material/dom/ponyfill

                                    module '@material/dom/ponyfill' {}

                                      function closest

                                      closest: (element: Element, selector: string) => Element | null;
                                      • A "ponyfill" is a polyfill that doesn't modify the global prototype chain. This makes ponyfills safer than traditional polyfills, especially for libraries like MDC.

                                      function estimateScrollWidth

                                      estimateScrollWidth: (element: Element) => number;
                                      • Used to compute the estimated scroll width of elements. When an element is hidden due to display: none; being applied to a parent element, the width is returned as 0. However, the element will have a true width once no longer inside a display: none context. This method computes an estimated width when the element is hidden or returns the true width when the element is visble.

                                        Parameter element

                                        the element whose width to estimate

                                      function matches

                                      matches: (element: Element, selector: string) => boolean;

                                        Package Files (1)

                                        Dependencies (2)

                                        Dev Dependencies (0)

                                        No dev dependencies.

                                        Peer Dependencies (0)

                                        No peer dependencies.

                                        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/@material/dom.

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