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

package/src/badge/styles.ts

@@ -0,0 +1,45 @@
+import { cnb } from "cnbuilder";
+import { type BackgroundColor, cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-badge-size"?: string | number;
+    "--rmd-badge-offset"?: string | number;
+    "--rmd-badge-offset-top"?: string | number;
+    "--rmd-badge-offset-right"?: string | number;
+  }
+}
+
+const styles = bem("rmd-badge");
+
+/**
+ * @since 6.0.0 Renamed `"default"` to `"greyscale"` and added all
+ * theme colors.
+ */
+export type BadgeTheme = BackgroundColor | "greyscale" | "clear";
+
+/**
+ * @since 6.0.0
+ */
+export interface BadgeClassNameOptions {
+  className?: string;
+
+  /** @defaultValue `""greyscale` */
+  theme?: BadgeTheme;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function badge(options: BadgeClassNameOptions = {}): string {
+  const { className, theme = "greyscale" } = options;
+  const greyscale = theme === "greyscale";
+  const clear = theme === "clear";
+
+  return cnb(
+    styles({ greyscale }),
+    cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),
+    className
+  );
+}

package/src/box/Box.tsx

@@ -107,19 +107,20 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}
 export const Box = forwardRef<HTMLDivElement, BoxProps>(
   function Box(props, ref) {
     const {
+      style: propStyle,
       className,
       children,
       align,
-      grid = false,
-      style: propStyle,
-      gridName = "",
+      grid,
+      gridName,
       justify,
-      stacked = false,
-      reversed = false,
-      gridColumns = "fit",
-      fullWidth = false,
-      disableWrap = false,
-      disablePadding = false,
+      stacked,
+      reversed,
+      gridColumns,
+      fullWidth,
+      disableGap,
+      disableWrap,
+      disablePadding,
       ...remaining
     } = props;
 
@@ -146,6 +147,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
           align,
           justify,
           reversed,
+          disableGap,
           disableWrap,
           disablePadding,
         })}

package/src/box/styles.ts

