All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
5.1.6 (2023-12-11)
Note: Version bump only for package @react-md/layout
5.1.4 (2022-06-16)
Note: Version bump only for package @react-md/layout
5.1.3 (2022-05-07)
- @react-md/layout: fix spelling of
DEFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES
(2d20a2e)
- fix typos throughout codebase (725d1a2)
- typos: fix additional typos throughout repo (ef20132)
5.1.2 (2022-04-02)
- @react-md/layout: Update snapshots after updating tree component (ec84800)
5.1.1 (2022-04-01)
Note: Version bump only for package @react-md/layout
5.1.0 (2022-03-18)
- run lint-scripts --fix for consistent-type-imports (42d839d)
5.0.0 (2022-01-31)
- feat!(menu): Implemented new Menu API (c27bf55)
- Menu buttons will no longer open by pressing the
ArrowUp
orArrowDown
keys. - The
DropdownMenu
component no longer accepts a list ofitems
and instead thechildren
should be theMenuItem
components. - The
DropdownMenu
component no longer supports themenuRenderer
anditemRenderer
props. Instead, there is built-in support for conditionally rendering as aSheet
component using therenderAsSheet
prop. - The
DropdownMenu
component now requires a parentAppSizeListener
because of the conditionalSheet
rendering functionality. This might require updating your tests to either use theConfiguration
component from@react-md/layout
(recommended) or adding theAppSizeListener
to tests that includeDropdownMenu
s. - The
DropdownMenuItem
component is no longer required for nested dropdown menus and is an "internal" component instead that shouldn't really be used. - The
MenuItemSeparator
now renders as an<li>
instead of an<hr>
or<div>
. - The
useContextMenu
now returns an object instead of an ordered list. - Using any of the
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 theDropdownMenu
orMenu
components.
4.0.3 (2021-12-31)
- Update tests to use jest.mocked (4bb25fb)
- Updated all packages' peerDependenciesMeta (60fcd71), closes #1319
4.0.2 (2021-11-30)
Note: Version bump only for package @react-md/layout
4.0.1 (2021-11-27)
- @react-md/layout: Added fixes required for Concurrent Rendering (c0b29a8)
- Updated imports to use
import type
when possible (ba96bb6)
4.0.0 (2021-11-24)
- Update to use new JSX Transform and latest
eslint
(8111cd3) - @react-md/transition: No longer use findDOMNode for transitions (cb952da)
- @react-md/typography: Renamed Text to
Typography
(30cf056)
- always skip lib check (229cef1)
- Updated remaining docs and tests for
react-router-dom
v6 (e012ef9) - react-md: Remove prop-types package and usage (2637a6f)
- Minimum React version is now 16.14 instead of 16.8
- @react-md/typography: The Text component has been renamed to Typography to
help with auto-imports conflicting with the Text element that exists in
lib.d.ts
- react-md: There will no longer be run-time prop validation with
the
prop-types
package.
3.1.0 (2021-09-10)
- typescript: updated all array types to be readonly (8f71bcb)
- ran
yarn format
to include new files (48d3d7f)
3.0.1 (2021-08-15)
3.0.0 (2021-08-13)
- @react-md/tooltip: removed TooltipHoverModeConfig component (664ec30)
- @react-md/utils: removed InteractionModeListener alias (216c8ef)
- @react-md/utils: Removed
InteractionModeListener
since it was an alias forUserInteractionModeListener
- @react-md/tooltip: Removed
TooltipHoverModeConfig
component
2.9.1 (2021-07-27)
- @react-md/layout: Do not unmount children when swapping to non-fixed appbar mini layouts (64103c8), closes #1207
- install: slighly reduce install size by excluding tests in publish (9d01a44)
2.9.0 (2021-07-18)
- @react-md/layout:
useLayoutNavigation
possible perf fix (3d65e4e)
- @react-md/layout: Added additional test coverage (7c123ef)
2.8.5 (2021-07-03)
Note: Version bump only for package @react-md/layout
2.8.4 (2021-06-10)
- ran
prettier
after upgrading to v2.3.0 (3ce236a)
2.8.3 (2021-05-18)
- @react-md/layout: Added fixedAppBar flag into the
useLayoutConfig
(14e6587) - @react-md/layout: Mini Layouts Align Icons with Hamburger
Menu
in Dense Mode (abbe9a9) - @react-md/layout: non-fixed
AppBar
mini layouts (84313fc), closes #1101 - @react-md/layout: Offset for temporary mini layouts (86e75bf)
- react-md.dev: updated tsdoc to work with
typedoc
(cf54c35)
2.8.2 (2021-04-23)
Note: Version bump only for package @react-md/layout
2.8.1 (2021-04-23)
Note: Version bump only for package @react-md/layout
2.8.0 (2021-04-22)
- @react-md/layout: Updated
Configuration
to use newHoverModeProvider
(357f2bf) - tsconfig: separate tsconfig by package instead of a single root (b278230)
2.7.1 (2021-03-23)
- ts: stopped using FC type (c5daa47)
2.7.0 (2021-02-28)
- @react-md/layout: added support for mini layouts (36b3cbc)
- tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
- tsdoc: fixed some tsdoc annotations and styling (0449b86)
- tsdoc: updated @since annotations (c62027e)
- updated test coverage to not include conditional component PropTypes (24e5df1)
2.6.0 (2021-02-13)
- @react-md/layout: floating layout has correct color in dark theme (7fa6b0c)
- @react-md/layout: toggleable layout title now aligns with persistent layouts (8b8efb2)
- @react-md/layout: added prop to control toggleable layouts default visibility (6e4a06d), closes #1066
- @react-md/utils: refactored UserInteractionMode hooks and components (af72791)
2.5.5 (2021-01-30)
Note: Version bump only for package @react-md/layout
2.5.4 (2021-01-27)
Note: Version bump only for package @react-md/layout
2.5.3 (2021-01-12)
Note: Version bump only for package @react-md/layout
2.5.2 (2021-01-12)
Note: Version bump only for package @react-md/layout
2.5.1 (2020-12-16)
Note: Version bump only for package @react-md/layout
2.5.0 (2020-12-15)
Note: Version bump only for package @react-md/layout
2.4.3 (2020-11-14)
Note: Version bump only for package @react-md/layout
2.4.2 (2020-10-23)
Note: Version bump only for package @react-md/layout
2.4.1 (2020-10-17)
Note: Version bump only for package @react-md/layout
2.4.0 (2020-10-17)
- @react-md/theme: Better Contrast Colors by Default and dev-utils refactor (#955) (519b128)
- @react-md/utils: added
Dir
component to help determine current writing direction (a929e04)
2.3.1 (2020-09-15)
Note: Version bump only for package @react-md/layout
2.3.0 (2020-09-10)
- @react-md/utils: added
Dir
component to help determine current writing direction (a929e04)
2.2.2 (2020-09-02)
Note: Version bump only for package @react-md/layout
2.2.1 (2020-09-02)
Note: Version bump only for package @react-md/layout
2.2.0 (2020-08-11)
Note: Version bump only for package @react-md/layout
2.1.2 (2020-08-01)
Note: Version bump only for package @react-md/layout
2.1.1 (2020-07-21)
Note: Version bump only for package @react-md/layout
2.1.0 (2020-07-12)
Note: Version bump only for package @react-md/layout
2.0.4 (2020-07-10)
- Added @react-md/form as a dependency to @react-md/layout (e83b296)
2.0.2 (2020-06-30)
- LICENSE: Removed the time range from license since it was incorrect (50c9021)
- Added
sideEffects
field topackage.json
(31820b9) sideEffects
formatting (78a7b6b)
No changes.
This package is kind of a replacement for the NavigationDrawer
component that
also now has a top-level Configuration
provider for react-md
.
- every part of the layout is now completely configurable by exporting multiple
layout components along with a
<name>Props
configuration object - better built-in support for rendering navigation trees with the new
useLayoutNavigation
hook andLayoutTree
component - when the persistent navigation panel toggles in and out of view, the title and main content will now correctly use the same animation timing as the panel
- the layout will no longer animate while switching layout types due to resizing and instead will update instantly
- a new
useLayoutConfig
hook that allows controlled the layout for additional customization - new exported utils for determining what the current layout type is being rendered as
- keyboard focus behavior is now correctly maintained while toggling the temporary and persistent layout types
- all the icon buttons now have a default
aria-label
for toggling the temporary and persistent layouts - the
<main>
element will now gain a focus box-shadow while being keyboard focused - the
<main>
element will only gain atabIndex={-1}
while in keyboard mode so that clicking anywhere in the<main>
content will not re-focus the main element. This is super nice since it allows you to click somewhere within the<main>
element and presstab
to focus the closest focusable element
Everything is a really a breaking change since the components were re-written and the API has changed, but here are a few notable points:
- this release does not have a
mini
variant for the temporary and persistent layout types. Themini
variant will be added in a following release once I figure out a better way to handle these types along with keyboard movement - the
Layout
has no functionality for determining your current app size since it was moved to the @react-md/utils package asAppSizeListener
anduseAppSize
- removed the static
getCurrentMedia
function from the component - removed the
DrawerType
andDrawerTypes
static enums from the component
$rmd-layout-enter-duration: $rmd-sheet-enter-duration !default
- the duration when the toggleable navigation panel comes into view$rmd-layout-leave-duration: $rmd-sheet-leave-duration !default
- the duration when the toggleable navigation panel leaves the view$rmd-layout-main-focus-shadow: $rmd-states-focus-shadow !default
- the box-shadow to use when the<main>
element has been keyboard focused$rmd-layout-main-focus-z-index: 999 !default
- the z-index for the<main>
element when it has been keyboard focused$rmd-layout-navigation-z-index: $rmd-dialog-z-index !default
- the z-index for the navigation pane$rmd-layout-navigation-width: $rmd-sheet-static-width !default
- the width to use for the desktop persistent navigation panel$rmd-layout-mini-navigation-width: 4.5rem !default
- the width to use for the mini navigation tree. Note: currently not implemented@function rmd-layout-theme-var
- gets one of the theme values as a css variable with a fallback value and validates that the theme name is valid@mixin rmd-layout-theme
- applies one of the theme values to a css property as a css variable@mixin rmd-layout-theme-update-var
- updates one of the theme values as a css variable
- removed
$md-navigation-drawer-enforce-height
since it is no longer used - removed
$md-navigation-drawer-use-view-height
since it lead to a lot of problems - removed
$md-navigation-drawer-include-cross-fade
,$md-cross-fade-transition-time
, and$md-cross-fade-distance
since this is now part of the @react-md/transition package - removed
$md-navigation-drawer-title-offset
since this is automatically calculated with CSS variables