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

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
@@ -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/Fieldset.tsx

@@ -35,8 +35,6 @@ export function fieldset(options: FieldsetClassNameOptions = {}): string {
 }
 
 /**
- * **Server Component**
- *
  * @since 6.0.0 Removed the `legend`, `legendStyle`,
  * `legendClassName`, and `legendSROnly` props. You must provide a `Legend`
  * yourself manually instead of using a prop.

package/src/form/FormMessage.tsx

@@ -9,8 +9,6 @@ import {
 } from "./types.js";
 
 /**
- * **Server Component**
- *
  * The `FormMessage` component is used to create additional helper messages or
  * error messages and generally placed below the related `TextField`. If a
  * `length` (of the `value`) and `maxLength` are provided, a counter will also

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";
 
 /**
@@ -18,7 +18,6 @@ export interface FormMessageContainerProps
 }
 
 /**
- * **Server Component**
  * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper
  * and renders the {@link FormMessage} component.
  *
@@ -37,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/FormMessageCounter.tsx

@@ -16,8 +16,6 @@ export interface FormMessageCounterProps
 }
 
 /**
- * **Server Component**
- *
  * This component can be used to create a "counter" within the
  * {@link FormMessage} component.
  *

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,
@@ -285,7 +289,7 @@ export const InputToggle = forwardRef<HTMLInputElement, InputToggleProps>(
     // set on the `remaining` object to bypass the eslint rule about
     // aria-checked not being valid for textbox role
     remaining["aria-checked"] =
-      remaining["aria-checked"] ?? indeterminate ? "mixed" : undefined;
+      (remaining["aria-checked"] ?? indeterminate) ? "mixed" : undefined;
 
     return (
       <FormMessageContainer

package/src/form/InputToggleIcon.tsx

@@ -53,8 +53,6 @@ export interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 /**
- * **Server Component**
- *
  * @since 2.8.0
  * @since 6.0.0 Updated to use different icons for each checked state instead
  * of a css overlay hack.

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;
 
@@ -65,8 +65,6 @@ export function label(options: LabelClassNameOptions): string {
 }
 
 /**
- * **Server Component**
- *
  * Most of the form components already use this `Label` internally when a
  * `label` prop has been provided. You should generally use this component if
  * you need to separate the label from an existing form component or you need to
@@ -78,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,

package/src/form/Legend.tsx

@@ -14,8 +14,6 @@ export interface LegendProps extends TypographyProps {
 }
 
 /**
- * **Server Component**
- *
  * This should be used within a `Fieldset` to apply a label.
  *
  * @since 6.0.0

package/src/form/Listbox.tsx

@@ -0,0 +1,87 @@
+import {
+  type Dispatch,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  useMemo,
+} from "react";
+import { Menu, type MenuProps } from "../menu/Menu.js";
+import { type LabelRequiredForA11y } from "../types.js";
+import { ListboxProvider } from "./ListboxProvider.js";
+import { type OptionSelectedIconProps } from "./Option.js";
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export type ListboxValue = string | number | null | Record<string, unknown>;
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface ListboxProps<Value extends ListboxValue>
+  extends MenuProps,
+    OptionSelectedIconProps {
+  nodeRef?: Ref<HTMLDivElement>;
+
+  value: Value | readonly NonNullable<ListboxValue>[];
+  setValue: Dispatch<NonNullable<Value>>;
+  children: ReactNode;
+}
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export function Listbox<T extends ListboxValue>(
+  props: LabelRequiredForA11y<ListboxProps<T>>
+): ReactElement {
+  const {
+    value,
+    setValue,
+    children,
+    nodeRef,
+    selectedIconAfter,
+    selectedIcon,
+    unselectedIcon,
+    disableSelectedIcon,
+    ...remaining
+  } = props;
+  const values = useMemo(() => {
+    if (Array.isArray(value)) {
+      return new Set(value);
+    }
+
+    return new Set([value]);
+  }, [value]);
+
+  return (
+    <ListboxProvider
+      value={useMemo(
+        () => ({
+          selectOption: setValue,
+          isOptionSelected(option) {
+            return values.has(option);
+          },
+          selectedIcon,
+          unselectedIcon,
+          selectedIconAfter,
+          disableSelectedIcon,
+        }),
+        [
+          disableSelectedIcon,
+          selectedIcon,
+          selectedIconAfter,
+          setValue,
+          unselectedIcon,
+          values,
+        ]
+      )}
+    >
+      <Menu {...remaining} ref={nodeRef}>
+        {children}
+      </Menu>
+    </ListboxProvider>
+  );
+}

package/src/form/ListboxProvider.ts

@@ -0,0 +1,37 @@
+"use client";
+import { createContext, useContext } from "react";
+import { type OptionSelectedIconProps } from "./Option.js";
+
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export interface ListboxContext extends OptionSelectedIconProps {
+  // NOTE: These are not converted to arrow functions so the option can be
+  // inferred correctly
+  selectOption(option: unknown): void;
+  isOptionSelected(option: unknown): boolean;
+}
+
+const context = createContext<ListboxContext | null>(null);
+
+/**
+ * **Client Component**
+ *
+ * @internal
+ * @since 6.0.0
+ */
+export const { Provider: ListboxProvider } = context;
+
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export function useListboxContext(): ListboxContext {
+  const value = useContext(context);
+  if (!value) {
+    throw new Error("The `ListboxProvider` must be a parent component");
+  }
+
+  return value;
+}

package/src/form/MenuItemTextField.tsx

@@ -33,7 +33,7 @@ export const MenuItemTextField = forwardRef<
   HTMLInputElement,
   MenuItemTextFieldProps
 >(function MenuItemTextField(props, ref) {
-  const { liProps, onKeyDown, stretch = true, ...remaining } = props;
+  const { liProps, onKeyDown, ...remaining } = props;
   return (
     <li
       role="none"
@@ -47,7 +47,6 @@ export const MenuItemTextField = forwardRef<
       <TextField
         {...remaining}
         ref={ref}
-        stretch={stretch}
         onKeyDown={(event) => {
           onKeyDown?.(event);
           switch (event.key) {