Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
@material/dom
Advanced tools
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.
npm install @material/dom
import * as ponyfill from '@material/dom/ponyfill';
See Importing the JS component for more information on how to import JavaScript.
The ponyfill
module provides the following functions:
Function Signature | Description |
---|---|
closest(element: Element, selector: string) => ?Element | Returns 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) => boolean | Returns true if the given element matches the given CSS selector. |
estimateScrollWidth(element: Element) => number | Returns the true optical width of the element if visible or an estimation if hidden by a parent element with display: none; . |
External frameworks and libraries can use the following event utility methods.
Method Signature | Description |
---|---|
util.applyPassive(globalObj = window) => object | Determine whether the current browser supports passive event listeners |
The FocusTrap
utility traps focus within a given element. It is intended for usage from MDC-internal
components like dialog and modal drawer.
Method Signature | Description |
---|---|
trapFocus() => void | Traps focus in the root element. Also focuses on initialFocusEl if set; otherwise, sets initial focus to the first focusable child element. |
releaseFocus() => void | Releases focus from the root element. Also restores focus to the previously focused element. |
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 Signature | Description |
---|---|
announce(message: string, options?: AnnouncerMessageOptions) => void | Announces the message via an aria-live region with the given options. AnnouncerMessageOptions.priority defaults to polite and AnnouncerMessageOptions.ownerDocument defaults to the global document. |
The keyboard
utility provides helper methods for normalizing KeyboardEvent
keys across browsers. It is intended for usage from MDC-internal components.
Method Signature | Description |
---|---|
normalizeKey(evt: KeyboardEvent) => string | Returns a normalized string derived from KeyboardEvent 's keyCode property to be standard across browsers. |
isNavigationEvent(evt: KeyboardEvent) => boolean | Returns true if the event is a navigation event (Page Up, Page Down, Home, End, Left, Up, Right, Down). |
The module provides a single SASS mixin which helps improves a DOM element's UX for high-contrast mode users.
Mixin | Description |
---|---|
transparent-border | Emits 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). |
14.0.0 (2022-04-27)
unset
is unsupported in IE. (f460e23)validateTooltipWithCaretDistances
method. (3e30054)theme-styles
mixin... the value being retreived from the $theme
map and css property name was swapped. The mixin would request font-size
/font-weight
/letter-spacing
from the $theme
map (which expects size
/weight
/tracking
)... so these values would always be null
. (32b3913)attachTo
. (05db65e)showTimeout
is not set (indicating that this tooltip is about to be re-shown). (6ca8b8f)minRange
param to range sliders to request a minimum gap between the two thumbs. (8fffcb5)valueToAriaValueTextFn
and valueToValueIndicatorTextFn
functions are called for. (b6510c8)PiperOrigin-RevId: 444830518
PiperOrigin-RevId: 419837612
FAQs
DOM manipulation utilities for Material Components for the web
We found that @material/dom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.