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

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/progress/CircularProgress.tsx

@@ -115,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.
  *

package/src/sheet/Sheet.tsx

@@ -1,43 +1,23 @@
 "use client";
 import { forwardRef } from "react";
 import { Dialog, type BaseDialogProps } from "../dialog/Dialog.js";
-import {
-  type CSSTransitionClassNames,
-  type TransitionTimeout,
-} from "../transition/types.js";
 import { type LabelRequiredForA11y } from "../types.js";
-import { sheet, type BaseSheetClassNameOptions } from "./styles.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-sheet-height"?: string | number;
-    "--rmd-sheet-width"?: string | number;
-    "--rmd-sheet-max-height"?: string | number;
-    "--rmd-sheet-touch-width"?: string | number;
-    "--rmd-sheet-touch-max-height"?: string | number;
-    "--rmd-sheet-static-width"?: string | number;
-    "--rmd-sheet-transform-offscreen"?: string | number;
-    "--rmd-sheet-z-index"?: number;
-  }
-}
-
-export const DEFAULT_SHEET_TIMEOUT: Readonly<TransitionTimeout> = {
-  enter: 200,
-  exit: 150,
-};
-
-export const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
-  appear: "rmd-sheet--offscreen",
-  appearActive: "rmd-sheet--enter rmd-sheet--visible",
-  enter: "rmd-sheet--offscreen",
-  enterActive: "rmd-sheet--enter rmd-sheet--visible",
-  exit: "rmd-sheet--exit",
-  exitActive: "rmd-sheet--offscreen",
-  exitDone: "rmd-sheet--offscreen rmd-sheet--hidden",
-};
+import {
+  DEFAULT_SHEET_CLASSNAMES,
+  DEFAULT_SHEET_TIMEOUT,
+  sheet,
+  type BaseSheetClassNameOptions,
+} from "./styles.js";
 
+/**
+ * @since 6.0.0
+ */
 export type SheetDialogProps = Omit<BaseDialogProps, "role" | "type" | "modal">;
 
+/**
+ * @since 6.0.0 extends the `SheetDialogProps` instead of `AllowedDialogProps`
+ * and exports the `SheetDialogProps`.
+ */
 export interface BaseSheetProps
   extends SheetDialogProps,
     BaseSheetClassNameOptions {
@@ -59,6 +39,29 @@ export type SheetProps = LabelRequiredForA11y<BaseSheetProps>;
 /**
  * **Client Component**
  *
+ * The `Sheet` component is a {@link Dialog} that is fixed to the top, right,
+ * bottom, or left of the viewport.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Sheet } from "@react-md/core/sheet/Sheet";
+ * import { useToggle } from "@react-md/core/useToggle";
+ * import { type ReactElement } from "react";
+ *
+ * export function Example(): ReactElement {
+ *   const { toggled, disable, enable } = useToggle();
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={enable}>Show</Button>
+ *       <Sheet aria-label="Customization" visible={toggled} onRequestClose={disable}>
+ *         Whatever Content
+ *       </Sheet>
+ *     </>
+ *   );
+ * }
+ * ```
  */
 export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
   function Sheet(props, ref) {

package/src/sheet/styles.ts

@@ -1,6 +1,41 @@
 import { cnb } from "cnbuilder";
+import {
+  type CSSTransitionClassNames,
+  type TransitionTimeout,
+} from "../transition/types.js";
 import { bem } from "../utils/bem.js";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type BaseDialogProps } from "../dialog/Dialog.js";
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-sheet-height"?: string | number;
+    "--rmd-sheet-width"?: string | number;
+    "--rmd-sheet-max-height"?: string | number;
+    "--rmd-sheet-touch-width"?: string | number;
+    "--rmd-sheet-touch-max-height"?: string | number;
+    "--rmd-sheet-static-width"?: string | number;
+    "--rmd-sheet-transform-offscreen"?: string | number;
+    "--rmd-sheet-z-index"?: number;
+  }
+}
+
+export const DEFAULT_SHEET_TIMEOUT: Readonly<TransitionTimeout> = {
+  enter: 200,
+  exit: 150,
+};
+
+export const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
+  appear: "rmd-sheet--offscreen",
+  appearActive: "rmd-sheet--enter rmd-sheet--visible",
+  enter: "rmd-sheet--offscreen",
+  enterActive: "rmd-sheet--enter rmd-sheet--visible",
+  exit: "rmd-sheet--exit",
+  exitActive: "rmd-sheet--offscreen",
+  exitDone: "rmd-sheet--offscreen rmd-sheet--hidden",
+};
+
 const styles = bem("rmd-sheet");
 
 /**
@@ -62,7 +97,22 @@ export interface BaseSheetClassNameOptions {
  * @internal
  */
 export interface SheetClassNameOptions extends BaseSheetClassNameOptions {
+  /**
+   * Set this to `true` if the sheet is rendered, but not visible.
+   *
+   * This isn't actually used since it is hard coded in {@link DEFAULT_SHEET_CLASSNAMES}.
+   *
+   * @defaultValue `false`
+   */
   offscreen?: boolean;
+
+  /**
+   * Set this to `true` to disable the overlay behind the sheet and any
+   * additional box-shadow that would be applied to the sheet.
+   *
+   * @see {@link BaseDialogProps.disableOverlay}
+   * @defaultValue `false`
+   */
   disableOverlay?: boolean;
 }
 

