@react-md/[email protected]

---

"@react-md/core": patch

• Fixed the Button icon-square border-radius

• Added the missing custom properties to the CSSProperties interface

• Fixed the NativeSelect base styles

• Fixed the TextArea and NativeSelect addon position styles

• Bumped safe dependencies to latest

@react-md/[email protected]

---

"@react-md/core": minor

This release focused on some form improvements as I work towards the full date,
time, and datetime component implementations.

• The useTextField and useNumberField automatically reset on a form reset event

• The FormMessageContainer can now be rendered inline

• Added useDateField and NativeDateField component for simple date behavior

• Added useTimeField and NativeTimeField component for simple time behavior

• Refactored movement behavior to provide actions allowing for more reuse in complex widgets

• Increased test coverage

@react-md/[email protected]

---

"@react-md/core": patch

Fixed the Select component not showing the focus outline behavior after splitting form styles into separate files.

@react-md/[email protected]

---

"@react-md/core": minor
"@react-md/material-icons": minor
"react-md": minor

Features

• All hooks, components, and utils that required a TextExtractor now support item.name and item.label by default
  • Autocomplete
  • alphaNumericSort
  • fuzzySearch
  • caseInsensitiveSearch
• The Avatar color can now be type-safe with module augmentation and the new AvatarColorOverrides interface
• The Box gridName can now be type-safe with module augmentation and the new BoxGridNameOverrides interface
• Added missing circularProgress and linearProgress class name utility functions
• (internal): Updated the PropsWithRef utility type to automatically infer the element type

@react-md/[email protected]

Features

• prioritize theme and typography variables in dev tools
• add border-radius and spacing variables to match latest design tokens

Internal

• Throw an error if parseCssLengthUnit is not a number unit
• Update Algolia searching behavior
• Update examples to latest
• Update deps to latest

@react-md/[email protected]

---

"@react-md/core": patch
"@react-md/material-icons": patch
"react-md": patch

• do not allow clear button to be clickable while hidden
• update controllable hooks/components to show the correct prop name instead of only showing value
• update source comments to use https://react-md.dev instead of https://next.react-md.dev

@react-md/[email protected]

---

"@react-md/core": patch
"@react-md/material-icons": patch
"react-md": patch

Fixed the media-queries using map.nth instead of map.get after switching from list.nth.

@react-md/[email protected]

---

"@react-md/codemod": major
"@react-md/core": major
"@react-md/material-icons": major
"react-md": major

This is a major rework release for react-md with lots of features, breaking changes, and bugfixes. There were over 1200 commits, so I won't really list everything here.

Check out the release notes or a small summary below:

This is probably one of the most useful components to be added to react-md. The Box component is a wrapper around the CSS box model for display: flex and display: grid and can be used to implement most of the DOM structure or layout without custom styling.

With the introduction of the Box component, the Grid, GridCell, GridList, and GridListCell components have been removed. See the Material Grid Example for an example using the Box component.

All the available icons can be found using the new Material Icons and Symbols page.

The @react-md/material-icons package has been updated to support the latest material icons but only through SVG icons. To continue using font icons, either use the new MaterialIcon component or the FontIcon component.

Material symbols can be used through the new MaterialSymbol component that supports customizing the weight, grade, and optical size globally, for a section of the app, or one offs.

If you've used react-md in the past, you'll probably know that the Autocomplete "worked" but wasn't user friendly or useful. With this version of react-md, the Autocomplete has been remade to improve the user experience by acting more like an editable Select component. So the Autocomplete is more in line with the react-select and the material-ui Autocomplete.

Here's a quick summary of the new changes:

• The default behavior requires a valid option to be selected and will reset to
  the last valid option or an empty string
• Multiple values are now supported with optional inline chips or checkboxes
• Circular progress bars are now supported
• The selected option and input value can both be controlled
• The component API should hopefully make more sense without the
  getResultLabel, getResultValue, ... whatever I was doing before
• More type safety

Check out the new Autocomplete demos to see more!

