@react-md/core 1.0.0-next.14 → 1.0.0-next.16

package/src/icon/styles.ts

@@ -117,7 +117,7 @@ export function icon(options: IconClassNameOptions): string {
       svg: isSvg,
       font: isFont || isMaterial,
       symbol: isSymbol,
-      vab: inline,
+      vam: inline,
       dense,
     }),
     isSymbol && `material-symbols-${family}`,

package/src/interaction/RippleContainer.tsx

@@ -16,8 +16,6 @@ export interface RippleContainerProps extends ProvidedRippleContainerProps {
 }
 
 /**
- * **Server Component**
- *
  * This component should generally only be used internally within `react-md`
  * unless you are implementing a custom component interaction with
  * `useElementInteraction`.

package/src/layout/LayoutNav.tsx

@@ -4,8 +4,9 @@ import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import {
   DEFAULT_SHEET_CLASSNAMES,
   DEFAULT_SHEET_TIMEOUT,
-} from "../sheet/Sheet.js";
-import { sheet, type BaseSheetClassNameOptions } from "../sheet/styles.js";
+  sheet,
+  type BaseSheetClassNameOptions,
+} from "../sheet/styles.js";
 import {
   type CSSTransitionClassNames,
   type TransitionActions,

package/src/layout/useHorizontalLayoutTransition.ts

@@ -1,6 +1,6 @@
 "use client";
 import { cnb } from "cnbuilder";
-import { DEFAULT_SHEET_TIMEOUT } from "../sheet/Sheet.js";
+import { DEFAULT_SHEET_TIMEOUT } from "../sheet/styles.js";
 import {
   type CSSTransitionClassNames,
   type CSSTransitionHookReturnValue,

package/src/layout/useLayoutTree.ts

@@ -4,7 +4,7 @@ import { type TreeProps } from "../tree/Tree.js";
 import {
   type DefaultTreeItemNode,
   type TreeData,
-  type TreeItemDefaultIds,
+  type TreeDefaultIds,
   type TreeItemNode,
 } from "../tree/types.js";
 import { type TreeImplementation } from "../tree/useTree.js";
@@ -75,7 +75,7 @@ export interface LayoutTreeOptions<
   /**
    * @defaultValue `getParentIds(pathname, navItems)`
    */
-  defaultExpandedIds?: TreeItemDefaultIds;
+  defaultExpandedIds?: TreeDefaultIds;
 }
 
 /**

package/src/link/Link.tsx

@@ -27,8 +27,7 @@ export type CustomLinkComponent =
  * @since 6.0.0 Removed the `component` prop since all you need for link
  * behavior is `className="rmd-link"`.
  * @since 6.0.0 The `href` prop is required.
- * @since 6.0.0 Removed the `flexCentered` prop since it is now the default
- * styles.
+ * @since 6.0.0 Renamed `flexCentered` to `flex`.
  */
 export interface LinkProps
   extends AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -49,8 +48,6 @@ export interface LinkProps
 }
 
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { Link, Typography } from "@react-md/core";
@@ -72,8 +69,7 @@ export interface LinkProps
  * @since 6.0.0 Removed the `component` prop since all you need for link
  * behavior is `className="rmd-link"`.
  * @since 6.0.0 The `href` prop is required.
