chore: additional pre-release fixes

Author: mlaursen

apps/docs/src/app/(main)/components/material-icons-and-symbols/HowToUseSheet.tsx

@@ -2,15 +2,24 @@
 
 import { useAppSize } from "@react-md/core/media-queries/AppSizeProvider";
 import { Sheet } from "@react-md/core/sheet/Sheet";
+import { NullSuspense } from "@react-md/core/suspense/NullSuspense";
 import { cnb } from "cnbuilder";
+import dynamic from "next/dynamic.js";
 import { type ReactElement } from "react";
 
 import { DesktopOnly } from "./DesktopOnly.jsx";
 import styles from "./HowToUseSheet.module.scss";
 import { HowToUseSheetContent } from "./HowToUseSheetContent.jsx";
 import { HowToUseSheetHeader } from "./HowToUseSheetHeader.jsx";
 import { useMaterialIconsAndSymbols } from "./MaterialIconsAndSymbolsProvider.jsx";
-import { ResizeHowToUseSheet } from "./ResizeHowToUseSheet.jsx";
+
+const ResizeHowToUseSheet = dynamic(
+  () =>
+    import("./ResizeHowToUseSheet.jsx").then((mod) => mod.ResizeHowToUseSheet),
+  {
+    ssr: false,
+  }
+);
 
 export interface HowToUseSheetProps {
   className: string;
@@ -32,9 +41,11 @@ export function HowToUseSheet(props: HowToUseSheetProps): ReactElement {
       disableOverlay={isDesktop}
       disableScrollLock={isDesktop}
     >
-      <DesktopOnly>
-        <ResizeHowToUseSheet />
-      </DesktopOnly>
+      <NullSuspense>
+        <DesktopOnly>
+          <ResizeHowToUseSheet />
+        </DesktopOnly>
+      </NullSuspense>
       <HowToUseSheetHeader />
       <HowToUseSheetContent />
     </Sheet>

packages/codemod/src/transforms/v5-to-v6/coreExportMap.ts

@@ -97,10 +97,16 @@ export const TYPES: ReadonlySet<string> = new Set([
   "BEMModifier",
   "BEMResult",
   "BoxAlignItems",
+  "BoxBreakpoints",
   "BoxFlexDirection",
+  "BoxGridBreakpointColumns",
+  "BoxGridBreakpointItemSize",
+  "BoxGridColumns",
   "BoxJustifyContent",
   "BoxOptions",
   "BoxProps",
+  "BoxStyles",
+  "BoxStylesOptions",
   "BuildTreeOptions",
   "ButtonClassNameOptions",
   "ButtonClassNameThemeOptions",
@@ -1053,6 +1059,7 @@ export const VARIABLES: ReadonlySet<string> = new Set([
   "BOTTOM_RIGHT_ANCHOR",
   "Box",
   "box",
+  "boxStyles",
   "brown50",
   "brown100",
   "brown200",
@@ -1790,6 +1797,7 @@ export const VARIABLES: ReadonlySet<string> = new Set([
   "useHoverMode",
   "useHoverModeProvider",
   "useHtmlClassName",
+  "useInlineCSSVariables",
   "useIntersectionObserver",
   "useIsomorphicLayoutEffect",
   "useKeyboardMovementContext",
@@ -2067,10 +2075,17 @@ export const EXPORT_MAP: Record<string, string> = {
   Box: "@react-md/core/box/Box",
   box: "@react-md/core/box/styles",
   BoxAlignItems: "@react-md/core/box/styles",
+  BoxBreakpoints: "@react-md/core/box/styles",
   BoxFlexDirection: "@react-md/core/box/styles",
+  BoxGridBreakpointColumns: "@react-md/core/box/styles",
+  BoxGridBreakpointItemSize: "@react-md/core/box/styles",
+  BoxGridColumns: "@react-md/core/box/styles",
   BoxJustifyContent: "@react-md/core/box/styles",
   BoxOptions: "@react-md/core/box/styles",
   BoxProps: "@react-md/core/box/Box",
+  BoxStyles: "@react-md/core/box/styles",
+  boxStyles: "@react-md/core/box/styles",
+  BoxStylesOptions: "@react-md/core/box/styles",
   brown50: "@react-md/core/theme/colors",
   brown100: "@react-md/core/theme/colors",
   brown200: "@react-md/core/theme/colors",
@@ -3728,6 +3743,7 @@ export const EXPORT_MAP: Record<string, string> = {
   useHoverMode: "@react-md/core/hoverMode/useHoverMode",
   useHoverModeProvider: "@react-md/core/hoverMode/useHoverModeProvider",
   useHtmlClassName: "@react-md/core/useHtmlClassName",
+  useInlineCSSVariables: "@react-md/core/theme/useInlineCSSVariables",
   useIntersectionObserver: "@react-md/core/useIntersectionObserver",
   useIsomorphicLayoutEffect: "@react-md/core/useIsomorphicLayoutEffect",
   useKeyboardMovementContext:

packages/core/src/box/_box.scss

@@ -3,7 +3,6 @@
 ////
 
 @use "sass:map";
-@use "sass:list";
 @use "../utils";
 @use "../media-queries/media-queries";
 
@@ -132,23 +131,24 @@ $item-min-size: 8rem !default;
 /// @type Map
 $grids: () !default;
 
+/// @type Map
 /// @access private
 $_breakpoints: (
   phone: (
-    $disable-phone-columns,
-    $disable-phone-min-item-size,
+    columns: $disable-phone-columns,
+    size: $disable-phone-min-item-size,
   ),
   tablet: (
-    $disable-tablet-columns,
-    $disable-tablet-min-item-size,
+    columns: $disable-tablet-columns,
+    size: $disable-tablet-min-item-size,
   ),
   desktop: (
-    $disable-desktop-columns,
-    $disable-desktop-min-item-size,
+    columns: $disable-desktop-columns,
+    size: $disable-desktop-min-item-size,
   ),
   large-desktop: (
-    $disable-large-desktop-columns,
-    $disable-large-desktop-min-item-size,
+    columns: $disable-large-desktop-columns,
+    size: $disable-large-desktop-min-item-size,
   ),
 );
 
@@ -356,8 +356,8 @@ $variables: (
 
           @each $media, $feature-flags in $_breakpoints {
             @include media-queries.media-or-media-query($media) {
-              $disable-columns: list.nth($feature-flags, 1);
-              $disable-size: list.nth($feature-flags, 2);
+              $disable-columns: map.get($feature-flags, columns);
+              $disable-size: map.nth($feature-flags, size);
               @if not $disable-columns {
                 &--grid-#{$media} {
                   @include set-var(columns, get-var($media + "-columns"));

packages/react-md/src/index.ts

@@ -320,6 +320,7 @@ export * from "@react-md/core/theme/useColorScheme";
 export * from "@react-md/core/theme/useColorSchemeMetaTag";
 export * from "@react-md/core/theme/useColorSchemeProvider";
 export * from "@react-md/core/theme/useCSSVariables";
+export * from "@react-md/core/theme/useInlineCSSVariables";
 export * from "@react-md/core/theme/usePrefersDarkTheme";
 export * from "@react-md/core/theme/utils";
 export * from "@react-md/core/tooltip/constants";

packages/sassdoc-generator/src/formatVariableItem.ts

@@ -15,7 +15,12 @@ export async function formatVariableItem(
 ): Promise<FormattedVariableItem> {
   const { type } = item;
   const { scope, value } = item.context;
-  assertValidVariableDataType(type);
+  try {
+    assertValidVariableDataType(type);
+  } catch (e) {
+    console.error(`${item.context.name} has an invalid type!`);
+    throw e;
+  }
 
   let compiled: string | undefined;
   if (isCompileable(value)) {