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

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

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

@@ -29,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}

package/src/expansion-panel/useExpansionPanels.ts

@@ -1,7 +1,7 @@
 "use client";
-import { useState } from "react";
 import type { UseStateInitializer, UseStateSetter } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
+import { useReadonlySet } from "../useReadonlySet.js";
 import type { ExpansionPanelProps } from "./ExpansionPanel.js";
 
 /** @since 6.0.0 */
@@ -210,21 +210,26 @@ export function useExpansionPanels(
 
   const baseId = useEnsuredId(propBaseId, "expansion-panel");
   const createId = (index: number): string => `${baseId}-${index + 1}`;
-  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => {
-    if (typeof defaultExpandedIds === "undefined") {
-      const initialList: string[] = [];
-      if (typeof defaultExpandedIndex === "number" || preventAllCollapsed) {
-        initialList.push(createId(defaultExpandedIndex ?? 0));
-      }
+  const {
+    value: expandedIds,
+    setValue: setExpandedIds,
+    toggleValue,
+  } = useReadonlySet({
+    toggleType: multiple ? "multiple" : "single",
+    defaultValue: () => {
+      if (typeof defaultExpandedIds === "undefined") {
+        const initialList: string[] = [];
+        if (typeof defaultExpandedIndex === "number" || preventAllCollapsed) {
+          initialList.push(createId(defaultExpandedIndex ?? 0));
+        }
 
-      return new Set(initialList);
-    }
+        return new Set(initialList);
+      }
 
-    const ids =
-      typeof defaultExpandedIds === "function"
+      return typeof defaultExpandedIds === "function"
         ? defaultExpandedIds()
         : defaultExpandedIds;
-    return new Set(ids);
+    },
   });
 
   return {
@@ -252,21 +257,7 @@ export function useExpansionPanels(
             return;
           }
 
-          setExpandedIds((prevIds) => {
-            const expanded = prevIds.has(panelId);
-            if (!multiple) {
-              return new Set(expanded ? [] : [panelId]);
-            }
-
-            const nextIds = new Set(prevIds);
-            if (expanded) {
-              nextIds.delete(panelId);
-            } else {
-              nextIds.add(panelId);
-            }
-
-            return nextIds;
-          });
+          toggleValue(panelId);
         },
         disableTransition,
         disableContentPadding,

package/src/{form → files}/FileInput.tsx

@@ -1,29 +1,18 @@
 "use client";
-import { cnb } from "cnbuilder";
 import {
   forwardRef,
   type InputHTMLAttributes,
   type LabelHTMLAttributes,
   type ReactNode,
 } from "react";
-import {
-  button,
-  type ButtonClassNameOptions,
-  type ButtonClassNameThemeOptions,
-} from "../button/buttonStyles.js";
+import { type ButtonClassNameThemeOptions } from "../button/buttonStyles.js";
 import { getIcon } from "../icon/iconConfig.js";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { type PropsWithRef } from "../types.js";
 import { SrOnly } from "../typography/SrOnly.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-
-/** @since 6.0.0 */
-export type FileInputClassNameOptions = ButtonClassNameOptions;
-
-/** @since 6.0.0 */
-export function fileInput(options: FileInputClassNameOptions = {}): string {
-  return cnb("rmd-file-input", button(options));
-}
+import { fileInput } from "./styles.js";
 
 /** @since 6.0.0 */
 export type FileInputHTMLAttributes = Omit<
@@ -37,7 +26,8 @@ export type FileInputHTMLAttributes = Omit<
  */
 export interface FileInputProps
   extends ButtonClassNameThemeOptions,
-    FileInputHTMLAttributes {
+    FileInputHTMLAttributes,
+    ComponentWithRippleProps {
   /**
    * This is the label text for icon-only file inputs.
    *
@@ -154,12 +144,14 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
       iconSize,
       responsive,
       multiple = false,
+      disableRipple,
       ...remaining
     } = props;
     const id = useEnsuredId(propId, "file-input");
     const { pressed, pressedClassName, ripples, handlers } =
       useElementInteraction({
         ...labelProps,
+        mode: disableRipple ? "none" : undefined,
         onClick(event) {
           labelProps?.onClick?.(event);
 

package/src/files/styles.ts

@@ -0,0 +1,10 @@
+import { cnb } from "cnbuilder";
+import { type ButtonClassNameOptions, button } from "../button/buttonStyles.js";
+
+/** @since 6.0.0 */
+export type FileInputClassNameOptions = ButtonClassNameOptions;
+
+/** @since 6.0.0 */
+export function fileInput(options: FileInputClassNameOptions = {}): string {
+  return cnb("rmd-file-input", button(options));
+}

package/src/{form → files}/useFileUpload.ts

@@ -8,20 +8,22 @@ import {
   type DragEvent,
 } from "react";
 import {
-  FileAccessError,
   getFileParser as defaultGetFileParser,
-  isValidFileName as defaultIsValidFileName,
-  validateFiles as defaultValidateFiles,
   type CompletedFileUploadStats,
   type FileReaderResult,
   type FileUploadHandlers,
   type FileUploadStats,
+  type GetFileParser,
+  type ProcessingFileUploadStats,
+} from "./utils.js";
+import {
+  FileAccessError,
+  isValidFileName as defaultIsValidFileName,
+  validateFiles as defaultValidateFiles,
   type FileValidationError,
   type FileValidationOptions,
   type FilesValidator,
-  type GetFileParser,
-  type ProcessingFileUploadStats,
-} from "./fileUtils.js";
+} from "./validation.js";
 
 const noop = (): void => {
   // do nothing
@@ -120,13 +122,13 @@ export interface FileUploadActions {
    * Reset everything related to uploads ensuring that all file readers have
    * been aborted.
    */
-  reset(): void;
+  reset: () => void;
 
   /**
-   * Removes all the errors that exist in state without cancelling any of the
+   * Removes all the errors that exist in state without canceling any of the
    * uploads already in progress.
    */
-  clearErrors(): void;
+  clearErrors: () => void;
 
   /**
    * This function is used to cancel pending and uploading files or removing
@@ -135,7 +137,7 @@ export interface FileUploadActions {
    * @param keyOrKeys - A single or list of {@link BaseFileUploadStats.key} to
    * remove from state.
    */
-  remove(keyOrKeys: string | readonly string[]): void;
+  remove: (keyOrKeys: string | readonly string[]) => void;
 }
 
 /**
@@ -201,9 +203,6 @@ const EMPTY_OBJECT = {} as const;
  * can also be used to upload the files as an `ArrayBuffer` and then uploaded to
  * a server.
  *
- * Note: If using the `aws-sdk` to upload files directly to S3, **do not use
- * this hook** since it uses its own upload process.
- *
  * @typeParam E - An optional HTMLElement type that is used for the
  * {@link FileUploadHandlers}.
  * @typeParam CustomError - An optional error type that gets returned from the
@@ -212,21 +211,23 @@ const EMPTY_OBJECT = {} as const;
  * @returns the {@link FileUploadHookReturnValue}
  * @since 2.9.0
  */
-export function useFileUpload<E extends HTMLElement, CustomError = never>({
-  maxFiles = -1,
-  extensions = EMPTY_LIST,
-  minFileSize = -1,
-  maxFileSize = -1,
-  totalFileSize = -1,
-  concurrency = -1,
-  onDrop: propOnDrop = noop,
-  onChange: propOnChange = noop,
-  validateFiles = defaultValidateFiles,
-  getFileParser = defaultGetFileParser,
-  isValidFileName = defaultIsValidFileName,
-}: FileUploadOptions<E, CustomError> = {}): Readonly<
-  FileUploadHookReturnValue<E, CustomError>
-> {
+export function useFileUpload<E extends HTMLElement, CustomError = never>(
+  options: FileUploadOptions<E, CustomError> = {}
+): Readonly<FileUploadHookReturnValue<E, CustomError>> {
+  const {
+    maxFiles = -1,
+    extensions = EMPTY_LIST,
+    minFileSize = -1,
+    maxFileSize = -1,
+    totalFileSize = -1,
+    concurrency = -1,
+    onDrop: propOnDrop = noop,
+    onChange: propOnChange = noop,
+    validateFiles = defaultValidateFiles,
+    getFileParser = defaultGetFileParser,
+    isValidFileName = defaultIsValidFileName,
+  } = options;
+
   const [state, dispatch] = useReducer(
     function reducer(
       state: FileUploadHookState<CustomError>,
@@ -497,12 +498,7 @@ export function useFileUpload<E extends HTMLElement, CustomError = never>({
       /* istanbul ignore next */
       if (
         process.env.NODE_ENV !== "production" &&
-        ![
-          "readAsText",
-          "readAsDataURL",
-          "readAsArrayBuffer",
-          "readAsBinaryString",
-        ].includes(parser)
+        !["readAsText", "readAsDataURL", "readAsArrayBuffer"].includes(parser)
       ) {
         throw new Error("Invalid file reader parser");
       }