- * @since 6.0.0 Removed the `flexCentered` prop since it is now the default
- * styles.
+ * @since 6.0.0 Renamed `flexCentered` to `flex`.
  */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   function Link(props, ref) {

package/src/link/SkipToMainContent.tsx

@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useRef, type ReactNode } from "react";
 import { Link, type LinkProps } from "./Link.js";
 import {
   skipToMainContent,
-  type SKipToMainContentClassNameOptions,
+  type SkipToMainContentClassNameOptions,
 } from "./styles.js";
 
 const noop = (): void => {
@@ -16,11 +16,15 @@ const getMainElement = (mainId: string): HTMLElement | null =>
     : document.querySelector<HTMLElement>('main,[role="main"]');
 
 /**
- * @since 6.0.0 The {@link mainId} is optional
+ * @since 6.0.0 The `mainId` is optional
  */
 export interface SkipToMainContentProps
   extends Omit<LinkProps, "href">,
-    SKipToMainContentClassNameOptions {
+    SkipToMainContentClassNameOptions {
+  /**
+   * @since 6.0.0 Changed default value from `"skip-to-main-content"`
+   * @defaultValue `"skip-to-main"`
+   */
   id?: string;
 
   /**
@@ -42,6 +46,9 @@ export interface SkipToMainContentProps
 /**
  * **Client Component**
  *
+ * @since 6.0.0 Changed the default `id` from `"skip-to-main-content"` to
+ * `"skip-to-main"`.
+ * @since 6.0.0 The `mainId` prop is optional
  * @since 6.0.0 Throws an error after rendering if no main element can be found
  * with the provided `mainId` in development mode. The previous behavior would
  * only log an error after being clicked.
@@ -56,7 +63,7 @@ export const SkipToMainContent = forwardRef<
     children = "Skip to main content",
     mainId = "",
     onClick = noop,
-    unstyled = false,
+    unstyled,
     ...remaining
   } = props;
 

package/src/link/styles.ts

@@ -24,7 +24,7 @@ export function link(options: LinkClassNameOptions = {}): string {
 }
 
 /** @since 6.0.0 */
-export interface SKipToMainContentClassNameOptions {
+export interface SkipToMainContentClassNameOptions {
   className?: string;
 
   /**
@@ -37,7 +37,7 @@ export interface SKipToMainContentClassNameOptions {
  * @since 6.0.0
  */
 export function skipToMainContent(
-  options: SKipToMainContentClassNameOptions = {}
+  options: SkipToMainContentClassNameOptions = {}
 ): string {
   const { unstyled = false, className } = options;
 

package/src/list/List.tsx

@@ -1,35 +1,5 @@
-import { cnb } from "cnbuilder";
 import { forwardRef, type HTMLAttributes } from "react";
-import { bem } from "../utils/bem.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-padding-h"?: string | number;
-    "--rmd-list-padding-v"?: string | number;
-  }
-}
-
-const styles = bem("rmd-list");
-
-/** @since 6.0.0 */
-export interface ListClassNameOptions {
-  className?: string;
-
-  /** @defaultValue `false` */
-  dense?: boolean;
-
-  /** @defaultValue `false` */
-  horizontal?: boolean;
-}
-
-/**
- * @since 6.0.0
- */
-export function list(options: ListClassNameOptions = {}): string {
-  const { dense = false, horizontal = false, className } = options;
-
-  return cnb(styles({ dense, horizontal }), className);
-}
+import { list } from "./listStyles.js";
 
 export type ListElement = HTMLUListElement | HTMLOListElement;
 
@@ -64,8 +34,6 @@ export interface ListProps extends HTMLAttributes<ListElement> {
 }
 
 /**
- * **Server Component**
- *
  * The `List` component is used to render a collection of clickable actions
  * vertically or horizontally and does not include the default `ol`/`ul` styles.
  *

package/src/list/ListItem.tsx

@@ -7,23 +7,6 @@ import { ListItemChildren } from "./ListItemChildren.js";
 import { listItem } from "./listItemStyles.js";
 import { type ListItemChildrenProps, type ListItemHeight } from "./types.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-item-keyline"?: string | number;
-    "--rmd-list-item-padding-h"?: string | number;
-    "--rmd-list-item-padding-v"?: string | number;
-    "--rmd-list-item-height"?: string | number;
-    "--rmd-list-item-medium-height"?: string | number;
-    "--rmd-list-item-large-height"?: string | number;
-    "--rmd-list-item-extra-large-height"?: string | number;
-    "--rmd-list-item-multiline-clamp"?: string | number;
-    "--rmd-list-item-multiline-height"?: string | number;
-    "--rmd-list-item-media-size"?: string | number;
-    "--rmd-list-item-media-spacing"?: string | number;
-    "--rmd-list-item-text-multiline-height"?: string | number;
-  }
-}
-
 /**
  * @since 6.0.0 Renamed `threeLines` to `multiline` since it can
  * support more than three lines of text.

package/src/list/ListItemAddon.tsx

@@ -23,8 +23,6 @@ export interface ListItemAddonProps
 }
 
 /**
- * **Server Component**
- *
  * The `ListItemAddon` is used to create an addon to the left or right of the
  * text/children of a `ListItem`.
  *

package/src/list/ListItemChildren.tsx

@@ -4,8 +4,6 @@ import { ListItemText } from "./ListItemText.js";
 import { type ListItemChildrenProps } from "./types.js";
 
 /**
- * **Server Component**
- *
  * The `ListItemChildren` component is used to create a styled list item that
  * can have optional addons to the left or right of the children in the form of
  * icons, avatars, or media. The `children` can be replaced by the `primaryText`

package/src/list/ListItemText.tsx

@@ -18,8 +18,6 @@ export interface ListItemTextProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 /**
- * **Server Component**
- *
  * This is mostly an internal component that can conditionally render secondary
  * text within list items.
  *

package/src/list/ListSubheader.tsx

@@ -30,6 +30,9 @@ export function listSubheader(
   return cnb(styles({ inset }), className);
 }
 
+/**
+ * @since 6.0.0 The `role` prop defaults to `"presentation"`
+ */
 export interface ListSubheaderProps
   extends HTMLAttributes<HTMLLIElement>,
     ListSubheaderClassNameOptions {
@@ -45,8 +48,6 @@ export interface ListSubheaderProps
 }
 
 /**
- * **Server Component**
- *
  * The `ListSubheader` is a wrapper for the `<li>` element to apply subheader
  * typography styles and {@link ListItemText} layout.
  */

package/src/list/getListItemHeight.ts

@@ -20,8 +20,8 @@ export interface ListItemHeightOptions
 }
 
 /**
- * Gets the expected height for the `ListItem` or `SimpleListItem` based on the
- * addons and `secondaryText` props.
+ * Gets the expected height for the `ListItem` based on the addons and
+ * `secondaryText` props.
  *
  * @see {@link ListItemHeight}
  * @internal

package/src/list/listItemStyles.ts

@@ -1,12 +1,29 @@
 import { cnb } from "cnbuilder";
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
-import type {
-  ListItemAddonPosition,
-  ListItemAddonType,
-  ListItemHeight,
+import {
+  type ListItemAddonPosition,
+  type ListItemAddonType,
+  type ListItemHeight,
 } from "./types.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-list-item-keyline"?: string | number;
+    "--rmd-list-item-padding-h"?: string | number;
+    "--rmd-list-item-padding-v"?: string | number;
+    "--rmd-list-item-height"?: string | number;
+    "--rmd-list-item-medium-height"?: string | number;
+    "--rmd-list-item-large-height"?: string | number;
+    "--rmd-list-item-extra-large-height"?: string | number;
+    "--rmd-list-item-multiline-clamp"?: string | number;
+    "--rmd-list-item-multiline-height"?: string | number;
+    "--rmd-list-item-media-size"?: string | number;
+    "--rmd-list-item-media-spacing"?: string | number;
+    "--rmd-list-item-text-multiline-height"?: string | number;
+  }
+}
+
 const styles = bem("rmd-list-item");
 
 /** @since 6.0.0 */

package/src/list/listStyles.ts

@@ -0,0 +1,31 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-list-padding-h"?: string | number;
+    "--rmd-list-padding-v"?: string | number;
+  }
+}
+
+const styles = bem("rmd-list");
+
+/** @since 6.0.0 */
+export interface ListClassNameOptions {
+  className?: string;
+
+  /** @defaultValue `false` */
+  dense?: boolean;
+
+  /** @defaultValue `false` */
+  horizontal?: boolean;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function list(options: ListClassNameOptions = {}): string {
+  const { dense = false, horizontal = false, className } = options;
+
+  return cnb(styles({ dense, horizontal }), className);
+}

package/src/list/types.ts

@@ -147,9 +147,9 @@ export interface ListItemChildrenAddonProps {
  */
 export interface ListItemChildrenTextProps {
   /**
-   * The main content to display. When the `textChildren` prop is enabled and
-   * there is child content, it will be treated as primary text and update the
-   * styles automatically.
+   * The main content to display that defaults to being wrapped in the
+   * `ListItemText` component. Enable the {@link disableTextChildren} prop to
+   * render without the additional `ListItemText` wrapper.
    */
   children?: ReactNode;
 
@@ -222,6 +222,12 @@ export interface ListItemChildrenTextProps {
   multiline?: boolean;
 }
 
+/**
+ * @since 6.0.0 Extends the `ListItemChildrenTextProps` and
+ * `ListItemChildrenAddonProps` interfaces.
+ * @since 6.0.0 Added `textProps` and `secondaryTextClassName`
+ * @since 6.0.0 Renamed `textChildren` to `disableTextChildren`
+ */
 export interface ListItemChildrenProps
   extends ListItemChildrenTextProps,
     ListItemChildrenAddonProps {}

package/src/media-queries/AppSizeProvider.tsx

@@ -65,10 +65,16 @@ export function useAppSize(): Readonly<AppSize> {
   return appSize;
 }
 
+/**
+ * @since 6.0.0 Renamed from `AppSizeListenerProps`.
+ * @since 6.0.0 Removed the `onChange` prop
+ * @since 6.0.0 Renamed `defaultSize` to `ssrSize`
+ */
 export interface AppSizeProviderProps extends AppSizeQueries {
   /**
    * @defaultValue `DEFAULT_APP_SIZE`
    * @see {@link DEFAULT_APP_SIZE}
+   * @since 6.0.0
    */
   ssrSize?: Readonly<AppSize>;
   children: ReactNode;
@@ -79,6 +85,8 @@ export interface AppSizeProviderProps extends AppSizeQueries {
  *
  * This component should be mounted near the root of your app to determine the
  * current app size based on different media queries.
+ *
+ * @since 6.0.0 Renamed from `AppSizeListener`
  */
 export function AppSizeProvider(props: AppSizeProviderProps): ReactElement {
   const {

package/src/media-queries/useMediaQuery.ts

@@ -19,7 +19,7 @@ import { useSsr } from "../SsrProvider.js";
  * @param disabled - When `true`, the `window.matchMedia` API will not be
  * activated and the hook will always return `false`.
  * @returns `true` if the media query matches
- * @since 6.0.0
+ * @since 6.0.0 Removed the `defaultValue` and `checkImmediately` options.
  */
 export function useMediaQuery(query: string, disabled = false): boolean {
   const ssr = useSsr();

package/src/menu/MenuConfigurationProvider.tsx

@@ -127,9 +127,9 @@ export function useMenuConfiguration(
     horizontal: horizontal ?? inherited.horizontal,
     renderAsSheet: renderAsSheet ?? inherited.renderAsSheet,
     sheetHeader:
-      sheetHeader === null ? null : sheetHeader ?? inherited.sheetHeader,
+      sheetHeader === null ? null : (sheetHeader ?? inherited.sheetHeader),
     sheetFooter:
-      sheetFooter === null ? null : sheetFooter ?? inherited.sheetFooter,
+      sheetFooter === null ? null : (sheetFooter ?? inherited.sheetFooter),
     sheetPosition: sheetPosition ?? inherited.sheetPosition,
     sheetVerticalSize: sheetVerticalSize ?? inherited.sheetVerticalSize,
   };

package/src/navigation/NavGroup.tsx

@@ -11,8 +11,6 @@ export interface NavGroupProps extends ListProps {
 }
 
 /**
- * **Server Component**
- *
  * A simple wrapper around the {@link Link} component that ads the
  * `--rmd-tree-depth: depth` custom property to allow for incremented padding.
  *

package/src/navigation/NavItem.tsx

@@ -9,8 +9,6 @@ export interface NavItemProps extends LiHTMLAttributes<HTMLLIElement> {
 }
 
 /**
- * **Server Component**
- *
  * This component is just used to add padding based on the depth of the nav item
  * and should not be used on its own. See the `CollapsibleNavGroup` and
  * `NavItemLink` instead.

package/src/navigation/NavSubheader.tsx

@@ -11,8 +11,6 @@ import { navItem } from "./navItemStyles.js";
 export interface NavSubheaderProps extends ListSubheaderProps {}
 
 /**
- * **Server Component**
- *
  * A simple wrapper around the {@Link ListSubheader} that updates the padding
  * based on the current navigation item depth to match the other items.
  *

package/src/overlay/Overlay.tsx

@@ -16,6 +16,7 @@ import {
 
 /**
  * @since 6.0.0 Added `align` and `justify` props.
+ * @since 6.0.0 Renamed `hidden` to `noOpacity`.
  */
 export interface OverlayProps
   extends HTMLAttributes<HTMLSpanElement>,

package/src/portal/Portal.tsx

@@ -4,8 +4,13 @@ import { createPortal } from "react-dom";
 
 import { usePortalContainer } from "./PortalContainerProvider.js";
 
+/**
+ * @since 6.0.0 Removed the `into` and `intoId` props. Use the
+ * `PortalContainerProvider` instead.
+ */
 export interface PortalProps {
   children: ReactNode;
+
   /**
    * Setting this to `true` will disable the portal behavior and just render
    * the `children` in the normal DOM tree.

package/src/portal/PortalContainerProvider.tsx

@@ -13,16 +13,24 @@ import {
  * @internal
  * @since 6.0.0
  */
-export type PortalContainer = Element | DocumentFragment | null;
+export type PortalContainerNode = Element | DocumentFragment | null;
+
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export type PortalContainer =
+  | PortalContainerNode
+  | RefObject<PortalContainerNode>;
 
 export const PORTAL_CONTAINER_ID = "rmd-portal-container";
 
-let portalContainer: PortalContainer = null;
+let portalContainer: PortalContainerNode = null;
 
-const getPortalContainer = (): PortalContainer =>
+const getPortalContainer = (): PortalContainerNode =>
   typeof window === "undefined" ? null : document.body;
 
-const context = createContext<PortalContainer>(getPortalContainer());
+const context = createContext<PortalContainerNode>(getPortalContainer());
 context.displayName = "PortalContainer";
 const { Provider } = context;
 
@@ -30,7 +38,7 @@ const { Provider } = context;
  * @internal
  * @since 6.0.0
  */
-export function usePortalContainer(): PortalContainer {
+export function usePortalContainer(): PortalContainerNode {
   return useContext(context);
 }
 
@@ -41,7 +49,7 @@ export interface PortalContainerProviderProps {
    * `<div id="rmd-portal-container"></div>` will be added as the last child to
    * the `document.body` and be used as the container element.
    */
-  container?: PortalContainer | RefObject<PortalContainer>;
+  container?: PortalContainer;
   children: ReactNode;
 }
 
@@ -60,7 +68,7 @@ export function PortalContainerProvider(
   props: PortalContainerProviderProps
 ): ReactElement {
   const { container, children } = props;
-  const [value, setValue] = useState<PortalContainer>(portalContainer);
+  const [value, setValue] = useState<PortalContainerNode>(portalContainer);
   useEffect(() => {
     if (container && "current" in container) {
       setValue(container.current);
@@ -68,6 +76,7 @@ export function PortalContainerProvider(
     }
 
     if (typeof container !== "undefined") {
+      setValue(container);
       return;
     }
 

package/src/progress/CircularProgress.tsx

@@ -13,11 +13,11 @@ import { getPercentage } from "../utils/getPercentage.js";
 import { type ProgressProps } from "./types.js";
 
 /**
- * @since 6.0.0
- * Removed the `determinateRotateDegrees` prop since the determinate state no
+ * @since 6.0.0 Added the `disableShrink` prop.
+ * @since 6.0.0 Renamed `small` to `dense`.
+ * @since 6.0.0 Renamed `centered` to `disableCentered`.
+ * @since 6.0.0 Removed the `maxRotation` prop since the determinate state no
  * longer rotates while increasing value.
- * Added the `disableShrink` prop.
- * Renamed the `small` prop to `dense` to match other components.
  */
 export interface CircularProgressProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, "id">,
@@ -88,6 +88,7 @@ export interface CircularProgressProps
    * margins.
    *
    * @defaultValue `false`
+   * @since 6.0.0 Renamed from `centered`
    */
   disableCentered?: boolean;
 
@@ -114,8 +115,6 @@ export interface CircularProgressProps
 const styles = bem("rmd-circular-progress");
 
 /**
- * **Server Component**
- *
  * @example Indeterminate Example
  * ```tsx
  * import { CircularProgress } from "@react-md/core":

package/src/progress/LinearProgress.tsx

@@ -63,8 +63,6 @@ export interface LinearProgressProps
 const styles = bem("rmd-linear-progress");
 
 /**
- * **Server Component**
- *
  * @example Indeterminate Example
  * ```tsx
  * import { LinearProgress } from "@react-md/core";

package/src/responsive-item/ResponsiveItemContainer.tsx

@@ -95,8 +95,6 @@ export interface ResponsiveItemContainerProps
     ResponsiveItemContainerClassNameOptions {}
 
 /**
- * **Server Component**
- *
  * @example Image Example
  * ```tsx
  * import { ResponsiveItemContainer } from "@react-md/core";

package/src/responsive-item/ResponsiveItemOverlay.tsx

@@ -55,8 +55,6 @@ export interface ResponsiveItemOverlayProps
     ResponsiveItemOverlayClassNameOptions {}
 
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { ResponsiveItemContainer, ResponsiveItemOverlay } from "@react-md/core";

package/src/segmented-button/SegmentedButtonContainer.tsx

@@ -14,8 +14,6 @@ export interface SegmentedButtonContainerProps
 }
 
 /**
- * **Server Component**
- *
  * Simple wrapper `div` to apply the segmented button container styles. You can
  * just use the {@link segmentedButtonContainerStyles} util function instead.
  *