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

package/src/responsive-item/ResponsiveItemOverlay.tsx

@@ -1,50 +1,10 @@
-import { cnb } from "cnbuilder";
 import { forwardRef, type HTMLAttributes } from "react";
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-responsive-item-overlay");
-
-/**
- * The overlay positions relative to the `MediaContainer` component.  Most of
- * the sizes are self-explanatory, but the `middle` position will be centered
- * vertically while `center` will be centered `horizontally`.
- *
- * @since 6.0.0 Renamed from `MediaOverlayPosition` to
- * `ResponsiveItemOverlayProps`.
- */
-export type ResponsiveItemOverlayPosition =
-  | "top"
-  | "right"
-  | "bottom"
-  | "left"
-  | "middle"
-  | "center"
-  | "absolute-center";
-
-/** @since 6.0.0 */
-export interface ResponsiveItemOverlayClassNameOptions {
-  className?: string;
-  /** @defaultValue `"bottom"` */
-  position?: ResponsiveItemOverlayPosition;
-}
-
-/**
- * @since 6.0.0
- */
-export function responsiveItemOverlay(
-  options: ResponsiveItemOverlayClassNameOptions = {}
-): string {
-  const { className, position = "bottom" } = options;
-
-  return cnb(
-    styles({
-      [position]: true,
-      horizontal:
-        position !== "top" && position !== "bottom" && position !== "middle",
-    }),
-    className
-  );
-}
+import {
+  responsiveItemOverlay,
+  type ResponsiveItemOverlayClassNameOptions,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type ResponsiveItemOverlayPosition,
+} from "./responsiveItemOverlayStyles.js";
 
 /**
  * @since 6.0.0 Renamed from `MediaOverlayProps` to
@@ -55,8 +15,6 @@ export interface ResponsiveItemOverlayProps
     ResponsiveItemOverlayClassNameOptions {}
 
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { ResponsiveItemContainer, ResponsiveItemOverlay } from "@react-md/core";

package/src/responsive-item/responsiveItemOverlayStyles.ts

@@ -0,0 +1,46 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-responsive-item-overlay");
+
+/**
+ * The overlay positions relative to the `MediaContainer` component.  Most of
+ * the sizes are self-explanatory, but the `middle` position will be centered
+ * vertically while `center` will be centered `horizontally`.
+ *
+ * @since 6.0.0 Renamed from `MediaOverlayPosition` to
+ * `ResponsiveItemOverlayProps`.
+ */
+export type ResponsiveItemOverlayPosition =
+  | "top"
+  | "right"
+  | "bottom"
+  | "left"
+  | "middle"
+  | "center"
+  | "absolute-center";
+
+/** @since 6.0.0 */
+export interface ResponsiveItemOverlayClassNameOptions {
+  className?: string;
+  /** @defaultValue `"bottom"` */
+  position?: ResponsiveItemOverlayPosition;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function responsiveItemOverlay(
+  options: ResponsiveItemOverlayClassNameOptions = {}
+): string {
+  const { className, position = "bottom" } = options;
+
+  return cnb(
+    styles({
+      [position]: true,
+      horizontal:
+        position !== "top" && position !== "bottom" && position !== "middle",
+    }),
+    className
+  );
+}

package/src/responsive-item/responsiveItemStyles.ts

@@ -0,0 +1,81 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-responsive-item");
+
+/** @since 6.0.0 */
+export interface ResponsiveItemClassNameOptions {
+  className?: string;
+
+  /**
+   * Set this to `true` if the container should gain the following styles:
+   *
+   * ```scss
+   * display: block;
+   * width: 100%;
+   * ```
+   *
+   * @defaultValue `false`
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Set this to a custom aspect ratio to use.
+   *
+   * @example Valid Aspect Ratios
+   * ```tsx
+   * aspectRatio="16-9"
+   * aspectRatio="9-16"
+   * aspectRatio="3-4"
+   * aspectRatio="4-3"
+   * aspectRatio="1-1"
+   * ```
+   *
+   * These values are based on the `core.$responsive-item-aspect-ratios` map.
+   *
+   * @defaultValue `""`
+   */
+  aspectRatio?: `${number}-${number}`;
+
+  /**
+   * Set this to `"manual"` if you want to manually specify which elements are
+   * responsive items using custom class names. You probably don't really want
+   * to use this.
+   *
+   * Set this to `"auto"` to automatically update all visual media that appear
+   * as a child in this component to a responsive item.
+   *
+   * Set this to `"container"` to automatically update all visual media that
+   * appear as a child in this component to be a responsive item that scales to
+   * the container's dimensions.
+   *
+   * Note: The `"auto"` and `"container"` values use the
+   * `core.$responsive-item-selectors` value for their behavior.
+   *
+   * @defaultValue `"auto"`
+   */
+  responsive?: "auto" | "manual" | "container";
+}
+
+/** @since 6.0.0 */
+export function responsiveItem(
+  options: ResponsiveItemClassNameOptions = {}
+): string {
+  const {
+    className,
+    fullWidth = false,
+    aspectRatio = "",
+    responsive = "auto",
+  } = options;
+
+  return cnb(
+    styles({
+      auto: responsive !== "manual",
+      "auto-scale": responsive === "container",
+      "aspect-ratio": aspectRatio,
+      [aspectRatio]: aspectRatio,
+      "full-width": fullWidth,
+    }),
+    className
+  );
+}

package/src/scroll/useScrollLock.ts

@@ -2,6 +2,12 @@
 import { useEffect } from "react";
 import { getScrollbarWidth } from "./getScrollbarWidth.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-scrollbar-size"?: string;
+  }
+}
+
 export const SCROLLBAR_SIZE_VAR = "--rmd-scrollbar-size";
 
 // this is really just so that nested dialogs will work correctly. Only the

