All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
useRefCache returns non-mutable object
(b696b72)enableScrollLock and disableScrollLock utils
(6a95734)DEFAULT_HOVER_MODE_STICKY_EXIT_TIME has been renamed to
DEFAULT_HOVER_MODE_EXIT_TIME.ArrowUp or ArrowDown
keys.DropdownMenu component no longer accepts a list of items and instead
the children should be the MenuItem components.DropdownMenu component no longer supports the menuRenderer and
itemRenderer props. Instead, there is built-in support for conditionally
rendering as a Sheet component using the renderAsSheet prop.DropdownMenu component now requires a parent AppSizeListener because
of the conditional Sheet rendering functionality. This might require
updating your tests to either use the Configuration component from
@react-md/layout (recommended) or adding the AppSizeListener to tests that
include DropdownMenus.DropdownMenuItem component is no longer required for nested dropdown
menus and is an "internal" component instead that shouldn't really be used.exitVisibilityDelay always defaults to DEFAULT_HOVER_MODE_EXIT_TIME.MenuItemSeparator now renders as an <li> instead of an <hr> or
<div>.useContextMenu now returns an object instead of an ordered list.useHoverMode hook no longer accepts an HTMLElement generic and instead
the event handlers will automatically infer the HTMLElement based on usage.useHoverMode hook no longer returns stickyHandlers and instead returns
hoverHandlers that only include onMouseEnter and onMouseLeave. The
handlers that are returned now include onClick, onMouseEnter, and
onMouseLeave. This was kind of what the stickyHandlers was before. In
addition, clicking an element no longer disabled the hover mode behavior.HoverModeOnlyOptions,
HoverModeOnlyReturnValueMenuItem components requires the
<MenuKeyboardFocusProvider> to be mounted as a parent component which might
affect tests. This will not break anything if you are using the DropdownMenu
or Menu components.getPercentage to optionally not throw errors
(ff8a1d6)import type when possible
(ba96bb6)eslint
(8111cd3)stylelint
(22d1598)prop-types package.useDropzone fix around onDragLeave behavior
(fdff9f2)yarn format to include new files
(48d3d7f)sass
(5376be1)InteractionModeListener since it was an alias
for UserInteractionModeListenerResizeObserver component and
useResizeObserverV1 implementationuseMediaQuery 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