• Fixed Sass variable issues and other CSS tweaks.

The next v6 alpha release.

Changes

AppBar

• Updated AppBar to use the Box component and additional cssUtils
• Added a $nav-keyline variable for the AppBarTitle offset

Avatar

• Fixed the color prop definition

Badge

• Simplified the offset variables

Button

• Added a TooltippedButton component

Card

• Added a ClickableCard component
• Fixed the CardSubtitle color

Dialog

• Fixed the background colors

Divider

• Removed the vertical-sizing variable and updated the vertical divider to update the same way as a horizontal divider

Expansion Panel

• Renamed preventAllClosed to preventAllCollapsed to better match naming schemes

Form

• Updated MenuItemInputToggle to use multiline instead of threeLines
• Fixed the Select focus behavior when rendering within a Sheet

Icon

• Fixed the styling for the IconRotator by setting the default rotate variables
• Fixed the styling for the IconSpacing component when using above or below

List

• Renamed threeLines to multiline and updated the CSS variables to match
• Fixed some styling by correctly passing all props down
• Added the ability to disable the spacing for the left addons

Portal

• Updated PortalContainerProvider to support a RefObject

Table

• Fixed the TableCheckbox and TableRadio components to be client components instead of server components

Tabs

• Added support for rendering vertically
• Added support to render a tab as a link instead of a button
• Renamed the --rmd-tab-width to --rmd-tab-size

Tooltip

• Fixed some type definition issues for event handlers

Transition

• Updated SkeletonPlaceholder to forwardRef
• Updated SkeletonPlaceholder and useSkeletonPlaceholder to support animation-delay
• Added randomSkeletonPlaceholder util to generate SSR-only skeletons
• Fixed the naming of the Sass variables since they weren't prefixed by transition-

Tree

• Fixed the type definitions for the DefaultTreeItemRenderer for the data prop after switching to RenderRecursively
• Fixed the Tree components to start the --rmd-tree-depth at 0 instead of -1
• Removed the --padded style since it's no longer needed

Typography

• Updated the base typography to default to overflow-wrap: break-word
• Fixed the TextContainer styling to include the padding in the line length

Other

• Uses :has selectors and :focus-visible since all major browsers support them now
• Uses @media(hover: hover) and (pointer: fine) for hover states instead of .mouse-mode
• Refactored some draggable utils and fixed bugs around dragging
• Added a useElementSize wrapper for the useResizeObserver hook
• Fixed useElementSize to trigger immediately on mount
• Updated useWindowSize to support SSR values

Bug Fixes

• @react-md/chip: add overflow to support font icons (da44bbd), closes #1432
• select: port fixed positioning fixes back from v6.0.0 (feb9ec6), closes #1461

Documentation

• react-md.dev: update blog to include additional releases (b305882)

Bug Fixes

