@react-md/core 1.0.0-next.19 → 1.0.0-next.20

package/src/button/buttonStyles.ts

@@ -1,9 +1,10 @@
 import { cnb } from "cnbuilder";
+
 import {
-  cssUtils,
   type OutlineColor,
   type TextColor,
   type ThemeColor,
+  cssUtils,
 } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 

package/src/card/Card.tsx

@@ -1,11 +1,8 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, forwardRef } 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";
+import { type BoxAlignItems, type BoxOptions } from "../box/styles.js";
+import { type CardClassNameOptions, card } from "./styles.js";
 
 declare module "react" {
   interface CSSProperties {
@@ -21,22 +18,13 @@ declare module "react" {
  */
 export interface CardProps
   extends HTMLAttributes<HTMLDivElement>,
-    CardClassNameOptions {
-  /**
-   * @defaultValue `"stretch"`
-   */
+    CardClassNameOptions,
+    Pick<BoxOptions, "align" | "justify" | "fullWidth" | "disableWrap"> {
+  /** @defaultValue `"stretch"` */
   align?: BoxAlignItems;
 
-  /**
-   * @defaultValue `"start"`
-   */
+  /** @defaultValue `"start"` */
   justify?: BoxAlignItems;
-
-  /**
-   * @see {@link BoxOptions.fullWidth}
-   * @defaultValue `false`
-   */
-  fullWidth?: boolean;
 }
 
 /**
@@ -88,18 +76,17 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       justify = "stretch",
       bordered,
       raisable,
-      fullWidth,
       interactable,
       ...remaining
     } = props;
 
     return (
       <Box
-        {...remaining}
         align={align}
         justify={justify}
+        disableWrap
+        {...remaining}
         stacked
-        fullWidth={fullWidth}
         disableGap
         disablePadding
         ref={ref}

package/src/card/CardContent.tsx

@@ -1,5 +1,6 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cardContent, type CardContentClassNameOptions } from "./styles.js";
+import { type HTMLAttributes, forwardRef } from "react";
+
+import { type CardContentClassNameOptions, cardContent } from "./styles.js";
 
 /**
  * @since 6.0.0 Renamed `disableExtraPadding` to `disableLastChildPadding` and

package/src/card/CardFooter.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+
 import { Box, type BoxProps } from "../box/Box.js";
 import { type BoxJustifyContent } from "../box/styles.js";
 import { cardFooter } from "./styles.js";

package/src/card/CardHeader.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+
 import { type PropsWithRef } from "../types.js";
 import { cardHeader, cardHeaderContent } from "./styles.js";
 

package/src/card/CardSubtitle.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+
 import {
   Typography,
   type TypographyHTMLElement,

package/src/card/CardTitle.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+
 import {
   Typography,
   type TypographyHTMLElement,

package/src/card/ClickableCard.tsx

@@ -1,6 +1,8 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import { forwardRef, type MouseEventHandler } from "react";
+import { type MouseEventHandler, forwardRef } from "react";
+
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";

package/src/card/styles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 

package/src/chip/Chip.tsx

@@ -1,14 +1,16 @@
 "use client";
+
 import { cnb } from "cnbuilder";
 import {
-  forwardRef,
   type ButtonHTMLAttributes,
   type CSSProperties,
   type HTMLAttributes,
   type ReactNode,
+  forwardRef,
 } from "react";
+
 import { type BackgroundColor } from "../cssUtils.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";

package/src/chip/styles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { type BackgroundColor, cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 

package/src/dialog/Dialog.tsx

@@ -1,16 +1,20 @@
 "use client";
-import { forwardRef, useState, type HTMLAttributes } from "react";
+
+import { type HTMLAttributes, forwardRef, useState } from "react";
+
 import { useSsr } from "../SsrProvider.js";
 import {
-  useFocusContainer,
   type FocusContainerComponentProps,
+  useFocusContainer,
 } from "../focus/useFocusContainer.js";
 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";
@@ -22,10 +26,10 @@ import {
 import {
   DEFAULT_DIALOG_CLASSNAMES,
   DEFAULT_DIALOG_TIMEOUT,
+  type DialogType,
+  type DialogWidth,
   dialog,
   dialogContainer,
-  type DialogWidth,
-  type DialogType,
 } from "./styles.js";
 
 const noop = (): void => {
@@ -161,13 +165,13 @@ export interface BaseDialogProps
    * @see {@link DEFAULT_DIALOG_TIMEOUT}
    * @defaultValue `DEFAULT_DIALOG_TIMEOUT`
    */
-  timeout?: CSSTransitionComponentProps["timeout"];
+  timeout?: TransitionTimeout;
 
   /**
    * @see {@link DEFAULT_DIALOG_CLASSNAMES}
    * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`
    */
-  classNames?: CSSTransitionComponentProps["classNames"];
+  classNames?: CSSTransitionClassNames;
 
   /**
    * Set this to `true` if the `Dialog` should not gain the normal focus box

package/src/dialog/DialogContent.tsx

@@ -1,5 +1,6 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { dialogContent, type DialogContentClassNameOptions } from "./styles.js";
+import { type HTMLAttributes, forwardRef } from "react";
+
+import { type DialogContentClassNameOptions, dialogContent } from "./styles.js";
 
 export interface DialogContentProps
   extends HTMLAttributes<HTMLDivElement>,

package/src/dialog/DialogFooter.tsx

@@ -1,5 +1,6 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { dialogFooter, type DialogFooterClassNameOptions } from "./styles.js";
+import { type HTMLAttributes, forwardRef } from "react";
+
+import { type DialogFooterClassNameOptions, dialogFooter } from "./styles.js";
 
 export interface DialogFooterProps
   extends HTMLAttributes<HTMLDivElement>,

package/src/dialog/DialogHeader.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, forwardRef } from "react";
+
 import { dialogHeader } from "./styles.js";
 
 export type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;

package/src/dialog/DialogTitle.tsx

@@ -1,9 +1,10 @@
 import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
+
 import { type Margin } from "../cssUtils.js";
 import {
-  Typography,
   type CustomTypographyComponent,
+  Typography,
   type TypographyProps,
 } from "../typography/Typography.js";
 import { type TypographyType } from "../typography/typographyStyles.js";

package/src/dialog/FixedDialog.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { forwardRef, useRef, type RefObject } from "react";
+
+import { type RefObject, forwardRef, useRef } from "react";
+
 import { TOP_INNER_RIGHT_ANCHOR } from "../positioning/constants.js";
 import {
   type CalculateFixedPositionOptions,
@@ -8,7 +10,7 @@ import {
 import { useFixedPositioning } from "../positioning/useFixedPositioning.js";
 import { SCALE_CLASSNAMES } from "../transition/useScaleTransition.js";
 import { type LabelRequiredForA11y } from "../types.js";
-import { Dialog, type BaseDialogProps } from "./Dialog.js";
+import { type BaseDialogProps, Dialog } from "./Dialog.js";
 
 export interface BaseFixedDialogProps extends Omit<BaseDialogProps, "type"> {
   anchor?: PositionAnchor;
@@ -95,10 +97,10 @@ export const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(
       anchor = TOP_INNER_RIGHT_ANCHOR,
       options,
       getFixedPositionOptions,
-      onEnter,
+      onEnter = noop,
       onEntering,
-      onEntered,
-      onExited = noop,
+      onEntered = noop,
+      onExited,
       onRequestClose,
       overlayHidden = true,
       disableScrollLock = true,
@@ -111,13 +113,16 @@ export const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(
       nodeRef,
       style: propStyle,
       transformOrigin: true,
-      onEnter,
+      onEnter(appearing) {
+        onEnter(appearing);
+        disableExitFocus.current = false;
+      },
       onEntering,
-      onEntered,
-      onExited() {
-        onExited();
+      onEntered(appearing) {
+        onEntered(appearing);
         disableExitFocus.current = false;
       },
+      onExited,
       anchor,
       fixedTo,
       onScroll(_event, data) {

package/src/dialog/NestedDialogProvider.ts

@@ -1,4 +1,5 @@
 "use client";
+
 import { createContext, useContext } from "react";
 
 export type SetChildDialogVisible = (visible: boolean) => void;

package/src/dialog/styles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import {
   type CSSTransitionClassNames,
   type TransitionTimeout,
@@ -199,17 +200,17 @@ export function dialogFooter(
 }
 
 /** @since 4.0.0 */
-export const DEFAULT_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
+export const DEFAULT_DIALOG_CLASSNAMES = {
   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",
-};
+} as const satisfies CSSTransitionClassNames;
 
 /** @since 4.0.0 */
-export const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout> = {
+export const DEFAULT_DIALOG_TIMEOUT = {
   enter: 200,
   exit: 150,
-};
+} as const satisfies TransitionTimeout;

package/src/divider/Divider.tsx

@@ -1,5 +1,6 @@
-import { forwardRef, type ElementType, type HTMLAttributes } from "react";
-import { divider, type DividerClassNameOptions } from "./styles.js";
+import { type ElementType, type HTMLAttributes, forwardRef } from "react";
+
+import { type DividerClassNameOptions, divider } from "./styles.js";
 
 export type DividerElement = HTMLHRElement | HTMLDivElement;
 

package/src/divider/styles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-divider");

package/src/draggable/useDraggable.ts

@@ -1,14 +1,16 @@
 "use client";
+
 import { cnb } from "cnbuilder";
 import {
+  type HTMLAttributes,
+  type Ref,
+  type RefCallback,
   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 {
@@ -344,6 +346,9 @@ export interface DraggableImplementation<E extends HTMLElement = HTMLElement>
  * - window splitters
  * - sliders
  *
+ * NOTE: This requires `touch-action: none` to be applied to the draggable
+ * element to help prevent page scrolling on mobile devices.
+ *
  * @since 6.0.0
  */
 export function useDraggable<E extends HTMLElement>(
@@ -459,8 +464,12 @@ export function useDraggable<E extends HTMLElement>(
 
     const stopDragging = (event: MouseEvent | TouchEvent): void => {
       updatePosition(event);
-      draggingRef.current = false;
       setDragging(false);
+      draggingRef.current = false;
+      // blur the element so that it no longer maintains the `:focus-visible`
+      // styles if they were applied. pressing tab would re-focus this element
+      // so the tab order is preserved
+      nodeRef.current?.blur();
     };
 
     const updateKey = isTouch ? "touchmove" : "mousemove";
@@ -491,11 +500,15 @@ export function useDraggable<E extends HTMLElement>(
   ]);
 
   const prevRange = useRef({ min, max, step });
-  if (
-    prevRange.current.min !== min ||
-    prevRange.current.max !== max ||
-    prevRange.current.step !== step
-  ) {
+  useEffect(() => {
+    if (
+      prevRange.current.min === min &&
+      prevRange.current.max === max &&
+      prevRange.current.step === step
+    ) {
+      return;
+    }
+
     prevRange.current = { min, max, step };
     setValue((prevValue) =>
       nearest({
@@ -505,7 +518,7 @@ export function useDraggable<E extends HTMLElement>(
         value: prevValue,
       })
     );
-  }
+  }, [max, min, setValue, step]);
 
   const mouseEventHandlers: Required<DraggableMouseEventHandlers<E>> = {
     onMouseDown: useCallback(
@@ -621,8 +634,8 @@ export function useDraggable<E extends HTMLElement>(
           return;
         }
 
-        const decrementKey = vertical ? "ArrowUp" : "ArrowLeft";
-        const incrementKey = vertical ? "ArrowDown" : "ArrowRight";
+        const decrementKey = vertical ? "ArrowDown" : "ArrowLeft";
+        const incrementKey = vertical ? "ArrowUp" : "ArrowRight";
 
         switch (event.key) {
           case decrementKey:

package/src/draggable/utils.ts

@@ -1,8 +1,9 @@
 import { type MouseEvent, type RefObject, type TouchEvent } from "react";
+
 import {
-  getClientPosition,
   type ClientPositionEvent,
   type ClientPositionOptions,
+  getClientPosition,
 } from "../utils/getClientPosition.js";
 import { getRangeSteps } from "../utils/getRangeSteps.js";
 import { nearest } from "../utils/nearest.js";

package/src/expansion-panel/ExpansionList.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { useExpansionList } from "./useExpansionList.js";
 

package/src/expansion-panel/ExpansionPanel.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { forwardRef, type CSSProperties, type ReactNode } from "react";
+
+import { type CSSProperties, type ReactNode, forwardRef } from "react";
+
 import { Card, type CardProps } from "../card/Card.js";
 import { CardContent, type CardContentProps } from "../card/CardContent.js";
 import { useCollapseTransition } from "../transition/useCollapseTransition.js";

package/src/expansion-panel/ExpansionPanelHeader.tsx

@@ -1,13 +1,14 @@
 import { cnb } from "cnbuilder";
 import {
-  forwardRef,
   type ButtonHTMLAttributes,
   type MouseEventHandler,
   type ReactNode,
+  forwardRef,
 } from "react";
+
 import { ButtonUnstyled } from "../button/ButtonUnstyled.js";
 import { IconRotator, type IconRotatorProps } from "../icon/IconRotator.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { type PropsWithRef } from "../types.js";
 import { Typography, type TypographyProps } from "../typography/Typography.js";
 import { type TypographyType } from "../typography/typographyStyles.js";

package/src/expansion-panel/expansionPanelStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-expansion-panel");

package/src/expansion-panel/useExpansionList.ts

@@ -1,9 +1,11 @@
 "use client";
+
 import type {
   FocusEventHandler,
   KeyboardEventHandler,
   MouseEventHandler,
 } from "react";
+
 import type { KeyboardMovementProviderImplementation } from "../movement/types.js";
 import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 

package/src/expansion-panel/useExpansionPanels.ts

@@ -1,4 +1,5 @@
 "use client";
+
 import type { UseStateInitializer, UseStateSetter } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useReadonlySet } from "../useReadonlySet.js";

package/src/files/FileInput.tsx

@@ -1,12 +1,14 @@
 "use client";
+
 import {
-  forwardRef,
   type InputHTMLAttributes,
   type LabelHTMLAttributes,
   type ReactNode,
+  forwardRef,
 } from "react";
+
 import { type ButtonClassNameThemeOptions } from "../button/buttonStyles.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { type PropsWithRef } from "../types.js";

package/src/files/styles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { type ButtonClassNameOptions, button } from "../button/buttonStyles.js";
 
 /** @since 6.0.0 */

package/src/files/useFileUpload.ts

@@ -1,28 +1,30 @@
 "use client";
+
 import { nanoid } from "nanoid";
 import {
+  type ChangeEvent,
+  type DragEvent,
   useCallback,
   useEffect,
   useReducer,
-  type ChangeEvent,
-  type DragEvent,
 } from "react";
+
 import {
-  getFileParser as defaultGetFileParser,
   type CompletedFileUploadStats,
   type FileReaderResult,
   type FileUploadHandlers,
   type FileUploadStats,
   type GetFileParser,
   type ProcessingFileUploadStats,
+  getFileParser as defaultGetFileParser,
 } from "./utils.js";
 import {
   FileAccessError,
-  isValidFileName as defaultIsValidFileName,
-  validateFiles as defaultValidateFiles,
   type FileValidationError,
   type FileValidationOptions,
   type FilesValidator,
+  isValidFileName as defaultIsValidFileName,
+  validateFiles as defaultValidateFiles,
 } from "./validation.js";
 
 const noop = (): void => {

package/src/files/utils.ts

@@ -142,7 +142,7 @@ export function isMediaFile(file: File): boolean {
  *
  * @since 2.9.0
  * @since 6.0.0 Removed `"readAsBinaryString` since it is deprecated
- * {@see https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString}
  */
 export type FileReaderParser =
   | "readAsText"
@@ -206,6 +206,36 @@ export interface SplitFileUploads {
 /**
  * This util will split all the current upload stats by status.
  *
+ * @example Main Usage
+ * ```tsx
+ * import { FileUpload } from "@react-md/core/files/FileUpload";
+ * import { useFileUpload } from "@react-md/core/files/useFileUpload";
+ * import { getSplitFileUploads } from "@react-md/core/files/utils";
+ *
+ * function Example() {
+ *   const { stats, errors, accept, onChange } = useFileUpload();
+ *   const { pending, uploading, completed } = getSplitFileUploads(stats);
+ *
+ *   return (
+ *     <>
+ *       <FileUpload accept={accept} onChange={onChange} />
+ *       {pending.map(({ key, file, progress, status }) => {
+ *         // pretend some UI for each pending item with the provided data
+ *         return null;
+ *       })}
+ *       {uploading.map(({ file, key, progress, status }) => {
+ *         // pretend some UI for each uploading item with the provided data
+ *         return null;
+ *       })}
+ *       {complete.map(({ file, key, progress, result, status }) => {
+ *         // pretend some UI for each complete item with the provided data
+ *         return null;
+ *       })}
+ *     </>
+ *   );
+ * }
+ * ```
+ *
  * @param stats - The {@link FileUploadStats} list generally returned by the
  * {@link useFileUpload} hook.
  * @returns the {@link SplitFileUploads}.