All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
yarn format to include new files
(48d3d7f)InteractionModeListener since it was an alias
for UserInteractionModeListenerTooltipHoverModeConfig componentuseLayoutNavigation possible perf fix
(3d65e4e)Note: Version bump only for package @react-md/layout
prettier after upgrading to v2.3.0
(3ce236a)useLayoutConfig
(14e6587)Menu in Dense
Mode
(abbe9a9)AppBar mini layouts
(84313fc),
closes #1101typedoc
(cf54c35)Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Configuration to use new HoverModeProvider
(357f2bf)Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Dir component to
help determine current writing direction
(a929e04)Note: Version bump only for package @react-md/layout
Dir component to
help determine current writing direction
(a929e04)Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
Note: Version bump only for package @react-md/layout
sideEffects field to package.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.
<name>Props configuration objectuseLayoutNavigation hook and LayoutTree componentuseLayoutConfig hook that allows controlled the layout for additional
customizationaria-label for toggling the
temporary and persistent layouts<main> element will now gain a focus box-shadow while being keyboard
focused<main> element will only gain a tabIndex={-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 press tab to focus the closest focusable elementEverything is a really a breaking change since the components were re-written and the API has changed, but here are a few notable points:
mini variant for the temporary and persistent
layout types. The mini variant will be added in a following release once I
figure out a better way to handle these types along with keyboard movementLayout has no functionality for determining your current app size since
it was moved to the @react-md/utils package as AppSizeListener and
useAppSizegetCurrentMedia function from the componentDrawerType and DrawerTypes 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$md-navigation-drawer-enforce-height since it is no longer used$md-navigation-drawer-use-view-height since it lead to a lot of
problems$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$md-navigation-drawer-title-offset since this is automatically
calculated with CSS variables