• @react-md/autocomplete: Prevent event default when pressing enter with open AutoComplete (#1439) (c505642)

Documentation

• fix material-icons after SSR (8417216), closes #1423

Library Size Changes

yarn dev-utils libsize

The gzipped UMD bundle sizes are:
 - dist/umd/react-md.production.min.js 92.34 kB (+ 78 B)
 - dist/umd/react-md-with-font-icons.production.min.js 211.32 kB (+ 734 B)
 - dist/umd/react-md-with-svg-icons.production.min.js 211.38 kB (+ 735 B)

The min and max gzipped CSS bundle sizes are:
 - themes/react-md.grey-red-700-light.min.css 18.08 kB
 - themes/react-md.lime-teal-200-dark.min.css 18.15 kB

Bug Fixes

• @react-md/autocomplete: Prevent event default when pressing enter with open AutoComplete (#1439) (50c3472)

Library Size Changes

yarn dev-utils libsize

The gzipped UMD bundle sizes are:
 - dist/umd/react-md.production.min.js 87.48 kB
 - dist/umd/react-md-with-font-icons.production.min.js 112.79 kB
 - dist/umd/react-md-with-svg-icons.production.min.js 180.13 kB

The min and max gzipped CSS bundle sizes are:
 - themes/react-md.grey-red-700-light.min.css 18.04 kB
 - themes/react-md.lime-teal-200-dark.min.css 18.11 kB

Bug Fixes

• @react-md/autocomplete: Prevent event default when pressing enter with open AutoComplete (#1439) (4dd3794)

Library Size Changes

yarn dev-utils libsize

The gzipped UMD bundle sizes are:
 - dist/umd/react-md.production.min.js 86.75 KB
 - dist/umd/react-md-with-font-icons.production.min.js 111.03 KB
 - dist/umd/react-md-with-svg-icons.production.min.js 176.83 KB

The min and max gzipped CSS bundle sizes are:
 - themes/react-md.grey-red-700-light.min.css 17.63 KB
 - themes/react-md.lime-teal-200-dark.min.css 17.7 KB

Bug Fixes

• @react-md/autocomplete: Prevent event default when pressing enter with open AutoComplete (#1439) (f03548a)

Library Size Changes

yarn dev-utils libsize

The gizipped UMD bundle sizes are:
 - dist/umd/react-md.production.min.js 86.98 KB
 - dist/umd/react-md-with-font-icons.production.min.js 111.26 KB
 - dist/umd/react-md-with-svg-icons.production.min.js 177.04 KB

The min and max gzipped CSS bundle sizes are:
 - themes/react-md.grey-red-700-light.min.css 17.57 KB
 - themes/react-md.lime-teal-200-dark.min.css 17.63 KB

Bug Fixes

• add missing dependencies (5329812)

Library Size Changes

yarn dev-utils libsize

The gzipped UMD bundle sizes are:
 - dist/umd/react-md.production.min.js 91.56 kB
 - dist/umd/react-md-with-font-icons.production.min.js 203.98 kB
 - dist/umd/react-md-with-svg-icons.production.min.js 204.03 kB

The min and max gzipped CSS bundle sizes are:
 - themes/react-md.grey-red-700-light.min.css 18.08 kB
 - themes/react-md.lime-teal-200-dark.min.css 18.15 kB

Bug Fixes

• @react-md/button: do not shrink in flex containers (66bf6e0)
• @react-md/card: fix spelling of raisable and deprecate raiseable prop (453023b)
• @react-md/form: fix typo for transparent in disabled toggle hover color (7346587)
• @react-md/layout: fix spelling of DEFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES (2d20a2e)
• @react-md/utils: fix spelling of DropzoneHandlers (6ba510b)

Documentation

• fix typos throughout codebase (725d1a2)
• @react-md/form: Add simple examples for Select/NativeSelect (05358f5), closes #1396

Other Internal Changes

• @react-md/autocomplete: fix typos in utils tests (c0333cc)
• react-md.dev: correctly render escaped html in markdown (8a523cb)
• react-md.dev: fix text color for animating app bar (01ec1af)
• typos: fix additional typos throughout repo (ef20132)

Library Size Changes

yarn dev-utils libsize

The gzipped UMD bundle sizes are:
 - dist/umd/react-md.production.min.js 91.56 kB (+ 20 B)
 - dist/umd/react-md-with-font-icons.production.min.js 203.98 kB (+ 8.79 kB)
 - dist/umd/react-md-with-svg-icons.production.min.js 204.03 kB (+ 2.11 kB)

The min and max gzipped CSS bundle sizes are:
 - themes/react-md.grey-red-700-light.min.css 18.08 kB (+ 5 B)
 - themes/react-md.lime-teal-200-dark.min.css 18.15 kB (+ 5 B)

Bug Fixes

• @react-md/tabs: Scroll tabs correctly in RTL mode (a23d708), closes #1356

Other Internal Changes

• @react-md/layout: Update snapshots after updating tree component (ec84800)
• @react-md/utils: Update keyboard movement (71d1343)
• react-md.dev: useIsomorphicLayoutEffect to hide SSR warning (aa0d3cd)
• react-md.dev: Fix BadgedButton documentation (b147a88)
• react-md.dev: Update Light/Dark Theme Toggle Icons (60a8825)
• react-md.dev: useLayoutEffect for page transitions (638c8ec)

Library Size Changes

yarn dev-utils libsize

The gzipped UMD bundle sizes are:
 - dist/umd/react-md.production.min.js 91.36 kB (- 40 B)
 - dist/umd/react-md-with-font-icons.production.min.js 116.03 kB (- 38 B)
 - dist/umd/react-md-with-svg-icons.production.min.js 182.89 kB (- 38 B)

The min and max gzipped CSS bundle sizes are:
 - themes/react-md.grey-red-700-light.min.css 18.03 kB
 - themes/react-md.lime-teal-200-dark.min.css 18.1 kB