@@ -58,6 +58,13 @@ export interface BoxOptions {
    */
   fullWidth?: boolean;
 
+  /**
+   * Set this to `true` to prevent gap between items.
+   *
+   * @defaultValue `false`
+   */
+  disableGap?: boolean;
+
   /**
    * Set this to `true` to set `flex-wrap: nowrap`.
    *
@@ -139,19 +146,21 @@ export function box(options: BoxOptions = {}): string {
   const {
     className,
     align = "",
-    grid = false,
+    grid,
     gridName = "",
     gridColumns = "fit",
     justify = "",
-    stacked = false,
+    stacked,
     reversed,
-    fullWidth = false,
-    disableWrap = false,
-    disablePadding = false,
+    fullWidth,
+    disableGap,
+    disableWrap,
+    disablePadding,
   } = options;
 
   return cnb(
     styles({
+      gap: !disableGap,
       wrap: !disableWrap,
       padded: !disablePadding,
       column: stacked && !reversed,

package/src/button/AsyncButton.tsx

@@ -47,7 +47,7 @@ export interface AsyncButtonProps extends ButtonProps {
    *
    * @defaultValue `() => {}`
    */
-  onClick?(event: MouseEvent<HTMLButtonElement>): Promise<void> | void;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => Promise<void> | void;
 
   /**
    * Set this to `true` to manually display a loading spinner.

package/src/button/Button.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { type PropsWithRef } from "../types.js";
@@ -12,7 +13,8 @@ import { button, type ButtonClassNameThemeOptions } from "./buttonStyles.js";
 
 export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    ButtonClassNameThemeOptions {
+    ButtonClassNameThemeOptions,
+    ComponentWithRippleProps {
   /** @defaultValue `"button"` */
   type?: "button" | "reset" | "submit";
 
@@ -137,12 +139,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onTouchStart,
       onTouchEnd,
       onTouchMove,
+      disableRipple,
       ...remaining
     } = props;
     const isThemeDisabled = theme === "disabled";
     const ariaDisabled = props["aria-disabled"];
     const { pressed, pressedClassName, ripples, handlers } =
       useElementInteraction({
+        mode: disableRipple ? "press" : undefined,
         onBlur,
         onClick,
         onKeyDown,

package/src/card/Card.tsx

@@ -1,4 +1,10 @@
 import { forwardRef, type HTMLAttributes } from "react";
+import { Box } from "../box/Box.js";
+import {
+  type BoxAlignItems,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type BoxOptions,
+} from "../box/styles.js";
 import { card, type CardClassNameOptions } from "./styles.js";
 
 declare module "react" {
@@ -15,7 +21,23 @@ declare module "react" {
  */
 export interface CardProps
   extends HTMLAttributes<HTMLDivElement>,
-    CardClassNameOptions {}
+    CardClassNameOptions {
+  /**
+   * @defaultValue `"stretch"`
+   */
+  align?: BoxAlignItems;
+
+  /**
+   * @defaultValue `"start"`
+   */
+  justify?: BoxAlignItems;
+
+  /**
+   * @see {@link BoxOptions.fullWidth}
+   * @defaultValue `false`
+   */
+  fullWidth?: boolean;
+}
 
 /**
  * @example Simple Example
@@ -54,12 +76,16 @@ export interface CardProps
  * ```
  *
  * @since 6.0.0 Removed the deprecated `raiseable` prop
+ * @since 6.0.0 Uses the `Box` component and displays as `flex` instead of
+ * `block`/`inline-block`.
  */
 export const Card = forwardRef<HTMLDivElement, CardProps>(
   function Card(props, ref) {
     const {
       children,
       className,
+      align = "stretch",
+      justify = "stretch",
       bordered,
       raisable,
       fullWidth,
@@ -68,19 +94,24 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
     } = props;
 
     return (
-      <div
+      <Box
         {...remaining}
+        align={align}
+        justify={justify}
+        stacked
+        fullWidth={fullWidth}
+        disableGap
+        disablePadding
         ref={ref}
         className={card({
           className,
           bordered,
           raisable,
-          fullWidth,
           interactable,
         })}
       >
         {children}
-      </div>
+      </Box>
     );
   }
 );

package/src/card/ClickableCard.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { cnb } from "cnbuilder";
 import { forwardRef, type MouseEventHandler } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { Card, type CardProps } from "./Card.js";
@@ -12,7 +13,9 @@ const noop = (): void => {
 /**
  * @since 6.0.0
  */
-export interface ClickableCardProps extends CardProps {
+export interface ClickableCardProps
+  extends CardProps,
+    ComponentWithRippleProps {
   onClick: MouseEventHandler<HTMLDivElement>;
 
   /**
@@ -59,9 +62,13 @@ export const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(
       onKeyDown = noop,
       className,
       children: propChildren,
+      disableRipple,
       ...remaining
     } = props;
-    const { handlers, ripples } = useElementInteraction(remaining);
+    const { handlers, ripples } = useElementInteraction({
+      ...remaining,
+      mode: disableRipple ? "none" : undefined,
+    });
     const children = useHigherContrastChildren(propChildren);
 
     return (

package/src/card/styles.ts

@@ -24,14 +24,6 @@ export interface CardClassNameOptions {
    */
   raisable?: boolean;
 
-  /**
-   * Update the card to have `display: block` and `width: 100%` instead of
-   * `display: inline-block`.
-   *
-   * @defaultValue `false`
-   */
-  fullWidth?: boolean;
-
   /**
    * Set this to `true` if the card should gain the pointer cursor while
    * hovering and other interaction styles and not using the `ClickableCard`
@@ -46,7 +38,7 @@ export interface CardClassNameOptions {
  * @since 6.0.0
  */
 export function card(options: CardClassNameOptions = {}): string {
-  const { className, bordered, raisable, fullWidth, interactable } = options;
+  const { className, bordered, raisable, interactable } = options;
 
   return cnb(
     cardStyles({
@@ -54,7 +46,6 @@ export function card(options: CardClassNameOptions = {}): string {
       shadowed: !bordered,
       raisable: !bordered && raisable,
       interactable,
-      "full-width": fullWidth,
     }),
     className
   );

package/src/chip/Chip.tsx

@@ -9,6 +9,7 @@ import {
 } from "react";
 import { type BackgroundColor } from "../cssUtils.js";
 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";
@@ -31,7 +32,9 @@ declare module "react" {
  * @since 6.0.0 Renamed the `noninteractive` prop to
  * `noninteractable`.
  */
-export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ChipProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    ComponentWithRippleProps {
   /**
    * @defaultValue `"solid"`
    */
@@ -216,6 +219,7 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
       selectedIconAfter = false,
       backgroundColor,
       noninteractive = false,
+      disableRipple,
       disableIconTransition = false,
       children: propChildren,
       onClick,
@@ -286,6 +290,7 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
 
     const { pressed, pressedClassName, ripples, handlers } =
       useElementInteraction({
+        mode: disableRipple ? "none" : undefined,
         onClick,
         onKeyDown,
         onKeyUp,

package/src/chip/styles.ts

@@ -13,11 +13,12 @@ const styles = bem("rmd-chip");
  *
  * ```scss
  * &:has(.rmd-icon:first-child, .rmd-avatar:first-child) {
- *   @include core.auto-rtl(
- *     padding-left,
- *     $addon-left-padding,
- *     $horizontal-padding
- *   );
+ *   padding-left: $addon-left-padding;
+ *
+ *   @include utils.rtl {
+ *     padding-left: $horizontal-padding;
+ *     padding-right; $addon-left-padding;
+ *   }
  * }
  *
  * $index: if(
@@ -26,11 +27,12 @@ const styles = bem("rmd-chip");
  *   2 // last child is always the `.rmd-ripple-container`
  * );
  * &:has(.rmd-icon:nth-last-child(#{$index})) {
- *   @include core.auto-rtl(
- *     padding-right,
- *     $addon-right-padding,
- *     $horizontal-padding
- *   );
+ *   padding-right: $addon-left-padding;
+ *
+ *   @include utils.rtl {
+ *     padding-left; $addon-left-padding;
+ *     padding-right: $horizontal-padding;
+ *   }
  * }
  * ```
  */

package/src/delegateEvent.ts

@@ -13,12 +13,12 @@ export interface DelegatedEventHandler {
   /**
    * Adds the provided callback to the throttled event listener.
    */
-  add(callback: EventListener): void;
+  add: (callback: EventListener) => void;
 
   /**
    * Attempts to remove the provided callback from the throttled event listener.
    */
-  remove(callback: EventListener): void;
+  remove: (callback: EventListener) => void;
 }
 
 /** @internal */
@@ -43,12 +43,12 @@ const delegatedEvents: DelegableEvent[] = [];
  * functions once you have created this event handler. Otherwise there'd be ts
  * errors trying to do `MouseEvent` or `KeyboardEvent` in your listeners.
  */
-function createEventHandler<K extends keyof WindowEventMap>(
+function createEventHandler(
   throttle: boolean,
   callbacks: readonly EventListener[]
-): (event: WindowEventMap[K]) => void {
+): (event: WindowEventMap[keyof WindowEventMap]) => void {
   let running = false;
-  const runCallbacks = (event: WindowEventMap[K]) => () => {
+  const runCallbacks = (event: WindowEventMap[keyof WindowEventMap]) => () => {
     for (let i = 0; i < callbacks.length; i += 1) {
       callbacks[i](event);
     }

package/src/dialog/Dialog.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { cnb } from "cnbuilder";
 import { forwardRef, useState, type HTMLAttributes } from "react";
 import { useSsr } from "../SsrProvider.js";
 import {
@@ -10,52 +9,24 @@ import { Overlay } from "../overlay/Overlay.js";
 import { Portal } from "../portal/Portal.js";
 import { useScrollLock } from "../scroll/useScrollLock.js";
 import {
-  type CSSTransitionClassNames,
   type CSSTransitionComponentProps,
   type TransitionActions,
-  type TransitionTimeout,
 } from "../transition/types.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
-import { DialogContainer } from "./DialogContainer.js";
 import {
   NestedDialogProvider,
   useNestedDialogContext,
 } from "./NestedDialogProvider.js";
-import { dialog, type DialogType } from "./styles.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-dialog-background-color"?: string;
-    "--rmd-dialog-color"?: string;
-    "--rmd-dialog-min-width"?: string | number;
-    "--rmd-dialog-horizontal-margin"?: string | number;
-    "--rmd-dialog-vertical-margin"?: string | number;
-    "--rmd-dialog-z-index"?: string | number;
-    "--rmd-dialog-header-padding"?: string | number;
-    "--rmd-dialog-header-padding-bottom"?: string | number;
-    "--rmd-dialog-content-padding"?: string | number;
-    "--rmd-dialog-footer-padding"?: string | number;
-  }
-}
-
-/** @since 4.0.0 */
-export const DEFAULT_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
-  appear: "rmd-dialog--enter",
-  appearActive: "rmd-dialog--enter-active",
-  enter: "rmd-dialog--enter",
-  enterActive: "rmd-dialog--enter-active",
-  exit: "rmd-dialog--exit",
-  exitActive: "rmd-dialog--exit-active",
-};
-
-/** @since 4.0.0 */
-export const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout> = {
-  enter: 200,
-  exit: 150,
-};
+import {
+  DEFAULT_DIALOG_CLASSNAMES,
+  DEFAULT_DIALOG_TIMEOUT,
+  dialog,
+  dialogContainer,
+  type DialogWidth,
+  type DialogType,
+} from "./styles.js";
 
 const noop = (): void => {
   // do nothing
@@ -78,6 +49,12 @@ export interface BaseDialogProps
    */
   type?: DialogType;
 
+  /**
+   * @see {@link DialogWidth}
+   * @defaultValue `"auto"`
+   */
+  width?: DialogWidth;
+
   /**
    * @defaultValue `"dialog"`
    */
@@ -95,7 +72,7 @@ export interface BaseDialogProps
    *   the user presses the `"Escape"` key.
    * - The overlay element is clicked
    */
-  onRequestClose(): void;
+  onRequestClose: () => void;
 
   /** @defaultValue `false` */
   disableTransition?: boolean;
@@ -266,6 +243,7 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
       modal = false,
       role = modal ? "alertdialog" : "dialog",
       type = "centered",
+      width,
       tabIndex = -1,
       visible,
       onRequestClose,
@@ -275,15 +253,15 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
       timeout = DEFAULT_DIALOG_TIMEOUT,
       classNames = DEFAULT_DIALOG_CLASSNAMES,
       disableTransition = false,
-      appear,
-      enter,
-      exit,
+      appear = false,
+      enter = true,
+      exit = true,
       onEnter = noop,
       onEntering = noop,
-      onEntered,
+      onEntered = noop,
       onExit = noop,
       onExiting = noop,
-      onExited,
+      onExited = noop,
       exitedHidden = true,
       disableOverlay = false,
       overlayProps,
@@ -301,13 +279,29 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
 
     const ssr = useSsr();
     const setChildVisible = useNestedDialogContext();
+
+    // this makes it so that as more non-full page dialogs become visible, the
+    // overlay does not become darker as more and more overlays are stacked upon
+    // each other. only the top-most overlay will have and active background
+    // color.
+    const [isChildVisible, setIsChildVisible] = useState(false);
     const { eventHandlers, transitionOptions } = useFocusContainer({
       nodeRef: ref,
       activate: visible,
-      onEntered,
+      onEntered(appear) {
+        onEntered(appear);
+        // this needs to be called onEnter and onEntered just in case the
+        // transition is disabled
+        setChildVisible(type !== "full-page");
+      },
       onEntering,
       onExiting,
-      onExited,
+      onExited() {
+        onExited();
+        // this needs to be called onExit and onExited just in case the
+        // transition is disabled
+        setChildVisible(false);
+      },
       disableTransition,
       onKeyDown(event) {
         onKeyDown(event);
@@ -332,8 +326,10 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
       classNames,
       className: dialog({
         type,
+        width,
         fixed,
         outline: !disableFocusOutline,
+        disableBoxShadow: isChildVisible,
         className,
       }),
       appear: appear && !disableTransition && !ssr,
@@ -354,12 +350,6 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
     });
     useScrollLock(!disableScrollLock && visible);
 
-    // this makes it so that as more non-full page dialogs become visible, the
-    // overlay does not become darker as more and more overlays are stacked upon
-    // each other. only the top-most overlay will have and active background
-    // color.
-    const [isChildVisible, setIsChildVisible] = useState(false);
-
     return (
       <NestedDialogProvider value={setIsChildVisible}>
         {!disableOverlay && (
@@ -376,16 +366,13 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
         )}
         <Portal disabled={disablePortal}>
           {rendered && (
-            <DialogContainer
+            <div
               {...containerProps}
-              className={cnb(
-                containerProps?.className,
-                !temporary &&
-                  exitedHidden &&
-                  stage === "exited" &&
-                  DISPLAY_NONE_CLASS
-              )}
-              enabled={type === "centered"}
+              className={dialogContainer({
+                className: containerProps?.className,
+                centered: type === "centered",
+                displayNone: !temporary && exitedHidden && stage === "exited",
+              })}
             >
               <div
                 aria-modal={modal || undefined}
@@ -398,7 +385,7 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
               >
                 {children}
               </div>
-            </DialogContainer>
+            </div>
           )}
         </Portal>
       </NestedDialogProvider>

package/src/dialog/FixedDialog.tsx

@@ -6,7 +6,6 @@ import {
   type PositionAnchor,
 } from "../positioning/types.js";
 import { useFixedPositioning } from "../positioning/useFixedPositioning.js";
-import { type CSSTransitionClassNamesObject } from "../transition/types.js";
 import { SCALE_CLASSNAMES } from "../transition/useScaleTransition.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { Dialog, type BaseDialogProps } from "./Dialog.js";
@@ -15,7 +14,7 @@ export interface BaseFixedDialogProps extends Omit<BaseDialogProps, "type"> {
   anchor?: PositionAnchor;
   fixedTo: RefObject<HTMLElement>;
   options?: CalculateFixedPositionOptions;
-  getFixedPositionOptions?(): CalculateFixedPositionOptions;
+  getFixedPositionOptions?: () => CalculateFixedPositionOptions;
 
   /**
    * @defaultValue `true`
@@ -33,15 +32,6 @@ export type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;
 const noop = (): void => {
   // do nothing
 };
-export const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =
-  {
-    appear: "rmd-dialog--fixed-enter",
-    appearActive: "rmd-dialog--fixed-enter-active",
-    enter: "rmd-dialog--fixed-enter",
-    enterActive: "rmd-dialog--fixed-enter-active",
-    exit: "rmd-dialog--fixed-exit",
-    exitActive: "rmd-dialog--fixed-exit-active",
-  };
 
 /**
  * **Client Component**