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

package/src/positioning/useFixedPositioning.ts

@@ -15,7 +15,11 @@ import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
 import { BELOW_CENTER_ANCHOR } from "./constants.js";
 import { getFixedPosition } from "./getFixedPosition.js";
-import { type CalculateFixedPositionOptions } from "./types.js";
+import {
+  type CalculateFixedPositionOptions,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type FixedPositionStyle,
+} from "./types.js";
 import { isWithinViewport } from "./utils.js";
 
 const noop = (): undefined => undefined;
@@ -109,7 +113,7 @@ export interface FixedPositioningOptions<
    * some options require the element to be in the DOM for specific
    * calculations.
    */
-  getFixedPositionOptions?(): CalculateFixedPositionOptions;
+  getFixedPositionOptions?: () => CalculateFixedPositionOptions;
 
   /**
    * An optional function to call if the page resizes while the `FixedElement`
@@ -118,6 +122,17 @@ export interface FixedPositioningOptions<
   onResize?: EventListener;
   /** @see {@link TransitionScrollCallback} */
   onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;
+
+  /**
+   * Set this to `true` to disable the fixed positioning behavior so it can be
+   * customized within CSS or manually instead. This was added mostly to just
+   * support rendering menus inline with other content (like autocompletes
+   * within a dialog).
+   *
+   * @defaultValue `false`
+   * @since 6.0.0
+   */
+  disabled?: boolean;
 }
 
 /**
@@ -135,9 +150,12 @@ export interface FixedPositioningHookReturnValue<E extends HTMLElement> {
   ref: RefCallback<E>;
 
   /**
-   * @see {@link FixedPositionStyle}
+   * This is the {@link FixedPositionStyle} merged with the
+   * {@link FixedPositioningOptions.style}. This will only return `undefined`
+   * when {@link FixedPositioningOptions.disabled} is `true` and no `style` was
+   * provided.
    */
-  style: CSSProperties;
+  style: CSSProperties | undefined;
 
   /**
    * This should really only be used if the {@link transitionOptions} is not
@@ -148,7 +166,7 @@ export interface FixedPositioningHookReturnValue<E extends HTMLElement> {
   /**
    * A function that can be called to update the style for the fixed element.
    */
-  updateStyle(): void;
+  updateStyle: () => void;
 
   /** {@inheritDoc FixedPositioningTransitionOptions} */
   transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;
@@ -219,6 +237,7 @@ export function useFixedPositioning<
     style: propStyle,
     nodeRef,
     fixedTo,
+    disabled,
     onEnter = noop,
     onEntering = noop,
     onEntered = noop,
@@ -310,6 +329,10 @@ export function useFixedPositioning<
   );
 
   const updateStyle = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
     const {
       ref,
       fixedTo,
@@ -348,12 +371,12 @@ export function useFixedPositioning<
     setStyle(style);
     setActive(!!element && !element.hidden);
 
-    // Only changing the initialX and initialY should cause the useEffect below
-    // to trigger, which is why everything else is set in a ref.
-  }, [initialX, initialY]);
+    // Only changing the initialX, initialY, or disabled should cause the
+    // useEffect below to trigger, which is why everything else is set in a ref.
+  }, [disabled, initialX, initialY]);
 
   useEffect(() => {
-    if (!active) {
+    if (!active || disabled) {
       return;
     }
 
@@ -385,7 +408,7 @@ export function useFixedPositioning<
       resizeHandler.remove(resizeCallback);
       scrollHandler.remove(scrollCallback);
     };
-  }, [active, fixedTo, onResize, onScroll, ref, updateStyle]);
+  }, [active, disabled, fixedTo, onResize, onScroll, ref, updateStyle]);
 
   const callbacks: Required<FixedPositioningTransitionCallbacks> = {
     onEnter(appearing) {
@@ -408,7 +431,7 @@ export function useFixedPositioning<
 
   return {
     ref: refHandler,
-    style: { ...style, ...propStyle },
+    style: disabled ? propStyle : { ...style, ...propStyle },
     callbacks,
     updateStyle,
     transitionOptions: {

package/src/responsive-item/ResponsiveItem.tsx

@@ -0,0 +1,96 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import {
+  responsiveItem,
+  type ResponsiveItemClassNameOptions,
+} from "./responsiveItemStyles.js";
+
+/**
+ * @since 6.0.0 Renamed from `MediaContainerProps` to
+ * `ResponsiveItemProps`
+ * @since 6.0.0 The `height` and `width` props were removed in favor of the
+ * `aspectRatio` props since the latest typescript string interpolation supports
+ * enforcing the correct format.
+ * @since 6.0.0 The `auto` prop was removed in favor of the new
+ * {@link ResponsiveItemProps.responsive} prop.
+ */
+export interface ResponsiveItemProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    ResponsiveItemClassNameOptions {}
+
+/**
+ * @example Image Example
+ * ```tsx
+ * import { ResponsiveItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <ResponsiveItem>
+ *       <img alt="" src="/some-image.png" />
+ *     </ResponsiveItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example Iframe Example
+ * ```tsx
+ * import { ResponsiveItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <ResponsiveItem>
+ *       <iframe
+ *         src="https://youtube.com/some-video-url"
+ *         title="Some YouTube video"
+ *         allowFullScreen
+ *       />
+ *     </ResponsiveItem>
+ *   );
+ * }
+ * ```
+ *
+ * @example Forced Aspect Ratio
+ * ```tsx
+ * import { ResponsiveItem } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <ResponsiveItem aspectRatio="16-9">
+ *       <img alt="" src="/some-image.png" />
+ *     </ResponsiveItem>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0 Renamed from `MediaContainer` to
+ * `ResponsiveItem` and renders a `<span>` instead of a `<div>`.
+ */
+export const ResponsiveItem = forwardRef<HTMLSpanElement, ResponsiveItemProps>(
+  function ResponsiveItem(props, ref) {
+    const {
+      className,
+      fullWidth = false,
+      aspectRatio,
+      responsive = "auto",
+      children,
+      ...remaining
+    } = props;
+
+    return (
+      <span
+        {...remaining}
+        ref={ref}
+        className={responsiveItem({
+          className,
+          fullWidth,
+          aspectRatio,
+          responsive,
+        })}
+      >
+        {children}
+      </span>
+    );
+  }
+);

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

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/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/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.
    *
@@ -126,6 +127,7 @@ export function Tab(props: TabProps): ReactElement {
     onTouchStart,
     onTouchEnd,
     onTouchMove,
+    disableRipple,
     ...remaining
   } = props as TabButtonProps;
   const { disabled } = props as TabButtonProps;
@@ -133,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