package/src/suspense/CircularProgressSuspense.tsx

@@ -16,8 +16,6 @@ export interface CircularProgressSuspenseProps extends CircularProgressProps {
 }
 
 /**
- * **Server Component**
- *
  * This is just a convenience component to set the `fallback` to the
  * {@link CircularProgress} component.
  *

package/src/suspense/NullSuspense.tsx

@@ -8,8 +8,6 @@ export interface NullSuspenseProps {
 }
 
 /**
- * **Server Component**
- *
  * This is just a convenience component to set the `fallback` to `null`.
  *
  * @example Simple Example

package/src/table/TableCellContent.tsx

@@ -54,9 +54,6 @@ export interface TableCellContentProps
 const styles = bem("rmd-table-cell");
 
 /**
- * **Server Component**
- * This might actually be a client component.
- *
  * This is mostly an internal component since it is automatically used within
  * the `TableCell` component but this will conditionally wrap the `children`
  * within an `UnstyledButton` to make a clickable cell. This is really to help

package/src/tabs/Tab.tsx

@@ -79,6 +79,9 @@ export interface TabButtonProps
   as?: "button";
 }
 
+/**
+ * @since 6.0.0
+ */
 export interface TabLinkProps
   extends BaseTabProps,
     AnchorHTMLAttributes<HTMLAnchorElement> {

package/src/tabs/TabListScrollButton.tsx

@@ -98,7 +98,11 @@ export const TabListScrollButton = forwardRef<
           applyRef(instance, ref);
           root.current = instance?.parentElement || null;
         }}
-        className={tabListScrollButtonContainer({ forward, className })}
+        className={tabListScrollButtonContainer({
+          forward,
+          vertical,
+          className,
+        })}
       >
         <Button
           aria-label={ariaLabel || (iconButton ? type : undefined)}
@@ -107,7 +111,10 @@ export const TabListScrollButton = forwardRef<
           buttonType={buttonType}
           disabled={propDisabled || disabled}
           {...buttonProps}
-          className={tabListScrollButton(buttonProps)}
+          className={tabListScrollButton({
+            className: buttonProps?.className,
+            vertical,
+          })}
           onClick={(event) => {
             buttonProps?.onClick?.(event);
             const container = root.current;

package/src/tabs/tabListScrollButtonStyles.ts

@@ -9,6 +9,7 @@ const styles = bem("rmd-tablist-button");
 export interface TabListScrollButtonContainerClassNameOptions {
   className?: string;
   forward: boolean;
+  vertical?: boolean;
 }
 
 /**
@@ -17,12 +18,14 @@ export interface TabListScrollButtonContainerClassNameOptions {
 export function tabListScrollButtonContainer(
   options: TabListScrollButtonContainerClassNameOptions
 ): string {
-  const { forward, className } = options;
+  const { forward, vertical, className } = options;
 
   return cnb(
     styles({
-      left: !forward,
-      right: forward,
+      left: !vertical && !forward,
+      right: !vertical && forward,
+      above: vertical && !forward,
+      below: vertical && forward,
     }),
     className
   );
@@ -33,6 +36,7 @@ export function tabListScrollButtonContainer(
  */
 export interface TabListScrollButtonClassNameOptions {
   className?: string;
+  vertical?: boolean;
 }
 
 /**
@@ -41,7 +45,7 @@ export interface TabListScrollButtonClassNameOptions {
 export function tabListScrollButton(
   options: TabListScrollButtonClassNameOptions = {}
 ): string {
-  const { className } = options;
+  const { className, vertical } = options;
 
-  return cnb(styles("button"), className);
+  return cnb(styles("button", { v: vertical }), className);
 }

package/src/tabs/useTabList.ts

@@ -65,11 +65,13 @@ export interface TabListHookReturnValue {
     ref: RefObject<HTMLDivElement>;
     type: "back";
     vertical: boolean;
+    disableTransition?: boolean;
   };
   forwardProps: {
     ref: RefObject<HTMLDivElement>;
     type: "forward";
     vertical: boolean;
+    disableTransition?: boolean;
   };
 }
 
@@ -206,11 +208,13 @@ export function useTabList(
       ref: backwardRef,
       type: "back",
       vertical,
+      disableTransition,
     },
     forwardProps: {
       ref: forwardRef,
       type: "forward",
       vertical,
+      disableTransition,
     },
     movementContext,
   };