15.0.0-canary.a7d8389e1.0 • Published 3 years ago

@material/dom v15.0.0-canary.a7d8389e1.0

Weekly downloads
99,894
License
MIT
Repository
github
Last release
3 years ago

DOM

MDC DOM provides commonly-used utilities for inspecting, traversing, and manipulating the DOM.

Most of the time, you shouldn't need to depend on mdc-dom directly. It is useful however if you'd like to write custom components that follow MDC Web's pattern and elegantly integrate with the MDC Web ecosystem.

Installation

npm install @material/dom

Basic Usage

import * as ponyfill from '@material/dom/ponyfill';

See Importing the JS component for more information on how to import JavaScript.

Ponyfill Functions

The ponyfill module provides the following functions:

Function SignatureDescription
closest(element: Element, selector: string) => ?ElementReturns the ancestor of the given element matching the given selector (which may be the element itself if it matches), or null if no matching ancestor is found.
matches(element: Element, selector: string) => booleanReturns true if the given element matches the given CSS selector.
estimateScrollWidth(element: Element) => numberReturns the true optical width of the element if visible or an estimation if hidden by a parent element with display: none;.

Event Functions

External frameworks and libraries can use the following event utility methods.

Method SignatureDescription
util.applyPassive(globalObj = window) => objectDetermine whether the current browser supports passive event listeners

Focus Trap

The FocusTrap utility traps focus within a given element. It is intended for usage from MDC-internal components like dialog and modal drawer.

Method SignatureDescription
trapFocus() => voidTraps focus in the root element. Also focuses on initialFocusEl if set; otherwise, sets initial focus to the first focusable child element.
releaseFocus() => voidReleases focus from the root element. Also restores focus to the previously focused element.

Announce

The announce utility file contains a single helper method for announcing a message via an aria-live region. It is intended for usage from MDC-internal components.

Method SignatureDescription
announce(message: string, options?: AnnouncerMessageOptions) => voidAnnounces the message via an aria-live region with the given options. AnnouncerMessageOptions.priority defaults to polite and AnnouncerMessageOptions.ownerDocument defaults to the global document.
<!---->

Keyboard

The keyboard utility provides helper methods for normalizing KeyboardEvent keys across browsers. It is intended for usage from MDC-internal components.

Method SignatureDescription
normalizeKey(evt: KeyboardEvent) => stringReturns a normalized string derived from KeyboardEvent's keyCode property to be standard across browsers.
isNavigationEvent(evt: KeyboardEvent) => booleanReturns true if the event is a navigation event (Page Up, Page Down, Home, End, Left, Up, Right, Down).

Mixins

The module provides a single SASS mixin which helps improves a DOM element's UX for high-contrast mode users.

MixinDescription
transparent-borderEmits necessary layout styles to set a transparent border around an element without interfering with the rest of its component layout. The border is only visible in high-contrast mode. The target element should be a child of a relatively positioned top-level element (i.e. a ::before pseudo-element).
@everything-registry/sub-chunk-584svelte-arcadiamaterial-components-webmaterial-toolbox@whatoplay/react-dialog@xdam/ember-partials@types/material__domaapp-chat.jsember-cli-mdc-domember-cli-mdc-fab@infinitebrahmanuniverse/nolb-_mate@lcap-ui/base@leanup/material-core@labstack/data-table@pmwcs/base@betazuul/dialog@batchforce/core@authentic/mwc-dialog@authentic/mwc-base@cpangular/ng-material-theme@detachhead/smui-chips@detachhead/smui-common@detachhead/smui-data-table@detachhead/smui-dialog@detachhead/smui-drawer@detachhead/smui-list@detachhead/smui-menu@detachhead/smui-ripple@detachhead/smui-slider@detachhead/smui-snackbar@detachhead/smui-tab-scroller@detachhead/smui-textfield@dev.mohe/mwc-dialog@dev.mohe/mwc-list@dev.mohe/mwc-ripple@dev.mohe/mwc-select@dev.mohe/mwc-base@dev.mohe/mwc-slider@dev.mohe/mwc-tab-scroller@dragndrop/draggable@dragndrop/dragndrop@dragndrop/dropzone@dragndrop/vue-draggable@dragndrop/vue-dropzone@element-public/react-select@emuanalytics/flow-rdf@lucasecdb/rmdc@material/mwc-ripple@material/mwc-list@material/mwc-select@material/mwc-slider@material/switch@material/tab-scroller@material/icon-button@material/list@material/menu@material/linear-progress@material/mwc-base@material/checkbox@material/button@material/card@material/chips@material/data-table@material/circular-progress@material/banner@material/textfield@material/tooltip@material/floating-label@material/focus-ring@material/drawer@material/dialog@material/fab@material/mwc-dialog@material/select@material/snackbar@material/slider@material/radio@material/mwc-tab-scroller@material/ripple@material/react-dialog@material/react-list@material/react-ripple@material/react-tab-scroller@maicol07/mwa-card@maicol07/mwc-card@smui/tab-scroller@smui/textfield@smui/ripple@smui/slider@smui/snackbar@smui/chips@smui/common@smui/data-table@smui/dialog@smui/drawer@smui/list@smui/menu@mcwv/menu@mcwv/radio@mcwv/ripple
14.0.0

4 years ago

13.0.0

4 years ago

12.0.0

4 years ago

11.0.0

5 years ago

10.0.0

5 years ago

9.0.0

5 years ago

8.0.0

5 years ago

7.0.0

6 years ago

6.0.0

6 years ago

5.1.0

6 years ago

5.0.0

6 years ago

4.0.0

6 years ago

4.0.0-canary.1

6 years ago

4.0.0-canary.0

6 years ago

4.0.0-alpha.0

6 years ago

3.1.0

6 years ago

3.0.0

7 years ago

3.0.0-alpha.1

7 years ago

3.0.0-alpha.0

7 years ago

1.1.0

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

1.0.0-1

7 years ago

1.0.0-0

7 years ago

0.41.0

7 years ago

0.40.0

7 years ago