@react-md/portal
Advanced tools
Changelog
5.1.0 (2022-03-18)
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)Changelog
5.0.0 (2022-01-31)
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 MenuItem
s 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 key
s.
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/layout
DropdownMenu
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)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 DropdownMenu
s.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
, HoverModeOnlyReturnValue
MenuItem
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.Changelog
4.0.3 (2021-12-31)
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)Changelog
4.0.1 (2021-11-27)
getPercentage
to optionally not throw errors (ff8a1d6)Changelog
4.0.0 (2021-11-24)
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/preset
Since 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.ts
prop-types
package.Changelog
3.1.0 (2021-09-10)
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)Changelog
3.0.0 (2021-08-13)
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 sass
Or with yarn
yarn add react-md
yarn remove node-sass
yarn add sass
In 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, #1214, or 958f34f for more in-depth examples.
$rmd-theme-dark-elevation
now defaults to true
instead of false
node-sass
is no longer supported and users must switch to sass
InteractionModeListener
since it was an alias for UserInteractionModeListener
ResizeObserver
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)Changelog
2.8.3 (2021-05-18)
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)Changelog
2.8.0 (2021-04-22)
FixedDialog
applies style
prop (bb4ad2f)Form
Menu
Item Components (fed2b9f)useFixedPositioning
to merge style objects (1ab84d7)useFixedPositioning
to support fixedTo ref (ced550a)isFocusable
util (1d92472)typescript
version to v4.2.3 (b094b36)Menu
With Form
Controls Demo (dbc2d21)Tooltip
Hook Example (9783c44)Tooltip
Hook documentation (5447f64)HoverModeProvider
documentation (f42c65c)SwitchTrack
and InputToggleIcon
components (d9278b3)MenuItemRadio
usage to be wrapped in a group for a11y (01caa0b)Configuration
to use new HoverModeProvider
(357f2bf)useTooltip
code (0a6aed9)Tooltip
to use new Hover Mode (386f47b)useOnUnmount
(c758982)