05/06/2022 (95 days ago)
DEFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES
(2d20a2e)04/02/2022 (129 days ago)
useIsomorphicLayoutEffect to hide SSR warning (aa0d3cd)BadgedButton documentation (b147a88)03/31/2022 (131 days ago)
03/18/2022 (144 days ago)
AppBarTitle now applies flex: 1 1 auto (4a47c92)List (2b5fb23)useTooltip supports new disabled option (a934ae9)eslint rules (88eb2b2)Grid (3ac42ef)useTooltip when it is conditionally applied
(cfca184)useTooltip disabled option (f318ecf)stylelint plugins to latest (2bb6429)01/30/2022 (191 days ago)
Check out the v4 to v5 Migration Guide for more information around updating code to this major version.
This release focused on creating a new Menu API that should hopefully make
menus easier to use along with some other new features. The main difference is
that the DropdownMenu no longer accepts a list of items that get converted
to MenuItems behind the scenes. Instead, the children of the DropdownMenu
should be all the MenuItem components that should be used inside the menu. The
main reason for this change is to make it easier to create reusable components
for different actions within your app and no longer needed to disable the React
eslint rule around missing keys.
Another notable change is that nested dropdown menus no longer require the
DropdownMenuItem component and instead the DropdownMenu automatically
renders as a <li> if it appears as a child of another Menu component.
Here's a quick example of migrating to the new DropdownMenu API:
import type { ReactElement } from "react";
-import { DropdownMenu, DropdownMenuItem } from "@react-md/menu";
+import { DropdownMenu, MenuItem } from "@react-md/menu";
export default function Example(): ReactElement (
- <DropdownMenu
- id="example-dropdown-menu"
- items={[
- { onClick: () => console.log("Clicked Item 1"), children: "Item 1" },
- { onClick: () => console.log("Clicked Item 2"), children: "Item 2" },
- { onClick: () => console.log("Clicked Item 3"), children: "Item 3" },
- <DropdownMenuItem
- id="nested-dropdown-menu"
- items={["Subitem 1", "Subitem 2", "Subitem 3"]}
- >
- Submenu
- </DropdownMenuItem>,
- ]}
- >
- Dropdown
+ <DropdownMenu id="example-dropdown-menu" buttonChildren="Dropdown">
+ <MenuItem onClick={() => console.log("Clicked Item 1")}>Item 1</MenuItem>
+ <MenuItem onClick={() => console.log("Clicked Item 2")}>Item 2</MenuItem>
+ <MenuItem onClick={() => console.log("Clicked Item 3")}>Item 3</MenuItem>
+ <DropdownMenu
+ id="nested-dropdown-menu"
+ buttonChildren="Submenu"
+ >
+ <MenuItem>Subitem 1</MenuItem>
+ <MenuItem>Subitem 2</MenuItem>
+ <MenuItem>Subitem 3</MenuItem>
+ </DropdownMenu>
</DropdownMenu>
);On top of the new API, two major new features have been integrated into this release:
Menus can now act like a browser's bookmark folder behavior where the user must
click one of the dropdowns before all other menus become immediately visible on
hover by using the new MenuBar component. This also implements some new
keyboard movement behavior matching the
menubar spec.
If the first-click behavior is undesired, the MenuBar also accepts a
hoverTimeout prop which can be set to 0 to make the menus appear immediately
on hover or another time in milliseconds to wait before the "hover mode"
behavior should begin.
Check out the Hoverable Menus demo for more information.
Since menus aren't always ideal for small viewports, the DropdownMenu has been
updated to conditionally rendering the Menu within a Sheet instead of being
positioned relative to the Button element. This feature is opt-in by
either:
menuConfiguration={{ renderAsSheet: "phone" }} on the Configuration
component from @react-md/layoutDropdownMenu in the MenuConfigurationProvider and adding a prop
renderAsSheet="phone"DropdownMenu with the renderAsSheet="phone" propThe Sheet will default to rendering at the bottom of the viewport and have a
max height that should allow the user to close the menu by clicking the overlay
behind the sheet. These defaults can be configured with the sheetPosition and
sheetVerticalSize props.
The Sheet can also be configured to have an optional header and footer using
the sheetHeader and sheetFooter props. If all else fails, the DropdownMenu
accepts sheetProps which will be passed to the Sheet component.
Check out the Mobile Action Sheets demo for more information.
TextArea applies custom height style when
resize="none" (e77d939)disableEnterClick in ListItem (b5e8b69)useRefCache returns non-mutable object (b696b72)overlayProps to configure the dialog's overlay
(cfc30f0)useVerticalDividerHeight to support any
HTMLElement (edd9287)TextFieldContainer to optionally fill all space
in flex containers (2c8e68c)FileInput snapshots for new icon (f5e43fe)MenuBar visibility for touch devices (1288be7)enableScrollLock and disableScrollLock utils
(6a95734)useScrollListener no longer accepts an element or
options (74a0274)next from 12.0.7 to 12.0.9 (04749c6)create-react-app examples to use v5.0.0 (f7850b8)react-md major versions (78b7396)TextArea
(5361825)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.12/31/2021 (221 days ago)
FileInput default icon changed from file_download to
file_upload (174d1c1), closes #1325useIsUserInteractionMode get mode via context
(b5f93ae), closes #1322create-react-app README to use correct start command
(37acdc3)11/29/2021 (253 days ago)
11/26/2021 (256 days ago)
getPercentage to optionally not throw errors
(ff8a1d6)11/24/2021 (258 days ago)
This release focused on updating the @react-md/transition package to no longer
log errors in React.StrictMode because react-ransition-group was using
ReactDOM.findDOMNode to handle transitions. All react-md packages will no
longer use react-transition-group since all that functionality has been built
into @react-md/transition with a slightly different API.
This release has also included my first attempt at automating upgrading to new major releases by introducing a new @react-md/codemod package that is similar to the react-codemod package. You can automate some of this release by running:
npx @react-md/codemod v3-to-v4/presetSince I am still learning how to use jscodeshift, it will not be able to migrate everything but should still help with most changes.
DropdownMenu and Menu portal by default (98a6a9f),
closes #1264eslint (8111cd3)ConditionalPortal supports ReactNode children
(c83d578)Typography (30cf056)sass resolutions in package.json
(db22cde), closes #1261react-marked-renderer for markdown stuffs (93ebaa4)prettier (9632d82)react-router-dom v6 (e012ef9)sass files (98ffe40)sassdoc to not through uncaught exceptions
(8bdf532)prettier after upgrading to v2.4.0 (06110af)enable strict mode by default for nextjs-typescript (83e4c44)create-react-app example to use react-router-dom v6
(3c4d1ea)react-router-dom v6 (ae469ef)stylelint (22d1598)DropdownMenu and Menu components portal by
default. This should really only affect snapshot testslib.d.tsprop-types package.09/11/2021 (332 days ago)
TabsManager tabs prop
(45d9458)09/10/2021 (333 days ago)
DialogFooter align prop applies correct classes
(644971d)TooManyFilesError is only used if all the other
validation has passed (6ed3f54)useFileUpload
extensions (9238140)useDropzone fix around onDragLeave behavior (fdff9f2)isValidFileName option to useFileUpload (dbd0375)sassdoc for new module system (4746d26)yarn format to include new files (48d3d7f)next (b50d745)sassdoc hot-reloading (9d58e09)sassdoc examples to be linkable (9ed096e)08/14/2021 (360 days ago)
08/13/2021 (361 days ago)
This release should be relatively simple for most consumers of this library
since the main breaking change is dropping support for node-sass and requiring
sass since
node sass has been deprecated as
well as removing deprecated variables, hooks, and components. Most users should
be able to run the following commands to upgrade to v3.0.0:
npm update react-md
npm uninstall node-sass
npm install sassOr with yarn
yarn add react-md
yarn remove node-sass
yarn add sassIn addition, there is now partial support for the
new Sass module system
with the react-md package which also simplifies the import usage and has a
slight build performance improvement for large projects. To start using the new
module system, update all the @import statements as shown below:
-@import '~@react-md/theme/dist/mixins';
-@import '~@react-md/utils/dist/mixins';
-// other react-md imports
+@use 'react-md' as *;
// No other changes required!If you override variables within react-md:
-@import '~@react-md/theme/dist/color-palette';
-$rmd-theme-light: false;
-$rmd-theme-primary: $rmd-purple-500;
-$rmd-theme-secondary: $rmd-pink-a-200;
-
-@import '~react-md/dist/styles';
+@use '@react-md/theme/dist/color-palette' as color;
+@use 'react-md' as * with (
+ $rmd-theme-light: false,
+ $rmd-theme-primary: color.$rmd-theme-purple-500,
+ $rmd-theme-secondary: color.$rmd-theme-pink-a-200,
+);
+
+@include react-md-utils;Check out the updated customizing your theme documentation, (958f34f), or #1214 for more in-depth examples.
$rmd-theme-dark-elevation now defaults to true
instead of falsenode-sass is no longer supported and users must switch to sassInteractionModeListener since it was an alias
for UserInteractionModeListenerResizeObserver component and
useResizeObserverV1 implementationTooltipHoverModeConfig component$rmd-card-dark-elevation-bordered-background-color variableTooltipped componentuseIndeterminateChecked is now
an object of optionssass since it's deprecated (126fb5a)defaults to true (b371337)sass usage with: @use 'react-md'; (787bfb5)@use (68e8c6b)react-md/dist/_everything.scss (c7177e6)sassdoc and variables to use
everything.scss (a0f0699)sass
(5376be1)useIndeterminateChecked (6b7871f)Tooltipped component
(6dca9b1)typedoc API in navigation
tree (c388ba6)@use imports (958f34f)defaults
(b2269ff)sass instead of node-sass
(d8ddf51)react-md (c0f25f7)07/26/2021 (379 days ago)
07/17/2021 (388 days ago)
This release is focused around the FileInput component in the @react-md/form
package and implementing a useFileUpload hook to handle uploading/previewing
files in the browser. However, there is a notable change in this release for the
form documentation since the demos have been split into the following pages:
FileInput correctly center the icon when children aren't
provided (3a6ab33)useLayoutNavigation possible perf fix (3d65e4e)FileInput automatically swaps button type to text if
children exist (e5585e1)FormMessageCounter component added to public API
(1508812)useFileUpload hook to upload files to the
browser (efb3f2f), closes #1159useDropzone hook (bc07a1f)useFileUpload (49ce4d9)useFileUpload (8f9002e)eslint error after updating prettier (75a9b0f)Select Options Demo
(367cc0d)07/03/2021 (402 days ago)
MenuItemCheckbox added missing indeterminate state
(aa2c552), closes #1186useIndeterminateChecked correctly uses readonly prefix
(7f69a71)useIndeterminateChecked supports MenuItemCheckbox with
new option (9ab67bf)MenuItemCheckbox, MenuItemRadio, and MenuItemSwitch
styles on light themes (fc4dcd9)useIndeterminateChecked
(8646c28)06/10/2021 (425 days ago)
Switch components
(8c65df6), closes #1175omit uses readonly prefix for key list (d3e1ee8)next and build deps to fix font loading issues
(e528617)05/17/2021 (449 days ago)
useLayoutConfig
(14e6587)Menu in Dense
Mode (abbe9a9)AppBar mini layouts (84313fc), closes #1101classnames dependency (a7a2012), closes
#1155AppBar layouts (d217ac1)typedoc (84739af)react-md (a69359b)typedoc (cf54c35)typedoc source links when deployed through vercel
(a4eed1b)useLayoutNavigation hook example in creating a new
app (1cde856)typedoc WIP (a7d7429)04/22/2021 (474 days ago)
04/22/2021 (474 days ago)
04/22/2021 (474 days ago)
This release was mostly targeted around exposing the tooltip's "Hover Mode API" as well as the other tooltip behavior. See #1113 and the new demos for more information:
The @react-md/form package was also updated to include new components for rendering checkbox, radio, and switch components within menus. See #1123 and Menus with Form Controls Example for more information.
Finally, react-md was updated to support typescript@4.2.3 by removing the
resize-observer-polyfill dependency since it has conflicting types with the
now provided type definitions around resize observers. If you are a typescript
user, see #1099 for more information around this change.
FixedDialog applies style prop (bb4ad2f)focusElementsWithin correctly focuses container element
as a fallback (cff46c4)useFixedPositioning to merge style objects
(1ab84d7)useFixedPositioning to support fixedTo ref
(ced550a)isFocusable util (1d92472)typescript version to v4.2.3 (b094b36)HoverModeProvider
documentation (f42c65c)SwitchTrack and InputToggleIcon components
(d9278b3)MenuItemRadio usage to be wrapped in a group for
a11y (01caa0b)SliderValue to use non-portalled tooltip for
existing test (b41136f)Configuration to use new HoverModeProvider
(357f2bf)useTooltip code (0a6aed9)Tooltip to use new Hover Mode (386f47b)@types/react-transitition-group from v4.2.4
to v4.4.1 (f3f5c7b)useOnUnmount
(c758982)@types/classnames
(32f6f0f)03/22/2021 (505 days ago)
Select correctly respects the readOnly prop (d9a0262),
closes #1089Select correctly updates for the dense spec (2930595),
closes #1089next (1861731)02/28/2021 (527 days ago)
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)02/12/2021 (543 days ago)
SkipToMainContent (3f6e866)01/29/2021 (557 days ago)
classnames dependency (8c34790)01/26/2021 (560 days ago)
01/12/2021 (574 days ago)
01/11/2021 (575 days ago)
12/16/2020 (601 days ago)
12/15/2020 (602 days ago)
This release was mainly focused on the form package and added a lot of new features. I highly recommend checking out the following PRs for more information:
useTextField #1009useNumberField #1014Slider component #1016useTextField hook to validate the
TextField and TextArea values (578257c)PasswordWithMessage component to be used with
useTextField Hook (f6d84f2)TextAreaWithMessage component to be used with
useTextField Hook (e358799)TextFieldWithMessage component to be used with
useTextField Hook (f2d7e5d)useNumberField hook to control number field
values (c705f2c)IconProvider Component and
useIcon Hook (4dfd50a)flexReverse prop to TextIconSpacing (c4ee05b)withinRange util for number validation
(e8fb252)@include order for easier overrides
(4705b09)useNumberField (8b927ab)FormMessage counter prop-type validation (9ece3e1)messageProps error from react when
disableMessage is enabled (e452aff)TextField PropTypes to allow for search input
type (23d92dd)GridCell now correctly uses largeDesktop when desktop is also
provided (fd26b8b)11/13/2020 (634 days ago)
ListItem disabled colors to optionally include
addons (a40b6b3), closes #997ListItem no longer focusable by default when disabled
(06e91ca), closes #997react-scripts@4.0.0 (be003a9)react-scripts@4.0.0 (8b7122b)10/23/2020 (655 days ago)
10/17/2020 (661 days ago)
Republished the v2.4.0 release to ensure that all 2300 themes are available through CDNs after upgrading my build script.
10/17/2020 (661 days ago)
This release implemented better default behavior to ensure that the "better"
contrast ratio is chosen instead of choosing the first color that meets the
minimal contrast ratio. This is enabled by default going forward, but can be
disabled by setting $rmd-theme-better-contrast-ratios: false
09/14/2020 (694 days ago)
I released v1.18.0 today but didn't realize that npm uses --tag while
lerna uses --dist-tag so v1.18.0 was released under latest instead of
previous. This release is only to ensure that v2 is set to latest and has
no other changes.
09/10/2020 (698 days ago)
This release is kind of a breaking change since the base react-md package no
longer has a dist/css folder for all the pre-compiled themes due to CDNs and
package managers rejecting this package for being too big. All the pre-compiled
themes will now be available through jsDelivr
instead. Check out the CDN Links for more info.
This release also changed the ResizeObserver to use a subscription model to
slightly increase performance when multiple ResizeObservers are used on a
single page as well as fix some errors related to the
ResizeObserver loop has been exceeded. The useResizeObserver has been
updated to use the new API which requires refs, but is still backwards
compatible. Due to this change, the ResizeObserver component has been
deprecated in favor of the useResizeObserver hook implementation.
Otherwise, there were a few new features added to the @react-md/button, @react-md/progress, and @react-md/tree packages that you can reference below.
@react-md/form package to show how to use
react-hook-form with react-md for form
validation. Check out the new example
here.usePressedStates to pass onClick like other
state hooks (82cd676)CircularProgress
(c6c616b)TextArea to use the new useResizeObserver API
(2c2dd27)small state to the CircularProgress
(6884a3a)defaultTreeItemRenderer for class names
(3c61f3c), closes #920LabelRequiredForA11y type definition (b7aa4fa)Dir component to help determine current writing
direction (a929e04)useGridList hook (56ecc19)useIsomorphicLayoutEffect from react-redux
(deacf1c)useResizeObserver implementation
(dc3f4df)useAppSize usage error message (2c81982)cloneStyles prop so grid styles can be
applied to any child (ca913e7)09/02/2020 (706 days ago)
09/02/2020 (706 days ago)
This release was just a re-publish of v2.2.0 to try fixing a publishing error.
08/11/2020 (728 days ago)
Listbox render 0 as a valid display value
(d02b7a9)<img> (11848ee), closes
#908Checkbox and Radio input element
(b6d2318)Note: The Checkbox and Radio components have updated their default inactive
color to be the rmd-theme-var(text-secondary-on-background) instead of
rmd-theme-var(secondary) to better match the v1 styles.
See $rmd-toggle-inactive-color and $rmd-toggle-active-color.
08/01/2020 (738 days ago)
This release was mostly internal changes and documentation updates including a
new Writing Tests guide, but also fixed the Layout
component to allow for the useCrossFade hook to transition the <main>
content on pathname changes.
07/28/2020 (742 days ago)
The GitHub repo has been updated to now include an
examples folder to show how you can use
react-md along with other build tools such as
Create React App,
Next.js, Gatsby, and others.
These examples can be used to spin up boilerplate projects by following the
following steps:
First download the specific example:
# replace EXAMPLE_NAME with the specific example you want to use
curl https://codeload.github.com/mlaursen/react-md/tar.gz/main | tar -xz --strip=2 react-md-main/examples/EXAMPLE_NAME
cd EXAMPLE_NAMENext, install any dependencies:
npm install
# or with yarn
yarnNext, initialize the git repository and add the first commit:
git init
git add .
git commit -m "Initial commit"Finally, follow any instructions in the README.md about how to run the
specific example.
07/21/2020 (749 days ago)
07/11/2020 (759 days ago)
This release added a new and improved dark mode that can be used by enabling a
new $rmd-theme-dark-mode-elevation variable.
AppBar text color now defaults to
rmd-theme-var(text-primary-on-background) (2c3ea5e)07/10/2020 (760 days ago)
This is a very small release that just fixed adding @react-md/form as a dependency to @react-md/layout (e83b296)
07/07/2020 (763 days ago)
This release fixed a few styling issues for the @react-md/form package and correctly
passing the disabled prop to the TextField's <input> element:
06/30/2020 (770 days ago)
This release focused on fixing bundle sizes with webpack as well as increasing
build performance with the sideEffects field for each package.json. For more
information, check out the v2.0.2 release PR #877 which goes into details about
build time and sizing changes.
This release also includes the following changes:
06/17/2020 (783 days ago)
This is technically a breaking change for the UMD bundle since this splits the material-icon component wrappers into separate bundles to minimize the library's size. I'm going with a patch bump though since it's only been two days since the v2 release and it's highly doubtful that consumers of the library have fully upgraded to v2 or even using the UMD bundle to begin with.
react-md will now be available as these bundles:
ReactMD library:
https://unpkg.com/react-md@2.0.1/dist/umd/react-md.production.min.jsReactMD with *FontIcon components:
https://unpkg.com/react-md@2.0.1/dist/umd/react-md-with-font-icons.production.min.jsReactMD with *SVGIcon components:
https://unpkg.com/react-md@2.0.1/dist/umd/react-md-with-svg-icons.production.min.jsThe advanced installation guide and the library size notes have been updated for this information.
06/15/2020 (785 days ago)
The v2 release is a complete re-write of react-md to address the majority of problems encountered while using v1. Unfortunately, this took a lot longer than I had hoped since I ended up using this project to learn Typescript as well as the new React hooks API. Even though there are some missing components from v1, I think the new functionality outweighs it and the components are scoped for a later release.
The 2.0.0 release of react-md features: