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

package/src/files/utils.ts

@@ -0,0 +1,234 @@
+import { type ChangeEventHandler, type DragEventHandler } from "react";
+
+/** @since 2.9.0 */
+export interface BaseFileUploadStats {
+  /**
+   * A unique key associated with each upload generated by `nanoid`.
+   */
+  key: string;
+
+  /**
+   * The file instance that is being uploaded.
+   */
+  file: File;
+
+  /**
+   * The current upload progress as a percentage from 0 - 100 percent.
+   */
+  progress: number;
+}
+
+/** @since 2.9.0 */
+export interface ProcessingFileUploadStats extends BaseFileUploadStats {
+  status: "pending" | "uploading";
+}
+
+/** @since 2.9.0 */
+export type FileReaderResult = FileReader["result"];
+
+/** @since 2.9.0 */
+export interface CompletedFileUploadStats extends BaseFileUploadStats {
+  status: "complete";
+
+  /**
+   * The result after a `FileReader` has read a file completely.
+   *
+   * Note: This _should_ be an `ArrayBuffer` if the next step is to upload to a
+   * server.
+   *
+   * @see {@link FileReaderParser}
+   * @see {@link getFileParser}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/FileReader | FileReader}
+   */
+  result: FileReaderResult;
+}
+
+/** @since 2.9.0 */
+export type FileUploadStats =
+  | ProcessingFileUploadStats
+  | CompletedFileUploadStats;
+
+/** @since 2.9.0 */
+export type FileUploadStatus = FileUploadStats["status"];
+
+/** @since 2.9.0 */
+export interface FileUploadHandlers<E extends HTMLElement> {
+  onDrop?: DragEventHandler<E>;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+
+/**
+ * This will first check if the mime-type of the file starts with `text/` and
+ * fallback to checking a few file names or extensions that should be considered
+ * text.
+ *
+ * This function is not guaranteed to be 100% correct and is only useful if
+ * trying to generate a preview of files uploaded to the browser.
+ *
+ * @param file - The file to check
+ * @returns `true` if the file should be considered as a text-content file.
+ * @since 2.9.0
+ */
+export function isTextFile(file: File): boolean {
+  return /\.((j|t)sx?|json|lock|hbs|ya?ml|log|txt|md)$/i.test(file.name);
+}
+
+/**
+ * This will first check if the mime-type of the file starts with `text\/` and
+ * fallback to checking a few file names or extensions that should be considered
+ * text.
+ *
+ * This function is not guaranteed to be 100% correct and is only useful if
+ * trying to generate a preview of files uploaded to the browser.
+ *
+ * @param file - The file to check
+ * @returns `true` if the file should be considered as a text content file.
+ * @since 2.9.0
+ */
+export function isImageFile(file: File): boolean {
+  return /\.(a?png|avif|svg|tiff|gifv?|jpe?g)/i.test(file.name);
+}
+
+/**
+ * This will first check if the mime-type of the file starts with `audio/` and
+ * fallback to checking a few file names or extensions that should be considered
+ * audio.
+ *
+ * This function is not guaranteed to be 100% correct and is only useful if
+ * trying to generate a preview of files uploaded to the browser.
+ *
+ * @param file - The file to check
+ * @returns `true` if the file should be considered as a audio content file.
+ * @since 2.9.0
+ */
+export function isAudioFile(file: File): boolean {
+  return /\.(mp3|wav|ogg|m4p|flac)$/i.test(file.name);
+}
+
+/**
+ * This will first check if the mime-type of the file starts with `video/` and
+ * fallback to checking a few file names or extensions that should be considered
+ * video.
+ *
+ * This function is not guaranteed to be 100% correct and is only useful if
+ * trying to generate a preview of files uploaded to the browser.
+ *
+ * @param file - The file to check
+ * @returns `true` if the file should be considered as a video content file.
+ * @since 2.9.0
+ */
+export function isVideoFile(file: File): boolean {
+  return /\.(mkv|mpe?g|mov|avi|flv|webm|mp4)$/i.test(file.name);
+}
+
+/**
+ * This function is not guaranteed to be 100% correct and is only useful if
+ * trying to generate a preview of files uploaded to the browser.
+ *
+ * @param file - The file to check
+ * @returns `true` if the file matches an image, audio, or video file.
+ * @since 2.9.0
+ */
+export function isMediaFile(file: File): boolean {
+  return isImageFile(file) || isAudioFile(file) || isVideoFile(file);
+}
+
+/**
+ * One of the function names from a `FileReader` to upload a file to the
+ * client.
+ *
+ * Note: If this file does not need to be previewed in the browser and will
+ * immediately be uploaded to a server, use `readAsArrayBuffer`.
+ *
+ * @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}
+ */
+export type FileReaderParser =
+  | "readAsText"
+  | "readAsDataURL"
+  | "readAsArrayBuffer";
+
+/**
+ * A function that should return one of the {@link FileReaderParser} functions
+ * to start uploading a file to the browser.
+ *
+ * @example The Default File Upload Parser
+ * ```ts
+ * export const getFileParser: GetFileParser = (file) => {
+ *   if (isMediaFile(file)) {
+ *     return "readAsDataURL";
+ *   }
+ *
+ *   if (isTextFile(file)) {
+ *     return "readAsText";
+ *   }
+ *
+ *   return "readAsArrayBuffer";
+ * };
+ * ```
+ *
+ * @param file - The file to get a parser for
+ * @returns the {@link FileReaderParser} string.
+ * @since 2.9.0
+ */
+export type GetFileParser = (file: File) => FileReaderParser;
+
+/**
+ * This function will attempt to read:
+ * - media (image, audio, and video) files as a data url so they can be
+ *   previewed in `<img>`, `<audio>`, and `<video>` tags
+ * - text files as plain text
+ * - everything else as an `ArrayBuffer` which can be manually converted into a
+ *   data url if needed with `URL.createObjectURL`
+ *
+ * @since 2.9.0
+ */
+export const getFileParser: GetFileParser = (file) => {
+  if (isMediaFile(file)) {
+    return "readAsDataURL";
+  }
+
+  if (isTextFile(file)) {
+    return "readAsText";
+  }
+
+  return "readAsArrayBuffer";
+};
+
+/** @since 2.9.0 */
+export interface SplitFileUploads {
+  readonly pending: readonly ProcessingFileUploadStats[];
+  readonly uploading: readonly ProcessingFileUploadStats[];
+  readonly complete: readonly CompletedFileUploadStats[];
+}
+
+/**
+ * This util will split all the current upload stats by status.
+ *
+ * @param stats - The {@link FileUploadStats} list generally returned by the
+ * {@link useFileUpload} hook.
+ * @returns the {@link SplitFileUploads}.
+ * @since 2.9.0
+ */
+export function getSplitFileUploads(
+  stats: readonly FileUploadStats[]
+): SplitFileUploads {
+  const pending: ProcessingFileUploadStats[] = [];
+  const uploading: ProcessingFileUploadStats[] = [];
+  const complete: CompletedFileUploadStats[] = [];
+  stats.forEach((stat) => {
+    if (stat.status === "pending") {
+      pending.push(stat);
+    } else if (stat.status === "uploading") {
+      uploading.push(stat);
+    } else if (stat.status === "complete") {
+      complete.push(stat);
+    } else {
+      /* istanbul ignore next */
+      throw new Error("Invalid upload stat");
+    }
+  });
+
+  return { pending, uploading, complete };
+}

package/src/{form/fileUtils.ts → files/validation.ts}

@@ -1,62 +1,4 @@
 import { nanoid } from "nanoid";
-import { type ChangeEventHandler, type DragEventHandler } from "react";
-
-/** @since 2.9.0 */
-export interface BaseFileUploadStats {
-  /**
-   * A unique key associated with each upload generated by `nanoid`.
-   */
-  key: string;
-
-  /**
-   * The file instance that is being uploaded.
-   */
-  file: File;
-
-  /**
-   * The current upload progress as a percentage from 0 - 100 percent.
-   */
-  progress: number;
-}
-
-/** @since 2.9.0 */
-export interface ProcessingFileUploadStats extends BaseFileUploadStats {
-  status: "pending" | "uploading";
-}
-
-/** @since 2.9.0 */
-export type FileReaderResult = FileReader["result"];
-
-/** @since 2.9.0 */
-export interface CompletedFileUploadStats extends BaseFileUploadStats {
-  status: "complete";
-
-  /**
-   * The result after a `FileReader` has read a file completely.
-   *
-   * Note: This _should_ be an `ArrayBuffer` if the next step is to upload to a
-   * server.
-   *
-   * @see {@link FileReaderParser}
-   * @see {@link getFileParser}
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/FileReader | FileReader}
-   */
-  result: FileReaderResult;
-}
-
-/** @since 2.9.0 */
-export type FileUploadStats =
-  | ProcessingFileUploadStats
-  | CompletedFileUploadStats;
-
-/** @since 2.9.0 */
-export type FileUploadStatus = FileUploadStats["status"];
-
-/** @since 2.9.0 */
-export interface FileUploadHandlers<E extends HTMLElement> {
-  onDrop?: DragEventHandler<E>;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-}
 
 /**
  * An error that will be created if a user tries dragging and dropping files
@@ -197,7 +139,7 @@ export type FileValidationError<E = GenericFileError> =
  * @param error - The error to check
  * @returns true if the error is a {@link FileAccessError}
  */
-export function isGenericFileError<CustomError extends {}>(
+export function isGenericFileError<CustomError extends object>(
   error: FileValidationError<CustomError>
 ): error is GenericFileError {
   return "name" in error && error.name === "GenericFileError";
@@ -211,7 +153,7 @@ export function isGenericFileError<CustomError extends {}>(
  * @param error - The error to check
  * @returns true if the error is a {@link FileAccessError}
  */
-export function isFileAccessError<CustomError extends {}>(
+export function isFileAccessError<CustomError extends object>(
   error: FileValidationError<CustomError>
 ): error is FileAccessError {
   return "name" in error && error.name === "FileAccessError";
@@ -225,7 +167,7 @@ export function isFileAccessError<CustomError extends {}>(
  * @param error - The error to check
  * @returns true if the error is a {@link TooManyFilesError}
  */
-export function isTooManyFilesError<CustomError extends {}>(
+export function isTooManyFilesError<CustomError extends object>(
   error: FileValidationError<CustomError>
 ): error is TooManyFilesError {
   return "name" in error && error.name === "TooManyFilesError";
@@ -239,7 +181,7 @@ export function isTooManyFilesError<CustomError extends {}>(
  * @param error - The error to check
  * @returns true if the error is a {@link FileSizeError}
  */
-export function isFileSizeError<CustomError extends {}>(
+export function isFileSizeError<CustomError extends object>(
   error: FileValidationError<CustomError>
 ): error is FileSizeError {
   return "name" in error && error.name === "FileSizeError";
@@ -253,7 +195,7 @@ export function isFileSizeError<CustomError extends {}>(
  * @param error - The error to check
  * @returns true if the error is a {@link FileExtensionError}
  */
-export function isFileExtensionError<CustomError extends {}>(
+export function isFileExtensionError<CustomError extends object>(
   error: FileValidationError<CustomError>
 ): error is FileExtensionError {
   return "name" in error && error.name === "FileExtensionError";
@@ -359,7 +301,9 @@ export interface FilesValidationOptions
   totalFiles: number;
 }
 
-/** @since 2.9.0 */
+/**
+ * @since 2.9.0
+ */
 export interface ValidatedFilesResult<CustomError> {
   /**
    * A filtered list of files that have been validated and can be queued for the
@@ -403,7 +347,7 @@ export interface ValidatedFilesResult<CustomError> {
  * };
  * ```
  *
- * @typeparam E - An optional custom file validation error.
+ * @typeParam E - An optional custom file validation error.
  * @param files - The list of files to check
  * @param options - The {@link FilesValidationOptions}
  * @returns the {@link ValidatedFilesResult}
@@ -420,7 +364,7 @@ export type FilesValidator<CustomError = never> = (
  * {@link useFileUpload} that ensures the {@link FilesValidationOptions} are
  * enforced before allowing a file to be uploaded.
  *
- * @typeparam E - An optional custom file validation error.
+ * @typeParam E - An optional custom file validation error.
  * @param files - The list of files to check
  * @param options - The {@link FilesValidationOptions}
  * @returns the {@link ValidatedFilesResult}
@@ -428,7 +372,9 @@ export type FilesValidator<CustomError = never> = (
  */
 export function validateFiles<CustomError>(
   files: readonly File[],
-  {
+  options: FilesValidationOptions
+): ValidatedFilesResult<CustomError> {
+  const {
     maxFiles,
     extensions,
     minFileSize,
@@ -437,8 +383,8 @@ export function validateFiles<CustomError>(
     totalFiles,
     totalFileSize,
     isValidFileName,
-  }: FilesValidationOptions
-): ValidatedFilesResult<CustomError> {
+  } = options;
+
   const errors: FileValidationError<CustomError>[] = [];
   const pending: File[] = [];
   const extraFiles: File[] = [];
@@ -510,178 +456,3 @@ export function validateFiles<CustomError>(
 
   return { pending, errors };
 }
-
-/**
- * This will first check if the mime-type of the file starts with `text/` and
- * fallback to checking a few file names or extensions that should be considered
- * text.
- *
- * This function is not guaranteed to be 100% correct and is only useful if
- * trying to generate a preview of files uploaded to the browser.
- *
- * @param file - The file to check
- * @returns `true` if the file should be considered as a text-content file.
- * @since 2.9.0
- */
-export function isTextFile(file: File): boolean {
-  return /\.((j|t)sx?|json|lock|hbs|ya?ml|log|txt|md)$/i.test(file.name);
-}
-
-/**
- * This will first check if the mime-type of the file starts with `text\/` and
- * fallback to checking a few file names or extensions that should be considered
- * text.
- *
- * This function is not guaranteed to be 100% correct and is only useful if
- * trying to generate a preview of files uploaded to the browser.
- *
- * @param file - The file to check
- * @returns `true` if the file should be considered as a text content file.
- * @since 2.9.0
- */
-export function isImageFile(file: File): boolean {
-  return /\.(a?png|avif|svg|tiff|gifv?|jpe?g)/i.test(file.name);
-}
-
-/**
- * This will first check if the mime-type of the file starts with `audio/` and
- * fallback to checking a few file names or extensions that should be considered
- * audio.
- *
- * This function is not guaranteed to be 100% correct and is only useful if
- * trying to generate a preview of files uploaded to the browser.
- *
- * @param file - The file to check
- * @returns `true` if the file should be considered as a audio content file.
- * @since 2.9.0
- */
-export function isAudioFile(file: File): boolean {
-  return /\.(mp3|wav|ogg|m4p|flac)$/i.test(file.name);
-}
-
-/**
- * This will first check if the mime-type of the file starts with `video/` and
- * fallback to checking a few file names or extensions that should be considered
- * video.
- *
- * This function is not guaranteed to be 100% correct and is only useful if
- * trying to generate a preview of files uploaded to the browser.
- *
- * @param file - The file to check
- * @returns `true` if the file should be considered as a video content file.
- * @since 2.9.0
- */
-export function isVideoFile(file: File): boolean {
-  return /\.(mkv|mpe?g|mov|avi|flv|webm|mp4)$/i.test(file.name);
-}
-
-/**
- * This function is not guaranteed to be 100% correct and is only useful if
- * trying to generate a preview of files uploaded to the browser.
- *
- * @param file - The file to check
- * @returns `true` if the file matches an image, audio, or video file.
- * @since 2.9.0
- */
-export function isMediaFile(file: File): boolean {
-  return isImageFile(file) || isAudioFile(file) || isVideoFile(file);
-}
-
-/**
- * One of the function names from a `FileReader` to upload a file to the
- * client.
- *
- * Note: If this file does not need to be previewed in the browser and will
- * immediately be uploaded to a server, use `readAsArrayBuffer`.
- *
- * @since 2.9.0
- */
-export type FileReaderParser =
-  | "readAsText"
-  | "readAsDataURL"
-  | "readAsBinaryString"
-  | "readAsArrayBuffer";
-
-/**
- * A function that should return one of the {@link FileReaderParser} functions
- * to start uploading a file to the browser.
- *
- * @example The Default File Upload Parser
- * ```ts
- * export const getFileParser: GetFileParser = (file) => {
- *   if (isMediaFile(file)) {
- *     return "readAsDataURL";
- *   }
- *
- *   if (isTextFile(file)) {
- *     return "readAsText";
- *   }
- *
- *   return "readAsArrayBuffer";
- * };
- * ```
- *
- * @param file - The file to get a parser for
- * @returns the {@link FileReaderParser} string.
- * @since 2.9.0
- */
-export type GetFileParser = (file: File) => FileReaderParser;
-
-/**
- * This function will attempt to read:
- * - media (image, audio, and video) files as a data url so they can be
- *   previewed in `<img>`, `<audio>`, and `<video>` tags
- * - text files as plain text
- * - everything else as an `ArrayBuffer` which can be manually converted into a
- *   data url if needed with `URL.createObjectURL`
- *
- * @since 2.9.0
- */
-export const getFileParser: GetFileParser = (file) => {
-  if (isMediaFile(file)) {
-    return "readAsDataURL";
-  }
-
-  if (isTextFile(file)) {
-    return "readAsText";
-  }
-
-  return "readAsArrayBuffer";
-};
-
-/** @since 2.9.0 */
-export interface SplitFileUploads {
-  readonly pending: readonly ProcessingFileUploadStats[];
-  readonly uploading: readonly ProcessingFileUploadStats[];
-  readonly complete: readonly CompletedFileUploadStats[];
-}
-
-/**
- * This util will split all the current upload stats by status.
- *
- * @param stats - The {@link FileUploadStats} list generally returned by the
- * {@link useFileUpload} hook.
- * @returns the {@link SplitFileUploads}.
- * @since 2.9.0
- */
-export function getSplitFileUploads(
-  stats: readonly FileUploadStats[]
-): SplitFileUploads {
-  const pending: ProcessingFileUploadStats[] = [];
-  const uploading: ProcessingFileUploadStats[] = [];
-  const complete: CompletedFileUploadStats[] = [];
-  stats.forEach((stat) => {
-    if (stat.status === "pending") {
-      pending.push(stat);
-    } else if (stat.status === "uploading") {
-      uploading.push(stat);
-    } else if (stat.status === "complete") {
-      complete.push(stat);
-    } else {
-      /* istanbul ignore next */
-      throw new Error("Invalid upload stat");
-    }
-  });
-
-  return { pending, uploading, complete };
-}

package/src/focus/useFocusContainer.ts

@@ -1,15 +1,23 @@
 "use client";
-import type { KeyboardEventHandler, Ref, RefObject } from "react";
-import { useEffect, useRef } from "react";
+import {
+  useEffect,
+  useRef,
+  type KeyboardEventHandler,
+  type Ref,
+  type RefObject,
+} from "react";
 import { TRANSITION_CONFIG } from "../transition/config.js";
-import type {
-  TransitionCallbacks,
-  TransitionEnterHandler,
-  TransitionExitHandler,
+import {
+  type TransitionCallbacks,
+  type TransitionEnterHandler,
+  type TransitionExitHandler,
 } from "../transition/types.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
-import type { FocusElementWithinType } from "./utils.js";
-import { focusElementWithin, getFocusableElements } from "./utils.js";
+import {
+  focusElementWithin,
+  getFocusableElements,
+  type FocusElementWithinType,
+} from "./utils.js";
 
 const noop = (): void => {
   // do nothing

package/src/form/FormMessageContainer.tsx

@@ -1,7 +1,7 @@
-import { cnb } from "cnbuilder";
 import { forwardRef, type HTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
 import { FormMessage } from "./FormMessage.js";
+import { formMessageContainer } from "./formMessageContainerStyles.js";
 import { type FormMessageProps } from "./types.js";
 
 /**
@@ -36,7 +36,7 @@ export const FormMessageContainer = forwardRef<
     <div
       {...remaining}
       ref={ref}
-      className={cnb("rmd-form-message-container", className)}
+      className={formMessageContainer({ className })}
     >
       {children}
       <FormMessage {...messageProps} />

package/src/form/InputToggle.tsx

@@ -8,6 +8,7 @@ import {
   type LabelHTMLAttributes,
   type ReactNode,
 } from "react";
+import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
@@ -151,7 +152,8 @@ export interface BaseInputToggleProps
     FormMessageContainerExtension,
     FormComponentStates,
     InputToggleIconProps,
-    InputToggleLabelProps {
+    InputToggleLabelProps,
+    ComponentWithRippleProps {
   /**
    * @see https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing
    * @defaultValue `type === "checkbox" ? "off" : undefined`
@@ -262,12 +264,14 @@ export const InputToggle = forwardRef<HTMLInputElement, InputToggleProps>(
       onTouchEnd,
       onTouchMove,
       onTouchStart,
+      disableRipple,
       ...remaining
     } = props as CheckboxInputToggleProps;
     const { disabled = false, checked } = props;
 
     const id = useEnsuredId(propId, type);
     const { pressedClassName, ripples, handlers } = useElementInteraction({
+      mode: disableRipple ? "none" : undefined,
       disabled,
       onBlur,
       onClick,

package/src/form/Label.tsx

@@ -22,15 +22,15 @@ const labelStyles = bem("rmd-label");
 export function label(options: LabelClassNameOptions): string {
   const {
     className,
-    gap = false,
-    error = false,
-    dense = false,
-    active = false,
-    stacked = false,
-    reversed = false,
-    disabled = false,
-    floating = false,
-    inactive = false,
+    gap,
+    error,
+    dense,
+    active,
+    stacked,
+    reversed,
+    disabled,
+    floating,
+    inactive,
     floatingActive = active,
   } = options;
 
@@ -76,15 +76,15 @@ export function label(options: LabelClassNameOptions): string {
 export const Label = forwardRef<HTMLLabelElement, LabelProps>(
   function Label(props, ref) {
     const {
-      gap = false,
-      error = false,
-      dense = false,
-      active = false,
-      stacked = false,
-      reversed = false,
-      disabled = false,
-      floating = false,
-      inactive = false,
+      gap,
+      error,
+      dense,
+      active,
+      stacked,
+      reversed,
+      disabled,
+      floating,
+      inactive,
       floatingActive = active,
       className,
       children,