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

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");
       }

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 };
+}