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

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/DialogContent.tsx

@@ -6,9 +6,9 @@ export interface DialogContentProps
     DialogContentClassNameOptions {}
 
 /**
- * **Server Component**
- *
- * Look at the `Dialog` or `FixedDialog` components for example usage.
+ * The `DialogContent` component should be used as a child of the `Dialog`
+ * component that applies some reasonable default styles. Look at the `Dialog`
+ * or `FixedDialog` components for example usage.
  */
 export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
   function DialogContent(

package/src/dialog/DialogFooter.tsx

@@ -6,9 +6,8 @@ export interface DialogFooterProps
     DialogFooterClassNameOptions {}
 
 /**
- * **Server Component**
- *
- * Look at the `Dialog` or `FixedDialog` components for example usage.
+ * The `DialogFooter` is a simple `<footer>` with simple `display: flex` styles
+ * applied. Look at the `Dialog` or `FixedDialog` components for example usage.
  */
 export const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
   function DialogFooter({ children, className, align = "end", ...props }, ref) {

package/src/dialog/DialogHeader.tsx

@@ -4,9 +4,9 @@ import { dialogHeader } from "./styles.js";
 export type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;
 
 /**
- * **Server Component**
- *
- * Look at the `Dialog` or `FixedDialog` components for example usage.
+ * The `DialogHeader` component should be rendered within a `Dialog` component
+ * and generally contains the `DialogTitle`. Look at the `Dialog` or
+ * `FixedDialog` components for example usage.
  */
 export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
   function DialogHeader(props, ref) {

package/src/dialog/DialogTitle.tsx

@@ -24,9 +24,9 @@ export interface DialogTitleProps extends TypographyProps {
 }
 
 /**
- * **Server Component**
- *
- * Look at the `Dialog` or `FixedDialog` components for example usage.
+ * The `DialogTitle` component is a simple `Typography` component wrapper with
+ * sensible defaults to be rendered within a `Dialog`. Look at the `Dialog` or
+ * `FixedDialog` components for example usage.
  */
 export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   function DialogTitle(

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**

package/src/dialog/styles.ts

@@ -1,10 +1,71 @@
 import { cnb } from "cnbuilder";
+import {
+  type CSSTransitionClassNames,
+  type TransitionTimeout,
+} from "../transition/types.js";
 import { bem } from "../utils/bem.js";
+import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 
 const styles = bem("rmd-dialog");
+const containerStyles = bem("rmd-dialog-container");
+
+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;
+  }
+}
 
 export type DialogType = "full-page" | "centered" | "custom";
 
+/**
+ * This can be used to enforce a specific width for dialogs instead of relying
+ * on the size of the content to determine the width. The width will also ensure
+ * that it does not overflow based on the viewport width and margins applied.
+ *
+ * For example: if the `width="extra-large"` and the total viewport size is
+ * `600px`, the dialog width would be `420px` since there is a default `80px`
+ * margin to the left and right of the dialog. If the user expands the browser,
+ * the dialog width will continue to grow until it reaches the `extra-large`
+ * width and stop growing from that point.
+ *
+ * @since 6.0.0
+ */
+export type DialogWidth = "auto" | "small" | "medium" | "large" | "extra-large";
+
+/**
+ * @since 6.0.0
+ */
+export interface DialogContainerClassNameOptions {
+  className?: string;
+
+  centered?: boolean;
+  displayNone?: boolean;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function dialogContainer(
+  options: DialogContainerClassNameOptions = {}
+): string {
+  const { className, centered, displayNone } = options;
+
+  return cnb(
+    containerStyles({ centered }),
+    displayNone && DISPLAY_NONE_CLASS,
+    className
+  );
+}
+
 /** @since 6.0.0 */
 export interface DialogClassNameOptions {
   className?: string;
@@ -14,6 +75,11 @@ export interface DialogClassNameOptions {
    */
   type?: DialogType;
 
+  /**
+   * @defaultValue `"auto"`
+   */
+  width?: DialogWidth;
+
   /**
    * @defaultValue `false`
    */
@@ -23,14 +89,24 @@ export interface DialogClassNameOptions {
    * @defaultValue `type === "full-page"`
    */
   outline?: boolean;
+
+  /**
+   * This is mostly used for handling nested dialogs and removes any box shadow
+   * on a dialog that has a child visible.
+   *
+   * @defaultValue `false`
+   */
+  disableBoxShadow?: boolean;
 }
 
 /** @since 6.0.0 */
 export function dialog(options: DialogClassNameOptions = {}): string {
   const {
     type = "centered",
+    width,
     fixed = false,
     outline = type === "full-page",
+    disableBoxShadow,
     className,
   } = options;
 
@@ -40,6 +116,11 @@ export function dialog(options: DialogClassNameOptions = {}): string {
       outline,
       centered: type === "centered",
       "full-page": type === "full-page",
+      "no-box-shadow": type === "centered" && disableBoxShadow,
+      "s-width": width === "small",
+      "m-width": width === "medium",
+      "l-width": width === "large",
+      "xl-width": width === "extra-large",
     }),
     className
   );
@@ -116,3 +197,19 @@ export function dialogFooter(
     className
   );
 }
+
+/** @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,
+};

package/src/divider/Divider.tsx

@@ -1,18 +1,6 @@
 import { forwardRef, type ElementType, type HTMLAttributes } from "react";
 import { divider, type DividerClassNameOptions } from "./styles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-divider-size"?: string | number;
-    "--rmd-divider-vertical-size"?: string | number;
-    "--rmd-divider-color"?: string;
-    "--rmd-divider-spacing"?: string | number;
-    "--rmd-divider-vertical-spacing"?: string | number;
-    "--rmd-divider-inset"?: string | number;
-    "--rmd-divider-max-size"?: string | number;
-  }
-}
-
 export type DividerElement = HTMLHRElement | HTMLDivElement;
 
 /**
@@ -23,8 +11,6 @@ export interface DividerProps
     DividerClassNameOptions {}
 
 /**
- * **Server Component**
- *
  * @example Simple Example
  * ```tsx
  * import { Divider } from "@react-md/core";

package/src/divider/styles.ts

@@ -3,6 +3,18 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-divider");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-divider-size"?: string | number;
+    "--rmd-divider-vertical-size"?: string | number;
+    "--rmd-divider-color"?: string;
+    "--rmd-divider-spacing"?: string | number;
+    "--rmd-divider-vertical-spacing"?: string | number;
+    "--rmd-divider-inset"?: string | number;
+    "--rmd-divider-max-size"?: string | number;
+  }
+}
+
 /** @since 6.0.0 */
 export interface DividerClassNameOptions {
   className?: string;

package/src/draggable/useDraggable.ts

@@ -1,13 +1,20 @@
 "use client";
 import { cnb } from "cnbuilder";
-import type { HTMLAttributes, Ref, RefCallback } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type Ref,
+  type RefCallback,
+} from "react";
 import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
 import { useScrollLock } from "../scroll/useScrollLock.js";
-import type {
-  NonNullRef,
-  UseStateInitializer,
-  UseStateSetter,
+import {
+  type NonNullRef,
+  type UseStateInitializer,
+  type UseStateSetter,
 } from "../types.js";
 import { useDir } from "../typography/WritingDirectionProvider.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
@@ -275,22 +282,22 @@ export interface DraggableImplementation<E extends HTMLElement = HTMLElement>
   /**
    * Set the {@link value} to {@link DraggableOptions.min}.
    */
-  minimum(): void;
+  minimum: () => void;
 
   /**
    * Set the {@link value} to {@link DraggableOptions.max}.
    */
-  maximum(): void;
+  maximum: () => void;
 
   /**
    * Increment the {@link value} by {@link DraggableOptions.step}.
    */
-  increment(): void;
+  increment: () => void;
 
   /**
    * Decrement the {@link value} by {@link DraggableOptions.step}.
    */
-  decrement(): void;
+  decrement: () => void;
 
   /**
    * The current percentage the `value` is within the range.

package/src/draggable/utils.ts

@@ -126,9 +126,9 @@ interface UpdateDragPositionOptions
   nodeRef: RefObject<HTMLElement>;
   focus?: boolean;
   isDragStart: boolean;
-  setValue(value: number): void;
-  setDragging(dragging: boolean): void;
-  setDragPercentage(value: number): void;
+  setValue: (value: number) => void;
+  setDragging: (dragging: boolean) => void;
+  setDragPercentage: (value: number) => void;
   withinOffsetParent: boolean;
 }
 

package/src/expansion-panel/ExpansionList.tsx

@@ -19,7 +19,7 @@ export interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {
  * @see {@link useExpansionList} for a custom implementation example if you do
  * not want to use a `<div>` for this wrapper component.
  * @since 6.0.0 Uses the new keyboard movement API and does not
- * require the `onKeyDOwn` prop to be provided.
+ * require the `onKeyDown` prop to be provided.
  */
 export const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(
   function ExpansionList(props, ref) {

package/src/expansion-panel/ExpansionPanel.tsx

@@ -1,51 +1,22 @@
 "use client";
-import { cnb } from "cnbuilder";
 import { forwardRef, type CSSProperties, type ReactNode } from "react";
 import { Card, type CardProps } from "../card/Card.js";
 import { CardContent, type CardContentProps } from "../card/CardContent.js";
 import { useCollapseTransition } from "../transition/useCollapseTransition.js";
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { bem } from "../utils/bem.js";
 import {
   ExpansionPanelHeader,
   type ExpansionPanelHeaderProps,
 } from "./ExpansionPanelHeader.js";
-
-const styles = bem("rmd-expansion-panel");
-
-/** @since 6.0.0 */
-export interface ExpansionPanelClassNameOptions {
-  className?: string;
-
-  /**
-   * @defaultValue `false`
-   */
-  expanded?: boolean;
-
-  /**
-   * Set this to `true` to disable the `margin-top` transition between multiple
-   * panels
-   *
-   * @defaultValue `false`
-   */
-  disableTransition?: boolean;
-}
-
-/**
- * @since 6.0.0
- */
-export function expansionPanel(
-  options: ExpansionPanelClassNameOptions = {}
-): string {
-  const { className, expanded = false, disableTransition = false } = options;
-
-  return cnb(styles({ expanded, animate: !disableTransition }), className);
-}
+import { expansionPanel } from "./expansionPanelStyles.js";
 
 /**
- * @since 6.0.0 Renamed some card props and updated for the latest
- * API.
+ * @since 6.0.0 The `disableSecondaryColor` convenience prop was removed in
+ * favor of the new `contentProps` object.
+ * @since 6.0.0 The `disableParagraphMargin` prop was removed since it no longer
+ * exists on the `CardContent` component.
+ * @since 6.0.0 Removed the `marginTop` prop since it is no longer needed.
  */
 export interface ExpansionPanelProps extends CardProps {
   /**
@@ -58,7 +29,7 @@ export interface ExpansionPanelProps extends CardProps {
    * A function that should toggle the {@link expanded} state. This should
    * generally be provided by the `useExpansionPanels` hook.
    */
-  onExpandClick(): void;
+  onExpandClick: () => void;
 
   /**
    * Set this to `true` to prevent the panel from toggling the {@link expanded}
@@ -136,8 +107,8 @@ export interface ExpansionPanelProps extends CardProps {
    * This can be used to apply additional props to the `CardContent` component
    * if needed.
    *
-   * Note: The `disableLastChildPadding` defaults to `true` in this
-   * implementation.
+   * Note: `disableSecondaryColor` and `disableLastChildPadding` default to
+   * `true` in this implementation.
    *
    * @example
    * ```tsx
@@ -145,7 +116,7 @@ export interface ExpansionPanelProps extends CardProps {
    *   style: {},
    *   className: "some-class-name",
    *   disablePadding: true,
-   *   disableSecondaryColor: true,
+   *   disableSecondaryColor: false,
    *   disableLastChildPadding: false,
    *   // whatever else
    * }}

package/src/expansion-panel/ExpansionPanelHeader.tsx

@@ -81,7 +81,6 @@ export interface ExpansionPanelHeaderProps
 }
 
 /**
- * **Server Component**
  * This is mostly an internal component, but can also be used to implement a
  * custom header implementation if needed. This might really be a client
  * component in practice since the `onClick` prop must be provided.

package/src/expansion-panel/expansionPanelStyles.ts

@@ -0,0 +1,33 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+const styles = bem("rmd-expansion-panel");
+
+/** @since 6.0.0 */
+export interface ExpansionPanelClassNameOptions {
+  className?: string;
+
+  /**
+   * @defaultValue `false`
+   */
+  expanded?: boolean;
+
+  /**
+   * Set this to `true` to disable the `margin-top` transition between multiple
+   * panels
+   *
+   * @defaultValue `false`
+   */
+  disableTransition?: boolean;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function expansionPanel(
+  options: ExpansionPanelClassNameOptions = {}
+): string {
+  const { className, expanded = false, disableTransition = false } = options;
+
+  return cnb(styles({ expanded, animate: !disableTransition }), className);
+}