package/src/searching/utils.ts

@@ -7,8 +7,8 @@ import { type BaseSearchOptions } from "./types.js";
  * @internal
  */
 export const defaultExtractor =
-  <T>(name: string) =>
-  (item: T): string => {
+  (name: string) =>
+  (item: unknown): string => {
     if (typeof item === "string") {
       return item;
     }
@@ -24,7 +24,7 @@ export const defaultExtractor =
  */
 export interface SearchOptions<T> extends BaseSearchOptions<T> {
   type: "search" | "filter";
-  filter(query: string, value: string): boolean;
+  filter: (query: string, value: string) => boolean;
   extractor: TextExtractor<T>;
 }
 

package/src/segmented-button/SegmentedButton.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { getIcon } from "../icon/iconConfig.js";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { useMaxWidthTransition } from "../transition/useMaxWidthTransition.js";
@@ -10,7 +11,8 @@ import { segmentedButton } from "./segmentedButtonStyles.js";
  * @since 6.0.0
  */
 export interface SegmentedButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    ComponentWithRippleProps {
   /**
    * Set this to `true` to apply selected styles and an optional
    * {@link selectedIcon}
@@ -126,6 +128,7 @@ export const SegmentedButton = forwardRef<
     onTouchEnd,
     onTouchMove,
     disabled,
+    disableRipple,
     ...remaining
   } = props;
 
@@ -138,6 +141,7 @@ export const SegmentedButton = forwardRef<
     disableTransition: disableSelectedTransition,
   });
   const { pressedClassName, handlers, ripples } = useElementInteraction({
+    mode: disableRipple ? "none" : undefined,
     onBlur,
     onClick,
     onKeyDown,

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/snackbar/ToastManager.tsx

@@ -542,8 +542,9 @@ export const toastManager = new ToastManager();
  * @see {@link ToastManager.addToast}
  * @since 6.0.0
  */
-export const addToast: ToastManager["addToast"] = (toast) =>
+export const addToast: ToastManager["addToast"] = (toast) => {
   toastManager.addToast(toast);
+};
 
 /**
  * @see {@link ToastManager.startRemoveTimeout}
@@ -551,23 +552,33 @@ export const addToast: ToastManager["addToast"] = (toast) =>
  */
 export const startRemoveToastTimeout: ToastManager["startRemoveTimeout"] = (
   toastId
-) => toastManager.startRemoveTimeout(toastId);
+) => {
+  toastManager.startRemoveTimeout(toastId);
+};
 
 /**
  * @see {@link ToastManager.popToast}
  * @since 6.0.0
  */
-export const popToast: ToastManager["popToast"] = () => toastManager.popToast();
+export const popToast: ToastManager["popToast"] = () => {
+  toastManager.popToast();
+};
 
 /**
  * @see {@link ToastManager.removeToast}
  * @since 6.0.0
  */
-export const removeToast: ToastManager["removeToast"] = (toastId, transition) =>
+export const removeToast: ToastManager["removeToast"] = (
+  toastId,
+  transition
+) => {
   toastManager.removeToast(toastId, transition);
+};
 
 /**
  * @see {@link ToastManager.clearToasts}
  * @since 6.0.0
  */
-export const clearToasts = (): void => toastManager.clearToasts();
+export const clearToasts = (): void => {
+  toastManager.clearToasts();
+};

package/src/snackbar/useCurrentToastActions.ts

@@ -9,15 +9,15 @@ import { createContext, useContext } from "react";
  */
 export interface CurrentToastActions {
   /** @see {@link ToastManager.clearTimer} */
-  clearTimer(): void;
+  clearTimer: () => void;
   /** @see {@link ToastManager.removeToast} */
-  removeToast(transition: boolean): void;
+  removeToast: (transition: boolean) => void;
   /** @see {@link ToastManager.startRemoveTimeout} */
-  startRemoveTimeout(): void;
+  startRemoveTimeout: () => void;
   /** @see {@link ToastManager.pauseRemoveTimeout} */
-  pauseRemoveTimeout(): void;
+  pauseRemoveTimeout: () => void;
   /** @see {@link ToastManager.resumeRemoveTimeout} */
-  resumeRemoveTimeout(): void;
+  resumeRemoveTimeout: () => void;
 }
 
 const context = createContext<CurrentToastActions | null>(null);

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/table/tableCellStyles.ts

@@ -12,14 +12,18 @@ export interface TableCellClassNameOptions {
   /**
    * Set this to `true` if the cell is rendered as a `<th>` so that the correct
    * sticky styles can be applied.
+   *
+   * @defaultValue `false`
    */
-  header: boolean;
+  header?: boolean;
 
   /**
    * Set this to true if the cell is rendered in a `<thead>` so that the correct
    * sticky styles can be applied.
+   *
+   * @defaultValue `header`
    */
-  isInTableHeader: boolean;
+  isInTableHeader?: boolean;
 
   /** @defaultValue `false` */
   grow?: boolean;
@@ -45,17 +49,17 @@ export interface TableCellClassNameOptions {
 /**
  * @since 6.0.0
  */
-export function tableCell(options: TableCellClassNameOptions): string {
+export function tableCell(options: TableCellClassNameOptions = {}): string {
   const {
     grow,
     sticky,
     header,
     inputToggle,
-    hAlign,
-    vAlign,
+    hAlign = "left",
+    vAlign = "middle",
     lineWrap = true,
     padding = "horizontal",
-    isInTableHeader,
+    isInTableHeader = header,
     className,
   } = options;
 

package/src/tabs/Tab.tsx

@@ -5,6 +5,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { type CustomLinkComponent } from "../link/Link.js";
@@ -20,7 +21,7 @@ import { type TabListProps } from "./TabList.js";
 /**
  * @since 6.0.0
  */
-export interface BaseTabProps {
+export interface BaseTabProps extends ComponentWithRippleProps {
   /**
    * Set this to `true` if the tab is currently active.
    *
@@ -79,6 +80,9 @@ export interface TabButtonProps
   as?: "button";
 }
 
+/**
+ * @since 6.0.0
+ */
 export interface TabLinkProps
   extends BaseTabProps,
     AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -123,6 +127,7 @@ export function Tab(props: TabProps): ReactElement {
     onTouchStart,
     onTouchEnd,
     onTouchMove,
+    disableRipple,
     ...remaining
   } = props as TabButtonProps;
   const { disabled } = props as TabButtonProps;
@@ -130,6 +135,7 @@ export function Tab(props: TabProps): ReactElement {
   const id = useEnsuredId(propId, "tab");
   const { activeDescendantId } = useKeyboardMovementContext();
   const { ripples, handlers } = useElementInteraction({
+    mode: disableRipple ? "none" : undefined,
     onBlur,
     onClick,
     onKeyDown,

package/src/tabs/TabList.tsx

@@ -8,13 +8,13 @@ import {
 } from "react";
 import { useAppSize } from "../media-queries/AppSizeProvider.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
+import { type GetTabListScrollToOptions } from "./getTabListScrollToOptions.js";
 import {
   TabListScrollButton,
   type BaseTabListScrollButtonProps,
 } from "./TabListScrollButton.js";
 import { tabList, type TabsAlignment } from "./tabListStyles.js";
 import { useTabList } from "./useTabList.js";
-import { type GetTabListScrollToOptions } from "./utils.js";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type useTabs } from "./useTabs.js";
@@ -24,7 +24,7 @@ import { type useTabs } from "./useTabs.js";
  */
 export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
   activeIndex: number;
-  setActiveIndex(nextActiveIndex: number): void;
+  setActiveIndex: (nextActiveIndex: number) => void;
 
   /**
    * @defaultValue `"left"`

package/src/tabs/TabListScrollButton.tsx

@@ -13,14 +13,14 @@ import { type PropsWithRef } from "../types.js";
 import { useDir } from "../typography/WritingDirectionProvider.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
 import { applyRef } from "../utils/applyRef.js";
+import {
+  getTabListScrollToOptions,
+  type GetTabListScrollToOptions,
+} from "./getTabListScrollToOptions.js";
 import {
   tabListScrollButton,
   tabListScrollButtonContainer,
 } from "./tabListScrollButtonStyles.js";
-import {
-  getTabListScrollToOptions,
-  type GetTabListScrollToOptions,
-} from "./utils.js";
 
 /**
  * @internal
@@ -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;