All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
useMediaQuery uses addEventListener/removeEventListener
(b889a9e)useDropzone hook
(bc07a1f)omit uses readonly prefix for key list
(d3e1ee8)prettier after upgrading to v2.3.0
(3ce236a)typedoc
(cf54c35)isFocusable util
(1d92472)typescript version to v4.2.3
(b094b36)Tooltip Hook Example
(9783c44)useOnUnmount
(c758982)RadioGroup widget for the radiogroup
role
(76d6d27)tryToSubmitRelatedForm util to help with
additional a11y
(0566e14)loop util to allow for a specific min value
(51bcf92)Note: Version bump only for package @react-md/utils
Note: Version bump only for package @react-md/utils
LabelRequiredForA11y type definition
(b7aa4fa)cloneStyles prop so grid styles can be applied to any
child
(ca913e7)Dir component to
help determine current writing direction
(a929e04)useGridList hook
(56ecc19)Note: Version bump only for package @react-md/utils
LabelRequiredForA11y type definition
(b7aa4fa)cloneStyles prop so grid styles can be applied to any
child
(ca913e7)Dir component to
help determine current writing direction
(a929e04)useGridList hook
(56ecc19)Note: Version bump only for package @react-md/utils
Note: Version bump only for package @react-md/utils
sideEffects field to package.json
(31820b9)sideEffects formatting
(78a7b6b)No changes.
This package is pretty new for react-md, but might be seen as a replacement
for the old grid, helpers, and utils.
aria-activedescendant behavior or focus
behaviorhtml and body
only. still applies box-sizing: border-box to all elements thoughreact-md packages with react-md-utilsreact-md-helpers-everything.md-full-width, .md-inline-block, and .md-block-centered helper
classesFocusContainer renamed all of the propsThis package contains many useful utilities for internal use, but also exports some components and hooks that might be useful externally.
AppSizeListener and useAppSize are used to determine the current app size
based on media queries. Multiple components within react-md rely on this
behaviorResizeListener is a component that can be used to trigger a callback on
throttled window resize events and a useResizeListener hook versionResizeObserver is a component that is used to use the ResizeObserverAPI to
track a specific element resizing as well as a useResizeObserver hook
versionPhoneOnly, MobileOnly, TabletOnly, and DesktopOnly components can be
used to conditionally render content only when one of the media types are
activeUserInteractionModeListener, useUserInterationMode, and
useIsUserInteractionMode are used to determine how the current user is
interacting with your app with either: touch, mouse, or keyboardGrid and GridCell can be used to create a CSS Grid layout using the
material design grid layout or a static number of columnsGridList and GridListCell can be used to create a flex based layout where
each cell grows up to the specified max width and tries to fit as many cells
as possible based on the GridList's widthuseTabFocusWrap hook for containing focus within an element if the
FocusContainer does not suit your needsuseFocusOnMount hook if you'd like to focus a specific element when a
component mounts if the FocusContainer does not suit your needsusePreviousFocus hook if you'd like to focus the previously focused element
in the DOM before this component mounted once this component unmountsuseScrollLock hook to temporarily disable scrollbars within the app for
temporary elementsuseCloseOnOutsideClick hook if a callback should be fired once an element
outside of a container element has been clickedisContrastCompliant - utility function to check if two hex colors meet a
minimal contrast ratio compliance for accessibilitybem - if you like using BEM for class name convention, helps dynamically
apply classes as neededcaseInsensitiveFilter and fuzzyFilter utils for filtering a list of datafindIgnoreCase - utility to find the first match within a listuseKeyboardSearch - accessibility hook to allow a list of to be keyboard
searchable within the DOMuseKeyboardFocusMovement and useActiveDescendantMovement for handling
custom keyboard movement of DOM elementsgetFixedPosition - utility to generate styles for an element so it is fixed
within the viewport. However, you most likely are looking for the
useFixedPositioning hook in @react-md/transition$rmd-utils-phone-max-width: 47.9375em !default - the max width to still be
considered a phone while in portrait or landscape mode$rmd-utils-tablet-max-width: 64em !default - the max width to still be
considered a tablet while in portrait or landscape mode$rmd-utils-large-desktop-min-width: 80em !default - a new min-width for a
large desktop screen (normally for 1440p or 4k monitors)$rmd-grid-padding: 1rem !default - the static padding for a grid$rmd-grid-cell-margin: 1rem !default - the static amount of margin for each
grid cell$rmd-grid-golumns: null !default - a new variable that allows you to
configure a static number of columns across all screen sizes instead of using
the 4, 8, and 12 grid system from material design$rmd-grid-large-desktop-columns: $rmd-grid-desktop-columns !default - a new
variable for if you want to configure the number of columns in the grid system
for large desktop screens$rmd-grid-list-padding: 0.5rem !default - the amount of to use for the
flex-based grid approach$rmd-grid-list-cell-margin: 0.5rem !default - the amount of margin to use
for the flex-based grid approach for each cell$rmd-grid-list-cell-max-size: 0.375rem !default - the default max-size that
each cell within the flex-based grid apporach can be before the DOM has loaded@function rmd-utils-negate-var - a utility function that can be used to
negate a css variable@mixin rmd-utils-map-to-styles - a utility mixin to convert a Map into
styles@mixin rmd-utils-rtl - a utility mixin to apply styles only for right to
left languages@mixin rmd-utils-rtl-auto - a utility mixin that can automatically swap some
styles to an inversed value for right to left languages@mixin rmd-utils-block-centered - a utility mixin to style an element
centered horizontally within a non-flex container@mixin rmd-utils-absolute-centered - a utility mixin to style an element
centered horizontally and vertically using position: absolute@mixin rmd-utils-scroll - a utility mixin to allow scrolling with fixing
scroll momentum on iOS@mixin rmd-utils-hide-focus-outline - utility mixin to hide the default
browser focus styles for an element and fixing the firefox custom focus rings@mixin rmd-utils-full-screen - a utility mixin for making an element full
screen or the same size as the parent element@mixin rmd-utils-pseudo-element - a utility mixin to create a pseudo element
that won't be interactable. generally used for focus behavior@mixin rmd-utils-sr-only-focusable - a utility mixin to make an element
visible only while being focused by a screen reader@mixin rmd-utils-sr-only - a utility mixin to make an element visible for
screen readers only@mixin rmd-utils-hide-scrollbar - a utility mixin to hide the scrollbar for
an element while still allowing it to be scrollable@mixin rmd-utils-phone-media - a utility mixin to apply styles only for
phone devices@mixin rmd-utils-tablet-media - a utility mixin to apply styles when the
tablet min-width is reached@mixin rmd-utils-tablet-only-media - a utility mixin to apply styles only
for tablets based on min and max width@mixin rmd-utils-desktop-media - a utility mixin to apply styles when the
desktop min width is reached@mixin rmd-utils-large-desktop-media - a utility mixin to apply styles when
the large desktop min width is reached@mixin rmd-utils-touch-only - a utility mixin to apply styles only while the
app is being interacted by touch@mixin rmd-utils-keyboard-only - a utility mixin to apply styles only while
the app is being interacted with a keyboard@mixin rmd-utils-mouse-only - a utility mixin to apply styles only while the
app is being interacted with a mouse$md-tablet-min-width to $rmd-utils-tablet-min-width and changed
the default value from 768px to 48em$md-desktop-min-width to $rmd-desktop-min-width and changed the
default value from 1025px to 64.0625rem$md-grid-phone-columns to $rmd-grid-phone-columns$md-grid-tablet-columns to $rmd-grid-tablet-columns$md-grid-desktop-columns to $rmd-grid-desktop-columns$md-mobile-min-width since the media queries will use max-width
for phones instead$md-portrait-media and $md-landscape-media since they are no
longer used$md-mobile-media, $md-mobile-portrait-media and
$md-mobile-landscape-media since the rmd-utils-mobile-media mixin should
be used instead$md-tablet-media, $md-tablet-portrait-media, and
$md-tablet-landscape-media since the rmd-utils-tablet-media and
rmd-utils-tablet-only-media mixins should be used instead$md-media-included since the rmd-utils-dense mixin should be used
instead if you want to automatically create a dense theme on desktops$md-tablet-breakpoint and $md-desktop-breakpoint since the grid
uses the same breakpoints as all other components now$md-grid-phone-margin, $md-grid-phone-gutter,
$md-grid-tablet-margin, $md-grid-tablet-gutter, $md-grid-desktop-margin,
and $md-grid-desktop-gutter since there is now a static size across all app
sizesreact-md-grid,
react-md-make-grid-container, react-md-grid-mobile,
react-md-grid-tablet, react-md-grid-desktop, react-md-make-custom-grid,
react-md-make-grid, react-md-make-cells, react-md-grid-media,
react-md-cell-size, react-md-grid-full, and react-md-cell-offset since
the new grid system doesn't need styling in this manner