The toasts and alerts have been updated so toasts can be shown from anywhere instead of only within React components with the useAddToast hook. Toasts can now be created by importing the new addToast function.

import { Snackbar } from "@react-md/core/snackbar/Snackbar";
import { addToast } from "@react-md/core/snackbar/ToastManager";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import "./index.scss";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Snackbar />
  </StrictMode>
);

// doesn't need to be called from react components!
window.setTimeout(() => {
  addToast({ children: "Hello, world!" });
}, 3000);

Some other new features for snackbars and toasts are:

• supports the theme colors
• allows configuring the visible time on a per-toast basis
• the toast timeout pauses while the user hovers the toast
• multiple toasts can be rendered at once
• new customization through a custom toast renderer prop

Check out the new snackbar demos to see more!

The dark mode has been improved so that the interaction states are now visible by default when switching to the dark mode. The following images show the normal, hover, then focus states for a button with the dark theme enabled.

Other native elements like the <select> should also update based on the dark mode color scheme.

The Slider component has been simplified and now only requires a value and
setValue to use. Due to these changes, the RangeSlider is no longer
required and has been merged into the Slider component.

In addition, the Slider component now supports rendering marks below to help show where specific values are within the range.

Tooltips now support being shown only if there is overflow text. Check out the Overflow Only Tooltip demo for more information!

A simple objectFit utility function has been created for styling images, videos, and other media types. This should be able to replace most of the MediaContainer / ResponsiveItem usage in your app with better styling behavior.

The Tab components have been updated to support:

• scrolling with buttons instead of the
  hidden scrollbar option that existed before
• being rendered vertically
• maintaining a consistent tab panel height using the new
  useMaxTabPanelHeight hook

The Tree component has been updated with a few new customization options like the expansionMode which allows the child
tree items to only become visible after clicking the icon instead of anywhere in the tree item.

The CircularProgress and LinearProgress components now support the primary, secondary, warning, success, error, and current-color themes.

Most components now expose a class name utility function to provide styles without using the component itself. The naming conventions are to use a camelCasedName instead of PascalCased. For example:

• button for the Button component
• expansionPanel for the ExpansionPanel component
• typography for the Typography component

In addition, a general cssUtils helper has been created for common styling.

New polyfills and test utils are now provided that integrate with jest and vitest to improve testing. Check out the testing quickstart guide on how to get started.

A few new components and hooks have been added:

• AsyncButton
• CircularProgressSuspense
• ColorSchemeProvider
• ClickableCard
• ErrorBoundary
• HighlighText
• Mark
• Navigation
• NoSsr
• NullSuspense
• RenderRecursively
• RootHtml
• SegmentedButton
• SkeletonPlaceholder
• Slide
• StickyTableSection
• TooltippedButton
• WindowSplitter
• useActiveHeadingId
• useAsyncFunction
• useCSSVariables
• useInlineCSSVariables
• useCarousel
• useColorScheme
• useDebouncedFunction
• useElementSize
• useHtmlClassName
• useIntersectionObserver
• useMutationObserver
• usePrefersDarkTheme
• useReadonlySet
• useResizableLayout
• useStorage
• useTableOfContentsHeadings
• useThrottledFunction
• useWindowSize

The documentation site has been remade to hopefully improve finding information with the following changes:

• Navigation is based on component, hook, or feature instead of package.
• Examples and demos have been trimmed down to focus on a single feature and
  file at a time. There are a few more complex examples near the end.
• Most examples and demos can be edited and previewed within the website
  instead of needing to create a codesandbox
• The code editor theme can be configured in the global settings menu

The Checkbox and Radio components no longer use some hacky CSS to overlay the checked icon state to show the unchecked state. Instead, both icons are rendered and toggled using CSS and the :checked state allowing for easier customization.

If a react-md component is imported that uses C...

@react-md/[email protected]

---

"@react-md/codemod": patch

Fixed the tabs codemod reporting on all files.

@react-md/[email protected]

---

"@react-md/codemod": patch

Trying to remove bin field in package.json